/* Hub Denis Magnético (demonstração, VIXCAPTA 10/10/2026) */
:root{--preto:#0d0d0f;--preto2:#16161a;--grafite:#222228;--borda:#33302a;--ouro:#d4af5a;--ouro2:#f0d68a;--texto:#ece6d8;--mudo:#a39b8a;--verde:#5ccf8f;--verm:#ff8f80;--amar:#f2c96b}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--preto)}
body{font-family:Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(120% 60% at 90% -10%,#2a2110 0%,var(--preto) 55%) fixed;color:var(--texto);line-height:1.5;font-size:15px;min-height:100vh;min-height:100svh}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--ouro2);outline-offset:2px}
.demo-faixa{background:#000;color:var(--ouro2);font-size:13px;text-align:center;padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center}
.demo-faixa button{background:transparent;color:var(--ouro2);border:1px solid #6b5a32;border-radius:99px;padding:3px 12px;cursor:pointer;font-size:12px}
.topo{position:sticky;top:0;z-index:20;background:rgba(13,13,15,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--borda);display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:10px 20px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.marca b{display:block;font:700 19px/1 "Playfair Display",Georgia,serif;color:var(--ouro2)}
.marca small{display:block;font-size:10px;letter-spacing:.3em;color:var(--mudo);margin-top:3px}
.abas{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.abas button{background:transparent;border:0;color:#d9d2c2;padding:10px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;font-weight:500;min-height:44px}
.abas button:hover{background:var(--grafite)}
.abas button[aria-selected=true]{background:linear-gradient(135deg,#b8892f,var(--ouro2));color:#111;font-weight:700}
.abas .aba-rev{border:1px dashed #6b5a32}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 40px}
h1{font:700 32px/1.15 "Playfair Display",Georgia,serif;color:#fff}
h2{font:700 19px "Playfair Display",Georgia,serif;color:var(--ouro2);margin-bottom:12px}
.sub{color:var(--mudo);margin:6px 0 22px;max-width:70ch}
.mudo{color:var(--mudo);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.card{background:linear-gradient(160deg,var(--grafite),var(--preto2));border:1px solid var(--borda);border-radius:16px;padding:18px}
.card span{display:block;color:var(--mudo);font-size:13px}
.card b{display:block;font:700 26px "Playfair Display",Georgia,serif;color:#fff;margin-top:4px}
.card small{color:var(--mudo);font-size:12px}
.card.ouro b{color:var(--ouro2)}
.caixa{background:rgba(22,22,26,.92);border:1px solid var(--borda);border-radius:16px;padding:20px;margin-bottom:18px;min-width:0}
.duas{display:grid;gap:18px}
@media (min-width:860px){.duas{grid-template-columns:1fr 1fr}}
.duas .caixa{margin-bottom:0}.duas{margin-bottom:18px}
.tabela-rola{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mudo);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #26241f;vertical-align:middle}
td.v,th.v{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:0}
.vazio{color:var(--mudo);padding:14px 0}
.tag{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:2px 10px;white-space:nowrap}
.tag.ativo,.tag.paga{background:rgba(92,207,143,.15);color:var(--verde)}
.tag.pendente,.tag.apagar{background:rgba(242,201,107,.15);color:var(--amar)}
.tag.bloqueado{background:rgba(255,143,128,.15);color:var(--verm)}
.cod{font-family:ui-monospace,Consolas,monospace;color:var(--ouro2)}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:99px;border:0;cursor:pointer;font-weight:700;background:linear-gradient(135deg,#b8892f,var(--ouro2));color:#111}
.btn.g{background:transparent;color:var(--ouro2);border:1px solid var(--ouro)}
.btn.p{min-height:34px;padding:0 12px;font-size:13px}
.btn.x{background:transparent;color:var(--verm);border:1px solid #6b3a33}
.acoes{display:flex;gap:6px;flex-wrap:wrap}
.pct{width:70px;min-height:34px;background:var(--preto);color:#fff;border:1px solid var(--borda);border-radius:8px;padding:0 8px}
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filtros button{background:var(--preto2);color:#d9d2c2;border:1px solid var(--borda);border-radius:99px;padding:7px 14px;cursor:pointer;min-height:38px}
.filtros button.on{border-color:var(--ouro);color:var(--ouro2)}
.form .campos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:14px}
.form label,.linha-acoes label,.ver-como{display:grid;gap:5px;font-size:13px;font-weight:600;color:#d9d2c2}
input,select{min-height:44px;width:100%;background:var(--preto);color:#fff;border:1px solid var(--borda);border-radius:10px;padding:0 12px;font-size:16px}
input[type=date]{color-scheme:dark}
.aviso{color:var(--verm);font-size:13px;margin-top:8px;min-height:1em}
.linha-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}
.linha-acoes label{min-width:200px}
.ranking{list-style:none;counter-reset:r;display:grid;gap:8px}
.ranking li{counter-increment:r;display:flex;align-items:center;gap:12px;background:var(--preto);border:1px solid #26241f;border-radius:12px;padding:10px 12px}
.ranking li::before{content:counter(r);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grafite);color:var(--ouro2);font-weight:700;flex:none}
.ranking li:first-child::before{background:linear-gradient(135deg,#b8892f,var(--ouro2));color:#111}
.ranking .r-nome{flex:1;min-width:0}
.ranking .r-nome small{display:block;color:var(--mudo)}
.pend{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #26241f;padding:10px 0;flex-wrap:wrap}
.pend:last-child{border-bottom:0}
.rev-topo{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:end}
.ver-como{min-width:220px;margin-bottom:22px}
.meu-link{word-break:break-all;background:var(--preto);border:1px dashed #6b5a32;border-radius:12px;padding:12px;margin-bottom:12px;color:var(--ouro2);font-family:ui-monospace,Consolas,monospace;font-size:14px}
.link-caixa .linha-acoes{margin:0;align-items:center}
.rodape{text-align:center;padding:24px 20px 34px}
.rodape a{display:inline-flex;align-items:center;gap:10px;color:var(--mudo);text-decoration:none;font-size:13px;background:var(--preto);border:1px solid var(--borda);border-radius:99px;padding:8px 16px}
.rodape a span{color:var(--mudo)}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,40px);opacity:0;background:var(--ouro2);color:#111;font-weight:700;border-radius:99px;padding:10px 18px;transition:.25s;pointer-events:none;z-index:50;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){h1{font-size:26px}.wrap{padding:22px 16px 30px}.topo{padding:10px 16px}td,th{padding:8px 6px}}
.sair{margin-left:auto;background:transparent;color:var(--mudo);border:1px solid var(--borda);border-radius:99px;padding:0 16px;min-height:38px;cursor:pointer}
.sair:hover{color:var(--ouro2);border-color:var(--ouro)}
.modo-rev .abas,.modo-rev .ver-como{display:none}
.modo-rev .rev-topo .sub{display:none}
/* gráficos 3D */
.graf{display:block;width:100%;height:280px;cursor:pointer;touch-action:pan-y}
#g-pizza{cursor:grab}#g-pizza:active{cursor:grabbing}
.dica{color:var(--mudo);font-size:12px;margin:-6px 0 6px}
.graficos .caixa{display:flex;flex-direction:column}
.legenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.legenda li{display:flex;align-items:center;gap:8px;background:var(--preto);border:1px solid #26241f;border-radius:99px;padding:5px 12px;font-size:13px;cursor:pointer;transition:border-color .2s}
.legenda li span{width:10px;height:10px;border-radius:50%;flex:none}
.legenda li b{color:var(--ouro2);font-weight:600}
.legenda li.on{border-color:var(--ouro)}
@media (max-width:600px){.graf{height:230px}}
.graficos .graf{flex:1;min-height:280px}
@media (max-width:600px){.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.card b{font-size:20px}}
/* gráfico estilo bolsa de valores */
.letreiro{overflow:hidden;border:1px solid var(--borda);border-radius:12px;background:#08080a;margin:-8px 0 18px;height:40px;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tk-trilho{display:flex;width:max-content;will-change:transform}
.tk-grupo{display:flex}
.tk{display:inline-flex;align-items:baseline;gap:8px;padding:0 22px;border-right:1px solid #1f1d19;font:500 13px ui-monospace,Consolas,monospace;white-space:nowrap}
.tk b{color:#fff;font-weight:700}.tk em{font-style:normal;color:#cfc8b8}
.tk.sobe i{color:#2ee59d;font-style:normal}.tk.desce i{color:#ff5d6c;font-style:normal}
.bolsa{background:linear-gradient(180deg,#121214,#0b0b0d);padding:18px 18px 12px}
.bolsa-topo{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:6px}
.bolsa-id{display:flex;align-items:center;gap:12px;min-width:0}
.tick{font:700 13px ui-monospace,Consolas,monospace;color:#111;background:linear-gradient(135deg,#b8892f,var(--ouro2));border-radius:6px;padding:4px 8px;letter-spacing:.04em}
.bolsa-nome{display:flex;flex-direction:column;font-weight:600;color:#fff;line-height:1.2}
.bolsa-nome small{color:var(--mudo);font-weight:400;font-size:12px}
.bolsa-preco{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bolsa-preco b{font:700 28px/1 ui-monospace,Consolas,monospace;color:#fff;letter-spacing:-.02em}
.delta{font:600 13px ui-monospace,Consolas,monospace;padding:3px 8px;border-radius:6px}
.delta.sobe{color:#2ee59d;background:rgba(46,229,157,.1)}.delta.desce{color:#ff5d6c;background:rgba(255,93,108,.1)}
.periodos{margin-left:auto;display:flex;gap:4px;background:#08080a;border:1px solid var(--borda);border-radius:10px;padding:3px}
.periodos button{background:transparent;border:0;color:var(--mudo);font:600 12px ui-monospace,Consolas,monospace;padding:7px 12px;border-radius:7px;cursor:pointer;min-height:34px}
.periodos button.on{background:var(--grafite);color:var(--ouro2)}
.bolsa-graf{height:380px;cursor:crosshair;touch-action:pan-y}
.bolsa-rodape{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;border-top:1px solid #1f1d19;margin-top:8px;padding-top:10px}
.bolsa-rodape span{display:flex;flex-direction:column}
.bolsa-rodape small{color:var(--mudo);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.bolsa-rodape b{font:600 14px ui-monospace,Consolas,monospace;color:#e8e2d4}
@media (max-width:600px){.bolsa-graf{height:300px}.bolsa-preco b{font-size:22px}.periodos{margin-left:0}.bolsa{padding:14px 10px 10px}}
/* mapa de calor e ranking estilo bolsa */
.mapa{position:relative;flex:1;min-height:320px;margin:-3px}
.tile{position:absolute;box-sizing:border-box;border-radius:14px;border:1px solid rgba(var(--c),.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px -18px rgba(var(--c),.7);padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;cursor:default;overflow:hidden;animation:tileIn .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s,box-shadow .25s,border-color .25s;outline:none}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgb(var(--c));box-shadow:0 0 14px rgb(var(--c))}
.tile:hover,.tile:focus-visible{z-index:2;transform:translateY(-2px);border-color:rgba(var(--c),.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -14px rgba(var(--c),.9)}
.t-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:50%;opacity:.35;pointer-events:none}
.t-topo,.t-base{position:relative;display:flex;gap:8px}
.t-topo{justify-content:space-between;align-items:flex-start}
.t-id b{display:block;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;color:var(--ouro2)}
.t-id{min-width:0}.t-id small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.25;color:var(--mudo);margin-top:5px;overflow:hidden}
.t-var{font:700 12px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:5px 9px;border-radius:99px;white-space:nowrap}
.t-var.sobe{color:#2ee59d;background:rgba(46,229,157,.12)}.t-var.desce{color:#ff5d6c;background:rgba(255,93,108,.12)}
.t-base{flex-direction:column;gap:4px}
.t-base strong{white-space:nowrap;font:700 28px/1.05 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.t-pct{font-size:12px;color:#cfc8b8}
.t-barra{display:block;height:4px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px}
.t-barra span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--ouro),var(--ouro2));animation:barraIn 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
.tile.estreito{padding:12px 12px 12px 14px}.tile.estreito .t-topo{flex-direction:column;gap:7px}.tile.estreito .t-var{padding:4px 8px;font-size:11px}.tile.estreito .t-pct{font-size:11px;line-height:1.3}
.tile.baixo{padding-block:10px}.tile.baixo .t-pct{display:none}.tile.baixo .t-topo{flex-direction:row;align-items:flex-start;gap:8px}
.tile.mini{padding:8px 10px 8px 12px}.tile.mini .t-id small,.tile.mini .t-pct,.tile.mini .t-barra{display:none}.tile.mini .t-topo{flex-direction:row;align-items:center;gap:6px}.tile.mini .t-var{padding:3px 7px;font-size:10.5px}
@keyframes barraIn{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@keyframes tileIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.ranking.cot li{gap:12px}
.r-cod{display:inline-block;font:700 12px ui-monospace,Consolas,monospace;color:var(--ouro2);margin-right:8px}
.spark{width:90px;height:34px;flex:none}
.r-val{display:flex;flex-direction:column;align-items:flex-end;min-width:110px}
.r-val b{font:700 14px ui-monospace,Consolas,monospace;color:#fff}
.r-val i{font:600 12px ui-monospace,Consolas,monospace;font-style:normal}
.r-val i.sobe{color:#2ee59d}.r-val i.desce{color:#ff5d6c}
@media (max-width:600px){.spark{width:60px}.r-val{min-width:0}.mapa{min-height:300px}}
@media (prefers-reduced-motion:reduce){.tile,.t-barra span{animation:none}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips button{display:inline-flex;align-items:center;gap:8px;background:#08080a;border:1px solid var(--borda);color:#e8e2d4;border-radius:99px;padding:6px 12px;font:600 12px ui-monospace,Consolas,monospace;cursor:pointer;min-height:34px}
.chips button span{width:10px;height:10px;border-radius:50%}
.chips button.on{border-color:var(--ouro);color:var(--ouro2)}