/* ================================================================
   MC Creator — style.css
   Editor de catálogos · MC Flores
   ================================================================
   Índice:
   01. Variáveis CSS
   02. Reset & Base
   03. Navegação CSS-only (radio hack)
   04. Aviso de tela pequena
   05. Botões
   06. Campos de formulário
   07. Tela 1 — Login
   08. Tela 2 — Dashboard
   09. Tela 3 — Editor: cabeçalho
   10. Tela 3 — Editor: layout
   11. Tela 3 — Editor: painel esquerdo
   12. Tela 3 — Editor: coluna central (canvas A4)
   13. Tela 3 — Editor: painel direito (abas)
   14. Componentes: swatches de cor
   15. Componentes: imagem do produto
   16. Componentes: upload de logo
   17. Componentes: campo de cor
   18. Modal
   19. Barra de rolagem personalizada
   20. Utilitários
================================================================ */


/* ── 01. Variáveis CSS ───────────────────────────────────────── */
:root {
    /* Marca MC Flores */
    --yellow:         #ffdc02;
    --yellow-hover:   #e6c200;
    --yellow-light:   rgba(255, 220, 2, 0.12);
    --yellow-xlight:  rgba(255, 220, 2, 0.06);

    /* Paleta Creator (roxo) */
    --purple:         #6B3FA0;
    --purple-hover:   #7B4FB0;
    --purple-light:   rgba(107, 63, 160, 0.10);

    /* Escala de cinza */
    --gray-50:  #f8f9fa;
    --gray-100: #f4f4f9;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #333333;
    --gray-900: #1a1a1a;

    /* Semânticas */
    --success:        #2ecc71;
    --success-light:  rgba(46, 204, 113, 0.12);
    --error:          #e74c3c;
    --error-light:    rgba(231, 76, 60, 0.10);

    /* Superfícies */
    --surface-app:    #f4f4f9;
    --surface-white:  #ffffff;

    /* Bordas */
    --border:         #e9ecef;
    --border-md:      #dee2e6;

    /* Sombras */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.13);
    --shadow-a4: 0 4px 40px rgba(0, 0, 0, 0.14);

    /* Raios */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-full: 9999px;

    /* Tipografia — Cal Sans UI (interfaces) com fallback Poppins */
    --font: 'Cal Sans', 'Poppins', system-ui, -apple-system, sans-serif;

    /* Dimensões do editor */
    --header-h:      68px;
    --panel-left-w:  320px;
    --panel-right-w: 380px;
    --editor-pad:    14px;
    --editor-gap:    12px;
}


/* ── 02. Reset & Base ────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background-color: var(--surface-app);
    color: var(--gray-800);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    height: 100vh;
}

ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

button { font-family: var(--font); cursor: pointer; }

a { color: inherit; text-decoration: none; }

input,
textarea,
select { font-family: var(--font); }

fieldset { border: none; }


/* ── 03. Navegação CSS-only (radio buttons ocultos) ─────────── */
.creator-nav-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.creator-screen {
    display: none;
    width: 100%;
    height: 100vh;
}

/* Oculta telas durante bootstrap para evitar flash entre login/dashboard/editor */
body.creator-is-booting .creator-screen {
    display: none !important;
}

#screen-nav-login:checked     ~ .creator-screen--login     { display: flex; }
#screen-nav-dashboard:checked ~ .creator-screen--dashboard { display: flex; }
#screen-nav-editor:checked    ~ .creator-screen--editor    { display: flex; }
#screen-nav-ia:checked        ~ .creator-screen--ia-editor { display: flex; }
#screen-nav-canva:checked     ~ .creator-screen--canva     { display: flex; }


/* ── 04. Aviso de tela pequena ──────────────────────────────── */
.mobile-block {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--surface-app);
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.mobile-block__card {
    background: var(--surface-white);
    border-radius: var(--r-xl);
    padding: 48px 40px;
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mobile-block__link {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: left;
}

.mobile-block__link-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
}

.mobile-block__link-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.mobile-block__link-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--gray-800);
    background: var(--gray-50);
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    outline: none;
}

.mobile-block__link-input:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 220, 2, 0.28);
}

.mobile-block__copy--ok {
    background: #16a34a;
    color: #fff;
    box-shadow: none;
}

#mobile-block-copy {
    flex-shrink: 0;
}

@media (max-width: 420px) {
    .mobile-block__card {
        padding: 32px 20px;
    }

    .mobile-block__link-row {
        flex-direction: column;
    }
}

.mobile-block__monitor-icon {
    width: 72px;
    height: 72px;
    background: var(--yellow-light);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yellow-hover);
}

.mobile-block__monitor-icon i {
    width: 36px;
    height: 36px;
}

.mobile-block__logo { margin: 4px auto; }

.mobile-block__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.mobile-block__desc {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.65;
}

@media (max-width: 1099px) {
    .mobile-block { display: flex; }
}


/* ── 05. Botões ─────────────────────────────────────────────── */
.creator-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s,
                box-shadow 0.18s, transform 0.15s;
    white-space: nowrap;
    user-select: none;
}

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

.creator-btn i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Tamanhos */
.creator-btn--sm {
    padding: 7px 13px;
    font-size: 0.8125rem;
}

.creator-btn--sm i {
    width: 14px;
    height: 14px;
}

.creator-btn--lg {
    padding: 13px 28px;
    font-size: 1rem;
    border-radius: var(--r-md);
}

.creator-btn--lg i {
    width: 18px;
    height: 18px;
}

.creator-btn--full { width: 100%; }

/* Variantes */
.creator-btn--primary {
    background: var(--yellow);
    color: var(--gray-900);
    box-shadow: 0 2px 8px rgba(255, 220, 2, 0.28);
}
.creator-btn--primary:hover {
    background: var(--yellow-hover);
    box-shadow: 0 4px 14px rgba(255, 220, 2, 0.38);
    transform: translateY(-1px);
}

.creator-btn--outline {
    background: transparent;
    color: var(--gray-700);
    border: 1.5px solid var(--border-md);
}
.creator-btn--outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.creator-btn--ghost {
    background: transparent;
    color: var(--gray-600);
    border: 1.5px solid transparent;
}
.creator-btn--ghost:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.creator-btn--danger {
    background: var(--error);
    color: #fff;
}
.creator-btn--danger:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

.creator-btn--danger-soft {
    background: var(--error-light);
    color: var(--error);
    border: 1.5px solid transparent;
}
.creator-btn--danger-soft:hover {
    background: rgba(231, 76, 60, 0.16);
}

.creator-btn--premium {
    background: #1C1A1C;
    color: #AAAAAA;
    border-radius: 3em;
    transition: all 450ms ease-in-out;
    border: none;
    box-shadow: none;
}
.creator-btn--premium i,
.creator-btn--premium svg {
    color: #AAAAAA;
    fill: #AAAAAA;
    transition: all 800ms ease;
}
.creator-btn--premium:hover {
    background: linear-gradient(0deg, #A47CF3, #683FEA);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 4px rgba(255, 255, 255, 0.2),
    0px 0px 180px 0px #9917FF;
    transform: translateY(-2px);
    color: white;
}
.creator-btn--premium:hover i,
.creator-btn--premium:hover svg {
    color: white;
    fill: white;
    transform: scale(1.2);
}


/* ── 06. Campos de formulário ───────────────────────────────── */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field + .form-field {
    margin-top: 16px;
}

.form-field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-field__label--icon i {
    width: 13px;
    height: 13px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.form-field__badge {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-200);
    border-radius: var(--r-full);
    padding: 2px 8px;
    margin-left: 2px;
}

.form-field__input,
.form-field__textarea {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-900);
    background: var(--surface-white);
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    appearance: none;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
    color: var(--gray-400);
}

.form-field__input:hover,
.form-field__textarea:hover {
    border-color: var(--gray-400);
}

.form-field__input:focus,
.form-field__textarea:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 220, 2, 0.18);
}

.form-field__textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.form-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.form-field__icon {
    position: absolute;
    left: 11px;
    color: var(--gray-400);
    width: 15px;
    height: 15px;
    pointer-events: none;
    flex-shrink: 0;
}

.form-field__input--icon-left {
    padding-left: 35px;
}


/* ── 07. Tela 1 — Login ─────────────────────────────────────── */
.creator-screen--login {
    align-items: center;
    justify-content: center;
    background: var(--surface-app);
    position: relative;
    overflow: hidden;
}

/* Decorações de fundo */
.login-bg-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.login-bg-deco__blob {
    position: absolute;
    border-radius: 50%;
}

.login-bg-deco__blob--1 {
    width: 520px;
    height: 520px;
    top: -220px;
    right: -100px;
    background: radial-gradient(circle, rgba(255, 220, 2, 0.11) 0%, transparent 70%);
}

.login-bg-deco__blob--2 {
    width: 380px;
    height: 380px;
    bottom: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(107, 63, 160, 0.08) 0%, transparent 70%);
}

.login-bg-deco__blob--3 {
    width: 220px;
    height: 220px;
    top: 40%;
    left: 18%;
    background: radial-gradient(circle, rgba(255, 220, 2, 0.06) 0%, transparent 70%);
}

/* Card principal do login */
.login-card {
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    padding: 40px 48px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.login-card__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.login-card__logo {
    object-fit: contain;
}

.login-card__tagline {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-card__tagline::before,
.login-card__tagline::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--border);
}

/* Ilustração */
.login-card__illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -4px 0;
}

/* Formulário de login */
.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form__submit-btn {
    margin-top: 4px;
}

/* Hint de segurança */
.login-card__security-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: -4px;
}

.login-card__security-hint i {
    width: 13px;
    height: 13px;
    color: var(--success);
    flex-shrink: 0;
}


/* ── 08. Tela 2 — Dashboard ─────────────────────────────────── */
.creator-screen--dashboard {
    flex-direction: column;
    background: var(--surface-app);
    overflow: hidden;
}

/* Cabeçalho do dashboard */
.dashboard-header {
    background: var(--surface-white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    padding: 0 32px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.dashboard-header__brand {
    display: flex;
    align-items: center;
}

.dashboard-header__logo {
    object-fit: contain;
}

.dashboard-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Área de conteúdo principal */
.dashboard-main {
    flex: 1;
    overflow-y: auto;
    padding: 40px 32px;
}

.dashboard-container {
    max-width: 1280px;
    margin: 0 auto;
}

.dashboard-page-header {
    margin-bottom: 32px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.dashboard-page-header__title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.03em;
}

.dashboard-page-header__count {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
}

/* Grade de catálogos */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card de catálogo */
.catalog-card {
    background: var(--surface-white);
    border-radius: var(--r-lg);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    position: relative;
}

.catalog-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--yellow);
    transform: translateY(-2px);
}

.catalog-card:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.catalog-card__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.catalog-card__actions.is-visible {
    display: flex;
}

.catalog-card__dup-btn,
.catalog-card__delete-btn {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, color 0.15s;
}

.catalog-card__dup-btn:hover {
    background: #f3eef9;
    color: #6B3FA0;
}

.catalog-card__dup-btn i,
.catalog-card__dup-btn svg {
    width: 14px;
    height: 14px;
}

.catalog-card__delete-btn {
    color: #e74c3c;
    font-size: 16px;
    line-height: 1;
}

.catalog-card__delete-btn:hover {
    background: #fdecea;
}

.catalog-card__thumb {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-card__thumb i {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.45);
}

.catalog-card__thumb--purple { background: linear-gradient(135deg, #6B3FA0, #9B6FD0); }
.catalog-card__thumb--rose   { background: linear-gradient(135deg, #D95F8C, #F090B8); }
.catalog-card__thumb--amber  { background: linear-gradient(135deg, #D98320, #F5B035); }
.catalog-card__thumb--teal   { background: linear-gradient(135deg, #1A8C7A, #3DB09E); }

.catalog-card__thumb--cover {
    background: var(--gray-100);
    overflow: hidden;
}

.catalog-card__thumb--empty {
    background: linear-gradient(135deg, var(--gray-200), var(--gray-100));
}

.catalog-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catalog-card__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.catalog-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
}

.catalog-card__meta {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.catalog-card__tipo {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

.catalog-card__tipo--catalogo {
    background: rgba(107, 63, 160, 0.1);
    color: #6B3FA0;
}

.catalog-card__tipo--arte {
    background: rgba(217, 95, 140, 0.12);
    color: #C44B7A;
}

.catalog-card__thumb--arte {
    background: linear-gradient(135deg, #D95F8C, #9B6FD0);
}

.catalog-card__thumb--arte i {
    color: rgba(255, 255, 255, 0.92);
}

/* Card: Novo catálogo */
.catalog-card--new {
    border-style: dashed;
    border-color: var(--gray-300);
    background: transparent;
    box-shadow: none;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.catalog-card--new:hover {
    background: var(--yellow-xlight);
    border-color: var(--yellow);
    border-style: solid;
    box-shadow: none;
}

.catalog-card__new-icon {
    width: 48px;
    height: 48px;
    background: var(--gray-200);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: background 0.2s, color 0.2s;
}

.catalog-card--new:hover .catalog-card__new-icon {
    background: var(--yellow-light);
    color: var(--yellow-hover);
}

.catalog-card__new-icon i {
    width: 22px;
    height: 22px;
}

.catalog-card__new-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    transition: color 0.2s;
}

.catalog-card--new:hover .catalog-card__new-label {
    color: var(--gray-800);
}


/* ── 09. Tela 3 — Editor: cabeçalho ────────────────────────── */
.creator-screen--editor {
    flex-direction: column;
    background: var(--surface-app);
    overflow: hidden;
    position: relative;
}

.editor-header {
    height: var(--header-h);
    background: var(--surface-white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    flex-shrink: 0;
    z-index: 100;
}

.editor-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.editor-header__logo {
    object-fit: contain;
    flex-shrink: 0;
}

.editor-header__sep {
    width: 1px;
    height: 26px;
    background: var(--border-md);
    flex-shrink: 0;
}

.editor-header__catalog-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.editor-header__catalog-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editor-header__rename-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--r-xs);
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.editor-header__rename-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.editor-header__rename-btn i {
    width: 13px;
    height: 13px;
}

/* Centro do cabeçalho: indicador de salvo */
.editor-header__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.editor-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--success);
    background: var(--success-light);
    border-radius: var(--r-full);
    padding: 5px 13px;
}

.editor-autosave__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.editor-autosave__label {
    color: var(--success);
    display: inline-block;
    min-width: 145px;
    text-align: left;
}

/* Lado direito do cabeçalho */
.editor-header__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.editor-header__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.editor-header__close-btn:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.editor-header__close-btn i {
    width: 18px;
    height: 18px;
}


/* ── 10. Tela 3 — Editor: layout ───────────────────────────── */
.editor-body {
    flex: 1;
    display: flex;
    gap: var(--editor-gap);
    padding: var(--editor-pad);
    overflow: hidden;
    min-height: 0;
}

/* Painéis laterais */
.editor-panel {
    background: var(--surface-white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.editor-panel--left  { width: var(--panel-left-w);  }
.editor-panel--right { width: var(--panel-right-w); }


/* ── 11. Tela 3 — Painel esquerdo: produtos ────────────────── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.panel-header__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.panel-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.panel-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.panel-search__icon {
    position: absolute;
    left: 26px;
    width: 14px;
    height: 14px;
    color: var(--gray-400);
    pointer-events: none;
}

.panel-search__input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--gray-800);
    background: var(--gray-50);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.panel-search__input::placeholder { color: var(--gray-400); }

.panel-search__input:focus {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 220, 2, 0.16);
    background: var(--surface-white);
}

/* Lista de produtos */
.products-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

/* Card de produto na lista */
.product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}

.product-item:hover {
    background: var(--gray-50);
    border-color: var(--border);
}

.product-item--active {
    background: var(--yellow-light);
    border-color: var(--yellow);
}

.product-item--active:hover {
    background: rgba(255, 220, 2, 0.16);
}

/* Miniatura do produto */
.product-item__thumb {
    width: 42px;
    height: 42px;
    border-radius: var(--r-xs);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-item__thumb i {
    width: 16px;
    height: 16px;
    opacity: 0.45;
    color: white;
}

.product-item__thumb--rose      { background: linear-gradient(135deg, #F0A0B8, #E07090); }
.product-item__thumb--lily      { background: linear-gradient(135deg, #C8E0EE, #A0C4D8); }
.product-item__thumb--tulip     { background: linear-gradient(135deg, #E08080, #C85050); }
.product-item__thumb--orchid    { background: linear-gradient(135deg, #C8A0D4, #A068C0); }
.product-item__thumb--sunflower { background: linear-gradient(135deg, #F5D870, #E8B010); }

/* Informações do produto */
.product-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-item__code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-item__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-item__price {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}

.product-item__name--muted {
    color: var(--gray-400);
    font-weight: 500;
}

.product-item__manual-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--purple, #6B3FA0);
    background: rgba(107, 63, 160, 0.08);
    border: 1px solid rgba(107, 63, 160, 0.18);
    border-radius: 4px;
    padding: 1px 5px;
    margin-bottom: 2px;
}

/* Indicador de produto ativo */
.product-item__active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--yellow);
    border: 2px solid var(--yellow-hover);
    flex-shrink: 0;
}

/* Rodapé do painel esquerdo */
.panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.panel-footer__stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-footer__stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--gray-600);
}

.panel-footer__stat i {
    width: 13px;
    height: 13px;
    color: var(--gray-400);
    flex-shrink: 0;
}

.panel-footer__stat span {
    flex: 1;
}

.panel-footer__stat strong {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 0.8125rem;
}

.panel-footer__reorder-btn {
    width: 100%;
}


/* ── 12. Tela 3 — Coluna central (canvas A4) ────────────────── */
.editor-canvas {
    --preview-zoom: 1;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-md);
    min-width: 0;
    background: var(--gray-200);
    border: 1px solid var(--border-md);
}

.canvas-scroll-area {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px 72px;
}

.preview-zoom-bar {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(34, 34, 42, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.preview-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, opacity 0.12s;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 5px;
    white-space: nowrap;
}

.preview-zoom-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.preview-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.preview-zoom-btn .lucide,
.preview-zoom-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.preview-zoom-btn--label {
    min-width: 52px;
    font-variant-numeric: tabular-nums;
}

.preview-zoom-btn--fit {
    padding: 0 8px;
}

.creator-acao-tip {
    position: fixed;
    z-index: 2147483647;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1f1f28;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.creator-acao-tip[hidden] {
    display: none !important;
}

body.creator-sem-canva #btn-abrir-canva,
body.creator-sem-canva #screen-canva,
body.creator-sem-canva #screen-nav-canva,
body.creator-sem-canva .dashboard-tools-section {
    display: none !important;
}

body.creator-sem-ia #btn-abrir-ia-editor,
body.creator-sem-ia #screen-ia-editor,
body.creator-sem-ia #screen-nav-ia {
    display: none !important;
}

/* Folha A4 (proporção 210 × 297 mm = 1:1.414) */
.a4-sheet {
    width: 490px;
    min-height: 693px; /* 490 × 1.414 */
    background: var(--surface-white);
    box-shadow: var(--shadow-a4);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

/* ── Cabeçalho da prévia do catálogo ── */
.catalog-preview__header {
    background: var(--purple);
    position: relative;
    padding: 18px 22px;
    overflow: hidden;
    flex-shrink: 0;
}

.catalog-preview__header-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6B3FA0 0%, #8A5CC0 100%);
}

.catalog-preview__floral-deco {
    position: absolute;
    top: -12px;
    right: -8px;
    pointer-events: none;
    z-index: 1;
}

.catalog-preview__header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.catalog-preview__brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-preview__brand-icon {
    flex-shrink: 0;
}

.catalog-preview__brand-name {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.12em;
}

.catalog-preview__title-group {
    text-align: right;
}

.catalog-preview__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 1.1;
}

.catalog-preview__subtitle {
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.18em;
    margin-top: 2px;
}

/* ── Grade de produtos na prévia ── */
.catalog-preview__body {
    flex: 1;
    padding: 14px;
}

.catalog-preview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.catalog-preview__product-cell {
    border: 1px solid #eeeeee;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.catalog-preview__product-img {
    height: 108px;
}

.catalog-preview__product-img--rose      { background: linear-gradient(135deg, #FAD0E0, #F0A0C0); }
.catalog-preview__product-img--lily      { background: linear-gradient(135deg, #E0F0F8, #C0DFF0); }
.catalog-preview__product-img--tulip     { background: linear-gradient(135deg, #FAD0D0, #F0A0A0); }
.catalog-preview__product-img--orchid    { background: linear-gradient(135deg, #EAD8F5, #D5B8EC); }
.catalog-preview__product-img--sunflower { background: linear-gradient(135deg, #FEF0B8, #F8D850); }

.catalog-preview__product-caption {
    padding: 7px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #f2f2f2;
}

.catalog-preview__product-code {
    font-size: 0.55rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.catalog-preview__product-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #222;
}

.catalog-preview__product-price {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--purple);
}

/* Célula de destaque / promoção */
.catalog-preview__product-cell--promo {
    background: linear-gradient(135deg, #f4eeff, #ebe0fc);
    border-color: #d8c8f0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    min-height: 130px;
}

.catalog-preview__promo-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--purple);
    text-align: center;
    line-height: 1.4;
    font-style: italic;
}

.catalog-preview__promo-heart {
    font-size: 1.125rem;
    color: var(--purple);
    opacity: 0.45;
}

/* ── Rodapé da prévia do catálogo ── */
.catalog-preview__footer {
    background: var(--gray-900);
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
}

.catalog-preview__footer-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.catalog-preview__footer-item i {
    width: 11px;
    height: 11px;
    opacity: 0.65;
}


/* ── 13. Tela 3 — Painel direito: abas ─────────────────────── */

/* Radio das abas (ocultos) */
.tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Barra de abas */
.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 0 16px;
}

.panel-tab {
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    position: relative;
    bottom: -1px;
    transition: color 0.18s, border-color 0.18s;
    white-space: nowrap;
    user-select: none;
}

.panel-tab:hover {
    color: var(--gray-800);
}

/* Aba ativa — via siblings CSS */
#tab-produto:checked  ~ .panel-tabs .panel-tab[data-tab="produto"],
#tab-catalogo:checked ~ .panel-tabs .panel-tab[data-tab="catalogo"] {
    color: var(--gray-900);
    border-bottom-color: var(--yellow);
}

/* Painéis de aba */
.tab-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#tab-produto:checked  ~ .tab-pane--produto  { display: flex; }
#tab-catalogo:checked ~ .tab-pane--catalogo { display: flex; }

.tab-pane__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    box-sizing: border-box;
}

/* Seções dentro das abas */
.panel-section {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

.panel-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 4px;
}

.panel-section__title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
}

/* Botões de ação fixos no fundo da aba Produto */
.tab-pane__actions {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: var(--surface-white);
}

.tab-pane__actions .creator-btn {
    flex: 1;
    justify-content: center;
}


/* ── 14. Componentes: swatches de cor ───────────────────────── */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* Cores dos swatches */
.color-swatch--rose      { background-color: #D95F8C; }
.color-swatch--dark-red  { background-color: #8B1A2F; }
.color-swatch--cream     { background-color: #F5ECD7; border: 1.5px solid var(--border-md); }
.color-swatch--yellow-warm { background-color: #F5C842; }
.color-swatch--orange    { background-color: #E05A2B; }

/* Swatch selecionado */
.color-swatch--active {
    border-color: var(--gray-900);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.10);
}

.color-swatch--active::after {
    content: '';
    width: 9px;
    height: 9px;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Swatch "Adicionar" */
.color-swatch--add {
    background: var(--gray-100);
    border: 1.5px dashed var(--border-md);
    border-radius: 50%;
    color: var(--gray-500);
}

.color-swatch--add:hover {
    background: var(--gray-200);
    color: var(--gray-700);
    border-style: solid;
}

.color-swatch--add i {
    width: 13px;
    height: 13px;
}

.cores-catalogo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.cor-catalogo-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
}

.cor-catalogo-item--off {
    opacity: 0.62;
}

.cor-catalogo-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-100);
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.cor-catalogo-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cor-catalogo-item__thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

.cor-catalogo-item__thumb-empty i {
    width: 16px;
    height: 16px;
}

.cor-catalogo-item__nome {
    width: 100%;
    min-width: 0;
    font-size: 0.75rem;
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
}

.cor-catalogo-item__acoes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cor-catalogo-item__incluir {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--gray-600);
    cursor: pointer;
    font-family: inherit;
}

.cor-catalogo-item__incluir[aria-pressed="true"] {
    border-color: var(--purple);
    background: var(--purple-light);
    color: var(--purple);
}

.cor-catalogo-item__remover {
    font-size: 0.625rem;
    padding: 3px 8px;
    border: none;
    background: transparent;
    color: #c0392b;
    cursor: pointer;
    font-family: inherit;
}

.modelo-pdf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.modelo-pdf-opcao {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 10px;
    align-items: center;
    text-align: left;
    padding: 8px;
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.modelo-pdf-opcao:hover {
    border-color: var(--gray-400);
}

.modelo-pdf-opcao--ativa {
    border-color: #6B3FA0;
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.15);
}

.modelo-pdf-opcao__preview {
    width: 52px;
    height: 68px;
    border-radius: 4px;
    background: #f4f4fa;
    border: 1px solid #e4e4ef;
    position: relative;
    overflow: hidden;
}

.modelo-pdf-opcao__nome {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.modelo-pdf-opcao__desc {
    font-size: 0.625rem;
    color: var(--gray-500);
    line-height: 1.3;
}

.modelo-pdf-opcao__preview--classico .mp-cls-photo {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 54%;
    background: #ececf4;
}

.modelo-pdf-opcao__preview--classico .mp-cls-side {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 46%;
    background: #6B3FA0;
}

.modelo-pdf-opcao__preview--vitrine .mp-vit-card {
    position: absolute;
    left: 5px; right: 5px;
    height: 26px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ddd;
}

.modelo-pdf-opcao__preview--vitrine .mp-vit-card:first-child { top: 6px; }
.modelo-pdf-opcao__preview--vitrine .mp-vit-card:last-child { bottom: 6px; }

.modelo-pdf-opcao__preview--lista .mp-lista-line {
    position: absolute;
    left: 6px; right: 6px;
    height: 7px;
    border-radius: 2px;
    background: #ececf4;
}
.modelo-pdf-opcao__preview--lista .mp-lista-line:nth-child(1) { top: 10px; }
.modelo-pdf-opcao__preview--lista .mp-lista-line:nth-child(2) { top: 22px; }
.modelo-pdf-opcao__preview--lista .mp-lista-line:nth-child(3) { top: 34px; }
.modelo-pdf-opcao__preview--lista .mp-lista-line:nth-child(4) { top: 46px; }


/* ── 15. Componentes: imagem do produto ─────────────────────── */
.product-image-field {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-image-field__thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--r-md);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    overflow: hidden;
}

.product-image-field__thumb i {
    width: 22px;
    height: 22px;
    opacity: 0.4;
    color: white;
}

.product-image-field__thumb--rose { background: linear-gradient(135deg, #F0A0B8, #E07090); }

.product-image-field__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rmbg-catalogo-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}

.rmbg-catalogo-modal__box {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.rmbg-catalogo-modal__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.rmbg-catalogo-modal__hint {
    margin: 0 0 14px;
    font-size: 12px;
    color: #777;
    line-height: 1.4;
}

.rmbg-catalogo-modal__preview {
    width: 100%;
    aspect-ratio: 1;
    max-height: 280px;
    border-radius: 12px;
    overflow: hidden;
    background: repeating-conic-gradient(#ececf2 0% 25%, #fff 0% 50%) 50% / 16px 16px;
    border: 1px solid #e6e6ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.rmbg-catalogo-modal__preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.rmbg-catalogo-modal__status {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6B3FA0;
    font-weight: 600;
}

.rmbg-catalogo-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.rmbg-catalogo-modal__actions .creator-btn i,
.rmbg-catalogo-modal__actions .creator-btn svg {
    width: 14px;
    height: 14px;
}


/* ── 16. Componentes: upload de logo ────────────────────────── */
.logo-upload-field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1.5px dashed var(--border-md);
    border-radius: var(--r-sm);
    transition: border-color 0.18s;
}

.logo-upload-field:hover {
    border-color: var(--gray-400);
}

.logo-upload-field__preview {
    width: 54px;
    height: 54px;
    background: var(--gray-100);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--gray-400);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.logo-upload-field__preview.is-processando img {
    opacity: 0.35;
}

.logo-upload-field__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}

.logo-upload-field__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: creator-spin 0.7s linear infinite;
}

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

#catalog-logo-rmbg-status.is-erro {
    color: #b42318;
}

.catalog-acao-botao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.catalog-acao-botao__opt {
    cursor: pointer;
    margin: 0;
}

.catalog-acao-botao__opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.catalog-acao-botao__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--border-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    background: #fff;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.catalog-acao-botao__opt input:checked + .catalog-acao-botao__chip {
    border-color: var(--purple);
    background: rgba(107, 63, 160, 0.08);
    color: var(--purple);
}

.catalog-acao-botao__opt input:focus-visible + .catalog-acao-botao__chip {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.catalog-whatsapp-botao-campos {
    margin: 4px 0 10px;
}

.catalog-acao-botao__preview {
    margin-top: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.catalog-acao-botao__preview-label {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
}

.catalog-acao-botao__preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--purple);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.catalog-acao-botao__preview-btn.is-whatsapp {
    background: #25D366;
}

.logo-upload-field__preview i {
    width: 18px;
    height: 18px;
}

.logo-upload-field__preview span {
    font-size: 0.5625rem;
    font-weight: 500;
}

.form-field__hint {
    font-size: 0.6875rem;
    color: var(--gray-500);
    line-height: 1.45;
    margin: 0;
}

.capa-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    max-width: 100%;
}

.capa-editor__preview {
    width: 100%;
    height: 96px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1.5px dashed var(--border-md);
    background: var(--gray-50);
}

.capa-editor__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.capa-editor__selecao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    max-width: 100%;
}

.capa-editor__grid,
.capa-editor__extras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Expansão leve: sem max-height animado (evita travar com muitos SVGs) */
.capa-editor__extras {
    display: grid;
}

.capa-editor__extras[hidden] {
    display: none !important;
}

.capa-editor__selecao.is-expanded .capa-editor__extras {
    display: grid;
}

.capa-editor__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px dashed var(--border-md);
    border-radius: var(--r-sm);
    background: var(--gray-50);
    color: var(--gray-700);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.capa-editor__toggle:hover {
    background: #fff;
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.capa-editor__toggle:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.capa-editor__toggle i,
.capa-editor__toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.capa-editor__selecao.is-expanded .capa-editor__toggle {
    border-style: solid;
    background: #fff;
}

.capa-opcao {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    content-visibility: auto;
    contain-intrinsic-size: 96px 140px;
    min-width: 0;
}

.capa-opcao:hover {
    border-color: var(--gray-400);
}

.capa-opcao--ativa {
    border-color: #6B3FA0;
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.15);
}

.capa-editor__toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.capa-opcao img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    display: block;
    background: var(--gray-100);
    min-height: 0;
}

.capa-opcao__nome {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capa-editor__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .capa-editor__grid,
    .capa-editor__extras {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .capa-editor__toggle i,
    .capa-editor__toggle svg {
        transition: none;
    }
}


/* ── 17. Componentes: campo de cor ──────────────────────────── */
.color-picker-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: var(--surface-white);
    font: inherit;
    text-align: left;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.color-picker-field:hover {
    border-color: var(--gray-400);
}

.color-picker-field:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.color-picker-field[aria-expanded="true"] {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-light);
}

.color-picker-field__swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
}

.color-picker-field__swatch--purple { background: #6B3FA0; }

.color-picker-field__value {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    font-family: 'Courier New', 'Courier', monospace;
    letter-spacing: 0.02em;
}

.color-picker-field__arrow {
    margin-left: auto;
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    flex-shrink: 0;
}

.color-picker-field__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.color-picker-field__nome {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-800);
    line-height: 1.2;
}

.color-picker-field__meta .color-picker-field__value {
    flex: none;
    font-size: 11px;
    color: var(--gray-500);
}

.panel-section__hint {
    margin: -4px 0 12px;
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.45;
}

.catalog-cores-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.catalog-cores-selecao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.catalog-cores-extras {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        transform 0.28s ease,
        gap 0.25s ease;
}

.catalog-cores-selecao.is-expanded .catalog-cores-extras {
    max-height: 900px;
    opacity: 1;
    gap: 8px;
    transform: translateY(0);
    pointer-events: auto;
}

.catalog-cores-extras .catalog-cor-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item {
    opacity: 1;
    transform: translateY(0);
}

.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(1) { transition-delay: 0.02s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(2) { transition-delay: 0.05s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(3) { transition-delay: 0.08s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(4) { transition-delay: 0.11s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(5) { transition-delay: 0.14s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(6) { transition-delay: 0.17s; }
.catalog-cores-selecao.is-expanded .catalog-cores-extras .catalog-cor-item:nth-child(n+7) { transition-delay: 0.2s; }

.catalog-cores-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border: 1.5px dashed var(--border-md);
    border-radius: var(--r-sm);
    background: var(--gray-50);
    color: var(--gray-700);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.catalog-cores-toggle:hover {
    background: #fff;
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.catalog-cores-toggle:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.catalog-cores-toggle i,
.catalog-cores-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.catalog-cores-selecao.is-expanded .catalog-cores-toggle {
    border-style: solid;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-cores-extras,
    .catalog-cores-extras .catalog-cor-item {
        transition: none;
    }
}

.catalog-cor-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalog-cor-item .color-picker-field {
    flex: 1;
}

.catalog-cor-reset {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--purple);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 2px;
    white-space: nowrap;
}

.catalog-cor-reset:hover {
    text-decoration: underline;
}

.form-field__counter {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--gray-500);
    text-align: right;
}

.catalog-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 4px 0 2px;
    user-select: none;
}

.catalog-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.catalog-toggle__box {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--gray-300);
    position: relative;
    flex-shrink: 0;
    transition: background 0.18s;
}

.catalog-toggle__box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s;
}

.catalog-toggle__input:checked + .catalog-toggle__box {
    background: var(--purple);
}

.catalog-toggle__input:checked + .catalog-toggle__box::after {
    transform: translateX(16px);
}

.catalog-toggle__input:focus-visible + .catalog-toggle__box {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.catalog-toggle__label {
    font-size: 13px;
    color: var(--gray-800);
}

.catalog-toggle--compact {
    margin: 0;
    gap: 8px;
    flex-shrink: 0;
}

.catalog-toggle--compact .catalog-toggle__label {
    font-size: 12px;
    color: var(--gray-600);
}

.form-field__row-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.form-field__row-label .form-field__label {
    margin-bottom: 0;
}

.form-field.is-rede-desativada .form-field__input {
    opacity: 0.55;
}

.logo-upload-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.catalog-inst-campos.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.catalog-inst-campos {
    margin-top: 12px;
}

/* Modal próprio do seletor de cor */
.color-picker-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.color-picker-modal[hidden] {
    display: none !important;
}

.color-picker-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
}

.color-picker-modal__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    max-height: min(92vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--surface-white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: modal-enter 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.color-picker-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.color-picker-modal__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-picker-modal__title i,
.color-picker-modal__title svg {
    width: 16px;
    height: 16px;
    color: var(--purple);
}

.color-picker-modal__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-height: 0;
}

.color-picker-modal__preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-eyedropper {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--gray-50, #f8f9fa);
    color: var(--gray-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.color-picker-eyedropper:hover {
    background: #fff;
    border-color: var(--purple);
    color: var(--purple);
}

.color-picker-eyedropper:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.color-picker-eyedropper i,
.color-picker-eyedropper svg {
    width: 18px;
    height: 18px;
}

.color-picker-modal__fav-actions {
    display: flex;
    justify-content: flex-start;
}

.color-picker-fav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.color-picker-fav-toggle:hover {
    border-color: var(--purple);
    color: var(--purple);
}

.color-picker-fav-toggle[aria-pressed="true"] {
    background: #f6f0ff;
    border-color: var(--purple);
    color: var(--purple);
}

.color-picker-fav-toggle i,
.color-picker-fav-toggle svg {
    width: 14px;
    height: 14px;
}

.color-picker-presets--favoritas,
.color-picker-presets--recentes {
    margin: 0;
}

.color-picker-presets__empty {
    margin: 0;
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1.35;
}

.color-picker-preset-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.color-picker-preset-wrap .color-picker-preset {
    width: 100%;
    height: 100%;
}

.color-picker-preset__remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #222;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.color-picker-preset-wrap:hover .color-picker-preset__remove,
.color-picker-preset-wrap:focus-within .color-picker-preset__remove {
    display: inline-flex;
}

.capa-opcao--logo .capa-opcao__logo-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #fff;
    border: 1px solid #e6e6ec;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14%;
    box-sizing: border-box;
    overflow: hidden;
}

.capa-opcao--logo .capa-opcao__logo-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.capa-opcao--logo.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.capa-opcao--logo.is-disabled:hover {
    transform: none;
}

.color-picker-modal__preview-swatch {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.color-picker-modal__hex-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-picker-modal__hex-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.color-picker-modal__hex-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid var(--border-md);
    border-radius: var(--r-sm);
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gray-800);
    background: var(--gray-50);
    text-transform: uppercase;
}

.color-picker-modal__hex-input:focus {
    outline: none;
    border-color: var(--purple);
    background: var(--surface-white);
    box-shadow: 0 0 0 3px var(--purple-light);
}

.color-picker-sv {
    position: relative;
    width: 100%;
    height: 148px;
    border-radius: 10px;
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background:
        linear-gradient(to bottom, transparent, #000),
        linear-gradient(to right, #fff, hsl(270, 100%, 50%));
}

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

.color-picker-hue {
    position: relative;
    width: 100%;
    height: 16px;
    border-radius: 999px;
    cursor: pointer;
    touch-action: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffff00 17%,
        #00ff00 33%,
        #00ffff 50%,
        #0000ff 67%,
        #ff00ff 83%,
        #ff0000 100%
    );
}

.color-picker-hue__thumb {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    left: 75%;
}

.color-picker-presets__label {
    margin: 0 0 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.color-picker-presets__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
}

.color-picker-preset {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.color-picker-preset:hover {
    transform: scale(1.12);
}

.color-picker-preset:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.color-picker-preset.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--purple);
}

.color-picker-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}


/* ── 18. Modal ──────────────────────────────────────────────── */
.creator-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.creator-modal:target {
    display: flex;
}

.creator-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
}

.creator-modal__close-overlay {
    display: block;
    position: absolute;
    inset: 0;
    cursor: default;
}

.creator-modal__box {
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
    animation: modal-enter 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.creator-modal__header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.creator-modal__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.creator-modal__title i {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
}

.creator-modal__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.creator-modal__close-btn:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.creator-modal__close-btn i {
    width: 18px;
    height: 18px;
}

.creator-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.creator-modal__lead {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.65;
}

.creator-modal__footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Resultados no modal */
.modal-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-results__label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 2px;
}

.modal-add-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gray-400);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.modal-add-divider::before,
.modal-add-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.modal-manual-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1.5px dashed var(--border-md);
    border-radius: var(--r-sm);
    background: var(--gray-50, #fafafa);
}

.modal-manual-section__text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.55;
}

.modal-manual-section__btn {
    align-self: flex-start;
}

.modal-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color 0.15s, background 0.15s;
}

.modal-result-item:hover {
    border-color: var(--yellow);
    background: var(--yellow-xlight);
}

.modal-result-item__thumb {
    width: 46px;
    height: 46px;
    border-radius: var(--r-xs);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-result-item__thumb i {
    width: 16px;
    height: 16px;
    opacity: 0.4;
    color: white;
}

.modal-result-item__thumb--rose  { background: linear-gradient(135deg, #F0A0B8, #E07090); }
.modal-result-item__thumb--rose2 { background: linear-gradient(135deg, #F8C0D0, #F0A0B8); }

.modal-result-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.modal-result-item__code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modal-result-item__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}

.modal-result-item__price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--purple);
}

.modal-result-item__add-btn {
    flex-shrink: 0;
}


/* ── 19. Barra de rolagem personalizada ─────────────────────── */
.products-list::-webkit-scrollbar,
.tab-pane__scroll::-webkit-scrollbar,
.editor-canvas::-webkit-scrollbar,
.canvas-scroll-area::-webkit-scrollbar,
.dashboard-main::-webkit-scrollbar,
.creator-modal__body::-webkit-scrollbar {
    width: 4px;
}

.products-list::-webkit-scrollbar-track,
.tab-pane__scroll::-webkit-scrollbar-track,
.editor-canvas::-webkit-scrollbar-track,
.canvas-scroll-area::-webkit-scrollbar-track,
.dashboard-main::-webkit-scrollbar-track,
.creator-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.products-list::-webkit-scrollbar-thumb,
.tab-pane__scroll::-webkit-scrollbar-thumb,
.editor-canvas::-webkit-scrollbar-thumb,
.canvas-scroll-area::-webkit-scrollbar-thumb,
.dashboard-main::-webkit-scrollbar-thumb,
.creator-modal__body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--r-full);
}


/* ── 20. Utilitários ────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 21. MC Creator — overlays de carregamento ──────────────── */
@keyframes creator-spin {
    to { transform: rotate(360deg); }
}

.creator-app-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-app);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.creator-app-loader--saindo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.creator-app-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.creator-app-loader__logo {
    opacity: 0.95;
}

.creator-app-loader__spinner,
.creator-editor-loader__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(107, 63, 160, 0.12);
    border-top-color: var(--purple, #6B3FA0);
    border-radius: 50%;
    animation: creator-spin 0.75s linear infinite;
}

.creator-app-loader__text,
.creator-editor-loader__text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500, #888);
    letter-spacing: 0.01em;
}

.creator-editor-loader {
    position: absolute;
    inset: var(--header-h) 0 0 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-app);
    transition: opacity 0.35s ease;
}

.creator-editor-loader[hidden] {
    display: none !important;
}

.creator-editor-loader--saindo {
    opacity: 0;
    pointer-events: none;
}

.creator-editor-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

body.creator-editor-carregando .editor-body {
    visibility: hidden;
}


/* ================================================================
   21. Tela 5 — Editor Visual Canva
   ================================================================ */


/* ── Dashboard: Seção de Ferramentas Criativas ──────────────────── */
.dashboard-tools-section {
    margin-bottom: 2.5rem;
}

.dashboard-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.dashboard-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 680px;
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--surface-white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.tool-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(107, 63, 160, 0.04) 0%,
        rgba(255, 220, 2, 0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.tool-card:hover {
    border-color: var(--purple);
    box-shadow: 0 6px 24px rgba(107, 63, 160, 0.13);
    transform: translateY(-2px);
}

.tool-card:hover::before { opacity: 1; }

.tool-card:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 3px;
}

.tool-card__icon-wrap {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7B4FB0 0%, #6B3FA0 50%, #5A2F8F 100%);
    box-shadow: 0 4px 12px rgba(107, 63, 160, 0.30);
}

.tool-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tool-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.tool-card__desc {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.tool-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--yellow);
    color: var(--gray-900);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: var(--r-full);
}


/* ═══════════════════════════════════════════════════════════════
   EDITOR VISUAL CANVA — Fabric.js (v2.0)
   Layout: Topbar | [Camadas | Canvas | Painel contextual]
═══════════════════════════════════════════════════════════════ */

/* ── Tela Canva: layout geral ───────────────────────────────────── */
.creator-screen--canva {
    flex-direction: column;
    background: var(--canva-bg-deep, #1a1a2e);
    color-scheme: dark;

    /* Tokens do editor Canva (tema escuro) */
    --canva-bg-deep:      #1a1a2e;
    --canva-bg-panel:     #22223b;
    --canva-bg-elevated:  #2a2a42;
    --canva-bg-input:     rgba(255, 255, 255, 0.06);
    --canva-border:       rgba(255, 255, 255, 0.08);
    --canva-border-md:    rgba(255, 255, 255, 0.12);
    --canva-text:         rgba(255, 255, 255, 0.92);
    --canva-text-muted:   rgba(255, 255, 255, 0.68);
    --canva-text-faint:   rgba(255, 255, 255, 0.48);
    --canva-accent-soft:  rgba(107, 63, 160, 0.22);
    --canva-accent-border:rgba(107, 63, 160, 0.45);
}

/* Scrollbars e controles nativos — escopo exclusivo do Canva */
.creator-screen--canva,
.creator-screen--canva * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.creator-screen--canva *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.creator-screen--canva *::-webkit-scrollbar-track {
    background: transparent;
}

.creator-screen--canva *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

.creator-screen--canva *::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.creator-screen--canva *::-webkit-scrollbar-corner {
    background: transparent;
}

.creator-screen--canva input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.creator-screen--canva input[type="number"]::-webkit-inner-spin-button,
.creator-screen--canva input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 0.75;
    filter: invert(0.82);
}

.creator-screen--canva input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    background: rgba(255, 255, 255, 0.35);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
    cursor: pointer;
}

.creator-screen--canva input[type="search"]::-webkit-search-cancel-button:hover {
    background: rgba(255, 255, 255, 0.65);
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.canva-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 56px;
    background: var(--canva-bg-panel);
    border-bottom: 1px solid var(--canva-border);
    flex-shrink: 0;
    z-index: 10;
}

.canva-topbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.canva-topbar__center {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.canva-autosave {
    flex-shrink: 0;
    margin-right: 4px;
}

.canva-autosave .editor-autosave__label {
    min-width: 145px !important;
}

.canva-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canva-topbar__sep {
    width: 1px;
    height: 20px;
    background: var(--canva-border-md);
    margin: 0 4px;
    flex-shrink: 0;
}

.creator-screen--canva .editor-header__sep {
    background: var(--canva-border-md);
}

.creator-screen--canva .editor-header__close-btn {
    color: var(--canva-text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--canva-border);
}

.creator-screen--canva .editor-header__close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--canva-border-md);
}

/* Botões de ferramenta na topbar */
.canva-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--canva-text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    white-space: nowrap;
}

.canva-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.canva-tool-btn:disabled {
    opacity: 0.42;
    color: rgba(255, 255, 255, 0.38);
    cursor: not-allowed;
}

.canva-tool-btn .lucide,
.canva-tool-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
    flex-shrink: 0;
}

.canva-tool-btn--icon {
    padding: 6px 9px;
    gap: 0;
}

.canva-tool-btn--icon .lucide,
.canva-tool-btn--icon svg {
    width: 16px;
    height: 16px;
}

.canva-tool-btn--icon[data-carregando="1"] .lucide,
.canva-tool-btn--icon[data-carregando="1"] svg {
    animation: canva-spin 0.8s linear infinite;
}

.canva-tool-btn[data-carregando="1"] .lucide,
.canva-tool-btn[data-carregando="1"] svg {
    animation: canva-spin 0.8s linear infinite;
}

.canva-tool-btn[data-carregando="1"] {
    opacity: 0.72;
    pointer-events: none;
}

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

/* ── Título no cabeçalho ────────────────────────────────────────── */
.canva-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canva-header-title__text {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
}

.canva-editor-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, #6B3FA0, #9B59B6);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


/* ── Workspace: 3 colunas ────────────────────────────────────────── */
.creator-screen--canva {
    --canva-left-w: 320px;
    --canva-left-min: 280px;
    --canva-left-max: 340px;
    --canva-context-w: 252px;
}

.canva-workspace {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
    position: relative;
}


/* ── Painel Esquerdo (menu + camadas + elementos) ────────────────── */
.canva-left-panel {
    width: var(--canva-left-w);
    min-width: var(--canva-left-min);
    max-width: var(--canva-left-max);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #22223b;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* ── Responsividade dos painéis laterais do Canva ───────────────── */
@media (min-width: 1440px) {
    .creator-screen--canva {
        --canva-left-w: 340px;
        --canva-left-max: 360px;
    }
}

@media (max-width: 1280px) {
    .creator-screen--canva {
        --canva-left-w: 300px;
        --canva-left-min: 272px;
        --canva-left-max: 320px;
    }
}

@media (max-width: 1100px) {
    .creator-screen--canva {
        --canva-left-w: 288px;
        --canva-left-min: 260px;
        --canva-context-w: 228px;
    }

    .lib-thumbs-grid--masonry {
        column-gap: 8px;
        padding: 8px 10px 10px;
    }
}

@media (max-width: 960px) {
    .creator-screen--canva {
        --canva-left-w: 272px;
        --canva-left-min: 248px;
        --canva-left-max: 288px;
        --canva-context-w: 212px;
    }

    .lib-toolbar {
        padding: 8px 10px 7px;
    }

    .lib-filtros-visuais__inner {
        padding: 8px;
    }
}

@media (max-width: 820px) {
    .creator-screen--canva {
        --canva-left-w: 256px;
        --canva-left-min: 240px;
        --canva-left-max: 272px;
        --canva-context-w: 200px;
    }
}

/* Estados do painel esquerdo */
.clp-estado {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.clp-estado--flex { display: flex; }
.clp-estado[hidden] { display: none !important; }

/* ── Estado: menu de cards ─── */
.clp-menu-titulo {
    padding: 12px 12px 7px;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.clp-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 12px 16px;
}

.clp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding: 6px;
    overflow: hidden;
}

.clp-card__arte {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

.clp-card:hover {
    background: rgba(107, 63, 160, 0.22);
    border-color: rgba(107, 63, 160, 0.5);
    color: #fff;
    transform: translateY(-1px);
}
.clp-card:active { transform: translateY(0); }

/* ── Cabeçalho dos sub-painéis ─── */
.clp-panel-topo {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
}

.clp-voltar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
    padding: 0;
}
.clp-voltar:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }

.clp-panel-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
}

.lib-panel-topo {
    min-height: 40px;
    padding: 9px 12px;
}

.lib-panel-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Navegação de categorias de elementos ─── */
.clp-categorias-nav {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    overflow-x: auto;
}
.clp-categorias-nav::-webkit-scrollbar { height: 0; }

.clp-cat-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.clp-cat-nav-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8); }
.clp-cat-nav-btn--ativo {
    background: rgba(107, 63, 160, 0.25);
    border-color: rgba(107, 63, 160, 0.4);
    color: #fff;
}

/* ── Biblioteca de produtos / elementos ─── */
.lib-produtos-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

.lib-produtos-area--elementos {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 120px);
}

.lib-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

.lib-toolbar {
    flex-shrink: 0;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.12);
}

.lib-toolbar--lista {
    padding-bottom: 10px;
}

.lib-scroll-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#lib-view-lista {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lib-load-footer {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.1);
}

.lib-load-more-btn {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(107, 63, 160, 0.45);
    border-radius: 8px;
    background: rgba(107, 63, 160, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}

.lib-load-more-btn:hover:not(:disabled) {
    background: rgba(107, 63, 160, 0.32);
    border-color: rgba(107, 63, 160, 0.65);
}

.lib-load-more-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.lib-load-more-btn[hidden] {
    display: none;
}

.lib-fav-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.1s;
}

.lib-fav-btn:hover {
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    transform: scale(1.06);
}

.lib-fav-btn--ativo {
    color: #f5c842;
    background: rgba(0, 0, 0, 0.55);
}

.lib-fav-btn svg {
    display: block;
    pointer-events: none;
}

.ctx-font-fav-btn {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}

.ctx-font-fav-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
}

.ctx-font-fav-btn--ativo {
    color: #f5c842;
}

.ctx-font-fav-btn svg {
    display: block;
    pointer-events: none;
}

.lib-view[hidden] { display: none !important; }

.lib-hub-subtitulo {
    margin: 0;
    padding: 10px 14px 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

/* Grade de cards de categorias (hub da aba Elementos) */
.lib-categorias-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 2px 12px 16px;
    align-content: start;
}
.lib-categorias-grid::-webkit-scrollbar       { width: 3px; }
.lib-categorias-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.lib-cat-card--skeleton {
  pointer-events: none;
  opacity: 0.55;
  border-style: dashed;
  animation: lib-cat-pulse 1.2s ease-in-out infinite;
}

.lib-cat-card__icon--skeleton {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

@keyframes lib-cat-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.75; }
}

.lib-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.12s;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    min-height: 96px;
    min-width: 0;
}
.lib-cat-card:hover {
    background: rgba(107, 63, 160, 0.18);
    border-color: rgba(107, 63, 160, 0.45);
    transform: translateY(-1px);
}
.lib-cat-card--compact {
    min-height: auto;
    padding: 8px 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.lib-cat-card--compact .lib-cat-card__nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lib-cat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.78);
}
.lib-cat-card__nome {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.lib-cat-card__desc {
    display: none;
}
.lib-toolbar--global {
    padding-bottom: 10px;
    z-index: 2;
}

.lib-busca--global {
    padding: 0;
}

.lib-filtros-visuais--global {
    margin-top: 2px;
}

.lib-busca-contexto {
    margin: 0;
    padding: 0 2px;
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.35;
}

.lib-cat-card--visual {
    min-height: 118px;
    padding: 10px 10px 11px;
    gap: 7px;
    align-items: stretch;
    text-align: left;
}

.lib-cat-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lib-cat-card__cover--skeleton {
    background: rgba(255, 255, 255, 0.08);
    animation: lib-cat-pulse 1.2s ease-in-out infinite;
}

.lib-cat-card__cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.lib-cat-card__slides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lib-cat-card--visual:hover .lib-cat-card__slides,
.lib-cat-card--visual:focus-within .lib-cat-card__slides {
    opacity: 1;
}

.lib-cat-card__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.lib-cat-card__slide.is-ativo {
    opacity: 1;
}

.lib-cat-card--com-capa .lib-cat-card__icon {
    opacity: 0.55;
    transform: scale(0.85);
}

.lib-cat-card--visual:hover .lib-cat-card__cover-img {
    opacity: 0;
}

.lib-cat-card--visual:not(:hover):not(:focus-within) .lib-cat-card__cover-img {
    opacity: 1;
}

.lib-cat-card--visual .lib-cat-card__nome {
    text-align: center;
    display: block;
    width: 100%;
    padding: 0 1px;
    color: rgba(255, 255, 255, 0.9);
}

.lib-cat-card--visual .lib-cat-card__desc {
    display: none;
}

.mm-categorias-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 10px 14px;
}

.mm-cat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

.mm-cat-item:hover {
    background: rgba(107, 63, 160, 0.18);
    border-color: rgba(107, 63, 160, 0.45);
}

.mm-cat-item__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(107, 63, 160, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.mm-cat-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mm-cat-item__nome {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.mm-cat-item__desc {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.35;
}

.mm-cat-item__meta {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.mm-cat-item__chevron {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
}

/* Molduras e Grades — grid estilo Canva */
.mm-lib-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 2px 10px 14px;
}

.mm-lib-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.9);
    cursor: grab;
    transition: background 0.14s, border-color 0.14s, transform 0.12s, box-shadow 0.14s;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    min-width: 0;
}

.mm-lib-card:hover {
    background: rgba(107, 63, 160, 0.14);
    border-color: rgba(107, 63, 160, 0.42);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.mm-lib-card:focus-visible {
    outline: 2px solid rgba(107, 63, 160, 0.75);
    outline-offset: 2px;
}

.mm-lib-card--dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.mm-lib-card__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 8px;
    box-sizing: border-box;
}

.mm-lib-card__preview img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    pointer-events: none;
    user-select: none;
}

.mm-lib-card__nome {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.lib-busca-cats {
    padding: 0 10px 10px;
}
.lib-busca-cats__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lib-resultados--visual {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Filtros visuais — formato e cor */
.lib-filtros-visuais {
    flex-shrink: 0;
}

.lib-filtros-visuais__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.lib-filtros-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lib-filtros-grupo--cor {
    padding-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.lib-filtros-grupo__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.lib-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lib-filtro-chip {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Poppins', sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.2;
}

.lib-filtro-chip:hover {
    border-color: rgba(107, 63, 160, 0.45);
    color: rgba(255, 255, 255, 0.82);
}

.lib-filtro-chip.is-ativo {
    background: rgba(107, 63, 160, 0.32);
    border-color: rgba(107, 63, 160, 0.65);
    color: #fff;
}

.lib-filtros-cores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lib-filtro-cor {
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: box-shadow 0.12s, transform 0.12s;
}

.lib-filtro-cor:hover {
    transform: scale(1.08);
}

.lib-filtro-cor__bola {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cor-filtro);
    border: 1px solid var(--cor-borda, rgba(255,255,255,0.2));
}

.lib-filtro-cor__bola--todas {
    background: conic-gradient(
        from 225deg,
        #ff4d4d,
        #ffb020,
        #ffe066,
        #4cd964,
        #5ac8fa,
        #5856d6,
        #ff2d92,
        #ff4d4d
    );
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.lib-filtro-cor.is-ativo {
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.85);
}

.lib-thumbs-grid--visual .lib-thumb__label {
    display: none;
}

/* Masonry visual — cards com proporções reais */
.lib-thumbs-grid--masonry {
    display: block;
    columns: 2;
    column-gap: 9px;
    padding: 8px 12px 12px;
}

.lib-thumbs-grid--masonry .lib-thumb {
    break-inside: avoid;
    margin-bottom: 9px;
    display: inline-flex;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 9px;
}

.lib-thumbs-grid--masonry .lib-thumb.elem-formato--paisagem {
    column-span: all;
}

.lib-thumbs-grid--masonry .lib-thumb__img-wrap {
    height: auto;
    width: 100%;
}

.lib-thumbs-grid--masonry .lib-thumb.elem-formato--quadrado .lib-thumb__img-wrap {
    aspect-ratio: 1 / 1;
}

.lib-thumbs-grid--masonry .lib-thumb.elem-formato--paisagem .lib-thumb__img-wrap {
    aspect-ratio: 4 / 3;
}

.lib-thumbs-grid--masonry .lib-thumb.elem-formato--retrato .lib-thumb__img-wrap {
    aspect-ratio: 3 / 4;
}

.lib-thumbs-grid--visual .lib-thumb:not(.elem-formato--quadrado):not(.elem-formato--paisagem):not(.elem-formato--retrato) .lib-thumb__img-wrap {
    aspect-ratio: 1 / 1;
}

.lib-thumbs-grid--visual .lib-thumb__img-wrap {
    height: auto;
}

/* Indicador discreto de formato no card */
.lib-thumb__formato-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.52);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
    line-height: 1.2;
    backdrop-filter: blur(4px);
}

.lib-thumb__formato-badge__txt {
    font-size: 0.5rem;
    opacity: 0.88;
}

.lib-thumb__formato-badge__shape {
    display: block;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.9;
}

.lib-thumb__formato-badge__shape--quadrado {
    width: 7px;
    height: 7px;
}

.lib-thumb__formato-badge__shape--paisagem {
    width: 10px;
    height: 6px;
}

.lib-thumb__formato-badge__shape--retrato {
    width: 6px;
    height: 9px;
}

.lib-load-sentinel {
    height: 1px;
    flex-shrink: 0;
}

.lib-load-status {
    margin: 0;
    padding: 6px 12px 10px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

.lib-busca--categoria,
.lib-busca--hub {
    padding: 0;
    flex-shrink: 0;
}

.lib-busca {
    padding: 0;
    flex-shrink: 0;
}

.lib-busca__wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.lib-busca__wrap:focus-within {
    border-color: rgba(107, 63, 160, 0.65);
    background: rgba(107, 63, 160, 0.09);
}

.lib-busca__icon {
    flex-shrink: 0;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.lib-busca__input {
    flex: 1;
    padding: 7px 7px;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Poppins', sans-serif;
    font-size: 0.76rem;
    caret-color: #9B59B6;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}
.lib-busca__input::-webkit-search-cancel-button,
.lib-busca__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.lib-busca__input::placeholder { color: rgba(255, 255, 255, 0.28); }

.lib-busca__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(107, 63, 160, 0.3);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.lib-busca__btn:hover { background: rgba(107, 63, 160, 0.55); color: #fff; }

/* Área de resultados */
.lib-resultados {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 10px;
    min-height: 0;
    min-width: 0;
    overscroll-behavior: contain;
}
.lib-resultados::-webkit-scrollbar       { width: 3px; }
.lib-resultados::-webkit-scrollbar-track { background: transparent; }
.lib-resultados::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Estados especiais da biblioteca */
.lib-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 30px 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
}
.lib-estado p { font-size: 0.72rem; line-height: 1.6; margin: 0; }

.lib-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 26px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.74rem;
}

.lib-carregando--masonry {
    flex-direction: column;
    gap: 12px;
}

.lib-skeleton-grid--masonry {
    display: block;
    columns: 2;
    column-gap: 9px;
    width: 100%;
    padding: 8px 12px;
}

.lib-skeleton-thumb {
    break-inside: avoid;
    margin-bottom: 9px;
    width: 100%;
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: lib-skeleton-shimmer 1.2s ease-in-out infinite;
}

.lib-skeleton-thumb.elem-formato--quadrado { aspect-ratio: 1 / 1; }
.lib-skeleton-thumb.elem-formato--paisagem { aspect-ratio: 4 / 3; column-span: all; }
.lib-skeleton-thumb.elem-formato--retrato { aspect-ratio: 3 / 4; }

@keyframes lib-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.lib-total {
    padding: 8px 14px 4px;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.32);
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Grupo de produto na lista de resultados */
.lib-produto-grupo {
    padding: 8px 10px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lib-produto-grupo:last-child { border-bottom: none; }

.lib-produto-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}
.lib-produto-code {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
}
.lib-produto-nome {
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Grid de thumbnails */
.lib-thumbs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

/* Thumbnail individual */
.lib-thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 9px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    transition: border-color 0.14s, transform 0.12s, box-shadow 0.14s, opacity 0.15s;
    background: rgba(0, 0, 0, 0.22);
    min-width: 0;
}
.lib-thumb:hover {
    border-color: rgba(107, 63, 160, 0.65);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(107, 63, 160, 0.2);
}
.lib-thumb:active { transform: translateY(0); }

.lib-thumb__img-wrap {
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.lib-thumb__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lib-thumb[data-tipo="elemento"] .lib-thumb__img-wrap img {
    object-fit: contain;
    padding: 10px;
    max-width: 100%;
    max-height: 100%;
}

/* Pré-visualização de SVG/ícones na biblioteca — apenas listagem, não afeta inserção no canvas */
.lib-thumb--icone-preview .lib-thumb__img-wrap {
    background: rgba(255, 255, 255, 0.04);
}
.lib-thumb--icone-preview .lib-thumb__img-wrap img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
    padding: 12px;
}
.lib-thumbs-grid--icones .lib-thumb--icone-preview .lib-thumb__img-wrap img {
    opacity: 0.94;
}
/* Elementos SVG da Biblioteca oficial (renderizados inline via innerHTML) */
.lib-thumb__img-wrap svg {
    width: 62%;
    height: 62%;
    object-fit: contain;
    color: rgba(255, 255, 255, 0.82);
}
.lib-thumb__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.18);
}

.lib-thumb__label {
    padding: 3px 4px 4px;
    font-size: 0.59rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.lib-sem-imagem {
    grid-column: 1 / -1;
    padding: 10px;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.lib-mais-imgs {
    margin: 5px 0 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

.canva-layers-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 5px 0;
    scrollbar-gutter: stable;
}

.canva-layers-list::-webkit-scrollbar          { width: 6px; }
.canva-layers-list::-webkit-scrollbar-track    { background: transparent; }
.canva-layers-list::-webkit-scrollbar-thumb    { background: rgba(255,255,255,.18); border-radius: 3px; }
.canva-layers-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* Item de camada */
.canva-layer-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 6px;
    margin: 1px 5px;
    transition: background 0.12s;
    user-select: none;
    scroll-margin: 6px;
}

.canva-layer-item:hover          { background: rgba(255, 255, 255, 0.07); }
.canva-layer-item--ativo         { background: rgba(107, 63, 160, 0.28) !important; }
.canva-layer-item--locked        { opacity: 0.72; }
.canva-layer-item--locked.canva-layer-item--ativo { background: rgba(231, 76, 60, 0.18) !important; }
.canva-layer-item--bg            { opacity: 0.6; cursor: default; }
.canva-layer-item--bg:hover      { background: rgba(255, 255, 255, 0.03); }

.cli-thumb-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.cli-thumb-wrap--bg {
    color: rgba(255, 255, 255, 0.45);
}

.cli-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cli-thumb--forma {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.cli-thumb--texto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
}

.cli-thumb--grupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.cli-thumb--grupo small {
    font-size: 0.55rem;
    opacity: 0.85;
}

.cli-thumb--icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.cli-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
}

.cli-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.cli-acoes {
    display: flex;
    align-items: center;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.canva-layer-item:hover .cli-acoes { opacity: 1; }

.cli-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1;
}

.cli-btn:hover          { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cli-btn--del:hover     { background: rgba(231, 76, 60, 0.22); color: #e74c3c; }
.cli-btn--lock        { color: rgba(255, 255, 255, 0.45); }
.cli-btn--lock:hover  { background: rgba(231, 76, 60, 0.18); color: #f1948a; }
.cli-btn--lock.cli-btn--ativo { color: #e74c3c; }

.cli-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    color: #e74c3c;
    flex-shrink: 0;
    opacity: 0.9;
}

.cli-base-tag {
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.05em;
    padding-right: 2px;
}

/* ── Arraste: camadas ─────────────────────────────────────────────── */
.cli-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.28);
    cursor: grab;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
}

.cli-drag:active { cursor: grabbing; }

.canva-layer-item:hover .cli-drag { color: rgba(255, 255, 255, 0.55); }

.canva-layer-item--dragging {
    opacity: 0.55;
    background: rgba(107, 63, 160, 0.18) !important;
}

.canva-layer-item--over {
    box-shadow: inset 0 -2px 0 rgba(107, 63, 160, 0.85);
}

/* ── Painel Marca ─────────────────────────────────────────────────── */
.marca-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 14px;
    scrollbar-gutter: stable;
}

.marca-panel-scroll::-webkit-scrollbar       { width: 6px; }
.marca-panel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.marca-secao + .marca-secao {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.marca-secao__titulo {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

.marca-secao__hint {
    margin: 0 0 10px;
    font-size: 0.65rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.38);
}

.marca-vazio {
    margin: 0 0 8px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 10px 6px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.marca-cores-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.marca-cor-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.marca-cor-item__swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    cursor: pointer;
}

.marca-cor-item__info {
    flex: 1;
    min-width: 0;
}

.marca-cor-item__nome {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marca-cor-item__hex {
    display: block;
    font-size: 0.62rem;
    font-family: 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.38);
}

.marca-cor-item__acoes {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.marca-cor-item__btn {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    transition: background 0.1s, color 0.1s;
}

.marca-cor-item__btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.marca-cor-item__btn--del:hover { background: rgba(231, 76, 60, 0.22); color: #e74c3c; }

.marca-add-cor {
    display: flex;
    align-items: center;
    gap: 6px;
}

.marca-cor-picker {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    padding: 0;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.marca-cor-nome {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    outline: none;
}

.marca-cor-nome:focus { border-color: rgba(107, 63, 160, 0.55); }

.marca-btn-add,
.marca-btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(107, 63, 160, 0.45);
    border-radius: 8px;
    background: rgba(107, 63, 160, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.marca-btn-add:hover,
.marca-btn-upload:hover {
    background: rgba(107, 63, 160, 0.32);
    border-color: rgba(107, 63, 160, 0.65);
}

.marca-btn-upload {
    width: 100%;
    margin-top: 8px;
}

.marca-logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}

.marca-logo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    cursor: grab;
    transition: border-color 0.12s, background 0.12s, transform 0.1s;
}

.marca-logo-card:hover {
    border-color: rgba(107, 63, 160, 0.45);
    background: rgba(107, 63, 160, 0.12);
    transform: translateY(-1px);
}

.marca-logo-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.marca-logo-card__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.marca-logo-card__nome {
    width: 100%;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marca-logo-card__del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s;
}

.marca-logo-card:hover .marca-logo-card__del { opacity: 1; }
.marca-logo-card__del:hover { background: rgba(231, 76, 60, 0.75); color: #fff; }

.marca-logo-card:active,
.marca-logo-card.marca-logo-card--dragging {
    cursor: grabbing;
    opacity: 0.38;
}

/* Ghost offscreen de drag — nunca participa do layout da arte */
.canva-drag-ghost {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 72px;
    height: 72px;
    pointer-events: none;
    opacity: 0;
}

/* Fontes da marca — painel lateral */
.marca-fontes-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.marca-fonte-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--canva-border-sm);
}

.marca-fonte-item__amostra {
    font-size: 0.875rem;
    min-width: 52px;
    color: var(--canva-text);
}

.marca-fonte-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.marca-fonte-item__nome {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--canva-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marca-fonte-item__tipo {
    font-size: 0.625rem;
    color: var(--canva-text-faint);
}

.marca-fonte-item__del {
    border: none;
    background: transparent;
    color: var(--canva-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.marca-fonte-item__del:hover {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.marca-add-fonte {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.marca-fonte-select {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 28px 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--canva-border-md);
    background-color: var(--canva-bg-input);
    color: var(--canva-text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.76rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s, background-color 0.15s;
}

.marca-fonte-select:focus {
    border-color: rgba(107, 63, 160, 0.65);
    background-color: rgba(107, 63, 160, 0.09);
}

.marca-fonte-select option {
    background: #2a2a42;
    color: #fff;
}

.ctx-marca-fontes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--canva-border-sm);
}

.ctx-marca-fontes__label {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--canva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ctx-marca-fontes__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctx-marca-fonte-btn {
    padding: 5px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--canva-border-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--canva-text);
    font-size: 0.75rem;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctx-marca-fonte-btn:hover {
    border-color: rgba(107, 63, 160, 0.55);
    background: rgba(107, 63, 160, 0.12);
}

.ctx-font-item--marca {
    border-left: 2px solid rgba(107, 63, 160, 0.65);
}

/* ── Cores da marca nos seletores contextuais ─────────────────────── */
.ctx-marca-cores {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.ctx-marca-cores__label {
    margin: 0 0 6px;
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ctx-marca-cores__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ctx-marca-swatch {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
}

.ctx-marca-swatch:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.35);
}

/* ── Arraste: páginas (barra principal) ───────────────────────────── */
.canva-page-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 100%;
    min-height: 48px;
    color: rgba(255, 255, 255, 0.22);
    cursor: grab;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.12s;
}

.canva-page-drag:active { cursor: grabbing; }

.canva-page-item:hover .canva-page-drag { color: rgba(255, 255, 255, 0.5); }

.canva-page-item--dragging {
    opacity: 0.55;
}

.canva-page-item--over {
    box-shadow: inset 0 -2px 0 rgba(107, 63, 160, 0.85);
}


/* ── Botão Remover Fundo ─────────────────────────────────────────── */
.ctx-btn-rmbg {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--canva-accent-border);
    border-radius: 8px;
    background: var(--canva-accent-soft);
    color: #c9a8e8;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: left;
}
.ctx-btn-rmbg:hover:not(:disabled) {
    background: rgba(107, 63, 160, 0.32);
    border-color: rgba(107, 63, 160, 0.65);
    color: #e0cff0;
}
.ctx-btn-rmbg:disabled { cursor: wait; opacity: 0.6; }

.ctx-btn-rmbg[data-estado="carregando"] {
    border-color: rgba(107, 63, 160, 0.5);
    background: rgba(107, 63, 160, 0.14);
}
.ctx-btn-rmbg[data-estado="carregando"] .ctx-btn-rmbg__icon { display: none; }
.ctx-btn-rmbg__spinner {
    display: none;
    animation: rmbg-spin 0.85s linear infinite;
}
.ctx-btn-rmbg[data-estado="carregando"] .ctx-btn-rmbg__spinner { display: block; }

.ctx-btn-rmbg[data-estado="concluido"] {
    background: rgba(39, 174, 96, 0.12);
    border-color: rgba(39, 174, 96, 0.38);
    color: #27ae60;
}
.ctx-btn-rmbg[data-estado="erro"] {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.35);
    color: #e74c3c;
}

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

.ctx-hint {
    margin: 5px 0 0;
    font-size: 0.67rem;
    color: var(--canva-text-faint);
    line-height: 1.4;
}

/* ── Drag-and-drop: canvas recebe elemento ───────────────────────── */
.canva-stage-scroll.drag-sobre {
    outline: 2.5px dashed rgba(107, 63, 160, 0.55);
    outline-offset: -3px;
    background-color: #1a1a2e;
}
.canva-stage-scroll.drag-sobre .canva-stage {
    box-shadow: 0 0 0 2px rgba(107, 63, 160, 0.3), 0 8px 40px rgba(0,0,0,.5);
}

/* ── Thumbnails: estados de drag ─────────────────────────────────── */
.lib-thumb { cursor: grab; }
.lib-thumb:active { cursor: grabbing; }
.lib-thumb--dragging { opacity: 0.35; cursor: grabbing !important; }

/* ── Biblioteca de Formas ───────────────────────────────────────── */
.clp-formas-hint {
    margin: 0;
    padding: 6px 12px 8px;
    font-size: 0.67rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
}

.lib-formas-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    padding: 4px 10px 12px;
    min-height: 0;
    align-content: start;
}
.lib-formas-grid::-webkit-scrollbar       { width: 3px; }
.lib-formas-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.lib-forma-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.1s;
    font-family: 'Poppins', sans-serif;
}
.lib-forma-btn:hover {
    border-color: rgba(107, 63, 160, 0.55);
    background: rgba(107, 63, 160, 0.12);
    transform: translateY(-1px);
}
.lib-forma-btn:active { transform: translateY(0); }
.lib-forma-btn--dragging {
    opacity: 0.45;
    border-color: rgba(107, 63, 160, 0.55);
}

.lib-forma-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.lib-forma-btn__label {
    font-size: 0.62rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.65);
}

.lib-formas-categoria {
    grid-column: 1 / -1;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    padding: 8px 2px 2px;
    margin-top: 2px;
}
.lib-formas-categoria:first-child { margin-top: 0; padding-top: 2px; }

.ctx-btn-compacto {
    flex: 1;
    min-width: 0;
    padding: 5px 8px !important;
    font-size: 0.62rem !important;
    white-space: nowrap;
}

/* ── Menu de contexto do canvas ──────────────────────────────────── */
.canva-ctx-menu {
    position: fixed;
    z-index: 10050;
    min-width: 196px;
    padding: 5px 0;
    background: #1e1e24;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    font-family: 'Poppins', sans-serif;
}

.canva-ctx-menu__item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}

.canva-ctx-menu__item--com-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.canva-ctx-menu__item-label {
    flex: 1;
    min-width: 0;
}

.canva-ctx-menu__badge-ia {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #7c4dbd 0%, #5b2d91 100%);
    color: #fff;
    box-shadow: 0 1px 4px rgba(107, 63, 160, 0.45);
}

.canva-ctx-menu__item:hover:not(.canva-ctx-menu__item--disabled) {
    background: rgba(107, 63, 160, 0.22);
}

.canva-ctx-menu__item--disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

.canva-ctx-menu__item--perigo {
    color: #e74c3c;
}

.canva-ctx-menu__item--perigo:hover:not(.canva-ctx-menu__item--disabled) {
    background: rgba(231, 76, 60, 0.15);
}

.canva-ctx-menu__item--lock {
    display: flex;
    align-items: center;
    gap: 8px;
}

.canva-ctx-menu__item--lock.is-locked {
    color: #f1948a;
}

.canva-ctx-menu__item-icon--lock {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.canva-ctx-menu__item--lock.is-locked .canva-ctx-menu__item-icon--lock {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-1' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7.5-1' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.canva-ctx-menu__sep {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Seletor visual de fontes (painel de texto) ──────────────────── */
.ctx-section--fontes {
    min-width: 0;
    overflow-x: hidden;
}

.ctx-text-font-ativa {
    margin-bottom: 8px;
    padding: 10px 11px;
    border-radius: 8px;
    border: 1px solid rgba(107, 63, 160, 0.45);
    background: rgba(107, 63, 160, 0.12);
    min-width: 0;
    overflow: hidden;
}

.ctx-text-font-ativa--erro {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.08);
}

.ctx-text-font-ativa__amostra {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.96);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctx-text-font-ativa__nome {
    display: block;
    width: 100%;
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.52);
    font-family: 'Poppins', sans-serif !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctx-text-font-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--canva-border-md, rgba(255,255,255,.12));
    background: var(--canva-bg-input, rgba(255,255,255,.06));
    color: var(--canva-text, rgba(255,255,255,.88));
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    outline: none;
    transition: border-color 0.15s;
}

.ctx-text-font-search::placeholder {
    color: var(--canva-text-faint, rgba(255,255,255,.38));
}

.ctx-text-font-search:focus {
    border-color: rgba(107, 63, 160, 0.65);
}

.ctx-text-font-list-wrap {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.ctx-text-font-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0;
    min-width: 0;
}

.ctx-font-empty {
    margin: 0;
    padding: 10px 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}

.ctx-text-font-list::-webkit-scrollbar       { width: 3px; }
.ctx-text-font-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.ctx-font-secao {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    padding: 6px 4px 2px;
}

.ctx-font-secao--sep {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ctx-font-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 9px 7px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.12s, background 0.12s;
}

.ctx-font-item:hover {
    border-color: rgba(107, 63, 160, 0.45);
    background: rgba(107, 63, 160, 0.1);
}

.ctx-font-item--ativo {
    border-color: rgba(107, 63, 160, 0.75);
    background: rgba(107, 63, 160, 0.18);
}

.ctx-font-item__amostra {
    display: block;
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctx-font-item__nome {
    display: block;
    width: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.52);
    font-family: 'Poppins', sans-serif !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctx-text-fontes-admin .ctx-input {
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid var(--canva-border-md, rgba(255,255,255,.12));
    background: var(--canva-bg-input, rgba(255,255,255,.06));
    color: var(--canva-text, rgba(255,255,255,.88));
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
}

.ctx-text-fontes-admin .ctx-input:focus {
    outline: none;
    border-color: rgba(107, 63, 160, 0.65);
}

/* Edição inline de texto no canvas (textarea oculta do Fabric IText) */
.canva-stage textarea,
.canvas-container textarea {
    background: rgba(34, 34, 59, 0.96) !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 2px solid rgba(107, 63, 160, 0.88) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    padding: 4px 6px !important;
    outline: none !important;
}

/* ── Barra de páginas do Canva ───────────────────────────────────── */
.canva-pages-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.22);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    min-height: 72px;
}

.canva-pages-scroll {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    padding: 2px 0;
}
.canva-pages-scroll::-webkit-scrollbar       { height: 4px; }
.canva-pages-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 2px; }

.canva-page-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.12s, background 0.12s;
}

.canva-page-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.canva-page-item:hover { background: rgba(255, 255, 255, 0.05); }
.canva-page-item--ativo {
    border-color: rgba(107, 63, 160, 0.75);
    background: rgba(107, 63, 160, 0.12);
}

.canva-page-thumb {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.canva-page-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.canva-page-thumb__num {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.35);
}

.canva-page-nome-input {
    width: 100%;
    max-width: 72px;
    padding: 2px 4px;
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    outline: none;
    transition: border-color 0.12s, background 0.12s;
    cursor: text;
}

.canva-page-nome-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.canva-page-nome-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.canva-page-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canva-page-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canva-page-item:hover .canva-page-del {
  opacity: 1;
}

.canva-page-del:hover {
  background: rgba(231, 76, 60, 1);
  transform: scale(1.1);
}

.canva-page-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 58px;
    height: 58px;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.canva-page-add:hover:not(:disabled) {
    border-color: rgba(107, 63, 160, 0.55);
    color: rgba(255, 255, 255, 0.85);
    background: rgba(107, 63, 160, 0.1);
}
.canva-page-add:disabled { opacity: 0.35; cursor: not-allowed; }

.canva-pages-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    min-width: 36px;
    text-align: center;
}

/* ── Tamanho da arte (painel contextual) ─────────────────────────── */
.ctx-section--tamanho { margin-top: 4px; }

.ctx-art-dim-atual {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--canva-text-muted);
}

.ctx-bg-tipo-row {
    display: flex;
    gap: 6px;
}

.ctx-bg-tipo-btn {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid var(--canva-border-md);
    border-radius: 8px;
    background: var(--canva-bg-input);
    color: var(--canva-text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.ctx-bg-tipo-btn:hover {
    border-color: var(--canva-accent-border);
}

.ctx-bg-tipo-btn.ativo {
    border-color: var(--canva-accent-border);
    background: var(--canva-accent-soft);
}

.ctx-grad-colors {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ctx-preset-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.ctx-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--canva-border-md);
    border-radius: 8px;
    background: var(--canva-bg-input);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s;
    font-family: 'Poppins', sans-serif;
}
.ctx-preset-btn:hover {
    border-color: var(--canva-accent-border);
    background: var(--canva-accent-soft);
}
.ctx-preset-btn--ativo {
    border-color: var(--canva-accent-border);
    background: var(--canva-accent-soft);
}

.ctx-preset-btn__label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--canva-text);
}
.ctx-preset-btn__sub {
    font-size: 0.65rem;
    color: var(--canva-text-faint);
}

.ctx-label--sm {
    font-size: 0.68rem !important;
    margin-bottom: 5px !important;
}

.ctx-dim-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ctx-number--dim {
    width: 70px !important;
    padding: 5px 6px;
    font-size: 0.72rem;
}

/* ────────────────────────────────────────────────────────────────────
   Modal de Exportação PNG (classes próprias — evita conflito com .canva-modal)
──────────────────────────────────────────────────────────────────── */
.canva-export-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;

  /* Herda paleta escura mesmo fora de .creator-screen--canva */
  --canva-bg-panel:     #22223b;
  --canva-bg-input:     rgba(255, 255, 255, 0.06);
  --canva-border:       rgba(255, 255, 255, 0.08);
  --canva-border-md:    rgba(255, 255, 255, 0.12);
  --canva-text:         rgba(255, 255, 255, 0.88);
  --canva-text-muted:   rgba(255, 255, 255, 0.55);
  --canva-text-faint:   rgba(255, 255, 255, 0.38);
  --canva-accent-soft:  rgba(107, 63, 160, 0.22);
  --canva-accent-border:rgba(107, 63, 160, 0.45);
}

.canva-export-modal[hidden] {
  display: none !important;
}

.canva-export-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(4px);
}

.canva-export-modal__content {
  position: relative;
  z-index: 1;
  background: var(--canva-bg-panel);
  border: 1px solid var(--canva-border-md);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 500px;
  max-height: min(90vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--canva-text);
}

.canva-export-modal__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--canva-border);
  flex-shrink: 0;
}

.canva-export-modal__titulo {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--canva-text);
  margin: 0;
}

.canva-export-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.canva-export-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--canva-border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.12);
}

.canva-export-modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.canva-export-modal-btn--primario {
  background: var(--purple);
  color: #ffffff;
}

.canva-export-modal-btn--primario:hover {
  background: var(--purple-hover);
  transform: translateY(-1px);
}

.canva-export-modal-btn--secundario {
  background: var(--canva-bg-input);
  color: var(--canva-text);
  border: 1px solid var(--canva-border-md);
}

.canva-export-modal-btn--secundario:hover {
  background: rgba(255, 255, 255, 0.1);
}

.export-section {
  margin-bottom: 24px;
}

.export-section:last-child {
  margin-bottom: 0;
}

.export-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--canva-text-muted);
  margin-bottom: 10px;
}

.export-label-hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--canva-text-faint);
}

.export-quality-info {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--canva-text-muted, rgba(255, 255, 255, 0.55));
}

.export-quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Modal Régua ─────────────────────────────────────────────────── */
.regua-modal-hint {
  margin: 0 0 10px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--canva-text-faint);
}

.regua-iman-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.regua-iman-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--canva-border-md);
  border-radius: 9px;
  background: var(--canva-bg-input);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.regua-iman-opt:has(input:checked) {
  border-color: rgba(107, 63, 160, 0.55);
  background: rgba(107, 63, 160, 0.14);
}

.regua-iman-opt input { flex-shrink: 0; margin-top: 2px; accent-color: var(--purple); }

.regua-iman-opt__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.regua-iman-opt__label strong {
  font-size: 0.8rem;
  color: var(--canva-text);
}

.regua-iman-opt__label small {
  font-size: 0.68rem;
  color: var(--canva-text-faint);
  line-height: 1.35;
}

.regua-acoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.regua-acao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--canva-border-md);
  border-radius: 8px;
  background: var(--canva-bg-input);
  color: var(--canva-text);
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.regua-acao-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(107, 63, 160, 0.45);
}

.regua-acao-btn--perigo:hover {
  border-color: rgba(231, 76, 60, 0.55);
  background: rgba(231, 76, 60, 0.12);
  color: #ffb4aa;
}

.regua-acao-btn .lucide,
.regua-acao-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.regua-guias-contagem {
  margin: 10px 0 0;
  font-size: 0.72rem;
  color: var(--canva-text-muted);
  text-align: center;
}

.export-quality-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--canva-border-md);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--canva-bg-input);
}

.export-quality-opt:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.export-quality-opt input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  cursor: pointer;
  flex-shrink: 0;
}

.export-quality-opt input[type="radio"]:checked ~ .export-quality-label {
  color: #c9a8e8;
}

.export-quality-opt:has(input:checked) {
  border-color: var(--canva-accent-border);
  background: var(--canva-accent-soft);
}

.export-quality-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.export-quality-label strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--canva-text);
}

.export-quality-label small {
  font-size: 0.75rem;
  color: var(--canva-text-faint);
}

.export-paginas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
}

.export-page-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--canva-border-md);
  border-radius: 8px;
  cursor: default;
  transition: all 0.2s ease;
  background: var(--canva-bg-input);
}

.export-page-item--dragging {
  opacity: 0.45;
}

.export-page-item--over {
  border-color: var(--canva-accent-border);
  box-shadow: 0 0 0 1px var(--canva-accent-border);
}

.export-page-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  color: var(--canva-text-faint);
  cursor: grab;
  touch-action: none;
}

.export-page-drag:active {
  cursor: grabbing;
}

.export-page-drag svg {
  display: block;
}

.export-page-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.export-page-item:has(input:checked) {
  background: var(--canva-accent-soft);
  border-color: var(--canva-accent-border);
}

.export-page-check {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  cursor: pointer;
  flex-shrink: 0;
}

.export-page-thumb {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--canva-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.export-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.export-page-num {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--canva-text-faint);
}

.export-page-nome {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--canva-text);
  flex: 1;
}

/* ────────────────────────────────────────────────────────────────────
   Indicador e Painel de Downloads
──────────────────────────────────────────────────────────────────── */
.canva-download-indicator {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  --canva-bg-panel:     #22223b;
  --canva-bg-elevated:  #2a2a42;
  --canva-border-md:    rgba(255, 255, 255, 0.12);
  --canva-text:         rgba(255, 255, 255, 0.88);
  --canva-text-muted:   rgba(255, 255, 255, 0.55);
  background: var(--canva-bg-panel);
  border: 1px solid var(--canva-border-md);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  z-index: 9000;
  color: var(--canva-text-muted);
}

.canva-download-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  background: var(--canva-bg-elevated);
  color: var(--canva-text);
}

.canva-download-indicator svg {
  flex-shrink: 0;
}

.canva-download-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--purple);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--canva-bg-panel);
}

.canva-download-badge--ativo {
  animation: pulse-badge 1.5s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.canva-downloads-painel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 360px;
  max-height: 400px;
  --canva-bg-panel:     #22223b;
  --canva-bg-input:     rgba(255, 255, 255, 0.06);
  --canva-border:       rgba(255, 255, 255, 0.08);
  --canva-border-md:    rgba(255, 255, 255, 0.12);
  --canva-text:         rgba(255, 255, 255, 0.88);
  --canva-text-faint:   rgba(255, 255, 255, 0.38);
  background: var(--canva-bg-panel);
  border: 1px solid var(--canva-border-md);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9500;
}

.canva-downloads-painel[hidden] {
  display: none;
}

.downloads-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--canva-border);
  background: rgba(0, 0, 0, 0.15);
}

.downloads-titulo {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--canva-text);
}

.downloads-lista {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.downloads-vazio {
  text-align: center;
  padding: 32px 16px;
  color: var(--canva-text-faint);
  font-size: 0.85rem;
  margin: 0;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--canva-bg-input);
  border: 1px solid var(--canva-border);
  transition: all 0.2s ease;
}

.download-item:last-child {
  margin-bottom: 0;
}

.download-item--processando {
  background: rgba(59, 130, 246, 0.05);
  border-color: #93c5fd;
}

.download-item--concluido {
  background: rgba(34, 197, 94, 0.05);
  border-color: #86efac;
}

.download-item--erro {
  background: rgba(239, 68, 68, 0.05);
  border-color: #fca5a5;
}

.download-icone {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.download-info {
  flex: 1;
  min-width: 0;
}

.download-nome {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--canva-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.download-status {
  font-size: 0.75rem;
  color: var(--canva-text-faint);
}

.download-item--processando .download-status {
  color: #3b82f6;
  font-weight: 500;
}

.download-item--concluido .download-status {
  color: #22c55e;
  font-weight: 500;
}

.download-item--erro .download-status {
  color: #ef4444;
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────────
   Fim dos estilos de Canva
──────────────────────────────────────────────────────────────────── */

#ctx-art-w,
#ctx-art-h {
    width: 70px !important;
    min-width: 70px !important;
}
.ctx-dim-sep {
    font-size: 0.75rem;
    color: var(--canva-text-faint);
    flex-shrink: 0;
}

.creator-screen--canva .canva-autosave {
    background: rgba(125, 206, 160, 0.12);
    border: 1px solid rgba(125, 206, 160, 0.28);
}

.creator-screen--canva .canva-autosave .editor-autosave__label {
    color: #9be7b5;
}

.creator-screen--canva .canva-autosave .editor-autosave__icon {
    color: #9be7b5;
}

.ctx-btn-dim-aplicar {
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(107, 63, 160, 0.85);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}
.ctx-btn-dim-aplicar:hover { background: #6B3FA0; }

.canva-tool-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Cursores do MC Creator: ver creator-cursors.css (body.mc-creator) */

/* ── Área do Canvas (centro) ─────────────────────────────────────── */
.canva-stage-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Área de rolagem ao redor do canvas */
.canva-stage-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
    background-color: var(--canva-bg-deep);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.025) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.025) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.025) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

/* Wrapper interno: centraliza quando menor, permite scroll completo quando ampliado */
.canva-stage-scroll__inner {
    display: flex;
    min-width: 100%;
    min-height: 100%;
    padding: 32px;
    box-sizing: border-box;
}

.canva-stage-scroll__inner > .canva-stage {
    margin: auto;
}

.canva-stage-scroll.canva-stage-scroll--panning {
    cursor: grabbing;
    user-select: none;
}

.canva-stage-scroll.canva-stage-scroll--pan-ready {
    cursor: grab;
}

.canva-stage-scroll.canva-stage-scroll--posicionando-guia,
.canva-stage-scroll.canva-stage-scroll--posicionando-guia .upper-canvas,
.canva-stage-scroll.canva-stage-scroll--posicionando-guia .lower-canvas {
    cursor: crosshair !important;
}

.canva-stage-scroll::-webkit-scrollbar         { width: 6px; height: 6px; }
.canva-stage-scroll::-webkit-scrollbar-track   { background: transparent; }
.canva-stage-scroll::-webkit-scrollbar-thumb   { background: rgba(255,255,255,.14); border-radius: 3px; }

/* Container do canvas Fabric.js */
.canva-stage {
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    overflow: hidden;
    line-height: 0;
}

/* Indicador visual de fundo transparente na arte */
.canva-stage--transparent-bg {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #d8d8dc 25%, transparent 25%),
        linear-gradient(-45deg, #d8d8dc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d8d8dc 75%),
        linear-gradient(-45deg, transparent 75%, #d8d8dc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.canva-stage canvas { display: block; }

/* Feedback rápido ao adicionar/colar texto (pré-carrega fonte) */
.canva-texto-preload {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(14, 14, 18, 0.48);
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
}

.canva-texto-preload .creator-app-loader__spinner {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.ctx-aviso-invisivel {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #8a5a00;
    background: rgba(255, 193, 7, 0.14);
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.ctx-aviso-invisivel--ativo {
    animation: ctx-aviso-pulse 1.6s ease-in-out infinite;
}

@keyframes ctx-aviso-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

.ctx-toggle-row--spaced {
    margin-top: 10px;
}

/* Overlay de guias — acima do upper-canvas do Fabric, sem capturar cliques */
.canva-guias-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 3;
}

/* Overlay de edição de slot — acima do canvas, sem capturar cliques */
.canva-slot-edit-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 4;
}

/* ── Loader do Canva ─────────────────────────────────────────────── */
.canva-editor-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(26, 26, 46, 0.97);
    z-index: 120;
    text-align: center;
    padding: 2rem;
    transition: opacity 0.28s ease;
    pointer-events: auto;
}

body.canva-projeto-carregando .canva-workspace > :not(#canva-loader) {
    pointer-events: none;
    user-select: none;
}

.canva-editor-loader--saindo {
    opacity: 0;
    pointer-events: none;
}

.canva-loader-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.canva-loader-hint {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.38);
}

#canva-loader[hidden] { display: none !important; }


/* ── Barra de Zoom ───────────────────────────────────────────────── */
.canva-zoom-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    justify-content: center;
}

.canva-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 5px;
    white-space: nowrap;
}

.canva-zoom-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.canva-zoom-btn .lucide,
.canva-zoom-btn svg   { width: 13px; height: 13px; flex-shrink: 0; }

.canva-zoom-label {
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    min-width: 50px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}


/* ── Painel Contextual (direita) ─────────────────────────────────── */
.canva-context-panel {
    width: var(--canva-context-w, 252px);
    flex-shrink: 0;
    background: var(--canva-bg-panel);
    border-left: 1px solid var(--canva-border);
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--canva-text);
    min-width: 0;
}

.ctx-panel {
    padding: 0;
    min-width: 0;
    overflow-x: hidden;
}

.ctx-panel__header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--canva-text-muted);
    border-bottom: 1px solid var(--canva-border);
    position: sticky;
    top: 0;
    background: var(--canva-bg-panel);
    z-index: 1;
}

.ctx-section {
    padding: 11px 14px;
    border-bottom: 1px solid var(--canva-border);
    min-width: 0;
}

.ctx-section:last-child { border-bottom: none; }

.ctx-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--canva-text-muted);
    margin-bottom: 6px;
}

.ctx-label--sm {
    font-size: 0.68rem;
    margin-top: 8px;
    margin-bottom: 5px;
}

/* Blocos recolhíveis (sombra, borda, etc.) */
.ctx-details {
    border-bottom: 1px solid var(--canva-border);
}

.ctx-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--canva-text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.12s;
}

.ctx-details__summary::-webkit-details-marker { display: none; }

.ctx-details__summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--canva-text-faint);
    border-bottom: 1.5px solid var(--canva-text-faint);
    transform: rotate(45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
    margin-left: 8px;
}

.ctx-details[open] .ctx-details__summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.ctx-details__summary:hover {
    color: var(--canva-text);
}

.ctx-details__body {
    padding: 0 14px 11px;
}

.ctx-case-btn {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Toggle de fundo transparente */
.ctx-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.ctx-toggle-check {
    width: 16px;
    height: 16px;
    accent-color: var(--purple);
    cursor: pointer;
    flex-shrink: 0;
}

.ctx-toggle-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--canva-text);
}

.ctx-section--disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Color picker row */
.ctx-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Creator / Canva — seletores de cor circulares */
.ctx-color-input,
.marca-cor-picker {
    -webkit-appearance: none;
    appearance: none;
}

.ctx-color-input {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-md);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
    overflow: hidden;
}

.ctx-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.ctx-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.ctx-color-input::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.marca-cor-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.marca-cor-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.marca-cor-picker::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.ctx-color-hex {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--canva-text-muted);
    font-family: 'Courier New', monospace;
}

/* Select */
.ctx-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    background: var(--canva-bg-input);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--canva-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.ctx-select:focus { border-color: var(--purple); }

/* Range + number */
.ctx-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctx-range {
    flex: 1;
    accent-color: var(--purple);
    cursor: pointer;
    height: 4px;
}

.ctx-number {
    width: 52px;
    padding: 4px 6px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    text-align: center;
    outline: none;
    color: var(--canva-text);
    background: var(--canva-bg-input);
    transition: border-color 0.15s;
}

.ctx-number:focus { border-color: var(--purple); }

.ctx-range-val {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--canva-text-faint);
    min-width: 36px;
    text-align: right;
}

/* Grupos de botões (estilo, alinhamento) */
.ctx-btn-group { display: flex; gap: 4px; flex-wrap: wrap; }
.ctx-btn-group--stack { flex-direction: column; width: 100%; }
.ctx-btn-group--stack .ctx-btn-compacto { width: 100%; }

.ctx-style-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    background: var(--canva-bg-input);
    color: var(--canva-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ctx-style-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--canva-text); }
.ctx-style-btn.ativo { background: var(--canva-accent-soft); border-color: var(--canva-accent-border); color: #c9a8e8; }
.ctx-style-btn.misto { background: rgba(107, 63, 160, 0.12); border-color: rgba(107, 63, 160, 0.45); border-style: dashed; color: rgba(201, 168, 232, 0.85); opacity: 0.9; }

.ctx-color-input--mixed {
    opacity: 0.72;
    outline: 1px dashed rgba(107, 63, 160, 0.55);
    outline-offset: 2px;
}

.ctx-align-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    background: var(--canva-bg-input);
    color: var(--canva-text-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ctx-align-btn:hover { background: rgba(255,255,255,.1); color: var(--canva-text); }
.ctx-align-btn.ativo { background: var(--canva-accent-soft); border-color: var(--canva-accent-border); color: #c9a8e8; }

/* Posicionamento preciso (painel contextual) */
.ctx-posicao-bar {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--canva-border);
    flex-shrink: 0;
}

.ctx-pos-step-row {
    margin-bottom: 8px;
}

.ctx-posicao-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.ctx-posicao-grid__spacer { visibility: hidden; pointer-events: none; }

.ctx-pos-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    background: var(--canva-bg-input);
    color: var(--canva-text-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ctx-pos-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--canva-text);
    border-color: var(--canva-accent-border);
}

.ctx-pos-btn--full {
    width: 100%;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.canva-layer-item:not(.canva-layer-item--bg) {
    cursor: grab;
}

.canva-layer-item:not(.canva-layer-item--bg):active {
    cursor: grabbing;
}

/* Botões de ação */
.ctx-btn-secundario {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--canva-border-md);
    border-radius: 8px;
    background: var(--canva-bg-input);
    color: var(--canva-text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-align: left;
}

.ctx-btn-secundario:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }

.ctx-btn-perigo {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(231, 76, 60, 0.14);
    color: #f08070;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}

.ctx-btn-perigo:hover { background: rgba(231, 76, 60, 0.24); }

/* Dica de contexto */
.ctx-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 14px;
    font-size: 0.72rem;
    color: var(--canva-text-faint);
    line-height: 1.55;
}

.ctx-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--canva-text-faint); }

.ctx-hint--compact {
    padding: 0;
    margin: 6px 0 0;
    font-size: 0.68rem;
}

/* Recorte de imagem (Canva) */
.ctx-section--crop { border-bottom: 1px solid var(--canva-border); }

.ctx-crop-controls {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ctx-crop-actions {
    display: flex;
    gap: 6px;
}

.ctx-btn-crop-apply,
.ctx-btn-crop-cancel {
    flex: 1;
    padding: 7px 10px;
    border-radius: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.ctx-btn-crop-apply {
    border: 1px solid var(--purple);
    background: var(--purple);
    color: #fff;
}

.ctx-btn-crop-apply:hover { filter: brightness(1.05); }

.ctx-btn-crop-cancel {
    border: 1px solid var(--canva-border-md);
    background: var(--canva-bg-input);
    color: var(--canva-text-muted);
}

.ctx-btn-crop-cancel:hover { background: rgba(255,255,255,.1); }

.ctx-mask-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.ctx-mask-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 4px;
    border: 1px solid var(--canva-border-md);
    border-radius: 7px;
    background: var(--canva-bg-input);
    color: var(--canva-text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ctx-mask-btn span { line-height: 1.1; }

.ctx-mask-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }

.ctx-mask-btn.ativo {
    background: var(--canva-accent-soft);
    border-color: var(--canva-accent-border);
    color: #c9a8e8;
}

#ctx-img-crop-toggle.ativo {
    background: var(--canva-accent-soft);
    border-color: var(--canva-accent-border);
    color: #c9a8e8;
}

.canva-stage--crop-mode { cursor: grab; }
.canva-stage--crop-mode.canva-stage--crop-dragging { cursor: grabbing; }
.canva-stage--slot-edit-mode { cursor: grab; }
.canva-stage--slot-edit-mode.canva-stage--slot-edit-dragging { cursor: grabbing; }


/* ── Modal Minhas Artes ──────────────────────────────────────────── */
.canva-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}

.canva-modal-overlay[hidden] { display: none !important; }

.canva-modal {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canva-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.canva-modal__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.canva-modal__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.canva-arts-count {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--purple-light);
    color: var(--purple);
}

.canva-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}

.canva-modal__close:hover { background: var(--gray-100); color: var(--gray-900); }
.canva-modal__close .lucide { width: 16px; height: 16px; }

/* Grid de cards de arte */
.canva-arts-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 12px;
    align-content: start;
}

.canva-arts-vazio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--gray-500);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Card de arte salva */
.canva-art-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.canva-art-card:hover {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-light);
}

.canva-art-card__thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canva-art-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.canva-art-card__body { padding: 10px 12px; }

.canva-art-card__nome {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}

.canva-art-card__meta {
    font-size: 0.68rem;
    color: var(--gray-500);
    margin-bottom: 9px;
}

.canva-art-card__acoes { display: flex; gap: 6px; }

.canva-art-btn {
    flex: 1;
    padding: 5px 8px;
    border-radius: 7px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid var(--border-md);
}

.canva-art-btn--abrir {
    background: var(--purple);
    color: #fff;
    border-color: var(--purple);
}

.canva-art-btn--abrir:hover { background: var(--purple-hover); }

.canva-art-btn--del {
    background: var(--gray-50);
    color: var(--error);
    border-color: var(--border-md);
}

.canva-art-btn--del:hover { background: var(--error-light); border-color: var(--error); }

/* ── Creator Canva: admin-only controls ─────────────────────────────────── */
.canva-admin-only {
    display: none !important;
}
.canva-admin-only.canva-admin-only--visivel {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid #6B3FA0;
    background: rgba(107, 63, 160, 0.08);
    color: #6B3FA0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.canva-admin-only.canva-admin-only--visivel:hover {
    background: rgba(107, 63, 160, 0.14);
}

.canva-modelo-admin-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(240, 192, 64, 0.16);
    border: 1px solid rgba(240, 192, 64, 0.55);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.canva-modelo-admin-badge svg {
    color: #f5d76e;
    flex-shrink: 0;
}
.canva-modelo-admin-badge button {
    margin-left: 4px;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1;
    font-family: inherit;
}
.canva-modelo-admin-badge button:hover {
    color: #fff;
}

/* ── Creator Canva: diálogos padronizados ───────────────────────────────── */
.canva-dialogo-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.canva-dialogo-overlay--visivel { opacity: 1; }
.canva-dialogo-overlay--form .canva-dialogo { max-width: 520px; }

.canva-dialogo {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    font-family: 'Poppins', sans-serif;
    transform: translateY(8px);
    transition: transform 0.2s ease;
}
.canva-dialogo-overlay--visivel .canva-dialogo { transform: translateY(0); }

.canva-dialogo__icone {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 12px;
}
.canva-dialogo__icone--sucesso { background: rgba(39, 174, 96, 0.12); color: #27ae60; }
.canva-dialogo__icone--erro    { background: rgba(231, 76, 60, 0.12); color: #e74c3c; }
.canva-dialogo__icone--info    { background: rgba(107, 63, 160, 0.12); color: #6B3FA0; }

.canva-dialogo__titulo {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-align: center;
}
.canva-dialogo__subtitulo {
    margin: 0 0 18px;
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}
.canva-dialogo__mensagem {
    margin: 0 0 22px;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
    text-align: center;
}
.canva-dialogo__mensagem--multilinha { white-space: pre-line; }

.canva-dialogo__acoes {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.canva-dialogo__acoes--unica { justify-content: center; }
.canva-dialogo__acoes--coluna {
    flex-direction: column;
    align-items: stretch;
}

.canva-dialogo__btn {
    padding: 9px 20px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.canva-dialogo__btn--primario {
    background: #6B3FA0;
    color: #fff;
    border-color: #6B3FA0;
}
.canva-dialogo__btn--primario:hover { background: #5a3490; }
.canva-dialogo__btn--secundario {
    background: #fff;
    color: #555;
    border-color: #dee2e6;
}
.canva-dialogo__btn--secundario:hover { background: #f8f8f8; }
.canva-dialogo__btn--danger {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}
.canva-dialogo__btn--danger:hover { background: #cf4436; }
.canva-dialogo__btn--primary {
    background: #6B3FA0;
    color: #fff;
    border-color: #6B3FA0;
}
.canva-dialogo__btn--ghost {
    background: transparent;
    color: #888;
    border-color: transparent;
}
.canva-dialogo__btn--ghost:hover { color: #555; }

.canva-pub-form { display: grid; gap: 14px; margin-bottom: 20px; }
.canva-pub-field { display: flex; flex-direction: column; gap: 5px; }
.canva-pub-field span {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}
.canva-pub-field span small { font-weight: 400; color: #aaa; }
.canva-pub-field input,
.canva-pub-field textarea,
.canva-pub-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 13px;
    border: 1.5px solid #dee2e6;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.canva-pub-field input:focus,
.canva-pub-field textarea:focus,
.canva-pub-field select:focus { border-color: #6B3FA0; }
.canva-pub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.canva-pub-erro { color: #e74c3c; font-size: 12px; margin: 0; min-height: 16px; }

/* ── Creator Canva: painel Modelos ──────────────────────────────────────── */
.mod-filtros {
    flex-shrink: 0;
    padding-bottom: 4px;
}

.mod-filtros .lib-toolbar {
    padding-bottom: 4px;
}

.mod-filtros__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 6px;
}

.mod-filtro-select {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Poppins', sans-serif;
    font-size: 0.76rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='rgba(255,255,255,0.45)' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: border-color 0.15s, background 0.15s;
}
.mod-filtro-select:focus {
    border-color: rgba(107, 63, 160, 0.65);
    background-color: rgba(107, 63, 160, 0.09);
}
.mod-filtro-select option {
    background: #2a2a42;
    color: #fff;
}

.mod-status {
    flex-shrink: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding: 8px 12px;
    margin: 0;
}

.mod-lista-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mod-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mod-grid::-webkit-scrollbar       { width: 3px; }
.mod-grid::-webkit-scrollbar-track { background: transparent; }
.mod-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.mod-load-footer {
    flex-shrink: 0;
    padding: 6px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mod-card {
    position: relative;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
}
.mod-card:hover {
    border-color: rgba(107, 63, 160, 0.45);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}
.mod-card--rascunho { border-color: rgba(240, 192, 64, 0.55); }

.mod-card__preview {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.mod-card__frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--mod-aspect, 1);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mod-card--quadrado .mod-card__frame {
    max-height: 220px;
}

.mod-card--vertical .mod-card__frame {
    max-height: 260px;
    width: auto;
    max-width: 72%;
}

.mod-card--horizontal .mod-card__frame {
    max-height: 110px;
    min-height: 72px;
}

.mod-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: auto;
    transition: opacity 0.35s ease;
}

.mod-card__img--fade {
    opacity: 0.15;
}

.mod-card__page-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mod-card:hover .mod-card__page-badge {
    opacity: 1;
}

.mod-card__pages-count {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(107, 63, 160, 0.75);
    pointer-events: none;
}

.mod-card__placeholder {
    color: rgba(155, 125, 204, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mod-card__admin {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
    pointer-events: none;
}
.mod-card:hover .mod-card__admin {
    opacity: 1;
    pointer-events: auto;
}

.mod-card__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}
.mod-card__badge--rascunho {
    background: #f0c040;
    color: #333;
}

.mod-card__admin-btns {
    display: flex;
    gap: 4px;
    padding: 8px;
}
.mod-card__admin-btns button {
    flex: 1;
    font-size: 10px;
    padding: 5px 4px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.12);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.12s;
}
.mod-card__admin-btns button:hover { background: rgba(255,255,255,0.22); }
.mod-card__admin-btns .mod-btn-excluir {
    border-color: rgba(231, 76, 60, 0.5);
    color: #ffb4b4;
}

.mod-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mod-card__nome {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mod-card__dim {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.02em;
}

/* ── Wizard: nova arte (dashboard → Canva) ─────────────────────────────── */
.nova-arte-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    font-family: 'Poppins', system-ui, sans-serif;
}

.nova-arte-wizard {
    width: min(560px, 100%);
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: width 0.2s ease;
}

.nova-arte-wizard--modelos {
    width: min(720px, 100%);
}

.nova-arte-wizard__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.nova-arte-wizard__voltar,
.nova-arte-wizard__fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.nova-arte-wizard__voltar:hover,
.nova-arte-wizard__fechar:hover { background: #f3f0f8; color: #333; }

.nova-arte-wizard__titulo-wrap { flex: 1; min-width: 0; }
.nova-arte-wizard__titulo { margin: 0; font-size: 1.05rem; font-weight: 600; color: #1a1a1a; }
.nova-arte-wizard__subtitulo { margin: 4px 0 0; font-size: 0.8rem; color: #777; }

.nova-arte-wizard__corpo {
    padding: 18px 22px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.nova-arte-wizard__lead {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: #666;
    line-height: 1.45;
}

.nova-arte-wizard__opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nova-arte-wizard__opcao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 16px;
    border: 1.5px solid #e4e4e8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.nova-arte-wizard__opcao:hover {
    border-color: rgba(107, 63, 160, 0.45);
    background: #faf8ff;
    box-shadow: 0 4px 14px rgba(107, 63, 160, 0.08);
}

.nova-arte-wizard__opcao-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f3f0f8;
    color: #6B3FA0;
}
.nova-arte-wizard__opcao-icone--modelo { background: rgba(107, 63, 160, 0.1); }

.nova-arte-wizard__opcao-titulo { font-size: 0.88rem; font-weight: 600; color: #222; }
.nova-arte-wizard__opcao-desc { font-size: 0.74rem; color: #888; line-height: 1.35; }

.nova-arte-field { margin-bottom: 14px; }
.nova-arte-field--half { flex: 1; min-width: 0; }
.nova-arte-field__label {
    display: block;
    font-size: 0.74rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 6px;
}
.nova-arte-field__input,
.nova-arte-field__select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid #dee2e6;
    border-radius: 10px;
    font-size: 0.84rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    color: #222;
}
.nova-arte-field__input:focus,
.nova-arte-field__select:focus { border-color: #6B3FA0; }

.nova-arte-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.nova-arte-preset {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.15s;
}
.nova-arte-preset:hover { background: #f8f5ff; }
.nova-arte-preset--ativo {
    border-color: #6B3FA0;
    background: rgba(107, 63, 160, 0.06);
}

.nova-arte-preset__icone { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.nova-arte-preset__texto { display: flex; flex-direction: column; min-width: 0; }
.nova-arte-preset__label { font-size: 0.8rem; font-weight: 600; color: #222; }
.nova-arte-preset__sub { font-size: 0.68rem; color: #888; margin-top: 1px; }

.nova-arte-custom-fields__row { display: flex; gap: 12px; }

.nova-arte-wizard__acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.nova-arte-btn {
    padding: 9px 18px;
    border-radius: 8px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.nova-arte-btn--primario {
    border: none;
    background: #6B3FA0;
    color: #fff;
    font-weight: 500;
}
.nova-arte-btn--primario:hover { background: #5b3490; }
.nova-arte-btn--secundario:hover { background: #f8f5ff; border-color: rgba(107, 63, 160, 0.35); }

.nova-arte-mod-filtros { margin-bottom: 12px; }
.nova-arte-mod-filtros__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.nova-arte-mod-status {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    min-height: 1.2em;
}

.nova-arte-mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 42vh;
    overflow-y: auto;
    padding: 2px;
}

.nova-arte-modelo-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1.5px solid #e8e8ec;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.nova-arte-modelo-card:hover {
    border-color: rgba(107, 63, 160, 0.5);
    box-shadow: 0 4px 12px rgba(107, 63, 160, 0.1);
    transform: translateY(-1px);
}
.nova-arte-modelo-card--loading { opacity: 0.6; pointer-events: none; }
.nova-arte-modelo-card--rascunho { border-color: rgba(240, 192, 64, 0.65); }

.nova-arte-modelo-card__preview {
    position: relative;
    width: 100%;
    aspect-ratio: var(--card-aspect, 1);
    max-height: 120px;
    border-radius: 6px;
    overflow: hidden;
    background: #f4f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nova-arte-modelo-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.nova-arte-modelo-card__placeholder { color: #bbb; display: flex; align-items: center; justify-content: center; }

.nova-arte-modelo-card__badge,
.nova-arte-modelo-card__pages {
    position: absolute;
    top: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
}
.nova-arte-modelo-card__badge { left: 5px; background: rgba(240, 170, 40, 0.92); }
.nova-arte-modelo-card__pages { right: 5px; background: rgba(107, 63, 160, 0.82); }

.nova-arte-modelo-card__nome {
    font-size: 0.74rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nova-arte-modelo-card__dim { font-size: 0.64rem; color: #999; }

.nova-arte-mod-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.nova-arte-mod-load-status { margin: 0; font-size: 0.72rem; color: #999; }

@media (max-width: 560px) {
    .nova-arte-wizard__opcoes { grid-template-columns: 1fr; }
    .nova-arte-presets { grid-template-columns: 1fr; }
    .nova-arte-mod-filtros__row { grid-template-columns: 1fr; }
}


/* ── Botão "Precisa de ajuda" ─────────────────────────────────── */
.creator-btn--help {
    background: transparent;
    color: var(--purple);
    border: 1.5px solid var(--purple-light);
}
.creator-btn--help:hover {
    background: var(--purple-light);
    border-color: var(--purple);
    color: var(--purple);
}
.creator-btn--help i { color: currentColor; }


/* ── Onboarding de ajuda (primeiro acesso a cada ferramenta) ──── */
.creator-onb-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(26, 16, 44, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.creator-onb-overlay.is-visivel { opacity: 1; }

.creator-onb-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 18px;
    padding: 30px 30px 26px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(52, 32, 92, 0.28);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.creator-onb-overlay.is-visivel .creator-onb-card {
    transform: translateY(0) scale(1);
}

.creator-onb-fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}
.creator-onb-fechar:hover { background: var(--gray-100); color: var(--gray-800); }
.creator-onb-fechar i { width: 18px; height: 18px; }

.creator-onb-icone {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
}
.creator-onb-icone i { width: 28px; height: 28px; }
.creator-onb-icone--verde { background: linear-gradient(135deg, #15c200, #0f9400); }
.creator-onb-icone--azul { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.creator-onb-icone--gradiente { background: linear-gradient(135deg, #667eea, #764ba2); }

.creator-onb-titulo {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900);
}
.creator-onb-desc {
    margin: 0 0 14px;
    font-size: 0.86rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.creator-onb-pergunta {
    margin: 0 0 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-800);
}

.creator-onb-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.creator-onb-link {
    margin-top: 2px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--gray-500);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.16s;
}
.creator-onb-link:hover { color: var(--gray-700); }