:root{
    --chart-max-width: 720px;
    --row-gap: 10px;
    --label-width: 100px;     /* y-axis (names) */
    --bar-height: 28px;
    --bar-radius: 10px;
    --axis-color: rgba(255,255,255,.18);
    --text-dim: rgba(255,255,255,.75);
  }

  /* Container */
  .fgp-chart {
    max-width: var(--chart-max-width);
    padding: 18px 33px 14px;
    /*border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(6px);*/
  }

  .fgp-chart__title{
    margin: 0 0 10px 0;
    letter-spacing: .2px;
    padding-left:33px;
    padding-top:5px;
  }

  /* X-axis grid + plot area */
  .fgp-chart__plot {
    position: relative;
    padding: 10px 0 4px 0;
  }

  /* Vertical grid lines (x-axis reference) */
  .fgp-chart__plot::before{
    content:"";
    position:absolute;
    inset: 0 0 22px calc(var(--label-width) + 12px);
    /*background:
      repeating-linear-gradient(
        to right,
        var(--axis-color) 0 1px,
        transparent 1px 20%
      );*/
    border-radius: 12px;
    pointer-events: none;
  }

  .fgp-chart__rows{
    display: grid;
    gap: var(--row-gap);
  }

  /* One row = y-label + bar */
  .fgp-chart__row{
    display: grid;
    grid-template-columns: var(--label-width) 1fr;
    align-items: center;
    gap: 12px;
  }

  .fgp-chart__label{
    font-weight: 600;
    font-size: 13px/1.2; 
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fgp-chart__bar-wrap{
    position: relative;
    height: var(--bar-height);
    border-radius: 0 var(--bar-radius) var(--bar-radius) 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
  }

.fgp-chart__bar{
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 0 var(--bar-radius) var(--bar-radius) 0;
  transform-origin: left;
  transform: scaleX(0);
  animation: fgpGrow 2.2s cubic-bezier(.2,.85,.25,1) forwards;
  background: linear-gradient(90deg, rgba(161,16,21,.5), rgba(161,16,21,1));
}

@keyframes fgpGrow {
  to { transform: scaleX(1); }
}

  /* Value text (right side of bar area) */
  .fgp-chart__value{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 12px/1;
    color: #ddd;
    mix-blend-mode: screen; /* helps on bright bars */
    letter-spacing: .2px;
  }

  /* Stagger animation by rank */
  .fgp-chart__row:nth-child(1) .fgp-chart__bar{ animation-delay: 700ms; }
  .fgp-chart__row:nth-child(2) .fgp-chart__bar{ animation-delay: 780ms; }
  .fgp-chart__row:nth-child(3) .fgp-chart__bar{ animation-delay: 860ms; }
  .fgp-chart__row:nth-child(4) .fgp-chart__bar{ animation-delay: 940ms; }
  .fgp-chart__row:nth-child(5) .fgp-chart__bar{ animation-delay: 1120ms; }

  /* X-axis labels (0–100%) */
  .fgp-chart__xaxis{
    display: grid;
    grid-template-columns: var(--label-width) 1fr;
    gap: 12px;
    margin-top: 8px;
    align-items: center;
  }
  .fgp-chart__xaxis-spacer{ height: 1px; }
  .fgp-chart__ticks{
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 11px/1;
    color: var(--text-dim);
    padding: 0 2px;
  }

  @keyframes fgpGrow {
    to { transform: scaleX(1); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .fgp-chart__bar{ animation: none; transform: none; }
  }