/* ==========================================================================
   DESIGN TOKENS — SocialFrame Figma (Design + variables from MCP export)
   Spacing: --xs 2 / --s 4 / --m 8 / --l 12 / --xl 16 / --xxl 24
   Radii: chip 6 (micro), canvas 16, panel 28, full pill 9999
   Брейкпоинты макета: планшет min 744px, мобайл max 743px (744 / 375)
   ========================================================================== */

/*
 * Карта нод Figma (SocialFrame): Icons 17:5858 · Atoms 17:5859 · Overlay 17:5906 · Objects 17:7588 ·
 * Navigation 17:6049 (Header 2:2688, Header-Mobile 25:16534) · Menu/размеры 17:6168 (2:2899) ·
 * Layers 17:6658 (10:546) · Add-Menu 17:6842 (10:1108) · брейкпоинты 1:4/27:47250, 25:8412/27:47265, …
 */

:root {
    /* Scale (Figma spacing variables) */
    --xs: 2px;
    --s: 4px;
    --m: 8px;
    --l: 12px;
    --xl: 16px;
    --xxl: 24px;

    /* Semantic — светлая тема (Figma 27:47250, MCP get_variable_defs) */
    --background: #eeeeee;
    --on-background: #ffffff;
    --surface: #f5f5f5;
    --border: #c4c7cf;
    --primary: #006fff;
    --font-primary: #18181b;
    --font-secondary: #70747d;
    --font-tertiary: #a0a4ae;
    --button-secondary: #ffffff;
    --button-secondary-font: #18181b;
    --button-primary-font: #ffffff;
    --button-primary-hover: #0065f5;
    --arrow-button-default: #0000000f;
    --arrow-button-hovered: #0000001f;
    --on-background-transparent: #ffffff00;
    --on-surface: #ffffff;
    --button-secondary-hover: #f5f5f5;
    --button-secondary-active: #18181b;
    --button-secondary-active-font: #ffffff;
    --panels: 320px;
    --radius-shape-modal: 24px;

    /* App aliases */
    --app-bg: var(--background);
    --app-surface: var(--on-background);
    --app-surface-hover: var(--button-secondary-hover);
    --app-border: var(--border);
    --app-text: var(--font-primary);
    --app-text-muted: var(--font-secondary);
    --app-accent: var(--primary);
    --app-accent-hover: var(--button-primary-hover);
    --app-accent-text: var(--button-primary-font);
    --layer-row-highlight: #f5f5f5;
    --app-tab-active-bg: var(--arrow-button-default);
    --app-canvas-bg: #18181b;
    --app-radius: 8px;
    --app-radius-sm: 6px;
    --app-radius-panel: 28px;
    --app-radius-canvas: 16px;
    --app-radius-btn: 9999px;
    --app-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --app-shadow-panel: none;
    --app-shadow-panel-soft: none;
    --app-shadow-tabs: 0 2px 12px rgba(0, 0, 0, 0.08);
    --app-transition: 0.3s ease;
    /* Выезд панелей и fade оверлеев — эталон: мобильная панель размеров (.sidebar-left) */
    --panel-motion: 0.25s ease;
    /* Единые поля панелей/шторок от краёв экрана (<1280): меню, слои, Add/Download, модалки */
    --panel-viewport-inset: 16px;
    --panel-slide-offset: calc(2 * var(--panel-viewport-inset));
    /* Узкая колонка как у дроуера размеров на планшете */
    --panel-column-width: 340px;
    --input-radius: 8px;
    --panel-bottom: 24px;

    /* Режим видео: панель кадров — Figma 109:28479 / 109:28481 */
    --video-timeline-panel-height: 96px;
    --video-timeline-panel-pad: 12px;
    --video-timeline-panel-gap: 4px;
    --video-timeline-panel-radius: 16px;
    --video-timeline-frame-size: 72px;
    --video-timeline-frame-radius: 8px;
    --video-timeline-play-size: 72px;
    --video-timeline-track-height: 18px;
    --video-timeline-track-gap: 4px;
    --video-timeline-track-extra-height: 0px;
    --video-timeline-easing-counter-size: 24px;
    --video-timeline-easing-menu-width: 72px;
    --video-timeline-easing-menu-height: 150px;
    --video-timeline-easing-menu-gap: 2px;
    --video-timeline-motion: 0.38s cubic-bezier(0.32, 0.72, 0, 1);

    /* Контролы поверх тёмного холста (одинаково в светлой/тёмной теме страницы) */
    --canvas-chrome-bg: #343538;
    --canvas-chrome-fg: #a8afb7;
    /* Ховер/актив на тёмном треке канвасных пилюль (светлая и тёмная тема страницы) */
    --canvas-chrome-hover: #3e3f42;
    --canvas-chrome-active-pill: rgba(255, 255, 255, 0.14);

    /* Рамка выделения / ручки transform — синий контур и маркеры (одинаково на светлом/тёмном холсте) */
    --selection-frame-accent: #006fff;
    --selection-frame-border-color: var(--selection-frame-accent);
    --selection-frame-handle-fill: var(--selection-frame-accent);
    --selection-frame-handle-stroke: var(--selection-frame-accent);
    --ruler-guide-hit-color: #006fff;

    /* Shape-Modal + shape popover: светлая тема — Figma 27:47252; тёмная — 2:2822 / 17:5859 */
    --shape-picker-surface: #ffffff;
    --shape-picker-tile: #f4f4f5;
    --shape-picker-tile-hover: #e4e4e7;
    --shape-on-picker-fg: #18181b;
    --modal-padding: 32px;
    --modal-width: 400px;

    /* Модалки на тёмной плашке (Figma On Background / Border на панели модалки) — не меняются при светлой теме страницы */
    --modal-dim-surface: #27272a;
    --modal-dim-border: #343538;
    --modal-dim-muted: #a8afb7;
    --modal-dim-placeholder: #4a4d52;
    --modal-dim-accent-border: #6e7278;
    --modal-dim-disabled-fill: rgba(255, 255, 255, 0.16);
    --modal-dim-title: #ffffff;

    /* Плашки над холстом (текст/фигура) — светлая тема Figma 27:47250 */
    --float-toolbar-bg: #ffffff;
    --float-toolbar-separator: var(--border);
    --float-toolbar-border: var(--border);
    --float-toolbar-counter-text: var(--font-secondary);
    --float-toolbar-icon: var(--font-secondary);
    --float-toolbar-font-border: var(--border);
    --float-toolbar-font-text: var(--font-primary);
    --float-toolbar-chevron: var(--font-secondary);
    --float-toolbar-menu-bg: #ffffff;
    --float-toolbar-menu-item: var(--font-secondary);
    --float-toolbar-menu-hover-bg: var(--surface);
    --float-toolbar-menu-active-text: var(--font-primary);
    --float-swatch-ring: var(--border);
    /* Скролл в дропдауне шрифта — Figma Menu (узкий трек) */
    --float-menu-scrollbar-track: transparent;
    --float-menu-scrollbar-thumb: var(--border);
    --float-menu-scrollbar-thumb-hover: var(--font-tertiary);

    /* Color picker — светлая тема (зеркально к Color-Modal) */
    --color-picker-surface: #ffffff;
    --color-picker-text: var(--font-primary);
    --color-picker-muted: var(--font-secondary);
    --color-picker-border: var(--border);
    --color-picker-hex-border: var(--border);
    --color-picker-swatch-border: rgba(0, 0, 0, 0.1);
    --color-picker-swatch-selected-ring: var(--primary);

    /* Safe zones на холсте — светлая тема Figma 27:47254 (чистый красный #f00) */
    --safe-zone-mask-bg: rgba(255, 0, 0, 0.26);
    --safe-zone-item-fill: rgba(255, 0, 0, 0.22);
    --safe-zone-outline-color: #ff0000;
    --safe-zone-outline-style: solid;
    --safe-zone-unsafe-fill: rgba(255, 0, 0, 0.18);
    --safe-zone-unsafe-border: rgba(255, 0, 0, 0.85);
}

/*
 * UI kit (Figma Components / MCP variables):
 * PushButton secondary disabled: --button-secondary + --button-secondary-font + opacity .3 (Header 2:2688)
 * PushButton primary disabled: --arrow-button-hovered + --button-secondary-font + opacity .3
 * Tab (AddItem): p 12 (--l), gap --m, --font-secondary; active/hover — --arrow-button-default + --font-primary
 * Microbutton (Custom Sizes Add): --arrow-button-default, radius --app-radius-sm, padding --m --l
 * Canvas tools + right overlay: --canvas-chrome-bg / --canvas-chrome-fg / --canvas-chrome-hover (в обеих темах страницы)
 */

/* Global shadow reset requested by user */
*,
*::before,
*::after {
    box-shadow: none !important;
}

/* Disabled elements — default cursor */
button:disabled,
input:disabled,
[disabled],
.disabled {
    cursor: default;
}

/* User request: hide sticky focus rings on controls after interactions */
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="tab"]:focus,
[role="tab"]:focus-visible,
.btn:focus,
.btn:focus-visible,
.btn-tab:focus,
.btn-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body.theme-dark {
    /* Тёмная тема (Figma 17:5859 / 1:4, MCP get_variable_defs) */
    --background: #18181b;
    --on-background: #27272a;
    --surface: #202023;
    --border: #343538;
    --primary: #ffbf00;
    --font-primary: #ffffff;
    --font-secondary: #a8afb7;
    --font-tertiary: #54555a;
    --button-secondary: #343538;
    --button-secondary-font: #a8afb7;
    --button-primary-font: #18181b;
    --button-primary-hover: #ebab00;
    --arrow-button-default: #ffffff0f;
    --arrow-button-hovered: #ffffff29;
    --on-background-transparent: #27272a00;
    --on-surface: #343538;
    --button-secondary-hover: #3e3f42;
    --button-secondary-active: #ffffff;
    --button-secondary-active-font: #18181b;
    --panels: 320px;
    --radius-shape-modal: 24px;

    --app-bg: var(--background);
    --app-surface: var(--on-background);
    --app-surface-hover: var(--button-secondary-hover);
    --app-panel-bg: #343538;
    --app-border: var(--border);
    --app-text: #ffffff;
    --app-text-muted: var(--font-secondary);
    --app-accent: var(--primary);
    --app-accent-hover: var(--button-primary-hover);
    --app-accent-text: var(--button-primary-font);
    --layer-row-highlight: #2c2d30;
    --shape-picker-surface: #343538;
    --shape-picker-tile: #343538;
    --shape-picker-tile-hover: #3e3f42;
    --shape-on-picker-fg: #ffffff;
    --app-tab-active-bg: var(--arrow-button-default);
    --app-canvas-bg: #18181b;
    --app-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --app-shadow-panel: none;
    --app-shadow-panel-soft: none;
    --app-shadow-tabs: 0 2px 12px rgba(0, 0, 0, 0.35);

    --float-toolbar-bg: #27272a;
    --float-toolbar-separator: #343538;
    --float-toolbar-border: #343538;
    --float-toolbar-counter-text: #a8afb7;
    --float-toolbar-icon: #a8afb7;
    --float-toolbar-font-border: #a8afb7;
    --float-toolbar-font-text: #ffffff;
    --float-toolbar-chevron: #a8afb7;
    --float-toolbar-menu-bg: #343538;
    --float-toolbar-menu-item: #a8afb7;
    --float-toolbar-menu-hover-bg: #3e3f42;
    --float-toolbar-menu-active-text: #ffffff;
    --float-swatch-ring: #343538;
    --float-menu-scrollbar-track: transparent;
    --float-menu-scrollbar-thumb: #4a4d52;
    --float-menu-scrollbar-thumb-hover: #6e7278;

    --color-picker-surface: #27272a;
    --color-picker-text: #ffffff;
    --color-picker-muted: #a8afb7;
    --color-picker-border: #343538;
    --color-picker-hex-border: #a8afb7;
    --color-picker-swatch-border: rgba(255, 255, 255, 0.1);
    --color-picker-swatch-selected-ring: #ffffff;

    --ruler-guide-hit-color: #ffbf00;

    /* Safe zones — тёмный холст (прежняя «марсала» + пунктир) */
    --safe-zone-mask-bg: rgba(60, 12, 18, 0.55);
    --safe-zone-item-fill: rgba(255, 80, 80, 0.3);
    --safe-zone-outline-color: rgba(255, 68, 68, 0.95);
    --safe-zone-outline-style: solid;
    --safe-zone-unsafe-fill: rgba(255, 0, 0, 0.18);
    --safe-zone-unsafe-border: rgba(255, 0, 0, 0.35);
}

/* Rotation icons in panels: no background; hover — семантический акцент темы */
.shape-toolbar-rotation-icon,
.text-toolbar-rotation-icon {
    background: transparent;
}

.shape-toolbar-rotation-icon:hover,
.text-toolbar-rotation-icon:hover {
    color: var(--app-accent);
}

.shape-toolbar-rotation-icon:hover svg,
.text-toolbar-rotation-icon:hover svg {
    color: var(--app-accent);
}

.selection-frame-rotation-handle:hover {
    color: var(--font-secondary);
}

.selection-frame-rotation-handle:hover svg {
    color: var(--font-secondary);
}

body.theme-dark .shape-toolbar-rotation-icon,
body.theme-dark .text-toolbar-rotation-icon {
    background: transparent;
    color: var(--app-text);
}

body.theme-dark .shape-toolbar-rotation-icon:hover,
body.theme-dark .text-toolbar-rotation-icon:hover {
    color: var(--app-accent);
}

body.theme-dark .shape-toolbar-rotation-icon svg,
body.theme-dark .text-toolbar-rotation-icon svg {
    color: inherit;
}

/* Плашки над холстом: палитра Figma, не цвет сайдбара */
body.theme-dark .shape-toolbar-inner .shape-toolbar-rotation-icon,
body.theme-dark .text-float-toolbar-inner .text-toolbar-rotation-icon {
    color: var(--float-toolbar-icon);
}

body.theme-dark .shape-toolbar-inner .shape-toolbar-rotation-icon:hover,
body.theme-dark .text-float-toolbar-inner .text-toolbar-rotation-icon:hover {
    color: var(--primary);
}

body.theme-dark .shape-toolbar-icon {
    background: var(--app-surface-hover);
    border-radius: 50%;
    color: #fff;
}

body.theme-dark .shape-toolbar-icon svg {
    color: #fff;
}

body.theme-dark .selection-frame-rotation-handle {
    background: var(--app-panel-bg, #27272a);
    color: var(--font-secondary);
    border: none;
}

body.theme-dark .selection-frame-rotation-handle:hover {
    color: var(--font-secondary);
}

body.theme-dark .selection-frame-rotation-handle svg {
    color: inherit;
}

body.theme-dark .selection-frame-rotation-handle:hover svg {
    color: var(--font-secondary);
}

/* Dark theme: inputs — gray bg, light gray border; hover/focus — accent border */
body.theme-dark .input,
body.theme-dark .select {
    background: var(--app-surface-hover);
    border-color: #71717a;
}

body.theme-dark .input:hover,
body.theme-dark .select:hover {
    border-color: var(--app-accent);
}

body.theme-dark .input:focus,
body.theme-dark .select:focus {
    border-color: var(--app-accent);
    background: var(--app-surface-hover);
}

body.theme-dark .modal input[type="text"],
body.theme-dark .modal textarea {
    background: var(--app-surface-hover);
    border-color: #71717a;
}

body.theme-dark .modal input[type="text"]:hover,
body.theme-dark .modal textarea:hover {
    border-color: var(--app-accent);
}

body.theme-dark .modal input[type="text"]:focus,
body.theme-dark .modal textarea:focus {
    border-color: var(--app-accent);
    background: var(--app-surface-hover);
}

/* ==========================================================================
   Custom tooltip (dark style)
   ========================================================================== */
.app-tooltip {
    position: fixed;
    left: -9999px;
    top: 0;
    padding: 8px 12px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-tooltip.visible {
    opacity: 1;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.text-label-m {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.text-label-xs {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.text-button-m {
    font-size: 14px;
    font-weight: 500;
}

.text-header-1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.text-header-2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

/* ==========================================================================
   COMPONENT: Input / Select (unified)
   ========================================================================== */
.input,
.select {
    background: #ffffff;
    border: 1px solid var(--app-border);
    border-radius: var(--input-radius);
    color: var(--app-text);
    font-size: 14px;
    transition: border-color var(--app-transition);
}

.input:focus,
.select:focus {
    outline: none;
    border-color: var(--app-accent);
}

/* ==========================================================================
   BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

body {
    background: var(--app-bg);
    color: var(--app-text);
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1279px) {
    html,
    body {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overscroll-behavior: none;
    }

    .canvas-viewport,
    .canvas-stage,
    .result-container {
        touch-action: none;
    }
}

::selection {
    background: color-mix(in srgb, var(--primary) 28%, var(--background));
    color: var(--font-primary);
}

/* ==========================================================================
   COMPONENT: Button (base)
   ========================================================================== */
.btn {
    height: 40px;
    padding: 0 24px;
    border-radius: var(--app-radius-btn);
    border: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    cursor: pointer;
    transition: background var(--app-transition), color var(--app-transition), border-color var(--app-transition), opacity var(--app-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-primary:focus-visible:not(:disabled) {
    outline-color: var(--button-primary-font);
}

.btn-secondary:disabled {
    background: var(--button-secondary);
    color: var(--button-secondary-font);
}

.btn-primary:disabled {
    background: var(--arrow-button-hovered);
    color: var(--button-secondary-font);
}

/* ==========================================================================
   COMPONENT: Button Primary
   ========================================================================== */
.btn-primary {
    background: var(--app-accent);
    color: var(--app-accent-text);
}

.btn-primary:hover:not(:disabled) {
    background: var(--app-accent-hover);
    color: var(--app-accent-text);
}

/* ==========================================================================
   COMPONENT: Button Secondary
   ========================================================================== */
.btn-secondary {
    background: var(--button-secondary);
    color: var(--button-secondary-font);
    border: none;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

/* Harmonize — rainbow gradient */
.btn-harmonize.btn-secondary {
    color: #fff;
    position: relative;
    overflow: hidden;
    border: none;
    transition: opacity 0.4s ease;
}

.btn-harmonize.btn-secondary:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-harmonize.btn-secondary:disabled {
    cursor: default;
    background: var(--button-secondary);
    color: var(--button-secondary-font);
    opacity: 0.3;
}

.btn-harmonize.btn-secondary:not(:disabled) {
    background: linear-gradient(90deg, #ff4545, #ffe229, #89eb20, #0fc8ed, #ff6cda, #ff4545);
    background-size: 1000% 100%;
    animation: rainbow-move 240s linear infinite;
    color: #fff;
}

.main-header-actions-right .btn-harmonize,
.main-header-actions-right #clearBtn {
    font-size: 14px;
    font-weight: 400;
}

body.theme-dark .btn-harmonize.btn-secondary:disabled {
    background: var(--button-secondary);
    color: var(--button-secondary-font);
    opacity: 0.3;
}

#resetFiltersBtn.harmonize-active {
    color: #000;
}

body.theme-dark #resetFiltersBtn,
body.theme-dark #resetFiltersBtn.harmonize-active {
    color: #fff;
}

@keyframes rainbow-move {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 1000% 0;
    }
}

/* ==========================================================================
   COMPONENT: Button Light (tabs / toggles)
   ========================================================================== */
.btn-light {
    background: transparent;
    color: var(--app-text-muted);
}

.btn-light:hover:not(:disabled) {
    background: var(--app-surface-hover);
    color: var(--app-text);
}

.btn-light.active,
.btn-light.on {
    background: var(--app-surface-hover);
    color: var(--app-accent);
}

body.theme-dark .btn-light.on {
    background: #fff;
    color: #0d0d0f;
}

body.theme-dark .btn-light.off {
    background: var(--app-surface-hover);
    color: var(--app-text-muted);
}

/* ==========================================================================
   COMPONENT: Switch (Safe zones)
   ========================================================================== */
.safe-zones-switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--app-text);
}

.switch {
    position: relative;
    width: 40px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: var(--app-surface-hover);
    cursor: pointer;
    transition: background var(--app-transition);
    flex-shrink: 0;
}

.switch.on {
    background: var(--app-accent);
}

body.theme-dark .switch {
    background: #27272a;
}

body.theme-dark .switch.on {
    background: var(--app-accent);
}

.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform var(--app-transition);
    pointer-events: none;
}

.switch.on .switch-thumb {
    transform: translateX(16px);
}

body.theme-dark .switch-thumb {
    background: #ffffff;
}

/* ==========================================================================
   COMPONENT: Panel (base container)
   ========================================================================== */
.panel,
.sidebar-panel {
    background: var(--app-surface);
    border-radius: var(--app-radius-panel);
    padding: 16px;
}

/* ==========================================================================
   COMPONENT: Panel Left — in-flow, not fixed
   ========================================================================== */
.sidebar-left {
    flex-shrink: 0;
    width: var(--panels);
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    border-radius: var(--app-radius-panel);
    padding: var(--panel-bottom, 24px);
    z-index: 20;
    overflow: hidden;
    position: relative;
    /* Figma: text on --on-background panels */
    --app-text: var(--font-primary);
    --app-text-muted: var(--font-secondary);
}

body.theme-dark .sidebar-left {
    background: var(--app-surface);
}

.sidebar-left-logo {
    margin-bottom: 24px;
}

.sidebar-logo {
    height: 32pt;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Light theme: dark logo; dark theme: light logo */
body:not(.theme-dark) .sidebar-logo-light {
    display: none;
}

body.theme-dark .sidebar-logo-dark {
    display: none;
}

.sidebar-panel-left {
    display: flex;
    flex-direction: column;
    gap: var(--xxl);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
    padding-bottom: 8px;
    position: relative;
}

/* Figma Menu 2:2899 — нижний fade над зоной скролла */
.sidebar-panel-left::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--on-background-transparent, transparent), var(--app-surface));
    z-index: 2;
}

.sidebar-panel-left:hover {
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.sidebar-panel-left .menu-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-panel-left::-webkit-scrollbar {
    width: 4px;
}

.sidebar-panel-left::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-panel-left::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}

.sidebar-panel-left:hover::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
}

.sidebar-panel-left::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}


/* ==========================================================================
   COMPONENT: Custom Sizes — Figma: label row + "Add" pill + item list
   ========================================================================== */
.custom-sizes-block {
    margin-top: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Заголовок Custom Sizes — как Menu-Item L1 (2:2899 / 25:4666): h 46, py 16, без горизонтального сдвига */
.custom-sizes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 46px;
    padding: var(--xl) 0;
    padding-right: 0;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.custom-sizes-header:focus {
    outline: none;
}

.custom-sizes-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.custom-sizes-header .accordion-icon {
    color: var(--font-tertiary);
    flex-shrink: 0;
}

.custom-sizes-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: var(--font-secondary);
    flex: 1;
    min-width: 0;
}

/* Открытый блок — цвет как у раскрытого пункта меню (font-primary) */
.custom-sizes-block.open .custom-sizes-label {
    color: var(--font-primary);
}

/* Micro-Button — Figma 14:1253;2:3057: px 12 py 8, radius 6, Arrow Button Default */
.custom-sizes-add-pill {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    padding: var(--m) var(--l);
    background: var(--arrow-button-default);
    color: var(--font-primary);
    border: none;
    border-radius: var(--app-radius-sm);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease;
    line-height: 14px;
}

.custom-sizes-add-pill:hover {
    background: var(--arrow-button-hovered);
}

.custom-sizes-add-pill:focus {
    outline: none;
}

.custom-sizes-add-pill:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Список кастомных размеров — сворачивается как в Figma (класс .open на блоке) */
.custom-sizes-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    overflow: hidden;
    max-height: 2400px;
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

.custom-sizes-block:not(.open) .custom-sizes-list {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

/* Figma 2:2899 — отступ под заголовком Custom Sizes */
.custom-sizes-block.open .custom-sizes-list {
    padding-top: 6px;
}

.accordion-item.video-network-hidden,
.accordion-subitem.video-size-hidden {
    display: none !important;
}

/* Планшет/мобайл: создание кастомного размера в панели (Figma 25:20892 / 25:21126 / 29:61467) */
.custom-sizes-inline {
    display: none;
    flex-direction: column;
    gap: var(--m);
    padding-top: 6px;
    overflow: hidden;
    max-height: 480px;
    opacity: 1;
    transition: max-height 0.28s ease, opacity 0.2s ease, padding-top 0.2s ease;
}

.custom-sizes-block:not(.open) .custom-sizes-inline {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    pointer-events: none;
}

.custom-sizes-inline-fields {
    display: flex;
    flex-direction: column;
    gap: var(--m);
    width: 100%;
}

.custom-sizes-inline-field {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--app-radius);
    transition: border-color 0.2s ease;
}

.custom-sizes-inline-field.has-value {
    border-color: var(--primary);
}

body.theme-dark .custom-sizes-inline-field.has-value {
    border-color: var(--primary);
}

.custom-sizes-inline-field-inner {
    display: flex;
    align-items: center;
    gap: var(--m);
    padding: 14px var(--xl);
    box-sizing: border-box;
}

.custom-sizes-inline-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--font-primary);
    font-size: 14px;
    line-height: 14px;
    padding: 0;
}

.custom-sizes-inline-input::placeholder {
    color: var(--font-tertiary);
}

.custom-sizes-inline-input:focus {
    outline: none;
}

.custom-sizes-inline-suffix {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 14px;
    color: var(--font-secondary);
}

.custom-sizes-inline-create {
    width: 100%;
    border: none;
    border-radius: var(--app-radius-btn);
    background: var(--surface);
    color: var(--font-tertiary);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    padding: var(--l);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

.custom-sizes-inline-create:disabled {
    cursor: default;
    opacity: 1;
}

body:not(.theme-dark) .custom-sizes-inline-create:disabled {
    background: var(--surface);
    color: var(--font-tertiary);
}

body.theme-dark .custom-sizes-inline-create:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--font-tertiary);
}

.custom-sizes-inline-create:not(:disabled) {
    background: var(--primary);
    color: var(--button-primary-font);
}

.custom-sizes-inline-create:not(:disabled):hover {
    background: var(--button-primary-hover);
}

@media (max-width: 1279px) {
    .custom-sizes-inline {
        display: flex;
    }

    .custom-sizes-block.open .custom-sizes-inline {
        margin-top: var(--l);
        padding-top: var(--l);
    }

    /* Создание — только инлайн-форма; pill «Add» в шапке не нужен */
    .custom-sizes-add-pill {
        display: none !important;
    }

    .custom-size-item-delete {
        right: var(--m);
    }

    .custom-size-modal-backdrop,
    .custom-size-modal {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    .custom-sizes-inline {
        display: none !important;
    }
}

.custom-sizes-add-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-accent);
    color: var(--app-accent-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity var(--app-transition);
}

.custom-sizes-add-btn:hover {
    opacity: 0.85;
}

/* Custom size items — always shown, no accordion */

/* База строки кастомного размера (детали с .accordion-subitem — ниже, после общих правил аккордеона) */
.custom-size-item {
    position: relative;
    min-height: 38px;
    border-radius: 0;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    cursor: pointer;
    transition: color var(--app-transition);
    width: 100%;
}

.custom-size-item:focus {
    outline: none;
}

.custom-size-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.custom-size-item-dim {
    flex: 1;
    min-width: 0;
}

/* Удаление — та же колонка, что у pill «Add» в шапке (right: 30px) */
.custom-size-item-delete {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    margin: 0;
}

.custom-size-item-delete:hover {
    opacity: 1;
}

.custom-size-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
}

/* Custom size modal */
.custom-size-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 180;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.custom-size-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.custom-size-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 181;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.custom-size-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.custom-size-modal-inner {
    --border: var(--modal-dim-border);
    background: var(--modal-dim-surface);
    border-radius: var(--radius-shape-modal);
    padding: var(--modal-padding);
    width: var(--modal-width);
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: var(--modal-padding);
    pointer-events: auto;
}

.custom-size-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.custom-size-modal-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--modal-dim-title);
    line-height: 1;
    margin: 0;
}

.custom-size-modal-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--modal-dim-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.custom-size-modal-close:focus {
    outline: none;
}

.custom-size-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.custom-size-modal-close svg {
    width: 24px;
    height: 24px;
}

.custom-size-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--xl);
    width: 100%;
}

.custom-size-modal-fields {
    display: flex;
    flex-direction: column;
    gap: var(--xl);
    width: 100%;
}

.custom-size-modal-field {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--app-radius);
    transition: border-color 0.2s ease;
}

.custom-size-modal-field.has-value {
    border-color: var(--modal-dim-accent-border);
}

.custom-size-modal-field-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
}

.custom-size-modal-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--modal-dim-muted);
    font-size: 14px;
    line-height: 14px;
    padding: 0;
}

.custom-size-modal-input::placeholder {
    color: var(--modal-dim-placeholder);
}

.custom-size-modal-input:focus {
    outline: none;
}

.custom-size-modal-suffix {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 14px;
    color: var(--modal-dim-muted);
}

.custom-size-modal-actions {
    display: flex;
    width: 100%;
}

.custom-size-modal-create {
    width: 100%;
    border: none;
    border-radius: var(--app-radius-btn);
    background: var(--modal-dim-disabled-fill);
    color: var(--modal-dim-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    padding: var(--l);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.custom-size-modal-create:disabled {
    opacity: 0.3;
    cursor: default;
}

.custom-size-modal-create:not(:disabled) {
    background: var(--primary);
    color: var(--button-primary-font);
    font-weight: 500;
    opacity: 1;
}

.custom-size-modal-create:not(:disabled):hover {
    background: var(--button-primary-hover);
}

.custom-size-modal-create span {
    display: inline-block;
}

/* Video upload modal */
.video-upload-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 182;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.video-upload-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.video-upload-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 183;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.video-upload-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-upload-modal-inner {
    width: min(360px, calc(100vw - 32px));
    border-radius: var(--radius-shape-modal);
    background: var(--modal-dim-surface);
    border: 1px solid var(--modal-dim-border);
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.video-upload-modal-loader {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--primary);
    animation: video-upload-spin 0.9s linear infinite;
}

.video-upload-modal-icon {
    flex-shrink: 0;
    line-height: 0;
}

.video-upload-modal-icon svg,
.video-export-modal-icon svg {
    display: block;
}

.video-upload-modal-title {
    margin: 2px 0 0;
    color: var(--modal-dim-title);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
}

.video-upload-modal-subtitle {
    margin: 0;
    color: var(--modal-dim-muted);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.video-upload-modal-cancel {
    margin-top: 4px;
    width: 100%;
    border: none;
    border-radius: var(--app-radius-btn);
    background: var(--modal-dim-disabled-fill);
    color: var(--modal-dim-title);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.video-upload-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.24);
}

body:not(.theme-dark) .video-upload-modal-inner {
    background: var(--on-background);
    border-color: var(--app-border);
}

body:not(.theme-dark) .video-upload-modal-subtitle {
    color: var(--font-secondary);
}

body:not(.theme-dark) .video-upload-modal-cancel {
    background: var(--surface);
    color: var(--font-primary);
}

body:not(.theme-dark) .video-upload-modal-cancel:hover {
    background: #d8dee5;
}

/* About modal */
.about-modal-backdrop,
.about-modal {
    transition: none;
}

.about-modal-inner {
    width: min(400px, calc(100vw - 32px));
    max-width: 400px;
    min-height: 253px;
    padding: 34px 24px 32px;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    border: none;
    color: var(--modal-dim-title);
}

.about-modal-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin: 0 0 4px;
}

.about-modal-head {
    text-align: center;
    padding: 0;
}

.about-modal-title {
    margin: 0;
    color: var(--modal-dim-title);
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
}

.about-modal-subtitle {
    margin: 4px 0 0;
    color: var(--modal-dim-muted);
    font-size: 14px;
    line-height: 17px;
}

.about-modal-author {
    margin: 28px 0 0;
    color: var(--modal-dim-title);
    font-size: 14px;
    line-height: 17px;
}

.about-modal-author a {
    color: inherit;
    text-decoration: none;
}

.about-modal-author a:hover {
    text-decoration: underline;
}

.about-modal-close-btn {
    margin-top: 31px;
    min-width: 94px;
    height: 38px;
    padding: 0 24px;
    border-radius: 9999px;
}

body:not(.theme-dark) .about-modal-inner {
    background: var(--modal-dim-surface);
    color: var(--modal-dim-title);
}

@keyframes video-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Video export (MP4) — Figma sizemodal 290:38195 */
.video-export-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 182;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.video-export-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.video-export-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 183;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.video-export-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-export-modal-inner {
    width: min(360px, calc(100vw - 32px));
    border-radius: var(--radius-shape-modal);
    background: var(--on-background);
    border: 1px solid var(--app-border);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
}

.video-export-modal-icon {
    color: var(--font-secondary);
    flex-shrink: 0;
    line-height: 0;
}

.video-export-modal-title {
    margin: 4px 0 0;
    color: var(--font-primary);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}

.video-export-modal-copy {
    margin: 0;
    text-align: center;
}

.video-export-modal-copy p {
    margin: 0;
    color: var(--font-secondary);
    font-size: 14px;
    line-height: 1.4;
}

.video-export-modal-copy p+p {
    margin-top: 4px;
}

.video-upload-modal .video-export-modal-copy a {
    color: inherit;
    text-decoration: underline;
}

.video-export-modal-percent {
    margin: 4px 0 0;
    color: var(--primary);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
}

.video-export-modal-cancel {
    margin-top: 8px;
    border: none;
    border-radius: 999px;
    background: var(--button-secondary);
    color: var(--button-secondary-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 12px 24px;
    min-width: 120px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.video-export-modal-cancel:hover:not(:disabled) {
    background: var(--button-secondary-hover);
}

.video-export-modal-cancel:disabled {
    opacity: 0.45;
    cursor: default;
}

body:not(.theme-dark) .video-export-modal-cancel {
    border: 1px solid var(--app-border);
}

/* Custom Sizes — светлая тема страницы (Figma 27:47260 / 27:47250): белая панель, тёмный текст, поля с --border */
body:not(.theme-dark) .custom-size-modal-inner {
    --border: var(--app-border);
    background: var(--on-background);
}

body:not(.theme-dark) .custom-size-modal-title {
    color: var(--font-primary);
}

body:not(.theme-dark) .custom-size-modal-close {
    color: var(--font-secondary);
}

body:not(.theme-dark) .custom-size-modal-close:hover {
    color: var(--font-primary);
}

body:not(.theme-dark) .custom-size-modal-field.has-value {
    border-color: var(--primary);
}

body:not(.theme-dark) .custom-size-modal-input {
    color: var(--font-primary);
}

body:not(.theme-dark) .custom-size-modal-input::placeholder {
    color: var(--font-tertiary);
}

body:not(.theme-dark) .custom-size-modal-suffix {
    color: var(--font-secondary);
}

body:not(.theme-dark) .custom-size-modal-create:disabled {
    background: var(--surface);
    color: var(--font-tertiary);
    opacity: 1;
}

/* ==========================================================================
   COMPONENT: Menu Item — network items
   ========================================================================== */
.accordion-header {
    min-height: 46px;
    padding: var(--xl) 0;
    box-sizing: border-box;
    border-radius: 0;
    border: none !important;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    cursor: pointer;
    transition: color var(--app-transition);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s);
}

.accordion-header:hover {
    background: transparent;
    color: var(--font-primary);
}

.accordion-item.open .accordion-header {
    background: transparent;
    color: var(--font-primary);
}

.accordion-header-icon {
    display: none !important;
}

.accordion-header-icon svg {
    width: 16px;
    height: 16px;
}

.menu-item {
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: color var(--app-transition);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.menu-item:hover {
    background: transparent;
    color: var(--app-text);
}

.menu-item.active {
    background: transparent;
    color: var(--app-accent);
}

/* Заголовок сети: два класса — .menu-item иначе перебивает min-height и justify-content (Figma menuitem h-[46px]) */
.accordion-header.menu-item {
    min-height: 46px;
    justify-content: space-between;
}

.accordion-header:focus,
.accordion-subitem:focus {
    outline: none;
}

.accordion-header:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.accordion-subitem:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

body.theme-dark .accordion-item.open .accordion-header:focus-visible {
    outline-color: var(--font-primary);
}

.accordion-header-text {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   COMPONENT: Menu Subitem — size items
   ========================================================================== */
.accordion-subitem {
    position: relative;
    min-height: 38px;
    padding: var(--l, 12px) var(--xxl, 24px) var(--l, 12px) var(--xl, 16px);
    box-sizing: border-box;
    border-radius: 0;
    border: none !important;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: color var(--app-transition);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Прессеты сетей — отступ справа под absolute-круг (Menu 2:2899) */
.accordion-subitem:not(.custom-size-item) {
    padding-right: var(--xxl, 24px);
}

.accordion-subitem:not(.custom-size-item)>.accordion-subitem-dim {
    flex-shrink: 0;
    padding-right: 20px;
    text-align: right;
}

.accordion-subitem:not(.custom-size-item)>.size-ready-icon {
    position: absolute;
    right: 0;
    top: 12px;
    margin: 0;
    pointer-events: none;
}

.accordion-subitem-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 14px;
}

.accordion-subitem-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--m);
    flex-shrink: 0;
    margin-left: auto;
}

.accordion-subitem-dim {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.custom-size-item .accordion-subitem-dim {
    text-align: left;
}

/* Метка готовности — колонка как у иконки ± в шапке, строго по центру строки */
.custom-size-item>.size-ready-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
}

.size-ready-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-accent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--app-transition), visibility var(--app-transition);
}

.size-ready-icon.visible {
    opacity: 1;
    visibility: visible;
}

.size-ready-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.size-ready-icon svg circle {
    fill: currentColor !important;
}

.size-ready-icon svg path {
    stroke: currentColor !important;
}

.accordion-subitem:hover {
    background: transparent;
    color: var(--app-accent);
}

.accordion-subitem.active {
    background: transparent;
    color: var(--app-accent);
}

/* Dark theme — menu */
body.theme-dark .accordion-header {
    color: var(--app-text-muted);
}

body.theme-dark .accordion-header:hover {
    background: transparent;
    color: var(--app-text);
}

body.theme-dark .accordion-item.open .accordion-header {
    background: transparent;
    color: var(--app-text);
    border: none !important;
}

body.theme-dark .accordion-subitem {
    color: var(--app-text-muted);
}

body.theme-dark .accordion-subitem:hover,
body.theme-dark .accordion-subitem.active {
    color: var(--app-accent);
}

/* Custom Sizes: те же классы, что у пресетов (.accordion-subitem), но токены сайдбара (Figma 25:4668) */
.custom-size-item.accordion-subitem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--m);
    /* Справа: точка 14px у края + зазор + корзина 24px с right:30px как у Add — запас под подпись */
    padding: var(--l) calc(30px + 24px + var(--m)) var(--l) var(--xl);
    box-sizing: border-box;
    color: var(--font-secondary);
}

.custom-size-item.accordion-subitem:hover,
.custom-size-item.accordion-subitem:focus-visible {
    background: transparent;
    color: var(--primary);
}

.custom-size-item.accordion-subitem.active {
    background: transparent;
    color: var(--primary);
}

body.theme-dark .custom-size-item.accordion-subitem {
    color: var(--font-secondary);
}

body.theme-dark .custom-size-item.accordion-subitem:hover,
body.theme-dark .custom-size-item.accordion-subitem.active {
    color: var(--primary);
}

body.theme-dark .layers-panel-inner {
    background: var(--app-surface);
    box-shadow: var(--app-shadow-panel);
}

body.theme-dark .text-float-toolbar-inner,
body.theme-dark .shape-toolbar-inner,
body.theme-dark .multi-select-toolbar-inner {
    background: var(--float-toolbar-bg);
    box-shadow: var(--app-shadow-panel);
}

/* Accordion — expand/collapse (network header styled above) */

.accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--font-tertiary);
    transition: color var(--app-transition);
}

.accordion-icon svg {
    width: 14px;
    height: 14px;
}

.accordion-icon .icon-minus {
    display: none;
}

.accordion-icon .icon-plus {
    display: block;
}

/* Открытый заголовок сети: текст — font-primary, иконка «−» — приглушённая (Figma 14:1253) */
.accordion-item.open .accordion-icon {
    color: var(--font-secondary);
}

.accordion-item.open .accordion-icon .icon-plus {
    display: none;
}

.accordion-item.open .accordion-icon .icon-minus {
    display: block;
}

.custom-sizes-block .accordion-icon .icon-plus {
    display: block;
}

.custom-sizes-block .accordion-icon .icon-minus {
    display: none;
}

.custom-sizes-block.open .accordion-icon .icon-plus {
    display: none;
}

.custom-sizes-block.open .accordion-icon .icon-minus {
    display: block;
}

.custom-sizes-block.open .custom-sizes-header .accordion-icon {
    color: var(--font-secondary);
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, padding-top 0.28s ease;
}

.accordion-item.open .accordion-body {
    max-height: 420px;
    opacity: 1;
    padding-top: 6px;
    margin-top: 0;
}

/* ==========================================================================
   COMPONENT: Panel Right — in-flow, not fixed
   ========================================================================== */
.sidebar-right {
    flex-shrink: 0;
    width: var(--panels);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.layers-panel-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    border-radius: var(--app-radius-panel);
    padding: var(--panel-bottom, 24px);
    box-shadow: var(--app-shadow-panel-soft);
    overflow: hidden;
    position: relative;
    --app-text: var(--font-primary);
    --app-text-muted: var(--font-secondary);
}

.layers-actions {
    display: none;
    /* Hidden per Figma — no separate add-layer button */
}

.layers-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    position: relative;
}

/* Пустая панель слоёв — Figma layers 35:28759 */
.layers-list.layers-list--empty {
    overflow: hidden;
}

.layers-empty-state {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--xxl, 24px) var(--m, 8px);
    box-sizing: border-box;
}

.layers-empty-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, var(--on-background-transparent, transparent), var(--app-surface));
}

.layers-empty-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--xl, 16px);
    text-align: center;
}

.layers-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a4ae;
    flex-shrink: 0;
}

.layers-empty-icon svg {
    display: block;
    width: 48px;
    height: 48px;
}

.layers-empty-text {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #70747d;
    white-space: nowrap;
}

body.theme-dark .layers-empty-icon {
    color: #54555a;
}

body.theme-dark .layers-empty-text {
    color: #a8afb7;
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .layers-empty-icon svg {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .layers-empty-icon svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 959px) {
    .layers-empty-icon svg {
        width: 48px;
        height: 48px;
    }
}

.canvas-hints {
    display: flex;
    flex-direction: row;
    gap: var(--xl);
    align-items: flex-start;
    height: 14px;
    margin-top: auto;
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
    position: relative;
    z-index: 4;
}

.canvas-hint {
    display: flex;
    align-items: center;
    gap: var(--s, 4px);
    font-size: 10px;
    line-height: 14px;
    color: var(--font-tertiary);
    white-space: nowrap;
}

.canvas-hint svg {
    flex-shrink: 0;
    color: var(--font-tertiary);
    width: 14px;
    height: 14px;
}

.canvas-hint-label {
    font-weight: 400;
    min-width: 0;
    color: var(--font-tertiary);
    font-size: 10px;
    line-height: 14px;
}

.canvas-hint-value {
    color: var(--font-secondary);
    font-size: 10px;
    line-height: 14px;
}

.layer-row .btn-layer-up.disabled,
.layer-row .btn-layer-down.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: auto;
}

.layers-bg-section {
    margin-bottom: 24px;
}

.layers-overlay-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.layers-footer {
    flex-shrink: 0;
    padding-top: 16px;
    margin-top: auto;
}

.layers-footer .btn-primary {
    width: 100%;
}

/* Layer row — Figma Layers-Item 10:1060 / 17:6658: py-8, justify-between, кластеры gap 8 / 16 */
.layer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: var(--m) 0;
    margin-left: 0;
    width: 100%;
    background: transparent;
    border-radius: var(--app-radius);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    min-height: 0;
    box-sizing: border-box;
}

/* Figma Layers 17:3622 — активная строка: плашка --arrow-button-default, подпись --primary (#ffbf00 в dark) */
.layer-row:hover:not(.selected) {
    background: transparent;
}

.layer-row:hover:not(.selected) .layer-label {
    color: var(--font-primary);
}

.layer-row.selected {
    background: transparent;
    border-radius: var(--app-radius-sm);
}

.layer-row-start {
    display: flex;
    align-items: center;
    gap: var(--m);
    flex: 1;
    min-width: 0;
}

label.layer-row-start {
    cursor: pointer;
}

.layer-row-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--xl);
    flex-shrink: 0;
}

/* Masked layer + mask row — Figma 306:40958: border --border, radius 8px, px 8px; no arrow buttons inside */
.layer-mask-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
}

.layer-mask-group .layer-row {
    border-radius: 0;
    margin-left: 0;
}

.layer-mask-group .layer-row-end {
    gap: var(--xl);
}

/* Mask indicator — Figma layers 25:3667 / Shape row (icon before arrows) */
.layer-mask-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--font-secondary);
    -webkit-appearance: none;
    appearance: none;
}

.layer-mask-icon:hover {
    color: var(--font-primary);
}

.layer-mask-icon--active {
    color: var(--font-primary);
}

.layer-mask-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.layer-row-arrows {
    display: flex;
    align-items: center;
    gap: var(--s);
}

/* Layers-Preview — thumb: 32×32; icon: padding 8 + 16px glyph (Figma 10:497 / 10:513) */
.layer-row .layer-preview {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--app-radius-sm);
    background: var(--arrow-button-default);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--font-secondary);
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.layer-row .layer-preview--icon {
    padding: var(--m);
    color: var(--font-secondary);
}

.layer-row .layer-preview--icon svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.layer-preview-glyph {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--font-primary);
}

.layer-row:hover:not(.selected) .layer-preview {
    background: var(--arrow-button-hovered);
}

.layer-row .layer-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer-row .layer-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layer-row .layer-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: var(--font-secondary);
}

.layer-row.selected .layer-label {
    color: var(--primary);
}

/* В joined-выделении mask-группы: жёлтая рамка группы, названия слоёв — дефолтные */
.layer-mask-group.layer-mask-group--joined-selected {
    border-color: #ffbf00;
}

.layer-mask-group.layer-mask-group--joined-selected .layer-row .layer-label {
    color: var(--font-secondary);
}

/* Arrow-Button — Figma 17:6658: p-[8px] rounded-[6px] 16px icon → 32px control */
.layer-row .btn-layer-up,
.layer-row .btn-layer-down {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: var(--m);
    border: none;
    border-radius: var(--app-radius-sm);
    background: var(--arrow-button-default);
    color: var(--font-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
    box-sizing: border-box;
}

.layer-row .btn-layer-up:hover:not(.disabled),
.layer-row .btn-layer-down:hover:not(.disabled) {
    background: var(--arrow-button-hovered);
    color: var(--font-primary);
}

.layer-row .btn-layer-up.disabled,
.layer-row .btn-layer-down.disabled {
    opacity: 0.3;
    cursor: default;
}

.layer-row .btn-layer-up svg,
.layer-row .btn-layer-down svg {
    width: 16px;
    height: 16px;
}

.layer-row .btn-remove {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--font-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
}

.layer-row .btn-remove:hover {
    opacity: 1;
    background: transparent;
    color: var(--font-primary);
}

.layer-row .btn-remove svg {
    width: 16px;
    height: 16px;
    display: block;
}

.layer-row.selected .btn-remove {
    color: var(--font-secondary);
}

.layer-row.selected .btn-remove:hover {
    background: transparent;
    color: var(--font-primary);
}

.layer-row.layer-row-placeholder {
    cursor: default;
}

.layer-row.layer-row-placeholder:hover {
    background: transparent;
}

.layer-row.layer-row-placeholder .layer-label {
    color: var(--font-secondary);
}

.layer-row.layer-row-placeholder .btn-layer-up,
.layer-row.layer-row-placeholder .btn-layer-down {
    pointer-events: none;
    opacity: 0.3;
}

.layer-row.layer-row-placeholder .btn-remove {
    pointer-events: none;
    opacity: 0.35;
}

/* Floating text toolbar — Figma FontPanel 21:10506 / 27:35089: on-background #27272a, gap --xs, h 44px */
.text-float-toolbar {
    position: fixed;
    width: auto;
    z-index: 9999;
    pointer-events: auto;
    display: none;
}

.text-float-toolbar.visible,
.multi-select-float-toolbar.visible {
    display: block;
}

.multi-select-float-toolbar {
    position: fixed;
    width: auto;
    z-index: 9999;
    pointer-events: auto;
    display: none;
}

.text-float-toolbar-inner,
.multi-select-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--xs);
    padding: var(--xs) 6px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--float-toolbar-bg);
    border-radius: var(--app-radius-btn);
}

body:not(.theme-dark) .text-float-toolbar-inner,
body:not(.theme-dark) .shape-toolbar-inner,
body:not(.theme-dark) .svg-image-toolbar-inner,
body:not(.theme-dark) .multi-select-toolbar-inner,
body:not(.theme-dark) .canvas-tools,
body:not(.theme-dark) .canvas-timeline-inner,
body:not(.theme-dark) .sidebar-left,
body:not(.theme-dark) .layers-panel-inner,
body:not(.theme-dark) .mobile-menu-btn,
body:not(.theme-dark) #mobileFabLayers {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.055), 0 1px 4px rgba(0, 0, 0, 0.035) !important;
}

.multi-select-toolbar-inner {
    gap: 0;
    padding: var(--xs);
}

.text-float-toolbar-inner .text-toolbar-btn svg,
.text-float-toolbar-inner .text-color-trigger {
    flex-shrink: 0;
}

/* Зазор до первого дивайдера после блока цвета (макет EditPanel / текстовая плашка) */
.text-float-toolbar-inner .color-picker-wrap {
    margin-right: calc(var(--m) - var(--xs));
}

/* Font trigger + menu — Figma FontSelect 23:2583 */
.text-toolbar-font-wrap {
    position: relative;
    flex-shrink: 0;
    /* зазор до соседнего блока как в макете (pr 2) */
    padding-right: 2px;
}

.text-font-select-ui {
    position: relative;
}

.text-font-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s);
    width: 128px;
    min-height: 32px;
    /* Figma FontSelect: pl 12, pr 8, py 8 */
    padding: var(--m) var(--m) var(--m) var(--l);
    margin: 0;
    border: 1px solid var(--float-toolbar-font-border);
    border-radius: var(--app-radius-btn);
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 14px;
    color: var(--float-toolbar-font-text);
}

.text-font-trigger:hover {
    border-color: var(--font-secondary);
}

.text-font-trigger:active {
    border-color: var(--font-secondary);
}

.text-font-trigger:focus {
    outline: none;
}

.text-font-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.text-font-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.text-font-trigger-chevron {
    flex-shrink: 0;
    display: flex;
    color: var(--float-toolbar-chevron);
}

.text-font-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    transform: none;
    z-index: 50000;
    width: 128px;
    max-height: calc(38px * 6);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--on-surface);
    border-radius: var(--app-radius);
    box-sizing: border-box;
    border: none;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.16);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.text-font-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.text-font-menu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 9999px;
    margin: 4px 4px 4px 0;
}

.text-font-menu::-webkit-scrollbar-thumb {
    background-color: var(--modal-dim-border);
    border-radius: 9999px;
}

.text-font-menu-item {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--l);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    line-height: 14px;
    color: var(--font-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-font-menu-scrollbar-thumb {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    min-height: 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;
    z-index: 3;
}

body:not(.theme-dark) .text-font-menu-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.text-font-menu-item:hover {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

.text-font-menu-item:active {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

.text-font-menu-item.selected {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

body.theme-dark .text-font-menu {
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
}

body.theme-dark .text-font-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

/* Компактная вёрстка: fixed-позиция из script.js, поверх всего UI */
.text-font-menu.text-font-menu--fixed {
    position: fixed;
    margin: 0;
    isolation: isolate;
}

.text-font-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Font size: input with − and + — Figma Counter 23:2693 (EditPanel 17:8663, кадр 25:8417) */
.text-toolbar-size {
    display: flex;
    align-items: center;
    height: 32px;
    width: 120px;
    min-width: 120px;
    padding: 0;
    overflow: hidden;
}

/* Колонка 112px + pr 8px до дивайдера; сам Counter внутри 104px */
.float-toolbar-counter-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 112px;
    padding-right: var(--m);
    box-sizing: border-box;
    flex-shrink: 0;
}

.float-toolbar-counter-wrap .text-toolbar-size {
    width: 100%;
    min-width: 0;
}

.text-float-toolbar-inner .text-toolbar-size,
.shape-toolbar-inner .text-toolbar-size,
.svg-image-toolbar-inner .text-toolbar-size {
    border: 1px solid var(--float-toolbar-border);
    border-radius: var(--app-radius-btn);
    background: transparent;
    box-sizing: border-box;
    /* Counter: gap 4px, padding 8px по горизонтали */
    gap: var(--s);
    padding: 0 var(--m);
    width: 100%;
    min-width: 0;
}

/* Размер шрифта: только счётчик 104px, до цвета без колонки pr 8 */
.text-float-toolbar-inner>.text-toolbar-size:not(.text-toolbar-rotation) {
    width: 104px;
    min-width: 104px;
    max-width: 104px;
}

.text-toolbar-size-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    font-size: 14px;
    text-align: center;
}

.text-float-toolbar-inner .text-toolbar-size-input,
.shape-toolbar-inner .text-toolbar-size-input,
.svg-image-toolbar-inner .text-toolbar-size-input {
    font-size: 12px;
    line-height: 14px;
    color: var(--float-toolbar-counter-text);
}

/* Центральная колонка 48px — Figma Counter (кроме поворота) */
.text-float-toolbar-inner .text-toolbar-size:not(.text-toolbar-rotation):not(.shape-toolbar-rotation) .text-toolbar-size-input,
.shape-toolbar-inner .text-toolbar-size:not(.text-toolbar-rotation):not(.shape-toolbar-rotation) .text-toolbar-size-input,
.svg-image-toolbar-inner .text-toolbar-size:not(.text-toolbar-rotation):not(.shape-toolbar-rotation) .text-toolbar-size-input {
    flex: 0 0 48px;
    width: 48px;
    max-width: 48px;
    min-width: 48px;
    padding: 0 var(--xs);
}

.text-toolbar-size-input:focus {
    outline: none;
}

.text-toolbar-size:focus-within {
    border-color: var(--app-accent);
}

.text-float-toolbar-inner .text-toolbar-size:focus-within,
.shape-toolbar-inner .text-toolbar-size:focus-within,
.svg-image-toolbar-inner .text-toolbar-size:focus-within {
    border-color: var(--primary);
}

.text-float-toolbar-inner .text-toolbar-size:hover,
.shape-toolbar-inner .text-toolbar-size:hover,
.svg-image-toolbar-inner .text-toolbar-size:hover {
    border-color: var(--font-secondary);
}

.text-float-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-input,
.shape-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-input,
.svg-image-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-input {
    color: var(--font-primary);
}

.text-float-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-btn,
.shape-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-btn,
.svg-image-toolbar-inner .text-toolbar-size:hover .text-toolbar-size-btn {
    color: var(--font-primary);
}

.text-float-toolbar-inner .text-toolbar-size:active .text-toolbar-size-btn:last-child,
.shape-toolbar-inner .text-toolbar-size:active .text-toolbar-size-btn:last-child,
.svg-image-toolbar-inner .text-toolbar-size:active .text-toolbar-size-btn:last-child {
    color: var(--primary);
}

.text-toolbar-size-btn {
    width: 28px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.text-float-toolbar-inner .text-toolbar-size-btn,
.shape-toolbar-inner .text-toolbar-size-btn,
.svg-image-toolbar-inner .text-toolbar-size-btn {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: var(--float-toolbar-icon);
}

.text-float-toolbar-inner .text-toolbar-size-btn svg,
.shape-toolbar-inner .text-toolbar-size-btn svg,
.svg-image-toolbar-inner .text-toolbar-size-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.text-toolbar-size-btn:hover {
    color: var(--app-accent);
}

.text-float-toolbar-inner .text-toolbar-size-btn:hover,
.shape-toolbar-inner .text-toolbar-size-btn:hover,
.svg-image-toolbar-inner .text-toolbar-size-btn:hover {
    color: var(--primary);
}

/* Font toolbar & list in right panel */
.text-toolbar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Swatch 24px in 40px hit area — Figma Color 17:7847 / 17:7746 */
.shape-color-swatch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--float-swatch-ring);
    flex-shrink: 0;
}

.shape-color-swatch-border {
    background: transparent !important;
    border-width: 2px;
    border-style: solid;
}

.text-color-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    line-height: 0;
}

/* Custom color picker — Figma Color-Modal 50:30547 (тёмный) */
.color-picker-wrap {
    position: relative;
}

.color-picker-popover {
    display: none;
    flex-direction: column;
    gap: var(--xl);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    width: 280px;
    padding: var(--xl);
    background: var(--color-picker-surface);
    color: var(--color-picker-text);
    border-radius: var(--xl);
    z-index: 340;
    box-sizing: border-box;
}

.color-picker-popover.open {
    display: flex;
}

/* Фон холста: без ползунка прозрачности; только здесь показываем пресет «прозрачный» */
.color-picker-popover.color-picker-popover--export-canvas .color-picker-opacity-wrap {
    display: none;
}

/* Пресет «прозрачный» — только у колорпикера фона холста, не у текста/фигур */
.color-picker-swatch.color-picker-swatch--transparent {
    display: none;
}

.color-picker-popover.color-picker-popover--export-canvas .color-picker-swatch.color-picker-swatch--transparent {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fixed у круга холста: у общего правила margin-top 8px — иначе к top + 4px добавляется ещё 8px */
.color-picker-popover.color-picker-popover--export-canvas.open {
    margin-top: 0;
}

.color-picker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m);
    margin: 0;
}

.color-picker-swatch {
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-picker-swatch-border);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.color-picker-swatch:hover {
    transform: scale(1.06);
}

.color-picker-swatch.selected {
    outline: 2px solid var(--color-picker-swatch-selected-ring);
    outline-offset: 2px;
}

/* Пресет «прозрачный» в палитре */
.color-picker-swatch--transparent {
    background-color: #e4e4e7 !important;
    background-image:
        linear-gradient(45deg, #a1a1aa 25%, transparent 25%),
        linear-gradient(-45deg, #a1a1aa 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #a1a1aa 75%),
        linear-gradient(-45deg, transparent 75%, #a1a1aa 75%) !important;
    background-size: 8px 8px !important;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
    border-color: var(--color-picker-swatch-border);
}

body.theme-dark .color-picker-swatch--transparent {
    background-color: #3f3f46 !important;
    background-image:
        linear-gradient(45deg, #71717a 25%, transparent 25%),
        linear-gradient(-45deg, #71717a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #71717a 75%),
        linear-gradient(-45deg, transparent 75%, #71717a 75%) !important;
}

.color-picker-main {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--m);
}

.color-picker-sv {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: var(--app-radius);
    overflow: hidden;
    cursor: crosshair;
    border: 1px solid var(--color-picker-border);
    box-sizing: border-box;
}

.color-picker-sv-hue {
    position: absolute;
    inset: 0;
    background: #f00;
}

.color-picker-sv-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.color-picker-sv-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #000);
}

.color-picker-sv-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    margin: -8px 0 0 -8px;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.color-picker-hue {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background: linear-gradient(90deg,
            #f00 0%,
            #ffe500 17.788%,
            #0f0 35.577%,
            #00f5ff 52.404%,
            #0100ff 71.635%,
            #f0f 87.02%,
            #f00 100%);
    cursor: pointer;
}

.color-picker-hue-cursor {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.color-picker-footer {
    display: flex;
    gap: var(--m);
    align-items: center;
    margin: 0;
}

.color-picker-hex {
    flex: 1;
    width: 100%;
    min-height: 48px;
    padding: var(--xl);
    margin: 0;
    border: 1px solid var(--color-picker-hex-border);
    border-radius: var(--app-radius);
    background: transparent;
    color: var(--color-picker-text);
    font-size: 14px;
    line-height: 14px;
    box-sizing: border-box;
}

.color-picker-hex:focus {
    outline: none;
    border-color: var(--primary);
}

.color-picker-opacity-wrap {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-picker-opacity-label {
    display: block;
    font-size: 12px;
    line-height: 14px;
    color: var(--color-picker-muted);
    margin: 0;
}

.color-picker-opacity-row {
    display: flex;
    align-items: center;
    gap: var(--m);
}

.color-picker-opacity-slider {
    flex: 1;
    height: 20px;
    min-height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    vertical-align: middle;
}

.color-picker-opacity-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--font-tertiary);
    border-radius: 100px;
}

.color-picker-opacity-slider::-moz-range-track {
    height: 6px;
    background: var(--font-tertiary);
    border-radius: 100px;
}

.color-picker-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    cursor: pointer;
    /* Выровнять ручку по центру трека 6px: (16 − 6) / 2 */
    margin-top: -5px;
    box-sizing: border-box;
}

.color-picker-opacity-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    cursor: pointer;
}

.color-picker-opacity-value {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 14px;
    color: var(--color-picker-text);
    min-width: 40px;
}

.text-toolbar-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: color var(--app-transition);
}

.text-float-toolbar-inner .text-toolbar-btn {
    width: auto;
    min-width: 32px;
    height: 40px;
    padding: 12px var(--m);
    box-sizing: border-box;
    color: var(--float-toolbar-icon);
}

.text-toolbar-btn:hover {
    color: var(--app-accent);
}

.text-float-toolbar-inner .text-toolbar-btn:hover,
.text-float-toolbar-inner .text-toolbar-btn.active {
    color: var(--primary);
}

.text-toolbar-btn.active {
    background: transparent;
    border: none;
    color: var(--app-accent);
}

.text-toolbar-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.font-list {
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--float-menu-scrollbar-thumb) var(--float-menu-scrollbar-track);
}

.font-list::-webkit-scrollbar {
    width: 4px;
}

.font-list::-webkit-scrollbar-track {
    margin: var(--s) 0;
    background: var(--float-menu-scrollbar-track);
}

.font-list::-webkit-scrollbar-thumb {
    background-color: var(--float-menu-scrollbar-thumb);
    border-radius: 100px;
}

.font-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--float-menu-scrollbar-thumb-hover);
}

.font-list-item {
    padding: 8px 12px;
    border-radius: var(--app-radius-btn);
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-text);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background var(--app-transition), border-color var(--app-transition);
}

.font-list-item:hover {
    background: var(--app-surface-hover);
}

.font-list-item.selected {
    background: var(--app-surface-hover);
    border-color: var(--app-accent);
    color: var(--app-accent);
}

/* ==========================================================================
   COMPONENT: Theme toggle
   ========================================================================== */
.sidebar-theme-toggle,
.header-theme-toggle {
    flex-shrink: 0;
    position: relative;
    z-index: 4;
}

.sidebar-theme-toggle {
    padding-top: 16px;
}

.header-theme-toggle {
    padding: 0;
}

.mobile-menu-footer {
    position: relative;
    z-index: 4;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--xl);
    align-items: flex-start;
}

/* External .theme-tabs-wrap hidden — toggle is inside sidebar */
.theme-tabs-wrap:not(.mobile-theme-tabs) {
    display: none;
}

.mobile-theme-tabs {
    display: flex;
}

.mobile-theme-tabs .theme-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 84px;
    height: 42px;
    padding: var(--xs);
    background: var(--surface);
    border-radius: 9999px;
}

.mobile-theme-tabs .theme-tabs-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 40px;
    height: 38px;
    border-radius: 9999px;
    background: var(--button-secondary);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.mobile-theme-tabs .theme-tabs button {
    width: 40px;
    height: 38px;
}

.mobile-theme-tabs .theme-tabs button svg {
    width: 18px;
    height: 18px;
}

body:not(.theme-dark) .mobile-theme-tabs .theme-tabs-slider {
    background: var(--primary);
}

/*
 * Нижний край канваса: стек «пилюля масштаба» + таймлайн (режим видео).
 * Таймлайн выезжает снизу (height), пилюля поднимается вместе со стеком — Figma 109:28478 / 109:28479
 */

.canvas-bottom-stack {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 10;
    pointer-events: none;
}

.canvas-bottom-stack>* {
    pointer-events: auto;
}

.canvas-tools-wrap {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    flex-shrink: 0;
    align-self: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Таймлайн на всю ширину колонки; свёрнут — без высоты */
.canvas-timeline-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 0;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        height var(--video-timeline-motion),
        margin-top var(--video-timeline-motion),
        opacity 0.28s ease;
    flex-shrink: 0;
}

body.material-type-video .canvas-timeline-wrap {
    height: calc(var(--video-timeline-panel-height) + var(--video-timeline-track-extra-height));
    margin-top: var(--m);
    opacity: 1;
    /* чтобы попап изинга не резался по вертикали */
    overflow: visible;
}

body.material-type-video.timeline-has-video-track {
    --video-timeline-track-extra-height: calc(var(--video-timeline-track-height) + var(--video-timeline-track-gap));
}

body.material-type-video.timeline-has-video-track.timeline-has-bg-video-track.timeline-has-object-video-track {
    --video-timeline-track-extra-height: calc(var(--video-timeline-track-height) * 2 + var(--video-timeline-track-gap) + 4px);
}

/* Панель таймлайна: Figma 41:29096 — on-background, радиус 16, без обводки; скролл под градиентом */
.canvas-timeline-inner {
    box-sizing: border-box;
    position: relative;
    height: calc(var(--video-timeline-panel-height) + var(--video-timeline-track-extra-height));
    min-height: calc(var(--video-timeline-panel-height) + var(--video-timeline-track-extra-height));
    padding: var(--video-timeline-panel-pad);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    background: var(--on-background);
    border-radius: var(--video-timeline-panel-radius);
    border: none;
}

.canvas-timeline-scroll-host {
    position: static;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: visible;
}

.canvas-timeline-scroll {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--video-timeline-panel-gap);
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: default;
}

.canvas-timeline-scroll.has-video-track {
    padding-bottom: calc(var(--video-timeline-track-height) + var(--video-timeline-track-gap));
}

.canvas-timeline-scroll.has-video-track-double {
    padding-bottom: calc(var(--video-timeline-track-height) * 2 + var(--video-timeline-track-gap) + 4px);
}

.canvas-timeline-video-track {
    position: absolute;
    top: calc(var(--video-timeline-frame-size) + var(--video-timeline-track-gap));
    height: var(--video-timeline-track-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--S, 4px) var(--M, 8px);
    box-sizing: border-box;
    border-radius: var(--XS, 6px);
    background: var(--arrow-button-default);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.canvas-timeline-video-track-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--button-primary-hover);
}

.canvas-timeline-video-track-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #18181b;
    font-family: var(--Base-Font, Inter);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}

body:not(.theme-dark) .canvas-timeline-video-track-label {
    color: #ffffff;
}

.canvas-timeline-video-track--object {
    background: #54555a;
}

body:not(.theme-dark) .canvas-timeline-video-track--object {
    background: #a0a4ae;
}

.canvas-timeline-video-track--object .canvas-timeline-video-track-fill {
    display: none;
}

.canvas-timeline-video-track--object .canvas-timeline-video-track-label {
    color: #ffffff;
}

body:not(.theme-dark) .canvas-timeline-video-track--object .canvas-timeline-video-track-label {
    color: #18181b;
}

.canvas-timeline-frame,
.canvas-timeline-easing-slot {
    position: relative;
    z-index: 1;
}

.canvas-timeline-scroll.is-scrollable {
    cursor: grab;
}

.canvas-timeline-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.canvas-timeline-scroll::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* Градиент + тайминг + play: play/stop по центру панели (right 16), loop сверху (top 6) */
.canvas-timeline-controls-overlay {
    --timeline-play-outer-w: calc(var(--m) * 2 + 14px);
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6;
    display: block;
    padding: 0;
    box-sizing: border-box;
    width: min(42vw, 220px);
    min-width: 112px;
    pointer-events: none;
    /* Справа плотный фон с ~65% как в Figma Timeline (50:31565 / 41:29096) */
    background: linear-gradient(to left,
            transparent 0%,
            color-mix(in srgb, var(--on-background) 55%, transparent) 40%,
            var(--on-background) 65%,
            var(--on-background) 100%);
}

.canvas-timeline-controls-overlay .canvas-timeline-controls-row,
.canvas-timeline-controls-overlay .canvas-timeline-duration,
.canvas-timeline-controls-overlay .canvas-timeline-play,
.canvas-timeline-controls-overlay .canvas-timeline-loop {
    pointer-events: auto;
}

.canvas-timeline-controls-row {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Loop: над play, без круглой подложки */
.canvas-timeline-loop.canvas-timeline-loop--dock {
    position: absolute !important;
    top: 6px !important;
    right: calc(16px + (var(--timeline-play-outer-w) / 2) - 12px) !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2;
}

/* Кадр 72×72, радиус 8 */
.canvas-timeline-frame {
    box-sizing: border-box;
    width: var(--video-timeline-frame-size);
    height: var(--video-timeline-frame-size);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--video-timeline-frame-radius);
    padding: 0;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.canvas-timeline-frame:focus {
    outline: none;
}

.canvas-timeline-frame:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.canvas-timeline-frame--filled:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Пустой кадр — Surface + Border (токены dark/light) */
.canvas-timeline-frame--empty {
    border: 1px solid var(--border);
    background: var(--surface);
}

.canvas-timeline-frame--empty:hover,
.canvas-timeline-frame--empty.is-active {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid var(--primary);
    background: var(--surface);
}

body:not(.theme-dark) .canvas-timeline-frame--empty {
    border-color: var(--border);
    background: var(--surface);
}

body:not(.theme-dark) .canvas-timeline-frame--empty:hover,
body:not(.theme-dark) .canvas-timeline-frame--empty.is-active {
    border-color: var(--primary);
    background: var(--surface);
}

/* Заполненный кадр — по умолчанию Border; hover/active — только Primary border */
.canvas-timeline-frame--filled {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.canvas-timeline-frame--filled:hover,
.canvas-timeline-frame--filled.is-active {
    border-color: var(--primary);
}

body:not(.theme-dark) .canvas-timeline-frame--filled {
    background: var(--surface);
}

.canvas-timeline-frame-inner {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
    border-radius: calc(var(--video-timeline-frame-radius) - 2px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-timeline-frame-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.canvas-timeline-frame-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    display: flex;
    width: 24px;
    height: 24px;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 0;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    cursor: pointer;
    transition: background var(--app-transition);
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.canvas-timeline-frame-remove:hover {
    background: rgba(0, 0, 0, 0.56);
}

.canvas-timeline-frame-remove svg {
    width: 14px;
    height: 14px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: block;
}

.canvas-timeline-frame-remove svg path {
    stroke: currentColor;
}

body:not(.theme-dark) .canvas-timeline-frame-remove {
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* Кнопка добавления кадра — Surface, радиус S (наследует 8px от кадра) */
.canvas-timeline-frame--add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--font-tertiary);
}

.canvas-timeline-frame--add:hover {
    background: var(--canvas-chrome-hover);
    color: var(--canvas-chrome-fg);
}

body:not(.theme-dark) .canvas-timeline-frame--add {
    background: var(--surface);
    color: var(--font-tertiary);
}

body:not(.theme-dark) .canvas-timeline-frame--add:hover {
    background: var(--arrow-button-default);
    color: var(--font-secondary);
}

/* Каунтер изинга между кадрами */
.canvas-timeline-easing-slot {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--video-timeline-easing-counter-size);
    height: var(--video-timeline-easing-counter-size);
    aspect-ratio: 1 / 1;
}

.canvas-timeline-easing-counter {
    display: flex;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 100px;
    background: var(--arrow-button-default);
    color: var(--font-secondary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    line-height: 10px;
    text-align: center;
    cursor: pointer;
    transition: background var(--app-transition), color var(--app-transition);
    -webkit-tap-highlight-color: transparent;
}

.canvas-timeline-easing-counter:hover,
.canvas-timeline-easing-counter.is-open {
    background: var(--arrow-button-hovered);
    color: var(--font-primary);
}

body:not(.theme-dark) .canvas-timeline-easing-counter {
    color: var(--font-secondary);
}

.canvas-timeline-easing-counter:focus {
    outline: none;
}

.canvas-timeline-easing-counter:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Меню длительности: стиль как Download, 6 строк + скролл */
.canvas-timeline-easing-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 128px;
    max-height: calc(38px * 6);
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--app-radius);
    background: var(--on-surface);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.16);
    z-index: 2147483647;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.canvas-timeline-easing-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.canvas-timeline-easing-menu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 9999px;
    margin: 8px 0;
}

body.theme-dark .canvas-timeline-easing-menu {
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
}

.canvas-timeline-easing-scrollbar-thumb {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    min-height: 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;
    z-index: 3;
}

body:not(.theme-dark) .canvas-timeline-easing-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.canvas-timeline-easing-menu[hidden] {
    display: none !important;
}

/* Открытое меню у каунтера — fixed в viewport, поверх всего UI */
.canvas-timeline-easing-menu.canvas-timeline-easing-menu--fixed {
    position: fixed !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
    isolation: isolate;
}

.canvas-timeline-easing-item {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0;
    height: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 18px 12px 12px;
    border: none;
    background: transparent;
    color: var(--font-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--app-transition), color var(--app-transition);
    -webkit-tap-highlight-color: transparent;
}

body.theme-dark .canvas-timeline-easing-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.canvas-timeline-easing-item:hover,
.canvas-timeline-easing-item:focus-visible {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

.canvas-timeline-easing-item.is-active {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
    font-weight: 500;
}

.canvas-timeline-easing-slot.is-open {
    z-index: 2147483646;
}

/* Play / Stop — одна стилистика: как раньше выглядела активная Stop (primary-hover); Play idle так же */
.canvas-timeline-play {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--m);
    gap: var(--s);
    border: none;
    border-radius: 100px;
    background: var(--button-primary-hover);
    color: #18181b;
    cursor: pointer;
    transition: background var(--app-transition), color var(--app-transition), opacity var(--app-transition);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

body:not(.theme-dark) .canvas-timeline-play {
    background: var(--button-primary-hover);
    color: #ffffff;
}

.canvas-timeline-play:disabled {
    cursor: default;
    pointer-events: none;
}

/* Play disabled — Figma --button-play-disabled rgba(255,255,255,0.06) + вторичный цвет иконки */
body.theme-dark .canvas-timeline-play:disabled {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
}

body:not(.theme-dark) .canvas-timeline-play:disabled {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
    color: var(--font-secondary);
}

.canvas-timeline-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.canvas-timeline-play-icon--play-outline {
    display: none;
}

.canvas-timeline-play-icon--stop {
    display: none;
}

.canvas-timeline-play.is-playing .canvas-timeline-play-icon--play {
    display: none;
}

.canvas-timeline-play.is-playing .canvas-timeline-play-icon--play-outline {
    display: none;
}

.canvas-timeline-play.is-playing .canvas-timeline-play-icon--stop {
    display: flex;
}

.canvas-timeline-play:disabled .canvas-timeline-play-icon--play {
    display: none;
}

.canvas-timeline-play:disabled .canvas-timeline-play-icon--stop {
    display: none;
}

.canvas-timeline-play:disabled .canvas-timeline-play-icon--play-outline {
    display: flex;
}

.canvas-timeline-play-icon--play svg {
    display: block;
    width: 14px;
    height: 14px;
}

.canvas-timeline-play-icon--play-outline svg {
    display: block;
    width: 14px;
    height: 14px;
}

.canvas-timeline-play-icon--stop svg {
    display: block;
    width: 14px;
    height: 14px;
}

.canvas-timeline-play-icon--play svg path {
    fill: currentColor;
}

.canvas-timeline-play-icon--stop svg path {
    fill: currentColor;
}

.canvas-timeline-play-icon--play-outline svg path {
    fill: none;
}

.canvas-timeline-loop {
    box-sizing: border-box;
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 100px;
    background: transparent;
    color: #54555a;
    cursor: pointer;
    transition: color var(--app-transition), opacity var(--app-transition);
    -webkit-tap-highlight-color: transparent;
}

.canvas-timeline-loop:hover {
    background: transparent;
}

.canvas-timeline-loop:focus {
    outline: none;
}

.canvas-timeline-loop:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.canvas-timeline-loop svg {
    width: 14px;
    height: 14px;
    display: block;
}

.canvas-timeline-loop svg path {
    stroke: currentColor;
}

body.theme-dark .canvas-timeline-loop.is-active {
    color: #ffffff;
    background: transparent;
}

body:not(.theme-dark) .canvas-timeline-loop {
    color: #a0a4ae;
}

body:not(.theme-dark) .canvas-timeline-loop:hover {
    background: transparent;
    color: #a0a4ae;
}

body:not(.theme-dark) .canvas-timeline-loop.is-active {
    color: #18181b;
    background: transparent;
}

.canvas-timeline-duration {
    display: inline-flex;
    align-items: center;
    height: 24px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    line-height: 12px;
    letter-spacing: 0;
    color: var(--font-primary);
    white-space: nowrap;
}

body:not(.theme-dark) .canvas-timeline-duration {
    color: var(--font-primary);
}

@media (prefers-reduced-motion: reduce) {
    .canvas-timeline-wrap {
        transition-duration: 0.01ms;
    }
}

/* Figma Scale 35:28758: track — on-background #27272a, inner gap/pad --xs, segments pad 12px, active — arrow-button-default */
.canvas-tools {
    display: flex;
    align-items: center;
    gap: var(--xs);
    padding: var(--xs);
    height: auto;
    box-sizing: border-box;
    background: var(--modal-dim-surface);
    color: var(--canvas-chrome-fg);
    border-radius: 9999px;
}

.canvas-tool-btn {
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    height: auto;
    padding: var(--l);
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--app-transition), color var(--app-transition);
    -webkit-tap-highlight-color: transparent;
}

.canvas-tool-btn:hover {
    background: var(--canvas-chrome-hover);
    color: #ffffff;
}

.canvas-tool-btn.active {
    background: var(--arrow-button-default);
    color: #ffffff;
}

.canvas-tool-btn:focus {
    outline: none;
}

.canvas-tool-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.canvas-tool-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5px !important;
}

.canvas-tool-btn svg *,
.canvas-tool-btn svg [stroke] {
    stroke-width: 1.5px !important;
    vector-effect: non-scaling-stroke;
}

/* Zoom − / % / +: без общей «пилюли» и ховера группы (Figma — отдельные additem) */
.canvas-tool-zoom-group {
    display: flex;
    align-items: center;
    gap: var(--xs);
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--canvas-chrome-fg);
}

.canvas-tool-btn.canvas-tool-btn--zoom:hover {
    color: #ffffff;
}

.canvas-zoom-value {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--l);
    font-size: 12px;
    font-weight: 400;
    color: var(--canvas-chrome-fg);
    width: 56px;
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 14px;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Светлая тема страницы: нижняя панель масштаба и правый оверлей — Figma 27:47250 / 27:47252 (трек --on-background, иконки --font-secondary) */
body:not(.theme-dark) .canvas-tools {
    background: var(--on-background);
    color: var(--font-secondary);
}

body:not(.theme-dark) .canvas-tool-btn:hover {
    background: var(--arrow-button-hovered);
    color: var(--font-primary);
}

body:not(.theme-dark) .canvas-tool-btn.active {
    background: var(--arrow-button-default);
    color: var(--font-primary);
}

body:not(.theme-dark) .canvas-tool-btn.canvas-tool-btn--zoom:hover {
    color: var(--font-primary);
}

/* Зум −/+: без переопределения цветом --canvas-chrome-fg (слишком светлый на белом треке) — Figma 27:47252 */
body:not(.theme-dark) .canvas-tool-zoom-group,
body:not(.theme-dark) .canvas-tool-zoom-group .canvas-tool-btn {
    color: var(--font-secondary);
}

body:not(.theme-dark) .canvas-zoom-value {
    color: var(--font-secondary);
}

body:not(.theme-dark) .canvas-right-btn {
    background: var(--on-background);
    color: var(--font-secondary);
}

body:not(.theme-dark) .canvas-right-btn:hover:not(:disabled) {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

/* ==========================================================================
   COMPONENT: DarkLightToggle — Figma exact: bg-[#202023], sliding pill bg-[#343538]
   ========================================================================== */
.dark-light-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 84px;
    height: 42px;
    padding: var(--xs);
    background: var(--surface);
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Sliding pill indicator — по центру трека по вертикали (Figma DarkLightToggle) */
.dark-light-slider {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 40px;
    height: 38px;
    margin-top: 0;
    bottom: auto;
    background: var(--button-secondary);
    border-radius: 9999px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

/* Dark active → slider on left; Light active → slider on right */
body.theme-dark .dark-light-slider {
    transform: translate(0, -50%);
}

body:not(.theme-dark) .dark-light-slider {
    transform: translate(40px, -50%);
}

.dark-light-toggle button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--font-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.dark-light-toggle button svg {
    width: 18px;
    height: 18px;
}

.dark-light-toggle button svg path {
    transition: stroke 0.3s ease, color 0.3s ease;
}

/* Dark active: луна — акцент, солнце — secondary */
body.theme-dark #themeDark {
    color: var(--font-primary);
}

body.theme-dark #themeLight {
    color: var(--font-secondary);
}

/* Light active: pill на --surface, слайдер — primary */
body:not(.theme-dark) .dark-light-toggle {
    background: var(--surface);
}

body:not(.theme-dark) .dark-light-slider {
    background: var(--primary);
}

/* Светлая тема активна: пилюля — primary, иконка солнца на ней — белая (макет 27:47250) */
body:not(.theme-dark) #themeLight {
    color: #ffffff;
}

body:not(.theme-dark) #themeDark {
    color: var(--font-tertiary);
}

body:not(.theme-dark) #mobileThemeLight.active {
    color: #ffffff;
}

/* Legacy .theme-tabs hidden — replaced by dark-light-toggle */
.theme-tabs-wrap:not(.mobile-theme-tabs) {
    display: none;
}

.theme-tabs button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.theme-tabs button svg {
    width: 16px;
    height: 16px;
}

.theme-tabs button svg path,
.theme-tabs button svg circle {
    stroke: currentColor;
}

.theme-tabs button.active {
    color: var(--app-text);
}

.theme-tabs button:hover:not(.active) {
    color: var(--app-text);
}

/* ==========================================================================
   DESKTOP LAYOUT — Figma: flex row, full viewport height
   ========================================================================== */
.desktop-layout {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 88px 24px 24px;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

/* center column: header on top + canvas below */
.app-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: visible;
}

/* ─── Header ─── */
.main-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px;
    height: auto;
    z-index: 120;
}

.main-header h1 {
    display: none;
}

/* ─── Canvas (main) ─── */
.main {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    /* Не даём холсту при пане уезжать под фиксированную шапку (тулбары текста/фигуры — fixed) */
    overflow: visible;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-bg);
}

/* Три колонки: боковые 1fr с равным остатком — центральная (плашка Background/…/Text) строго по центру шапки */
.main-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--xxl);
    align-items: center;
    width: 100%;
    max-width: calc(100vw - 48px);
    margin: 0 auto;
}

/* Left: полоса шириной как левая панель — лого слева, табы Image/Video справа (Figma 35:28745) */
.main-header-actions-left {
    display: flex;
    justify-self: start;
    flex: 0 0 auto;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.main-header-brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-sizing: border-box;
    width: var(--panels);
    flex-shrink: 0;
}

/* Переключатель Image / Video — высота как у табов добавления, сегменты остаются круглыми */
.header-material-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 84px;
    height: 42px;
    padding: var(--xs);
    background: var(--surface);
    border-radius: 9999px;
    flex-shrink: 0;
}

.header-material-slider {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 40px;
    height: 38px;
    margin-top: 0;
    bottom: auto;
    background: var(--button-secondary);
    border-radius: 9999px;
    pointer-events: none;
    transition: transform 0.3s ease;
}

body:not(.material-type-video) .header-material-toggle .header-material-slider {
    transform: translate(0, -50%);
}

body.material-type-video .header-material-toggle .header-material-slider {
    transform: translate(40px, -50%);
}

.header-material-toggle .header-material-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--font-secondary);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.header-material-toggle .header-material-btn svg {
    width: 18px;
    height: 18px;
}

.header-material-toggle .header-material-btn svg path {
    transition: stroke 0.3s ease, color 0.3s ease;
}

.header-material-toggle .header-material-btn:focus {
    outline: none;
}

.header-material-toggle .header-material-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Тёмная тема страницы: активная иконка — primary text */
body.theme-dark:not(.material-type-video) #headerMaterialImage {
    color: var(--font-primary);
}

body.theme-dark:not(.material-type-video) #headerMaterialVideo {
    color: var(--font-secondary);
}

body.theme-dark.material-type-video #headerMaterialVideo {
    color: var(--font-primary);
}

body.theme-dark.material-type-video #headerMaterialImage {
    color: var(--font-secondary);
}

/* Светлая тема: пилюля под активным сегментом — как theme light на toggle */
body:not(.theme-dark):not(.material-type-video) .header-material-toggle .header-material-slider {
    background: var(--primary);
}

body:not(.theme-dark):not(.material-type-video) #headerMaterialImage {
    color: var(--button-primary-font);
}

body:not(.theme-dark):not(.material-type-video) #headerMaterialVideo {
    color: var(--font-tertiary);
}

body:not(.theme-dark).material-type-video .header-material-toggle .header-material-slider {
    background: var(--primary);
}

body:not(.theme-dark).material-type-video #headerMaterialVideo {
    color: var(--button-primary-font);
}

body:not(.theme-dark).material-type-video #headerMaterialImage {
    color: var(--font-tertiary);
}

/* Logo in header — акцент темы (светлая: синий, тёмная: янтарь) */
.header-logo-mark {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--app-accent);
}

.header-logo-mark[role="button"] {
    cursor: pointer;
}

.header-logo-mark[role="button"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 8px;
}

.header-logo-mark svg {
    display: block;
    width: 32px;
    height: 32px;
}

.header-actions-canvas-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icons-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Center: плашка Background / Image / Shape / Text — колонка auto в сетке, по центру вьюпорта */
.main-header-actions-center {
    grid-column: 2;
    justify-self: center;
    width: auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    position: static;
    left: auto;
    transform: none;
}

/* Shape menu wrap — relative so popover anchors here */
.shape-menu-wrap {
    position: static;
}

/* Pill container — Figma: add / tab group p-[var(--xs)] on --on-background */
.header-tabs-pill {
    display: flex;
    gap: var(--xs);
    align-items: center;
    padding: var(--xs);
    background: var(--on-background);
    border-radius: var(--app-radius-btn);
}

body.theme-dark .header-tabs-pill {
    background: var(--on-background);
}

/* Tab segment — Figma Header 14:1693 additem p-[12px]; выбранный — button-secondary-hover + font-primary */
.btn-tab {
    padding: var(--l) calc(var(--l) + var(--s));
    border: none;
    border-radius: var(--app-radius-btn);
    background: transparent;
    color: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--app-transition), color var(--app-transition);
    line-height: 14px;
}

.btn-tab:hover {
    background: var(--arrow-button-default);
    color: var(--font-primary);
}

.btn-tab:disabled,
.btn-tab.is-disabled {
    color: var(--font-tertiary);
    opacity: 0.55;
    cursor: default;
    background: transparent;
}

.btn-tab:disabled:hover,
.btn-tab.is-disabled:hover {
    color: var(--font-tertiary);
    background: transparent;
}

.btn-tab.active {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

.btn-tab.active:hover {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

/* Открытое меню Shape — как выбранный Shape в Figma */
#btnShape.btn-tab[aria-expanded="true"] {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

#btnShape.btn-tab[aria-expanded="true"]:hover {
    background: var(--button-secondary-hover);
    color: var(--font-primary);
}

/* Фокус: кольцо из --primary (в dark — жёлтый), без системного синего */
.btn-tab:focus {
    outline: none;
}

.btn-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-tab.active:focus-visible,
#btnShape.btn-tab[aria-expanded="true"]:focus-visible {
    outline-color: var(--font-primary);
}

.btn-tab-video {
    display: inline-flex;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    padding-left: 0;
    padding-right: 0;
    margin-left: calc(var(--xs) * -1);
    margin-right: calc(var(--xs) * -1);
    transition:
        max-width 0.28s ease,
        opacity 0.22s ease,
        transform 0.28s ease,
        padding 0.28s ease,
        margin 0.28s ease;
}

body.material-type-video .btn-tab-video {
    max-width: 120px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    padding-left: var(--l);
    padding-right: calc(var(--l) + var(--s));
    margin-left: 0;
    margin-right: 0;
}

/* Right: actions — в третьей ячейке сетки, к правому краю */
.main-header-actions-right {
    display: flex;
    justify-self: end;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-left: 0;
    min-width: 0;
}

.main-header-actions-right .btn,
.main-header-actions-right .download-menu-wrap .btn {
    height: auto;
    min-height: 38px;
    padding: var(--l);
    border-radius: 100px;
    font-size: 14px;
    line-height: 14px;
}

.main-header-actions-right .btn-harmonize,
.main-header-actions-right #clearBtn {
    font-weight: 400;
}

.main-header-actions-right #downloadBtn {
    font-weight: 500;
}

.main-header-actions-right .btn .btn-label {
    line-height: 14px;
}

.btn-header-center {
    min-width: 112px;
}

.add-menu-wrap {
    position: relative;
    display: none;
}

.background-menu-wrap {
    position: relative;
    display: inline-flex;
}

.btn-icon {
    display: none;
}

.btn-label {
    display: inline-block;
}

/* Shape menu */
.shape-menu-wrap {
    position: relative;
}

/* Shape menu popover — Figma 14:1693 shapemodal: on-surface, p 24, r 24, w 472; top задаётся из JS под кнопку Shape */
.shape-menu-popover {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: var(--xxl);
    background: var(--shape-picker-surface);
    border: none;
    border-radius: var(--radius-shape-modal);
    z-index: 430;
    width: 472px;
    max-width: calc(100vw - var(--xxl) * 2);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.16) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.shape-menu-popover.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Grid: flex-wrap, gap 8px */
.shape-menu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Shape-Button — Figma 14:1953: 100×100, r 16, иконка Shapes 40×40 по центру */
.shape-menu-item {
    width: 100px;
    height: 100px;
    padding: 0;
    border: none;
    border-radius: var(--app-radius-canvas);
    background: var(--shape-picker-tile);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--panel-motion);
    position: relative;
    flex-shrink: 0;
}

/* Hover / выбранная ячейка — Figma ShapeButton (2:2822): --shape-picker-tile-hover */
.shape-menu-item:hover,
.shape-menu-item.active {
    background: var(--shape-picker-tile-hover);
}

/* Shape menu icons — Figma: обводка currentColor, заливка только у .shape-menu-icon-fill */
.shape-menu-item svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: static;
    inset: auto;
    color: var(--font-secondary);
}

.shape-menu-item svg path,
.shape-menu-item svg line,
.shape-menu-item svg rect,
.shape-menu-item svg circle,
.shape-menu-item svg polyline,
.shape-menu-item svg polygon {
    fill: none;
    stroke: currentColor;
}

.shape-menu-item svg .shape-menu-icon-fill {
    fill: currentColor;
    stroke: none;
}

.shape-menu-item svg .shape-menu-icon-squircle {
    fill: currentColor;
    stroke: none;
}

.shape-menu-item:focus {
    outline: none;
}

.shape-menu-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* shape-menu dark theme shadow */
body.theme-dark .shape-menu-popover {
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4) !important;
}

/* Download menu — Add: full width under trigger; Export: Figma Download-Menu 50:30579 / 50:30925 */
.download-menu-wrap {
    position: relative;
}

.download-menu-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: translateY(-8px);
    margin-top: 8px;
    padding: 0;
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--app-surface);
    border: none;
    border-radius: var(--app-radius-panel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 430;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Export (JPG / PNG / PDF): 128px, right-aligned, --on-surface, shadow 0 8px 48px / 16% */
#downloadMenuPopover,
#mobileDownloadMenuPopover,
#backgroundMenuPopover {
    left: auto;
    right: 0;
    min-width: 128px;
    width: 128px;
    border-radius: var(--app-radius);
    background: var(--on-surface);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.16) !important;
}

#backgroundMenuPopover {
    left: 0;
    right: auto;
}

body.theme-dark #downloadMenuPopover,
body.theme-dark #mobileDownloadMenuPopover,
body.theme-dark #backgroundMenuPopover {
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4) !important;
}

/* Video mode: GIF / MP4 — Figma Download-Menu 50:31834 */
.download-menu-popover-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

body:not(.material-type-video) .download-menu-popover-inner--video {
    display: none !important;
}

body.material-type-video .download-menu-popover-inner--image {
    display: none !important;
}

.mobile-download-curtain-group {
    display: flex;
    flex-direction: column;
}

body:not(.material-type-video) .mobile-download-curtain-group--video {
    display: none !important;
}

body.material-type-video .mobile-download-curtain-group--image {
    display: none !important;
}

body.theme-dark .download-menu-popover:not(#downloadMenuPopover):not(#mobileDownloadMenuPopover):not(#backgroundMenuPopover) {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.download-menu-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.download-menu-popover,
.shape-menu-popover,
.shape-modal-inner {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.download-menu-popover::-webkit-scrollbar,
.shape-menu-popover::-webkit-scrollbar,
.shape-modal-inner::-webkit-scrollbar {
    display: none;
}

.download-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--app-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.download-menu-item:focus {
    outline: none;
}

.download-menu-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.download-menu-item:hover {
    background: var(--button-secondary-hover);
}

.download-menu-item:disabled,
.download-menu-item.is-disabled {
    color: var(--font-tertiary);
    opacity: 0.55;
    cursor: default;
    background: transparent;
}

.download-menu-item:disabled:hover,
.download-menu-item.is-disabled:hover {
    background: transparent;
}

body.theme-dark .download-menu-item:hover {
    background: var(--app-surface-hover);
}

.download-menu-count {
    color: var(--app-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    opacity: 0.75;
    margin-left: 8px;
}

/* Export menu rows — Figma 50:30925: светлая тема без разделителей; в тёмной — линии как раньше */
#downloadMenuPopover .download-menu-item,
#mobileDownloadMenuPopover .download-menu-item,
#backgroundMenuPopover .download-menu-item {
    padding: var(--l);
    font-size: 12px;
    line-height: 14px;
    color: var(--font-secondary);
}

body.theme-dark #downloadMenuPopover .download-menu-item:not(:last-child),
body.theme-dark #mobileDownloadMenuPopover .download-menu-item:not(:last-child),
body.theme-dark #backgroundMenuPopover .download-menu-item:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

#downloadMenuPopover .download-menu-count,
#mobileDownloadMenuPopover .download-menu-count {
    color: var(--font-tertiary);
    margin-left: 0;
    opacity: 1;
}

#downloadMenuPopover .download-menu-item:hover,
#mobileDownloadMenuPopover .download-menu-item:hover,
#backgroundMenuPopover .download-menu-item:hover {
    background: var(--button-secondary-hover);
}

body.theme-dark #downloadMenuPopover .download-menu-item:hover,
body.theme-dark #mobileDownloadMenuPopover .download-menu-item:hover,
body.theme-dark #backgroundMenuPopover .download-menu-item:hover {
    background: var(--button-secondary-hover);
}

.add-header-btn {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1680px) and (min-width: 1301px) {
    .main-header-actions-left {
        gap: 8px;
    }

    .header-actions-canvas-left {
        gap: 8px;
    }

    .result-container {
        border: none;
    }
}

/* Compact header buttons for ALL narrower-than-1680 viewports, including tablet ranges */
@media (max-width: 1439px) and (min-width: 744px) {
    .main-header-actions-center .add-menu-wrap {
        display: none;
    }

    .safe-zones-switch-wrap .switch-label {
        position: relative;
        display: inline-block;
        color: transparent;
    }

    .safe-zones-switch-wrap .switch-label::after {
        content: "Zones";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--app-text);
    }
}

/* Desktop shape modal (centered) */
.shape-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 180;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.shape-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.shape-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 181;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--panel-motion), visibility var(--panel-motion);
}

.shape-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.shape-modal-inner {
    background: var(--shape-picker-surface);
    color: var(--shape-on-picker-fg);
    border-radius: var(--radius-shape-modal);
    padding: var(--xxl);
    max-width: 472px;
    width: calc(100vw - 32px);
    box-shadow: none;
    pointer-events: auto;
}

.shape-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.shape-modal-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--shape-on-picker-fg);
    margin: 0;
}

.shape-modal-inner .shape-modal-close {
    color: var(--font-secondary);
}

.shape-modal-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-modal-close:focus {
    outline: none;
}

.shape-modal-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.shape-modal-close svg {
    width: 24px;
    height: 24px;
}

.shape-modal-body {
    max-height: none;
    overflow: visible;
}

.shape-modal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shape-modal-grid .shape-menu-item {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 16px;
    border: none;
    background: var(--shape-picker-tile);
}

.shape-modal-grid .shape-menu-item:hover,
.shape-modal-grid .shape-menu-item.active {
    background: var(--shape-picker-tile-hover);
}

@media (max-width: 743px) {

    .shape-modal-backdrop,
    .shape-modal {
        display: none;
    }
}

/* Shape float toolbar — Figma EditPanel 17:8663 / 27:47256 */
.shape-float-toolbar {
    display: none;
    position: fixed;
    z-index: 9999;
    width: auto;
    pointer-events: auto;
}

.shape-float-toolbar.visible {
    display: block;
}

.svg-image-float-toolbar {
    display: none;
    position: fixed;
    z-index: 9999;
    width: auto;
    pointer-events: auto;
}

.svg-image-float-toolbar.visible {
    display: block;
}

.svg-image-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--xs);
    min-height: 44px;
    box-sizing: border-box;
    background: var(--float-toolbar-bg);
    border-radius: var(--app-radius-btn);
}

.svg-image-color-palette {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--xs);
    min-height: 40px;
}

.svg-image-color-trigger {
    position: relative;
}

.svg-image-color-trigger.is-active {
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--float-toolbar-counter-border) inset;
}

.svg-image-color-trigger.is-active .shape-color-swatch {
    border-color: var(--primary);
}

.svg-image-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--float-toolbar-separator);
    flex-shrink: 0;
    margin: 0 var(--m);
}

.svg-image-toolbar-counter-wrap {
    width: 112px;
    min-width: 112px;
    padding-right: var(--m);
    box-sizing: border-box;
}

.svg-image-toolbar-counter-wrap .text-toolbar-size {
    width: 100%;
    min-width: 0;
}

.svg-image-toolbar-rotation-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.shape-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--xs);
    padding: var(--xs);
    min-height: 44px;
    box-sizing: border-box;
    background: var(--float-toolbar-bg);
    border-radius: var(--app-radius-btn);
}

.shape-toolbar-inner.shape-toolbar--seal {
    gap: 6px;
}

.shape-toolbar-seal-wrap {
    display: none;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

/* Иконка углов слева от счётчика: как иконка поворота — клик сбрасывает число лучей на 8 */
.shape-toolbar-seal-angles-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--app-radius-btn);
    background: transparent;
    color: var(--float-toolbar-icon);
    cursor: pointer;
    box-sizing: border-box;
}

.shape-toolbar-seal-angles-btn:hover {
    color: var(--primary);
}

.shape-toolbar-inner .shape-toolbar-seal-angles-btn {
    color: var(--float-toolbar-icon);
}

.shape-toolbar-inner .shape-toolbar-seal-angles-btn:hover {
    color: var(--primary);
}

.shape-toolbar-seal-angles-btn svg {
    display: block;
}

.shape-toolbar-seal-counter-wrap {
    width: auto;
    min-width: 0;
    padding-right: var(--m);
}

.shape-toolbar-seal-counter-wrap .text-toolbar-size {
    width: auto;
    min-width: 86px;
    max-width: none;
    padding: 0 12px 0 6px;
    gap: 2px;
}

.shape-toolbar-seal-counter-wrap .text-toolbar-size-input {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0 4px;
}

/* Линия и стрелка: без блока заливки кнопка Bezier остаётся в потоке */
.shape-toolbar-inner.shape-toolbar--stroke-only #shapeBezierBtn {
    display: inline-flex !important;
}

.shape-toolbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--app-text);
    flex-shrink: 0;
}

.shape-toolbar-icon svg {
    width: 24px;
    height: 24px;
}

.shape-toolbar-icon-border {
    color: var(--app-text);
}

.shape-toolbar-inner .shape-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--float-toolbar-separator);
    flex-shrink: 0;
}

.shape-toolbar-fill-wrap input,
.shape-toolbar-border-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.shape-color-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.shape-color-trigger-border {
    background: transparent;
}

.text-float-toolbar-inner .text-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--float-toolbar-separator);
    flex-shrink: 0;
}

.shape-toolbar-rotation-icon,
.text-toolbar-rotation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--app-text);
    flex-shrink: 0;
    cursor: pointer;
}

.shape-toolbar-inner .shape-toolbar-rotation-icon,
.text-float-toolbar-inner .text-toolbar-rotation-icon {
    width: 40px;
    height: 40px;
    color: var(--float-toolbar-icon);
}

.shape-toolbar-inner .shape-toolbar-rotation-icon:hover,
.text-float-toolbar-inner .text-toolbar-rotation-icon:hover {
    color: var(--primary);
}

.shape-toolbar-rotation-icon svg,
.text-toolbar-rotation-icon svg {
    width: 20px;
    height: 20px;
}

.shape-toolbar-inner .shape-toolbar-rotation-icon svg,
.text-float-toolbar-inner .text-toolbar-rotation-icon svg {
    width: 16px;
    height: 16px;
}

.shape-toolbar-rotation-wrap,
.text-toolbar-rotation-wrap,
.svg-image-toolbar-rotation-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.shape-toolbar-rotation-wrap .text-toolbar-size-input,
.text-toolbar-rotation-wrap .text-toolbar-size-input,
.svg-image-toolbar-rotation-wrap .text-toolbar-size-input {
    flex: 0 0 auto;
    min-width: 1ch;
    width: 1ch;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.shape-toolbar-degree,
.text-toolbar-degree,
.svg-image-toolbar-degree {
    flex-shrink: 0;
    margin-left: 2px;
    padding-left: 0;
    padding-right: 0;
    font-size: 0.9em;
    color: var(--app-text);
}

.shape-toolbar-inner .shape-toolbar-degree,
.text-float-toolbar-inner .text-toolbar-degree,
.svg-image-toolbar-inner .svg-image-toolbar-degree {
    font-size: 12px;
    line-height: 14px;
    color: var(--float-toolbar-counter-text);
}

/* Shape Bezier corner handles — above shape in point-edit mode */
.result-container .overlay-layer .shape-item {
    overflow: visible;
    transform-origin: center center;
    pointer-events: auto;
    touch-action: none;
}

body.shape-bezier-mode .overlay-layer .shape-item {
    z-index: 1;
    overflow: visible;
}

.shape-bezier-handles {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

.shape-radius-handles {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

.shape-radius-dot {
    position: relative;
    transform: translate(-50%, -50%);
    touch-action: none;
    pointer-events: auto;
    z-index: 2;
    width: calc(12px / var(--controls-scale, 1));
    height: calc(12px / var(--controls-scale, 1));
    box-sizing: border-box;
    border: 1.5px solid #fff;
}

.shape-radius-dot::before {
    content: '';
    position: absolute;
    inset: calc(-14px / var(--controls-scale, 1));
    border-radius: 999px;
}

.shape-radius-dot.shape-seal-valley-dot {
    border-color: #dc2626;
}

/* Line/arrow endpoint dots — blue, same as shape corners */
.shape-line-endpoint-handles {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

.shape-line-endpoint-dot {
    transform: translate(-50%, -50%);
    touch-action: none;
    z-index: 2;
    width: calc(12px / var(--controls-scale, 1));
    height: calc(12px / var(--controls-scale, 1));
    border: 1.5px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
}

.shape-line-rotation-handle {
    touch-action: none;
    z-index: 2;
}

.shape-line-rotation-handle svg {
    width: 16px;
    height: 16px;
}

.shape-line-arrowhead-dot {
    transform: translate(-50%, -50%);
    touch-action: none;
    z-index: 2;
    width: calc(12px / var(--controls-scale, 1));
    height: calc(12px / var(--controls-scale, 1));
    border: 1.5px solid #fff;
    box-sizing: border-box;
    border-radius: 50%;
}

.shape-line-rotation-handle:hover {
    color: var(--app-accent);
}

body.theme-dark .shape-line-rotation-handle {
    background: var(--app-panel-bg, #27272a);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.theme-dark .shape-line-rotation-handle:hover {
    color: var(--app-accent);
}

/* Corner points — 12×12px, white bg, red 1.5px ring */
.shape-bezier-dot {
    position: absolute;
    width: calc(12px / var(--controls-scale, 1));
    height: calc(12px / var(--controls-scale, 1));
    margin-left: calc(-6px / var(--controls-scale, 1));
    margin-top: calc(-6px / var(--controls-scale, 1));
    border-radius: 50%;
    background: #FF0000;
    box-shadow: 0 0 0 calc(1.5px / var(--controls-scale, 1)) #fff;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    z-index: 2;
}

body.theme-dark .shape-bezier-dot {
    background: #FF0000;
}

.shape-bezier-dot-selected {
    box-shadow: 0 0 0 calc(1.5px / var(--controls-scale, 1)) #FF0000, 0 0 0 calc(3px / var(--controls-scale, 1)) var(--app-surface);
}

/* Bezier handles at line ends — 12×12px, red bg, white 1.5px ring */
.shape-bezier-handle-dot {
    position: absolute;
    width: calc(12px / var(--controls-scale, 1));
    height: calc(12px / var(--controls-scale, 1));
    margin-left: calc(-6px / var(--controls-scale, 1));
    margin-top: calc(-6px / var(--controls-scale, 1));
    border-radius: 50%;
    background: #FF0000;
    box-shadow: 0 0 0 calc(1.5px / var(--controls-scale, 1)) #fff;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    z-index: 2;
}

.shape-bezier-guides-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Bezier lines — 2px screen pixels (non-scaling-stroke), dashed, red */
.shape-bezier-guides-svg .shape-bezier-guide-line {
    stroke: #FF0000;
    stroke-width: calc(2px / var(--controls-scale, 1));
    stroke-dasharray: calc(6px / var(--controls-scale, 1)) calc(4px / var(--controls-scale, 1));
    vector-effect: non-scaling-stroke;
}

.shape-toolbar-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-toolbar-btn:hover {
    background: var(--app-surface-hover);
    color: var(--app-accent);
}

.shape-toolbar-btn svg {
    width: 20px;
    height: 20px;
}

.shape-toolbar-inner .shape-toolbar-btn {
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: var(--l);
    border-radius: var(--app-radius-btn);
    color: var(--float-toolbar-icon);
}

.shape-toolbar-inner .shape-toolbar-btn:hover {
    background: transparent;
    color: var(--primary);
}

.shape-toolbar-inner .shape-toolbar-btn svg {
    width: 16px;
    height: 16px;
}

#shapeBezierBtn svg path {
    stroke: currentColor;
}

body:not(.theme-dark) .shape-toolbar-inner #shapeBezierBtn {
    color: var(--float-toolbar-icon);
}

body:not(.theme-dark) .shape-toolbar-inner #shapeBezierBtn:hover {
    color: var(--primary);
}

.multi-select-toolbar-btn {
    width: 40px;
    height: 40px;
    padding: var(--l);
    border: none;
    border-radius: var(--app-radius-btn);
    background: transparent;
    color: var(--float-toolbar-icon);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.multi-select-toolbar-btn:hover {
    color: var(--primary);
}

.multi-select-toolbar-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.header-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--app-radius-btn);
    background: transparent;
    color: var(--app-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--app-transition), color var(--app-transition);
}

.header-icon-btn:hover:not(:disabled) {
    background: var(--app-surface-hover);
    color: var(--app-accent);
}

.header-icon-btn:disabled {
    color: var(--app-text-muted);
    cursor: default;
    opacity: 0.7;
}

.header-icon-btn svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 1681px) {
    .header-icon-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   CANVAS AREA
   ========================================================================== */
.canvas-wrap *,
.canvas-wrap,
.canvas-viewport,
.canvas-stage,
.canvas-scaler,
.result-container,
.result-container * {
    transition: none !important;
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
}

/* Canvas column — solid page bg (Figma Design, no dot texture) */
.canvas-wrap::before,
.main::before {
    display: none;
}

body.theme-dark .canvas-wrap,
body.theme-dark .main {
    background: var(--app-bg);
}

/* Copy/paste — absolute right-side overlay inside .main (now replaced by canvas-right-overlay) */
.canvas-copy-paste-wrap {
    display: none;
}

/* ==========================================================================
   COMPONENT: Canvas right overlay — undo/redo/safezones/copy/paste
   Matches Figma RightToolsOverlay: absolute right-centered, pill buttons bg-[#343538]
   ========================================================================== */
.canvas-right-overlay {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--xxl);
    align-items: flex-start;
    z-index: 10;
}

/* Group of 2 stacked buttons (undo+redo, copy+paste) */
.canvas-right-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Individual pill button: как Figma RightToolsOverlay — всегда трек --canvas-chrome-bg */
.canvas-right-btn {
    width: 32px;
    height: 32px;
    padding: 8px;
    border: none;
    border-radius: 9999px;
    background: var(--canvas-chrome-bg);
    color: var(--canvas-chrome-fg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.canvas-right-btn:hover:not(:disabled) {
    background: var(--canvas-chrome-hover);
    color: #ffffff;
}

.canvas-right-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.canvas-right-btn:focus {
    outline: none;
}

.canvas-right-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Включённые Safe zones: только тёмное/светлое кольцо (без второго browser ring) */
.canvas-right-btn--safezones[aria-checked="true"]:focus-visible,
.canvas-right-btn--safezones.active:focus-visible,
.canvas-right-btn--safezones.on:focus-visible {
    outline: 2px solid var(--button-primary-font);
    outline-offset: 2px;
}

.canvas-right-btn svg path,
.canvas-right-btn svg line,
.canvas-right-btn svg circle,
.canvas-right-btn svg rect,
.canvas-right-btn svg polyline {
    stroke: currentColor !important;
}

.canvas-right-btn--safezones.active,
.canvas-right-btn--safezones.on,
.canvas-right-btn--safezones[aria-checked="true"] {
    background: var(--primary) !important;
    color: var(--button-primary-font) !important;
    border-color: transparent;
}

.canvas-right-btn--safezones {
    transition: none;
}

.canvas-right-btn--safezones.active:hover:not(:disabled),
.canvas-right-btn--safezones.on:hover:not(:disabled),
.canvas-right-btn--safezones[aria-checked="true"]:hover:not(:disabled) {
    background: var(--button-primary-hover) !important;
    color: var(--button-primary-font) !important;
}

.canvas-right-btn--safezones.active svg path,
.canvas-right-btn--safezones.on svg path,
.canvas-right-btn--safezones[aria-checked="true"] svg path,
.canvas-right-btn--safezones.active svg line,
.canvas-right-btn--safezones.on svg line,
.canvas-right-btn--safezones[aria-checked="true"] svg line,
.canvas-right-btn--safezones.active svg circle,
.canvas-right-btn--safezones.on svg circle,
.canvas-right-btn--safezones[aria-checked="true"] svg circle,
.canvas-right-btn--safezones.active svg rect,
.canvas-right-btn--safezones.on svg rect,
.canvas-right-btn--safezones[aria-checked="true"] svg rect,
.canvas-right-btn--safezones.active svg polyline,
.canvas-right-btn--safezones.on svg polyline,
.canvas-right-btn--safezones[aria-checked="true"] svg polyline {
    stroke: currentColor !important;
}

.canvas-right-btn--safezones svg path,
.canvas-right-btn--safezones svg line,
.canvas-right-btn--safezones svg circle,
.canvas-right-btn--safezones svg rect,
.canvas-right-btn--safezones svg polyline {
    stroke-width: 1.5px;
}

.canvas-copy-paste-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-surface-hover);
    color: var(--app-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-copy-paste-btn:hover:not(:disabled) {
    background: var(--app-border);
}

body.theme-dark .canvas-copy-paste-btn {
    background: var(--app-surface-hover);
    color: var(--app-text-muted);
}

body.theme-dark .canvas-copy-paste-btn:hover:not(:disabled) {
    background: var(--app-panel-bg);
    color: var(--app-text);
}

.canvas-copy-paste-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.canvas-copy-paste-btn svg {
    width: 20px;
    height: 20px;
}

.canvas-viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    touch-action: none;
}

.canvas-stage {
    position: relative;
    flex: 0 0 auto;
    touch-action: none;
}

.canvas-rulers {
    position: absolute;
    inset: 0 auto auto 0;
    pointer-events: none;
    z-index: 30;
    color: rgba(255, 255, 255, 0.34);
    --ruler-size: 24px;
    --ruler-left-size: 40px;
    --ruler-gap: 4px;
    --ruler-label-gap: 8px;
}

body:not(.theme-dark) .canvas-rulers {
    color: rgba(0, 0, 0, 0.3);
}

.canvas-ruler {
    position: absolute;
    overflow: hidden;
    background: transparent;
}

.canvas-ruler-top {
    left: 0;
    right: 0;
    top: calc(-1 * (var(--ruler-size) + var(--ruler-gap)));
    height: var(--ruler-size);
}

.canvas-ruler-left {
    left: calc(-1 * (var(--ruler-left-size) + var(--ruler-gap)));
    top: 0;
    width: var(--ruler-left-size);
    bottom: 0;
}

.canvas-ruler-tick {
    position: absolute;
    background: currentColor;
    opacity: 0.42;
}

.canvas-ruler-top .canvas-ruler-tick {
    bottom: 0;
    width: 1px;
    height: 3px;
}

.canvas-ruler-top .canvas-ruler-tick.is-major {
    height: 5px;
    opacity: 0.62;
}

.canvas-ruler-left .canvas-ruler-tick {
    right: 0;
    width: 3px;
    height: 1px;
}

.canvas-ruler-left .canvas-ruler-tick.is-major {
    width: 5px;
    opacity: 0.62;
}

.canvas-ruler-tick.is-guide-hit {
    background: var(--ruler-guide-hit-color);
    opacity: 1;
}

.canvas-ruler-top .canvas-ruler-tick.is-guide-hit {
    height: 6px;
}

.canvas-ruler-left .canvas-ruler-tick.is-guide-hit {
    width: 6px;
}

.canvas-ruler-label.is-guide-hit {
    color: var(--ruler-guide-hit-color);
    opacity: 1;
}

.canvas-ruler-label {
    position: absolute;
    font-size: 8px;
    line-height: 8px;
    color: currentColor;
    opacity: 0.68;
    user-select: none;
}

.canvas-ruler-top .canvas-ruler-label {
    bottom: var(--ruler-label-gap);
    transform: translateX(-50%);
}

.canvas-ruler-left .canvas-ruler-label {
    right: var(--ruler-label-gap);
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
}

.canvas-ruler-marker {
    position: absolute;
    display: none;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22);
    z-index: 2;
}

.canvas-rulers.has-active-object .canvas-ruler-marker {
    display: none;
}

.canvas-ruler-marker-x {
    top: calc(-1 * var(--ruler-size));
    bottom: 0;
    width: 1px;
}

.canvas-ruler-marker-y {
    left: calc(-1 * var(--ruler-left-size));
    right: 0;
    height: 1px;
}

.canvas-scaler {
    transform-origin: 0 0;
    display: block;
    touch-action: none;
}

.result-container {
    position: relative;
    background: transparent;
    border: none;
    border-radius: var(--app-radius-canvas);
    overflow: visible;
    z-index: 1;
    --controls-scale: 1;
    touch-action: none;
}

.result-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
    box-sizing: border-box;
}

.result-container .canvas-clip-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
}

.result-container .interaction-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 12;
    --controls-scale: 1;
}

.marquee-selection-box {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    background: rgba(0, 111, 255, 0.2);
    z-index: 13;
}

body.theme-dark .marquee-selection-box {
    background: rgba(255, 255, 255, 0.2);
}

/* Круг превью цвета фона экспорта — Figma 1:118; размер в экранных пикселях не меняется при zoom холста (компенсация scale canvasScaler) */
.canvas-export-color-trigger {
    position: absolute;
    z-index: 25;
    left: calc(-0.8px / var(--controls-scale, 1));
    top: calc(-1px / var(--controls-scale, 1));
    box-sizing: border-box;
    width: calc(40px / var(--controls-scale, 1));
    height: calc(40px / var(--controls-scale, 1));
    padding: calc(var(--l, 12px) / var(--controls-scale, 1));
    margin: 0;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.canvas-export-color-trigger:focus {
    outline: none;
}

.canvas-export-color-trigger:focus-visible {
    outline: calc(2px / var(--controls-scale, 1)) solid var(--primary);
    outline-offset: calc(2px / var(--controls-scale, 1));
}

.canvas-export-color-swatch {
    display: block;
    width: calc(24px / var(--controls-scale, 1));
    height: calc(24px / var(--controls-scale, 1));
    border-radius: 50%;
    box-sizing: border-box;
    border: calc(1px / var(--controls-scale, 1)) solid var(--border);
    flex-shrink: 0;
}

.canvas-export-color-trigger.is-transparent .canvas-export-color-swatch {
    background-color: #e4e4e7;
    background-image:
        linear-gradient(45deg, #a1a1aa 25%, transparent 25%),
        linear-gradient(-45deg, #a1a1aa 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #a1a1aa 75%),
        linear-gradient(-45deg, transparent 75%, #a1a1aa 75%);
    background-size: calc(8px / var(--controls-scale, 1)) calc(8px / var(--controls-scale, 1));
    background-position:
        0 0,
        0 calc(4px / var(--controls-scale, 1)),
        calc(4px / var(--controls-scale, 1)) calc(-4px / var(--controls-scale, 1)),
        calc(-4px / var(--controls-scale, 1)) 0;
}

body.theme-dark .canvas-export-color-trigger.is-transparent .canvas-export-color-swatch {
    background-color: #3f3f46;
    background-image:
        linear-gradient(45deg, #71717a 25%, transparent 25%),
        linear-gradient(-45deg, #71717a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #71717a 75%),
        linear-gradient(-45deg, transparent 75%, #71717a 75%);
    background-size: calc(8px / var(--controls-scale, 1)) calc(8px / var(--controls-scale, 1));
    background-position:
        0 0,
        0 calc(4px / var(--controls-scale, 1)),
        calc(4px / var(--controls-scale, 1)) calc(-4px / var(--controls-scale, 1)),
        calc(-4px / var(--controls-scale, 1)) 0;
}

.result-container .bg-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.result-container .bg-layer .bg-video-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    pointer-events: none;
}

.result-container .video-render-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.result-container .overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    --controls-scale: 1;
}

.result-container .overlay-layer .draggable-item {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    box-sizing: border-box;
}

.result-container .overlay-layer .draggable-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.result-container .overlay-layer .draggable-item video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

/* SVG overlay images: stretch to fill frame by width and height (like raster), no proportional scaling */
.result-container .overlay-layer .draggable-item img[data-is-svg="true"] {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: fill !important;
    object-position: center;
}

.result-container .overlay-layer .text-item {
    position: absolute;
    pointer-events: auto;
    cursor: move;
    touch-action: none;
    padding: 8px 12px;
    color: #fff;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    user-select: none;
    max-width: 85%;
    width: 420px;
    /* fixed default so block size is preserved for all lines; inline width overrides */
    min-width: 80px;
    min-height: 1.2em;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    transform-origin: center center;
}

.result-container .overlay-layer .text-item.selected {
    outline: none;
}

.result-container .overlay-layer .draggable-item.multi-selected,
.result-container .overlay-layer .text-item.multi-selected,
.result-container .overlay-layer .shape-item.multi-selected {
    outline: none;
}

.multi-selection-frames-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    display: none;
}

.multi-selection-frame {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}

.result-container .overlay-layer .text-item * {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: inherit;
    text-transform: inherit;
}

/* Selection frame with resize handles. Wrapper scales with canvas (no transform); inner frame visual is counter-scaled so border/handles stay constant size. */
.selection-frame-wrapper {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.selection-frame-wrapper .selection-frame {
    pointer-events: none;
}

.selection-frame {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    display: none;
}

.selection-frame.visible {
    display: block;
}

.selection-frame-border {
    position: absolute;
    inset: 0;
    border: calc(1px / var(--controls-scale, 1)) solid var(--selection-frame-border-color);
    border-radius: 0;
    pointer-events: none;
}

.selection-frame .resize-handle {
    position: absolute;
    background: var(--selection-frame-handle-fill);
    border: calc(1px / var(--controls-scale, 1)) solid var(--selection-frame-handle-stroke);
    pointer-events: auto;
    cursor: default;
    border-radius: calc(2px / var(--controls-scale, 1));
    box-sizing: border-box;
}

.selection-frame .resize-handle.handle-nw,
.selection-frame .resize-handle.handle-ne,
.selection-frame .resize-handle.handle-sw,
.selection-frame .resize-handle.handle-se {
    width: calc(6px / var(--controls-scale, 1));
    height: calc(6px / var(--controls-scale, 1));
}

.selection-frame .resize-handle.handle-n,
.selection-frame .resize-handle.handle-s {
    width: calc(16px / var(--controls-scale, 1));
    height: calc(6px / var(--controls-scale, 1));
    left: 50%;
    margin-left: calc(-8px / var(--controls-scale, 1));
    border-radius: 999px;
}

.selection-frame .resize-handle.handle-e,
.selection-frame .resize-handle.handle-w {
    width: calc(6px / var(--controls-scale, 1));
    height: calc(16px / var(--controls-scale, 1));
    top: 50%;
    margin-top: calc(-8px / var(--controls-scale, 1));
    border-radius: 999px;
}

.selection-frame .resize-handle.handle-nw {
    top: calc(-3px / var(--controls-scale, 1));
    left: calc(-3px / var(--controls-scale, 1));
    cursor: nwse-resize;
}

.selection-frame .resize-handle.handle-n {
    top: calc(-3px / var(--controls-scale, 1));
    cursor: ns-resize;
}

.selection-frame .resize-handle.handle-ne {
    top: calc(-3px / var(--controls-scale, 1));
    right: calc(-3px / var(--controls-scale, 1));
    left: auto;
    cursor: nesw-resize;
}

.selection-frame .resize-handle.handle-e {
    right: calc(-3px / var(--controls-scale, 1));
    left: auto;
    cursor: ew-resize;
}

.selection-frame .resize-handle.handle-se {
    bottom: calc(-3px / var(--controls-scale, 1));
    right: calc(-3px / var(--controls-scale, 1));
    left: auto;
    top: auto;
    cursor: nwse-resize;
}

.selection-frame .resize-handle.handle-s {
    bottom: calc(-3px / var(--controls-scale, 1));
    top: auto;
    cursor: ns-resize;
}

.selection-frame .resize-handle.handle-sw {
    bottom: calc(-3px / var(--controls-scale, 1));
    left: calc(-3px / var(--controls-scale, 1));
    top: auto;
    cursor: nesw-resize;
}

.selection-frame .resize-handle.handle-w {
    left: calc(-3px / var(--controls-scale, 1));
    cursor: ew-resize;
}

.selection-frame-wrapper.framed-text .resize-handle.handle-n,
.selection-frame-wrapper.framed-text .resize-handle.handle-s {
    display: none;
}

/* SVG image: only corner resize handles, no side handles */
.selection-frame-wrapper.framed-svg .resize-handle.handle-n,
.selection-frame-wrapper.framed-svg .resize-handle.handle-s,
.selection-frame-wrapper.framed-svg .resize-handle.handle-e,
.selection-frame-wrapper.framed-svg .resize-handle.handle-w {
    display: none;
}

/* Пара маска + слой: ротация у рамки группы доступна в каждом углу */
.selection-frame-wrapper.framed-mask-block .selection-frame-rotation-handle {
    display: flex !important;
}

/* Шейп как маска: не рисуем заливку под картинкой (режим «mask» в слоях снова показывает фигуру) */
.shape-item.shape-is-masking-layer {
    opacity: 0 !important;
    pointer-events: auto;
}

/* SVG image used as mask source: hide visual layer, keep it interactive in canvas/layers logic */
.draggable-item.draggable-item-is-masking-layer {
    opacity: 0 !important;
    pointer-events: auto;
}

/* Corner hover zone — covers both corner and rotation icon for clicking */
.selection-frame-corner-zone {
    position: absolute;
    width: calc(34px / var(--controls-scale, 1));
    height: calc(34px / var(--controls-scale, 1));
    z-index: 1;
}

.selection-frame-corner-zone.handle-nw {
    top: calc(-25px / var(--controls-scale, 1));
    left: calc(-25px / var(--controls-scale, 1));
}

.selection-frame-corner-zone.handle-ne {
    top: calc(-25px / var(--controls-scale, 1));
    right: calc(-25px / var(--controls-scale, 1));
    left: auto;
}

.selection-frame-corner-zone.handle-se {
    bottom: calc(-25px / var(--controls-scale, 1));
    right: calc(-25px / var(--controls-scale, 1));
    top: auto;
    left: auto;
}

.selection-frame-corner-zone.handle-sw {
    bottom: calc(-25px / var(--controls-scale, 1));
    left: calc(-25px / var(--controls-scale, 1));
    top: auto;
}

/* Handles and icon inside zone — positions relative to zone (0,0 = frame corner) */
.selection-frame-corner-zone .resize-handle.handle-nw {
    top: calc(22px / var(--controls-scale, 1));
    left: calc(22px / var(--controls-scale, 1));
}

.selection-frame-corner-zone .resize-handle.handle-ne {
    top: calc(22px / var(--controls-scale, 1));
    right: calc(22px / var(--controls-scale, 1));
    left: auto;
}

.selection-frame-corner-zone .resize-handle.handle-se {
    bottom: calc(22px / var(--controls-scale, 1));
    right: calc(22px / var(--controls-scale, 1));
    top: auto;
    left: auto;
}

.selection-frame-corner-zone .resize-handle.handle-sw {
    bottom: calc(22px / var(--controls-scale, 1));
    left: calc(22px / var(--controls-scale, 1));
    top: auto;
}

.selection-frame-corner-zone .selection-frame-rotation-handle.handle-nw {
    top: 0;
    left: 0;
    transform: none;
}

.selection-frame-corner-zone .selection-frame-rotation-handle.handle-ne {
    top: 0;
    right: 0;
    left: auto;
    transform: none;
}

.selection-frame-corner-zone .selection-frame-rotation-handle.handle-se {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    transform: none;
}

.selection-frame-corner-zone .selection-frame-rotation-handle.handle-sw {
    bottom: 0;
    left: 0;
    top: auto;
    transform: none;
}

/* Rotation icon at hovered corner; offset diagonally; click icon — rotate, corner — scale */
.selection-frame-rotation-handle {
    position: absolute;
    width: calc(22px / var(--controls-scale, 1));
    height: calc(22px / var(--controls-scale, 1));
    border-radius: 50%;
    background: var(--button-secondary);
    border: none;
    color: var(--font-secondary);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* Offset from corner diagonally outward ~14px */
.selection-frame-rotation-handle svg {
    width: calc(14px / var(--controls-scale, 1));
    height: calc(14px / var(--controls-scale, 1));
}

/* Rotation icons always visible when shape/text selected for clicking */
.selection-frame.has-rotation.visible .selection-frame-rotation-handle {
    pointer-events: auto;
    opacity: 1;
    cursor: grab;
}

.selection-frame-rotation-handle:hover {
    cursor: grab;
}

.selection-frame-rotation-handle:active {
    cursor: grabbing;
}

.result-container .overlay-layer .text-item[contenteditable="true"] {
    min-width: 80px;
}

.result-container .overlay-layer .text-item[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.5);
}

.guides-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

.guides-layer .guide-line {
    position: absolute;
    background: #FF0000;
}

.guides-layer .guide-line.ruler-guide {
    background: rgba(255, 255, 255, 0.15);
}

.guides-layer .guide-line.v {
    width: calc(1px / var(--controls-scale, 1));
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(-50%);
}

.guides-layer .guide-line.h {
    height: calc(1px / var(--controls-scale, 1));
    width: 100%;
    top: 0;
    left: 0;
    transform: translateY(-50%);
}

body:not(.theme-dark) .guides-layer .guide-line.ruler-guide {
    background: rgba(0, 0, 0, 0.15);
}

.guides-layer .guide-line.ruler-guide.v {
    width: calc(0.5px / var(--controls-scale, 1));
}

.guides-layer .guide-line.ruler-guide.h {
    height: calc(0.5px / var(--controls-scale, 1));
}

.safe-zones-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
    box-sizing: border-box;
    /* Как у overlay: толщина линий в экранных px при масштабе холста (задаётся из JS) */
    --controls-scale: 1;
}

.safe-zone-item {
    position: absolute;
    border: none;
    background: var(--safe-zone-item-fill);
    box-sizing: border-box;
}

.safe-zone-item.circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.safe-zone-mask {
    position: absolute;
    background: var(--safe-zone-mask-bg);
    pointer-events: none;
    box-sizing: border-box;
}

.unsafe-overlay {
    position: absolute;
    background: var(--safe-zone-unsafe-fill);
    border-style: solid;
    border-width: calc(1px / var(--controls-scale, 1));
    border-color: var(--safe-zone-unsafe-border);
    pointer-events: none;
    box-sizing: border-box;
}

.safe-area-outline {
    position: absolute;
    border-width: calc(1px / var(--controls-scale, 1));
    border-style: var(--safe-zone-outline-style);
    border-color: var(--safe-zone-outline-color);
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.safe-zone-guide {
    position: absolute;
    border: calc(1px / var(--controls-scale, 1)) solid rgba(255, 255, 255, 0.5);
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
}

.result-container.harmonized .harmonize-overlay {
    display: block !important;
}

.harmonize-overlay {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: radial-gradient(ellipse 85% 85% at 50% 50%, rgba(120, 90, 180, 0.4), transparent 65%);
    z-index: 15;
}

/* Export progress toast */
.export-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    padding: 10px 20px;
    background: var(--app-text);
    color: var(--app-surface);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--app-radius-btn);
    box-shadow: var(--app-shadow-panel);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.export-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   MODALS & UTILITIES
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--app-surface);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    padding: 16px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
}

.modal h3 {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--app-text);
}

.modal input[type="text"],
.modal textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--input-radius);
    background: #ffffff;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 14px;
}

.modal input[type="text"]:focus,
.modal textarea:focus {
    outline: none;
    border-color: var(--app-accent);
}

.modal textarea {
    min-height: 80px;
    resize: vertical;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

input[type="file"] {
    display: none;
}

/* ==========================================================================
   RESPONSIVE: 1280–1439px — desktop-sm (Figma Make)
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1439px) {
    .desktop-layout {
        gap: 16px;
        padding: 72px 16px 16px;
    }

    .main-header {
        padding: 16px;
        z-index: 140;
    }

    .main-header-actions {
        max-width: calc(100vw - 32px);
    }

    /* Полоса лого + табы совпадает по ширине с левой колонкой (280px в этом диапазоне) */
    .main-header-brand-strip {
        width: 280px;
    }

    /* Панель размеров — те же токены, что в Figma 14:1253: padding 24, radius панели 28 */
    .sidebar-left {
        width: 280px;
        padding: var(--xxl);
        border-radius: var(--app-radius-panel);
    }

    .sidebar-right {
        width: 280px;
    }

    .layers-panel-inner {
        padding: 16px;
        border-radius: 16px;
    }

    .main {
        border-radius: 0;
    }

    .result-container {
        border-radius: var(--app-radius-canvas);
    }

    .btn-tab {
        padding: 8px 12px;
        font-size: 12px;
        line-height: 12px;
    }

    .dark-light-toggle,
    .header-material-toggle {
        width: 72px;
        height: 36px;
    }

    .dark-light-slider,
    .header-material-slider {
        width: 34px;
        height: 32px;
    }

    body:not(.theme-dark) .dark-light-slider,
    body.material-type-video .header-material-toggle .header-material-slider {
        transform: translate(34px, -50%);
    }

    .dark-light-toggle button,
    .header-material-toggle .header-material-btn {
        width: 34px;
        height: 32px;
    }

    .dark-light-toggle button svg,
    .header-material-toggle .header-material-btn svg {
        width: 16px;
        height: 16px;
    }

    .custom-size-item.accordion-subitem {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        min-height: 32px;
        padding: 10px var(--l);
        font-size: 12px;
        line-height: 12px;
    }

    .main-header-actions-right .btn .btn-label {
        line-height: 12px;
    }

    .main-header-actions-right .btn-harmonize,
    .main-header-actions-right #clearBtn {
        font-size: 12px;
    }
}

/* ==========================================================================
   Mobile/Tablet extras hidden on desktop
   ========================================================================== */
@media (min-width: 1280px) {

    .mobile-menu-btn,
    .mobile-drawer-close,
    .mobile-drawer-backdrop,
    .mobile-menu-footer,
    .mobile-bottom-bar,
    .mobile-right-fabs,
    .mobile-layers-overlay,
    .mobile-download-curtain-backdrop,
    .mobile-download-curtain,
    .mobile-add-curtain-backdrop,
    .mobile-add-curtain {
        display: none !important;
    }

    /* Нижний fade списков — Figma Menu/Layers (25:13751, 25:13791) */
    .sidebar-left::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 80px;
        height: 100px;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(to bottom, var(--on-background-transparent), var(--on-background));
    }

    .layers-panel-inner::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 48px;
        height: 100px;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient(to bottom, var(--on-background-transparent), var(--on-background));
    }
}

/* ==========================================================================
   Shared tablet/mobile behavior (<1280)
   ========================================================================== */
@media (max-width: 1279px) {

    /* Высота полосы нижних панелей (фактическая ~60–72px): слот ≈ верхний край панели от низа main; +8px = var(--m) — зазор до панели масштаба */
    :root {
        --compact-edit-toolbar-slot-height: 68px;
    }

    body.edit-toolbar-open .canvas-tools-wrap {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .desktop-layout {
        gap: 0;
    }

    /* Шапка — flex-ребёнок: тянем на всю ширину контента (иначе полоса с Harmonize… сжимается по контенту) */
    .main-header-actions {
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        justify-content: flex-start;
    }

    /* Лого и переключатель режима скрыты на планшете/мобиле */
    .main-header-actions-left {
        display: none !important;
    }

    .main-header-brand-strip {
        width: 0;
        min-width: 0;
        justify-content: flex-start;
    }

    .main-header-actions-left .header-logo-mark {
        display: none !important;
    }

    .header-material-toggle {
        display: none !important;
    }

    #headerMaterialVideo {
        display: none !important;
    }

    .mobile-add-item[data-action="video"],
    .mobile-add-curtain-item[data-action="video"] {
        display: none !important;
    }

    /* Нижняя панель Undo/Download/Redo — в макете нет (контролы в шапке и на канвасе) */
    .sidebar-right,
    .canvas-hints,
    .mobile-bottom-bar,
    #mobileFabCopy,
    #mobileFabPaste,
    .mobile-add-popover {
        display: none !important;
    }

    .header-theme-toggle {
        display: none !important;
    }

    .mobile-menu-footer,
    .mobile-theme-tabs {
        display: flex !important;
    }

    .main {
        border-radius: 0;
        background: var(--app-bg);
    }

    .result-container {
        border-radius: 16px;
    }

    .main-header-actions-center {
        display: none !important;
    }

    .main-header-actions-right .btn .btn-icon {
        display: none !important;
    }

    .main-header-actions-right .btn .btn-label {
        display: inline !important;
    }

    .main-header-actions-right {
        display: flex !important;
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .main-header-actions-right>.btn,
    .main-header-actions-right>.download-menu-wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    .main-header-actions-right>.btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .main-header-actions-right .download-menu-wrap .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Шапка <1280: Body/Body Large — 14/14 (Figma Header-Mobile) */
    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        line-height: 14px;
    }

    .sidebar-left {
        position: fixed;
        top: var(--panel-viewport-inset);
        left: var(--panel-viewport-inset);
        bottom: var(--panel-viewport-inset);
        width: var(--panel-column-width);
        max-width: calc(100vw - 2 * var(--panel-viewport-inset));
        height: auto;
        border-radius: var(--app-radius-panel);
        padding: var(--xxl);
        z-index: 420;
        transform: translateX(calc(-100% - var(--panel-slide-offset)));
        transition: transform var(--panel-motion);
        overflow: visible;
        background: var(--app-surface);
    }

    .sidebar-panel-left {
        padding-bottom: 16px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sidebar-panel-left::-webkit-scrollbar {
        display: none;
    }

    .mobile-menu-footer {
        position: absolute;
        left: 16px;
        bottom: 16px;
        z-index: 40;
        align-items: center;
        pointer-events: auto;
    }

    .mobile-theme-tabs {
        position: relative;
        z-index: 1;
        align-items: center;
        pointer-events: auto;
    }

    .sidebar-theme-toggle {
        margin-top: auto;
        padding-top: 16px;
        padding-right: 72px;
    }

    body.mobile-drawer-open .sidebar-left {
        transform: translateX(0);
    }

    .mobile-drawer-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        z-index: 410;
        transition: opacity var(--panel-motion);
    }

    body.mobile-drawer-open .mobile-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer-close {
        display: flex !important;
        position: absolute;
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 9999px;
        /* Светлая тема: видимая плашка как в макете (не белое на белом --button-secondary) */
        background: var(--arrow-button-default);
        color: var(--font-secondary);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 80;
        pointer-events: auto;
    }

    .mobile-drawer-close::before,
    .mobile-drawer-close::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

    .mobile-drawer-close::before {
        transform: rotate(45deg);
    }

    .mobile-drawer-close::after {
        transform: rotate(-45deg);
    }

    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 9999px;
        padding: 0;
        background: var(--button-secondary);
        color: var(--font-secondary);
        align-items: center;
        justify-content: center;
        overflow: visible;
        z-index: 300;
        cursor: pointer;
    }

    /* Счётчики на FAB — как в макете: синий круг на «плече» белой окружности, ~⅔ площади внутри кнопки */
    .mobile-fab-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 999px;
        background: var(--primary);
        color: var(--button-primary-font);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        pointer-events: none;
        z-index: 1;
        transform: translate(-2px, 2px);
    }

    .mobile-fab-badge:empty,
    .mobile-fab-badge[hidden] {
        display: none !important;
    }

    .mobile-right-fabs {
        display: block !important;
        position: static;
        pointer-events: none;
    }

    #mobileFabAdd,
    #mobileFabLayers {
        display: flex !important;
        position: fixed;
        width: 56px;
        height: 56px;
        border-radius: 9999px;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0;
        overflow: visible;
        pointer-events: auto;
        z-index: 300;
        cursor: pointer;
    }

    #mobileFabLayers {
        background: var(--button-secondary);
        color: var(--font-secondary);
    }

    /* Add FAB — Figma Float-Button 25:16894 / 28:60345: bg font-primary (белый в dark), иконка контрастная */
    #mobileFabAdd {
        background: var(--font-primary);
        color: var(--on-background);
    }

    body.theme-dark #mobileFabAdd {
        background: var(--button-secondary-active);
        color: var(--button-secondary-active-font);
    }

    .mobile-menu-btn:focus,
    #mobileFabAdd:focus,
    #mobileFabLayers:focus,
    .mobile-drawer-close:focus {
        outline: none;
    }

    .mobile-menu-btn:focus-visible,
    #mobileFabAdd:focus-visible,
    #mobileFabLayers:focus-visible,
    .mobile-drawer-close:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }

    /* Layers sheet — затемнение отдельно (fade), панель выезжает поверх без движения фона */
    .mobile-layers-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 430;
        pointer-events: none;
        overflow: visible;
        background: transparent;
    }

    .mobile-layers-overlay.open,
    .mobile-layers-overlay[aria-hidden="false"].open {
        pointer-events: auto;
    }

    .mobile-layers-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity var(--panel-motion);
        z-index: 0;
        pointer-events: none;
    }

    .mobile-layers-overlay.open .mobile-layers-backdrop,
    .mobile-layers-overlay[aria-hidden="false"].open .mobile-layers-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-layers-sheet {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        height: 100%;
        padding: var(--panel-viewport-inset);
        transform: translateX(calc(-100% - var(--panel-slide-offset)));
        transition: transform var(--panel-motion);
        pointer-events: none;
    }

    .mobile-layers-overlay.open .mobile-layers-sheet,
    .mobile-layers-overlay[aria-hidden="false"].open .mobile-layers-sheet {
        transform: translateX(0);
        /* Клики мимо карточки проходят к .mobile-layers-backdrop и закрывают панель */
        pointer-events: none;
    }

    .mobile-layers-overlay.open .mobile-layers-panel,
    .mobile-layers-overlay[aria-hidden="false"].open .mobile-layers-panel {
        pointer-events: auto;
    }

    .mobile-layers-panel {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: var(--panel-column-width);
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 2 * var(--panel-viewport-inset));
        margin: 0;
        padding: var(--xxl, 24px);
        box-sizing: border-box;
        background: var(--app-surface);
        border-radius: var(--app-radius-panel, 28px);
        box-shadow: var(--app-shadow-panel-soft, none);
        overflow: visible;
        gap: var(--xl, 16px);
    }

    .mobile-layers-panel-footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0;
        width: auto;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 20;
    }

    .mobile-layers-close,
    .mobile-download-curtain-close,
    .mobile-add-curtain-close {
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 9999px;
        background: var(--arrow-button-default);
        color: var(--font-secondary);
        position: relative;
        cursor: pointer;
        padding: 0;
    }

    .mobile-layers-close::before,
    .mobile-layers-close::after,
    .mobile-download-curtain-close::before,
    .mobile-download-curtain-close::after,
    .mobile-add-curtain-close::before,
    .mobile-add-curtain-close::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 2px;
        margin-left: -9px;
        margin-top: -1px;
        background: currentColor;
        border-radius: 1px;
    }

    .mobile-layers-close::before,
    .mobile-download-curtain-close::before,
    .mobile-add-curtain-close::before {
        transform: rotate(45deg);
    }

    .mobile-layers-close::after,
    .mobile-download-curtain-close::after,
    .mobile-add-curtain-close::after {
        transform: rotate(-45deg);
    }

    /* Float-Button — Figma Add-Menu 10:1108 footer close */
    .mobile-add-curtain-header .mobile-add-curtain-close {
        width: auto;
        min-width: 48px;
        min-height: 48px;
        padding: var(--l);
        background: var(--arrow-button-default);
        color: var(--font-secondary);
    }

    .mobile-layers-inner {
        position: relative;
        z-index: 1;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0 64px;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-layers-inner .layers-list {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mobile-layers-inner .layers-list.layers-list--empty {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mobile-layers-inner .layers-empty-state {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Float-Button закрытия — Figma I25:17415;10:1056: p-12, иконка 24, фон --arrow-button-default */
    .mobile-layers-panel .mobile-layers-close {
        width: 48px;
        height: 48px;
        padding: var(--l, 12px);
        box-sizing: border-box;
        background: var(--arrow-button-default);
        border-radius: 100px;
    }

    .mobile-layers-panel .mobile-layers-close::before,
    .mobile-layers-panel .mobile-layers-close::after {
        width: 16px;
        margin-left: -8px;
    }

    .mobile-layers-inner .layer-row {
        margin: 0;
        width: 100%;
        min-height: 48px;
        border-bottom: none;
        padding: 6px 0;
        justify-content: space-between;
        gap: 0;
    }

    .mobile-layers-inner .layer-row-end {
        gap: var(--xl);
    }

    .mobile-layers-inner .layer-row-arrows {
        gap: var(--s);
    }

    .mobile-layers-inner .layer-preview {
        width: 32px;
        height: 32px;
    }

    .mobile-layers-inner .layer-label {
        font-size: 14px;
        color: var(--font-secondary);
    }

    .mobile-layers-inner .btn-layer-up,
    .mobile-layers-inner .btn-layer-down {
        width: 32px;
        height: 32px;
        padding: var(--m);
        border-radius: 6px;
        background: var(--arrow-button-default);
        color: var(--font-secondary);
    }

    .mobile-download-curtain-backdrop,
    .mobile-add-curtain-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        z-index: 900;
        transition: opacity var(--panel-motion);
    }

    .mobile-download-curtain-backdrop.open,
    .mobile-add-curtain-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-download-curtain,
    .mobile-add-curtain {
        display: flex !important;
        position: fixed;
        inset: var(--panel-viewport-inset);
        z-index: 910;
        flex-direction: column;
        max-height: calc(100vh - 2 * var(--panel-viewport-inset));
        min-height: 0;
        background: var(--app-surface);
        border-radius: var(--app-radius-panel);
        transform: translateX(calc(-100% - var(--panel-slide-offset)));
        transition: transform var(--panel-motion);
        pointer-events: none;
        padding: var(--xxl);
        overflow: visible;
    }

    .mobile-download-curtain.open,
    .mobile-add-curtain.open {
        transform: translateX(0);
        pointer-events: auto;
    }

    .mobile-download-curtain-header,
    .mobile-add-curtain-header {
        order: 2;
        margin-top: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
        padding: 0;
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 20;
    }

    /* Figma Add-Menu 25:13831 — градиент над нижним блоком с кнопкой закрытия */
    .mobile-add-curtain-header::before,
    .mobile-download-curtain-header::before {
        content: none;
    }

    .mobile-download-curtain-body {
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0 64px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-add-curtain-body {
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        padding: 0 0 64px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-layers-inner,
    .mobile-add-shapes-block {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-layers-inner::-webkit-scrollbar,
    .mobile-download-curtain-body::-webkit-scrollbar,
    .mobile-add-curtain-body::-webkit-scrollbar,
    .mobile-add-shapes-block::-webkit-scrollbar {
        display: none;
    }

    .mobile-download-curtain-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--l) var(--xl);
        border: none;
        background: transparent;
        color: var(--font-secondary);
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        text-align: left;
        cursor: pointer;
        border-radius: 0;
        box-sizing: border-box;
    }

    body.theme-dark .mobile-download-curtain-item:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }

    .mobile-download-curtain-item .download-menu-count {
        color: var(--font-tertiary);
        opacity: 1;
        margin-left: 0;
    }

    .mobile-download-curtain-item.is-disabled {
        color: var(--font-tertiary);
        opacity: 0.55;
        cursor: default;
    }

    .mobile-download-video-warning {
        margin: 0;
        padding: 8px var(--xl) 12px;
        color: var(--font-tertiary);
        font-size: 11px;
        line-height: 1.35;
        white-space: normal;
    }

    .mobile-add-curtain-item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 0;
        box-sizing: border-box;
        border: none;
        background: transparent;
        color: var(--font-secondary);
        font-size: 14px;
        line-height: 14px;
        text-align: left;
        cursor: pointer;
    }

    .mobile-add-curtain-item:disabled,
    .mobile-add-curtain-item.is-disabled,
    .mobile-add-item:disabled,
    .mobile-add-item.is-disabled {
        color: var(--font-tertiary);
        opacity: 0.55;
        cursor: default;
    }

    /* Figma Add-Menu 10:1109 — label + 14px «+» справа (кроме строки Shape 10:1125) */
    .mobile-add-curtain-item:not(.mobile-add-shape-trigger) {
        justify-content: space-between;
        gap: var(--m);
    }

    .mobile-add-curtain-item-label {
        flex: 1;
        min-width: 0;
    }

    .mobile-add-curtain-item-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--font-secondary);
    }

    .mobile-add-curtain-item:focus,
    .mobile-add-shape-trigger:focus,
    .mobile-download-curtain-item:focus {
        outline: none;
    }

    .mobile-add-curtain-item:focus-visible,
    .mobile-add-shape-trigger:focus-visible,
    .mobile-download-curtain-item:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    body.theme-dark .mobile-add-curtain-row.open .mobile-add-shape-trigger:focus-visible {
        outline-color: var(--font-primary);
    }

    /* Всплывающее меню у FAB (сейчас скрыто CSS; разметка совпадает с макетом) */
    .mobile-add-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--m);
        width: 100%;
        min-height: 54px;
        padding: 0;
        box-sizing: border-box;
        border: none;
        background: transparent;
        color: var(--font-secondary);
        font-size: 14px;
        line-height: 14px;
        text-align: left;
        cursor: pointer;
    }

    .mobile-add-item-no-plus {
        justify-content: flex-start;
    }

    .mobile-add-item-label {
        flex: 1;
        min-width: 0;
    }

    .mobile-add-item-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--font-secondary);
    }

    .mobile-add-curtain-row {
        border-bottom: none;
    }

    .mobile-add-curtain-row.mobile-add-shape-row {
        padding-bottom: var(--xl);
        min-width: 0;
        max-width: 100%;
    }

    .mobile-add-shape-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 54px;
        position: relative;
        padding-right: 26px;
    }

    .mobile-add-shape-trigger::before,
    .mobile-add-shape-trigger::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 50%;
        width: 12px;
        height: 1.5px;
        border-radius: 1px;
        background: var(--font-tertiary);
        transform: translateY(-50%);
    }

    .mobile-add-shape-trigger::after {
        transition: opacity 0.2s ease;
        transform: translateY(-50%) rotate(90deg);
    }

    .mobile-add-curtain-row.open .mobile-add-shape-trigger::after {
        opacity: 0;
    }

    .mobile-add-shapes-block {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.25s ease;
    }

    .mobile-add-curtain-row.open .mobile-add-shapes-block {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Add-Menu 17:6842 — 3×N grid; minmax(0,1fr) чтобы колонки не раздувались по min-content и не обрезались в узкой панели */
    .mobile-add-shapes-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--m);
        padding: var(--m) 0 var(--xl);
    }

    .mobile-add-shapes-grid .shape-menu-item {
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: var(--app-radius-canvas);
        background: var(--on-surface);
        color: var(--font-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-add-shapes-grid .shape-menu-item:hover {
        background: var(--button-secondary-hover);
    }

    .mobile-add-shapes-grid .shape-menu-item svg {
        width: 40px;
        height: 40px;
        max-width: 50%;
        max-height: 50%;
        display: block;
    }

    /* Add-Menu моб/планшет (25:17842 / 29:61653): сетка 3×N без обрезки, без стрелки у Shape */
    .mobile-add-curtain-row.open .mobile-add-shapes-block,
    .mobile-add-curtain-row.mobile-add-shape-row .mobile-add-shapes-block {
        max-height: none;
        overflow: visible;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-add-shapes-grid {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-add-shape-trigger::before,
    .mobile-add-shape-trigger::after {
        display: none;
    }

    .mobile-add-shape-trigger {
        padding-right: 0;
        cursor: default;
    }

    .text-float-toolbar,
    .shape-float-toolbar,
    .svg-image-float-toolbar,
    .multi-select-float-toolbar {
        z-index: 300;
        left: 0 !important;
        right: 0;
        top: auto !important;
        width: 100vw;
        max-width: 100vw;
        transform: none !important;
        pointer-events: auto;
    }

    .text-float-toolbar {
        bottom: 0;
    }

    .shape-float-toolbar {
        bottom: 0;
    }

    .svg-image-float-toolbar {
        bottom: 0;
    }

    .multi-select-float-toolbar {
        bottom: 0;
    }

    .text-float-toolbar.visible,
    .shape-float-toolbar.visible,
    .svg-image-float-toolbar.visible,
    .multi-select-float-toolbar.visible {
        display: block !important;
    }

    .text-float-toolbar-inner,
    .shape-toolbar-inner,
    .svg-image-toolbar-inner,
    .multi-select-toolbar-inner {
        width: 100%;
        border-radius: 0;
        justify-content: flex-start;
        gap: var(--xs);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .text-float-toolbar-inner::-webkit-scrollbar,
    .shape-toolbar-inner::-webkit-scrollbar,
    .svg-image-toolbar-inner::-webkit-scrollbar,
    .multi-select-toolbar-inner::-webkit-scrollbar {
        display: none;
    }

    .text-float-toolbar-inner,
    .shape-toolbar-inner,
    .svg-image-toolbar-inner,
    .multi-select-toolbar-inner {
        padding: var(--l) var(--xxl) calc(var(--xxl) + env(safe-area-inset-bottom, 0px));
        min-height: 60px;
        -webkit-overflow-scrolling: touch;
    }

    /* Дропдаун шрифтов: на компактной вёрстке позиция задаётся в JS (position: fixed), иначе обрезался overflow панели */

    .text-font-trigger[aria-expanded="true"] .text-font-trigger-chevron {
        transform: rotate(180deg);
    }

    /* Плашки редактирования — position:fixed, не режутся. Холст режем по .main/.canvas-viewport — не уезжает под шапку */
    .desktop-layout,
    .app-center {
        overflow: visible;
    }

    .canvas-viewport {
        overflow: visible;
    }

    .canvas-stage {
        max-width: none;
        max-height: none;
    }

    .text-float-toolbar-inner>*,
    .shape-toolbar-inner>*,
    .svg-image-toolbar-inner>*,
    .multi-select-toolbar-inner>* {
        flex-shrink: 0;
    }

    .canvas-right-overlay {
        z-index: 280;
    }

    .canvas-right-btn {
        width: 40px;
        height: 40px;
        padding: 12px;
    }

    /* Нижний стек (масштаб + таймлайн): тот же отступ над слотом плавающих панелей; таймлайн на всю ширину main */
    .canvas-bottom-stack {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        transform: none;
        z-index: 280;
    }

    .canvas-tool-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        box-sizing: border-box;
    }

    .canvas-zoom-value {
        padding: 0 var(--l);
        min-height: 40px;
    }

    .canvas-tool-zoom-group {
        gap: var(--xs);
    }

    /* Custom size — тот же тайминг/кривая, что у панели размеров; снизу как sheet */
    .custom-size-modal {
        align-items: flex-end;
        justify-content: center;
        padding: var(--panel-viewport-inset);
    }

    .custom-size-modal-inner {
        width: 100%;
        max-width: min(var(--modal-width), calc(100vw - 2 * var(--panel-viewport-inset)));
        border-radius: var(--app-radius-panel);
        padding: var(--modal-padding);
        gap: var(--modal-padding);
        transition: transform var(--panel-motion);
        transform: translateY(calc(100% + var(--panel-slide-offset)));
    }

    .custom-size-modal.open .custom-size-modal-inner {
        transform: translateY(0);
    }

    .custom-size-modal-backdrop,
    .shape-modal-backdrop,
    .video-upload-modal-backdrop,
    .video-export-modal-backdrop {
        z-index: 410;
    }

    .custom-size-modal,
    .shape-modal,
    .video-upload-modal,
    .video-export-modal {
        z-index: 420;
    }
}

/* ==========================================================================
   RESPONSIVE: 744–1279px — tablet (Figma 744)
   ========================================================================== */
@media (min-width: 744px) and (max-width: 1279px) {
    body {
        overflow: hidden;
    }

    .desktop-layout {
        padding: 88px 24px 24px;
    }

    .main-header {
        padding: 16px;
        z-index: 150;
    }

    /* Figma Header-Tablet — лого слева, меню добавления (табы) скрыто; действия справа */
    .main-header-actions-left {
        display: flex !important;
        flex: 0 0 auto;
        min-width: 0;
    }

    /* .main-header-actions-center — скрыт общим правилом max-width:1279 (меню добавления только FAB/шторки) */

    .main-header-actions {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        gap: var(--m);
        justify-content: flex-start;
        align-items: center;
    }

    .main-header-actions-right {
        display: flex !important;
        flex: 1 1 0%;
        min-width: 0;
        width: auto;
        max-width: none;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .main-header-actions-right>.btn,
    .main-header-actions-right>.download-menu-wrap {
        flex: 0 0 auto;
        min-width: 0;
    }

    .main-header-actions-right>.btn {
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    .main-header-actions-right .download-menu-wrap .btn {
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        min-height: 38px;
        padding: var(--l);
        font-size: 14px;
        line-height: 14px;
        white-space: nowrap;
    }

    .main-header-actions-right .download-menu-wrap {
        display: block;
    }

    .canvas-right-overlay {
        right: 16px;
    }

    .mobile-menu-btn {
        top: 120px;
        left: 16px;
    }

    #mobileFabLayers {
        top: 192px;
        left: 16px;
    }

    #mobileFabAdd {
        top: 120px;
        right: 16px;
    }

    /* Планшет: Add/Download — чуть шире 340px при необходимости, чтобы сетка шейпов не упиралась в край */
    .mobile-download-curtain,
    .mobile-add-curtain {
        inset: auto;
        left: var(--panel-viewport-inset);
        top: var(--panel-viewport-inset);
        bottom: var(--panel-viewport-inset);
        right: auto;
        width: min(360px, calc(100vw - 2 * var(--panel-viewport-inset)));
        max-width: calc(100vw - 2 * var(--panel-viewport-inset));
        max-height: none;
    }

    .text-float-toolbar-inner,
    .shape-toolbar-inner,
    .svg-image-toolbar-inner,
    .multi-select-toolbar-inner {
        justify-content: flex-start;
        gap: var(--m);
        overflow-x: auto;
        padding-top: var(--l);
        padding-bottom: var(--xxl);
    }
}

/* ==========================================================================
   RESPONSIVE: ≤743px — mobile (Figma 375)
   ========================================================================== */
@media (max-width: 743px) {
    body {
        overflow: hidden;
    }

    /* Узкий экран: только переключатель — без фиксированной ширины колонки, чтобы кнопки шапки помещались */
    .main-header-brand-strip {
        width: auto;
        max-width: none;
        justify-content: flex-end;
    }

    #app-tooltip {
        display: none !important;
    }

    /* Отступы вокруг канваса; сверху чуть больше высоты шапки (16+16+36), чтобы не наезжало на холст */
    .desktop-layout {
        padding: 76px 24px 24px;
        gap: 0;
    }

    .app-center {
        gap: 0;
    }

    .main-header {
        padding: 16px;
        z-index: 150;
    }

    .main-header-actions-right {
        display: flex !important;
        flex: 1 1 0%;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .main-header-actions-right>.btn,
    .main-header-actions-right>.download-menu-wrap {
        flex: 1 1 0;
        min-width: 0;
    }

    .main-header-actions-right>.btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .main-header-actions-right .download-menu-wrap .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        min-height: 36px;
        padding: var(--l);
        font-size: 14px;
        line-height: 14px;
        white-space: nowrap;
    }

    /* Мобайл: дроуер на всю ширину внутри тех же полей, что у шторок */
    .sidebar-left {
        inset: var(--panel-viewport-inset);
        width: auto;
        max-width: none;
    }

    /* Панель слоёв на всю ширину между полями экрана */
    .mobile-layers-panel {
        max-width: none;
    }

    .mobile-menu-btn {
        top: 92px;
        left: 16px;
    }

    #mobileFabLayers {
        top: 164px;
        left: 16px;
    }

    #mobileFabAdd {
        top: 92px;
        right: 16px;
    }

    .canvas-right-overlay {
        right: 16px;
    }

    .text-float-toolbar-inner,
    .shape-toolbar-inner,
    .svg-image-toolbar-inner,
    .multi-select-toolbar-inner {
        justify-content: flex-start;
        gap: var(--xs);
        overflow-x: auto;
        padding-top: var(--m);
        padding-bottom: var(--xl);
    }
}

@media (max-width: 1279px) {
    .app-center {
        position: relative;
    }

    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 16px;
        z-index: 245;
        pointer-events: none;
    }

    .main-header-actions {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        pointer-events: none;
    }

    .main-header-actions-right {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 8px;
        justify-content: stretch;
        align-items: center;
        justify-self: stretch;
        margin-left: 0;
        pointer-events: auto;
    }

    .main-header-actions-right>.btn,
    .main-header-actions-right>.download-menu-wrap {
        min-width: 0;
        width: 100%;
    }

    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: clip;
        white-space: nowrap;
        border-radius: 9999px;
    }

    .main-header-actions-right .download-menu-wrap {
        display: block;
    }

    .main-header:has(#downloadMenuPopover.open) {
        z-index: 920;
    }

    .main-header-actions-right #downloadMenuPopover {
        z-index: 930;
    }

    .btn-primary:hover:not(:disabled) {
        background: var(--app-accent);
        color: var(--app-accent-text);
    }

    .btn-secondary:hover:not(:disabled) {
        background: var(--button-secondary);
        color: var(--button-secondary-font);
    }

    .btn-harmonize.btn-secondary:hover:not(:disabled) {
        opacity: 1;
    }

    .download-menu-item:hover,
    body.theme-dark .download-menu-item:hover,
    .mobile-download-curtain-item:hover,
    .mobile-add-curtain-item:hover {
        background: transparent;
    }

    .mobile-menu-btn:hover,
    #mobileFabLayers:hover {
        background: var(--button-secondary);
        color: var(--font-secondary);
    }

    .canvas-tool-btn:hover,
    .canvas-tool-btn.canvas-tool-btn--zoom:hover {
        background: transparent;
        color: inherit;
    }

    .canvas-tool-btn.active:hover {
        background: var(--arrow-button-default);
        color: #ffffff;
    }

    body:not(.theme-dark) .canvas-tool-btn.active:hover {
        color: var(--font-primary);
    }

    .canvas-right-btn:hover:not(:disabled) {
        background: var(--canvas-chrome-bg);
        color: var(--canvas-chrome-fg);
    }

    body:not(.theme-dark) .canvas-tool-btn:hover,
    body:not(.theme-dark) .canvas-tool-btn.canvas-tool-btn--zoom:hover {
        background: transparent;
        color: inherit;
    }

    body:not(.theme-dark) .canvas-tool-btn.active:hover {
        background: var(--arrow-button-default);
        color: var(--font-primary);
    }

    body:not(.theme-dark) .canvas-right-btn:hover:not(:disabled) {
        background: var(--canvas-chrome-bg);
        color: var(--canvas-chrome-fg);
    }

    .canvas-right-btn--safezones.active:hover:not(:disabled),
    .canvas-right-btn--safezones.on:hover:not(:disabled),
    .canvas-right-btn--safezones[aria-checked="true"]:hover:not(:disabled) {
        background: var(--primary) !important;
        color: var(--button-primary-font) !important;
    }

    #mobileFabAdd:hover {
        background: var(--font-primary);
        color: var(--on-background);
    }

    body.theme-dark #mobileFabAdd:hover {
        background: var(--button-secondary-active);
        color: var(--button-secondary-active-font);
    }

    .accordion-header:hover,
    .accordion-subitem:hover,
    .custom-size-item.accordion-subitem:hover,
    .layer-row:hover:not(.selected),
    .layer-row.layer-row-placeholder:hover {
        background: transparent;
    }

    .accordion-header:hover,
    .accordion-subitem:hover,
    .custom-size-item.accordion-subitem:hover,
    .layer-row:hover:not(.selected) .layer-label {
        color: inherit;
    }

    .layer-row:hover:not(.selected) .layer-preview {
        background: var(--surface);
    }

    .canvas-bottom-stack {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        align-items: center;
        z-index: 280;
    }

    .canvas-tools-wrap {
        align-self: center;
    }

    .canvas-tools {
        display: inline-flex;
        width: auto;
        max-width: calc(100vw - 96px);
        height: 44px;
        padding: 4px;
        gap: 4px;
        border-radius: 9999px;
    }

    .canvas-tool-btn {
        width: 36px;
        height: 36px;
        padding: 0;
    }

    .canvas-tool-btn svg {
        width: 16px;
        height: 16px;
    }

    .canvas-tool-zoom-group {
        gap: 4px;
    }

    .canvas-zoom-value {
        width: 52px;
        min-width: 52px;
        min-height: 36px;
        padding: 0 8px;
    }
}

@media (min-width: 744px) and (max-width: 1279px) {
    .main-header {
        padding: 16px;
    }
}

@media (max-width: 390px) {

    .main-header-actions-right .btn,
    .main-header-actions-right .download-menu-wrap .btn {
        font-size: 13px;
        line-height: 13px;
    }
}