/* =============================================
           EDITOR LAYOUT — CSS puro, zero Tailwind no layout estrutural
           Os elementos estruturais (nav, body-layout, main, canvas-stage,
           bottom-bar) não têm classes Tailwind de layout — só CSS aqui.
           ============================================= */

        /* ----- Componentes UI (desktop e mobile) ----- */
        .drawer-grip {
            display: none;
            width: 40px;
            height: 4px;
            background: #cbd5e1;
            border-radius: 9999px;
            margin: 10px auto 8px;
            flex-shrink: 0;
            cursor: grab;
        }

        .editor-mobile-tabs {
            display: none;
        }

        .editor-mobile-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 6px 4px;
            font-size: 0.6rem;
            font-weight: 700;
            color: #94a3b8;
            border: none;
            border-top: 2px solid transparent;
            background: transparent;
            cursor: pointer;
            transition: color 0.15s, border-color 0.15s;
            min-height: 50px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .editor-mobile-tab.active {
            color: #2563eb;
            border-top-color: #2563eb;
        }

        .editor-mobile-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            z-index: var(--z-mobile-backdrop);
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
            pointer-events: none;
        }

        .editor-mobile-backdrop.active {
            display: block;
            pointer-events: auto;
        }

        /* ----- BASE LAYOUT (desktop e mobile partilham estas regras; mobile sobrepõe via @media) ----- */
        #editor-nav {
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0 1rem;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        /* Logo: altura fixa do nav para imunidade a reflow dos ícones */
        #editor-nav>a:first-child {
            display: flex;
            align-items: center;
            height: 100%;
            flex-shrink: 0;
        }

        #editor-info-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0 1rem;
            height: 2.25rem;
            flex-shrink: 0;
            box-sizing: border-box;
            border-bottom: 1px solid var(--panel-border);
            background: #f8fafc;
            overflow: hidden;
        }

        .editor-info-name {
            font-size: 0.82rem;
            font-weight: 600;
            color: #1e293b;
            min-width: 0;
        }

        .editor-info-price {
            font-size: 0.9rem;
            font-weight: 700;
            color: #2563eb;
            flex-shrink: 0;
        }

        .editor-body-layout {
            display: grid;
            grid-template-columns: clamp(14rem, 15vw, 16rem) minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr);
            gap: 0;
            height: calc(100vh - 4rem - 2.25rem);
            padding: 0;
            overflow: hidden;
            align-items: stretch;
        }

        .editor-sidebar-left {
            grid-column: 1;
            grid-row: 2;
            padding: 0;
            min-width: 0;
            width: 100%;
            min-height: 0;
        }

        .editor-sidebar-right {
            grid-column: 1 / -1;
            grid-row: 1;
            padding: 0;
            min-width: 0;
            width: 100%;
            min-height: 0;
            z-index: var(--z-desktop-toolbar);
        }

        .editor-sidebar-right .sidebar-shell {
            border: 0;
            border-bottom: 1px solid var(--panel-border);
            border-radius: 0;
            background: #ffffff;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            height: auto;
            min-height: 0;
        }

        .editor-sidebar-right .drawer-grip {
            display: none;
        }

        #properties-panel {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.55rem;
            padding: 0.55rem 0.85rem 0.6rem;
        }

        #properties-panel .section-title {
            display: none;
        }

        #properties-panel .properties-toolbar-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            min-width: 0;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
        }

        #properties-panel .properties-toolbar-row > * {
            min-width: 0;
        }

        #properties-panel #no-selection,
        #properties-panel #text-properties,
        #properties-panel #image-properties,
        #properties-panel #shape-properties {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0.75rem;
            right: 0.75rem;
            z-index: var(--z-properties-popover);
        }

        #properties-panel #no-selection {
            background: #ffffff;
            border: 1px solid var(--panel-border);
            border-radius: 0;
            box-shadow: none;
        }

        #properties-panel #text-properties,
        #properties-panel #image-properties,
        #properties-panel #shape-properties {
            background: #ffffff;
            border: 1px solid var(--panel-border);
            box-shadow: none;
            max-height: 42vh;
            overflow: auto;
        }

        .editor-main {
            grid-column: 2;
            grid-row: 2;
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 0;
            min-height: 0;
            min-width: 0;
            overflow: hidden;
            position: relative;
            z-index: var(--z-main);
        }

        #canvas-stage {
            flex: 1 1 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            width: 100%;
            height: 100%;
            min-height: 100%;
            overflow: hidden;
            position: relative;
            z-index: var(--z-canvas-stage);
            border: none;
            box-shadow: none;
        }

        #canvas-wrapper {
            flex: 0 0 auto;
            width: 100%;
            height: 100%;
            min-width: 0;
            min-height: 0;
            background:
                linear-gradient(45deg, #eceff3 25%, transparent 25%),
                linear-gradient(-45deg, #eceff3 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #eceff3 75%),
                linear-gradient(-45deg, transparent 75%, #eceff3 75%);
            background-size: var(--checker-size, 20px) var(--checker-size, 20px);
            background-position:
                0 0,
                0 calc(var(--checker-size, 20px) / 2),
                calc(var(--checker-size, 20px) / 2) calc(var(--checker-size, 20px) / -2),
                calc(var(--checker-size, 20px) / -2) 0;
        }

        .editor-bottom-bar {
            display: none !important;
            visibility: hidden;
            pointer-events: none;
        }

        .editor-context-toolbar {
            display: none !important;
        }

        .editor-bottom-bar > .context-popover {
            position: absolute;
            left: -0.75rem;
            right: -0.75rem;
            bottom: calc(100% - 1px);
            opacity: 0;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            padding: 0.85rem 0.9rem 0.9rem;
            border: 1px solid var(--panel-border);
            border-bottom: 0;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.99);
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            transition: opacity 180ms ease, transform 180ms ease;
            transform: translateY(0.85rem) scale(0.98);
            transform-origin: bottom center;
            z-index: var(--z-mobile-popover);
        }

        .editor-bottom-bar > .context-popover.is-open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0) scale(1);
        }

        .editor-bottom-bar > .context-popover.hidden {
            display: none !important;
        }

        .editor-bottom-bar > .context-popover::after {
            content: none;
        }

        .quick-font-select {
            width: 100%;
            min-height: 2.65rem;
            border-radius: 14px;
            border: 1px solid #dbe4f0;
            background: #ffffff;
            color: #0f172a;
            font-size: 0.88rem;
            font-weight: 700;
            padding: 0.5rem 0.8rem;
            outline: none;
            box-shadow: none;
        }

        .quick-font-select.is-disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .quick-font-select:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        }

        .quick-font-textarea {
            width: 100%;
            min-height: 3.25rem;
            max-height: 9rem;
            resize: vertical;
            border-radius: 14px;
            border: 1px solid #dbe4f0;
            background: #ffffff;
            color: #0f172a;
            font-size: 0.92rem;
            font-weight: 600;
            line-height: 1.35;
            padding: 0.6rem 0.8rem;
            outline: none;
            box-shadow: none;
        }

        .quick-font-textarea:focus {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
        }

        .quick-font-actions {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.35rem;
            width: 100%;
        }

        .quick-font-label {
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #64748b;
        }

        .quick-font-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-width: 0;
            height: 2.35rem;
            border-radius: 14px;
            border: 1px solid #dbe4f0;
            background: #ffffff;
            color: #334155;
            box-shadow: none;
            transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
        }

        .quick-font-action:hover {
            background: #f8fbff;
            border-color: #c7d8f6;
            color: #1d4ed8;
        }

        .quick-font-action.active {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }

        .quick-font-letter {
            font-size: 0.95rem;
            line-height: 1;
            font-weight: 900;
        }

        .tool-tile {
            justify-content: center;
            gap: 0;
            padding: 0.75rem 0.7rem;
            min-height: 3.4rem;
        }

        .tool-tile__label {
            display: none;
        }

        .tool-tile__icon {
            width: 2.4rem;
            height: 2.4rem;
        }

        .elements-grid--compact {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .shape-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }