/* Visão geral — layout do painel de ferramenta.html.
   Os seletores começam com "#calc-embed .vg" de propósito: o CSS antigo da ferramenta também
   é "#calc-embed ..." e vem depois no HTML, então aqui a especificidade tem que ser maior.
   Só tokens da página (nada de hex solto). Nenhum texto abaixo de 11px. */

#calc-embed .tui [hidden]{ display: none !important; }

/* sem o "painel claro": os cartões ficam direto sobre o fundo da página */
#calc-embed .receipt.vg{
  max-width: 1120px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
#calculadora{ background: transparent; border: 0; }

/* ---------- cabeçalho ---------- */
#calc-embed .vg .vg-top{
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px;
  padding: 0 0 18px;
}
#calc-embed .vg .vg-hello{ margin: 0; font: 700 28px/1.15 'Geist', sans-serif; letter-spacing: -0.01em; }
#calc-embed .vg .vg-sub{ margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); max-width: none; }
#calc-embed .vg .vg-top-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#calc-embed .vg .vg-month{
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--paper-card); border: 0.5px solid var(--line); border-radius: 12px; padding: 0 2px;
}
#calc-embed .vg .vg-month-label{ min-width: 128px; text-align: center; font: 600 14px 'Geist', sans-serif; padding: 0 4px; }
#calc-embed .vg .vg-month-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 10px;
}
#calc-embed .vg .vg-month-btn:hover:not(:disabled){ background: var(--surface-2); }
#calc-embed .vg .vg-month-btn:disabled{ color: var(--ink-soft); opacity: 0.35; cursor: default; }
#calc-embed .vg .vg-month-btn:focus-visible{ outline: 2px solid var(--emerald); outline-offset: -2px; }
#calc-embed .vg .vg-month-btn svg{ width: 18px; height: 18px; }

/* ---------- abas ---------- */
#calc-embed .vg .tool-tabs{ border: 0; gap: 8px; margin: 0 0 18px; }
#calc-embed .vg .tool-tab-btn{
  flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: 12px; border: 0.5px solid transparent;
  background: transparent; color: var(--ink-soft);
  font: 500 14px 'Geist', sans-serif; letter-spacing: 0; text-transform: none;
}
#calc-embed .vg .tool-tab-btn:hover{ color: var(--ink); }
#calc-embed .vg .tool-tab-btn.active{ background: var(--paper-card); color: var(--ink); border: 0.5px solid var(--line); font-weight: 600; }
#calc-embed .vg .tool-tab-btn:focus-visible{ outline: 2px solid var(--emerald); outline-offset: 2px; }

/* ---------- painéis ---------- */
#calc-embed .vg .dash-view{ padding: 0; }
#calc-embed .vg .vg-readonly-bar{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px; padding: 12px 16px; border-radius: 16px;
  background: var(--ochre-soft); color: var(--ink); font-size: 14px;
}

/* grade: 2 colunas no desktop; no mobile as colunas "somem" e a ordem vem de order */
#calc-embed .vg .vg-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
#calc-embed .vg .vg-col{ display: contents; }
#calc-embed .vg .vg-sobra{ order: 1; }
#calc-embed .vg .vg-ghost-sobra{ order: 1; }
#calc-embed .vg .vg-today{ order: 2; }
#calc-embed .vg .vg-three{ order: 3; }
#calc-embed .vg .vg-jars{ order: 4; }
#calc-embed .vg .vg-cats{ order: 5; }
#calc-embed .vg .vg-ghost-cats{ order: 5; }
#calc-embed .vg .vg-insight{ order: 6; }
@media (min-width: 900px){
  #calc-embed .vg .vg-grid{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  #calc-embed .vg .vg-col{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}

#calc-embed .vg .card{ padding: 20px; border-radius: 16px; }
#calc-embed .vg .card-title{ font-size: 12px; text-transform: none; letter-spacing: 0; }
#calc-embed .vg .vg-onboard{ margin-bottom: 16px; }

/* ---------- sobra ---------- */
#calc-embed .vg .vg-sobra-body{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
#calc-embed .vg .vg-sobra .stat-value{ font-size: clamp(36px, 6vw, 48px); }
#calc-embed .vg .vg-pills{ display: flex; align-items: flex-end; gap: 10px; height: 76px; }
#calc-embed .vg .vg-pill-col{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
#calc-embed .vg .vg-pill{ display: block; width: 14px; height: calc(var(--h) * 0.52); min-height: 6px; border-radius: 999px; background: var(--emerald); opacity: 0.45; }
#calc-embed .vg .vg-pill.is-now{ opacity: 1; }
#calc-embed .vg .vg-pill.is-empty{ background: var(--line); opacity: 1; }
#calc-embed .vg .vg-pill-lbl{ font-size: 11px; color: var(--ink-soft); line-height: 1; }
#calc-embed .vg .vg-usage{ margin-top: 18px; }
#calc-embed .vg .bar-meta b{ color: var(--ink); }

/* ---------- 3 cartões ---------- */
#calc-embed .vg .vg-three{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#calc-embed .vg .vg-mini{ padding: 16px; display: flex; flex-direction: column; gap: 14px; min-height: 44px; }
#calc-embed .vg .vg-mini .card-head{ margin: 0; }
#calc-embed .vg .vg-mini .stat-value{ font-size: 20px; }
#calc-embed .vg .vg-mini .stat-sub{ min-height: 16px; }
#calc-embed .vg .vg-mini .stat-value{ white-space: nowrap; }
#calc-embed .vg .vg-chevron{ color: var(--ink-soft); display: inline-flex; }
#calc-embed .vg .vg-chevron svg{ width: 16px; height: 16px; }
#calc-embed .vg .vg-mini:disabled{ cursor: default; opacity: 1; color: inherit; }
#calc-embed .vg .vg-mini:disabled .vg-chevron{ visibility: hidden; }
#calc-embed .vg .vg-mini:disabled:hover{ border-color: var(--line); }
@media (max-width: 520px){
  #calc-embed .vg .vg-three{ gap: 8px; }
  #calc-embed .vg .vg-mini{ padding: 12px; gap: 10px; }
  #calc-embed .vg .vg-mini .card-icon{ width: 28px; height: 28px; }
  #calc-embed .vg .vg-mini .stat-value{ font-size: 16px; }
  #calc-embed .vg .vg-mini .stat-value .cents{ display: none; } /* cabe o valor inteiro em 3 colunas */
}

/* ---------- categorias (rosca ~96px) ---------- */
#calc-embed .vg .dash-donut-section{ display: block; padding: 20px; margin: 0; background: var(--paper-card); border: 0.5px solid var(--line); border-radius: 16px; }
#calc-embed .vg .vg-cats-body{ display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#calc-embed .vg .dash-donut-wrap{ width: 96px; height: 96px; margin: 0; }
#calc-embed .vg .dash-donut-total-value{ font-size: 12px; }
#calc-embed .vg .dash-donut-total-label{ font-size: 11px; text-transform: none; letter-spacing: 0; }
#calc-embed .vg .dash-donut-legend{ flex: 1; min-width: 180px; }
#calc-embed .vg .dash-donut-legend-item{ min-height: 32px; font-size: 13px; }
#calc-embed .vg .dash-donut-legend-name{ flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
#calc-embed .vg .dash-donut-legend-name .chip{ font-size: 11px; padding: 3px 8px; }
#calc-embed .vg .dash-cat-detail{ margin-top: 16px; }

/* ---------- hoje + adicionar rápido ---------- */
#calc-embed .vg .vg-today .stat-value{ font-size: clamp(32px, 5vw, 40px); }
#calc-embed .vg .vg-today.over .stat-value{ color: var(--rust-text); }
#calc-embed .vg .vg-today-note{ margin: 4px 0 12px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
#calc-embed .vg .vg-quick{ margin-top: 18px; padding-top: 16px; border-top: 0.5px solid var(--line); }
#calc-embed .vg .vg-quick-label{ display: block; margin-bottom: 8px; font-size: 12px; color: var(--ink-soft); }
#calc-embed .vg .vg-quick-row{ display: flex; gap: 8px; }
#calc-embed .vg .vg-quick-row .tui-input{ min-width: 0; flex: 1 1 auto; }
#calc-embed .vg .vg-quick-row .vg-q-amount{ flex: 0 0 112px; width: 112px; text-align: right; }
#calc-embed .vg .vg-q-submit{ flex: 0 0 48px; width: 48px; padding: 0; }
#calc-embed .vg .vg-quick-meta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; min-height: 32px; }
#calc-embed .vg .vg-q-picker{ margin: 0; }
#calc-embed .vg .vg-q-picker .chip{ min-height: 32px; font-size: 12px; }
#calc-embed .vg .vg-q-picker .cat-swatch{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#calc-embed .vg .vg-q-picker .chip.is-pending{ box-shadow: 0 0 0 1.5px var(--rust-text); }
#calc-embed .vg .vg-q-status{ font-size: 12px; font-weight: 600; color: var(--emerald); }

/* ---------- baldes ---------- */
#calc-embed .vg .vg-jars-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#calc-embed .vg .vg-jars-row.is-two{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 280px; margin: 0 auto; }
/* o .jar antigo de "#calc-embed" tem especificidade alta; aqui o desenho da capa de volta */
#calc-embed .vg .jar{ width: 44px; max-width: 44px; height: 76px; background: var(--paper); border: 2px solid var(--ink); border-radius: 5px 5px 12px 12px; position: relative; overflow: hidden; }
#calc-embed .vg .jar-fill{ position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 1%); background: var(--c, var(--emerald)); transition: none; }
#calc-embed .vg .jar-name{ font-size: 12px; }
#calc-embed .vg .vg-link{
  min-height: 44px; margin: -12px -8px -12px 0; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 600 13px 'Geist', sans-serif; color: var(--emerald);
}
#calc-embed .vg .vg-link:hover{ text-decoration: underline; }
#calc-embed .vg .vg-link:focus-visible{ outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 8px; }

/* ---------- insight ---------- */
#calc-embed .vg .vg-insight-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#calc-embed .vg .vg-insight-list li{ display: flex; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink); }
#calc-embed .vg .vg-insight-list .bullet{ color: var(--emerald); flex-shrink: 0; }
#calc-embed .vg .vg-insight-list .placeholder{ color: var(--ink-soft); }

/* ---------- onboarding e cartões fantasma ---------- */
#calc-embed .vg .vg-onboard-title{ margin: 0; font: 700 20px/1.25 'Geist', sans-serif; }
#calc-embed .vg .vg-onboard-sub{ margin: 4px 0 16px; font-size: 14px; color: var(--ink-soft); }
#calc-embed .vg .vg-steps{ list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
#calc-embed .vg .vg-step{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-height: 56px; }
#calc-embed .vg .vg-step-dot{
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ink-soft); color: var(--ink-soft); font: 600 13px 'Geist', sans-serif;
}
#calc-embed .vg .vg-step-dot svg{ width: 16px; height: 16px; }
#calc-embed .vg .vg-step.is-done .vg-step-dot{ background: var(--emerald); border-color: var(--emerald); color: #fff; }
#calc-embed .vg .vg-step.is-done .vg-step-text{ color: var(--ink-soft); text-decoration: line-through; }
#calc-embed .vg .vg-step-text{ flex: 1; font-size: 14px; }
#calc-embed .vg .vg-step-btn{ min-height: 40px; padding: 0 14px; font-size: 13px; flex-shrink: 0; }
#calc-embed .vg .vg-onboard-progress{ display: flex; align-items: center; gap: 12px; }
#calc-embed .vg .vg-onboard-progress .bar{ flex: 1; }
#calc-embed .vg .vg-onboard-count{ font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

#calc-embed .vg .vg-ghost{ text-align: left; }
#calc-embed .vg .vg-ghost .stat-value{ color: var(--ink-soft); }
#calc-embed .vg .vg-ghost-text{ margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
#calc-embed .vg .vg-ghost-ring{
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 12px 0 4px;
  border-radius: 50%; border: 12px dashed var(--line); color: var(--ink-soft); font: 700 18px 'Geist', sans-serif;
}

/* ---------- rodapé do painel e telas de detalhe ---------- */
#calc-embed .vg .vg-links{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 20px; }
#calc-embed .vg .vg-links .dash-hist-link,
#calc-embed .vg .vg-links .dash-reset-link{ margin: 0; min-height: 44px; }
#calc-embed .vg .vg-links .dash-reset-link{ opacity: 1; color: var(--ink-soft); }
#calc-embed .vg .is-readonly [data-cur-only]{ display: none !important; }
#calc-embed .vg .footer{ padding: 18px 0 0; }

/* telas de detalhe e "Meu histórico" mantêm o visual de cartão (sem o painel antigo por trás) */
#calc-embed .vg .detail-view.active,
#calc-embed .vg #tool-panel-hist.active{
  background: var(--paper-card); border: 0.5px solid var(--line); border-radius: 16px;
}
#calc-embed .vg #tool-panel-hist.active{ overflow: hidden; padding-bottom: 8px; }
#calc-embed .vg .detail-view.active{ padding: 24px; }

@media (max-width: 760px){
  #calc-embed .vg .vg-hello{ font-size: 24px; }
  #calc-embed .vg .vg-top{ gap: 12px; }
  #calc-embed .vg .vg-top-actions{ width: 100%; justify-content: space-between; }
  #calc-embed .vg .vg-month-label{ min-width: 0; flex: 1; }
  #calc-embed .vg .vg-month{ flex: 1; }
  #calc-embed .vg .card{ padding: 16px; }
  #calc-embed .vg .vg-sobra-body{ align-items: flex-start; }
  #calc-embed .vg .vg-quick-row{ flex-wrap: wrap; }
  #calc-embed .vg .vg-quick-row #vg-q-desc{ flex: 1 1 100%; }
  #calc-embed .vg .vg-quick-row .vg-q-amount{ flex: 1 1 0; width: auto; }
  #calc-embed .vg .vg-step{ flex-wrap: wrap; }
  #calc-embed .vg .vg-step-text{ flex: 1 1 calc(100% - 44px); }
  #calc-embed .vg .vg-step-btn{ margin-left: 40px; }
  #calc-embed .vg .detail-view.active{ padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce){
  #calc-embed .vg .vg-pill, #calc-embed .vg .bar-fill{ transition: none; }
}

/* primeiro acesso: os dois cartões fantasma lado a lado */
@media (min-width: 900px){
  #calc-embed .vg .is-first .vg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  #calc-embed .vg .is-first .vg-col{ display: contents; }
}

/* =====================================================================
   MEU HISTÓRICO
   ===================================================================== */
#calc-embed .vg #tool-panel-hist.active{ background: transparent; border: 0; border-radius: 0; overflow: visible; padding: 0; }
#calc-embed .vg .hs-head{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
#calc-embed .vg .hs-title{ margin: 0; font: 700 22px/1.2 'Geist', sans-serif; letter-spacing: -0.01em; }
#calc-embed .vg .hs-head-actions{ display: flex; align-items: center; gap: 10px; }
#calc-embed .vg .hs-year{ width: auto; min-width: 96px; font-size: 16px; font-weight: 600; padding-right: 8px; }

#calc-embed .vg .hs-grid{ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
#calc-embed .vg .hs-col{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 900px){
  #calc-embed .vg .hs-grid{ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---------- gráfico ---------- */
#calc-embed .vg .hs-chart-card .card-head{ align-items: flex-start; }
#calc-embed .vg .hs-legend-note{ margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
#calc-embed .vg .hs-legend-note:empty{ display: none; }
#calc-embed .vg .hs-bars{ position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 220px; margin-top: 56px; }
#calc-embed .vg .hs-bar{
  display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0;
  border-radius: 8px;
}
#calc-embed .vg .hs-bar:hover{ background: var(--surface-2); }
#calc-embed .vg .hs-bar:focus-visible{ outline: 2px solid var(--emerald); outline-offset: -2px; }
#calc-embed .vg .hs-pill{ display: block; width: 14px; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 999px; background: var(--emerald); }
#calc-embed .vg .hs-pill.hs-past{ opacity: 0.5; }
#calc-embed .vg .hs-pill.hs-now{ opacity: 1; }
#calc-embed .vg .hs-pill.hs-neg{ background: var(--rust); opacity: 1; min-height: 14px; }
#calc-embed .vg .hs-pill.hs-empty{ background: var(--line); width: 10px; opacity: 1; }
#calc-embed .vg .hs-pill.hs-proj{ background: transparent; border: 1.5px dashed var(--emerald); opacity: 0.7; }
#calc-embed .vg .hs-pill.hs-ghost{ background: transparent; border: 1.5px dashed var(--ink-soft); opacity: 0.45; }
#calc-embed .vg .hs-pill.hs-ghost-now{ background: transparent; border: 1.5px dashed var(--emerald); }
#calc-embed .vg .hs-labels{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 8px; }
#calc-embed .vg .hs-mlabel{ text-align: center; font-size: 11px; color: var(--ink-soft); }
#calc-embed .vg .hs-mlabel.is-now{ color: var(--ink); font-weight: 600; }
#calc-embed .vg .hs-avg{
  position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 1%); height: 0; pointer-events: none;
  border-top: 1.5px dashed var(--ink-soft); opacity: 0.8; z-index: 1;
}
#calc-embed .vg .hs-avg span{ position: absolute; right: 0; bottom: 4px; font-size: 11px; color: var(--ink-soft); background: var(--paper-card); padding: 0 4px; }
#calc-embed .vg .hs-balloon{
  position: absolute; z-index: 3; pointer-events: none;
  left: clamp(70px, calc(var(--x) * 1%), calc(100% - 70px)); bottom: calc(var(--y) * 1% + 10px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap;
  padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18); font-size: 12px; color: var(--ink);
}
#calc-embed .vg .hs-balloon b{ font-weight: 600; }
#calc-embed .vg .hs-balloon-val{ font: 700 15px 'Geist', sans-serif; }
#calc-embed .vg .hs-balloon-val.is-neg{ color: var(--rust-text); }
#calc-embed .vg .hs-balloon-sub{ color: var(--ink-soft); }
#calc-embed .vg .hs-balloon .chip{ font-size: 11px; padding: 3px 8px; background: transparent; }
#calc-embed .vg .hs-chart-msg{ margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }

/* ---------- mês a mês ---------- */
#calc-embed .vg .hs-legend{ display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
#calc-embed .vg .hs-legend-item{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
#calc-embed .vg .hs-legend-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#calc-embed .vg .hs-months{ display: flex; flex-direction: column; }
#calc-embed .vg .hs-row{
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 108px 72px 44px; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 0.5px solid var(--line); min-height: 56px;
}
#calc-embed .vg .hs-row:first-child{ border-top: 0; }
#calc-embed .vg .hs-row-name{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 14px 'Geist', sans-serif; }
#calc-embed .vg .hs-row-bar .bar{ height: 10px; }
#calc-embed .vg .hs-row-bar .bar--stack > span{ height: 100%; }
#calc-embed .vg .hs-row-val{ font: 700 14px 'Geist', sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
#calc-embed .vg .hs-row-val.is-neg{ color: var(--rust-text); }
#calc-embed .vg .hs-row-var{ display: flex; justify-content: flex-end; }
#calc-embed .vg .hs-dash{ color: var(--ink-soft); font-size: 14px; }
#calc-embed .vg .hs-edit-btn{
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none;
  color: var(--ink-soft); border-radius: 10px; cursor: pointer;
}
#calc-embed .vg .hs-edit-btn:hover{ background: var(--surface-2); color: var(--ink); }
#calc-embed .vg .hs-edit-btn:focus-visible{ outline: 2px solid var(--emerald); outline-offset: -2px; }
#calc-embed .vg .hs-edit-btn svg{ width: 18px; height: 18px; }
#calc-embed .vg .hs-empty{ margin: 0; padding: 12px 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- edição retroativa (formulário que já existia) ---------- */
#calc-embed .vg .hs-edit-close{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -12px -12px 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 10px; }
#calc-embed .vg .hs-edit-close:hover{ background: var(--surface-2); color: var(--ink); }
#calc-embed .vg .hs-edit-close svg{ width: 18px; height: 18px; }
#calc-embed .vg #hist-detail{ margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }

/* ---------- lateral ---------- */
#calc-embed .vg .hs-note{ margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
#calc-embed .vg .hs-proj .stat-value{ font-size: clamp(30px, 4vw, 38px); }
#calc-embed .vg .hs-streak-row{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
#calc-embed .vg .hs-streak-n{ font: 700 36px/1 'Geist', sans-serif; color: var(--ink); }
#calc-embed .vg .hs-streak-txt{ font-size: 13px; color: var(--ink-soft); flex: 1 1 140px; }
#calc-embed .vg .hs-sdots{ display: flex; gap: 12px; margin-top: 14px; }
#calc-embed .vg .hs-sdot-wrap{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
#calc-embed .vg .hs-sdot{ width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
#calc-embed .vg .hs-sdot.is-pos{ background: var(--emerald); }
#calc-embed .vg .hs-sdot.is-neg{ background: var(--rust); }
#calc-embed .vg .hs-sdot-lbl{ font-size: 11px; color: var(--ink-soft); }
#calc-embed .vg .hs-goal-list{ display: flex; flex-direction: column; gap: 18px; }
#calc-embed .vg .hs-goal-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#calc-embed .vg .hs-goal-name{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font: 600 14px 'Geist', sans-serif; }
#calc-embed .vg .hs-goal-name .chip{ font-size: 11px; padding: 3px 8px; }
#calc-embed .vg .hs-goal-pct{ font: 700 14px 'Geist', sans-serif; }
#calc-embed .vg .hs-goal-eta{ margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
#calc-embed .vg .hs-goal .bar-meta{ margin-top: 6px; }
#calc-embed .vg .hs-goal-link{ margin: 4px 0 -8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px 'Geist', sans-serif; color: var(--emerald); text-align: left; }
#calc-embed .vg .hs-goal-link:hover{ text-decoration: underline; }
#calc-embed .vg .hs-goal-link:focus-visible{ outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 6px; }
#calc-embed .vg .hs-goal-form{ display: grid; gap: 8px; margin-top: 8px; }
#calc-embed .vg .hs-goal-form-actions{ display: flex; gap: 8px; }
#calc-embed .vg .hs-goal-invite-title{ margin: 0; font: 600 16px 'Geist', sans-serif; }
#calc-embed .vg .hs-goal-invite .tui-btn{ margin-top: 12px; }

@media (max-width: 760px){
  #calc-embed .vg .hs-row{ grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "name val edit" "bar bar bar"; gap: 6px 10px; }
  #calc-embed .vg .hs-row-name{ grid-area: name; }
  #calc-embed .vg .hs-row-val{ grid-area: val; }
  #calc-embed .vg .hs-row-bar{ grid-area: bar; }
  #calc-embed .vg .hs-row-var{ display: none; }
  #calc-embed .vg .hs-edit-btn, #calc-embed .vg .hs-row-edit{ grid-area: edit; }
  #calc-embed .vg .hs-bars{ height: 180px; }
  #calc-embed .vg .hs-pill{ width: 10px; }
}
/* =====================================================================
   Botão OK fixo no rodapé das telas de detalhe
   ===================================================================== */
#calc-embed .vg .detail-ok-bar{
  position: sticky;
  bottom: var(--vk-inset, 0px);           /* acima do teclado virtual quando ele abre */
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 28px -24px -24px;               /* cola nas bordas do cartão do detalhe */
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper-card);          /* fundo opaco: nada aparece por trás */
  border-top: 0.5px solid var(--line);
  border-radius: 0 0 16px 16px;
}
#calc-embed .vg .detail-ok-btn{ min-height: 48px; width: 240px; max-width: 100%; border-radius: 12px; font-size: 16px; }
#calc-embed .vg .detail-ok-msg{ margin: 0; font-size: 13px; font-weight: 600; color: var(--rust-text); text-align: center; }
#calc-embed .vg .detail-ok-msg:empty{ display: none; }
@media (max-width: 760px){
  #calc-embed .vg .detail-ok-bar{ margin: 24px -16px -20px; padding-left: 16px; padding-right: 16px; }
  #calc-embed .vg .detail-ok-btn{ width: 100%; }
  /* 16px nos campos: o iOS não dá zoom ao focar */
  #calc-embed .vg .detail-view input[type="text"],
  #calc-embed .vg .detail-view input:not([type]),
  #calc-embed .vg .detail-view select{ font-size: 16px; }
}

/* mensagem curta ao lado do campo ("Falta o valor") */
#calc-embed .vg .field-msg{ margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--rust-text); }
#calc-embed .vg .field-msg:empty{ display: none; }

/* aviso "Salvo" */
.vg-toast{
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: 600 14px 'Geist', sans-serif;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.vg-toast.show{ opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce){ .vg-toast{ transition: none; } }
/* lançamentos do dia a dia em tela estreita: quebram linha em vez de estourar a largura */
@media (max-width: 520px){
  #calc-embed .vg .dia-entry-row{ flex-wrap: wrap; row-gap: 4px; }
  #calc-embed .vg .dia-entry-desc{ flex: 1 1 100px; min-width: 0; overflow-wrap: anywhere; }
  #calc-embed .vg .dia-entry-amt{ width: auto; }
}
#calc-embed .vg .dia-entry-del{ min-width: 44px; min-height: 44px; }
/* =====================================================================
   Meta de guardar no mês (card "Hoje você pode gastar")
   ===================================================================== */
#calc-embed .vg .vg-today.below .stat-value{ color: var(--rust-text); opacity: 0.85; } /* coral suave: o texto e o R$ 0,00 também dizem o estado */
#calc-embed .vg .vg-meta{ margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--line); }
#calc-embed .vg .vg-meta-none{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#calc-embed .vg .vg-meta-text{ margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
#calc-embed .vg .vg-meta-none .vg-meta-text{ margin: 0; }
#calc-embed .vg .vg-meta-none .tui-btn{ min-height: 44px; }
#calc-embed .vg .vg-meta-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#calc-embed .vg .vg-meta-label{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); flex: 1 1 auto; }
#calc-embed .vg .vg-meta-label svg{ width: 16px; height: 16px; color: var(--emerald); }
#calc-embed .vg .vg-meta-val{ font: 700 15px 'Geist', sans-serif; font-variant-numeric: tabular-nums; }
#calc-embed .vg .vg-meta-pct{ font-weight: 500; font-size: 12px; color: var(--ink-soft); }
#calc-embed .vg .vg-meta-pencil{ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; background: none; color: var(--ink-soft); border-radius: 10px; cursor: pointer; }
#calc-embed .vg .vg-meta-pencil:hover{ background: var(--surface-2); color: var(--ink); }
#calc-embed .vg .vg-meta-pencil svg{ width: 18px; height: 18px; }
#calc-embed .vg .vg-meta-link{ min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px 'Geist', sans-serif; color: var(--emerald); }
#calc-embed .vg .vg-meta-link:hover{ text-decoration: underline; }

#calc-embed .vg .vg-meta-editor{ margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--line); display: grid; gap: 12px; }
#calc-embed .vg .vg-meta-title{ margin: 0; font: 600 14px 'Geist', sans-serif; }
#calc-embed .vg .vg-seg{ display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--surface-2); justify-self: start; }
#calc-embed .vg .vg-seg button{ min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); font: 500 14px 'Geist', sans-serif; cursor: pointer; }
#calc-embed .vg .vg-seg button[aria-pressed="true"]{ background: var(--paper-card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 0.5px var(--line); }
#calc-embed .vg .vg-meta-field{ display: flex; align-items: center; gap: 8px; }
#calc-embed .vg .vg-meta-field .tui-input{ flex: 1 1 auto; min-width: 0; }
#calc-embed .vg .vg-meta-prefix, #calc-embed .vg .vg-meta-suffix{ font: 600 15px 'Geist', sans-serif; color: var(--ink-soft); }
#calc-embed .vg .vg-meta-quick{ display: flex; flex-wrap: wrap; gap: 8px; }
#calc-embed .vg .vg-meta-quick .chip-btn{ min-height: 44px; padding: 0 14px; font-size: 13px; }
#calc-embed .vg .vg-meta-preview{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink); min-height: 20px; }
#calc-embed .vg .vg-meta-editor .field-msg{ margin: 0; }
#calc-embed .vg .vg-meta-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
#calc-embed .vg .vg-meta-actions .tui-btn{ min-height: 44px; }
#calc-embed .vg .vg-today.below .bar-fill, #calc-embed .vg .vg-today.over .bar-fill{ background: var(--rust); opacity: 0.7; }

/* =====================================================================
   Mercado agora
   ===================================================================== */
#calc-embed .vg .vg-market{ order: 6; }
#calc-embed .vg .mk-rows{ display: flex; flex-direction: column; }
#calc-embed .vg .mk-item{ border-top: 0.5px solid var(--line); }
#calc-embed .vg .mk-item:first-child{ border-top: 0; }
#calc-embed .vg .mk-row{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "text text" "meta meta";
  gap: 2px 12px; width: 100%; padding: 14px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; align-items: baseline;
}
#calc-embed .vg .mk-row--off{ cursor: default; }
#calc-embed .vg .mk-label{ grid-area: label; font-size: 13px; color: var(--ink-soft); }
#calc-embed .vg .mk-value{ grid-area: value; justify-self: end; text-align: right; font: 700 26px/1.1 'Geist', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
#calc-embed .vg .mk-value.mk-up{ color: var(--rust-text); }
#calc-embed .vg .mk-value.mk-down{ color: var(--emerald); }
#calc-embed .vg .mk-value.mk-na{ font-size: 16px; font-weight: 600; color: var(--ink-soft); }
#calc-embed .vg .mk-delta{ display: block; font: 600 12px 'Geist', sans-serif; letter-spacing: 0; margin-top: 3px; }
#calc-embed .vg .mk-text{ grid-area: text; font-size: 13px; line-height: 1.5; color: var(--ink); }
#calc-embed .vg .mk-meta{ grid-area: meta; font-size: 11px; color: var(--ink-soft); }
#calc-embed .vg .mk-row:not(.mk-row--off):hover .mk-label{ color: var(--ink); }
#calc-embed .vg .mk-foot{ margin: 12px 0 0; padding-top: 12px; border-top: 0.5px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
#calc-embed .vg .mk-inline{ padding: 0 0 14px; animation: mk-fade 0.2s ease; }
@keyframes mk-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* skeleton */
#calc-embed .vg .mk-skel{ display: grid; gap: 8px; padding: 16px 0; border-top: 0.5px solid var(--line); animation: mk-pulse 1.4s ease-in-out infinite; }
#calc-embed .vg .mk-skel:first-child{ border-top: 0; }
#calc-embed .vg .mk-skel span{ display: block; height: 14px; border-radius: 6px; background: var(--surface-2); }
#calc-embed .vg .mk-skel span:first-child{ width: 55%; height: 22px; }
@keyframes mk-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.45; } }

/* gráficos */
.mk-svg{ display: block; width: 100%; height: auto; overflow: visible; }
.mk-t{ font: 11px 'Geist', sans-serif; fill: var(--ink-soft); }
.mk-s-up{ fill: var(--rust-text, var(--rust)); opacity: 0.85; }
.mk-s-down{ fill: var(--emerald); opacity: 0.9; }
.mk-s-axis{ stroke: var(--line); stroke-width: 1; }
.mk-s-line{ stroke: var(--rust-text, var(--rust)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mk-s-neutral{ stroke: var(--ink-soft); }
.mk-s-area{ fill: var(--rust-text, var(--rust)); opacity: 0.12; }
.mk-s-dot{ fill: var(--rust-text, var(--rust)); }
.mk-cap{ margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-soft); }

/* painel ao lado do card (desktop com mouse) */
.mk-pop{
  position: fixed; z-index: 70; padding: 14px 16px 12px; border-radius: 16px;
  background: var(--paper-card); border: 0.5px solid var(--line); box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  color: var(--ink); opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mk-pop.from-right{ transform: translateX(8px); }
.mk-pop.is-open{ opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce){
  .mk-pop{ transition: none; transform: none; }
  #calc-embed .vg .mk-inline{ animation: none; }
  #calc-embed .vg .mk-skel{ animation: none; }
}
@media (max-width: 520px){ #calc-embed .vg .mk-value{ font-size: 22px; } }
/* =====================================================================
   Mercado agora — v2 (gráficos com eixos, tooltip, sparklines)
   ===================================================================== */
#calc-embed .vg .mk-item + .mk-item{ margin-top: 2px; }
#calc-embed .vg .mk-row{
  grid-template-columns: minmax(0, 1fr) 60px auto;
  grid-template-areas: "label spark value" "text text text" "meta meta meta";
  gap: 4px 14px; padding: 20px 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 12px; align-items: center;
  transition: background-color 0.15s ease;
}
#calc-embed .vg .mk-row--off{ padding: 18px 10px; }
@media (hover: hover) and (pointer: fine){ #calc-embed .vg .mk-row:not(.mk-row--off):hover{ background: var(--surface-2); } }
#calc-embed .vg .mk-row:not(.mk-row--off):focus-visible{ background: var(--surface-2); }
#calc-embed .vg .mk-label{ display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); }
#calc-embed .vg .mk-spark{ grid-area: spark; display: block; line-height: 0; justify-self: center; }
#calc-embed .vg .mk-spark svg{ display: block; overflow: visible; }
#calc-embed .vg .mk-value{ font-size: 32px; font-weight: 700; line-height: 1.05; }
#calc-embed .vg .mk-value.mk-na{ font-size: 18px; }
#calc-embed .vg .mk-delta{ font-size: 13px; margin-top: 4px; }
#calc-embed .vg .mk-text{ margin-top: 6px; font-size: 14px; }
#calc-embed .vg .mk-meta{ margin-top: 2px; }
#calc-embed .vg .mk-row--off .mk-meta{ grid-column: 1 / -1; }
/* celular: setinha que gira ao expandir (no desktop o sinal de interação é o fundo no hover) */
#calc-embed .vg .mk-chev{ display: none; width: 16px; height: 16px; transition: transform 0.2s ease; }
#calc-embed .vg .mk-chev svg{ width: 16px; height: 16px; }
@media (hover: none), (pointer: coarse){
  #calc-embed .vg .mk-chev{ display: inline-flex; }
  #calc-embed .vg .mk-row[aria-expanded="true"] .mk-chev{ transform: rotate(90deg); }
}
/* expansão embaixo da linha: altura animada sem pular o layout */
#calc-embed .vg .mk-inline{ display: grid; grid-template-rows: 0fr; padding: 0; animation: none; transition: grid-template-rows 0.25s ease; }
#calc-embed .vg .mk-inline.is-open{ grid-template-rows: 1fr; }
#calc-embed .vg .mk-inline-in{ overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.2s ease; }
#calc-embed .vg .mk-inline.is-open .mk-inline-in{ opacity: 1; padding: 4px 0 16px; }
@media (max-width: 520px){ #calc-embed .vg .mk-value{ font-size: 26px; } #calc-embed .vg .mk-row{ gap: 4px 10px; } }

/* painel do gráfico (ao lado do card no desktop, embaixo da linha no celular) */
.mk-pop{ width: 360px; padding: 16px; border-radius: 16px; }
:root:not([data-theme="dark"]) .mk-pop{ --ink-soft: #6A604F; --rust-text: #9A432B; }
.mk-ph-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mk-ph-title{ font: 600 14px 'Geist', sans-serif; color: var(--ink); }
.mk-ph-sub{ font: 400 12px 'Geist', sans-serif; color: var(--ink-soft); }
.mk-ph-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.mk-ph-value{ font: 700 30px/1.05 'Geist', sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mk-chip{ display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font: 600 12px/1 'Geist', sans-serif; white-space: nowrap; }
.mk-chip--up{ background: var(--rust-soft); color: var(--rust-text, var(--rust)); }
.mk-chip--down{ background: var(--emerald-soft); color: var(--emerald); }
.mk-chip--neu{ background: var(--surface-2); color: var(--ink); }
.mk-plot{ position: relative; }
.mk-svg{ display: block; overflow: visible; touch-action: pan-y; }
.mk-t{ font: 400 12px 'Geist', sans-serif; fill: var(--ink-soft); }
.mk-t-strong{ font-weight: 700; fill: var(--ink); }
.mk-grid{ stroke: rgba(255,255,255,0.06); stroke-width: 1; }
:root:not([data-theme="dark"]) .mk-grid{ stroke: rgba(43,38,32,0.10); }
.mk-zero{ stroke: var(--ink-soft); stroke-width: 1; opacity: 0.5; }
.mk-guide{ stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.mk-hl{ opacity: 0; pointer-events: none; }
.mk-cap{ margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-soft); }
.mk-tip{
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap;
  background: var(--surface-2); border: 0.5px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.mk-tip-when{ font: 400 12px 'Geist', sans-serif; color: var(--ink-soft); }
.mk-tip-val{ font: 700 15px 'Geist', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-bar{ opacity: 0.55; transform-box: fill-box; transform-origin: 50% 100%; animation: mk-grow 0.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 25ms); transition: opacity 0.12s ease; }
.mk-bar.neg{ transform-origin: 50% 0%; }
.mk-bar.is-last, .mk-bar.is-hot{ opacity: 1; }
.mk-lbl:not(.is-last){ opacity: 0.9; }
.mk-draw{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 0.6s ease-out 0.05s forwards; }
.mk-area{ opacity: 0; animation: mk-in 0.6s ease-out 0.15s forwards; }
.mk-fade{ opacity: 0; animation: mk-in 0.3s ease-out 0.5s forwards; }
.mk-pulse{ transform-box: fill-box; transform-origin: center; animation: mk-ping 1.8s ease-out 0.7s infinite; }
@keyframes mk-draw{ to{ stroke-dashoffset: 0; } }
@keyframes mk-in{ to{ opacity: 1; } }
@keyframes mk-grow{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes mk-ping{ 0%{ transform: scale(1); opacity: 0.7; } 80%, 100%{ transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .mk-draw{ animation: none; stroke-dashoffset: 0; }
  .mk-area, .mk-fade{ animation: none; opacity: 1; }
  .mk-bar{ animation: none; }
  .mk-pulse{ animation: none; opacity: 0; }
  #calc-embed .vg .mk-inline, #calc-embed .vg .mk-inline-in, #calc-embed .vg .mk-chev{ transition: none; }
}