/* ============================================================
   Painel da Adoravi

   A identidade vem do ícone: roxo profundo com rosa e violeta. A cor
   forte aparece pouco e no lugar certo (a ação principal, o "ao vivo",
   o que precisa de você); o resto é calmo, com muito espaço e uma ação
   clara por linha.

   Pensado primeiro para o celular (o app instalado), depois o computador.
   ============================================================ */

/* ---------------- tokens ---------------- */
:root {
  --rosa: #FF2E93; --violeta: #7B3CF0; --roxo: #1F0240;
  --grad: linear-gradient(135deg, #FF2E93 0%, #B12FD6 52%, #7B3CF0 100%);
  --grad-escuro: radial-gradient(120% 140% at 0% 0%, #4A0F7A 0%, #2A0657 38%, #16032F 100%);

  --f: #F6F3FB; --s: #FFFFFF; --s2: #F1ECF8; --s3: #E9E2F4; --b: #E6DFF1; --t: #1A1029; --m: #6F6585;
  --ac: #1A1029; --act: #FFFFFF;
  --ok: #12A86B; --r: #E2364B; --a: #D98300; --azul: #3B6DF2;
  --sombra: 0 1px 2px rgb(31 2 64 / .04), 0 10px 30px -16px rgb(31 2 64 / .16);
  --sombra-forte: 0 2px 6px rgb(31 2 64 / .06), 0 28px 60px -24px rgb(31 2 64 / .32);
  --brilho: 0 10px 30px -10px rgb(255 46 147 / .55);
  --raio: 20px; --raio-p: 14px;
  --mola: cubic-bezier(.2, .8, .2, 1); --saida: cubic-bezier(.16, 1, .3, 1);
  --topo: 60px; --abas: 74px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --f: #0C0616; --s: #150C24; --s2: #1E1430; --s3: #281B3E; --b: #2B1F40; --t: #F3EEFB; --m: #A194B8;
    --ac: #F3EEFB; --act: #12081F;
    --ok: #36D399; --r: #FF5C70; --a: #FFB547; --azul: #7C9CFF;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -18px rgb(0 0 0 / .6);
    --sombra-forte: 0 2px 8px rgb(0 0 0 / .35), 0 30px 60px -24px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100svh; color: var(--t); font: 450 15px/1.5 Geist, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.006em;
  background:
    radial-gradient(900px 420px at 100% -10%, color-mix(in oklab, var(--violeta) 12%, transparent), transparent 70%),
    radial-gradient(700px 380px at -10% -10%, color-mix(in oklab, var(--rosa) 9%, transparent), transparent 70%),
    var(--f);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.ic { display: block; flex: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h1 { font-size: 1.6rem; font-weight: 750; }
h2 { font-size: 1.12rem; font-weight: 700; }
h3 { font-size: .96rem; font-weight: 650; }
p { margin: 0; }
.serifa { font-weight: 700; letter-spacing: -.035em; }
.mudo { color: var(--m); }
.peq { font-size: .83rem; }
::selection { background: color-mix(in oklab, var(--rosa) 30%, transparent); }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; border-radius: 8px; }

/* ---------------- moldura ---------------- */
.casca { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100svh; }
@media (min-width: 1024px) { .casca { grid-template-columns: 252px minmax(0, 1fr); } }

.lado { display: none; }
@media (min-width: 1024px) {
  .lado {
    display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100svh; padding: 20px 14px;
    background: color-mix(in oklab, var(--s) 70%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--b);
  }
}
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
.logo img { height: 30px; width: auto; }
.logo .logo-escuro { display: none; }
@media (prefers-color-scheme: dark) { .logo .logo-claro { display: none; } .logo .logo-escuro { display: block; } }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: var(--m); font-weight: 560; font-size: .93rem; position: relative; transition: background .2s, color .2s;
}
.nav a:hover { background: var(--s2); color: var(--t); }
.nav a.on { background: color-mix(in oklab, var(--rosa) 10%, var(--s)); color: var(--t); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--rosa) 22%, transparent); }
.nav a.on .ic { color: var(--rosa); }
.nav .bolinha { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--grad); color: #fff; font-size: .7rem; font-weight: 750; display: grid; place-items: center; }
.lado .rodape-lado { margin-top: auto; display: grid; gap: 8px; }

.principal { min-width: 0; padding-bottom: calc(var(--abas) + 18px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .principal { padding-bottom: 48px; } }

/* barra do topo */
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  min-height: var(--topo); padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in oklab, var(--f) 78%, transparent); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid color-mix(in oklab, var(--b) 70%, transparent);
}
@media (min-width: 1024px) { .barra { padding: 14px 32px; } .barra .marca-movel { display: none; } }
.marca-movel { width: 32px; height: 32px; border-radius: 10px; flex: none; box-shadow: 0 4px 14px -4px rgb(123 60 240 / .55); }
.barra .titulo { font-weight: 750; font-size: 1.06rem; letter-spacing: -.02em; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seletor {
  height: 38px; border-radius: 12px; border: 1px solid var(--b); background-color: var(--s); padding: 0 30px 0 12px;
  font-weight: 600; font-size: .86rem; max-width: 40vw; min-width: 0; appearance: none; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23998fb0' stroke-width='2.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
@media (min-width: 1024px) { .seletor { max-width: 260px; } }
.sino { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--b); background: var(--s); display: grid; place-items: center; flex: none; transition: transform .2s var(--mola); }
.sino:active { transform: scale(.94); }
.sino b { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--grad); color: #fff; font-size: .66rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--f); }

.conteudo { padding: 18px 14px; max-width: 1200px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .conteudo { padding: 22px 20px; gap: 18px; } }
@media (min-width: 1024px) { .conteudo { padding: 28px 32px; } }

/* abas de baixo (celular) */
.abas {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 22px;
  background: color-mix(in oklab, var(--s) 82%, transparent); backdrop-filter: saturate(1.6) blur(22px); -webkit-backdrop-filter: saturate(1.6) blur(22px);
  box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--b);
}
@media (min-width: 1024px) { .abas { display: none; } }
.abas a { display: grid; justify-items: center; gap: 3px; padding: 7px 0 6px; text-decoration: none; color: var(--m); font-size: .66rem; font-weight: 650; position: relative; border-radius: 16px; transition: color .2s; }
.abas a .ic { transition: transform .35s var(--mola); }
.abas a.on { color: var(--t); background: color-mix(in oklab, var(--rosa) 11%, transparent); }
.abas a.on .ic { color: var(--rosa); transform: translateY(-1px) scale(1.06); }
.abas .bolinha { position: absolute; top: 3px; left: 58%; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--grad); color: #fff; font-size: .6rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--s); }

/* ---------------- peças ---------------- */
.cartao { background: var(--s); border-radius: var(--raio); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); padding: 18px; min-width: 0; }
@media (min-width: 640px) { .cartao { padding: 20px 22px; } }
.cartao.sem { padding: 0; overflow: hidden; }
.cartao > b { display: flex; align-items: center; gap: 8px; }
.linha > b, .cartao h2, .cartao h3 { display: inline-flex; align-items: center; gap: 8px; }
.grade { display: grid; gap: 14px; }
.grade > * { min-width: 0; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.linha.entre { justify-content: space-between; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border-radius: 12px; border: 0; background: var(--ac); color: var(--act); font-weight: 650; font-size: .9rem;
  text-decoration: none; white-space: nowrap; position: relative; transition: transform .2s var(--mola), box-shadow .25s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn.sec { background: var(--s2); color: var(--t); box-shadow: inset 0 0 0 1px var(--b); }
.btn.sec:hover { background: var(--s3); }
.btn.fant { background: transparent; color: var(--t); }
.btn.fant:hover { background: var(--s2); }
.btn.lima, .btn.marca { background: var(--grad); color: #fff; box-shadow: var(--brilho); }
.btn.perigo { background: transparent; color: var(--r); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--r) 35%, transparent); }
.btn.peq { min-height: 34px; padding: 0 12px; font-size: .82rem; border-radius: 10px; }
.btn.g { min-height: 50px; padding: 0 22px; font-size: .98rem; border-radius: 14px; }
.btn.carregando { opacity: .6; pointer-events: none; }
.btn.carregando::after { content: ''; position: absolute; right: 10px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
/* a ação principal de cada tela ganha a cor da marca */
form > .btn.g:last-child, .btn.g[data-publica] { background: var(--grad); color: #fff; box-shadow: var(--brilho); }
.btn-ic { width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent; display: grid; place-items: center; color: var(--m); flex: none; transition: background .2s, color .2s; }
.btn-ic:hover { background: var(--s2); color: var(--t); }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 10px; border-radius: 999px; font-size: .74rem; font-weight: 680; background: var(--s2); color: var(--m); white-space: nowrap; }
.chip.ok { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); }
.chip.alerta { background: color-mix(in oklab, var(--a) 16%, transparent); color: var(--a); }
.chip.ruim { background: color-mix(in oklab, var(--r) 13%, transparent); color: var(--r); }
.chip.azul { background: color-mix(in oklab, var(--violeta) 14%, transparent); color: var(--violeta); }
.chip.lima { background: var(--grad); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.azul { color: #B79BFF; } }

.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); font-weight: 620; font-size: .83rem; white-space: nowrap; color: var(--m); transition: all .2s; }
.filtros button.on { background: var(--ac); color: var(--act); box-shadow: none; }
.campo-busca { height: 42px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--b); background: var(--s); padding: 0 14px; width: 100%; }
@media (min-width: 760px) { .campo-busca { max-width: 340px; } }

/* formulários */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > span { font-size: .79rem; font-weight: 640; color: var(--m); }
.campo input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=radio]), .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: 10px 13px; border-radius: 12px; border: 0; background: var(--f);
  box-shadow: inset 0 0 0 1px var(--b); font-size: 16px; transition: box-shadow .2s, background .2s;
}
@media (min-width: 760px) { .campo input:not([type=checkbox]):not([type=color]):not([type=range]):not([type=radio]), .campo select, .campo textarea { font-size: .92rem; } }
.campo textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rosa), 0 0 0 4px color-mix(in oklab, var(--rosa) 14%, transparent); background: var(--s); }
.campo small { color: var(--m); font-size: .77rem; }
.duas { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chave { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--b); }
.chave:first-child { border-top: 0; }
.chave > span { display: grid; gap: 2px; min-width: 0; }
.chave small { color: var(--m); font-size: .79rem; }
.liga { position: relative; width: 48px; height: 29px; flex: none; }
.liga input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.liga i { position: absolute; inset: 0; border-radius: 15px; background: var(--s3); transition: background .25s; box-shadow: inset 0 0 0 1px var(--b); }
.liga i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transition: transform .35s var(--mola); }
.liga input:checked + i { background: var(--grad); box-shadow: none; }
.liga input:checked + i::after { transform: translateX(19px); }
.cor { display: flex; align-items: center; gap: 8px; }
.cor input[type=color] { width: 44px; height: 44px; border: 0; border-radius: 12px; padding: 0; background: none; cursor: pointer; flex: none; }

/* ---------------- Agora ---------------- */
.ola { display: grid; gap: 2px; padding: 4px 2px 0; }
.ola .mudo { font-size: .86rem; font-weight: 550; }
.ola h1 { font-size: clamp(1.8rem, 6.5vw, 2.5rem); line-height: 1.08; }

/* o "ao vivo": a peça de destaque da tela inicial */
.ao-vivo {
  position: relative; overflow: hidden; border-radius: 24px; padding: 20px; color: #fff; isolation: isolate;
  background: var(--grad-escuro); box-shadow: var(--sombra-forte), inset 0 0 0 1px rgb(255 255 255 / .06);
}
.ao-vivo::before { content: ''; position: absolute; width: 340px; height: 340px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 46 147 / .45), transparent); z-index: -1; }
.ao-vivo::after { content: ''; position: absolute; width: 300px; height: 300px; left: -140px; bottom: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgb(123 60 240 / .5), transparent); z-index: -1; }
@media (min-width: 640px) { .ao-vivo { padding: 24px 26px; } }
.av-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.av-rot { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.av-rot i { width: 9px; height: 9px; border-radius: 50%; background: #3BF09A; box-shadow: 0 0 0 0 rgb(59 240 154 / .6); animation: pulsa 1.8s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 10px rgb(59 240 154 / 0); } 100% { box-shadow: 0 0 0 0 rgb(59 240 154 / 0); } }
.av-num { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 18px; }
.av-num b { font-size: clamp(3rem, 14vw, 4.2rem); font-weight: 780; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; }
.av-num span { color: rgb(255 255 255 / .75); font-weight: 560; font-size: .95rem; }
.av-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .av-etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-etapa { padding: 12px 12px 11px; border-radius: 16px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); display: grid; gap: 6px; min-width: 0; }
.av-etapa small { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 620; color: rgb(255 255 255 / .72); white-space: nowrap; }
.av-etapa b { font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; transition: transform .4s var(--mola); }
.av-etapa b.sobe { animation: sobe .5s var(--mola); }
@keyframes sobe { 30% { transform: translateY(-4px) scale(1.08); color: #3BF09A; } }
.av-etapa .trilho { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .1); overflow: hidden; }
.av-etapa .trilho i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FF2E93, #C58BFF); transition: width .8s var(--saida); }
.av-lojas { display: grid; gap: 6px; margin-top: 14px; }
.av-loja { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .06); font-size: .86rem; text-decoration: none; color: #fff; }
.av-loja b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 640; }
.av-loja span { color: rgb(255 255 255 / .7); font-size: .78rem; white-space: nowrap; }
.av-loja em { font-style: normal; font-weight: 750; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.av-vazio { color: rgb(255 255 255 / .7); font-size: .88rem; margin-top: 10px; }

.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .numeros { gap: 12px; } }
.num { background: var(--s); border-radius: 18px; padding: 13px 13px 12px; box-shadow: var(--sombra), inset 0 0 0 1px var(--b); display: grid; gap: 4px; min-width: 0; }
@media (min-width: 640px) { .num { padding: 16px 18px; } }
.num small { color: var(--m); font-size: .72rem; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.num b { font-size: clamp(1rem, 4.4vw, 1.5rem); font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.secao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 0; }
.secao-titulo h2 { font-size: 1rem; }
.fila { display: grid; gap: 10px; }
.tarefa {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px;
  background: var(--s); border-radius: 18px; box-shadow: var(--sombra), inset 0 0 0 1px var(--b); animation: entra .4s var(--saida) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.fila .tarefa:nth-child(2) { animation-delay: .04s; } .fila .tarefa:nth-child(3) { animation-delay: .08s; } .fila .tarefa:nth-child(4) { animation-delay: .12s; }
.tarefa .tic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--s2); color: var(--m); }
.tarefa.msg .tic { background: color-mix(in oklab, var(--violeta) 14%, transparent); color: var(--violeta); }
.tarefa.desp .tic { background: color-mix(in oklab, var(--rosa) 13%, transparent); color: var(--rosa); }
.tarefa.din .tic { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); }
.tarefa.alerta .tic { background: color-mix(in oklab, var(--a) 16%, transparent); color: var(--a); }
.tarefa .corpo { display: grid; gap: 2px; min-width: 0; }
.tarefa .corpo b { font-weight: 660; font-size: .94rem; }
.tarefa .corpo span { color: var(--m); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarefa .acao { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tarefa .acao .btn:first-of-type:not(.fant):not(.sec) { background: var(--grad); color: #fff; }
@media (min-width: 760px) { .tarefa { grid-template-columns: auto minmax(0, 1fr) auto; } .tarefa .acao { grid-column: auto; } }
.tarefa select { height: 34px; border-radius: 10px; border: 1px solid var(--b); background: var(--f); padding: 0 8px; font-size: .84rem; max-width: 160px; }
.calmo { text-align: center; padding: 40px 20px; display: grid; justify-items: center; gap: 10px; }
.calmo .serifa { font-size: 1.9rem; }
.calmo-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok); }

/* ---------------- listas e tabelas ---------------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th { text-align: left; font-size: .72rem; font-weight: 700; color: var(--m); text-transform: uppercase; letter-spacing: .06em; padding: 12px 16px; border-bottom: 1px solid var(--b); white-space: nowrap; }
.tabela td { padding: 13px 16px; border-bottom: 1px solid var(--b); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { cursor: pointer; transition: background .15s; }
.tabela tbody tr:hover { background: var(--s2); }
.tabela .dir { text-align: right; font-variant-numeric: tabular-nums; }
.rolagem { overflow-x: auto; }
/* no celular, cada linha da tabela vira um cartão */
@media (max-width: 759px) {
  .tabela.resp thead { display: none; }
  .tabela.resp, .tabela.resp tbody { display: block; }
  .tabela.resp tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--b); }
  .tabela.resp tr:last-child { border-bottom: 0; }
  .tabela.resp td { display: block; padding: 0; border: 0; min-width: 0; }
  .tabela.resp td.dir { text-align: right; }
  .tabela.resp td[data-r]::before { content: attr(data-r) ' · '; color: var(--m); font-size: .75rem; font-weight: 600; }
  .tabela.resp td.cheia { grid-column: 1 / -1; }
}
.itens-lista { display: grid; }
.item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--b); cursor: pointer; text-decoration: none; min-width: 0; }
.item:first-child { border-top: 0; }
.item:hover { background: var(--s2); }
.item .meio { flex: 1; min-width: 0; display: grid; gap: 2px; }
.item .meio b { font-weight: 640; }
.item .meio span { color: var(--m); font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--s2); font-weight: 750; flex: none; color: var(--violeta); }
@media (prefers-color-scheme: dark) { .av { color: #C9B3FF; } }

/* pedidos em cartões (celular) */
.pedidos-cartoes { display: grid; gap: 10px; }
@media (min-width: 760px) { .pedidos-cartoes { display: none; } }
@media (max-width: 759px) { .so-largo { display: none; } }
.ped { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px; background: var(--s); border-radius: 18px; box-shadow: var(--sombra), inset 0 0 0 1px var(--b); text-decoration: none; animation: entra .35s var(--saida) both; }
.ped .p-cod { font-weight: 760; letter-spacing: -.01em; }
.ped .p-total { font-weight: 760; text-align: right; font-variant-numeric: tabular-nums; }
.ped .p-cli { color: var(--m); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped .p-quando { color: var(--m); font-size: .78rem; text-align: right; white-space: nowrap; }
.ped .p-chips { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }

/* ---------------- lojas ---------------- */
.lojas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.loja-card { display: grid; background: var(--s); border-radius: 22px; box-shadow: var(--sombra), inset 0 0 0 1px var(--b); overflow: hidden; transition: transform .35s var(--mola), box-shadow .35s; }
.loja-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--b); }
.loja-capa { height: 140px; position: relative; overflow: hidden; display: grid; place-items: center; }
.loja-capa .nome-capa { font-size: 2.5rem; position: relative; z-index: 1; padding: 0 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.loja-capa .bolha { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; }
.loja-capa .modo { position: absolute; top: 12px; left: 12px; z-index: 1; backdrop-filter: blur(8px); background: rgb(0 0 0 / .35); color: #fff; }
.loja-capa .estado { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px); }
.loja-capa .estado.ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3BF09A; }
.loja-capa .vivo { position: absolute; bottom: 12px; left: 12px; z-index: 1; background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px); }
.loja-capa .vivo i { width: 7px; height: 7px; border-radius: 50%; background: #3BF09A; }
.loja-info { padding: 14px 16px 16px; display: grid; gap: 10px; }
.loja-info .end { color: var(--m); font-size: .8rem; text-decoration: none; word-break: break-all; }
.loja-acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.loja-acoes .btn { padding: 0 10px; }
.gaveta [data-novo-ent] { flex: 1 1 170px; max-width: none !important; }
@media (max-width: 639px) { .gaveta [data-novo-ent] { flex-basis: 100%; } .gaveta [data-saiu], .gaveta [data-atribui] { flex: 1; } }
.gaveta form.linha input { flex: 1 1 200px; }
.nova-loja { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 240px; border-radius: 22px; border: 2px dashed var(--b); background: transparent; color: var(--m); font-weight: 680; transition: all .25s; }
.nova-loja:hover { border-color: var(--rosa); color: var(--rosa); background: color-mix(in oklab, var(--rosa) 5%, transparent); }

/* ---------------- editor ---------------- */
.abas-loja { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--b); margin: -4px -14px 0; padding: 0 14px; }
.abas-loja::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .abas-loja { margin: -4px 0 0; padding: 0; } }
.abas-loja a { flex: none; padding: 11px 13px; text-decoration: none; color: var(--m); font-weight: 620; font-size: .88rem; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-loja a.on { color: var(--t); border-image: var(--grad) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.editor { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.editor > *, .corpo-loja { min-width: 0; }
@media (min-width: 1180px) { .editor { grid-template-columns: 410px minmax(0, 1fr); align-items: start; } .editor .tela { position: sticky; top: 80px; } }
.editor .controles { display: grid; gap: 12px; }
.tela { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.tela-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tela-barra .seg, .cr-previa-barra .seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--b); }
.tela-barra .seg button, .cr-previa-barra .seg button { border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; color: var(--m); }
.tela-barra .seg button.on, .cr-previa-barra .seg button.on { background: var(--s); color: var(--t); box-shadow: var(--sombra); }
.moldura { display: grid; place-items: start center; background: var(--s2); border-radius: 22px; padding: 18px; min-height: 60svh; overflow: hidden; box-shadow: inset 0 0 0 1px var(--b); }
.moldura iframe { width: 100%; height: calc(100svh - 200px); min-height: 560px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--sombra-forte); transition: width .45s var(--saida); }
.moldura.celular iframe { width: 390px; max-width: 100%; height: min(844px, calc(100svh - 200px)); border-radius: 36px; box-shadow: 0 0 0 10px #0d0a14, 0 30px 60px -20px rgb(0 0 0 / .5); }
@media (max-width: 700px) { .moldura { padding: 8px; border-radius: 18px; } .moldura.celular iframe { box-shadow: 0 0 0 4px #0d0a14; border-radius: 24px; } }
.secoes { display: grid; gap: 8px; }
.secao { background: var(--s); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--b); overflow: hidden; }
.secao.arrastando { opacity: .5; }
.secao.alvo { box-shadow: inset 0 0 0 2px var(--rosa); }
.secao-cab { display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 10px; cursor: pointer; min-width: 0; }
.secao-cab .alca { cursor: grab; color: var(--m); display: grid; place-items: center; }
.secao-cab .sic { width: 32px; height: 32px; border-radius: 10px; background: var(--s2); display: grid; place-items: center; flex: none; color: var(--violeta); }
.secao-cab b { flex: 1; font-weight: 620; font-size: .88rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secao-cab .btn-ic { width: 32px; height: 32px; }
.secao.oculta .secao-cab b { color: var(--m); text-decoration: line-through; }
.secao-corpo { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--b); }
.sublista { display: grid; gap: 8px; }
.subitem { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); position: relative; min-width: 0; }
.subitem .tira { position: absolute; top: 6px; right: 6px; }
.subitem summary { flex-wrap: wrap; }
.img-campo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.img-campo .miniatura { width: 56px; height: 56px; border-radius: 12px; background: var(--s2) center/cover no-repeat; flex: none; box-shadow: inset 0 0 0 1px var(--b); }
.img-campo input[type=text], .img-campo input:not([type]) { flex: 1; min-width: 140px; }
.icones-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 164px; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); }
.icones-grade button { height: 38px; border: 0; border-radius: 9px; background: none; display: grid; place-items: center; color: var(--m); }
.icones-grade button.on { background: var(--grad); color: #fff; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tema-op { border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); text-align: left; transition: transform .2s var(--mola); }
.tema-op:active { transform: scale(.97); }
.tema-op.on { box-shadow: inset 0 0 0 2px var(--rosa), var(--brilho); }
.tema-op .amostra { height: 54px; display: flex; align-items: flex-end; gap: 4px; padding: 8px; }
.tema-op .amostra i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); }
.tema-op span { display: block; padding: 8px 10px; font-weight: 680; font-size: .8rem; }
.adicionar-secao { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.adicionar-secao button { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 0; background: var(--s2); font-size: .8rem; font-weight: 640; text-align: left; transition: all .2s; }
.adicionar-secao button:hover { background: var(--grad); color: #fff; }
.rascunho-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: color-mix(in oklab, var(--a) 13%, var(--s)); font-size: .85rem; font-weight: 580; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a) 25%, transparent); }
.sub-acao summary { list-style: none; cursor: pointer; width: fit-content; }
.sub-acao summary::-webkit-details-marker { display: none; }

/* produtos */
.prod-lista { display: grid; gap: 8px; }
.prod { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--s); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--b); cursor: pointer; min-width: 0; transition: box-shadow .2s; }
.prod:hover { box-shadow: inset 0 0 0 1px var(--rosa); }
.prod img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--s2); flex: none; }
.prod .meio { flex: 1; min-width: 0; }
.prod .meio b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.foto { position: relative; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; background: var(--s2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .6); color: #fff; display: grid; place-items: center; padding: 0; }
.foto-mais { width: 78px; height: 78px; border-radius: 14px; border: 2px dashed var(--b); display: grid; place-items: center; color: var(--m); cursor: pointer; }
.kit-linha { display: grid; grid-template-columns: 70px 1fr 1fr 1fr auto; gap: 6px; align-items: end; }
@media (max-width: 600px) { .kit-linha { grid-template-columns: 1fr 1fr; padding: 10px; border-radius: 12px; background: var(--f); } }

/* ---------------- conversas ---------------- */
.chat-caixa { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - var(--topo) - var(--abas) - 70px); }
@media (min-width: 900px) { .chat-caixa { grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100svh - 150px); } }
.chat-lista { border-right: 1px solid var(--b); overflow-y: auto; max-height: calc(100svh - 150px); }
.conv { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--b); cursor: pointer; text-decoration: none; min-width: 0; }
.conv:hover, .conv.on { background: var(--s2); }
.conv .meio { flex: 1; min-width: 0; display: grid; gap: 2px; }
.conv .meio span { color: var(--m); font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .nl { min-width: 21px; height: 21px; border-radius: 11px; background: var(--grad); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; padding: 0 6px; align-self: center; }
.chat-aberta { display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100svh - 150px); min-height: 60svh; min-width: 0; }
@media (max-width: 899px) { .chat-aberta { max-height: calc(100svh - var(--topo) - var(--abas) - 60px); } }
.chat-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--b); flex-wrap: wrap; }
.msgs { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--f); overscroll-behavior: contain; }
.m { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: .92rem; white-space: pre-wrap; word-wrap: break-word; animation: entra .3s var(--saida); }
.m small { display: block; font-size: .68rem; opacity: .62; margin-top: 2px; }
.m.cliente { align-self: flex-start; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); border-bottom-left-radius: 6px; }
.m.dono { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.m.ia { align-self: flex-end; background: color-mix(in oklab, var(--violeta) 16%, var(--s)); border-bottom-right-radius: 6px; }
.m.loja { align-self: flex-end; background: color-mix(in oklab, var(--rosa) 10%, var(--s)); border-bottom-right-radius: 6px; font-size: .85rem; }
.m.sistema { align-self: center; background: none; color: var(--m); font-size: .78rem; }
.responder { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--b); background: var(--s); }
.responder textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; padding: 11px 13px; border-radius: 14px; border: 0; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); font-size: 16px; }
.responder .btn { background: var(--grad); color: #fff; width: 46px; padding: 0; flex: none; }
.respostas-rapidas { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 0; scrollbar-width: none; background: var(--s); }
.respostas-rapidas::-webkit-scrollbar { display: none; }
.respostas-rapidas button { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; border: 0; background: var(--s2); font-size: .77rem; font-weight: 580; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- gaveta, modal, notificações ---------------- */
.gaveta { position: fixed; inset: 0; z-index: 60; display: grid; justify-items: end; background: rgb(10 4 20 / .45); backdrop-filter: blur(3px); animation: fundo .25s; }
@keyframes fundo { from { opacity: 0; } }
.gaveta > section { width: min(580px, 100%); height: 100%; overflow-y: auto; background: var(--f); animation: desliza .45s var(--saida); display: grid; align-content: start; box-shadow: var(--sombra-forte); }
@keyframes desliza { from { transform: translateX(40px); opacity: 0; } }
.gaveta header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in oklab, var(--f) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--b); }
.gaveta .dentro { padding: 14px; display: grid; gap: 12px; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.linha-tempo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.linha-tempo li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; font-size: .87rem; }
.linha-tempo li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); margin-top: 7px; }
.linha-tempo small { color: var(--m); display: block; }
.prova { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prova img { width: 100%; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--b); }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: end center; padding: 0; background: rgb(10 4 20 / .5); backdrop-filter: blur(3px); animation: fundo .25s; }
@media (min-width: 640px) { .modal { place-items: center; padding: 16px; } }
.modal > section { width: min(640px, 100%); max-height: 92svh; overflow-y: auto; background: var(--s); border-radius: 26px 26px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 16px; animation: folha .5s var(--saida); }
@media (min-width: 640px) { .modal > section { border-radius: 26px; padding: 24px; } }
@keyframes folha { from { transform: translateY(40px); opacity: 0; } }
.modal .linha.entre { flex-wrap: nowrap; align-items: flex-start; }
.caminhos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.caminho { border: 0; padding: 16px; border-radius: 18px; background: var(--s2); text-align: left; display: grid; gap: 6px; box-shadow: inset 0 0 0 1px var(--b); cursor: pointer; transition: all .2s; }
.caminho.on { box-shadow: inset 0 0 0 2px var(--rosa), var(--brilho); background: color-mix(in oklab, var(--rosa) 6%, var(--s)); }
.caminho b { font-size: .98rem; }
.caminho span { color: var(--m); font-size: .83rem; }
.ia-gerando { display: grid; justify-items: center; gap: 14px; padding: 30px 0; text-align: center; }
.ia-gerando .orbe { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(from 0deg, #FF2E93, #7B3CF0, #C58BFF, #FF2E93); animation: gira 1.4s linear infinite; mask: radial-gradient(circle, transparent 46%, #000 48%); }
@keyframes gira { to { transform: rotate(1turn); } }
.notifs { position: fixed; top: calc(var(--topo) + 6px); right: 10px; z-index: 50; width: min(390px, calc(100vw - 20px)); max-height: 70svh; overflow-y: auto; background: var(--s); border-radius: 20px; box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--b); animation: entra .3s var(--saida); }
.notifs a { display: grid; gap: 2px; padding: 12px 16px; border-top: 1px solid var(--b); text-decoration: none; }
.notifs a.nova { background: color-mix(in oklab, var(--rosa) 6%, transparent); }
.notifs a span { color: var(--m); font-size: .84rem; }
.notifs a small { color: var(--m); font-size: .72rem; }

/* entrar */
.entrar { min-height: 100svh; display: grid; place-items: center; padding: 20px; background: var(--grad-escuro); }
.entrar form { width: min(400px, 100%); display: grid; gap: 14px; background: color-mix(in oklab, var(--s) 94%, transparent); padding: 30px 26px; border-radius: 28px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6), inset 0 0 0 1px var(--b); }
.entrar h1 { font-size: 2.2rem; }
.entrar .btn.g { background: var(--grad); color: #fff; box-shadow: var(--brilho); }

/* funil */
.funil { display: grid; gap: 10px; }
.funil-l { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: .86rem; }
.funil-l .barra-f { height: 28px; border-radius: 9px; background: var(--s2); overflow: hidden; }
.funil-l .barra-f i { display: block; height: 100%; border-radius: 9px; background: var(--grad); transition: width .8s var(--saida); }
.funil-l b { text-align: right; font-variant-numeric: tabular-nums; }

/* avisos */
.toasts { position: fixed; left: 50%; bottom: calc(var(--abas) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
@media (min-width: 1024px) { .toasts { bottom: 24px; } }
.toast { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 16px; background: #1A1029; color: #fff; font-weight: 560; font-size: .89rem; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45); animation: entra .35s var(--mola); pointer-events: auto; }
.toast .ic { color: #3BF09A; }
.toast.erro { background: var(--r); }
.toast span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast.sai { animation: toast-sai .3s ease forwards; }
@keyframes toast-sai { to { opacity: 0; transform: translateY(8px); } }
.toast.erro .ic { color: #fff; }
.toast a { margin-left: auto; color: #fff; font-weight: 750; }
.codigo { font: 500 .78rem/1.5 ui-monospace, monospace; background: var(--s2); padding: 8px 10px; border-radius: 10px; word-break: break-all; overflow-wrap: anywhere; }
.subitem summary .mudo { word-break: break-all; overflow-wrap: anywhere; }
details { min-width: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ============================================================
   VENDAS
   ============================================================ */
.rotulo { font-size: .76rem; font-weight: 650; letter-spacing: .02em; color: var(--m); }
.rotulo.claro { color: rgb(255 255 255 / .7); }
.periodo { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); }
@media (min-width: 640px) { .periodo { display: inline-flex; justify-self: start; } }
.periodo button { flex: 1; border: 0; background: none; height: 36px; padding: 0 16px; border-radius: 10px; font: inherit; font-weight: 640; font-size: .86rem; color: var(--m); white-space: nowrap; cursor: pointer; transition: background .25s var(--mola), color .25s; }
.periodo button.on { background: var(--ac); color: var(--act); box-shadow: var(--sombra); }

.fat { display: grid; gap: 2px; padding-bottom: 14px; overflow: hidden; }
.fat-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fat-valor { font-size: clamp(2.1rem, 9vw, 3rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 4px; }
.fat-sub { font-size: .84rem; margin-bottom: 8px; }
.fat-grafico { margin: 0 -4px; }
.fat-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .76rem; color: var(--m); font-weight: 560; }
.fat-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fat-legenda i { width: 16px; height: 3px; border-radius: 2px; }
.lg-atual { background: linear-gradient(90deg, #7B3CF0, #FF2E93); }
.lg-ant { background: repeating-linear-gradient(90deg, var(--m) 0 4px, transparent 4px 7px); opacity: .7; }

.delta { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: .74rem; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.sobe { background: color-mix(in oklab, var(--ok) 15%, transparent); color: var(--ok); }
.delta.desce { background: color-mix(in oklab, var(--r) 14%, transparent); color: var(--r); }
.delta.neutro { background: var(--s2); color: var(--m); font-weight: 600; }

/* o gráfico */
.grafico { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-grade { stroke: var(--b); stroke-width: 1; stroke-dasharray: 2 5; }
.g-eixo { fill: var(--m); font: 500 10.5px Geist, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.g-anterior { fill: none; stroke: var(--m); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .45; }
.g-linha { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.g-cursor { stroke: var(--m); stroke-width: 1; stroke-dasharray: 3 4; }
.g-ponto { fill: #fff; stroke: var(--rosa); stroke-width: 3; filter: drop-shadow(0 0 6px rgb(255 46 147 / .7)); }
.g-dica { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: #1A1029; color: #fff; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .45); white-space: nowrap; min-width: 120px; }
.g-dica[hidden] { display: none; }
.g-dica small { font-size: .7rem; opacity: .65; font-weight: 600; }
.g-dica b { font-size: 1rem; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-dica span { font-size: .74rem; opacity: .75; }
.g-dica em { font-style: normal; font-size: .72rem; font-weight: 650; margin-top: 2px; opacity: .85; }
.g-dica em.sobe { color: #3BF09A; opacity: 1; } .g-dica em.desce { color: #FF8A98; opacity: 1; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .kpis { gap: 12px; } }
.kpi { display: grid; gap: 4px; align-content: start; padding: 13px 12px; border-radius: 18px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); min-width: 0; }
@media (min-width: 640px) { .kpi { padding: 16px 18px; } }
.kpi small { font-size: .72rem; font-weight: 640; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { font-size: clamp(1rem, 4.6vw, 1.45rem); font-weight: 740; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .delta { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* o globo: sempre no escuro, é o espaço */
.cartao-globo {
  position: relative; overflow: hidden; border-radius: 24px; padding: 18px 16px 12px; color: #fff; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 0%, #2A0A55 0%, #13042A 55%, #0A0218 100%);
  box-shadow: var(--sombra-forte), inset 0 0 0 1px rgb(255 255 255 / .06);
}
.cartao-globo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent), radial-gradient(1px 1px at 42% 66%, #cbb8ff, transparent),
    radial-gradient(1px 1px at 88% 72%, #fff, transparent), radial-gradient(1px 1px at 22% 82%, #ffd1ea, transparent), radial-gradient(1.5px 1.5px at 62% 30%, #fff, transparent),
    radial-gradient(1px 1px at 8% 48%, #fff, transparent), radial-gradient(1px 1px at 95% 40%, #cbb8ff, transparent), radial-gradient(1px 1px at 52% 92%, #fff, transparent); }
@media (min-width: 640px) { .cartao-globo { padding: 22px 24px 14px; } }
.cg-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cg-topo > div:first-child { display: grid; gap: 2px; }
.cg-topo b { font-size: 1.15rem; font-weight: 720; letter-spacing: -.02em; }
.cg-legenda { display: flex; gap: 12px; font-size: .74rem; color: rgb(255 255 255 / .72); font-weight: 560; }
.cg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cg-legenda i { width: 9px; height: 9px; border-radius: 50%; }
.lg-venda { background: #FF2E93; box-shadow: 0 0 8px #FF2E93; }
.lg-loja { background: #A97CFF; box-shadow: 0 0 8px #A97CFF; }
.cg-corpo { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cg-corpo { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); align-items: center; } }
.globo { position: relative; touch-action: pan-y; cursor: grab; }
.globo:active { cursor: grabbing; }
.globo canvas { display: block; margin: 0 auto; touch-action: pan-y; }
.gl-carregando { display: grid; place-items: center; align-content: center; gap: 12px; height: 340px; color: rgb(255 255 255 / .6); font-size: .86rem; }
.gl-carregando i { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .15); border-top-color: #FF2E93; animation: gira .8s linear infinite; }
.gl-dica { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; background: rgb(20 8 40 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .1); white-space: nowrap; animation: entra .2s; }
.gl-dica[hidden] { display: none; }
.gl-dica b { font-size: .88rem; } .gl-dica span { font-size: .8rem; color: #FF8CC6; font-weight: 650; } .gl-dica small { font-size: .7rem; opacity: .6; }
.cg-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cg-ranking li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / .05); font-size: .84rem; animation: entra .5s var(--saida) both; animation-delay: calc(var(--i, 0) * 60ms); }
.cg-ranking li.vazio { display: block; text-align: center; color: rgb(255 255 255 / .6); }
.uf-sigla { font-weight: 760; font-size: .78rem; color: #FF8CC6; letter-spacing: .04em; }
.uf-nome { display: grid; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / .86); }
.uf-nome i { display: block; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #7B3CF0, #FF2E93); }
.cg-ranking b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cg-dica { margin: 8px 0 0; text-align: center; font-size: .72rem; color: rgb(255 255 255 / .45); }

/* quebras */
.barras { display: grid; gap: 14px; margin-top: 12px; }
.barra-l { display: grid; gap: 6px; }
.barra-l .linha span { font-weight: 680; font-variant-numeric: tabular-nums; }
.barra-l .trilho { display: block; height: 8px; border-radius: 6px; background: var(--s2); overflow: hidden; }
.barra-l .trilho i { display: block; height: 100%; border-radius: 6px; background: var(--grad); }
.pilha { display: flex; height: 14px; border-radius: 8px; overflow: hidden; gap: 2px; margin: 14px 0 12px; }
.pilha i { display: block; min-width: 4px; }
.formas-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.formas-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: .88rem; }
.formas-leg li i { width: 10px; height: 10px; border-radius: 3px; }
.formas-leg li b { font-variant-numeric: tabular-nums; }
.formas-leg li small { color: var(--m); font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.top-prod { display: grid; gap: 4px; margin-top: 10px; }
.tp { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--b); }
.tp:first-child { border-top: 0; }
.tp-pos { font-weight: 760; color: var(--m); font-size: .82rem; text-align: center; }
.tp img, .tp-img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; background: var(--s2); display: block; }
.tp-meio { display: grid; min-width: 0; }
.tp-meio b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; font-weight: 640; }
.tp-meio small { color: var(--m); font-size: .78rem; }
.tp > b { font-variant-numeric: tabular-nums; font-size: .9rem; }
a.num { text-decoration: none; color: inherit; transition: transform .25s var(--mola), box-shadow .25s; }
a.num:hover { transform: translateY(-2px); }
.cg-corpo > .globo { margin: 0 -16px; }
@media (min-width: 640px) { .cg-corpo > .globo { margin: 0 -24px; } }
@media (min-width: 900px) { .cg-corpo > .globo { margin: 0; } }

/* ---- Integrações: Supabase e "sempre acordado" ---- */
.sistema h2 .ic { color: var(--rosa); }
.aviso-sis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--a) 12%, transparent); font-size: .86rem; line-height: 1.5; }
.aviso-sis > .ic { color: var(--a); margin-top: 2px; }
.aviso-sis b { display: block; margin-bottom: 4px; }
.sistema code { font: 500 .8em ui-monospace, monospace; background: var(--s2); padding: 1px 6px; border-radius: 6px; }
.sis-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.sis-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--s2); }
.sis-item > div { display: grid; gap: 4px; min-width: 0; }
.sis-item b { font-weight: 680; }
.sis-item small { color: var(--m); font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.sis-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--s); color: var(--violeta); box-shadow: inset 0 0 0 1px var(--b); }
.sis-url { display: grid; gap: 4px; }
.sis-url small { color: var(--m); font-size: .76rem; font-weight: 600; }
.sis-pings { display: flex; gap: 6px; flex-wrap: wrap; }
.copiavel { cursor: copy; transition: box-shadow .2s; }
.copiavel:hover { box-shadow: inset 0 0 0 1.5px var(--violeta); }
.ok-txt { color: var(--ok); font-weight: 600; } .ruim-txt { color: var(--r); font-weight: 600; }
.sis-item .ruim-txt { color: var(--r); }
.sis-item .chip { justify-self: start; }

/* ============================================================
   CRIAR LOJA (tela cheia, cinco passos, prévia ao vivo)
   ============================================================ */
.criador { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); background: var(--f); opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s var(--saida); }
.criador.on { opacity: 1; transform: none; }
.cr-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 10px 14px 8px; border-bottom: 1px solid var(--b); background: var(--s); }
@media (min-width: 900px) { .cr-topo { grid-template-columns: auto auto 1fr; padding: 12px 20px; } }
.cr-titulo { display: grid; min-width: 0; }
.cr-titulo b { font-weight: 750; letter-spacing: -.02em; font-size: 1.05rem; }
.cr-titulo span { color: var(--m); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-passos { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
@media (min-width: 900px) { .cr-passos { grid-column: auto; justify-content: flex-end; } }
.cr-passos li { flex: 1; min-width: 0; display: grid; gap: 5px; cursor: default; }
@media (min-width: 900px) { .cr-passos li { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; } }
.cr-passos li::before { content: ''; display: block; height: 4px; border-radius: 3px; background: var(--s3); transition: background .4s; }
@media (min-width: 900px) { .cr-passos li::before { display: none; } }
.cr-passos li span { display: none; }
@media (min-width: 900px) { .cr-passos li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s2); font-size: .78rem; font-weight: 750; color: var(--m); } }
.cr-passos li em { font-style: normal; font-size: .7rem; font-weight: 650; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .cr-passos li em { font-size: .84rem; } }
.cr-passos li.on::before, .cr-passos li.feito::before { background: var(--grad); }
.cr-passos li.on em { color: var(--t); }
.cr-passos li.on span { background: var(--grad); color: #fff; }
.cr-passos li.feito { cursor: pointer; }
.cr-passos li.feito span { background: color-mix(in oklab, var(--ok) 18%, transparent); color: var(--ok); }

.cr-corpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
@media (min-width: 1100px) { .cr-corpo { grid-template-columns: minmax(0, 1fr) minmax(400px, 46%); } }
.cr-palco { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 22px 16px 40px; }
@media (min-width: 900px) { .cr-palco { padding: 36px clamp(24px, 4vw, 56px) 60px; } }
.cr-passo { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; animation: entra .45s var(--saida); }
.cr-cab { display: grid; gap: 6px; margin-bottom: 4px; }
.cr-cab h1 { margin: 0; font-size: clamp(1.6rem, 5.2vw, 2.3rem); font-weight: 760; letter-spacing: -.035em; line-height: 1.08; }
.cr-cab p { margin: 0; color: var(--m); font-size: .98rem; max-width: 620px; }
.cr-sub { margin: 10px 0 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.cr-sub small { color: var(--m); font-weight: 500; }
.cn-ok { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; opacity: 0; transform: scale(.4); transition: .35s var(--mola); }
.on > .cn-ok { opacity: 1; transform: none; }

/* passo 1: nichos */
.cr-nichos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .cr-nichos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1400px) { .cr-nichos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-nicho { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 10px 10px 12px; border: 0; border-radius: 20px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); transition: transform .35s var(--mola), box-shadow .3s; min-width: 0; }
.cr-nicho:hover { transform: translateY(-3px); }
.cr-nicho.on { box-shadow: var(--sombra-forte), inset 0 0 0 2px var(--rosa); }
.cn-arte { width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--nd); margin-bottom: 8px; }
.cn-arte img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform .8s var(--saida); }
.cr-nicho:hover .cn-arte img { transform: scale(1.25); }
.cr-nicho b { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; padding: 0 2px; }
.cr-nicho small { font-size: .72rem; color: var(--m); padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* passo 2: formato e estilo */
.cr-modos { display: grid; gap: 10px; }
@media (min-width: 640px) { .cr-modos { grid-template-columns: 1fr 1fr; } }
.cr-modo, .cr-modelo { position: relative; display: grid; gap: 6px; justify-items: start; text-align: left; padding: 18px; border: 0; border-radius: 20px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); transition: transform .35s var(--mola), box-shadow .3s; }
.cr-modo:hover, .cr-modelo:hover { transform: translateY(-2px); }
.cr-modo.on, .cr-modelo.on { box-shadow: var(--sombra-forte), inset 0 0 0 2px var(--rosa); }
.cm-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--s2); color: var(--violeta); transition: .3s; }
.on > .cm-ic { background: var(--grad); color: #fff; }
.cr-modo b, .cr-modelo b { font-size: 1.02rem; font-weight: 720; letter-spacing: -.015em; }
.cr-modo small, .cr-modelo small { color: var(--m); font-size: .86rem; line-height: 1.45; }
.cr-estilos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cr-estilo { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px; border: 0; border-radius: 18px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); transition: .3s; }
.cr-estilo.on { box-shadow: inset 0 0 0 2px var(--rosa); background: color-mix(in oklab, var(--rosa) 4%, var(--s)); }
.cr-estilo span { display: grid; gap: 3px; }
.cr-estilo b { font-weight: 720; }
.cr-estilo small { color: var(--m); font-size: .8rem; line-height: 1.4; }
.cr-wire { display: grid; gap: 3px; padding: 6px; border-radius: 10px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); aspect-ratio: 3/4; align-content: start; overflow: hidden; }
.cr-wire i { display: block; border-radius: 3px; background: var(--s3); }
.on .cr-wire i { background: color-mix(in oklab, var(--rosa) 22%, var(--s3)); }
.w-barra { height: 4px; } .w-heroi, .w-heroi-c { height: 22px; } .w-heroi-c { width: 70%; justify-self: center; }
.w-linha3, .w-linha4 { height: 7px; background: repeating-linear-gradient(90deg, var(--s3) 0 28%, transparent 28% 36%) !important; }
.w-cards { height: 14px; } .w-img-txt { height: 16px; background: linear-gradient(90deg, var(--s3) 45%, transparent 45% 52%, var(--s3) 52% 100%) !important; opacity: .8; }
.w-depo { height: 10px; } .w-faq { height: 12px; opacity: .6; }
.on .w-oferta, .w-oferta { height: 18px; background: var(--grad) !important; opacity: .85; }
.w-relogio { height: 7px; background: var(--grad) !important; }
.w-foto { height: 30px; } .w-cats { height: 8px; background: repeating-linear-gradient(90deg, var(--s3) 0 22%, transparent 22% 26%) !important; }
.w-grade2 { height: 26px; background: repeating-linear-gradient(90deg, var(--s3) 0 48%, transparent 48% 52%) !important; }
.w-grade3 { height: 18px; background: repeating-linear-gradient(90deg, var(--s3) 0 31%, transparent 31% 34.5%) !important; }
.w-chips { height: 5px; width: 80%; } .w-titulo { height: 10px; width: 60%; justify-self: center; margin: 6px 0; }

/* passo 3: temas, cor e fontes */
.cr-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .cr-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cr-temas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-tema { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 8px 8px 12px; border: 0; border-radius: 18px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); transition: transform .3s var(--mola), box-shadow .3s; min-width: 0; }
.cr-tema:hover { transform: translateY(-2px); }
.cr-tema.on { box-shadow: var(--sombra-forte), inset 0 0 0 2px var(--rosa); }
.ct-amostra { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px; background: var(--tf); overflow: hidden; display: grid; align-content: center; padding: 0 14px; gap: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); margin-bottom: 6px; }
.ct-amostra b { color: var(--tt); font-size: 2rem; line-height: 1; font-weight: 600; }
.ct-txt { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--tm); color: var(--tmt); font-size: .7rem; font-weight: 650; }
.ct-bola { position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%; background: var(--td); }
.ct-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; padding: 0 2px; }
.ct-nome em { font-style: normal; font-size: .64rem; font-weight: 750; padding: 2px 7px; border-radius: 999px; background: var(--grad); color: #fff; }
.cr-tema small { color: var(--m); font-size: .72rem; line-height: 1.35; padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cr-cor { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--c); box-shadow: 0 0 0 3px var(--f), 0 0 0 4px transparent; transition: .25s var(--mola); }
.cr-cor:hover { transform: scale(1.1); }
.cr-cor.on { box-shadow: 0 0 0 3px var(--f), 0 0 0 5px var(--t); }
.cr-cor.livre { display: grid; place-items: center; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); color: #fff; cursor: pointer; position: relative; overflow: hidden; }
.cr-cor.livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-fontes summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--m); }
.cr-fontes .duas { margin-top: 12px; }

/* passo 4: modelos de pagamento */
.cr-modelos { display: grid; gap: 10px; }
@media (min-width: 760px) { .cr-modelos { grid-template-columns: 1fr 1fr; } }
.cr-modelo { grid-template-columns: auto 1fr; align-items: start; gap: 14px; }
.cr-modelo > span:nth-child(2) { display: grid; gap: 4px; padding-right: 22px; }
.cr-ajustes { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); }
@media (min-width: 760px) { .cr-ajustes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cr-ajustes input[type=range] { accent-color: var(--rosa); width: 100%; }

/* passo 5: detalhes */
.cr-form { display: grid; gap: 16px; }
.cr-bloco { display: grid; gap: 14px; padding: 18px; border-radius: 20px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); }
.cr-bloco h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.cr-bloco h3 small { color: var(--m); font-weight: 500; }
.cr-slug { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .78rem; color: var(--m); }
.cr-slug.ok { color: var(--ok); font-weight: 600; }
.cr-slug.ruim { color: var(--r); font-weight: 600; }
.cr-slug .link { border: 0; background: none; padding: 0; color: var(--violeta); text-decoration: underline; font: inherit; cursor: pointer; }
.cr-prods { display: grid; gap: 8px; }
.cr-prod { display: grid; grid-template-columns: 1.6fr .8fr 1fr auto; gap: 6px; align-items: center; }
.cr-prod input { min-width: 0; height: 42px; border: 0; border-radius: 11px; padding: 0 11px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); color: var(--t); font: inherit; font-size: .9rem; }
@media (max-width: 520px) { .cr-prod { grid-template-columns: 1fr 90px auto; } .cr-prod input[data-k="categoria"] { grid-column: 1 / 3; grid-row: 2; } }

/* criando */
.cr-criando { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: color-mix(in oklab, var(--f) 92%, transparent); backdrop-filter: blur(6px); animation: entra .3s; }

/* prévia */
.cr-previa { display: none; min-height: 0; flex-direction: column; background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--violeta) 9%, var(--s2)), var(--s2)); border-left: 1px solid var(--b); }
@media (min-width: 1100px) { .cr-previa { display: flex; } .cr-ver-previa, .cr-fecha-previa { display: none !important; } }
.criador.previa-on .cr-previa { display: flex; position: fixed; inset: 0; z-index: 5; border: 0; animation: entra .3s; }
.cr-previa-barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.cr-ao-vivo { white-space: nowrap; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--m); letter-spacing: .04em; text-transform: uppercase; }
.cr-ao-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulso 2s infinite; }
.cr-tela { position: relative; flex: 1; min-height: 0; margin: 0 14px 14px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--sombra-forte), 0 0 0 1px var(--b); transition: all .5s var(--saida); }
.cr-tela.celular { width: min(390px, calc(100% - 28px)); margin-inline: auto; border-radius: 34px; box-shadow: var(--sombra-forte), 0 0 0 8px #120a1f, 0 0 0 9px rgb(255 255 255 / .08); margin-bottom: 22px; }
.cr-tela iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.cr-carregando { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .55); opacity: 0; transition: opacity .2s; pointer-events: none; }
.cr-carregando i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; border-right-color: transparent; animation: gira .7s linear infinite; }
.cr-carregando.on { opacity: 1; }
@keyframes pulso { 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.cr-pe { display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--b); background: var(--s); }
.cr-pe [data-seguir] { margin-left: auto; min-width: 0; }
@media (max-width: 520px) { .cr-pe [data-voltar] span { display: none; } .cr-pe .btn { padding: 0 14px; } }
.cr-pe [data-seguir][disabled] { opacity: .45; pointer-events: none; }
@media (min-width: 900px) { .cr-pe { padding: 12px 20px; } }
.cr-criando .orbe { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(from 0deg, #FF2E93, #7B3CF0, #C58BFF, #FF2E93); animation: gira 1.4s linear infinite; mask: radial-gradient(circle, transparent 46%, #000 48%); }
.porta-info { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: color-mix(in oklab, var(--ok) 11%, var(--s)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok) 30%, transparent); }
.porta-info .ic { color: var(--ok); }
.porta-info span { display: grid; gap: 2px; }
.porta-info small { color: var(--m); font-size: .82rem; }

/* ============================================================
   UMA LOJA: visão geral, produtos, pagamento
   ============================================================ */
.abas-loja-ver { margin-left: auto; }

/* visão geral */
.vg { display: grid; gap: 14px; max-width: 1080px; }
.vg-topo { display: grid; gap: 16px; align-items: center; padding: 14px; border-radius: 24px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); }
@media (min-width: 760px) { .vg-topo { grid-template-columns: 300px 1fr; gap: 24px; padding: 16px; } }
.vg-mini { position: relative; display: block; aspect-ratio: 16/11; border-radius: 16px; overflow: hidden; background: var(--s2); box-shadow: inset 0 0 0 1px var(--b); isolation: isolate; }
.vg-mini iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; }
.vg-mini-ver { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .62); color: #fff; font-size: .78rem; font-weight: 650; backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: .3s var(--mola); }
.vg-mini:hover .vg-mini-ver { opacity: 1; transform: none; }
.vg-info { display: grid; gap: 10px; min-width: 0; }
.vg-nome { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 760; letter-spacing: -.035em; }
.vg-end { justify-self: start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--s2); color: var(--t); font: 600 .86rem var(--fonte, inherit); cursor: copy; }
.vg-end span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-end .ic { flex: none; color: var(--m); }
.vg-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
a.kpi { color: inherit; text-decoration: none; }
.vg-pronta { display: grid; gap: 16px; }
.vg-pronta-cab { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.vg-pronta-cab h2 { margin: 0 0 4px; font-size: 1.2rem; }
.vg-pronta-cab p { margin: 0; font-size: .9rem; }
.anel { width: 84px; height: 84px; }
.anel text { font: 760 24px Geist, sans-serif; fill: var(--t); letter-spacing: -.04em; }
.anel-v { transition: stroke-dasharray 1s var(--saida); }
.vg-tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vg-tarefas > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--s2); }
.vg-tarefas > li .btn { grid-column: 2; justify-self: start; }
@media (min-width: 640px) { .vg-tarefas > li { grid-template-columns: auto minmax(0, 1fr) auto; } .vg-tarefas > li .btn { grid-column: auto; } }
.vt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--a) 16%, transparent); color: var(--a); }
.vg-tarefas li.opc .vt-ic { background: color-mix(in oklab, var(--violeta) 14%, transparent); color: var(--violeta); }
.vt-txt { display: grid; gap: 2px; min-width: 0; }
.vt-txt b { font-size: .92rem; }
.vt-txt b small { font-weight: 600; color: var(--m); font-size: .72rem; margin-left: 4px; }
.vt-txt > small { color: var(--m); font-size: .82rem; line-height: 1.4; }
.vg-tarefas li.feitas { display: block; background: none; padding: 4px 2px; }
.vg-tarefas li.feitas summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 650; font-size: .88rem; }
.vg-tarefas li.feitas ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vg-tarefas li.feitas ul li { display: flex; align-items: center; gap: 8px; color: var(--m); font-size: .86rem; }
.vg-tarefas li.feitas ul .ic { color: var(--ok); }
.vg-pedidos { display: grid; gap: 8px; margin-top: 12px; }

/* compartilhar */
.compart { display: grid; gap: 18px; align-items: center; }
@media (min-width: 560px) { .compart { grid-template-columns: auto 1fr; } }
.compart-qr { width: 220px; height: 220px; padding: 12px; border-radius: 20px; background: #fff; justify-self: center; box-shadow: var(--sombra); }
.compart-qr svg { width: 100%; height: 100%; }

/* produtos */
.pr { display: grid; gap: 12px; }
.pr-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pr-busca { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); color: var(--m); }
.pr-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--t); font: inherit; outline: none; }
.pr-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .pr-botoes { width: 100%; } .pr-botoes .btn { flex: 1; padding: 0 10px; } .pr-botoes .btn.sec span { display: none; } .pr-botoes .btn.sec { flex: 0 0 46px; } }
.filtros button small { opacity: .6; font-weight: 600; margin-left: 2px; }
.pr-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .pr-grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } }
.pr-grade > .cartao { grid-column: 1 / -1; }
.pr-card { position: relative; display: grid; align-content: start; border-radius: 18px; overflow: hidden; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); cursor: pointer; transition: transform .3s var(--mola), box-shadow .3s; min-width: 0; }
.pr-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--b); }
.pr-card.sel { box-shadow: var(--sombra-forte), inset 0 0 0 2px var(--rosa); }
.pr-card.oculto .pr-foto img { opacity: .45; filter: grayscale(.6); }
.pr-foto { position: relative; aspect-ratio: 1; background: var(--s2); }
.pr-foto img { width: 100%; height: 100%; object-fit: cover; }
.pr-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgb(0 0 0 / .6); color: #fff; font-size: .68rem; font-weight: 700; backdrop-filter: blur(4px); }
.pr-tag.ex { left: auto; right: 8px; background: color-mix(in oklab, var(--a) 85%, #000); }
.pr-info { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.pr-info b { font-size: .9rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-info b.gen { color: var(--a); }
.pr-info span { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .92rem; }
.pr-info s { color: var(--m); font-weight: 500; font-size: .8rem; }
.pr-info small { color: var(--m); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-check { position: absolute; top: 8px; left: 8px; z-index: 2; cursor: pointer; }
.pr-check input { position: absolute; opacity: 0; }
.pr-check i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgb(255 255 255 / .9); color: transparent; box-shadow: 0 1px 4px rgb(0 0 0 / .2), inset 0 0 0 1.5px rgb(0 0 0 / .15); transition: .2s; }
.pr-check input:checked + i { background: var(--grad); color: #fff; box-shadow: none; }
@media (hover: hover) { .pr-card:not(.sel) .pr-check { opacity: 0; transition: opacity .2s; } .pr-card:hover .pr-check, .pr-grade:has(.sel) .pr-check { opacity: 1; } }
.pr-lote { position: sticky; bottom: calc(var(--abas) + 10px + env(safe-area-inset-bottom)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 18px; background: #1A1029; color: #fff; box-shadow: 0 20px 50px -14px rgb(0 0 0 / .55); animation: entra .3s var(--saida); }
@media (min-width: 1000px) { .pr-lote { bottom: 16px; } }
.pr-lote b { margin-right: auto; font-size: .9rem; }
.pr-lote .btn.sec { background: rgb(255 255 255 / .1); color: #fff; box-shadow: none; }
.pr-lote .btn-ic { color: #fff; }
.gaveta-prod section { width: min(620px, 100%); }
.form-prod-g { display: grid; gap: 14px; }

/* pagamento: modelos */
.pg-modelos { display: grid; gap: 8px; }
@media (min-width: 640px) { .pg-modelos { grid-template-columns: 1fr 1fr; } }
.pg-modelo { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; padding: 14px; border: 0; border-radius: 16px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--b); transition: .25s; }
.pg-modelo.on { background: color-mix(in oklab, var(--rosa) 6%, var(--s)); box-shadow: inset 0 0 0 2px var(--rosa); }
.pg-modelo span:last-child { display: grid; gap: 3px; }
.pg-modelo b { font-weight: 720; }
.pg-modelo small { color: var(--m); font-size: .8rem; line-height: 1.4; }
.caminhos.tres-c { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 640px) {
  .pr-lote { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px; gap: 6px; border-radius: 16px; }
  .pr-lote::-webkit-scrollbar { display: none; }
  .pr-lote b { flex: none; margin-right: 4px; font-size: .8rem; white-space: nowrap; }
  .pr-lote .btn { flex: none; white-space: nowrap; }
}
.gaveta-prod > section { width: min(620px, 100%); }

.loja-capa { display: block; text-decoration: none; isolation: isolate; height: 168px; }
.loja-mini { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; z-index: -1; background: #fff; }
.loja-capa .chip { z-index: 1; box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.loja-nome { font-size: 1.05rem; font-weight: 740; letter-spacing: -.02em; }

/* ============================================================
   BUSCA RÁPIDA (⌘K)
   ============================================================ */
.paleta { position: fixed; inset: 0; z-index: 95; display: grid; justify-items: center; align-items: start; padding: 10px; background: rgb(10 4 20 / .5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; }
.paleta.on { opacity: 1; }
.pl-caixa { width: min(640px, 100%); margin-top: min(12vh, 110px); border-radius: 22px; background: var(--s); box-shadow: 0 40px 100px -20px rgb(0 0 0 / .6), inset 0 0 0 1px var(--b); overflow: hidden; transform: translateY(-8px) scale(.985); transition: transform .35s var(--mola); }
.paleta.on .pl-caixa { transform: none; }
.pl-campo { display: flex; align-items: center; gap: 12px; padding: 4px 16px; border-bottom: 1px solid var(--b); color: var(--m); }
.pl-campo input { flex: 1; min-width: 0; height: 56px; border: 0; background: none; color: var(--t); font: 500 1.05rem inherit; font-family: inherit; outline: none; }
.paleta kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--s2); box-shadow: inset 0 -1px 0 var(--b), inset 0 0 0 1px var(--b); font: 650 .7rem ui-monospace, monospace; color: var(--m); }
.pl-res { max-height: min(56svh, 460px); overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.pl-grupo { padding: 10px 12px 4px; font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--m); }
.pl-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; color: var(--t); text-decoration: none; }
.pl-item .ic:last-child { color: var(--m); opacity: 0; transition: opacity .15s; }
.pl-item.on { background: var(--s2); }
.pl-item.on .ic:last-child { opacity: 1; }
.pl-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--s2); color: color-mix(in oklab, var(--violeta) 55%, var(--t)); overflow: hidden; }
.pl-item.on .pl-ic { background: var(--grad); color: #fff; }
.pl-ic img { width: 100%; height: 100%; object-fit: cover; }
.pl-txt { display: grid; min-width: 0; }
.pl-txt b { font-weight: 640; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt small { color: var(--m); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-vazio { padding: 28px 14px; text-align: center; color: var(--m); }
.pl-pe { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--b); font-size: .74rem; color: var(--m); }
.pl-pe span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .pl-pe { display: none; } .pl-campo kbd { display: none; } }

/* biblioteca de seções */
.add-secao { width: 100%; }
.biblioteca > section { width: min(860px, 100%); }
.bib-busca { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); color: var(--m); }
.bib-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--t); font: inherit; outline: none; }
.bib-grupo h3 { margin: 6px 0 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m); }
.bib-grade { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.bib-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; text-align: left; padding: 12px; border: 0; border-radius: 16px; background: var(--s2); color: var(--t); transition: transform .25s var(--mola), box-shadow .25s; }
.bib-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--rosa); }
.bib-item[hidden] { display: none; }
.bib-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--s); color: var(--violeta); box-shadow: inset 0 0 0 1px var(--b); }
.bib-item span:nth-child(2) { display: grid; gap: 2px; }
.bib-item b { font-size: .92rem; font-weight: 680; }
.bib-item small { color: var(--m); font-size: .78rem; line-height: 1.4; }
.bib-item em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: .64rem; font-weight: 700; color: var(--ok); }
.ed-cores { gap: 8px; }
.ed-cores .cr-cor { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--s), 0 0 0 3px transparent; }
.ed-cores .cr-cor.on { box-shadow: 0 0 0 2px var(--s), 0 0 0 4px var(--t); }

/* iPhone (app instalado): nada fica embaixo da barra de status nem da barra de gestos */
.cr-topo { padding-top: max(10px, env(safe-area-inset-top)); }
.criador.previa-on .cr-previa { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.cr-previa-barra { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.cr-fecha-previa { width: 44px; height: 44px; background: var(--s2); }
.cr-voltar-previa { display: none; margin: 0 14px 12px; }
.criador.previa-on .cr-voltar-previa { display: inline-flex; justify-content: center; }
@media (min-width: 1100px) { .cr-voltar-previa { display: none !important; } }
.criador.previa-on .cr-tela.celular { margin-bottom: 14px; }
@media (max-width: 1099px) { .cr-ao-vivo { display: none; } .cr-fecha-previa { margin-left: auto; } }

/* ============================================================
   CONVERSAS (nova)
   ============================================================ */
.cv { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 22px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); overflow: hidden; min-height: calc(100svh - var(--topo) - var(--abas) - 60px); }
@media (min-width: 900px) { .cv { grid-template-columns: 330px minmax(0, 1fr); height: calc(100svh - 120px); min-height: 0; } }
@media (min-width: 1250px) { .cv { grid-template-columns: 330px minmax(0, 1fr) 280px; } }
.cv-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--b); }
.cv-busca { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--f); box-shadow: inset 0 0 0 1px var(--b); color: var(--m); }
.cv-busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--t); font: inherit; outline: none; }
.cv-filtros { padding: 0 12px 8px; }
.cv-itens { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.conv { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--b); color: var(--t); text-decoration: none; }
.conv[hidden] { display: none; }
.conv.nova .cv-l1 b, .conv.nova .cv-l2 { color: var(--t); font-weight: 650; }
.conv .av, .cv-topo .av, .cv-info .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; color: #fff; background: linear-gradient(135deg, hsl(var(--h, 300) 70% 58%), hsl(calc(var(--h, 300) + 40) 70% 46%)); flex: none; }
.cv-topo .av { width: 38px; height: 38px; }
.cv-info .av.grande { width: 64px; height: 64px; font-size: 1.5rem; }
.cv-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cv-l1 b { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-l1 time { flex: none; font-size: .72rem; color: var(--m); }
.cv-l2 { display: flex; align-items: center; gap: 3px; color: var(--m); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-l3 { color: var(--m); font-size: .72rem; opacity: .8; }
.cv-visto { display: inline-grid; color: var(--m); }
.cv-visto.lida { color: #4FB4FF; }
.conv .meio { display: grid; gap: 1px; min-width: 0; }

.cv-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--f); }
.cv-vazio { margin: auto; display: grid; justify-items: center; gap: 10px; color: var(--m); }
@media (max-width: 899px) {
  .cv-chat { display: none; }
  .cv.com-aberta .cv-lista { display: none; }
  .cv.com-aberta .cv-chat { display: flex; position: fixed; inset: 0; z-index: 75; height: 100dvh; }
  html.cv-tela .abas { display: none; }
}
.cv-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--b); background: var(--s); }
@media (min-width: 900px) { .cv-volta { display: none !important; } }
.cv-quem { flex: 1; min-width: 0; display: grid; }
.cv-quem b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-quem small { color: var(--m); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-quem small.dig { color: var(--ok); font-weight: 650; }
.cv-menu { position: relative; }
.cv-menu summary { list-style: none; }
.cv-menu summary::-webkit-details-marker { display: none; }
.cv-menu > div { position: absolute; right: 0; top: 44px; z-index: 5; min-width: 240px; display: grid; padding: 6px; border-radius: 16px; background: var(--s); box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--b); animation: entra .2s; }
.cv-menu > div a, .cv-menu > div button { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--t); font-family: inherit; font-size: .9rem; font-weight: 560; text-decoration: none; text-align: left; cursor: pointer; }
.cv-menu > div a:hover, .cv-menu > div button:hover { background: var(--s2); }
.perigo-txt { color: var(--r) !important; }
.cv-chat .msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--f); overscroll-behavior: contain; }
.cv-chat .m { max-width: min(78%, 560px); padding: 9px 13px 7px; border-radius: 18px; font-size: .93rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: entra .25s; }
.cv-chat .m small { display: block; font-size: .66rem; opacity: .65; margin-top: 3px; text-align: right; }
.cv-chat .m.cliente { align-self: flex-start; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); border-bottom-left-radius: 6px; }
.cv-chat .m.dono { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.cv-chat .m.ia { align-self: flex-end; background: color-mix(in oklab, var(--violeta) 22%, var(--s)); border-bottom-right-radius: 6px; }
.cv-chat .m.loja { align-self: center; max-width: 88%; background: var(--s2); color: var(--m); font-size: .8rem; text-align: center; border-radius: 12px; }
.cv-chat .m.sistema { align-self: center; background: none; color: var(--m); font-size: .76rem; }
.m-dia { align-self: center; margin: 8px 0 4px; }
.m-dia span { padding: 4px 12px; border-radius: 999px; background: var(--s2); color: var(--m); font-size: .7rem; font-weight: 650; }
.m-visto { align-self: flex-end; display: inline-flex; align-items: center; color: var(--m); font-size: .7rem; margin-top: -2px; }
.m-visto .ic + .ic { margin-left: -7px; }
.m-visto:has(.ic + .ic) { color: #4FB4FF; }
.m-digitando { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--s); box-shadow: inset 0 0 0 1px var(--b); }
.m-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--m); animation: pulo 1.2s infinite; }
.m-digitando i:nth-child(2) { animation-delay: .15s; }
.m-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 30% { transform: translateY(-4px); opacity: .5; } }
.cv-pe { background: var(--s); border-top: 1px solid var(--b); padding-bottom: env(safe-area-inset-bottom); }
.cv-pe .respostas-rapidas { padding: 8px 10px 0; }
.cv-pe .responder { border-top: 0; align-items: flex-end; }
.cv-pe .responder textarea { font-family: inherit; font-size: 16px; color: var(--t); }
.cv-sugere { flex: none; width: 44px; height: 44px; color: var(--violeta); background: var(--s2); }

.cv-info { display: none; min-height: 0; overflow-y: auto; border-left: 1px solid var(--b); }
@media (min-width: 1250px) { .cv-info { display: block; } .cv-info-fecha, [data-cv-info-abre] { display: none !important; } }
@media (max-width: 1249px) { .cv.info-on .cv-info { display: block; position: fixed; inset: auto 0 0 0; z-index: 80; max-height: 80dvh; border-radius: 24px 24px 0 0; background: var(--s); box-shadow: 0 -20px 60px rgb(0 0 0 / .45); padding-bottom: env(safe-area-inset-bottom); animation: entra .3s; } }
.cv-info-in { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; }
.cv-info-fecha { position: absolute; top: 10px; right: 10px; }
.cv-info-nome { font-size: 1.1rem; }
.cv-num { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 10px 0 4px; }
.cv-num div { padding: 10px; border-radius: 14px; background: var(--s2); display: grid; }
.cv-num small { color: var(--m); font-size: .72rem; }
.cv-num b { font-size: 1.05rem; }
.cv-peds { display: grid; gap: 6px; width: 100%; text-align: left; }
.cv-ped { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: var(--s2); color: var(--t); text-decoration: none; }
.cv-ped small { grid-column: 1 / -1; color: var(--m); font-size: .74rem; }
.var-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.var-atalhos .chip { cursor: pointer; border: 0; height: 30px; }
.var-atalhos .chip:hover { background: var(--s3); color: var(--t); }

.custo-linha { display: grid; gap: 10px; align-items: end; }
@media (min-width: 520px) { .custo-linha { grid-template-columns: 1fr 1fr; } }
.margem { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--s2); min-height: 52px; align-content: center; }
.margem small { color: var(--m); font-size: .76rem; }
.custos h3 { margin: 6px 0 0; font-size: .9rem; }

/* ---- lucro e gráficos novos ---- */
.lucro { display: grid; gap: 6px; }
.lucro-v { color: var(--ok); }
.lucro-v.neg { color: var(--r); }
.lucro-barras { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin: 10px 0 4px; }
.lucro-barras.com-neg { align-items: center; }
.lucro-barras i { flex: 1; min-width: 2px; height: max(3px, calc(var(--a) * 100%)); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #3BE0B4, #1E9E7E); }
.lucro-barras.com-neg i { height: max(3px, calc(var(--a) * 50%)); transform: translateY(-50%); }
.lucro-barras.com-neg i.neg { transform: translateY(50%); background: linear-gradient(0deg, #FF7A8A, #E2364B); border-radius: 1px 1px 3px 3px; }
.lucro-onde { display: grid; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--b); }
.lucro-onde .pilha { margin: 6px 0 8px; }
.lucro-aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--a) 13%, transparent); color: var(--t); font-size: .84rem; text-decoration: none; }
.lucro-aviso .ic { color: var(--a); flex: none; margin-top: 2px; }
.cartao.larga { grid-column: 1 / -1; }
.calor-grade { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; margin-top: 10px; }
.calor-grade i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in oklab, var(--rosa) calc(var(--k) * 100%), var(--s2)); }
.calor-dia { font-size: .66rem; color: var(--m); align-self: center; }
.calor-grade small { font-size: .6rem; color: var(--m); }
.ent-num { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.ent-num b { font-size: 1.8rem; font-weight: 760; letter-spacing: -.03em; }
.ent-num span { color: var(--m); font-size: .86rem; }

.cupons { display: grid; gap: 8px; }
.cupom-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--s2); }
.cupom-cod { padding: 6px 10px; border-radius: 10px; background: var(--s); box-shadow: inset 0 0 0 1.5px var(--rosa); font: 700 .86rem ui-monospace, monospace; letter-spacing: .04em; color: var(--rosa); }
.cupom-info { display: grid; min-width: 0; }
.cupom-info small { color: var(--m); font-size: .76rem; }
.cupom-acoes { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
@media (min-width: 700px) { .cupom-l { grid-template-columns: auto minmax(0, 1fr) auto auto; } .cupom-acoes { grid-column: auto; } }

/* meta do mês e sugestões */
.meta:empty { display: none; }
.meta-in { position: relative; display: grid; gap: 8px; padding: 14px 16px; border-radius: 20px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); }
.meta-txt { display: grid; gap: 2px; padding-right: 36px; }
.meta-txt b { font-size: 1.25rem; font-weight: 760; letter-spacing: -.03em; }
.meta-txt b small { font-size: .82rem; color: var(--m); font-weight: 560; }
.meta-barra { height: 10px; border-radius: 6px; background: var(--s2); overflow: hidden; }
.meta-barra i { display: block; height: 100%; border-radius: 6px; background: var(--grad); transition: width 1s var(--saida); }
.meta-in .btn-ic { position: absolute; top: 10px; right: 10px; }
.meta-vazia { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px dashed var(--b); border-radius: 20px; background: none; color: var(--t); text-align: left; cursor: pointer; }
.meta-vazia .ic { color: var(--rosa); }
.meta-vazia span { display: grid; font-weight: 650; }
.meta-vazia small { color: var(--m); font-weight: 500; font-size: .8rem; }
.sugs { display: grid; gap: 10px; }
@media (min-width: 900px) { .sugs { grid-template-columns: 1fr 1fr; } }
.sug { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 18px; background: var(--s); box-shadow: var(--sombra), inset 0 0 0 1px var(--b); animation: entra .4s var(--saida); }
.sug b { display: block; font-size: .95rem; line-height: 1.3; }
.sug p { margin: 4px 0 10px; color: var(--m); font-size: .86rem; line-height: 1.45; }
.sug-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.sug.oportunidade .sug-ic { background: color-mix(in oklab, var(--violeta) 16%, transparent); color: var(--violeta); }
.sug.atencao .sug-ic { background: color-mix(in oklab, var(--a) 18%, transparent); color: var(--a); }
.sug.boa .sug-ic { background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); }
.vg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .vg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* editar na página */
.ed-pagina.on { background: var(--grad); color: #fff; box-shadow: none; }
.trocas { display: grid; gap: 8px; }
.troca-l { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--s2); }
.troca-txt { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: .86rem; }
.troca-txt s { color: var(--m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.troca-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.troca-img { width: 44px; height: 44px; border-radius: 10px; background: var(--f) center/cover; flex: none; }
.troca-l .btn { margin-left: auto; }

/* Kiwify: links de taxa */
.tl-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: 'v p x' 'u u u'; gap: 8px 10px; align-items: end; padding: 12px; border-radius: 16px; background: var(--s2); }
.tl-linha > label:nth-of-type(1) { grid-area: v; } .tl-linha > label:nth-of-type(2) { grid-area: u; } .tl-linha > label:nth-of-type(3) { grid-area: p; } .tl-linha > .btn-ic { grid-area: x; margin-bottom: 4px; }
@media (min-width: 760px) { .tl-linha { grid-template-columns: 120px minmax(0, 1fr) 150px auto; grid-template-areas: 'v u p x'; } }
.kiwify h3 { margin-top: 6px; }

.taxa-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.taxa-link { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--s2); color: var(--t); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s; }
.taxa-link b { font-size: 1.1rem; font-weight: 760; letter-spacing: -.02em; }
.taxa-link small { color: var(--m); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taxa-link.on { box-shadow: inset 0 0 0 2px var(--rosa); background: color-mix(in oklab, var(--rosa) 10%, var(--s2)); }
.tl-manual summary { cursor: pointer; font-weight: 600; color: var(--m); }
.tl-manual[open] { display: grid; gap: 10px; }
.btn.ed-pagina.on { background: var(--grad); color: #fff; box-shadow: none; }
.carregando-tela { min-height: 40vh; }
[data-dominio]:empty { display: none; }