:root{
  --bg:#050b18;--bg2:#081429;--card:rgba(14,30,58,.55);--line:rgba(80,170,255,.18);--line2:rgba(80,170,255,.32);
  --tx:#e8f1ff;--tx2:#9fb4d4;--muted:#6f86a8;--neon:#23d3ff;--neon2:#3b82ff;--ok:#2ee59d;--bad:#ff5a7a;--warn:#ffc04d;--rose:#ff5a6e;--lav:#7c9cff;
  --r:18px;--sh:0 0 0 1px var(--line),0 10px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(1200px 600px at 80% -10%,rgba(35,211,255,.10),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(59,130,255,.10),transparent 60%),var(--bg)}
.glow{position:fixed;width:480px;height:480px;border-radius:50%;filter:blur(120px);opacity:.25;pointer-events:none;z-index:0}
.glow.g1{background:#1e6bff;top:-200px;right:-150px}.glow.g2{background:#00c8ff;bottom:-250px;left:-200px}
h1,h2,h3,.num{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.01em}
.muted{color:var(--muted)}
.card{position:relative;background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.card h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.btn-neon{width:100%;border:0;border-radius:14px;padding:14px;font-weight:800;font-size:15px;color:#031025;background:linear-gradient(90deg,var(--neon),var(--neon2));box-shadow:0 0 24px rgba(35,211,255,.45);cursor:pointer}
.btn{border:1px solid var(--line2);background:rgba(35,211,255,.06);color:var(--tx);border-radius:10px;padding:7px 11px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--neon);box-shadow:0 0 12px rgba(35,211,255,.25)}
.btn.sm{padding:5px 8px;font-size:12px}.btn.red{border-color:rgba(255,90,122,.5);background:rgba(255,90,122,.08)}.btn.green{border-color:rgba(46,229,157,.5);background:rgba(46,229,157,.08)}

/* login */
.login-body{display:grid;place-items:center;padding:20px}
.login{width:100%;max-width:380px;z-index:1;text-align:center}
.login h1{font-size:34px;margin-top:10px}.login h1 b{color:var(--neon);text-shadow:0 0 18px rgba(35,211,255,.7)}
.login p{margin:6px 0 18px;font-size:14px}
.login label{display:block;text-align:left;font-size:12px;color:var(--tx2);font-weight:600;margin-top:12px}
.login input{width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(5,11,24,.7);color:var(--tx);font-size:16px;outline:none}
.login input:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(35,211,255,.15)}
.login .btn-neon{margin-top:18px}
.err{color:var(--bad);font-size:13px;margin-top:10px;min-height:16px}
.logo-big{width:64px;height:64px;margin:0 auto;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(35,211,255,.25),rgba(59,130,255,.15));box-shadow:0 0 30px rgba(35,211,255,.35),inset 0 0 0 1px var(--line2)}
.logo-big span{font:700 34px "Space Grotesk";color:var(--neon);text-shadow:0 0 16px var(--neon)}

/* layout */
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:14px 14px 110px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(35,211,255,.12);box-shadow:inset 0 0 0 1px var(--line2),0 0 16px rgba(35,211,255,.3);font:700 20px "Space Grotesk";color:var(--neon)}
.brand h1{font-size:22px}.brand h1 b{color:var(--neon);text-shadow:0 0 12px rgba(35,211,255,.6)}
.live{font-size:12px;color:var(--tx2);display:flex;align-items:center;gap:6px;margin-left:auto}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.filters{display:flex;gap:6px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:rgba(14,30,58,.5);color:var(--tx2);border-radius:99px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer}
.chip.on{color:#031025;background:linear-gradient(90deg,var(--neon),var(--neon2));border-color:transparent;box-shadow:0 0 16px rgba(35,211,255,.45)}
.subfilters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
select,input[type=date],input[type=number]{background:rgba(5,11,24,.7);color:var(--tx);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font-size:13px;font-family:inherit}
.custom{display:none;gap:6px;align-items:center}.custom.on{display:flex}

.grid{display:grid;gap:12px;margin-top:12px}
.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.lucro .num{font-size:44px;font-weight:700;line-height:1.05}
.lucro .pos{color:var(--ok);text-shadow:0 0 22px rgba(46,229,157,.45)}.lucro .neg{color:var(--bad);text-shadow:0 0 22px rgba(255,90,122,.4)}
.lucro .linha{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--tx2)}.lucro .linha b{color:var(--tx);font-size:16px;display:block;font-family:"Space Grotesk"}
.proj{margin-top:12px;font-size:13px;color:var(--tx2);padding-top:10px;border-top:1px dashed var(--line)}.proj b{color:var(--neon)}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:13px 14px}.kpi .l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.kpi .v{font:700 22px "Space Grotesk";margin-top:6px}.kpi .s{font-size:11.5px;color:var(--muted);margin-top:3px}
.kpi.custo .v{color:#ffb4c2}.kpi.bom .v{color:var(--ok)}
.duo{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}@media(max-width:860px){.duo{grid-template-columns:1fr}}
.chartbox{height:260px}
.funis{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:12px}
.funil .etapas{display:grid;gap:7px}
.etapa{position:relative;border-radius:10px;padding:8px 10px;background:rgba(35,211,255,.05);overflow:hidden;font-size:13px;display:flex;justify-content:space-between}
.etapa i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(35,211,255,.25),rgba(59,130,255,.05));z-index:0}
.etapa span,.etapa b{position:relative;z-index:1}.etapa small{color:var(--muted);font-weight:500;margin-left:6px}
.funil .rod{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--tx2)}.funil .rod b{color:var(--tx)}
.insights{white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--tx)}
.insights-box{border:1px solid rgba(35,211,255,.35);box-shadow:var(--sh),0 0 30px rgba(35,211,255,.12)}
.tbl-wrap{overflow-x:auto;margin-top:4px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
th{color:var(--tx2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid rgba(80,170,255,.08);white-space:nowrap}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;border-radius:99px;padding:2px 8px;font-size:11px;font-weight:700}
.st{display:inline-flex;align-items:center;gap:5px;font-size:12px}.st:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.st.ACTIVE:before{background:var(--ok);box-shadow:0 0 8px var(--ok)}.st.PAUSED:before{background:var(--warn)}
.good{color:var(--ok)}.bad{color:var(--bad)}
.vendas li{list-style:none;display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(80,170,255,.08);font-size:13px}
.vendas li span{color:var(--tx2)}
/* Jarvis */
.fab{position:fixed;right:16px;bottom:16px;z-index:50;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#7ff0ff,#1e6bff 70%);box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 30px rgba(35,211,255,.7);color:#fff;font:800 15px "Space Grotesk"}
.fab:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(35,211,255,.45);animation:ring 2.2s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.chat{position:fixed;right:16px;bottom:90px;z-index:60;width:min(420px,calc(100vw - 24px));height:min(600px,calc(100vh - 120px));display:none;flex-direction:column;padding:0;overflow:hidden;background:rgba(8,20,41,.92)}
.chat.on{display:flex}
.chat header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chat header .av{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7ff0ff,#1e6bff 70%);box-shadow:0 0 14px rgba(35,211,255,.6)}
.chat .msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.msg.u{align-self:flex-end;background:linear-gradient(90deg,rgba(35,211,255,.25),rgba(59,130,255,.25));border:1px solid var(--line2)}
.msg.a{align-self:flex-start;background:rgba(14,30,58,.8);border:1px solid var(--line)}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat textarea{flex:1;resize:none;height:44px;background:rgba(5,11,24,.7);color:var(--tx);border:1px solid var(--line2);border-radius:12px;padding:11px;font:inherit;font-size:14px}
.chat .send{border:0;border-radius:12px;padding:0 14px;font-weight:800;background:linear-gradient(90deg,var(--neon),var(--neon2));color:#031025;cursor:pointer}
.typing{color:var(--tx2);font-size:13px}
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:99;background:rgba(8,20,41,.95);border:1px solid var(--line2);border-radius:12px;padding:10px 16px;font-size:14px;box-shadow:0 0 20px rgba(35,211,255,.3)}
.skel{opacity:.5}
/* nada vaza da tela no celular */
.hero>*,.duo>*,.kpis>*,.funis>*{min-width:0}
.wrap{overflow-x:hidden}
.insights,.proj,.lucro .linha{overflow-wrap:anywhere}