/* ==========================================================================
   Precificador 3D · Shopee — folha de estilo própria, sem CDN nem framework.
   Tema claro e escuro pelos tokens; nenhuma cor definida só dentro do @media.
   ========================================================================== */

:root{
  --fundo:#F2F3F1;
  --superficie:#FFFFFF;
  --superficie-2:#F7F8F6;
  --tinta:#151B1A;
  --tinta-2:#414D4B;
  --apagado:#6E7B79;
  --linha:#DCE1DE;
  --linha-suave:#E9EDEA;
  --acento:#C9401B;
  --acento-tinta:#FFFFFF;
  --acento-suave:#FAECE7;
  --bom:#0E6E5E;
  --bom-suave:#E2F1ED;
  --ruim:#B3341C;
  --alerta:#8A5B06;
  --alerta-suave:#FBF1DC;
  --sombra:0 1px 2px rgba(20,30,28,.06), 0 8px 24px rgba(20,30,28,.05);
  --raio:10px;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#0F1413;
    --superficie:#171E1D;
    --superficie-2:#1D2624;
    --tinta:#E8ECEA;
    --tinta-2:#B7C2BF;
    --apagado:#7F8D8A;
    --linha:#2A3634;
    --linha-suave:#222C2A;
    --acento:#F2683F;
    --acento-tinta:#1A0E09;
    --acento-suave:#2B1710;
    --bom:#4CC0A8;
    --bom-suave:#102A26;
    --ruim:#F27A5E;
    --alerta:#DFA83E;
    --alerta-suave:#2A2110;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.oculto{display:none !important;}
h1,h2,h3{margin:0;letter-spacing:-.015em;}
h2{font-size:1.4rem;} h3{font-size:1rem;margin-bottom:10px;}
p{margin:0 0 10px;}
code,kbd{font-family:var(--mono);font-size:.85em;background:var(--superficie-2);border:1px solid var(--linha-suave);border-radius:4px;padding:.08em .32em;}

/* ------------------------------- login ---------------------------------- */
.tela-login{min-height:100dvh;display:grid;place-items:center;padding:24px;}
.cartao-login{
  width:min(380px,100%);background:var(--superficie);border:1px solid var(--linha);
  border-radius:14px;padding:28px;box-shadow:var(--sombra);display:grid;gap:14px;
}
.marca-login{display:flex;gap:12px;align-items:center;margin-bottom:6px;}
.marca-login h1{font-size:1.2rem;}
.marca-login p{margin:0;color:var(--apagado);font-size:.86rem;}
.marca-ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--acento);color:var(--acento-tinta);font-size:1.1rem;
}
.erro-login{color:var(--ruim);font-size:.88rem;margin:0;}

/* -------------------------------- app ----------------------------------- */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100dvh;}
.barra-lateral{
  background:var(--superficie);border-right:1px solid var(--linha);
  padding:20px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100dvh;
}
.marca{display:flex;align-items:center;gap:10px;font-weight:650;}
.marca-txt{font-size:.98rem;}
.nav{display:grid;gap:3px;}
.nav-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-radius:8px;padding:9px 11px;cursor:pointer;
  color:var(--tinta-2);font:inherit;font-size:.93rem;
}
.nav-btn:hover{background:var(--superficie-2);color:var(--tinta);}
.nav-btn.ativo{background:var(--acento-suave);color:var(--acento);font-weight:600;}
.nav-ico{width:1.1em;text-align:center;opacity:.8;}
.rodape-lateral{margin-top:auto;display:grid;gap:8px;}
.chip-usuario{font-size:.8rem;color:var(--apagado);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* medidor do MEI */
.medidor{background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--raio);padding:12px;}
.medidor-topo{display:flex;justify-content:space-between;align-items:baseline;}
.medidor-rot{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--apagado);font-family:var(--mono);}
.medidor-ano{font-size:.72rem;color:var(--apagado);font-family:var(--mono);}
.barra{height:7px;border-radius:99px;background:var(--linha);overflow:hidden;margin:9px 0 7px;}
.barra-preenchida{height:100%;width:0;background:var(--bom);border-radius:99px;transition:width .3s;}
.barra-preenchida.atencao{background:var(--alerta);}
.barra-preenchida.perigo{background:var(--ruim);}
.medidor-nums{display:grid;gap:1px;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.medidor-nums strong{font-size:.86rem;}
.medidor-nums span{font-size:.72rem;}
.medidor-nums span{color:var(--apagado);}
.medidor-nota{font-size:.72rem;color:var(--apagado);margin:6px 0 0;line-height:1.4;}

/* ------------------------------ conteúdo -------------------------------- */
.conteudo{padding:26px 30px 60px;min-width:0;}
.cabecalho{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.sub{color:var(--apagado);font-size:.88rem;margin:4px 0 0;}
.cabecalho-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ------------------------------ controles ------------------------------- */
.btn{
  border:1px solid var(--linha);background:var(--superficie);color:var(--tinta);
  font:inherit;font-size:.9rem;padding:8px 14px;border-radius:8px;cursor:pointer;
}
.btn:hover{background:var(--superficie-2);}
.btn-primario{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta);font-weight:600;}
.btn-primario:hover{filter:brightness(1.07);background:var(--acento);}
.btn-fantasma{background:none;}
.btn-bloco{width:100%;}
.btn-pq{padding:6px 11px;font-size:.85rem;}
.btn-perigo{color:var(--ruim);border-color:var(--linha);}
.link-btn{background:none;border:none;color:var(--acento);cursor:pointer;font:inherit;padding:0;text-decoration:underline;}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px;}

.campo{display:grid;gap:5px;font-size:.82rem;color:var(--tinta-2);}
.campo > span{font-weight:600;}
input,select,textarea{
  font:inherit;font-size:.92rem;color:var(--tinta);background:var(--superficie);
  border:1px solid var(--linha);border-radius:8px;padding:8px 10px;width:100%;
}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums;}
textarea{resize:vertical;}
.linha{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.linha > .campo{flex:1 1 150px;min-width:0;}
.linha > .campo.cresce{flex:2 1 220px;}
.check{display:flex;gap:8px;align-items:center;font-size:.88rem;color:var(--tinta-2);margin-bottom:10px;}
.check input{width:auto;}
.inline{display:flex;align-items:center;gap:6px;font-size:.86rem;}
.mini{width:80px;}
.busca{width:min(280px,50vw);}
.seletor{width:auto;}
.ajuda{font-size:.83rem;color:var(--apagado);margin:-2px 0 12px;}
.aviso{background:var(--alerta-suave);border:1px solid var(--linha);border-left:3px solid var(--alerta);
  border-radius:8px;padding:9px 12px;font-size:.85rem;color:var(--tinta-2);}

/* -------------------------------- blocos -------------------------------- */
.bloco{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sombra);}
.colunas{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.coluna-painel{position:sticky;top:26px;}

/* -------------------------------- grade --------------------------------- */
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;}
.cartao{
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;position:relative;
}
.cartao.selecionado{border-color:var(--acento);box-shadow:0 0 0 2px var(--acento-suave);}
.cartao-foto{aspect-ratio:1;background:var(--superficie-2);display:grid;place-items:center;overflow:hidden;}
.cartao-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.sem-foto{color:var(--apagado);font-size:2rem;}
.cartao-corpo{padding:11px 13px;display:grid;gap:5px;flex:1;}
.cartao-nome{font-weight:650;font-size:.93rem;line-height:1.3;}
.cartao-meta{font-size:.76rem;color:var(--apagado);font-family:var(--mono);}
.cartao-preco{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:2px;}
.preco{font-family:var(--mono);font-size:1.08rem;font-weight:700;font-variant-numeric:tabular-nums;}
.lucro{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--bom);}
.lucro.negativo{color:var(--ruim);}
.cartao-acoes{display:flex;gap:6px;padding:0 13px 12px;flex-wrap:wrap;}
.marca-sel{position:absolute;top:8px;left:8px;z-index:2;width:20px;height:20px;cursor:pointer;}
.etiquetas{display:flex;gap:4px;flex-wrap:wrap;}
.etiqueta{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.16em .45em;border-radius:4px;background:var(--superficie-2);color:var(--apagado);border:1px solid var(--linha-suave);}
.etiqueta.ok{background:var(--bom-suave);color:var(--bom);border-color:transparent;}
.etiqueta.alerta{background:var(--alerta-suave);color:var(--alerta);border-color:transparent;}
.etiqueta.perigo{background:var(--acento-suave);color:var(--acento);border-color:transparent;}

.barra-selecao{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--acento-suave);
  border:1px solid var(--linha);border-radius:var(--raio);padding:10px 14px;margin-bottom:14px;font-size:.88rem;
}
.acoes-lista{margin-bottom:10px;}
.vazio{text-align:center;padding:50px 20px;color:var(--apagado);}

/* ------------------------------- galeria -------------------------------- */
.zona-solta{
  border:1.5px dashed var(--linha);border-radius:var(--raio);padding:18px;text-align:center;
  color:var(--apagado);font-size:.87rem;background:var(--superficie-2);cursor:pointer;
}
.zona-solta.sobre{border-color:var(--acento);background:var(--acento-suave);color:var(--acento);}
.galeria{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.foto{position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--linha);}
.foto img{width:100%;height:100%;object-fit:cover;display:block;}
.foto .principal{position:absolute;left:0;bottom:0;right:0;background:var(--acento);color:var(--acento-tinta);
  font-size:.6rem;text-align:center;font-family:var(--mono);letter-spacing:.05em;}
.foto .tirar{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;
  border-radius:5px;width:20px;height:20px;cursor:pointer;line-height:1;font-size:.8rem;}
.info-arquivo{margin-top:12px;background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:8px;padding:11px 13px;font-size:.85rem;}
.info-arquivo .linha-info{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.82rem;}

/* -------------------------------- painel -------------------------------- */
.painel{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;box-shadow:var(--sombra);}
.painel h4{margin:0 0 10px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--apagado);font-weight:600;}
.painel-linha{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;padding:3px 0;}
.painel-linha span{color:var(--tinta-2);}
.painel-linha b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;}
.painel-total{border-top:1px solid var(--linha);margin-top:8px;padding-top:8px;font-weight:700;}
.painel-destaque{background:var(--superficie-2);border-radius:8px;padding:12px;margin:12px 0;text-align:center;}
.painel-destaque .rot{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--apagado);display:block;}
.painel-destaque .val{font-family:var(--mono);font-size:1.55rem;font-weight:700;display:block;margin-top:2px;}

/* -------------------------------- tabelas ------------------------------- */
.tabela-rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:8px;margin-bottom:12px;}
.tabela{border-collapse:collapse;width:100%;font-size:.86rem;}
.tabela th,.tabela td{padding:7px 10px;border-bottom:1px solid var(--linha-suave);text-align:left;vertical-align:middle;}
.tabela thead th{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--apagado);background:var(--superficie-2);white-space:nowrap;font-weight:600;}
.tabela tbody tr:last-child td{border-bottom:none;}
.tabela input{padding:5px 7px;font-size:.85rem;}
.tabela td.num{text-align:right;}
.tabela .estreito{width:110px;}

.canal-cartao{border:1px solid var(--linha);border-radius:8px;padding:14px;margin-bottom:12px;background:var(--superficie-2);}
.canal-cartao h4{margin:0 0 10px;font-size:.95rem;}
.zonas{font-size:.82rem;color:var(--tinta-2);margin-top:10px;}
.zonas ul{margin:6px 0 0;padding-left:1.1em;}

/* --------------------------------- toast -------------------------------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;pointer-events:none;
  background:var(--tinta);color:var(--fundo);padding:10px 18px;border-radius:99px;font-size:.88rem;
  box-shadow:var(--sombra);max-width:90vw;text-align:center;
}
.toast.erro{background:var(--ruim);color:#fff;}

/* ------------------------------- responsivo ----------------------------- */
@media (max-width:960px){
  .colunas{grid-template-columns:1fr;}
  .coluna-painel{position:static;}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;}
  .barra-lateral{
    position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:10px;padding:12px 14px;border-right:none;border-bottom:1px solid var(--linha);
  }
  .nav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;flex:1;}
  .nav-btn{white-space:nowrap;}
  .medidor{order:5;width:100%;}
  .rodape-lateral{margin:0;grid-auto-flow:column;align-items:center;gap:10px;}
  .rodape-lateral .btn{width:auto;}
  .conteudo{padding:18px 16px 50px;}
  .busca{width:100%;}
  .cabecalho-acoes{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}