/* Fontes e resultados do PlugContas (hub + painel demonstrativo). Componente isolado: gen/parts.py hub() + assets/hub.js. */
.cwin__body:has(> .hubp){padding:14px;background:radial-gradient(55% 60% at 92% 8%,rgba(119,121,236,.12),transparent 70%),radial-gradient(50% 55% at 18% 100%,rgba(37,99,235,.09),transparent 70%),linear-gradient(160deg,#f6f8fc 0%,#eef2f9 55%,#f2f1fa 100%)}
/* Vidro claro: mesmo padrão de cartão da mini demonstração do app */
.hubp{--hg:rgba(255,255,255,.66);--hg-b:rgba(255,255,255,.75);--hg-sh:0 0 0 1px rgba(15,26,51,.045),0 1px 2px rgba(15,26,51,.04),0 10px 24px -18px rgba(15,26,51,.28);--hsoft:rgba(15,26,51,.045)}
.hubp .hubp__node,.hubp .hubp__core,.hubp .hubp__card{background:var(--hg);border:1px solid var(--hg-b);box-shadow:var(--hg-sh);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hubp .hubp__node,.hubp .hubp__core,.hubp .hubp__card{background:rgba(255,255,255,.94)}}
.hubp{position:relative;display:grid;grid-template-columns:minmax(128px,156px) 44px 82px 36px minmax(0,1fr);grid-template-areas:"src . core . panel";align-items:stretch;font-size:.8125rem;line-height:1.35;color:var(--ink)}
.hubp *{box-sizing:border-box}
.hubp__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hubp__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.hubp__wires path{fill:none;stroke:rgba(102,113,138,.35);stroke-width:1.25}
.hubp__wires circle{fill:rgba(102,113,138,.45)}
.hubp__flow{display:none}

/* Fontes */
.hubp__src{grid-area:src;position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:6px}
.hubp__node{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 8px;padding:7px 8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-weight:500;font-size:.8125rem;line-height:1.2}
.hubp__hl{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(37,99,235,.45);background:rgba(37,99,235,.04);box-shadow:0 0 0 3px rgba(37,99,235,.08);opacity:0;pointer-events:none}
.hubp__ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--hsoft);color:var(--ink-2)}
.hubp__ic svg{width:15px;height:15px}
.hubp__name{position:relative;overflow-wrap:anywhere}
.hubp__logos{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px}
.hubp__logos img{width:20px;height:20px;border-radius:5px;border:1px solid rgba(15,26,51,.06);object-fit:cover;background:#fff}

/* Centro */
.hubp__core{grid-area:core;align-self:center;position:relative;z-index:1;display:grid;justify-items:center;gap:6px;padding:12px 4px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-1);text-align:center}
.hubp__core img{width:36px;height:36px;position:relative}
.hubp__brand{font-weight:600;font-size:.75rem;letter-spacing:-.02em;line-height:1.1}
.hubp__brand b{color:var(--brand)}
.hubp__pulse{position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--brand);opacity:0;pointer-events:none}

/* Painel */
.hubp__panel{grid-area:panel;position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;align-content:start}
.hubp__cap{grid-column:1/-1;margin:0;padding-right:40px;font-size:.75rem;color:var(--ink-3);line-height:1.35;min-height:20px}
.hubp__cap b{color:var(--ink);font-weight:500;margin-right:4px}
.hubp__card{position:relative;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);min-width:0}
.hubp__glow{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(37,99,235,.4);box-shadow:0 0 0 3px rgba(37,99,235,.07);opacity:0;pointer-events:none}
.hubp__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hubp__hic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--hsoft);color:var(--ink-2)}
.hubp__hic svg{width:14px;height:14px}
.hubp__t{margin:0;font-weight:500;font-size:.875rem;letter-spacing:-.005em;color:var(--ink);flex:1 1 auto;min-width:0}
.hubp__tag{font-size:.75rem;font-weight:400;color:var(--ink-3);background:var(--hsoft);border-radius:999px;padding:1px 8px;white-space:nowrap}

/* Resultado */
.hubp__dre{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.hubp__dre li{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:.75rem;color:var(--ink-2)}
.hubp__dre b{font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;min-width:74px}
.hubp__bar{height:6px;border-radius:999px;background:rgba(15,26,51,.06);overflow:hidden}
.hubp__bar i{display:block;height:100%;border-radius:inherit;background:#c3cde0;transform-origin:left center;transform:scaleX(var(--w))}
.hubp__bar i.is-in{background:var(--brand)}
.hubp__res{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-top:8px;padding:8px 0 0;border-top:1px solid rgba(15,26,51,.08);color:var(--ink-3);font-size:.75rem;font-weight:400}
.hubp__res > b{font-size:1.25rem;font-weight:600;color:var(--good);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hubp__marg{margin-left:auto;color:var(--ink-3);font-weight:400}
.hubp__marg b{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hubp__note{margin:4px 0 0;font-size:.75rem;color:var(--ink-3)}

/* Caixa */
.hubp__chart{position:relative}
.hubp__chart svg{display:block;width:100%;height:auto;overflow:visible}
.hubp__grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.hubp__axis{stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.hubp__ghost{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:2 4;opacity:0;vector-effect:non-scaling-stroke}
.hubp__area{fill:var(--brand);opacity:.09}
.hubp__line{fill:none;stroke:var(--brand);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hubp__dot{fill:var(--paper);stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke}
.hubp__gl{position:absolute;left:0;transform:translateY(-115%);font-size:.75rem;color:var(--ink-3);line-height:1;padding:1px 4px 1px 0;background:rgba(255,255,255,.75);border-radius:3px}
.hubp__endlb{position:absolute;right:0;transform:translateY(-100%);font-size:.75rem;font-weight:500;color:var(--brand-ink);line-height:1;background:rgba(255,255,255,.8);padding:1px 3px;border-radius:4px}
.hubp__x{display:flex;justify-content:space-between;margin-top:4px;font-size:.75rem;color:var(--ink-3)}
.hubp__kv{margin:6px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.hubp__kv div{min-width:0;padding:5px 8px;border-radius:8px;background:var(--hsoft)}
.hubp__kv dt{font-size:.75rem;color:var(--ink-3);line-height:1.25}
.hubp__kv dd{margin:0;font-size:.8125rem}
.hubp__kv b{font-weight:500;font-variant-numeric:tabular-nums}
.hubp__fin b{color:var(--brand-ink);font-weight:600}

/* Vencimentos */
.hubp__venc{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hubp__venc li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:3px 6px;border-radius:8px;font-size:.8125rem}
.hubp__venc .hubp__hl{inset:0;border:0;box-shadow:none;background:rgba(37,99,235,.06)}
.hubp__vn,.hubp__venc b,.hubp__due{position:relative}
.hubp__venc b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;min-width:68px}
.hubp__due{font-style:normal;font-size:.75rem;font-weight:400;color:var(--ink-3);background:var(--hsoft);border-radius:999px;padding:1px 7px;white-space:nowrap}
.hubp__due.is-hoje{color:#8a5a0c;background:rgba(217,138,11,.10)}
.hubp__tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;padding:6px 6px 0;border-top:1px solid rgba(15,26,51,.08);font-size:.8125rem;font-weight:400;color:var(--ink-2)}
.hubp__tot b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* IA */
.hubp__q{margin:0 0 6px auto;max-width:88%;width:fit-content;padding:7px 10px;border-radius:12px 12px 4px 12px;background:var(--brand);color:#fff;font-size:.8125rem;font-weight:400}
.hubp__a{display:flex;gap:8px;align-items:flex-start}
.hubp__a img{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover;background:#e9eef7}
.hubp__a p{margin:0;padding:7px 10px;border-radius:12px 12px 12px 4px;background:var(--hsoft);font-size:.8125rem;color:var(--ink)}
.hubp__a small{display:block;margin-top:4px;font-size:.75rem;color:var(--ink-3)}

/* Pausar/continuar (só com JS e movimento permitido) */
.hubp__pause{position:absolute;top:-4px;right:0;z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:999px;border:1px solid rgba(15,26,51,.08);background:rgba(255,255,255,.7);color:var(--ink-3);cursor:pointer}
.hubp__pause[hidden]{display:none}
.hubp__pause:hover{color:var(--brand-ink);border-color:var(--brand)}
.hubp__pause svg{width:13px;height:13px;fill:currentColor}
.hubp__pause .hubp__i-play,.hubp__pause[aria-pressed="true"] .hubp__i-pause{display:none}
.hubp__pause[aria-pressed="true"] .hubp__i-play{display:block}

/* Pacotes que viajam pelos fios */
.hubp__pkt{position:absolute;left:0;top:0;z-index:2;width:18px;height:18px;margin:-9px 0 0 -9px;display:grid;place-items:center;border-radius:6px;background:var(--paper);border:1px solid rgba(37,99,235,.55);color:var(--brand-ink);box-shadow:0 2px 6px rgba(29,78,216,.18);opacity:0;pointer-events:none;will-change:transform,opacity}
.hubp__pkt svg{width:11px;height:11px}
.hubp__pkt--out{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--brand);border:0}

@media (max-width:1080px){.hubp__panel{grid-template-columns:minmax(0,1fr)}}
/* Celular: fontes → PlugContas → resultados, conexões simplificadas */
@media (max-width:760px){
  .hubp{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:0}
  .hubp > *{grid-area:auto}
  .hubp__wires,.hubp__pkt{display:none}
  .hubp__src{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hubp__node{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px}
  .hubp__logos{grid-column:1/-1}
  .hubp__node:last-child:nth-child(odd){grid-column:1/-1}
  .hubp__flow{display:block;justify-self:center;width:2px;height:22px;margin:4px 0;background:var(--line-strong);position:relative}
  .hubp__flow::after{content:"";position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);transform:translateX(-50%) rotate(45deg)}
  .hubp__core{justify-self:center;grid-auto-flow:column;align-items:center;padding:8px 16px;gap:8px;border-radius:14px}
  .hubp__core img{width:30px;height:30px}
  .hubp__brand{font-size:.9375rem}
  .hubp__dre li{grid-template-columns:64px minmax(0,1fr) auto}
  .hubp__kv{grid-template-columns:1fr 1fr}
  
}
@media (prefers-reduced-motion:reduce){.hubp__pkt,.hubp__pause{display:none}}