/* Página de gestão: explicação em duas colunas + sistema de demonstração (classes g-) */
.page-hero{padding:clamp(108px,12vw,140px) 0 0}
.page-hero h1{font-size:clamp(2.2rem,4.8vw,3.8rem);margin:4px 0 16px;max-width:920px}
.page-hero h1 em{font-size:1.08em}
.page-hero .lead{color:var(--mu);font-size:1.08rem;max-width:640px}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mu);margin-bottom:22px}
.crumb:hover{color:var(--tx)}

/* dois jeitos de trabalhar */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.way{border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,38px);background:linear-gradient(165deg,var(--card2),var(--card));display:flex;flex-direction:column;gap:14px}
.way.agent{border-color:rgba(232,196,142,.35);background:radial-gradient(ellipse at 100% 0%,rgba(200,143,88,.14),transparent 60%),linear-gradient(165deg,var(--card2),var(--card))}
.way__tag{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.way__tag i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(53,211,154,.6);animation:pl 2.4s infinite}
@keyframes pl{70%,100%{box-shadow:0 0 0 9px rgba(53,211,154,0)}}
.way h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.way>p{color:var(--mu)}
.way ul{list-style:none;display:grid;gap:9px;margin:4px 0}
.way li{position:relative;padding-left:26px;font-size:15px;color:#d8d5ce}
.way li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;background:rgba(232,196,142,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c48e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/9px no-repeat}
.rule{margin-top:auto;padding:13px 16px;border-radius:14px;background:rgba(232,196,142,.07);border:1px dashed rgba(232,196,142,.35);font-size:14px;color:var(--mu)}
.rule b{color:var(--tx)}
.way .btn{align-self:flex-start;margin-top:6px}

/* aplicativo */
.gapp{position:relative;display:grid;grid-template-columns:236px minmax(0,1fr);border:1px solid var(--line2);border-radius:22px;background:#0b0d14;overflow:clip;box-shadow:0 40px 100px rgba(0,0,0,.55);font-size:14px}
.g-side{padding:16px 12px;background:#090b11;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.g-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;border-bottom:1px solid var(--line)}
.g-brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--gold2))}
.g-brand span{display:flex;flex-direction:column;line-height:1.2}
.g-brand b{font:600 14px var(--disp)}.g-brand small{font-size:11px;color:var(--mu2)}
.g-gh{padding:0 10px 6px;display:flex;flex-direction:column;line-height:1.3}
.g-gh b{font:600 11.5px var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.g-gh small{font-size:11.5px;color:var(--mu2)}
.g-tab{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:11px;color:var(--mu);text-align:left;transition:background .2s,color .2s;position:relative}
.g-tab:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.g-tab.on{background:rgba(232,196,142,.12);color:var(--gold)}
.g-tab.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold)}
.g-bd{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--bad);color:#fff;font:700 11px Inter;text-align:center}
.g-main-col{padding:20px 22px 28px;min-width:0;display:flex;flex-direction:column;gap:16px}
.g-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.g-tt h3{font-size:1.45rem}.g-tt small{color:var(--mu);font-size:13px}
.g-ctl{display:flex;gap:10px;flex-wrap:wrap;max-width:100%}
.g-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.g-seg::-webkit-scrollbar{display:none}
.g-seg button{padding:6px 12px;border-radius:9px;font-size:12.5px;color:var(--mu);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.2s}
.g-seg button:hover{color:var(--tx)}
.g-seg button.on{background:var(--gold);color:#14100a;font-weight:600}
.g-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none}
.g-seg .g-dot{margin:0}
.g-view{display:flex;flex-direction:column;gap:14px;min-height:520px}
.g-view.swap{animation:gswap .45s var(--ease)}
@keyframes gswap{from{opacity:0;transform:translateY(8px)}}
.g-toast{position:fixed;left:50%;bottom:24px;z-index:140;translate:-50% 0;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:14px;background:#0d1d18;border:1px solid rgba(53,211,154,.45);box-shadow:0 18px 50px rgba(0,0,0,.55);font-size:13px;opacity:0;transform:translateY(20px);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.g-toast.on{opacity:1;transform:none}
.g-toast i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#06231a;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px}

.g-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.g-card h4{font:600 14.5px var(--disp);margin-bottom:12px}
.g-ch{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.g-ch h4{margin:0}
.g-lg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mu)}
.g-mu{color:var(--mu2);font-size:12px}
.g-note{font-size:12.5px;color:var(--mu);margin-bottom:12px}
.g-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g-kpis.g-k3{grid-template-columns:repeat(3,minmax(0,1fr))}.g-kpis.g-k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-kpi{padding:15px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.g-kpi small{display:block;font-size:12px;color:var(--mu)}
.g-kpi b{display:block;font:600 1.5rem var(--disp);letter-spacing:-.02em;margin:3px 0 4px;white-space:nowrap}
.g-kpi>span{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--mu2)}
.g-kpi.ok{border-color:rgba(53,211,154,.35);background:linear-gradient(160deg,rgba(53,211,154,.09),var(--card))}
.g-kpi.warn{border-color:rgba(255,200,87,.35);background:linear-gradient(160deg,rgba(255,200,87,.09),var(--card))}
.g-kpi.bad{border-color:rgba(255,107,129,.35)}
.g-dl{font-style:normal;font-weight:600;font-size:11.5px;padding:1px 7px;border-radius:99px}
.g-dl.up{color:var(--ok);background:rgba(53,211,154,.12)}.g-dl.dn{color:var(--bad);background:rgba(255,107,129,.12)}
.g-grid{display:grid;gap:14px}
.g-grid.g-main{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.g-grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-grid.g-rep{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}

/* gráficos */
.g-chart{position:relative;min-height:250px;width:100%}
.g-chart svg{display:block;max-width:100%;height:auto;overflow:visible}
.ax{fill:#6f758a;font-size:10.5px;font-family:Inter,sans-serif}
.gl{stroke:rgba(255,255,255,.07)}
.xl{stroke:rgba(255,255,255,.5);stroke-dasharray:3 3}
.plot{animation:revx 1s var(--ease) both}
@keyframes revx{from{transform:scaleX(0)}}
.g-tip{position:absolute;left:0;top:0;z-index:5;min-width:150px;padding:9px 12px;border-radius:12px;background:rgba(8,9,13,.96);border:1px solid var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:12px;line-height:1.55;pointer-events:none;opacity:0;transition:opacity .15s;display:flex;flex-direction:column}
.g-tip b{font-size:12.5px}.g-tip .tt{font:600 1.05rem var(--disp);color:var(--gold)}.g-tip u{text-decoration:none;float:right;margin-left:12px}.g-tip span{color:var(--mu)}
.g-donut{position:relative;display:grid;place-items:center;margin:2px 0 12px}
.g-donut svg{max-width:170px;width:100%}
.g-seg-c,.g-seg circle{transition:stroke-dasharray 1.1s var(--ease)}
.g-donut-c{position:absolute;text-align:center;line-height:1.2}.g-donut-c small{display:block;font-size:11px;color:var(--mu)}.g-donut-c b{font:600 .95rem var(--disp);white-space:nowrap}
.g-dnl{list-style:none;display:grid;gap:9px}
.g-dnl li{display:flex;align-items:center;font-size:13px;color:var(--mu)}.g-dnl li b{margin-left:auto;color:var(--tx)}.g-dnl li.off{opacity:.35}
.g-hb{display:grid;gap:9px;margin-bottom:12px}
.g-hbr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.8fr) 46px;gap:10px;align-items:center;font-size:12.5px;color:var(--mu)}
.g-hbr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-hbr i,.g-b2,.g-rank i{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden}
.g-hbr u,.g-b2 u,.g-rank u,.g-mbar u,.g-wf u{display:block;height:100%;width:var(--w);border-radius:8px;background:var(--gold);animation:ggrow 1s var(--ease) both}
@keyframes ggrow{from{width:0}}
.g-hbr b{color:var(--tx);text-align:right}
.g-top small{display:block;font-size:12px;color:var(--mu)}.g-top b{display:block;font:600 1.1rem var(--disp);color:var(--gold);margin:2px 0}.g-top span{font-size:12px;color:var(--mu);display:block;margin-bottom:14px}
.g-tipb{padding:10px 12px;border-radius:12px;background:rgba(232,196,142,.06);font-size:12.5px;color:var(--mu)}

/* dinheiro */
.g-wf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 92px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px}
.g-wf span small{display:block;font-size:11.5px;color:var(--mu2)}
.g-wf i{height:8px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden}
.g-wf.neg u{background:var(--bad);opacity:.7}.g-wf.pos u{background:var(--ok)}
.g-wf b{text-align:right}.g-wf.tot{font-weight:600;border-bottom:0;background:rgba(255,255,255,.03);padding-left:10px;padding-right:10px;border-radius:10px}
.g-tw{overflow-x:auto}
.g-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.g-tbl th{font:600 11.5px Inter;color:var(--mu2);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.g-tbl td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);color:#d6d3cc}
.g-tbl .r{text-align:right;white-space:nowrap}
.g-fin tbody tr{cursor:pointer;transition:background .2s}.g-fin tbody tr:hover,.g-fin tbody tr.sel{background:rgba(232,196,142,.08)}
.g-fin tr.div td:first-child{box-shadow:inset 3px 0 var(--warn)}
.g-pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.g-pill.ok{background:rgba(53,211,154,.14);color:var(--ok)}.g-pill.bad{background:rgba(255,107,129,.16);color:var(--bad)}.g-pill.neu{background:rgba(255,255,255,.08);color:var(--mu)}.g-pill.warn{background:rgba(255,200,87,.16);color:var(--warn)}.g-pill.sky{background:rgba(108,196,255,.15);color:var(--sky)}

/* produtos */
.g-rank{list-style:none;display:grid;gap:14px}
.g-rank li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center}
.g-pos{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);font:600 12px var(--disp);color:var(--mu)}
.g-rank b{display:block;font-size:13.5px;line-height:1.3}.g-rank small{display:block;font-size:11.5px;color:var(--mu2);margin:2px 0 6px}
.g-rank em{font-style:normal;font:600 13px var(--disp);color:var(--gold)}
.g-rank li:first-child .g-pos{background:rgba(232,196,142,.18);color:var(--gold)}

/* ads */
.g-adc{margin-bottom:14px}.g-adc:last-child{margin-bottom:0}
.g-adh{display:flex;align-items:center;font-size:13px;margin-bottom:6px}.g-adh span{margin-left:auto;font-size:11.5px;font-weight:600}
.g-b2{height:6px;margin:4px 0}
.g-adf{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--mu)}.g-adf b{color:var(--ok)}

/* conta e ações */
.g-gc{text-align:center;display:flex;flex-direction:column;align-items:center}
.g-gauge{width:100%;max-width:300px}
.needle{transition:transform 1.5s cubic-bezier(.3,1.35,.4,1)}
.g-glab{margin-top:-8px}.g-glab small{display:block;font-size:12px;color:var(--mu)}.g-glab b{font:600 1.8rem var(--disp)}
.g-pts{list-style:none;display:grid;gap:8px;margin-top:12px;text-align:left;width:100%}
.g-pts li{padding:10px 13px;border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;color:var(--mu)}
.g-mt{margin-bottom:16px}.g-mt:last-child{margin-bottom:0}
.g-mh{display:flex;justify-content:space-between;font-size:13.5px}
.g-mbar{position:relative;height:8px;border-radius:8px;background:rgba(255,255,255,.07);margin:7px 0 5px}
.g-mbar u{background:var(--ok)}.g-mbar u.warn{background:var(--warn)}.g-mbar u.bad{background:var(--bad)}
.g-mbar i{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:.6;border-radius:2px}
.g-mt small{font-size:11.5px;color:var(--mu2)}
.g-acts{list-style:none;display:grid;gap:8px}
.g-acts li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:opacity .3s}
.g-acts li.done{opacity:.45}
.g-chk{width:24px;height:24px;border-radius:8px;border:2px solid var(--line2);margin-top:2px;transition:.2s;position:relative}
.g-chk[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.g-chk[aria-pressed="true"]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#06231a;font-weight:700;font-size:13px}
.g-ah{display:flex;gap:8px;margin-bottom:4px}
.g-cat{font:600 11px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.g-pr{font-size:11px;font-weight:600;padding:0 8px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--mu)}.g-pr.pAlta{background:rgba(255,107,129,.16);color:var(--bad)}.g-pr.pMédia{background:rgba(255,200,87,.16);color:var(--warn)}
.g-at b{display:block;font-size:14.5px;line-height:1.35}.g-at p{font-size:13px;color:var(--mu);margin-top:3px}
.g-acts em{font-style:normal;font:600 1rem var(--disp);color:var(--ok);text-align:right;white-space:nowrap}.g-acts em small{display:block;font:400 11px Inter;color:var(--mu2)}

/* agente */
.g-sup{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(232,196,142,.07);border:1px solid rgba(232,196,142,.3);font-size:13.5px;color:var(--mu)}
.g-sup b{color:var(--tx)}
.g-sup i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pl 2.4s infinite}
.g-qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:start}
.g-ql{padding:8px;display:grid;gap:4px}
.g-qi{display:flex;align-items:flex-start;gap:10px;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid transparent;transition:.2s;width:100%}
.g-qi:hover{background:rgba(255,255,255,.04)}.g-qi.on{background:rgba(232,196,142,.09);border-color:rgba(232,196,142,.35)}.g-qi.done{opacity:.5}
.g-qd{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px}.g-qd.g{background:var(--ok)}.g-qd.w{background:var(--warn);box-shadow:0 0 10px var(--warn)}.g-qd.d{background:var(--mu2)}.g-qd.n{background:var(--bad)}
.g-qb{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.g-qb b{font-size:13px}.g-qb small{font-size:11.5px;color:var(--mu2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-qb em{font-style:normal;font-size:12.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-qw{flex:none;font-size:11.5px;color:var(--mu);padding-top:2px}
.g-qd-p{display:grid;gap:14px;position:sticky;top:84px}
.g-det{display:grid;gap:12px}
.g-qh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13px}.g-qh span{color:var(--mu)}
.g-bub{padding:14px 16px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.06)}
.g-bub small{display:block;color:var(--mu2);font-size:11.5px;margin-bottom:3px}.g-bub p{font-size:14.5px}
.g-sug{display:grid;gap:8px}
.g-sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--gold);font-weight:600}.g-sh i{font-style:normal}
.g-conf{font-style:normal;font-weight:600;font-size:11px;padding:1px 9px;border-radius:99px;margin-left:auto}
.g-conf.ok{background:rgba(53,211,154,.14);color:var(--ok)}.g-conf.neu{background:rgba(255,255,255,.08);color:var(--mu)}.g-conf.warn{background:rgba(255,200,87,.16);color:var(--warn)}
.g-sug textarea{width:100%;resize:vertical;padding:13px 14px;border-radius:14px;border:1px solid rgba(232,196,142,.35);background:rgba(232,196,142,.05);color:var(--tx);font:inherit;font-size:13.5px;line-height:1.55}
.g-sug textarea:focus{outline:none;border-color:var(--gold)}
.g-sug small{color:var(--mu2);font-size:12px}
.g-prop{padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;color:var(--mu)}
.g-prop b{color:var(--tx)}.g-prop small{display:block;margin-top:3px;color:var(--warn);font-size:12px}
.g-prop.s{border:1px solid rgba(255,200,87,.3)}
.g-qact{display:flex;gap:10px;flex-wrap:wrap}
.g-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:12px;font-size:13px;font-weight:600;transition:.2s;white-space:nowrap;background:linear-gradient(95deg,var(--gold),var(--gold2));color:#14100a}
.g-btn:hover{box-shadow:0 8px 24px rgba(232,196,142,.3);transform:translateY(-1px)}
.g-btn.ghost{background:rgba(255,255,255,.03);color:var(--tx);border:1px solid var(--line2)}.g-btn.ghost:hover{border-color:var(--gold);box-shadow:none}
.g-sent{display:flex;gap:12px;padding:14px;border-radius:14px;background:rgba(53,211,154,.08);border:1px solid rgba(53,211,154,.3)}
.g-sent.no{background:rgba(255,107,129,.07);border-color:rgba(255,107,129,.3)}
.g-sent>i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ok);color:#06231a;display:grid;place-items:center;font-style:normal;font-weight:700}
.g-sent.no>i{background:var(--bad);color:#2a0710}
.g-sent p{font-size:13px;color:var(--mu);margin-top:3px}
:is(.g-tab,.g-seg button,.g-btn,.g-qi,.g-chk):focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:1100px){
  .g-grid.g-main,.g-grid.g-3,.g-grid.g-rep,.g-qa{grid-template-columns:1fr}
  .g-grid.g-2{grid-template-columns:1fr}
  .g-kpis,.g-kpis.g-k3,.g-kpis.g-k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-qd-p{position:static}
}
@media (max-width:900px){
  .two{grid-template-columns:1fr}
  .gapp{grid-template-columns:1fr}
  .g-side{flex-direction:row;overflow-x:auto;padding:8px 10px;gap:12px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;position:sticky;top:60px;z-index:6}
  .g-side::-webkit-scrollbar{display:none}
  .g-brand{display:none}
  .g-grp{display:flex;align-items:center;gap:4px;flex:none}
  .g-gh{display:none}
  .g-tab{width:auto;flex:none;padding:8px 13px;white-space:nowrap}
  .g-tab.on::before{display:none}
  .g-main-col{padding:14px 12px 22px}
  .g-view{min-height:420px}
}
@media (max-width:560px){
  .g-kpi b{font-size:1.2rem}
  .g-kpi{padding:13px}
  .g-wf{grid-template-columns:minmax(0,1fr) 84px}.g-wf i{display:none}
  .g-acts li{grid-template-columns:28px minmax(0,1fr)}.g-acts em{grid-column:2;text-align:left}
  .g-hbr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 42px;gap:6px}
  .g-tt h3{font-size:1.2rem}
}
@media (max-width:900px){.g-grp+.g-grp{border-left:1px solid var(--line2);padding-left:12px}.g-grp+.g-grp .g-tab{color:var(--gold)}}