:root[data-tema="claro"] {
  color-scheme: light; --fundo: #f4f5fc; --superficie: #fff; --elevada: #e9edf7;
  --lateral: #fff; --texto: #15223c; --muted: #52617b; --borda: #d8dfed;
  --acento: #7026dc; --acento-fundo: #f0e7ff; --verde: #007944; --verde-fundo: #dcf9e9;
  --ambar: #896000; --ambar-fundo: #fff2cf; --expirado: #c9203d; --expirado-fundo: #ffe5eb;
  --azul: #145bce; --hero-borda: #9ee2bc; --sombra: 0 20px 70px #16204a20;
}
.acoes-topo { display: flex; align-items: center; gap: 12px; }
.trocar-tema { padding: 10px; min-width: 44px; color: var(--azul); }
.metrica-paga { background: linear-gradient(130deg, #22ed930d, transparent), var(--superficie); }
.metrica-aguardando { background: linear-gradient(130deg, #ffbf400d, transparent), var(--superficie); }
.metrica-expirada { background: linear-gradient(130deg, #ff365b0d, transparent), var(--superficie); }
.card:nth-child(4) { background: linear-gradient(130deg, #9747ff18, transparent), var(--superficie); }
.card:nth-child(4) .card-valor { color: var(--acento); }
.card:nth-child(3) .card-valor { color: var(--azul); }
.filtro-produto { max-width: 260px; min-width: 165px; }
.faixa-filtros { flex-wrap: wrap; }
.rosca { position: relative; width: 210px; max-width: 100%; margin: 2px auto 12px; }
.rosca svg { width: 100%; display: block; }
.rosca-total { position: absolute; inset: 30% 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.rosca-total small { color: var(--muted); font-size: 8px; letter-spacing: 1.4px; }
.rosca-total strong { font-size: 21px; margin: 5px 0; letter-spacing: -.6px; }
.rosca-total span { font-size: 9px; color: var(--muted); }
.gateway-cor-0 { stroke: var(--acento); background: var(--acento); }
.gateway-cor-1 { stroke: var(--verde); background: var(--verde); }
.gateway-cor-2 { stroke: var(--azul); background: var(--azul); }
.rosca-legenda { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 22px; }
.rosca-legenda span { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); }
.rosca-legenda i { width: 6px; height: 6px; border-radius: 50%; }
.rosca-legenda b { color: var(--texto); font-weight: 500; }
.produtos { grid-column: 1 / -1; }
.produto { padding: 17px 0; border-top: 1px solid var(--borda); }
.produto > div:first-child { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.produto h3 { overflow-wrap: anywhere; }
.produto strong { flex-shrink: 0; color: var(--verde); font-size: 13px; }
.produto p { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; font-size: 11px; margin: 9px 0; }
.produto .progresso { height: 5px; }
.produto .progresso i { background: var(--acento); }
.preferencias-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 26px; }
.grupo-titulo { font-size: 15px; margin-bottom: 10px; }
.descricao-grupo { font-size: 12px; margin-bottom: 15px; }
.preferencia { position: relative; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--borda); cursor: pointer; }
.preferencia strong { font-weight: 550; color: var(--texto); font-size: 13px; }
.preferencia small { display: block; font-size: 11px; margin-top: 4px; }
.preferencia input { position: absolute; width: 44px; height: 44px; right: 0; opacity: 0; margin: 0; cursor: pointer; }
.preferencia i { position: relative; display: block; flex-shrink: 0; width: 42px; height: 24px; border-radius: 20px; background: var(--elevada); border: 1px solid var(--muted); pointer-events: none; }
.preferencia i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.preferencia input:checked + i { background: #7026dc; border-color: #7026dc; }
.preferencia input:checked + i::after { background: #fff; transform: translateX(18px); }
.preferencia input:focus-visible + i { outline: 2px solid var(--acento); outline-offset: 4px; }
fieldset { min-width: 0; border: 0; margin: 24px 0; padding: 0; }
legend { color: var(--muted); font-size: 12px; padding: 0; margin-bottom: 6px; }
.horarios { display: flex; gap: 8px; }
.horarios label { flex: 1; cursor: pointer; }
.horarios input { position: absolute; width: 1px; min-height: 0; opacity: 0; }
.horarios span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--borda); border-radius: 9px; }
.horarios input:checked + span { border-color: var(--acento); color: var(--acento); background: var(--acento-fundo); }
.horarios input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.seletor-preferencia { margin: 20px 0; }
.previas { margin-top: 28px; }
.previas > p { font-size: 11px; margin: 5px 0 18px; }
.previa-item + .previa-item { margin-top: 22px; }
.previa-rotulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 11px; color: var(--muted); }
.previa-estado { color: var(--ambar); }
.notificacao-android { background: var(--elevada); border: 1px solid var(--borda); border-radius: 18px; padding: 16px; }
.notificacao-app { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; margin-bottom: 9px; }
.notificacao-app img { border-radius: 6px; }
.notificacao-app small { margin-left: auto; }
.previa-titulo { display: block; font-size: 13px; overflow-wrap: anywhere; }
.previa-texto { font-size: 12px; margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.testar { width: 100%; margin-top: 9px; font-size: 12px; color: var(--azul); }
.aparencia { max-width: 440px; }
.whatsapp { color: #052818; }
[data-tema="claro"] .whatsapp { color: #fff; }
.salvo-preferencias { min-height: 20px; }
.skip { background: var(--acao); color: #fff; }
.barra-topo b { color: var(--muted); }
@media (min-width: 900px) {
  .app-shell { background: linear-gradient(to right, var(--lateral) 214px, transparent 214px); }
  .lateral { height: 100dvh; overflow-y: auto; }
}
@media (max-width: 1120px) { .filtros-vendas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo-busca { grid-column: auto; } }
@media (max-width: 660px) {
  .barra-topo { padding-block: 9px; gap: 6px; }
  .barra-topo > span { font-size: 10px; } .acoes-topo { gap: 7px; }
  .barra-topo .tag { font-size: 7px; padding-inline: 5px; letter-spacing: 0; }
  .titulo-pagina:has(.atualizar) { flex-wrap: wrap; }
  .titulo-pagina:has(.atualizar) .atualizar { margin-top: 0; }
  .filtro-produto { margin-top: 15px; max-width: none; width: 100%; }
  .preferencias-colunas { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .preferencia { min-height: 52px; }
  .campo-busca { grid-column: 1 / -1; }
  .produto h3 { font-size: 12px; }
}