
:root{--p:#5B00A6;--p2:#3E006F;--p3:#8A33D6;--bg:#07020e;--panel:rgba(17,9,32,.66);--panel2:rgba(25,12,46,.72);--line:rgba(255,255,255,.12);--text:#fff;--muted:#bdb4cb;--green:#35e58b;--orange:#ff9f43;--blue:#55a2ff;--red:#ff6576;--shadow:0 18px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden;background-image:url('./Background_roxo(1).png');background-size:cover;background-position:center top;background-attachment:fixed;background-repeat:no-repeat}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,2,14,.90) 0%,rgba(7,2,14,.72) 18%,rgba(7,2,14,.48) 38%,rgba(7,2,14,.18) 62%,rgba(7,2,14,.34) 100%),linear-gradient(180deg,rgba(7,2,14,.10) 0%,rgba(7,2,14,.22) 48%,rgba(7,2,14,.68) 100%);}
body:after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 68% 12%,rgba(91,0,166,.18),transparent 30%),linear-gradient(180deg,transparent 0%,rgba(5,0,12,.18) 55%,rgba(5,0,12,.42) 100%)}
.app{display:flex;min-height:100vh;position:relative;z-index:1}.side{position:fixed;inset:0 auto 0 0;width:235px;padding:20px 14px;background:linear-gradient(180deg,rgba(7,2,18,.94),rgba(9,3,22,.82));backdrop-filter:blur(18px);border-right:1px solid rgba(255,255,255,.11);z-index:20;display:flex;flex-direction:column}.brand{height:118px;padding:8px 12px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px}.brand img{width:190px;height:86px;object-fit:contain;object-position:left center;filter:drop-shadow(0 8px 24px rgba(0,0,0,.22))}.nav{display:grid;gap:5px}.nav button{appearance:none;border:0;background:transparent;color:#d9d1e5;display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;border-radius:11px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s}.nav button svg{width:18px;height:18px;stroke-width:1.8}.nav button:hover{background:rgba(91,0,166,.14);color:#fff}.nav button.active{background:linear-gradient(90deg,rgba(91,0,166,.62),rgba(62,0,111,.24));box-shadow:inset 3px 0 var(--p3),0 8px 25px rgba(62,0,111,.13);color:#fff}.side-bottom{margin-top:auto}.online{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.045);margin:12px 4px 10px}.online-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}.online small{display:block;color:var(--muted);margin-top:9px;font-size:10px;line-height:1.5}.user{display:flex;align-items:center;gap:10px;padding:10px 7px}.avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,#a56cff,#3E006F);display:grid;place-items:center;font-weight:800}.user strong{font-size:11px}.user small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.logout{margin-left:auto;color:#bfb5cc;cursor:pointer}.main{margin-left:235px;width:calc(100% - 235px);padding:24px 28px 40px;min-width:0;display:block;position:relative}.topbar{display:grid;grid-template-columns:minmax(250px,1fr) minmax(330px,1.25fr) auto;gap:18px;align-items:center;margin-bottom:17px}.title{font-size:25px;font-weight:800;letter-spacing:-.5px}.subtitle{color:var(--muted);font-size:13px;margin-top:5px}.search{height:45px;border:1px solid rgba(255,255,255,.16);background:rgba(15,6,29,.58);backdrop-filter:blur(16px);border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 13px;box-shadow:var(--shadow)}.search svg{width:18px;color:#cfc6da}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:12px}.search input::placeholder{color:#9f95ad}.head-actions{display:flex;gap:8px;align-items:center}.date-pill{height:45px;padding:0 13px;border:1px solid rgba(255,255,255,.15);background:rgba(15,6,29,.58);border-radius:12px;display:flex;align-items:center;gap:8px;color:#eee;font-size:11px;white-space:nowrap}.date-pill svg{width:16px}.btn{height:42px;padding:0 15px;border:1px solid rgba(255,255,255,.15);background:rgba(26,12,45,.72);color:#fff;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#5B00A6,#3E006F);border-color:#9c69ff;box-shadow:0 8px 24px rgba(62,0,111,.3)}.filters{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:8px;margin-bottom:14px}.filter{background:rgba(16,8,30,.58);border:1px solid rgba(255,255,255,.11);border-radius:11px;padding:8px 10px}.filter label{display:block;font-size:9px;color:#9f96aa;margin-bottom:4px}.filter select,.filter input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:11px}.filter select option{background:#171021;color:#fff}.page{display:none!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;margin:0!important;padding:0!important;transform:none!important}
.page.active{display:block!important;position:relative!important;top:0!important;margin:0!important;padding:0!important;transform:none!important;min-height:0!important}.grid{display:grid;gap:12px}.kpis{grid-template-columns:repeat(4,1fr);margin-bottom:12px}.card{background:linear-gradient(145deg,rgba(29,15,51,.76),rgba(10,5,21,.67));border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);backdrop-filter:blur(16px);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 35%);pointer-events:none}.kpi{padding:18px 19px;min-height:128px}.kpi-head{display:flex;align-items:center;justify-content:space-between;color:#d8d0e2;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.iconbox{width:37px;height:37px;border-radius:10px;background:linear-gradient(135deg,rgba(91,0,166,.85),rgba(62,0,111,.32));display:grid;place-items:center}.iconbox svg{width:19px}.kpi .value{font-size:30px;font-weight:800;letter-spacing:-.8px;margin:14px 0 5px}.kpi .small{font-size:10px;color:var(--muted)}.accent{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--p),transparent);opacity:.75}.charts3{grid-template-columns:1.25fr 1fr 1fr}.charts2{grid-template-columns:1fr 1fr}.panel{padding:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-title{font-size:13px;font-weight:800}.panel-sub{font-size:9px;color:var(--muted);margin-top:3px}.chartbox{height:245px}.chartbox.sm{height:220px}.chartbox canvas{max-height:100%}.mini-select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;padding:6px 8px;font-size:9px}.plans{grid-template-columns:1fr 1.25fr}.plan-list{display:grid;gap:10px}.plan-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.plan-name{font-size:11px;font-weight:700}.plan-meta{font-size:9px;color:var(--muted);margin-top:4px}.bar{height:6px;border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px}.bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#5B00A6,#b66dff)}.tablewrap{overflow:auto;max-height:440px}.table{width:100%;border-collapse:collapse;font-size:10px}.table th,.table td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.075);white-space:nowrap;text-align:left}.table th{font-size:9px;text-transform:uppercase;color:#9f96aa;position:sticky;top:0;background:rgba(19,9,34,.96);backdrop-filter:blur(8px);z-index:2}.table td{color:#eee}.table tr:hover td{background:rgba(91,0,166,.07)}.badge{display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(91,0,166,.2);border:1px solid rgba(138,51,214,.24);font-size:9px}.two-col{grid-template-columns:1fr 1fr}.section-space{margin-top:12px}.empty{height:100%;display:grid;place-items:center;color:#8f879a;font-size:11px}.footer{margin-top:13px;color:#80758c;font-size:9px;text-align:right}.search-result{margin-top:8px;font-size:9px;color:var(--muted)}
.client-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.client-summary-card{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035)}.client-summary-name{font-size:13px;font-weight:800}.client-summary-meta{font-size:9px;color:var(--muted);margin-top:5px}.client-summary-stats{display:flex;gap:18px;margin-top:12px}.client-summary-stats strong{display:block;font-size:17px}.client-summary-stats span{font-size:8px;color:var(--muted);text-transform:uppercase}

#authGate{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(5,1,12,.95);backdrop-filter:blur(18px)}.auth-card{width:min(430px,100%);padding:32px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(145deg,rgba(27,13,48,.96),rgba(8,3,16,.97));box-shadow:0 30px 90px rgba(0,0,0,.55)}.auth-logo{width:160px;height:78px;object-fit:contain;margin-bottom:14px}.auth-card h2{margin:0 0 7px;font-size:24px}.auth-card p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.5}.auth-card input{width:100%;height:44px;margin:6px 0;padding:0 13px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#0c0614;color:#fff;font-size:13px;outline:0}.auth-card button{width:100%;height:44px;margin-top:9px;border:0;border-radius:9px;background:linear-gradient(135deg,#5B00A6,#3E006F);color:#fff;font-weight:800;cursor:pointer}.auth-error{min-height:18px;margin-top:11px;color:#ff6d7b;font-size:11px}.auth-gate-extra{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(5,1,12,.96)}
.overview-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 72% 12%,rgba(138,51,214,.16),transparent 28%),linear-gradient(180deg,transparent 0 55%,rgba(7,2,14,.24));}.overview-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,2,14,.04),rgba(7,2,14,.18) 45%,rgba(7,2,14,.38));pointer-events:none;}
@media(max-width:1250px){.topbar{grid-template-columns:1fr auto}.search{grid-column:1/-1;grid-row:2}.filters{grid-template-columns:repeat(3,1fr)}.charts3{grid-template-columns:1fr 1fr}.charts3 .card:last-child{grid-column:1/-1}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.side{width:70px;padding:12px 7px}.brand{padding:5px;height:70px}.brand img{width:55px;height:55px}.nav button{justify-content:center;padding:12px}.nav button span,.online,.user div:not(.avatar),.logout{display:none}.main{margin-left:70px;width:calc(100% - 70px);padding:14px}.title{font-size:20px}.topbar{display:block}.head-actions{margin-top:10px}.filters{grid-template-columns:1fr 1fr}.charts3,.charts2,.plans,.two-col{grid-template-columns:1fr}.charts3 .card:last-child{grid-column:auto}.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.filters{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}.head-actions{flex-wrap:wrap}.date-pill{flex:1}}
<style>
/* V5.4 — fluxo das páginas: todas ocupam o mesmo ponto abaixo dos filtros */
main.main>.page{display:none!important}
main.main>.page.active{display:block!important;margin-top:0!important;padding-top:0!important}
main.main>.page.active>.kpis:first-child{margin-top:0!important}



/* V5.5 — container estrutural das páginas */
.pages-container{
  display:block!important;
  position:relative!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
}
.pages-container>.page{
  display:none!important;
  position:relative!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  min-height:0!important;
  height:auto!important;
}
.pages-container>.page.active{
  display:block!important;
  margin:0!important;
  padding:0!important;
}



.stock-highlight{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8px 4px}.stock-highlight .value{font-size:42px;font-weight:800;letter-spacing:-1px}.stock-highlight .small{margin-top:8px;color:var(--muted)}



.plan-order-btn{appearance:none;border:0;background:transparent;color:#fff;font:inherit;font-weight:800;text-decoration:underline;text-decoration-color:rgba(138,51,214,.7);text-underline-offset:3px;cursor:pointer;padding:3px 5px;border-radius:6px}
.plan-order-btn:hover{background:rgba(91,0,166,.18);color:#fff}
.plan-detail-card{margin-top:14px}
