/* === extracted from <style id=fb-legend-style> === */
/* --- Badge legend (tooltip + onboarding) --- */
.fb-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:2px;
}
.fb-legend-btn{
  width:16px;height:16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.fb-legend-btn:focus{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
 .fb-legend-pop{
  position:absolute;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;

  max-height: 150px;
  overflow:auto;

  top: -10px;
  transform: translateY(-100%);
  background: rgba(18,18,18,.96);
  border: none;
  border-radius: 12px;
  padding: 9px 10px 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,.48);
  z-index: 60;
}
.fb-legend-pop[data-place="below"]{
  top: calc(100% + 10px);
  transform: none;
}
.fb-legend-pop[data-place="above"]{
  top: -10px;
  transform: translateY(-100%);
}

.fb-legend-pop[aria-hidden="true"]{ display:none; }
.fb-legend-close{
  position:absolute;
  top:6px; right:8px;
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.86);
  cursor:pointer;
}
.fb-legend-h{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:6px;
  color: rgba(255,255,255,.92);
}
.fb-legend-item{
  font-size:12px;
  line-height:1.25;
  color: rgba(255,255,255,.82);
  margin: 6px 0;
}
@media (max-width:520px){
  .fb-title-row{ gap:8px; }
  .fb-legend-btn{ width:20px; height:20px; }
   .fb-legend-pop{
  max-height: 180px;
  overflow:auto;

    left: 0;
    right: 0;
    width: 100%;
  }
}

/* === extracted from <style> === */
    :root{
      --bg:#0b0f14;
      --text:#e8eef6;
      --muted:#a9b6c7;
      --line:rgba(255,255,255,.08);
      --gold:#d7b35a;
      --good:#49d17d;
      --bad:#ff5c7a;
      --shadow: 0 12px 40px rgba(0,0,0,.45);
      --radius:18px;
      --radius2:14px;
      --focus: 0 0 0 3px rgba(215,179,90,.22);
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: transparent;
      color:var(--text);
      font-family:var(--font);
      overflow-x: clip;
      position: relative;
    }
    /* Allow parent site particles to show through (approx. 40% visible). */
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      background: rgba(11, 15, 20, 0.60);
      pointer-events: none;
      z-index: -1;
    }
    html{ background: transparent; }

    .wrap{
      max-width: 1160px;
      margin: 0 auto;
      padding: 28px 18px 48px;
    
  padding-bottom: 40px;
}

    header{
      display:flex;
      gap:16px;
      align-items:flex-end;
      justify-content:space-between;
      margin-bottom: 18px;
    }
    .title h1{margin:0;font-size:20px;letter-spacing:.2px}
    .title p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.4;max-width:62ch}

    .controls{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
    .seg{
      display:flex;
      background: rgba(255,255,255,.04);
      border:1px solid var(--line);
      border-radius:999px;
      padding:4px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    }
    .seg button{
      appearance:none;border:0;background:transparent;color:var(--muted);
      padding:8px 10px;border-radius:999px;cursor:pointer;font-size:12px;
      transition: background .15s ease, color .15s ease;
      white-space:nowrap;
    }
    .seg button[aria-pressed="true"]{background: rgba(215,179,90,.14);color:var(--text)}
    .seg button:focus-visible{outline:none; box-shadow: var(--focus);}

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      align-items:start;
    }
    .grid > *{min-width:0}
    @media (max-width:980px){
      .grid{grid-template-columns:1fr}
      header{align-items:flex-start;flex-direction:column}
      .controls{justify-content:flex-start}
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      min-width:0;
    }
    .card .inner{padding:14px}
    .card h2{margin:0 0 8px;font-size:14px;letter-spacing:.2px}

    .kpis{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
      margin-bottom:14px;
    }
    @media (max-width:980px){ .kpis{grid-template-columns: repeat(2, 1fr);} }

    @media (max-width:520px){
      .kpi{ padding:9px 10px; }
      .kpi .value{ font-size:15px; }
    }
    @media (max-width:360px){
      .kpi .value{ font-size:16px; }
    }
    /* --- KPI entrance (institutional) --- */
    .kpis.kpi-anim .kpi{
      opacity:0;
      transform: translateX(0);
      transition: opacity 1550ms ease, transform 1550ms cubic-bezier(.22, 1, .36, 1);
      transition-delay: var(--kpi-delay, 0ms);
      will-change: opacity, transform;
    }
    .kpis.kpi-anim .kpi.kpi-from-left{ transform: translateX(-12px); }
    .kpis.kpi-anim .kpi.kpi-from-right{ transform: translateX(12px); }
    .kpis.kpi-anim .kpi.kpi-in{ opacity:1; transform: translateX(0); }
    @media (prefers-reduced-motion: reduce){
      .kpis.kpi-anim .kpi{ opacity:1; transform:none; transition:none; }
    }


    }


    @media (max-width:520px){ .kpis{grid-template-columns: repeat(2, 1fr);} }
    @media (max-width:360px){ .kpis{grid-template-columns: 1fr;} }

    .kpi{
      background: rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      padding:10px 12px;
      min-width:0;
    }
    .kpi .label{font-size:11px;color:var(--muted);margin-bottom:6px}
    .kpi .value{font-size:16px;font-weight:700;letter-spacing:.2px}
    .kpi .sub{margin-top:4px;font-size:11px;color:var(--muted);line-height:1.3}

    .pill{
      display:inline-flex;align-items:center;gap:6px;
      border:1px solid var(--line);
      background: rgba(0,0,0,.2);
      padding:4px 8px;border-radius:999px;
      font-size:11px;color:var(--muted);
      user-select:none;white-space:nowrap;
    }
    .pill.gold{border-color: rgba(215,179,90,.35); color: rgba(215,179,90,.92); background: rgba(215,179,90,.06);}
    .pill.good{border-color: rgba(73,209,125,.32); color: rgba(73,209,125,.92); background: rgba(73,209,125,.07);}
    .pill.bad{border-color: rgba(255,92,122,.32); color: rgba(255,92,122,.92); background: rgba(255,92,122,.07);}

    .chart-wrap{
      height:380px;
      padding:6px 8px 12px;
      position:relative;
      min-width:0;
      touch-action: pan-y;
    }

    @media (min-width: 900px){
      .chart-wrap{ height: 480px; }
    }
    @media (min-width: 1200px){
      .chart-wrap{ height: 520px; }
    }
    @media (max-width:980px){ .chart-wrap{height:300px;} }
    @media (max-width:520px){ .chart-wrap{height:260px;} }
    canvas{display:block;width:100% !important;height:100% !important;max-width:100%;}

    .scrub-hint{
      position:absolute;right:10px;top:10px;
      display:flex;gap:8px;align-items:center;
      padding:6px 8px;border-radius:999px;
      border: none;
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(6px);
      color: rgba(255,255,255,.78);
      font-size:11px;
      user-select:none;
      pointer-events:none;
    }
    
    .chart-watermark{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      font-weight:800;
      letter-spacing:.3px;
      font-size:12px;
      color: rgba(255,255,255,.16);
      text-transform: uppercase;
      user-select:none;
      pointer-events:none;
      white-space:nowrap;
      padding:6px 10px;
      border-radius:999px;
      border: none;
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(4px);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    .chart-watermark{
      opacity: 0;
      transition: opacity 220ms ease;
    }
    .chart-watermark.is-visible{ opacity: 1; }

    @media (prefers-reduced-motion: reduce){
      .chart-watermark{ transition:none; }
      
    /* Active card polish */
    .tcard{ transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
    .tcard[aria-selected="true"]{
      border-color: rgba(228,184,86,.55);
      box-shadow: 0 18px 40px rgba(0,0,0,.40), 0 0 0 1px rgba(228,184,86,.22) inset;
    }
    .tcard[aria-selected="true"]{ transform: translateY(-1px); }

    .tcard .chev{
      position:absolute;
      right:10px;
      top:10px;
      width:24px;
      height:24px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
      color: rgba(255,255,255,.55);
      background: rgba(0,0,0,.22);
      border: none;
      pointer-events:none;
    }
    .tcard.is-expanded .chev{ color: rgba(228,184,86,.85); border-color: rgba(228,184,86,.22); }

    .tcard-exp{ overflow:hidden; }
    .tcard.is-expanded .tcard-exp{ animation: expFade 220ms ease; }
    @keyframes expFade{
      from{ opacity:0; transform: translateY(-4px); }
      to{ opacity:1; transform: translateY(0); }
    }

.tcard-exp{ transition:none; }
      .tcard{ transition:none; }
    }
    @media (max-width: 520px){
      .chart-watermark{font-size:11px;}
    }
.scrub-bar{
      position:absolute;left:10px;right:10px;bottom:10px;
      height:3px;background: rgba(255,255,255,.10);
      border-radius:99px;overflow:hidden;
      pointer-events:none;
    }
    .scrub-bar > i{
      display:block;height:100%;
      width: var(--scrub, 0%);
      background: linear-gradient(90deg, rgba(215,179,90,.15), rgba(215,179,90,.80));
      box-shadow: 0 0 18px rgba(215,179,90,.18);
      border-radius:99px;
    }

    .note{
      margin-top:10px;
      font-size:12px;color:var(--muted);
      line-height:1.45;
      display:flex;gap:10px;align-items:flex-start;
    }
    .note .dot{
      margin-top:6px;width:8px;height:8px;border-radius:99px;
      background: rgba(215,179,90,.8);
      box-shadow: 0 0 0 4px rgba(215,179,90,.12);
      flex:none;
    }

    .timeline-head{
      display:flex;align-items:center;justify-content:space-between;
      gap:10px;margin-bottom:8px;
    }
    .timeline-head .hint{
      display:flex;gap:8px;align-items:center;color:var(--muted);
      font-size:12px;user-select:none;flex-wrap:wrap;
    }

    .tcontrols{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .navbtn{
      width:40px;
      padding:9px 0;
      text-align:center;
      font-weight:900;
      line-height:1;
    }
    .timeline-track{
      position:relative;
      padding:12px 10px 14px;
      background: rgba(255,255,255,.02);
      border-top:1px solid rgba(255,255,255,.06);
      overflow:hidden;
      min-width:0;
    }
    .rail{
      position:absolute;left:10px;right:10px;top:44px;
      height:2px;background: rgba(255,255,255,.08);
      border-radius:99px;
    }
    .rail::after{
      content:"";
      position:absolute;left:0;top:0;height:100%;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, rgba(215,179,90,.15), rgba(215,179,90,.65));
      border-radius:99px;
      box-shadow: 0 0 18px rgba(215,179,90,.18);
    }

    .cards{
      display:flex;gap:10px;
      overflow:auto;
      padding-bottom:6px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
      user-select:none;
      scrollbar-width:none;
    }
    .cards::-webkit-scrollbar{display:none;}
    .cards:active{cursor: grabbing}

    .tcard{
      flex:0 0 auto;
      scroll-snap-align: start;
      background: rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:16px;
      padding:10px;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      transition: transform .12s ease, border-color .12s ease, background .12s ease;
      min-width:220px;max-width:220px;
    
      align-self:flex-start;
    }
    @media (max-width:520px){
      .tcard{min-width:78vw;max-width:78vw;}
    }
    .tcard:hover{transform: translateY(-1px)}
    .tcard[aria-selected="true"]{border-color: rgba(215,179,90,.45); background: rgba(215,179,90,.06);}
    .tcard:focus-visible{outline:none; box-shadow: var(--focus);}

    .tcard .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
    .tcard .m{font-weight:700;font-size:13px;margin:0;line-height:1.2}
    .tcard .d{margin:3px 0 0;font-size:11px;color:var(--muted)}
    .tcard .amt{font-size:14px;font-weight:800;letter-spacing:.2px;margin-top:10px}
    .tcard .delta{margin-top:6px;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}

    /* Unified monthly card: expanded section inside the selected timeline card */
    .tcard-exp{
      margin-top:10px;
      padding-top:10px;
      border-top:1px solid rgba(255,255,255,.08);
      color: var(--muted);
      font-size:12px;
      line-height:1.45;
      display:none;
    }
    .tcard.is-expanded .tcard-exp{display:block;}
    .tcard-exp .exp-summary{color: rgba(255,255,255,.82); margin-bottom:8px;}
    .tcard-exp .exp-bullets{margin:8px 0 0;padding-left:16px;}
    .tcard-exp .exp-bullets li{margin:6px 0;}
    .tcard-exp .exp-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
    .tcard-exp .btn{padding:8px 10px;border-radius:12px;}

    .tcard-hint{
      margin-top:10px;
      font-size:11px;
      color: rgba(255,255,255,.45);
      display:flex;
      align-items:center;
      gap:6px;
    }
    .tcard-hint .dot{
      width:6px;height:6px;border-radius:99px;
      background: rgba(215,179,90,.65);
      box-shadow:0 0 0 3px rgba(215,179,90,.14);
      flex:none;
    }
    @media (hover: none) and (pointer: coarse){
      .tcard-hint .txt-desktop{display:none;}
    }
    @media (hover: hover) and (pointer: fine){
      .tcard-hint .txt-mobile{display:none;}
    }


.tcard{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.tcard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(215,179,90,.0),
    rgba(215,179,90,.28),
    rgba(255,255,255,.06),
    rgba(215,179,90,.0)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}

.tcard::after{
  content:"";
  position:absolute;
  left:-30%;
  top:-60%;
  width:120%;
  height:120%;
  background: radial-gradient(circle at 30% 30%, rgba(215,179,90,.12), transparent 55%);
  opacity:.55;
  pointer-events:none;
  transition: opacity .2s ease;
}

.tcard:hover{
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.tcard:hover::after{
  opacity:.85;
}

.tcard[aria-selected="true"]{
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.tcard[aria-selected="true"]::before{
  opacity: .95;
  background: linear-gradient(135deg,
    rgba(215,179,90,.05),
    rgba(215,179,90,.55),
    rgba(255,255,255,.10),
    rgba(215,179,90,.05)
  );
}

    .btn{
      appearance:none;border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: var(--text);
      padding:9px 10px;border-radius:12px;
      cursor:pointer;font-weight:600;font-size:12px;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .btn:hover{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); transform: translateY(-1px)}
    .btn:active{transform: translateY(0)}
    .btn:focus-visible{outline:none; box-shadow: var(--focus);}
    .btn.gold{border-color: rgba(215,179,90,.35); background: rgba(215,179,90,.08);}

    .backdrop{
      position:fixed;inset:0;background: rgba(0,0,0,.78);  backdrop-filter: blur(6px);
      display:none;align-items:center;justify-content:center;
      padding:18px;z-index:50;
    }
    .backdrop[aria-hidden="false"]{display:flex;}
    .modal{
      width:min(980px, 100%);
      background: linear-gradient(180deg, rgba(18,24,33,.92), rgba(14,18,26,.88));
      border: none;
      border-radius:22px;
      box-shadow: 0 24px 80px rgba(0,0,0,.6);
      overflow:hidden;
      min-width:0;
    }
    .modal header{
      margin:0;padding:14px 14px 0;
      display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
    }
    .modal .mh{display:flex;flex-direction:column;gap:5px;
      padding:6px 0;min-width:0}
    .modal .mh h3{margin:0;font-size:14px;letter-spacing:.2px}
    .modal .mh .sub{margin:0;font-size:12px;color:var(--muted)}
    .modal .close{
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: var(--text);
      width:38px;height:38px;border-radius:12px;
      cursor:pointer;display:grid;place-items:center;
      font-size:16px;flex:none;
    }
    .modal .close:focus-visible{outline:none; box-shadow: var(--focus);}

    .modal .content{
      padding:12px 14px 16px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:12px;
      min-width:0;
    }
    @media (max-width:980px){ .modal .content{grid-template-columns:1fr;} }
    .video{
        border: none;
    background: #000;
      aspect-ratio: 16/9;
      min-width:0;
    }
    .video iframe{width:100%;height:100%;border:0;display:block}
    .side{
  background: rgba(12,16,22,.92); /* era rgba(255,255,255,.03) */
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
      border-radius:16px;
      padding:12px;
      min-width:0;
    }
    .side .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:8px;
    }
    @media (max-width:520px){ .side .grid2{grid-template-columns:1fr;} }
    .side .k{font-size:11px;color:var(--muted);margin-bottom:4px}
    .side .v{font-size:13px;font-weight:800}
    .side .v.good{color:var(--good)}
    .side .v.bad{color:var(--bad)}
    .side ul{margin:10px 0 0;padding-left:16px;color:var(--muted);font-size:12px;line-height:1.45}
    .side li{margin:6px 0}

    /* Mobile UX: esconder botões de navegação (arraste já é natural) */
    @media (hover: none) and (pointer: coarse){
      .tcontrols{ display:none !important; }
    }    /* Mobile UX: KPIs mais bonitos e compactos (2 colunas, depois 1) */
    @media (max-width:720px){
      .wrap{ padding: 22px 14px 40px; }
      .kpis{
        grid-template-columns: 1fr 1fr;
        gap:10px;
        margin-bottom:12px;
      }
      .kpi{
        padding:10px 10px;
        border-radius:16px;
        background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
      }
      .kpi .label{
        font-size:10px;
        margin-bottom:4px;
        letter-spacing:.2px;
      }
      .kpi .value{
        font-size:14px;
        font-weight:800;
        line-height:1.1;
      }
      .kpi .sub{
        margin-top:6px;
        font-size:10px;
        line-height:1.25;
        opacity:.9;
      }
    }
    @media (max-width:420px){
      .kpis{ grid-template-columns: 1fr; }
    }

  
/* --- KPI GRID MOBILE FIX --- */
.kpis{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:360px){
  .kpis{ grid-template-columns: 1fr; }
}
/* --- END KPI GRID MOBILE FIX --- */


    /* --- IMMERSIVE VISUALS (2,3,4) --- */

    /* (4) Card states: active stands out, others calm */
    .tcard{
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
      will-change: transform, filter;
    }
    .tcard:not([aria-selected="true"]){
      filter: saturate(.78) brightness(.94);
      opacity: .92;
    }
    .tcard[aria-selected="true"]{
      transform: translateY(-2px);
      border-color: rgba(228,184,86,.62);
      box-shadow:
        0 22px 50px rgba(0,0,0,.46),
        0 0 0 1px rgba(228,184,86,.18) inset,
        0 0 0 2px rgba(228,184,86,.08);
      opacity: 1;
      filter: none;
    }
    .tcard[aria-selected="true"] .chev{
      color: rgba(228,184,86,.92);
      border-color: rgba(228,184,86,.28);
      background: rgba(0,0,0,.26);
    }

    /* (3) Mood overlay behind chart */
    .chart-wrap{ position: relative; }
    .chart-mood{
      position:absolute;
      inset: 0;
      pointer-events:none;
      border-radius: 18px;
      opacity: .55;
      transition: opacity 220ms ease, filter 220ms ease;
      mix-blend-mode: screen;
    }
    .chart-mood::before{
      content:"";
      position:absolute;
      inset:-40px;
      background: radial-gradient(1200px 520px at 30% 30%, rgba(228,184,86,.10), transparent 55%),
                  radial-gradient(900px 520px at 70% 65%, rgba(255,255,255,.04), transparent 60%);
    }
    .chart-mood.mood-pos::before{
      background: radial-gradient(1100px 520px at 30% 30%, rgba(228,184,86,.14), transparent 56%),
                  radial-gradient(900px 520px at 70% 65%, rgba(255,255,255,.05), transparent 62%);
    }
    .chart-mood.mood-neg::before{
      background: radial-gradient(1100px 520px at 30% 30%, rgba(120,170,255,.12), transparent 56%),
                  radial-gradient(900px 520px at 70% 65%, rgba(255,255,255,.03), transparent 62%);
    }
    .chart-mood.mood-neutral::before{
      background: radial-gradient(1100px 520px at 30% 30%, rgba(200,200,200,.07), transparent 56%),
                  radial-gradient(900px 520px at 70% 65%, rgba(255,255,255,.03), transparent 62%);
    }
    .chart-mood.mood-record::before{
      background: radial-gradient(1200px 560px at 45% 35%, rgba(228,184,86,.18), transparent 58%),
                  radial-gradient(900px 520px at 70% 65%, rgba(255,255,255,.06), transparent 64%);
    }

    /* (2) Focus aura */
    .chart-wrap.is-focused .chart-mood{ opacity: .78; }
    .chart-wrap.is-focused{ box-shadow: 0 22px 70px rgba(0,0,0,.45); }

    @media (prefers-reduced-motion: reduce){
      .chart-mood, .tcard{ transition:none; }
    }

    /* --- END IMMERSIVE VISUALS --- */


    /* --- FINAL VISUAL PACK (safe) --- */
    .chart-wrap{ opacity:1; transform:none; }
    .chart-wrap.is-fade-prep{ opacity:0; transform: translateY(6px); transition: opacity 520ms ease, transform 520ms ease; }
    .chart-wrap.is-ready{ opacity:1; transform: translateY(0); }

    .mini-timeline{
      margin-top: 10px;
      padding: 10px 10px 6px;
      border-radius: 16px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      gap:10px;
      overflow:hidden;
    }
    .mini-timeline .track{
      position:relative;
      flex:1;
      height: 12px;
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .mini-timeline .track::before{
      content:"";
      position:absolute; left:0; right:0; top:50%;
      height:2px; transform: translateY(-50%);
      background: rgba(255,255,255,.06);
    }
    .mini-timeline .dot{
      width:10px; height:10px; border-radius:999px;
      background: rgba(255,255,255,.14);
      border: none;
      cursor:pointer; flex:none;
      transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    .mini-timeline .dot.visited{
      background: rgba(228,184,86,.35);
      border-color: rgba(228,184,86,.22);
      box-shadow: 0 0 0 3px rgba(228,184,86,.10);
    }
    .mini-timeline .dot.active{
      background: rgba(228,184,86,.88);
      border-color: rgba(228,184,86,.40);
      transform: scale(1.15);
      box-shadow: 0 0 0 4px rgba(228,184,86,.16), 0 12px 30px rgba(228,184,86,.12);
    }
    .mini-timeline .label{
      font-size: 12px;
      color: rgba(255,255,255,.55);
      white-space: nowrap;
      min-width: 84px;
      text-align:right;
    }
    @media (max-width:520px){
      .mini-timeline .label{ min-width: 64px; font-size: 11px; }
      .mini-timeline{ padding: 9px 9px 6px; }
      .mini-timeline .track{ gap: 7px; }
    }
    @media (prefers-reduced-motion: reduce){
      .chart-wrap.is-fade-prep{ opacity:1; transform:none; transition:none; }
      .mini-timeline .dot{ transition:none; }
    }
    /* --- END FINAL VISUAL PACK --- */


  .lead{margin:0; font-weight:700; color:#e7eef6; letter-spacing:.2px;}
  .lead{font-size:18px; line-height:1.25; opacity:.92}
  @media (max-width: 720px){.lead{font-size:16px}}

  .btn.yt{padding:10px 12px; min-width:44px; display:inline-flex; align-items:center; justify-content:center}
  .btn.yt svg{width:18px; height:18px; fill:currentColor; opacity:.95}

    /* --- Z-ORDER PATCH (tooltip above hints/watermark) --- */
    .chart-overlay-hint{ z-index: 3 !important; }
    .chart-watermark{ z-index: 2 !important; }
    .pinned-tooltip{ z-index: 6 !important; }
    /* If tooltip is inside chartWrap, ensure it can float */
    #chartWrap{ position: relative; }


    /* Move the hint pill to bottom-right to avoid covering tooltip */
    .chart-overlay-hint{
      top: auto !important;
      bottom: 12px !important;
      right: 14px !important;
    }


    .chart-watermark{
      pointer-events: none !important;
    }


    .chart-wrap{ overflow: visible !important; }


    /* --- CANVAS ABOVE OVERLAYS PATCH --- */
    .chart-wrap{ position: relative; }
    .chart-wrap canvas{ position: relative; z-index: 4 !important; }
    .chart-watermark{ z-index: 1 !important; }
    .chart-overlay-hint{ z-index: 2 !important; }
    .pinned-tooltip{ z-index: 6 !important; }


    /* Fallback selectors */
    #chartWatermark, #watermark, .watermark{ z-index: 1 !important; }
    #chartHint, #overlayHint, .overlay-hint{ z-index: 2 !important; }


    /* --- FLOATING BADGE (compact) --- */
.floating-badge{
  position:absolute;
  left:0; top:0;
  transform: translate(-9999px,-9999px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 16px;
  border: none;
  background: rgba(12,16,22,.38);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  z-index: 7; /* above canvas + hints */
  opacity:0;
  transition: opacity 140ms ease, transform 140ms ease;
}
.floating-badge.is-on{ opacity:1; }

/* side badges */
.fb-side{
  flex:none;
  height:46px;
  min-width:46px;
  border-radius: 14px;
  border:1px solid rgba(215,179,90,.26);
  background: rgba(215,179,90,.10);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  cursor:pointer;
  user-select:none;
}
.fb-side:hover{ background: rgba(215,179,90,.14); border-color: rgba(215,179,90,.42); }
.fb-side:active{ transform: translateY(1px); }
.fb-side:focus-visible{ outline:none; box-shadow: var(--focus); }
.fb-side.fb-yt{ width:46px; padding:0; }
.fb-side-txt{ font-size:10px; font-weight:900; letter-spacing:.25px; opacity:.95; text-transform: lowercase; }
.fb-yt-ico svg{ width:18px; height:18px; fill: currentColor; opacity:.95; }

/* main badge */
.fb-core{
  position: relative;
  min-width: 220px;
  max-width: 320px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:2px 2px;
}
.fb-row{ display:flex; align-items:baseline; gap:10px; }
.fb-row1{ justify-content:space-between; }
.fb-month{
  font-weight:900;
  letter-spacing:.2px;
  font-size:12px;
  color: rgba(255,255,255,.92);
  text-transform: lowercase;
  white-space:nowrap;
}
.fb-total{
  font-weight:900;
  font-size:12px;
  color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.fb-row2{
  display:grid;
  grid-template-columns: 44px 1fr auto;
  align-items:center;
  gap:10px;
}
.fb-lbl{
  font-size:10.5px;
  color: rgba(255,255,255,.58);
  white-space:nowrap;
}
.fb-profit{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.94);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  text-align:right;
}
.fb-pctpill{
  padding:4px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  line-height:1;
}
.fb-pct{
  font-size:10.5px;
  font-weight:900;
  color: rgba(255,255,255,.74);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.fb-pct.good{ color: rgba(73,209,125,.95); }
.fb-pct.bad{ color: rgba(255,92,122,.92); }

@media (max-width:520px){
  /* Mobile badge: layout em GRID para não vazar / não deformar */
  .floating-badge{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "core core"
      "info yt";
    gap:8px 10px;
    padding:8px 10px;
    border-radius: 14px;
    max-width: calc(100% - 16px);
    width: min(360px, calc(100% - 16px));
    align-items: center;
    justify-items: stretch;
  }
  .fb-core{
    grid-area: core;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  .fb-side{
    height:38px;
    min-width:38px;
    border-radius: 12px;
    padding:0 10px;
  }
  .fb-side .fb-side-txt{ font-size:10px; }
  .fb-side.fb-info{ grid-area: info; justify-self: start; }
  .fb-side.fb-yt{ grid-area: yt; justify-self: end; width:44px; padding:0; }

  .fb-headline{ font-size: 13px; }
  .fb-chip{ font-size: 10px; padding:4px 7px; }
  .fb-row2{ grid-template-columns: 1fr 1fr; gap:6px; }
}
 /* --- END FLOATING BADGE --- */

/* --- FLOATING BADGE CONTENT (Option B: Headline + Chips) --- */
.fb-headline{
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  color: rgba(255,255,255,.94);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.fb-chips{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.fb-chip{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.15px;
  color: rgba(255,255,255,.78);
  line-height:1;
  white-space:nowrap;
}
.fb-chip.delta-pos{ color: rgba(73,209,125,.95); border-color: rgba(73,209,125,.20); background: rgba(73,209,125,.08); }
.fb-chip.delta-neg{ color: rgba(255,92,122,.92); border-color: rgba(255,92,122,.18); background: rgba(255,92,122,.07); }
@media (max-width:520px){
  .fb-headline{ font-size:13px; }
  .fb-chip{ font-size:10px; padding:4px 7px; }
}
/* --- END FLOATING BADGE CONTENT (Option B) --- */



.badge-line-2{display:flex;justify-content:center;align-items:center;gap:6px;text-align:center;width:100%;}

.badge-l2-label{
  font-weight:500;
  opacity:.8;
}
.badge-line-2 strong,
.badge-line-2 span.value{
  margin-left:4px;
}

.badge-line-1{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  font-weight:700;
}
.badge-chips{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:13px;
  opacity:.9;
}
.badge-chip{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  font-weight:500;
}
.badge-chip.delta-pos{ color:#22c55e; }
.badge-chip.delta-neg{ color:#ef4444; }

/* === extracted from <style id=mobile-report-card-style> === */
/* --- Mobile Report Card (below chart) --- */
.mobile-report-card{
  display:none;
  margin-top:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(14,14,18,.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius:14px;
  padding:12px 12px 10px;
}
.mobile-report-card .mrc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.mobile-report-card .mrc-title{
  font-size:12px;
  letter-spacing:.2px;
  opacity:.82;
  font-weight:700;
  text-transform:uppercase;
}
.mobile-report-card .mrc-info-btn{
  width:26px; height:26px;
  border-radius:999px;
  border: none;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.mobile-report-card .mrc-value{
  font-size:22px;
  font-weight:900;
  line-height:1.05;
  margin:2px 0 8px;
  color:#fff;
}
.mobile-report-card .mrc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-bottom:10px;
}
.mobile-report-card .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  font-size:12px;
  border: none;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
}
.mobile-report-card .chip.pos{
  border-color: rgba(47, 191, 113, .22);
  color: rgba(120, 235, 178, .92);
}
.mobile-report-card .chip.neg{
  border-color: rgba(224, 90, 90, .22);
  color: rgba(255, 170, 170, .92);
}
.mobile-report-card .mrc-actions{
  display:flex;
  gap:10px;
  width:100%;
}
.mobile-report-card .mrc-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.96);
  font-weight:800;
}
.mobile-report-card .mrc-btn:active{ transform: translateY(1px); }
.mobile-report-card .mrc-yt{ background:rgba(255,255,255,.07); }
.mobile-report-card .mrc-yt-ico{ font-size:12px; line-height:1; opacity:.9; }

/* Mobile card legend (popover) */
.mobile-report-card .mrc-legend-pop{
  display:none;
  position:relative;
  margin-top:10px;
  width:100%;
  border: none;
  background:rgba(8,8,10,.92);
  border-radius:12px;
  padding:10px 10px 10px;
  color:rgba(255,255,255,.92);
}
.mobile-report-card .mrc-legend-pop[aria-hidden="false"]{ display:block; }
.mobile-report-card .mrc-legend-h{
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:6px;
}
.mobile-report-card .mrc-legend-item{
  font-size:12px;
  line-height:1.35;
  opacity:.92;
  margin:6px 0;
}
.mobile-report-card .mrc-legend-close{
  position:absolute;
  top:6px; right:8px;
  width:26px; height:26px;
  border-radius:999px;
  border: none;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Mobile rules */
@media (max-width: 520px){
  /* hide floating badge on mobile */
  #floatingBadge{ display:none !important; }
  /* show report card */
  .mobile-report-card{ display:block; }
}

/* === extracted from <style> === */
/* --- KPI Soft Institutional Entrance Animation --- */
.kpi {
    opacity: 0;
    transform: translateX(30px);
    transition: transform 2s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 2s ease;
}

.kpi.kpi-left {
    transform: translateX(-30px);
}

.kpi.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Progressive subtle delay */
.kpi:nth-child(1) { transition-delay: 0.1s; }
.kpi:nth-child(2) { transition-delay: 0.3s; }
.kpi:nth-child(3) { transition-delay: 0.5s; }
.kpi:nth-child(4) { transition-delay: 0.7s; }

/* === extracted from <style> === */
#chartWrap {
  scroll-margin-top: 80px;
}

/* === extracted from <style> === */
/* --- Rotate Hint Toast (subtle, one-shot) --- */
.rotate-hint-toast{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateY(6px);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .1px;
  color: rgba(255,255,255,.88);
  background: rgba(18,18,18,.72);
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms ease, transform 320ms ease;
  z-index: 9999;
  max-width: min(92vw, 520px);
  text-align: center;
  pointer-events: none;
}
.rotate-hint-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .rotate-hint-toast{ transition: none; }
}