/* Seller Fácil: fundo laranja, teclas amarelas, funções em azul, resultados em cartões brancos com gráficos. */
@font-face{font-family:"Anton";src:url("fontes/Anton-Regular.ttf");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fontes/Montserrat-VF.ttf");font-weight:100 900;font-display:swap}
:root{ /* cores tiradas dos logos: laranja #f05000 e dourado #f0c000 (Seller Fácil), azul #002070 (Casa Criativa), marinho #102030, preto (Korven) */
  --lar:#ff7a1a;--lar2:#f05000;--lar3:#8f2c00;--am:#ffc928;--am2:#f0b800;--amsombra:#a87a00;--noite:#102030;
  --az:#123a9e;--az2:#0a1f66;--azc:#2f6bff;--azfundo:#e8eefc;--verde:#12b76a;--verm:#d11a0a;--tx:#102030;--mut:#5b6677;--bd:#e3e8f2}
*{box-sizing:border-box}
html{background:var(--lar3)}
body{margin:0;color:#fff;font:16px/1.5 "Montserrat",system-ui,Segoe UI,Roboto,sans-serif;min-height:100vh;
  background:radial-gradient(circle at 50% -10%,#ffb04d 0%,#ff7a1a 36%,#f05000 68%,#8f2c00 100%) fixed}
main{max-width:1040px;margin:0 auto;padding:22px 16px 56px}
h1,h2,h3{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.5px;margin:0}
a{color:inherit}

/* topo */
.topo{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.topo img{width:112px;height:112px;border-radius:26px;background:#fff;flex:none;box-shadow:0 8px 0 var(--lar3),0 18px 30px rgba(0,0,0,.35)}
.topo h1{font-size:46px;line-height:1;text-transform:uppercase;text-shadow:0 4px 0 var(--lar3),0 10px 24px rgba(0,0,0,.35)}
.topo h1 span{color:var(--am)}
.sub{margin:8px 0 0;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.instalar{margin:10px 0 0;font-size:14px}
@media (max-width:560px){.topo{flex-direction:column;text-align:center}.topo h1{font-size:38px}}

/* teclas amarelas */
.tecla,button.tecla{display:inline-block;border:0;cursor:pointer;font:inherit;font-family:"Anton",Impact,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  font-size:17px;color:var(--noite);text-decoration:none;padding:12px 22px;border-radius:14px;
  background:linear-gradient(#ffe06b,#ffc400);box-shadow:0 6px 0 var(--amsombra),0 12px 18px rgba(0,0,0,.28);transition:transform .08s,box-shadow .08s}
.tecla:hover{filter:brightness(1.05)}
.tecla:active{transform:translateY(5px);box-shadow:0 1px 0 var(--amsombra),0 4px 8px rgba(0,0,0,.25)}
.tecla.peq{font-size:14px;padding:8px 16px;border-radius:11px;box-shadow:0 4px 0 var(--amsombra),0 8px 12px rgba(0,0,0,.25)}
.link{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* como funciona */
.como{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.como div{display:flex;gap:12px;align-items:center;font-weight:700;background:linear-gradient(#2456d8,var(--az));border-radius:18px;padding:14px 16px;
  box-shadow:0 7px 0 var(--az2),0 14px 22px rgba(0,0,0,.28)}
.como b{flex:none;width:38px;height:38px;border-radius:50%;background:var(--am);color:var(--noite);font-family:"Anton",sans-serif;font-size:21px;display:flex;align-items:center;justify-content:center}

/* funções: cartões azuis */
.fn{background:linear-gradient(#2456d8,var(--az));border-radius:24px;padding:22px;margin-bottom:26px;
  box-shadow:0 10px 0 var(--az2),0 22px 34px rgba(0,0,0,.32)}
.fn h2{font-size:28px;text-transform:uppercase;margin-bottom:12px}
.fn h2 span{color:var(--am)}
.drop{border:3px dashed var(--am);border-radius:20px;padding:34px 16px;text-align:center;cursor:pointer;background:rgba(255,255,255,.08);font-weight:700}
.drop.over{background:rgba(255,212,59,.22)}
.drop b{color:var(--am)}
.ou{margin:16px 0 0;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-weight:600}
.ou a{color:var(--am)}
.priv{font-size:13px;margin:14px 0 0;opacity:.9}
.erro{margin:12px 0 0;background:#fff;color:var(--verm);border-radius:12px;padding:10px 14px;font-weight:700}
.faixa{background:var(--am);color:var(--noite);border-radius:16px;padding:12px 16px;margin-bottom:18px;font-weight:700;box-shadow:0 5px 0 var(--amsombra)}
.faixa .link{color:var(--noite)}
.dica{background:rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;margin:0 0 12px;font-size:15px}
.progresso{font-family:"Anton",sans-serif;font-size:22px;letter-spacing:.5px;margin:0 0 10px;color:var(--am)}
.ajustes{margin:0 0 14px;background:rgba(0,0,0,.16);border-radius:14px;padding:10px 14px}
.ajustes summary{cursor:pointer;font-weight:700}
.cfg{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.cfg label{font-size:13px;display:flex;flex-direction:column;gap:5px;font-weight:600}
input[type=number],select{width:130px;padding:9px 10px;border:3px solid #fff;border-radius:11px;background:#fff;color:var(--tx);font:700 16px "Montserrat",sans-serif}
input[type=number]:focus,select:focus{outline:0;border-color:var(--am)}
select{width:auto}
input[readonly]{opacity:.65}
input[data-sku]:placeholder-shown{border-color:var(--am)}

/* tabela de custos (dentro do cartão azul) */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
.tabela{background:#fff;color:var(--tx);border-radius:16px;overflow:hidden}
th,td{padding:10px 8px;border-bottom:1px solid var(--bd);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal;min-width:210px}
th{background:var(--azfundo);color:var(--az2);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
td small{color:var(--mut)}
.pos{color:var(--verde);font-weight:800}.neg{color:var(--verm);font-weight:800}
tr.det td{text-align:left;white-space:normal;background:#fff8dc}
.detbox{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.detbox label{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:4px;font-weight:700}
.detbox input[type=number],.detbox select{border-color:var(--bd)}
.tabela .link{color:var(--az);font-size:13px}
.tabela input[type=number]{border-color:var(--bd)}
.tabela input[data-sku]:placeholder-shown{border-color:var(--lar)}

/* resultados: cartões brancos */
.res{background:#fff;color:var(--tx);border-radius:24px;padding:20px;margin-bottom:22px;box-shadow:0 10px 0 var(--lar3),0 22px 34px rgba(0,0,0,.28)}
.res h2{font-size:28px;text-transform:uppercase;color:var(--az);margin-bottom:12px}
.res h3{font-size:20px;text-transform:uppercase;color:var(--az);margin-bottom:10px}
.res h2 small{font-family:"Montserrat";font-size:14px;color:var(--mut);text-transform:none;margin-left:8px}
.faixa-res{background:linear-gradient(90deg,var(--am),var(--lar));height:8px;border-radius:8px;margin:-4px 0 14px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.grade .res{margin-bottom:0}
.grade-wrap{margin-bottom:26px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:26px}
.kpi{border-radius:20px;padding:16px 18px;color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.22),0 16px 24px rgba(0,0,0,.25)}
.kpi small{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:12px;opacity:.92}
.kpi b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(26px,5.2vw,36px);line-height:1.15;letter-spacing:.5px;white-space:nowrap}
.kpi.k-am{background:linear-gradient(#ffe06b,#ffc400);color:var(--noite)}
.kpi.k-verde{background:linear-gradient(#2fd68a,var(--verde))}
.kpi.k-verm{background:linear-gradient(#ff5959,var(--verm))}
.kpi.k-az{background:linear-gradient(#2456d8,var(--az))}
.kpi.k-br{background:#fff;color:var(--tx)}
.kpi.k-br small{color:var(--mut)}
.vazio{color:var(--mut);font-weight:600;padding:18px 4px}

/* avisos */
.aviso{padding:12px 14px;border-radius:12px;margin-bottom:8px;border-left:6px solid;font-weight:600}
.aviso.alerta{border-color:var(--verm);background:#fff0f0}
.aviso.atencao{border-color:var(--am2);background:#fff8e1}
.aviso.info{border-color:var(--azc);background:var(--azfundo)}
.aviso.oportunidade{border-color:var(--verde);background:#e9fbf2}

/* gráficos */
.donut-box{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.donut{width:210px;height:210px;flex:none}
.donut .d1{font:400 30px "Anton",sans-serif;fill:var(--tx)}
.donut .d2{font:700 11px "Montserrat",sans-serif;fill:var(--mut);text-transform:uppercase}
.legenda{list-style:none;margin:0;padding:0;font-size:14px;font-weight:600;flex:1;min-width:170px}
.legenda li{display:flex;align-items:center;gap:8px;padding:3px 0}
.legenda i{width:14px;height:14px;border-radius:4px;flex:none}
.legenda b{margin-left:auto;padding-left:10px}
.bh{display:flex;flex-direction:column;gap:11px}
.bhl{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;font-size:13px;font-weight:700}
.bhl .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bhl .trilho{background:#eef1f7;border-radius:10px;height:22px;overflow:hidden}
.bhl .barra{height:100%;border-radius:10px;min-width:4px}
.cols{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.col .v{font:400 22px "Anton",sans-serif;margin-bottom:4px}
.col .b{width:100%;border-radius:10px 10px 0 0;min-height:4px}
.col .r{font-size:11px;font-weight:800;color:var(--mut);margin-top:6px;text-transform:uppercase;text-align:center}
.cols.fino{gap:3px}.cols.fino .col .r{font-size:9px}.cols.fino .col .b{border-radius:4px 4px 0 0}
.medidor{width:100%;max-width:320px;display:block;margin:0 auto}
.medidor .m1{font:400 38px "Anton",sans-serif;fill:var(--tx)}
.medidor .m2{font:700 11px "Montserrat",sans-serif;fill:var(--mut);text-transform:uppercase}
details{margin-top:12px}summary{cursor:pointer;color:var(--mut);font-weight:700}
.res .tabela{border:1px solid var(--bd)}

/* rodapé */
.rodape{margin-top:32px;text-align:center;font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.hidden{display:none!important}

/* logos da loja e da empresa no rodapé */
.marcas{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin:26px 0 8px}
.marcas span{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.8px;width:100%;text-align:center}
.marcas img{height:74px;width:auto;background:#fff;border-radius:16px;padding:8px 14px;box-shadow:0 6px 0 var(--lar3),0 12px 20px rgba(0,0,0,.28)}
/* conta, login e assinatura */
.conta-barra{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;color:var(--tx);border-radius:18px;padding:10px 16px;margin-bottom:18px;
  box-shadow:0 6px 0 var(--lar3),0 14px 22px rgba(0,0,0,.25)}
.conta-barra .avatar{width:40px;height:40px;border-radius:50%;flex:none}
.conta-barra .quem{flex:1;min-width:150px;display:flex;flex-direction:column;line-height:1.2}
.conta-barra small{color:var(--mut);font-weight:600}
.conta-barra .link{color:var(--az);font-weight:700;font-size:13px}
#botao-google{min-height:48px;margin-top:6px}
.preco{margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.preco b{font-family:"Anton",sans-serif;font-weight:400;font-size:56px;line-height:1;color:var(--am);text-shadow:0 4px 0 var(--az2)}
.preco span{font-weight:700;font-size:18px}
.vantagens{list-style:none;margin:0 0 14px;padding:0;font-weight:600}
.vantagens li{padding:5px 0 5px 32px;position:relative}
.vantagens li::before{content:"✓";position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:50%;background:var(--am);color:var(--noite);
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px}
.campo{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px;margin:0 0 14px;max-width:360px}
input[type=text],input[type=search]{width:100%;padding:11px 12px;border:3px solid #fff;border-radius:11px;background:#fff;color:var(--tx);font:700 17px "Montserrat",sans-serif}
input[type=text]:focus,input[type=search]:focus{outline:0;border-color:var(--am)}
button:disabled{opacity:.6;cursor:wait}