:root {
  --marca: #ff5a1f;
  --marca-escura: #e0480f;
  --marca-suave: #fff1eb;
  --tinta: #14213d;
  --fundo-app: #f5f6fa;
  --borda: #e6e8ef;
  --superficie: #ffffff;
  --superficie-2: #f3f4f6;
  --superficie-3: #fafbfc;
  --moldura: #eef0f4;
  --palco: #e9ecf2;
  --texto: #1f2937;
  --texto-2: #4b5563;
  --texto-3: #6b7280;
  --texto-4: #9ca3af;
  --texto-forte: #374151;
  --tracejado: #d1d5db;
  --bs-primary: #ff5a1f;
  --bs-primary-rgb: 255, 90, 31;
  --bs-link-color: #e0480f;
  --bs-link-hover-color: #b83a0c;
  --bs-body-font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body { background: var(--fundo-app); color: var(--texto); }
h1, h2, h3, h4, h5, .fw-black { font-weight: 800; color: var(--tinta); letter-spacing: -0.01em; }
a { text-decoration: none; }

.btn-primary {
  --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca-escura); --bs-btn-hover-border-color: var(--marca-escura);
  --bs-btn-active-bg: #c9400c; --bs-btn-active-border-color: #c9400c;
  --bs-btn-disabled-bg: var(--marca); --bs-btn-disabled-border-color: var(--marca);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--marca-escura); --bs-btn-border-color: var(--marca);
  --bs-btn-hover-bg: var(--marca); --bs-btn-hover-border-color: var(--marca);
  --bs-btn-active-bg: var(--marca-escura); --bs-btn-active-border-color: var(--marca-escura);
  font-weight: 600;
}
.text-marca { color: var(--marca) !important; }
.bg-marca-suave { background: var(--marca-suave) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #ffb08f; box-shadow: 0 0 0 .2rem rgba(255, 90, 31, .18);
}
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }

.marca-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--tinta); font-size: 1.15rem; }
.marca-logo .selo {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  background: var(--marca); color: #fff; font-size: 1.1rem; transform: rotate(-6deg);
}
.marca-logo small { font-weight: 600; color: var(--marca); }

/* Layout da área logada */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
  width: 250px; flex: 0 0 250px; background: var(--superficie); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; padding: 1.25rem .9rem; position: sticky; top: 0; height: 100vh;
}
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: .75rem; color: var(--texto-2); border-radius: .6rem;
  padding: .6rem .8rem; font-weight: 600; font-size: .94rem;
}
.app-sidebar .nav-link .bi { font-size: 1.1rem; }
.app-sidebar .nav-link:hover { background: var(--fundo-app); color: var(--tinta); }
.app-sidebar .nav-link.active { background: var(--marca-suave); color: var(--marca-escura); }
.app-sidebar .nav-titulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-4); margin: 1rem .8rem .35rem; font-weight: 700; }
.app-main { flex: 1 1 auto; min-width: 0; }
.app-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 1010;
}
.app-conteudo { padding: 1.75rem 1.5rem 3rem; max-width: 1320px; }
@media (max-width: 991.98px) {
  .app-sidebar { display: none; }
  .app-conteudo { padding: 1.25rem 1rem 3rem; }
  .app-topbar { padding: .75rem 1rem; }
}

.card { border: 1px solid var(--borda); border-radius: .9rem; box-shadow: 0 1px 2px rgba(20, 33, 61, .04); }
.card-header { background: var(--superficie); border-bottom: 1px solid var(--borda); font-weight: 700; border-radius: .9rem .9rem 0 0 !important; }
.table > :not(caption) > * > * { padding: .75rem .9rem; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 700; background: var(--superficie-3); }

.kpi { padding: 1.1rem 1.25rem; }
.kpi .rotulo { font-size: .78rem; color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 1.7rem; font-weight: 800; color: var(--tinta); }
.kpi .icone { width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: grid; place-items: center; font-size: 1.25rem; }

/* Cards de encarte/modelo */
.encarte-item { transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; }
.encarte-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 33, 61, .12); }
.encarte-item .enc-mini { border-radius: 0; background: var(--moldura); }
.encarte-item .mini-moldura { background: var(--moldura); padding: .9rem; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.encarte-item .mini-moldura .enc-mini { width: 100%; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); border-radius: 2px; }
.encarte-item .mini-moldura.paisagem .enc-mini { width: 100%; }
.encarte-item .mini-moldura.retrato .enc-mini { width: 72%; }
.badge-formato { background: var(--tinta); color: #fff; font-weight: 600; }

.nova-opcao { border: 2px dashed var(--tracejado); border-radius: .9rem; padding: 1rem; cursor: pointer; text-align: center; background: var(--superficie); height: 100%; transition: .15s; }
.nova-opcao:hover, .btn-check:checked + .nova-opcao { border-color: var(--marca); background: var(--marca-suave); }
.nova-opcao .folha-icone { margin: 0 auto .5rem; background: #fff; border: 2px solid var(--tinta); border-radius: 3px; }

/* Autenticação */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-arte {
  background: radial-gradient(circle at 20% 20%, #ff8a5c 0, transparent 40%), linear-gradient(135deg, #ff5a1f, #d63d0a 60%, #14213d);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.auth-arte h2 { color: #fff; font-size: 2.3rem; line-height: 1.1; }
.auth-arte .marca-logo { color: #fff; }
.auth-arte .marca-logo .selo { background: #fff; color: var(--marca); }
.auth-arte .marca-logo small { color: #ffe0d3; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--superficie); }
.auth-form .caixa { width: 100%; max-width: 440px; }
@media (max-width: 991.98px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-arte { display: none; }
}

/* Landing */
.hero { background: linear-gradient(180deg, var(--superficie) 0, var(--marca-suave) 100%); padding: 4.5rem 0 3.5rem; overflow: hidden; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.hero .destaque { color: var(--marca); }
.hero-vitrine { position: relative; height: 430px; }
.hero-vitrine .enc-mini { position: absolute; box-shadow: 0 20px 40px rgba(20, 33, 61, .25); border-radius: 4px; }
.hero-vitrine .enc-mini:nth-child(1) { width: 58%; left: 0; top: 30px; transform: rotate(-5deg); }
.hero-vitrine .enc-mini:nth-child(2) { width: 58%; right: 0; top: 0; transform: rotate(4deg); z-index: 2; }
@media (max-width: 991.98px) { .hero-vitrine { height: 330px; margin-top: 2rem; } }
.recurso .icone { width: 3rem; height: 3rem; border-radius: .8rem; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); font-size: 1.4rem; }
.plano { position: relative; }
.plano.destaque { border: 2px solid var(--marca); box-shadow: 0 16px 40px rgba(255, 90, 31, .18); }
.plano .preco { font-size: 2.6rem; font-weight: 800; color: var(--tinta); }
.plano ul { list-style: none; padding: 0; }
.plano li { padding: .3rem 0; }
.plano li::before { content: "✓"; color: var(--marca); font-weight: 800; margin-right: .5rem; }
.passo-numero { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-weight: 800; }

/* Editor */
.editor-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--palco); }
.editor-topo { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda); z-index: 20; }
.editor-topo .nome-encarte { border: 1px solid transparent; font-weight: 700; font-size: 1.02rem; max-width: 340px; }
.editor-topo .nome-encarte:hover { border-color: var(--borda); }
.editor-area { flex: 1 1 auto; display: flex; min-height: 0; }
.editor-painel { width: 400px; flex: 0 0 400px; background: var(--superficie); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.editor-abas { display: flex; border-bottom: 1px solid var(--borda); }
.editor-abas button { flex: 1; border: 0; background: none; padding: .7rem .25rem; font-size: .8rem; font-weight: 700; color: var(--texto-3); border-bottom: 3px solid transparent; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.editor-abas button .bi { font-size: 1.15rem; }
.editor-abas button.ativa { color: var(--marca-escura); border-bottom-color: var(--marca); }
.editor-secao { display: none; overflow-y: auto; padding: 1rem; flex: 1 1 auto; }
.editor-secao.ativa { display: block; }
.editor-secao .form-label { font-size: .8rem; font-weight: 700; color: var(--texto-2); margin-bottom: .25rem; }
.editor-palco { flex: 1 1 auto; position: relative; overflow: auto; min-width: 0; }
.editor-palco-interno { padding: 2rem; display: flex; align-items: flex-start; justify-content: center; min-height: 100%; }
.editor-escala { transform-origin: 0 0; }
.editor-escala-caixa { position: relative; box-shadow: 0 10px 40px rgba(20, 33, 61, .25); background: #fff; }
.editor-zoom { position: absolute; right: 1rem; bottom: 1rem; background: var(--superficie); border-radius: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); display: flex; align-items: center; padding: .2rem; z-index: 5; }
.editor-zoom button { border: 0; background: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; }
.editor-zoom button:hover { background: var(--fundo-app); }
.editor-zoom span { font-size: .8rem; font-weight: 700; min-width: 3.2rem; text-align: center; }
.salvando { font-size: .8rem; color: var(--texto-3); white-space: nowrap; }

.produto-item { border: 1px solid var(--borda); border-radius: .7rem; margin-bottom: .6rem; background: var(--superficie); }
.produto-item.aberto { border-color: #ffb08f; box-shadow: 0 0 0 3px rgba(255, 90, 31, .08); }
.produto-cabeca { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; cursor: pointer; }
.produto-cabeca .miniatura { width: 2.4rem; height: 2.4rem; border-radius: .5rem; background: var(--superficie-2) center / contain no-repeat; display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 auto; }
.produto-cabeca .info { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.produto-cabeca .info strong { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.produto-cabeca .info small { color: var(--marca-escura); font-weight: 700; }
.produto-cabeca .acoes { display: flex; gap: .1rem; }
.produto-cabeca .acoes button { border: 0; background: none; color: var(--texto-3); width: 1.9rem; height: 1.9rem; border-radius: .4rem; }
.produto-cabeca .acoes button:hover { background: var(--superficie-2); color: var(--tinta); }
.produto-corpo { display: none; padding: .2rem .7rem .8rem; border-top: 1px dashed var(--borda); }
.produto-item.aberto .produto-corpo { display: block; }
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: .2rem; max-height: 150px; overflow-y: auto; }
.emoji-grade button { border: 0; background: var(--superficie-2); border-radius: .4rem; font-size: 1.25rem; padding: .2rem 0; }
.emoji-grade button:hover { background: var(--marca-suave); }
.tema-opcao { border: 2px solid var(--borda); border-radius: .7rem; padding: .35rem; cursor: pointer; background: var(--superficie); text-align: center; font-size: .75rem; font-weight: 700; width: 100%; }
.tema-opcao.ativo { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 90, 31, .15); }
.tema-opcao .amostra { height: 42px; border-radius: .45rem; margin-bottom: .3rem; display: flex; overflow: hidden; }
.tema-opcao .amostra span { flex: 1; }
@media (max-width: 991.98px) {
  .editor-area { flex-direction: column-reverse; }
  .editor-painel { width: 100%; flex: 0 0 52vh; border-right: 0; border-top: 1px solid var(--borda); }
  .editor-palco { flex: 1 1 48vh; }
  .editor-palco-interno { padding: 1rem; }
  .editor-topo .nome-encarte { max-width: 150px; }
  .esconder-mobile { display: none !important; }
}

.vazio { text-align: center; padding: 3rem 1rem; color: var(--texto-3); }
.vazio .bi { font-size: 2.8rem; color: var(--tracejado); }

/* Etiquetas */
.tamanho-opcao {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .65rem .8rem;
  border: 1px solid var(--borda); border-radius: .6rem; background: var(--superficie); font-weight: 600; font-size: .9rem; color: var(--texto-forte);
}
.tamanho-opcao:hover { border-color: #ffb08f; }
.tamanho-opcao .marca { visibility: hidden; color: var(--marca); font-size: 1.1rem; }
.tamanho-opcao.ativo { border-color: var(--marca); background: var(--marca-suave); color: var(--tinta); }
.tamanho-opcao.ativo .marca { visibility: visible; }
.etq-item { border: 1px solid var(--borda); border-radius: .6rem; padding: .45rem; margin-bottom: .45rem; background: var(--superficie); }
.etq-item:focus-within { border-color: #ffb08f; box-shadow: 0 0 0 3px rgba(255, 90, 31, .08); }
.etq-lista-mini { background: var(--moldura); padding: 1rem; display: flex; align-items: center; justify-content: center; min-height: 150px; }

/* ===================== Tema escuro ===================== */
[data-bs-theme="dark"] {
  --marca-suave: #3a1f14;
  --tinta: #eef1f7;
  --fundo-app: #0e1014;
  --borda: #2a2f39;
  --superficie: #161920;
  --superficie-2: #1f232c;
  --superficie-3: #1a1e26;
  --moldura: #232833;
  --palco: #0a0c10;
  --texto: #e4e7ec;
  --texto-2: #c2c8d2;
  --texto-3: #98a1b0;
  --texto-4: #6b7385;
  --texto-forte: #d7dce4;
  --tracejado: #3a404c;
  --bs-body-bg: #0e1014;
  --bs-body-color: #e4e7ec;
  --bs-secondary-bg: #1f232c;
  --bs-tertiary-bg: #1a1e26;
  --bs-border-color: #2a2f39;
  --bs-link-color: #ff8a5c;
  --bs-link-hover-color: #ffb08f;
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background: var(--fundo-app); }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .card-footer.bg-white { background-color: var(--superficie) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--superficie-3) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--texto) !important; }
[data-bs-theme="dark"] .card { background-color: var(--superficie); box-shadow: none; }
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--superficie-2); --bs-btn-border-color: var(--borda); --bs-btn-color: var(--texto);
  --bs-btn-hover-bg: #2a2f39; --bs-btn-hover-border-color: #3a404c; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #323846; --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--texto-2); --bs-btn-border-color: #3a404c; }
[data-bs-theme="dark"] .text-bg-light { background-color: var(--superficie-2) !important; color: var(--texto) !important; }
[data-bs-theme="dark"] .badge-formato { background: var(--superficie-2); color: var(--texto); }
[data-bs-theme="dark"] .text-marca { color: #ff7a45 !important; }
[data-bs-theme="dark"] .app-sidebar .nav-link.active { color: #ff8a5c; }
[data-bs-theme="dark"] .editor-abas button.ativa { color: #ff8a5c; }
[data-bs-theme="dark"] .hero { background: linear-gradient(180deg, var(--fundo-app) 0, #24140e 100%); }
[data-bs-theme="dark"] .navbar.bg-white { border-color: var(--borda) !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--superficie-3); border-color: var(--borda); }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--superficie-2); }
[data-bs-theme="dark"] .alert-light { background-color: var(--superficie-2); border-color: var(--borda) !important; color: var(--texto-2); }
[data-bs-theme="dark"] .nova-opcao .folha-icone { border-color: var(--texto-3); }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; }
[data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .offcanvas { background-color: var(--superficie); }
[data-bs-theme="dark"] .etq-lista-mini, [data-bs-theme="dark"] .encarte-item .mini-moldura { background: var(--moldura); }

/* Botão de tema */
.btn-tema { width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center; padding: 0; }
.tema-flutuante { position: fixed; top: 1rem; right: 1rem; z-index: 1050; }

/* Assistente de IA */
.ia-cartao { background: linear-gradient(135deg, var(--marca-suave), var(--superficie) 60%); box-shadow: 0 0 0 1px var(--borda); }
.ia-exemplo { font-size: .78rem; max-width: 100%; white-space: normal; }