.idel-chart{
  --idel-chart-primary:#6366f1;
  --idel-chart-radius:16px;
  --idel-chart-pad:clamp(14px,3vw,22px);
  height:var(--idel-chart-height,280px);
  display:flex;
  flex-direction:column;
  position:relative;
  border-radius:var(--idel-chart-radius);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 12px 40px -12px rgba(15,23,42,.12);
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(145deg,rgba(255,255,255,.96) 0%,rgba(248,250,252,.92) 100%);
  backdrop-filter:var(--idel-chart-card-backdrop,saturate(1.2) blur(10px));
  -webkit-backdrop-filter:var(--idel-chart-card-backdrop,saturate(1.2) blur(10px));
  overflow:hidden;
  isolation:isolate;
}
.idel-chart__inner{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:var(--idel-chart-pad);
  padding-bottom:calc(var(--idel-chart-pad) + 2px);
}
.idel-chart__bars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
  align-items:end;
  gap:clamp(8px,2vw,14px);
  flex:1;
  min-height:0;
  padding:10px 6px 0 12px;
  margin-left:2px;
  border-left:1px solid var(--idel-chart-axis,rgba(15,23,42,.12));
  border-bottom:1px solid var(--idel-chart-axis,rgba(15,23,42,.12));
  border-radius:0 0 0 4px;
  background-image:repeating-linear-gradient(
    to top,
    rgba(15,23,42,.06) 0,
    rgba(15,23,42,.06) 1px,
    transparent 1px,
    transparent 25%
  );
  background-size:100% 100%;
  background-position:bottom;
}
.idel-chart__bar-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  height:100%;
  gap:10px;
}
.idel-chart__bar{
  display:block;
  width:100%;
  max-width:36px;
  border-radius:10px 10px 5px 5px;
  background:linear-gradient(180deg,#a5b4fc,var(--idel-chart-primary,#6366f1));
  box-shadow:
    0 4px 14px rgba(15,23,42,.1),
    inset 0 1px 0 rgba(255,255,255,.35);
  transform-origin:bottom center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,filter .35s ease;
}
.idel-chart__bar:hover{
  transform:scaleY(1.02) scaleX(1.04);
  filter:brightness(1.05);
  box-shadow:
    0 8px 22px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.45);
}
@supports (color:color-mix(in srgb,red,blue)){
  .idel-chart__bar{
    background:linear-gradient(
      180deg,
      color-mix(in srgb,var(--idel-chart-primary,#6366f1) 68%,#fff) 0%,
      var(--idel-chart-primary,#6366f1) 100%
    );
  }
}
.idel-chart__svg{
  display:block;
  width:100%;
  flex:1;
  min-height:0;
  border-left:1px solid var(--idel-chart-axis,rgba(15,23,42,.12));
  border-bottom:1px solid var(--idel-chart-axis,rgba(15,23,42,.12));
  padding:8px 8px 0;
  box-sizing:border-box;
  border-radius:0 0 0 4px;
  overflow:visible;
}
.idel-chart__grid line{
  stroke:var(--idel-chart-axis,rgba(15,23,42,.1));
  opacity:.45;
}
.idel-chart__line{
  stroke:var(--idel-chart-primary,#6366f1);
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(15,23,42,.12));
}
.idel-chart__point{
  fill:#fff;
  stroke:var(--idel-chart-primary,#6366f1);
  stroke-width:0.55;
  vector-effect:non-scaling-stroke;
}
.idel-chart__svg:hover .idel-chart__point{
  r:1.55;
}
.idel-chart__labels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(42px,1fr));
  gap:8px;
  padding:0 2px;
}
.idel-chart__label{
  display:block;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.01em;
  text-align:center;
  color:#64748b;
  font-variant-numeric:tabular-nums;
  line-height:1.25;
}
.idel-chart__pie-wrap{
  display:grid;
  grid-template-columns:minmax(150px,240px) 1fr;
  align-items:center;
  gap:clamp(16px,4vw,28px);
  height:100%;
  min-height:0;
}
.idel-chart__pie{
  width:100%;
  aspect-ratio:1/1;
  max-width:260px;
  margin:0 auto;
  border-radius:50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 12px 40px -8px rgba(15,23,42,.2),
    0 0 0 1px rgba(15,23,42,.06);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;
}
.idel-chart--pie:not(.idel-chart--pie-solid) .idel-chart__pie{
  -webkit-mask:radial-gradient(closest-side circle,transparent 46%,#000 47%);
  mask:radial-gradient(closest-side circle,transparent 46%,#000 47%);
}
.idel-chart__pie:hover{
  transform:scale(1.02);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 16px 48px -10px rgba(15,23,42,.22),
    0 0 0 1px rgba(15,23,42,.08);
}
.idel-chart__legend{
  display:grid;
  gap:10px;
  align-content:center;
}
.idel-chart__legend-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(15,23,42,.06);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.idel-chart__legend-item:hover{
  background:rgba(255,255,255,.9);
  border-color:rgba(15,23,42,.1);
  transform:translateX(2px);
}
.idel-chart__legend-dot{
  display:inline-block;
  width:11px;
  height:11px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 6px rgba(15,23,42,.15);
}
.idel-chart__legend-text{
  font-size:.84rem;
  line-height:1.4;
  font-weight:500;
  color:#334155;
  font-variant-numeric:tabular-nums;
}
.idel-chart--no-hover-motion .idel-chart__bar,
.idel-chart--no-hover-motion .idel-chart__pie,
.idel-chart--no-hover-motion .idel-chart__legend-item{
  transition:none;
}
.idel-chart--no-hover-motion .idel-chart__bar:hover{
  transform:none;
  filter:none;
  box-shadow:
    0 4px 14px rgba(15,23,42,.1),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.idel-chart--no-hover-motion .idel-chart__pie:hover{
  transform:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 12px 40px -8px rgba(15,23,42,.2),
    0 0 0 1px rgba(15,23,42,.06);
}
.idel-chart--no-hover-motion .idel-chart__legend-item:hover{
  transform:none;
  background:rgba(255,255,255,.55);
  border-color:rgba(15,23,42,.06);
}
.idel-chart--no-hover-motion .idel-chart__svg:hover .idel-chart__point{
  r:1.35;
}
@media (max-width:768px){
  .idel-chart__pie-wrap{
    grid-template-columns:1fr;
  }
  .idel-chart__pie{
    max-width:220px;
  }
}
@media (prefers-reduced-motion:reduce){
  .idel-chart__bar,
  .idel-chart__pie,
  .idel-chart__legend-item{
    transition:none;
  }
  .idel-chart__bar:hover,
  .idel-chart__pie:hover{
    transform:none;
  }
  .idel-chart__legend-item:hover{
    transform:none;
  }
  .idel-chart__svg:hover .idel-chart__point{
    r:1.35;
  }
}