:root{
  --bg:#f6f6fb; --bg-soft:#ffffff; --panel:#ffffff; --panel-solid:#ffffff;
  --panel-border:#eaeaf2; --panel-border-strong:#dcdce8;
  --purple:#9934ff; --purple-light:#bd7cff; --purple-dark:#7a1fe0; --slate:#525a6f; --slate-dark:#1f2333;
  --text:#1f2333; --muted:#767c92; --muted-2:#9a9fb2;
  --danger:#e2415f; --danger-bg:#fdecf0; --success:#17a673; --success-bg:#e7f9f1; --warn:#c9820a; --warn-bg:#fdf3e0;
  --radius:12px; --radius-sm:8px;
  --grad: linear-gradient(135deg, var(--purple), var(--purple-light));
  --shadow-sm: 0 1px 2px rgba(31,35,51,.05), 0 1px 1px rgba(31,35,51,.04);
  --shadow-md: 0 8px 24px rgba(31,35,51,.07);
  --shadow-lg: 0 20px 50px rgba(31,35,51,.13);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:'Inter',system-ui,Segoe UI,Arial,sans-serif;color:var(--text);
  background:var(--bg);font-size:13px;-webkit-font-smoothing:antialiased;
}
#app{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
::selection{background:var(--purple-light);color:#fff}

/* ---------- Auth ---------- */
.center-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(circle at 15% 0%, rgba(153,52,255,.10), transparent 45%),
             radial-gradient(circle at 90% 100%, rgba(82,90,111,.08), transparent 45%), var(--bg);}
.auth-card{
  background:#fff;
  border:1px solid var(--panel-border);border-radius:16px;padding:24px;max-width:360px;width:100%;
  box-shadow:var(--shadow-lg);
}
.auth-card .brand-mark{display:flex;justify-content:center;margin-bottom:16px}
.auth-card .brand-mark img{height:22px}
.auth-card h1{font-size:1.05rem;margin:0 0 3px;text-align:center;font-weight:700;color:var(--slate-dark)}
.auth-card p.sub{color:var(--muted);margin:0 0 18px;font-size:.78rem;text-align:center}
.field{margin-bottom:10px}
.field label{display:block;font-size:.7rem;color:var(--muted);margin-bottom:4px;font-weight:600;letter-spacing:.2px}
.field input,.field select,.field textarea{
  width:100%;padding:7px 10px;border-radius:var(--radius-sm);border:1px solid var(--panel-border-strong);
  background:#fff;color:var(--text);font-size:.8rem;font-family:inherit;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(153,52,255,.13)}
.field input::placeholder{color:var(--muted-2)}
.field-hint{color:var(--muted-2);font-size:.68rem;margin-top:3px}
/* Validacao inline: contorno vermelho no campo invalido - so muda cor/sombra,
   nunca a altura da caixa, para nao desalinhar linhas compactas como
   .row-inline (o motivo especifico do erro aparece consolidado perto do botao
   Salvar, nao aqui, exatamente para preservar o alinhamento). */
.field.has-error input,.field.has-error select{border-color:var(--danger);background:var(--danger-bg)}
.field.has-error input:focus,.field.has-error select:focus{box-shadow:0 0 0 3px rgba(226,65,95,.15)}
.field.has-error label{color:var(--danger)}
/* Barra de acao do "Salvar configuracoes" - agrupa o botao com uma frase curta
   deixando claro que ele salva TODOS os paineis da pagina (Evento + Campos do
   formulario), nao so o painel mais proximo. */
.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.form-actions .btn{width:auto;min-width:180px;max-width:260px}
.form-actions-hint{color:var(--muted);font-size:.76rem}
/* Campos e filtros cresciam junto com o container flex (.row/.toolbar), entao
   um seletor de data ou um <select> dentro de um painel largo virava um campo
   enorme e desproporcional ao conteudo que ele guarda (poucos caracteres).
   Boa pratica de UX: a largura maxima do campo acompanha o tipo de conteudo,
   nao o espaco disponivel - texto livre pode crescer mais, datas/numeros e
   selects ficam compactos mesmo dentro de um .row que sobra espaco. width:100%
   acima continua garantindo que o campo preencha containers menores que o teto. */
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel]{max-width:400px}
.field input[type=date],.field input[type=number]{max-width:170px}
.field select{max-width:240px}
.field.field-wide input,.field.field-wide select{max-width:none}
/* "Evento" (Regras de Cadastro) - os 7 ajustes (nome, duracao da rodada,
   status, limite, inicio, fim, duracao do ranking) precisam ficar visiveis
   juntos em UMA linha só, como um painel de configuracao rapido, em vez de
   quebrados em 3 linhas. Cada campo aqui usa uma largura fixa e compacta
   (ao inves do min-width:150px generico de .row>.field) dimensionada para o
   proprio conteudo - numeros e status curtos ficam bem estreitos, so o nome
   da promocao e as datas ganham um pouco mais de espaco. flex-wrap:nowrap +
   overflow-x:auto garantem que a linha nunca quebra: em telas mais estreitas
   ela rola horizontalmente em vez de empilhar os campos, o mesmo padrao usado
   em barras de filtro/toolbar de paineis administrativos. */
.btn{cursor:pointer;border:none;border-radius:var(--radius-sm);padding:7px 14px;font-weight:700;font-size:.78rem;transition:.15s;font-family:inherit}
.btn-primary{background:var(--grad);color:#fff;width:100%;box-shadow:0 6px 16px rgba(153,52,255,.25)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-ghost{background:#fff;color:var(--text);border:1px solid var(--panel-border-strong)}
.btn-ghost:hover{background:#f7f5fc;border-color:var(--purple-light)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-sm{padding:5px 10px;font-size:.72rem}
.btn-block{width:100%}
.error-msg{background:var(--danger-bg);border:1px solid #f3c1cd;color:#b52e49;padding:7px 10px;border-radius:var(--radius-sm);font-size:.76rem;margin-bottom:10px}
.ok-msg{background:var(--success-bg);border:1px solid #b6ead4;color:#0f7d54;padding:7px 10px;border-radius:var(--radius-sm);font-size:.76rem;margin-bottom:10px}
.switch-link{text-align:center;margin-top:14px;font-size:.76rem;color:var(--muted)}
.switch-link button{background:none;border:none;color:var(--purple);cursor:pointer;font-size:.76rem;font-weight:600}

/* ---------- Shell ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;background:#fff;border-bottom:1px solid var(--panel-border);position:sticky;top:0;z-index:20}
.topbar-left{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:8px}
.brand img{height:16px}
.promo-switch{position:relative}
.promo-switch-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--panel-border-strong);padding:5px 10px;border-radius:30px;cursor:pointer;color:var(--text);font-size:.74rem;font-weight:600}
.promo-switch-btn:hover{border-color:var(--purple-light)}
.promo-switch-btn .status-dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.promo-switch-btn .status-dot.paused{background:var(--warn)}
.promo-switch-btn .status-dot.ended{background:var(--muted-2)}
.promo-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--panel-border-strong);border-radius:12px;min-width:230px;box-shadow:var(--shadow-lg);overflow:hidden;z-index:30}
.promo-dropdown .promo-item{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:.77rem;border-bottom:1px solid var(--panel-border)}
.promo-dropdown .promo-item:hover{background:#f7f5fc}
.promo-dropdown .promo-item.active{background:#f4ebff}
.promo-dropdown .promo-new{padding:8px 12px;color:var(--purple);font-weight:600;cursor:pointer;font-size:.77rem}
.topbar .who{color:var(--muted);font-size:.74rem;display:flex;align-items:center;gap:8px}
.layout{display:flex;flex:1;min-height:0}
.sidebar{width:224px;background:#fff;border-right:1px solid var(--panel-border);padding:10px 10px;flex-shrink:0;transition:width .18s ease}
.sidebar .group-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);padding:10px 12px 4px;font-weight:700}
.sidebar button[data-tab]{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:var(--slate);padding:10px 12px;border-radius:10px;cursor:pointer;font-size:.86rem;margin-bottom:3px;font-family:inherit;font-weight:600;line-height:1.3}
.sidebar button[data-tab] svg{flex-shrink:0;opacity:.75;width:22px;height:22px}
.sidebar button[data-tab]:hover{background:#f7f5fc;color:var(--slate-dark)}
.sidebar button[data-tab]:hover svg{opacity:1}
.sidebar button[data-tab].active{background:linear-gradient(135deg, rgba(153,52,255,.12), rgba(189,124,255,.12));color:var(--purple-dark);font-weight:700;box-shadow:inset 0 0 0 1px rgba(153,52,255,.18)}
.sidebar button[data-tab].active svg{opacity:1;color:var(--purple)}

.sidebar-toggle{display:flex;align-items:center;gap:8px;width:100%;background:#f7f5fc;border:none;color:var(--muted-2);padding:9px 12px;border-radius:10px;cursor:pointer;font-size:.72rem;font-weight:700;font-family:inherit;margin-bottom:10px}
.sidebar-toggle:hover{background:#efe9fb;color:var(--purple-dark)}
.sidebar-toggle svg{flex-shrink:0;width:18px;height:18px}
.sidebar-toggle span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.sidebar-toggle span svg{width:14px;height:14px;opacity:.7}

.sidebar.collapsed{width:68px;padding:10px 8px}
.sidebar.collapsed .group-label{display:none}
.sidebar.collapsed .sidebar-toggle{justify-content:center}
.sidebar.collapsed button[data-tab]{justify-content:center;padding:11px 6px}
.sidebar.collapsed button[data-tab] span{display:none}
.content{flex:1;padding:18px 22px;overflow:auto}
.content h2{margin:0 0 2px;font-size:1.05rem;font-weight:800;color:var(--slate-dark);letter-spacing:-.01em}
.content .page-sub{color:var(--muted);font-size:.77rem;margin-bottom:16px}

/* ---------- Cards / stats ---------- */
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 16px}
.stat-card{background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm)}
.stat-card .num{font-size:1.3rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.stat-card .label{color:var(--muted);font-size:.71rem;margin-top:3px;font-weight:500}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--panel-border);box-shadow:var(--shadow-sm)}
th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--panel-border);font-size:.76rem}
th{color:var(--muted);font-weight:700;background:#faf9fd;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#faf8fd}
.panel{background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.panel h3{margin:0 0 2px;font-size:.85rem;font-weight:700;color:var(--slate-dark)}
.panel .panel-sub{color:var(--muted);font-size:.73rem;margin-bottom:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.field{flex:1;min-width:150px}
/* "Evento" (Regras de Cadastro) - os 7 ajustes (nome, duracao da rodada,
   status, limite, inicio, fim, duracao do ranking) precisam ficar visiveis
   juntos em UMA linha só, como um painel de configuracao rapido, em vez de
   quebrados em 3 linhas. Cada campo aqui usa uma largura fixa e compacta
   (ao inves do min-width:150px generico de .row>.field acima) dimensionada
   para o proprio conteudo - numeros e status curtos ficam bem estreitos, so
   o nome da promocao e as datas ganham um pouco mais de espaco.
   align-items:flex-end mantem as caixas de input alinhadas na mesma linha
   mesmo quando um rotulo mais longo (ex: "Limite de participações por
   CPF/RNE") quebra em duas linhas e outro não. flex-wrap:nowrap +
   overflow-x:auto garantem que a linha nunca quebra: em telas mais estreitas
   ela rola horizontalmente em vez de empilhar os campos, o mesmo padrao usado
   em barras de filtro/toolbar de paineis administrativos. Estas regras
   precisam vir DEPOIS de ".row>.field" acima para vencer no empate de
   especificidade CSS (mesmo numero de classes no seletor). */
/* Linha "Evento" (Regras de Cadastro): antes era flex-wrap:nowrap +
   overflow-x:auto, ou seja, os 9 campos ficavam TODOS numa unica linha que
   rolava horizontalmente - em monitores menores isso deixava metade dos
   campos escondidos/cortados, exigindo rolar para ver "Status" etc. Agora a
   linha QUEBRA (flex-wrap:wrap): numa tela larga cabe tudo em uma linha, e em
   telas menores ela reflui sozinha para 2-3 linhas, sem rolagem e sem cortar
   nenhum campo. Cada campo tem uma largura-base pelo tipo de conteudo, mas
   pode crescer (flex-grow) para preencher a sobra da linha, mantendo o visual
   alinhado. */
.row.row-inline{flex-wrap:wrap;overflow:visible;padding-bottom:0;align-items:flex-end;row-gap:12px}
.row.row-inline>.field{flex:1 1 auto;min-width:0;margin-bottom:0}
.row.row-inline>.field input,.row.row-inline>.field select{width:100%;max-width:none;height:31px}
/* Larguras-base (flex-basis) por tipo de campo - crescem para preencher a
   sobra, mas nunca ficam mais estreitas que este piso, garantindo que o
   conteudo (numeros curtos, datas, o nome longo da promocao) sempre caiba. */
.row-inline .f-name{flex-basis:170px;min-width:150px}
.row-inline .f-name-xl{flex-basis:260px;min-width:220px;flex-grow:3}
.row-inline .f-num{flex-basis:110px;min-width:96px;flex-grow:0}
.row-inline .f-status{flex-basis:150px;min-width:140px}
.row-inline .f-dt{flex-basis:175px;min-width:160px}
/* Editor de campos do cadastro: em vez de um numero FIXO de colunas por faixa
   de largura (que espremia/quebrava os cards em monitores de tamanhos
   intermediarios), usa auto-fill + minmax: cada card tem uma largura MINIMA
   confortavel (240px) e o navegador encaixa quantas colunas couberem na
   largura real da tela, reflowando sozinho em qualquer monitor - de ultrawide
   a notebook a celular - sem nunca deixar um card estreito demais para o
   rotulo/select. Os campos internos ficam contidos no card (min-width:0 +
   box-sizing) para nao vazar o texto longo dos opt-ins de LGPD. */
.fields-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:10px}
@media (max-width:520px){.fields-grid{grid-template-columns:1fr}}
.field-list-item{display:flex;flex-direction:column;gap:6px;background:#faf9fd;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:9px 10px;min-width:0}
.field-list-item input,.field-list-item select{width:100%;min-width:0;box-sizing:border-box;max-width:none}
.field-list-item-top{display:flex;gap:6px;align-items:center;min-width:0}
.field-list-item-top .f-label{flex:1 1 auto;min-width:0}
.field-list-item-top .btn-danger{flex:0 0 auto;padding:5px 9px;line-height:1}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.66rem;font-weight:700;background:#f1f1f7;color:var(--slate);border:1px solid var(--panel-border-strong)}
.perm-table th,.perm-table td{padding:5px 8px}
.perm-table input[type=radio]{width:13px;height:13px;accent-color:var(--purple);cursor:pointer}
.chip.on{background:var(--success-bg);color:var(--success);border-color:#b6ead4}
.chip.off{background:var(--danger-bg);color:var(--danger);border-color:#f3c1cd}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:#f0dcac}
td.actions{display:flex;gap:5px;flex-wrap:wrap}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}

/* Entrega de premios (redemption) */
.redemption-filters{display:flex;gap:6px}
.chip-filter{cursor:pointer;border:1px solid var(--panel-border-strong);background:#fff;color:var(--muted);font-size:.75rem;font-weight:700;padding:6px 13px;border-radius:20px;font-family:inherit;transition:.15s}
.chip-filter:hover{border-color:var(--purple)}
.chip-filter.active{background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;border-color:transparent}
#redemptionList table code{background:#f4f2fb;color:var(--purple-dark);padding:2px 6px;border-radius:5px;font-size:.78rem;letter-spacing:.02em}

/* QR scanner modal */
.qr-scanner-modal{max-width:420px}
.qr-scanner-video-wrap{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#000;margin:12px 0}
.qr-scanner-video-wrap video{width:100%;height:100%;object-fit:cover}
.qr-scanner-frame{position:absolute;inset:14%;border:3px solid var(--purple-light);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.prize-card{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:6px;box-shadow:var(--shadow-sm)}
.prize-card img{width:32px;height:32px;object-fit:cover;border-radius:6px;margin-right:9px}
/* Placeholder elegante para imagens que nao carregaram apos varias tentativas
   (ex.: arquivo de um deploy antigo que nao existe mais) - troca o icone
   quebrado do navegador por um aviso discreto e consistente com a marca,
   deixando claro que so precisa reenviar a imagem no proprio campo. Aplicado
   a um <div> que substitui o <img> quebrado (ver setupImageRetry em app.js),
   ja que um <img> sem src nao renderiza conteudo/pseudo-elemento de forma
   confiavel entre navegadores. */
.img-broken-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f7f5fc,#efeaf9);
  border:1px dashed var(--panel-border-strong);color:var(--muted-2);
  font-size:1.1rem;text-align:center;flex-shrink:0;
  border-radius:6px;margin-right:9px;
}
.prize-card .meta{color:var(--muted);font-size:.71rem;margin-top:2px}

/* View toggle (lista / cards) - reused for Prêmios, and the pattern is
   available for any future page that wants the same list-vs-grid switch. */
.view-toggle{display:inline-flex;border:1px solid var(--panel-border-strong);border-radius:20px;padding:2px;background:#fff}
.view-toggle-btn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;color:var(--muted);font-size:.73rem;font-weight:700;padding:5px 11px;border-radius:18px;cursor:pointer;font-family:inherit}
.view-toggle-btn.active{background:var(--grad);color:#fff}

/* Prêmios - "cards" view: bigger visual tiles instead of the compact list rows */
.prize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.prize-card-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.prize-card-tile-img{width:100%;aspect-ratio:4/3;background:#faf9fd;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prize-card-tile-img img{width:100%;height:100%;object-fit:cover}
.prize-card-tile-noimg{font-size:2.4rem;opacity:.5}
.prize-card-tile-body{padding:10px 12px;flex:1}
.prize-card-tile-title{margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prize-card-tile-actions{display:flex;gap:8px;padding:0 12px 12px}
.prize-card-tile-actions .btn{flex:1}
/* Clientes - "cards" view + seleção em massa */
.customer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.customer-card-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:#fff;border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 14px 14px}
.customer-card-tile .cust-check-wrap{position:absolute;top:10px;left:10px}
.customer-card-avatar{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:4px}
.customer-card-doc,.customer-card-contact{font-size:.78rem;color:var(--muted)}
.customer-card-meta{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.customer-card-date{font-size:.7rem;color:var(--muted);opacity:.85}
.customer-card-tile .cust-del-btn{margin-top:8px;width:100%}
.bulk-action-bar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--panel-border-strong);border-radius:var(--radius-sm);padding:9px 14px;margin-bottom:12px;font-size:.8rem;font-weight:600}
.bulk-action-bar.hidden{display:none}
/* Generic utility used by JS (classList.toggle('hidden', ...)) - was missing
   entirely, so the game-preview "Clique em um elemento" hint was permanently
   visible and its toggle did nothing. register/style.css already had this. */
.hidden{display:none !important}

/* Campo de senha com botao de mostrar/ocultar */
.password-wrap{position:relative;display:flex;align-items:center}
.password-wrap input{padding-right:36px}
.password-toggle{position:absolute;right:6px;background:none;border:none;color:var(--muted-2);cursor:pointer;padding:4px;display:flex;align-items:center;border-radius:6px}
.password-toggle:hover{color:var(--purple);background:#f4ebff}
/* Senha gerada no reset: destaque para leitura/copia */
.password-reveal{display:flex;align-items:center;gap:10px;background:#f7f5fc;border:1px dashed var(--purple-light);border-radius:var(--radius-sm);padding:12px 14px;margin:10px 0}
.password-reveal code{font-size:1.05rem;font-weight:800;letter-spacing:1px;color:var(--purple-dark);word-break:break-all;flex:1}

/* Painel com titulo + acoes na mesma linha */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.panel-head h3{margin:0}
/* Ficha de dados do cliente: leitura primeiro, edicao sob demanda */
.data-card{border:1px solid var(--panel-border);border-radius:var(--radius);overflow:hidden}
.data-row{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:10px 14px;border-bottom:1px solid var(--panel-border)}
.data-row:last-child{border-bottom:none}
.data-row:nth-child(odd){background:#fbfaff}
.data-label{color:var(--muted);font-size:.74rem;font-weight:600}
.data-value{color:var(--text);font-size:.82rem;font-weight:600;word-break:break-word}
@media (max-width:640px){.data-row{grid-template-columns:1fr;gap:2px}}

/* Sub-headings inside a long panel (e.g. Câmera e cinema, which groups
   movement / lighting / image-finish settings). Lighter than an <h3> so the
   panel still reads as one card rather than three. */
.subpanel-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-2);font-weight:700;margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--panel-border)}
.subpanel-title:first-of-type{margin-top:6px}
/* Range sliders + their live numeric readout. */
.field input[type=range]{width:100%;padding:0;height:22px;background:transparent;border:none;accent-color:var(--purple);cursor:pointer}
.field input[type=range]:focus{outline:none;box-shadow:none}
.slider-value{float:right;color:var(--purple-dark);font-weight:800;font-variant-numeric:tabular-nums}
.copy-box{display:flex;gap:6px;align-items:center;justify-content:space-between;background:#faf9fd;border:1px dashed var(--panel-border-strong);border-radius:var(--radius-sm);padding:7px 10px;font-family:'SF Mono',monospace;font-size:.74rem;word-break:break-all}
.tabs-sub{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs-sub button{background:#fff;border:1px solid var(--panel-border-strong);color:var(--muted);padding:5px 12px;border-radius:30px;cursor:pointer;font-size:.73rem;font-weight:600;font-family:inherit}
.tabs-sub button.active{background:var(--grad);color:#fff;border-color:transparent}

/* Personalização - "cards" view: panels side by side instead of stacked */
.theme-grid-view{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start}
.theme-grid-view .panel{margin-bottom:0}

/* Upload widget */
.upload-box{border:1.5px dashed var(--panel-border-strong);border-radius:var(--radius-sm);padding:10px;text-align:center;cursor:pointer;background:#faf9fd;transition:.15s}
.upload-box:hover{border-color:var(--purple);background:#f7f0ff}
.upload-box img{max-height:44px;max-width:100%;border-radius:6px;margin-bottom:5px}
.upload-box .hint{color:var(--muted);font-size:.71rem}
.upload-spec{color:var(--muted-2);font-size:.66rem;margin-top:3px}
.color-swatch-row{display:flex;gap:7px;align-items:center}
.color-swatch-row input[type=color]{width:32px;height:28px;border-radius:6px;border:1px solid var(--panel-border-strong);background:none;padding:2px;cursor:pointer}
.color-swatch-row input[type=text]{flex:1}

/* Preset picker cards (Quadra / Ambiente / Trilha sonora) - a small grid of
   clickable cards instead of a plain <select>, so the options feel like a
   modern gallery of ready-made looks rather than a dropdown list. */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px}
.preset-card{border:1.5px solid var(--panel-border-strong);border-radius:var(--radius-sm);padding:8px;cursor:pointer;background:#faf9fd;transition:.15s;text-align:center}
.preset-card:hover{border-color:var(--purple);background:#f7f0ff}
.preset-card.active{border-color:var(--purple);box-shadow:0 0 0 2px rgba(153,52,255,.18);background:#f7f0ff}
.preset-swatch{width:100%;height:38px;border-radius:6px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.preset-label{font-size:.72rem;font-weight:700;color:var(--slate)}
.preset-card.active .preset-label{color:var(--purple-dark)}

/* Charts (hand-rolled SVG) */
.chart-wrap{background:#faf9fd;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:10px;overflow-x:auto}
.bar-label{fill:var(--muted);font-size:9px;font-family:'Inter',sans-serif}
.bar-value{fill:var(--text);font-size:10px;font-weight:700;font-family:'Inter',sans-serif}
/* Relatorios: graficos de pizza lado a lado na mesma linha, em vez de
   empilhados um embaixo do outro. auto-fit acomoda tanto os 3 graficos da
   aba Dispositivos quanto os 2 da aba Clientes sem deixar coluna vazia, e
   quebra para menos colunas em telas estreitas.
   align-items:stretch (era "start") + os 2 blocos abaixo (.panel virando uma
   coluna flex, .pie-chart-wrap crescendo pra preencher) sao o que garante
   que os cartoes de uma mesma linha sempre ficam com a MESMA altura e o
   circulo sempre com o MESMO tamanho, mesmo quando um grafico tem uma legenda
   bem mais longa (mais categorias) que o vizinho - antes disso, "start"
   deixava cada cartao com a altura do seu proprio conteudo, o que lia como
   graficos de tamanhos diferentes numa mesma fileira. */
.charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;align-items:stretch;margin-bottom:12px}
.charts-row .panel{margin-bottom:0;display:flex;flex-direction:column}
.pie-chart-wrap{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;background:#faf9fd;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:14px;flex:1}
.pie-legend{display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.pie-legend-item{display:flex;align-items:center;gap:8px;border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:background-color .12s}
.pie-legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex-shrink:0}
/* Hover feedback + the single shared tooltip (see setupChartTooltips in
   app.js) - same treatment on every pie slice/bar/legend row in the app. */
.pie-slice{cursor:pointer;transition:opacity .12s,filter .12s}
.pie-slice:hover{opacity:.85}
.bar-rect{cursor:pointer;transition:opacity .12s}
.bar-rect:hover{opacity:.8}
.chart-hover-active.pie-slice{opacity:.85;filter:brightness(1.12)}
.chart-hover-active.pie-legend-item{background:var(--bg)}
.chart-tooltip{position:fixed;z-index:9999;pointer-events:none;background:var(--slate-dark);color:#fff;padding:7px 11px;border-radius:8px;font-size:.78rem;line-height:1.35;box-shadow:0 6px 20px rgba(20,20,30,.25);display:flex;flex-direction:column;gap:2px;max-width:240px}
.chart-tooltip strong{font-weight:700}
.chart-tooltip span{color:rgba(255,255,255,.75);font-weight:600}
.chart-tooltip.hidden{display:none}
.report-subtabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.report-subtab-btn{padding:8px 16px;border-radius:999px;border:1px solid var(--panel-border);background:#fff;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--muted)}
.report-subtab-btn.active{background:var(--purple);border-color:var(--purple);color:#fff}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(31,35,51,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;animation:modalFade .15s ease}
.modal{background:#fff;border:1px solid var(--panel-border);border-radius:16px;padding:18px;max-width:380px;width:100%;box-shadow:var(--shadow-lg);animation:modalPop .18s cubic-bezier(.2,.9,.3,1.2)}
.modal h3{margin-top:0;color:var(--slate-dark);font-size:.95rem}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Modal de confirmacao padronizado (usado em toda acao destrutiva/importante:
   excluir premio, remover participante, remover admin, etc.) - substitui o
   confirm() nativo do navegador para manter a identidade visual do painel. */
.modal-confirm{max-width:360px;text-align:center;padding:26px 22px 20px}
.modal-confirm-icon{
  width:48px;height:48px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-light));color:#fff;
}
.modal-confirm.modal-danger .modal-confirm-icon{background:linear-gradient(135deg,#e2415f,#ff7590)}
.modal-confirm h3{font-size:1rem;margin-bottom:6px}
.modal-confirm .panel-sub{margin-bottom:0;font-size:.8rem;line-height:1.5}
.modal-actions{display:flex;gap:10px;margin-top:20px;justify-content:center}
.modal-actions .btn{flex:1;max-width:150px}

.empty-state{color:var(--muted);font-size:.78rem;text-align:center;padding:18px 10px}

/* ---------- Compact grid helpers for forms with many fields ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}

/* ---------- Theme editor + live phone preview ---------- */
/* Two columns: editable fields on the left, a live "phone" preview on the
   right that mirrors the real registration/controller page in an iframe -
   updates on every field change (colors, button style, image uploads) before
   anything is saved, so the operator can see exactly how it'll look. */
.theme-with-preview{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.preview-col{position:sticky;top:12px}
.preview-frame-wrap{background:#1a1a22;border-radius:32px;padding:12px 10px;box-shadow:var(--shadow-lg);border:1px solid #2a2a35}
.preview-frame-wrap .preview-notch{width:64px;height:6px;background:#0d0d12;border-radius:4px;margin:0 auto 8px}
.preview-frame{width:100%;height:520px;border:none;border-radius:20px;background:#0b1f16;display:block}
.preview-tabs{display:flex;gap:6px;margin-bottom:10px}
.preview-tabs button{flex:1;padding:7px 8px;border-radius:8px;border:1px solid var(--panel-border);background:#f7f5fc;color:var(--slate);font-weight:700;font-size:.72rem;cursor:pointer;font-family:inherit}
.preview-tabs button.active{background:linear-gradient(135deg,#9934ff,#bd7cff);color:#fff;border-color:transparent}
.preview-label{text-align:center;color:var(--muted-2);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
@media (max-width:1100px){
  .theme-with-preview{grid-template-columns:1fr}
  .preview-col{position:static;max-width:300px}
}

/* ---------- Game screen (LED panel) live preview + per-element config ---------- */
.game-preview-frame-wrap{background:#0b1017;border-radius:14px;padding:8px;box-shadow:var(--shadow-lg);border:1px solid #1c2330}
.game-preview-frame{width:100%;height:420px;border:none;border-radius:8px;display:block;background:#000}
.preview-frame-wrap-game{background:#0b1017;border-radius:14px;padding:8px;border:1px solid #1c2330;box-shadow:var(--shadow-lg)}
.preview-frame-game{width:100%;height:380px;border:none;border-radius:8px;display:block;background:#000;cursor:default}
.edit-mode-hint{background:#fff6d8;border:1px solid #e8c766;color:#7a5a00;font-size:.72rem;font-weight:700;text-align:center;border-radius:8px;padding:6px 8px;margin-bottom:8px}
#previewEditModeBtn.active-toggle{background:linear-gradient(135deg,#ffd400,#ff9f2e);color:#3a2a00;border-color:transparent;font-weight:700}
.element-row-flash{animation:elementRowFlash 1.6s ease}
@keyframes elementRowFlash{
  0%{box-shadow:0 0 0 3px rgba(255,212,0,.9);background:#fffbe8}
  100%{box-shadow:0 0 0 0 rgba(255,212,0,0);background:#faf9fd}
}

/* Each element (quadra, arquibancada, torcida, juiz, etc.) gets a card with a
   show/hide switch as the header and its size/rotation/color controls below -
   reads like a proper scene-object inspector rather than a flat pile of
   sliders, so a long list of 9 elements stays scannable. */
#elementConfigList{display:flex;flex-direction:column;gap:10px}
.element-row{border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:12px 14px;background:#faf9fd}
.element-row-head{display:flex;align-items:center;margin-bottom:8px}
.switch-label{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--slate-dark)}
.switch-label input[type=checkbox]{width:36px;height:20px;appearance:none;-webkit-appearance:none;background:#d8d5e6;border-radius:20px;position:relative;cursor:pointer;transition:.15s;flex-shrink:0}
.switch-label input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch-label input[type=checkbox]:checked{background:linear-gradient(135deg,var(--purple),var(--purple-light))}
.switch-label input[type=checkbox]:checked::after{left:18px}
.element-row-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 16px}
.element-row-controls .field label{font-size:.72rem}
.element-row-controls input[type=range]{width:100%}

/* ---------- Collapsible panels (Personalizacao) ---------- */
.panel h3.panel-header-toggle{
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  user-select:none;transition:.15s;
}
.panel h3.panel-header-toggle:hover{color:var(--purple-dark)}
.panel-chevron{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--muted);
  transition:transform .2s ease,background .15s,color .15s;
}
.panel h3.panel-header-toggle:hover .panel-chevron{background:rgba(153,52,255,.1);color:var(--purple)}
.panel.collapsed .panel-chevron{transform:rotate(-90deg)}
.panel-collapsible-body{
  overflow:hidden;max-height:4000px;opacity:1;
  transition:max-height .25s ease,opacity .2s ease,margin-top .2s ease;
}
.panel.collapsed .panel-collapsible-body{max-height:0;opacity:0;margin-top:0;pointer-events:none}

/* ---------- Clientes (customer list + detail) ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0;flex-wrap:wrap}
.pagination-info{color:var(--muted);font-size:.75rem;font-weight:600}
.list-pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px}
.cust-link{color:var(--purple-dark);text-decoration:none}
.cust-link:hover{text-decoration:underline}
.cust-prize-select{padding:5px 8px;border-radius:var(--radius-sm);border:1px solid var(--panel-border-strong);font-size:.75rem;font-family:inherit;background:#fff;color:var(--text)}

/* ---------- Responsive: tablet / mobile admin usage ---------- */
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .content{padding:14px}
}
@media (max-width:720px){
  .layout{flex-direction:column}
  .sidebar,.sidebar.collapsed{width:100%;display:flex;flex-wrap:wrap;gap:2px;padding:8px;border-right:none;border-bottom:1px solid var(--panel-border)}
  .sidebar .group-label{width:100%;padding:6px 6px 2px}
  .sidebar button[data-tab]{width:auto;flex:1 1 auto}
  .sidebar.collapsed button[data-tab] span{display:inline}
  .sidebar-toggle{width:auto;flex:1 1 100%}
  .topbar{flex-wrap:wrap;gap:8px}
}

/* ============================================================
   DESIGN SYSTEM OPTIMALL v2 - camada de refinamento oficial
   Aplica os tokens exatos do guia de marca (cores amostradas do
   arquivo vetorial oficial, tipografia Poppins+Inter, raio pill
   como assinatura, sombras oficiais) por cima da base existente,
   sem tocar na estrutura/JS do painel.
   ============================================================ */
:root{
  /* Paleta oficial - Roxo Optimall */
  --violet-50:#F5EBFF; --violet-100:#EAD6FF; --violet-300:#BD7CFF;
  --violet-500:#9934FF; --violet-600:#9333EA; --violet-700:#7A1FD9; --violet-900:#581C87;
  /* Slate Optimall (neutros extraidos do logotipo) */
  --ink-50:#F6F7F8; --ink-100:#EDEFF2; --ink-400:#98A0B3; --ink-500:#757F99;
  --ink-600:#525A6F; --ink-900:#21242C;
  /* Semanticas oficiais */
  --ok-text:#16A34A; --ok-bg:#DCFCE7; --warn-text:#D97706; --warn-bg:#FEF3C7;
  --err-text:#DC2626; --err-bg:#FEE2E2; --info-text:#2563EB; --info-bg:#DBEAFE;
  /* Tokens de forma/sombra oficiais */
  --radius-pill:9999px; --radius-lg:20px; --radius-md:14px; --radius-sm2:10px;
  --shadow-card:0 1px 2px rgba(33,36,44,.04), 0 14px 32px rgba(33,36,44,.07);
  --shadow-btn:0 12px 24px rgba(153,52,255,.30);
  /* Reapontar os tokens legados para os oficiais - todo o CSS antigo herda */
  --bg:var(--ink-50); --panel-border:var(--ink-100); --panel-border-strong:#DFE3EA;
  --purple:var(--violet-500); --purple-light:var(--violet-300); --purple-dark:var(--violet-700);
  --slate:var(--ink-600); --slate-dark:var(--ink-900);
  --text:var(--ink-900); --muted:var(--ink-500); --muted-2:var(--ink-400);
  --danger:var(--err-text); --danger-bg:var(--err-bg); --success:var(--ok-text); --success-bg:var(--ok-bg);
  --warn:var(--warn-text); --warn-bg:var(--warn-bg);
  --radius:var(--radius-lg); --radius-sm:var(--radius-sm2);
  --shadow-sm:var(--shadow-card); --shadow-md:var(--shadow-card);
}
/* Tipografia oficial: Poppins nos titulos, Inter no corpo (ja e a base). */
h1,h2,h3,.content h2,.auth-card h1,.panel h3,.stat-card .num,.modal h3{
  font-family:'Poppins','Inter',system-ui,sans-serif;
}
.panel h3{font-weight:600;color:var(--ink-900)}
.content h2{font-weight:700}
.sidebar .group-label{color:var(--ink-400);letter-spacing:.09em}

/* Botoes: pill e a assinatura visual da marca. Primario com a sombra oficial. */
.btn{border-radius:var(--radius-pill);font-weight:600}
.btn-primary{background:var(--violet-500);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--violet-700)}
.btn-secondary,.btn-ghost{border-radius:var(--radius-pill)}
.btn-secondary{background:var(--violet-50);color:var(--violet-700)}
.btn-secondary:hover{background:var(--violet-100)}
.btn-ghost{color:var(--ink-600)}
.btn-ghost:hover{background:var(--ink-50);color:var(--ink-900)}
.btn-danger{border-radius:var(--radius-pill)}

/* Menu lateral (padrao painel Optimall): item ativo roxo SOLIDO texto branco. */
.sidebar button[data-tab]{border-radius:var(--radius-sm2);color:var(--ink-600)}
.sidebar button[data-tab].active{background:var(--violet-500);color:#fff;box-shadow:0 8px 18px rgba(153,52,255,.28)}
.sidebar button[data-tab].active svg{color:#fff;opacity:1}
.sidebar-toggle{border-radius:var(--radius-sm2)}

/* Cards e paineis: raio grande + sombra oficial + numeros Poppins slate. */
.panel,.stat-card,.auth-card{border-radius:var(--radius-lg);border-color:var(--ink-100);box-shadow:var(--shadow-card)}
.stat-card .num{background:none;color:var(--ink-900);-webkit-background-clip:initial;background-clip:initial;font-weight:700}
.stat-card{border-left:3px solid var(--violet-500)}

/* Inputs: raio md oficial, foco em anel violeta. */
.field input,.field select,.field textarea{border-radius:var(--radius-md)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(153,52,255,.15)}

/* Abas (padrao oficial: sublinhado - ativa ink-900 com borda 2.5px). */
.tabs-sub{gap:2px;border-bottom:1px solid var(--ink-100);padding-bottom:0}
.tabs-sub button{background:none;border:none;border-radius:0;border-bottom:2.5px solid transparent;color:var(--ink-400);padding:7px 12px 8px;font-weight:600}
.tabs-sub button:hover{color:var(--ink-600)}
.tabs-sub button.active{background:none;color:var(--ink-900);border-bottom-color:var(--violet-500);font-weight:700}

/* Badges/status: pill + ponto colorido, fundo claro da mesma familia. */
.badge,.status-pill,.tag{border-radius:var(--radius-pill)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;font-size:.7rem;font-weight:600}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge.ok,.badge-success{background:var(--ok-bg);color:var(--ok-text)}
.badge.warn,.badge-warn{background:var(--warn-bg);color:var(--warn-text)}
.badge.err,.badge-danger{background:var(--err-bg);color:var(--err-text)}
.badge.info{background:var(--info-bg);color:var(--info-text)}
.badge.neutral{background:var(--ink-100);color:var(--ink-600)}
.badge.violet{background:var(--violet-50);color:var(--violet-700)}

/* Barras de progresso: trilha ink-100, preenchimento violet-500, pill. */
.progress,.progress-track{background:var(--ink-100);border-radius:var(--radius-pill)}
.progress-fill{background:var(--violet-500);border-radius:var(--radius-pill)}

/* Selecao de texto e detalhes finos. */
::selection{background:var(--violet-300);color:#fff}
.topbar{border-bottom-color:var(--ink-100)}

/* ============================================================
   DESIGN SYSTEM OPTIMALL v3 - passe de refinamento profissional
   Eleva o acabamento visual do painel (topbar, sidebar, cards,
   tabelas, inputs, micro-interacoes) mantendo 100% dos tokens
   oficiais da marca. So estilo - nao toca em estrutura nem JS.
   ============================================================ */

/* Canvas com leve profundidade de marca (mesmos roxos/slate do guia),
   dando o "respiro" do painel Optimall sem competir com o conteudo. */
body{background:
  radial-gradient(1200px 480px at 100% -10%, rgba(153,52,255,.05), transparent 60%),
  radial-gradient(900px 420px at -10% 110%, rgba(82,90,111,.05), transparent 55%),
  var(--ink-50);}

/* Topbar: vidro fosco fino + sombra sutil ao rolar - acabamento de produto. */
.topbar{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);box-shadow:0 1px 0 rgba(33,36,44,.05);padding-top:10px;padding-bottom:10px}
.brand img{height:18px}
.promo-switch-btn{border-radius:var(--radius-pill);transition:.15s}
.promo-switch-btn:hover{border-color:var(--violet-300);box-shadow:0 0 0 3px rgba(153,52,255,.08)}
.promo-dropdown{border-radius:var(--radius-md)}
.promo-dropdown .promo-item.active{background:var(--violet-50)}

/* Sidebar: itens mais arejados; item ativo roxo SOLIDO (padrao painel
   Optimall) ja vem do v2 - aqui so um trilho de destaque a esquerda e um
   hover mais suave da familia violeta. */
.sidebar{padding:12px 12px}
.sidebar button[data-tab]{position:relative;transition:background .14s, color .14s}
.sidebar button[data-tab]:hover{background:var(--violet-50);color:var(--ink-900)}
.sidebar button[data-tab].active{background:var(--violet-500);color:#fff;box-shadow:0 8px 18px rgba(153,52,255,.28)}
.sidebar button[data-tab].active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--violet-500)}
.sidebar.collapsed button[data-tab].active::before{display:none}

/* Titulo de pagina com hierarquia Poppins mais clara. */
.content h2{font-size:1.18rem;letter-spacing:-.015em}
.content .page-sub{font-size:.8rem}

/* Stat-cards: numero Poppres slate + badge de icone quadrado violet-50
   (padrao "Cards e dados" do guia), realce lateral e leve elevacao no hover. */
.grid-stats{gap:12px}
.stat-card{padding:14px 16px;border:1px solid var(--ink-100);border-left:3px solid var(--violet-500);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .15s, box-shadow .15s}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(33,36,44,.05),0 18px 40px rgba(33,36,44,.10)}
.stat-card .num{font-family:'Poppins','Inter',sans-serif;font-size:1.5rem;font-weight:700;color:var(--ink-900);background:none;-webkit-text-fill-color:currentColor}
.stat-card .label{font-size:.72rem;color:var(--ink-500);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* Tabelas: cabecalho slate discreto, linhas com hover violeta muito leve,
   cantos grandes coerentes com os cards. */
table{border-radius:var(--radius-lg);border-color:var(--ink-100);box-shadow:var(--shadow-card)}
th{background:#FBFAFE;color:var(--ink-500)}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--violet-50)}
td{border-bottom-color:var(--ink-100)}

/* Paineis: raio grande + sombra oficial + titulo Poppins. */
.panel{border-radius:var(--radius-lg);border-color:var(--ink-100);box-shadow:var(--shadow-card);padding:16px 18px}
.panel h3{font-family:'Poppins','Inter',sans-serif;font-weight:600;font-size:.92rem}

/* Botoes: microinteracao de toque + foco acessivel com anel de marca. */
.btn{transition:transform .12s, box-shadow .15s, background .15s, color .15s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary:hover{box-shadow:0 14px 28px rgba(153,52,255,.34)}
.btn:focus-visible,.sidebar button[data-tab]:focus-visible,.promo-switch-btn:focus-visible,.tabs-sub button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(153,52,255,.35)}

/* Inputs: transicao suave e placeholder na cor neutra do guia. */
.field input,.field select,.field textarea{transition:border-color .15s, box-shadow .15s;border-radius:var(--radius-md)}
.field input::placeholder{color:var(--ink-400)}

/* Modais e dropdowns herdam o raio/sombra oficiais. */
.modal,.confirm-modal,.promo-dropdown{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}

/* Scrollbar discreta na identidade slate/violeta (WebKit). */
.content::-webkit-scrollbar{width:10px;height:10px}
.content::-webkit-scrollbar-thumb{background:var(--ink-100);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:content-box}
.content::-webkit-scrollbar-thumb:hover{background:var(--violet-300);background-clip:content-box}

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce){
  .btn,.stat-card,.sidebar button[data-tab],.field input,.field select{transition:none}
  .btn:active{transform:none}
}