:root{--fundo:#06040f;--azul:#0a0b2a;--cartao:#110d27;--cartao2:#1a1438;--borda:#3a2a7a;--roxo:#8b3dff;--roxo2:#b98bff;--roxoesc:#5b21b6;--texto:#f3f0ff;--suave:#a9a3c9;--verde:#22c55e;--amarelo:#ffc21a;--verm:#ff4d6a;--teal:#2dd4bf}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--texto);background:radial-gradient(1200px 700px at 10% 0%,#2a1466 0,transparent 60%),radial-gradient(900px 600px at 100% 100%,#16205e 0,transparent 60%),linear-gradient(var(--fundo),var(--azul));min-height:100vh}
.escondido{display:none!important}
.suave{color:var(--suave)}.erro{color:var(--verm);min-height:1em}
.cartao{background:linear-gradient(var(--cartao2),var(--cartao));border:1px solid var(--borda);border-radius:18px;padding:18px;box-shadow:0 0 0 1px #0000,0 10px 40px #0006}
.btn{border:1px solid #c9a5ff99;background:linear-gradient(#a674ff,var(--roxo),#6b2fd0);color:#fff;font-weight:700;border-radius:12px;padding:10px 16px;cursor:pointer;font-size:14px;box-shadow:0 0 18px #8b3dff55;transition:transform .1s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}
.btn.sec{background:linear-gradient(var(--cartao2),var(--cartao));border-color:var(--borda);box-shadow:none}
.btn.verde{background:linear-gradient(#4ade80,var(--verde));border-color:#86efac}.btn.verm{background:linear-gradient(#ff7a90,var(--verm));border-color:#ffb3c0}
.btn.peq{padding:6px 10px;font-size:13px}
input,select,textarea{width:100%;background:var(--cartao);border:1px solid var(--borda);color:var(--texto);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--roxo2)}
label{display:block;font-size:13px;color:var(--suave);margin:10px 0 4px}
.entrar{min-height:100vh;display:grid;place-items:center;padding:16px}
.login{width:min(380px,100%);text-align:center;display:grid;gap:10px}
.login h1{margin:0;font-style:italic;font-weight:900}.ag{color:#fff}.lg{color:var(--roxo2)}
.marca-g{width:150px;margin:auto;filter:drop-shadow(0 0 22px #8b3dffaa)}.marca-t{width:260px;margin:-6px auto 4px}
.selo{display:inline-block;margin:auto;background:linear-gradient(90deg,#5a1fc2,#9b4dff,#5a1fc2);border:1.5px solid #d6b8ff;border-radius:30px;padding:6px 18px;font-weight:700;color:#fff;box-shadow:0 0 18px #8b3dff77}
.selo.peq{font-size:12px;padding:4px 12px;margin:0 auto 4px}
.flutua{animation:flutua 4s ease-in-out infinite}@keyframes flutua{50%{transform:translateY(-6px) rotate(-1deg)}}
#particulas{position:fixed;inset:0;pointer-events:none;z-index:0}.app,.entrar,.modal,.toast{position:relative;z-index:1}.modal,.toast{position:fixed}
.banner{position:relative;height:150px;border-radius:20px;overflow:hidden;border:1px solid var(--borda);margin-bottom:16px;background:url(img/porto_banner.webp) 20% center/cover;animation:banner 18s ease-in-out infinite alternate}
@keyframes banner{to{background-position:80% center}}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06040fee 10%,#06040f55 55%,transparent)}
.banner div{position:relative;z-index:1;padding:22px}.banner h1{margin:0;font-size:30px}.banner p{margin:4px 0 0;color:var(--suave)}
.kpi{display:flex;align-items:center;gap:14px}.kpi .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:radial-gradient(#8b3dff66,transparent 70%);border:1px solid var(--borda)}
.kpi b{font-size:28px;display:block}.kpi span{color:var(--suave);font-size:13px}
.cartao{transition:transform .2s,box-shadow .2s}.stats .cartao:hover{transform:translateY(-3px);box-shadow:0 0 28px #8b3dff55}
.donut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.donut svg{width:170px;height:170px}.leg{flex:1;min-width:180px}.leg div{display:flex;gap:8px;align-items:center;margin:5px 0;font-size:14px}.leg i{width:11px;height:11px;border-radius:50%;display:inline-block}
.loja{display:inline-block;padding:2px 9px;border-radius:7px;font-size:12px;font-weight:800;background:#fff;color:#111}.loja.Temu{background:#ff7a1a;color:#fff}.loja.AliExpress{background:#e62e2e;color:#fff}.loja.Alibaba{background:#ff8a00;color:#fff}.loja.Amazon{background:#232f3e;color:#ff9900}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.lateral{background:#0b0820cc;border-right:1px solid var(--borda);padding:16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh}
.logo{display:flex;flex-direction:column;align-items:center}.logo img{width:96px}.logo .lt{width:170px;margin-top:-4px}.logo b{display:block;font-style:italic;font-size:20px}.logo i{color:var(--roxo2);font-weight:900;font-size:17px;margin-left:12px}
nav{display:grid;gap:4px;flex:1;align-content:start}
nav a{padding:10px 12px;border-radius:12px;color:var(--texto);cursor:pointer;display:flex;align-items:center;gap:8px}
nav a:hover{background:var(--cartao2)}nav a.ativo{background:linear-gradient(90deg,var(--roxoesc),var(--roxo));box-shadow:0 0 16px #8b3dff66}
.badge{margin-left:auto;background:var(--verm);border-radius:20px;padding:1px 7px;font-size:12px;font-weight:700}
main{padding:20px;min-width:0}
.topo{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.topo h2{margin:0;font-size:24px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{text-align:center}.stat .ic{font-size:22px}.stat b{display:block;font-size:30px;font-variant-numeric:tabular-nums}.stat span{color:var(--suave);font-size:13px}
.barra{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.barra input{flex:1;min-width:200px}.barra select{width:auto}
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--suave);font-weight:600;padding:10px;border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #3a2a7a55;vertical-align:middle}
tr.click{cursor:pointer}tr.click:hover td{background:#8b3dff14}
.est{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;color:#fff}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:16px;z-index:10}
.caixa{width:min(760px,100%);max-height:92vh;overflow:auto;position:relative}
.fechar{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--texto);font-size:28px;cursor:pointer}
.linha{display:flex;gap:8px;padding:4px 0}.linha span:first-child{color:var(--suave);min-width:130px}
.tempo{border-left:3px solid var(--borda);margin-left:8px;padding-left:16px}
.tempo div{position:relative;padding-bottom:12px}.tempo div::before{content:"";position:absolute;left:-24px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--verde)}
.tempo div.info::before{background:var(--roxo2);width:9px;height:9px;left:-22px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--cartao2);border:1px solid var(--roxo2);padding:12px 18px;border-radius:12px;z-index:20}
.acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.barras{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:10px}
.barras div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:12px;color:var(--suave)}
.barras i{display:block;width:100%;max-width:44px;background:linear-gradient(var(--roxo2),var(--roxoesc));border-radius:6px 6px 0 0;min-height:2px}
h3{margin:0 0 10px}
.alerta{border-color:var(--amarelo)}
@media(max-width:820px){.app{grid-template-columns:1fr}.lateral{position:static;height:auto}nav{grid-template-columns:repeat(2,1fr)}main{padding:14px}}
.linha .est,.linha .loja{min-width:0!important}