.st-accordion {
    border-block: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    color: var(--st-semantic-text-primary);
    display: grid;
    width: 100%;
  }

  .st-accordion__item + .st-accordion__item {
    border-top: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
  }

  .st-accordion__heading {
    margin: 0;
  }

  .st-accordion__trigger {
    align-items: center;
    background: transparent;
    border: 0;
    
    color: var(--st-component-accordion-text, inherit);
    cursor: pointer;
    display: flex;
    font: inherit;
    
    font-size: var(--st-component-accordion-fontSize, inherit);
    font-weight: var(--st-component-accordion-fontWeight, 600);
    line-height: var(--st-component-accordion-lineHeight, normal);
    gap: 0.75rem;
    justify-content: space-between;
    padding: var(--st-component-accordion-paddingBlock, 0.875rem)
      var(--st-component-accordion-paddingInline, 0.5rem);
    text-align: start;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-accordion--sm .st-accordion__trigger {
    font-size: 0.875rem;
    padding: 0.625rem 0.5rem;
  }

  .st-accordion--lg .st-accordion__trigger {
    font-size: 1rem;
    padding: 1.125rem 0.5rem;
  }

  .st-accordion--align-start .st-accordion__trigger {
    justify-content: flex-start;
  }

  .st-accordion__trigger:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-accordion__trigger:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-accordion__trigger:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
  }

  .st-accordion__title {
    flex: 1 1 auto;
  }

  .st-accordion--align-start .st-accordion__title {
    flex: 0 1 auto;
  }

  .st-accordion__icon {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.25rem;
    justify-content: center;
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 1.25rem;
  }

  .st-accordion__item--open .st-accordion__icon {
    transform: rotate(180deg);
  }

  .st-accordion__panel {
    color: var(--st-semantic-text-secondary);
    line-height: 1.5;
    padding: 0 0.5rem 0.875rem;
  }

  .st-accordion--sm .st-accordion__panel {
    padding-bottom: 0.625rem;
  }

  .st-accordion--lg .st-accordion__panel {
    padding-bottom: 1.125rem;
  }

.st-alert {
    background: var(--st-component-alert-background, var(--st-semantic-surface-raised));
    
    border-top: var(
      --st-component-alert-borderTop,
      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
    );
    border-right: var(
      --st-component-alert-borderRight,
      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
    );
    border-bottom: var(
      --st-component-alert-borderBottom,
      1px solid var(--st-component-alert-border, var(--st-semantic-border-subtle))
    );
    
    border-left-style: solid;
    border-left-width: var(--st-component-alert-accentWidth, 0.25rem);
    border-left-color: var(--alert-accent, var(--st-semantic-feedback-info));
    border-radius: 0;
    color: var(--st-component-alert-text, var(--st-semantic-text-primary));
    display: flex;
    font-size: var(--st-component-alert-fontSize, inherit);
    line-height: var(--st-component-alert-lineHeight, normal);
    letter-spacing: var(--st-component-alert-letterSpacing, normal);
    gap: var(--st-spacing-4, 1rem);
    justify-content: space-between;
    position: relative;
    padding: var(--st-component-alert-paddingTop, var(--st-spacing-4, 1rem))
      var(--st-component-alert-paddingRight, var(--st-spacing-4, 1rem))
      var(--st-component-alert-paddingBottom, var(--st-spacing-4, 1rem))
      var(--st-component-alert-paddingLeft, var(--st-spacing-4, 1rem));
  }

  
  .st-alert::before {
    background: var(--alert-accent, var(--st-semantic-feedback-info));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: var(--st-component-alert-filetWidth, 0);
  }

  .st-alert--info {
    --alert-accent: var(--st-component-alert-infoBorder, var(--st-semantic-feedback-info));
  }

  .st-alert--success {
    --alert-accent: var(--st-component-alert-successBorder, var(--st-semantic-feedback-success));
  }

  .st-alert--warning {
    --alert-accent: var(--st-component-alert-warningBorder, var(--st-semantic-feedback-warning));
  }

  .st-alert--error {
    --alert-accent: var(--st-component-alert-errorBorder, var(--st-semantic-feedback-error));
  }

  .st-alert__content {
    display: grid;
    gap: var(--st-spacing-1, 0.25rem);
  }

  .st-alert__title {
    font-size: 0.9375rem;
    margin: 0;
  }

  .st-alert__message {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
  }

  .st-alert__actions {
    align-items: start;
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

.st-areaChart {
    color: var(--st-semantic-data-category1);
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-areaChart--category1 { color: var(--st-semantic-data-category1); }
  .st-areaChart--category2 { color: var(--st-semantic-data-category2); }
  .st-areaChart--category3 { color: var(--st-semantic-data-category3); }
  .st-areaChart--category4 { color: var(--st-semantic-data-category4); }
  .st-areaChart--category5 { color: var(--st-semantic-data-category5); }
  .st-areaChart--category6 { color: var(--st-semantic-data-category6); }
  .st-areaChart--category7 { color: var(--st-semantic-data-category7); }
  .st-areaChart--category8 { color: var(--st-semantic-data-category8); }

  .st-areaChart svg {
    display: block;
    overflow: visible;
  }

  .st-areaChart__visual {
    display: block;
    position: relative;
  }

  .st-areaChart__grid {
    stroke: var(--st-component-areaChart-gridStroke, var(--st-semantic-border-subtle));
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0.7;
  }

  .st-areaChart__axis {
    stroke: var(--st-component-areaChart-axisStroke, var(--st-semantic-border-subtle));
    stroke-width: 1;
  }

  .st-areaChart__tickLabel {
    fill: var(--st-component-areaChart-labelColor, var(--st-semantic-text-secondary));
    font-size: 0.6875rem;
  }

  .st-areaChart__line {
    stroke: currentColor;
  }

  .st-areaChart__area {
    stroke: none;
  }

  .st-areaChart__dot {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
    cursor: pointer;
    transition: r 120ms ease;
  }

  .st-areaChart__dot:hover,
  .st-areaChart__dot:focus-visible {
    r: 5.5;
  }

  .st-areaChart__dot:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-areaChart__dot {
      transition: none;
    }
  }

  .st-areaChart__tooltip {
    background: var(--st-component-areaChart-tooltipBackground, var(--st-semantic-surface-inverse));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-areaChart-tooltipText, var(--st-semantic-text-inverse));
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-areaChart__tooltipLabel {
    font-weight: 600;
  }

  .st-areaChart__tooltipValue {
    opacity: 0.85;
  }

  /* --- Annotation layer ----------------------------------------------------
     Regions render BEHIND the area; lines/shapes/points/labels render ABOVE. */
  .st-areaChart__annotationRegion {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
    stroke: none;
  }
  .st-areaChart__annotationLine {
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
  }
  .st-areaChart__annotationShape {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
  }
  .st-areaChart__annotationPoint {
    fill: var(--st-semantic-feedback-info);
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
  }
  .st-areaChart__annotationLabel,
  .st-areaChart__annotationText {
    fill: var(--st-semantic-text-primary);
    font-size: 0.625rem;
    font-weight: 600;
  }

  /* Data labels — per-point value, drawn on top. Token-only colour. */
  .st-areaChart__dataLabel {
    fill: var(--st-semantic-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Crosshair layer (FR-3) ----------------------------------------------
     A tokenised dashed vertical line at the active (hovered/controlled) key,
     plus an emphasised marker on the point. Decorative (aria-hidden). */
  .st-areaChart__crosshairLine {
    stroke: var(--st-semantic-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
  }
  .st-areaChart__crosshairMarker {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 2;
  }

  /* --- Keyboard navigation layer (FR-5) ------------------------------------
     A focusable, transparent overlay of one hit-rect per point. Carries the
     roving tab stop; the focus ring is tokenised (border-interactive). */
  .st-areaChart__navLayer {
    inset: 0;
    position: absolute;
  }
  .st-areaChart__navDatum {
    fill: transparent;
    outline: none;
  }
  .st-areaChart__navDatum:focus-visible {
    fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

.st-aspectRatio {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .st-aspectRatio > * {
    block-size: 100%;
    inline-size: 100%;
  }

  .st-aspectRatio > img,
  .st-aspectRatio > video,
  .st-aspectRatio > iframe {
    display: block;
    object-fit: cover;
  }

.st-embed {
    display: block;
    width: 100%;
  }

  .st-embed .st-aspectRatio {
    background: var(--st-semantic-surface-subtle);
    border: 1px solid var(--st-semantic-border-subtle);
    border-radius: var(--st-radius-md, 0.375rem);
    overflow: hidden;
  }

  .st-embed__frame {
    block-size: 100%;
    border: 0;
    display: block;
    inline-size: 100%;
  }

.st-dataImage {
    display: block;
    max-inline-size: 100%;
  }

  .st-dataImage--cover {
    object-fit: cover;
  }

  .st-dataImage--contain {
    object-fit: contain;
  }

.st-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--st-component-badge-radius, var(--st-radius-pill, 999px));
    font-size: var(--st-component-badge-fontSize, 0.75rem);
    font-weight: var(--st-component-badge-fontWeight, 650);
    letter-spacing: var(--st-component-badge-letterSpacing, normal);
    line-height: var(--st-component-badge-lineHeight, 1);
    min-height: var(--st-component-badge-minHeight, 0);
    padding: var(--st-component-badge-paddingBlock, 0.25rem)
      var(--st-component-badge-paddingInline, 0.5rem);
    text-transform: var(--st-component-badge-textTransform, none);
  }

  /* Shape variants (additive). `pill` is the UNTOUCHED base `.st-badge` above — no
     `--pill` rule exists, so a `shape="pill"` (or unset) badge renders
     byte-identically. `--circle` overlays an equal-sided round bubble ON TOP of
     the base rules: equal min-width/min-height, equal inline/block padding,
     centered, tabular-nums for stable digit width. 3+ digit content degrades to a
     rounded-rect (the box grows past the diameter, never clips), so large counts
     stay legible. Every leaf falls back to a base literal so a theme that emits no
     `--st-component-badge-circle-*` renders the variant identically. */
  .st-badge--circle {
    border-radius: var(--st-component-badge-circle-radius, 50%);
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
    justify-content: center;
    min-width: var(--st-component-badge-circle-size, 1.25rem);
    min-height: var(--st-component-badge-circle-size, 1.25rem);
    /* Equal inline/block padding keeps 1–2 digits round; the inline padding lets
       3+ digits grow the box into a rounded-rect instead of clipping. */
    padding: var(--st-component-badge-circle-padding, 0.125rem);
    text-align: center;
  }

  /* Density variant (additive). `md` is the UNTOUCHED base font-size; `--sm`
     reuses the Tag `sm` scale for cross-house consistency. */
  .st-badge--sm {
    font-size: var(--st-component-badge-sm-fontSize, 0.6875rem);
  }

  .st-badge--neutral {
    background: var(--st-semantic-surface-subtle);
    color: var(--st-semantic-text-secondary);
  }

  .st-badge--success {
    background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
    color: var(--st-semantic-feedback-success);
  }

  .st-badge--warning {
    background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
    color: var(--st-semantic-feedback-warning);
  }

  .st-badge--error {
    background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
    color: var(--st-semantic-feedback-error);
  }

  .st-badge--info {
    background: var(
      --st-component-badge-infoBackground,
      color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white)
    );
    color: var(--st-component-badge-infoText, var(--st-semantic-feedback-info));
  }

.st-barChart {
    color: var(--st-semantic-text-secondary);
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-barChart svg {
    display: block;
    overflow: visible;
  }

  .st-barChart__visual {
    display: block;
    position: relative;
  }

  .st-chartDataList {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .st-barChart__grid {
    stroke: var(--st-component-barChart-gridStroke, var(--st-semantic-border-subtle));
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0.7;
  }

  .st-barChart__axis {
    stroke: var(--st-component-barChart-axisStroke, var(--st-semantic-border-subtle));
    stroke-width: 1;
  }

  .st-barChart__tickLabel,
  .st-barChart__categoryLabel {
    fill: var(--st-component-barChart-labelColor, var(--st-semantic-text-secondary));
    font-size: 0.6875rem;
  }

  .st-barChart__bar {
    cursor: pointer;
    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-barChart__bar:hover {
    opacity: 0.82;
  }

  /* Non-selected bars are dimmed while a selection is active. Floor kept high
     (0.6) so the colour stays distinguishable — opacity is never the sole cue;
     selection also adds a stroke (shape), and the values stay in the chips +
     ChartDataList. */
  .st-barChart__bar--dim {
    opacity: 0.6;
  }
  /* Hover still lifts a dimmed bar so it stays explorable. */
  .st-barChart__bar--dim:hover {
    opacity: 0.8;
  }

  /* Selected bar: full opacity + a contrast-safe accent stroke (two signals,
     never a font/size reflow). Outranks the dim rule. */
  .st-barChart__bar--selected,
  .st-barChart__bar--selected:hover {
    opacity: 1;
    stroke: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
    stroke-width: 2;
    paint-order: stroke;
  }

  .st-barChart__bar--category1 { fill: var(--st-semantic-data-category1); }
  .st-barChart__bar--category2 { fill: var(--st-semantic-data-category2); }
  .st-barChart__bar--category3 { fill: var(--st-semantic-data-category3); }
  .st-barChart__bar--category4 { fill: var(--st-semantic-data-category4); }
  .st-barChart__bar--category5 { fill: var(--st-semantic-data-category5); }
  .st-barChart__bar--category6 { fill: var(--st-semantic-data-category6); }
  .st-barChart__bar--category7 { fill: var(--st-semantic-data-category7); }
  .st-barChart__bar--category8 { fill: var(--st-semantic-data-category8); }

  /* Accessible filter chips — keyboard + screen-reader selection surface,
     rendered outside the aria-hidden SVG. */
  .st-barChart__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-2, 0.5rem);
    margin-top: var(--st-spacing-2, 0.5rem);
  }

  .st-barChart__filterChip {
    align-items: center;
    background: var(--st-semantic-surface-subtle, #f8fafc);
    border: 1px solid var(--st-semantic-border-interactive, #cbd5e1);
    border-radius: var(--st-radius-pill, 999px);
    color: var(--st-semantic-text-secondary, #475569);
    cursor: var(--st-cursor-interactive, pointer);
    display: inline-flex;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    gap: var(--st-spacing-1, 0.25rem);
    line-height: 1;
    padding: 0.3125rem var(--st-spacing-2, 0.5rem);
    transition:
      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-barChart__filterChip:hover {
    background: var(--st-semantic-surface-hover, #eef2f7);
  }

  .st-barChart__filterChip:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
    outline-offset: 2px;
  }

  /* Selected chip: solid accent fill + matching text — signalled by colour AND
     by aria-pressed, never by opacity alone. */
  .st-barChart__filterChip--selected {
    background: var(--st-semantic-action-primary, #2563eb);
    border-color: var(--st-semantic-action-primary, #2563eb);
    color: var(--st-semantic-text-inverse);
  }

  /* Colour swatch echoing the bar tone, for quick visual mapping chip-to-bar. */
  .st-barChart__filterSwatch {
    border-radius: var(--st-radius-sm, 0.25rem);
    display: inline-block;
    height: 0.625rem;
    width: 0.625rem;
  }
  .st-barChart__filterChip--category1 .st-barChart__filterSwatch { background: var(--st-semantic-data-category1); }
  .st-barChart__filterChip--category2 .st-barChart__filterSwatch { background: var(--st-semantic-data-category2); }
  .st-barChart__filterChip--category3 .st-barChart__filterSwatch { background: var(--st-semantic-data-category3); }
  .st-barChart__filterChip--category4 .st-barChart__filterSwatch { background: var(--st-semantic-data-category4); }
  .st-barChart__filterChip--category5 .st-barChart__filterSwatch { background: var(--st-semantic-data-category5); }
  .st-barChart__filterChip--category6 .st-barChart__filterSwatch { background: var(--st-semantic-data-category6); }
  .st-barChart__filterChip--category7 .st-barChart__filterSwatch { background: var(--st-semantic-data-category7); }
  .st-barChart__filterChip--category8 .st-barChart__filterSwatch { background: var(--st-semantic-data-category8); }

  .st-barChart__tooltip {
    background: var(--st-component-barChart-tooltipBackground, var(--st-semantic-surface-inverse));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-barChart-tooltipText, var(--st-semantic-text-inverse));
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-barChart__tooltipLabel {
    font-weight: 600;
  }

  .st-barChart__tooltipValue {
    opacity: 0.85;
  }

  /* --- Analytical overlay layer --------------------------------------------
     Bands sit BELOW the bars via render order; fill uses color-mix (a
     semi-transparent tint of the tone token) instead of raw opacity, so the
     bars drawn on top keep full contrast. */
  .st-barChart__band {
    fill: color-mix(in srgb, var(--st-overlay-tone, var(--st-semantic-border-strong)) 12%, transparent);
    stroke: none;
  }
  .st-barChart__band--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
  .st-barChart__band--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
  .st-barChart__band--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
  .st-barChart__band--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
  .st-barChart__band--info { --st-overlay-tone: var(--st-semantic-feedback-info); }

  .st-barChart__refLine {
    stroke: var(--st-overlay-tone, var(--st-semantic-border-strong));
    stroke-width: 1;
    stroke-dasharray: 4 3;
  }
  .st-barChart__refLine--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
  .st-barChart__refLine--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
  .st-barChart__refLine--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
  .st-barChart__refLine--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
  .st-barChart__refLine--info { --st-overlay-tone: var(--st-semantic-feedback-info); }

  .st-barChart__overlayLabel {
    fill: var(--st-semantic-text-secondary);
    font-size: 0.625rem;
  }

  /* Error bars — a value-axis whisker centred on each bar. */
  .st-barChart__errorStem,
  .st-barChart__errorCap {
    stroke: var(--st-semantic-text-primary);
    stroke-width: 1.25;
  }

  /* Goal line — drawn ABOVE the bars, emphasised (thicker, solid accent). */
  .st-barChart__goalLine {
    stroke: var(--st-semantic-feedback-success);
    stroke-width: 2.5;
  }
  .st-barChart__goalLabel {
    fill: var(--st-semantic-feedback-success);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Annotation layer ----------------------------------------------------
     Regions render BEHIND the bars; lines/shapes/points/labels render ABOVE. */
  .st-barChart__annotationRegion {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
    stroke: none;
  }
  .st-barChart__annotationLine {
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
  }
  .st-barChart__annotationShape {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
  }
  .st-barChart__annotationPoint {
    fill: var(--st-semantic-feedback-info);
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
  }
  .st-barChart__annotationLabel,
  .st-barChart__annotationText {
    fill: var(--st-semantic-text-primary);
    font-size: 0.625rem;
    font-weight: 600;
  }

  /* Data labels — per-bar value, drawn on top. Token-only colour. */
  .st-barChart__dataLabel {
    fill: var(--st-semantic-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Crosshair layer (FR-3) ----------------------------------------------
     A tokenised dashed line on the CATEGORY axis at the active (hovered/
     controlled) bar. Decorative (aria-hidden). */
  .st-barChart__crosshairLine {
    stroke: var(--st-semantic-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
  }

  /* --- Keyboard navigation layer (FR-5) ------------------------------------
     A focusable, transparent overlay of one hit-rect per bar. Carries the
     roving tab stop; the focus ring is tokenised (border-interactive). */
  .st-barChart__navLayer {
    inset: 0;
    position: absolute;
  }
  .st-barChart__navDatum {
    fill: transparent;
    outline: none;
  }
  .st-barChart__navDatum:focus-visible {
    fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-barChart__bar,
    .st-barChart__filterChip { transition: none; }
  }

.st-breadcrumb {
    font-size: var(--st-component-breadcrumb-fontSize, inherit);
    letter-spacing: var(--st-component-breadcrumb-letterSpacing, normal);
    line-height: var(--st-component-breadcrumb-lineHeight, normal);
  }

  .st-breadcrumb ol {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-breadcrumb li {
    align-items: center;
    color: var(--st-component-breadcrumb-text, var(--st-semantic-text-secondary));
    display: inline-flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-breadcrumb a {
    color: var(--st-component-breadcrumb-linkText, var(--st-semantic-text-link));
  }

  .st-breadcrumb [aria-current="page"] {
    color: var(--st-component-breadcrumb-currentText, var(--st-semantic-text-primary));
    font-weight: var(--st-component-breadcrumb-currentWeight, 600);
  }

  .st-breadcrumb__separator {
    color: var(--st-component-breadcrumb-separator, var(--st-semantic-text-muted));
  }

.st-button {
    border-width: var(--st-component-button-anatomy-shape-borderWidth, 1px);
    border-style: var(--st-component-button-anatomy-shape-borderStyle, solid);
    border-color: transparent;
    border-radius: var(--st-component-button-anatomy-shape-radius, 0.375rem);
    cursor: var(--st-cursor-interactive, pointer);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-component-button-anatomy-icon-gap, var(--st-spacing-2, 0.5rem));
    font-family: var(--st-component-button-anatomy-typography-family, inherit);
    font-weight: var(--st-component-button-anatomy-typography-weight, 600);
    line-height: var(--st-component-button-anatomy-typography-lineHeight, 1.2);
    letter-spacing: var(--st-component-button-anatomy-typography-letterSpacing, 0);
    text-transform: var(--st-component-button-anatomy-typography-textTransform, none);
    transition:
      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  
  .st-button--sm {
    min-height: var(--st-component-button-anatomy-density-sm-controlHeight, 2rem);
    min-width: var(--st-component-button-anatomy-density-sm-minWidth, 2rem);
    padding: var(--st-component-button-anatomy-density-sm-paddingBlock, 0)
      var(--st-component-button-anatomy-density-sm-paddingInlineEnd, var(--st-component-button-anatomy-density-sm-paddingInline, 0.75rem))
      var(--st-component-button-anatomy-density-sm-paddingBlock, 0)
      var(--st-component-button-anatomy-density-sm-paddingInline, 0.75rem);
    font-size: var(--st-component-button-anatomy-density-sm-fontSize, 0.875rem);
  }

  .st-button--md {
    min-height: var(--st-component-button-anatomy-density-md-controlHeight, 2.5rem);
    min-width: var(--st-component-button-anatomy-density-md-minWidth, 2.5rem);
    padding: var(--st-component-button-anatomy-density-md-paddingBlock, 0)
      var(--st-component-button-anatomy-density-md-paddingInlineEnd, var(--st-component-button-anatomy-density-md-paddingInline, 1rem))
      var(--st-component-button-anatomy-density-md-paddingBlock, 0)
      var(--st-component-button-anatomy-density-md-paddingInline, 1rem);
    font-size: var(--st-component-button-anatomy-density-md-fontSize, var(--st-component-button-anatomy-typography-size, 0.9375rem));
  }

  .st-button--lg {
    min-height: var(--st-component-button-anatomy-density-lg-controlHeight, 3rem);
    min-width: var(--st-component-button-anatomy-density-lg-minWidth, 3rem);
    padding: var(--st-component-button-anatomy-density-lg-paddingBlock, 0)
      var(--st-component-button-anatomy-density-lg-paddingInlineEnd, var(--st-component-button-anatomy-density-lg-paddingInline, 1.25rem))
      var(--st-component-button-anatomy-density-lg-paddingBlock, 0)
      var(--st-component-button-anatomy-density-lg-paddingInline, 1.25rem);
    font-size: var(--st-component-button-anatomy-density-lg-fontSize, 1rem);
  }

  .st-button--primary {
    background: var(--st-component-button-primaryBackground, var(--st-semantic-action-primary));
    color: var(--st-component-button-primaryText, var(--st-semantic-action-primaryText));
  }

  
  .st-button--secondary {
    background: var(--st-component-button-secondaryBackground, var(--st-semantic-action-secondary));
    color: var(--st-component-button-secondaryText, var(--st-semantic-action-secondaryText));
    border-color: var(--st-component-button-secondaryBorder, var(--st-semantic-border-subtle));
  }

  
  .st-button--primary:not(:disabled):hover {
    background: var(--st-component-button-anatomy-states-hover-bg, var(--st-semantic-action-primary));
  }

  
  .st-button--secondary:not(:disabled):hover {
    background: var(--st-component-button-secondaryHoverBackground, var(--st-semantic-action-secondaryHover, var(--st-semantic-action-secondary)));
  }

  .st-button--ghost {
    background: transparent;
    color: var(--st-semantic-text-link);
  }

  .st-button--danger {
    background: var(--st-semantic-action-danger);
    color: var(--st-semantic-text-inverse);
  }

  .st-button:disabled {
    cursor: var(--st-cursor-disabled, not-allowed);
    opacity: var(--st-component-button-anatomy-states-disabled-opacity, 0.55);
  }

  
  .st-button:focus-visible {
    outline: var(--st-component-button-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
    outline-offset: var(--st-component-button-anatomy-focus-offset, 2px);
    box-shadow: var(--st-component-button-anatomy-focus-boxShadow, none);
  }

.st-card {
    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
    border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
    border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
    border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
    box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
    color: var(--st-semantic-text-primary);
    
    font-size: var(--st-component-card-anatomy-typography-size, inherit);
    line-height: var(--st-component-card-anatomy-typography-lineHeight, normal);
    letter-spacing: var(--st-component-card-anatomy-typography-letterSpacing, normal);
    padding: var(--st-spacing-4, 1rem);
  }

  .st-card--interactive {
    cursor: var(--st-cursor-interactive, pointer);
    transition:
      box-shadow var(--st-motion-normal, 180ms) var(--st-motion-easing, ease),
      transform var(--st-motion-normal, 180ms) var(--st-motion-easing, ease);
  }

  .st-card--interactive:hover {
    box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
    transform: var(--st-component-card-anatomy-states-hover-transform, translateY(-1px));
  }

.st-chatComposer {
    background: var(--st-component-chat-composerSurface, var(--st-semantic-surface-raised, #ffffff));
    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-control-radius, 0.375rem);
    display: grid;
    gap: var(--st-spacing-3, 0.75rem);
    padding: var(--st-spacing-3, 0.75rem);
    width: 100%;
  }

  .st-chatComposer__body {
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-chatComposer__inputShell {
    display: grid;
    gap: 0.25rem;
  }

  .st-chatComposer__textarea {
    background: var(--st-component-control-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    font: inherit;
    min-height: 2.5rem;
    max-height: 16rem;
    overflow-y: hidden;
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    resize: none;
    width: 100%;
  }

  .st-chatComposer__textarea:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: none;
  }

  .st-chatComposer__textarea[aria-disabled="true"] {
    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-chatComposer__toolbar {
    align-items: center;
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
    justify-content: space-between;
  }

  .st-chatComposer__actions {
    align-items: center;
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-chatComposer__actions--right {
    margin-left: auto;
  }

  @media (max-width: 640px) {
    .st-chatComposer__toolbar {
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .st-chatComposer__actions {
      width: 100%;
    }

    .st-chatComposer__actions--right {
      margin-left: 0;
    }
  }

.st-chatMessage {
    align-items: flex-start;
    color: var(--st-semantic-text-primary);
    display: flex;
    gap: var(--st-component-chatMessage-gap, 0.5rem);
    width: 100%;
  }

  .st-chatMessage[data-align="end"] {
    flex-direction: row-reverse;
  }

  .st-chatMessage__avatar {
    align-items: center;
    background: var(--st-component-chatMessage-avatarBackground, var(--st-semantic-surface-subtle));
    border-radius: 999px;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    height: var(--st-component-chatMessage-avatarSize, 1.75rem);
    justify-content: center;
    overflow: hidden;
    width: var(--st-component-chatMessage-avatarSize, 1.75rem);
  }

  .st-chatMessage__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    max-width: var(--st-component-chatMessage-maxWidth, min(42rem, 100%));
  }

  .st-chatMessage[data-align="end"] .st-chatMessage__body {
    align-items: flex-end;
  }

  .st-chatMessage__bubble {
    border: 1px solid transparent;
    border-radius: var(--st-component-chatMessage-radius, 0.75rem);
    line-height: 1.5;
    padding: var(--st-component-chatMessage-padding, 0.625rem 0.875rem);
    position: relative;
    word-break: break-word;
  }

  .st-chatMessage__content p {
    margin: 0;
  }
  .st-chatMessage__content p + p,
  .st-chatMessage__content * + p,
  .st-chatMessage__content * + ul,
  .st-chatMessage__content * + ol,
  .st-chatMessage__content * + pre {
    margin-top: 0.5rem;
  }

  .st-chatMessage--user .st-chatMessage__bubble {
    background: var(
      --st-component-chatMessage-userBackground,
      var(--st-component-chat-userBubbleBackground, var(--st-semantic-action-primary, #2563eb))
    );
    color: var(
      --st-component-chatMessage-userText,
      var(--st-component-chat-userBubbleText, #ffffff)
    );
  }

  .st-chatMessage--assistant .st-chatMessage__bubble {
    background: var(
      --st-component-chatMessage-assistantBackground,
      var(--st-component-chat-assistantBubbleBackground, var(--st-semantic-surface-subtle, #f8fafc))
    );
    color: var(
      --st-component-chatMessage-assistantText,
      var(--st-component-chat-assistantBubbleText, var(--st-semantic-text-primary))
    );
  }

  .st-chatMessage--system .st-chatMessage__bubble {
    background: var(
      --st-component-chatMessage-systemBackground,
      var(--st-semantic-surface-default, #ffffff)
    );
    border-color: var(
      --st-component-chatMessage-systemBorder,
      var(--st-semantic-border-subtle)
    );
    color: var(
      --st-component-chatMessage-systemText,
      var(--st-semantic-text-secondary)
    );
    font-size: 0.875rem;
  }

  .st-chatMessage--tool .st-chatMessage__bubble {
    background: var(
      --st-component-chatMessage-toolBackground,
      var(--st-component-chatMessage-assistantBackground, var(--st-component-chat-assistantBubbleBackground, var(--st-semantic-surface-subtle, #f8fafc)))
    );
    color: var(
      --st-component-chatMessage-toolText,
      var(--st-component-chatMessage-assistantText, var(--st-component-chat-assistantBubbleText, var(--st-semantic-text-primary)))
    );
    border-color: var(
      --st-component-chatMessage-toolBorder,
      var(--st-semantic-border-subtle)
    );
    font-style: italic;
  }

  .st-chatMessage--pending .st-chatMessage__bubble {
    border-color: var(
      --st-component-chatMessage-pendingBorder,
      var(--st-semantic-status-pending, #d97706)
    );
  }

  .st-chatMessage--processing .st-chatMessage__bubble {
    border-color: var(
      --st-component-chatMessage-processingBorder,
      var(--st-semantic-status-processing, #2563eb)
    );
  }

  .st-chatMessage--failed .st-chatMessage__bubble {
    border-color: var(
      --st-component-chatMessage-errorBorder,
      var(--st-semantic-feedback-error, #b91c1c)
    );
  }

  .st-chatMessage__pulse {
    background: currentColor;
    border-radius: 999px;
    display: inline-block;
    height: 0.5rem;
    margin-left: 0.5rem;
    opacity: 0.65;
    vertical-align: middle;
    width: 0.5rem;
    animation: st-chatMessage-pulse 1.1s ease-in-out infinite;
  }

  @keyframes st-chatMessage-pulse {
    0%,
    100% {
      opacity: 0.25;
      transform: scale(0.85);
    }
    50% {
      opacity: 0.9;
      transform: scale(1.05);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-chatMessage__pulse {
      animation: none;
      opacity: 0.6;
    }
  }

  .st-chatMessage__footer {
    color: var(--st-semantic-text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .st-chatMessage__timestamp {
    font-variant-numeric: tabular-nums;
  }

  .st-chatMessage__actions {
    display: flex;
    gap: 0.25rem;
  }

  .st-chatMessage[data-align="end"] .st-chatMessage__actions {
    justify-content: flex-end;
  }

.st-chatThread {
    background: var(--st-component-chatThread-background, transparent);
    border-radius: var(--st-component-chatThread-radius, 0.75rem);
    color: var(--st-semantic-text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--st-component-chatThread-gap, 0.75rem);
    max-height: var(--st-component-chatThread-maxHeight, 32rem);
    min-height: var(--st-component-chatThread-minHeight, 12rem);
    overflow-y: auto;
    padding: var(--st-component-chatThread-padding, 0.75rem);
    position: relative;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-chatThread {
      scroll-behavior: auto;
    }
  }

  .st-chatThread__list {
    display: flex;
    flex-direction: column;
    gap: var(--st-component-chatThread-gap, 0.75rem);
    min-height: 0;
  }

  .st-chatThread__empty {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: flex;
    flex: 1;
    justify-content: center;
    padding: var(--st-spacing-4, 1rem);
    text-align: center;
  }

.st-choice {
    align-items: start;
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    cursor: var(--st-cursor-interactive, pointer);
    display: inline-grid;
    gap: 0.625rem;
    grid-template-columns: auto 1fr;
  }

  .st-choice__input {
    
    accent-color: var(--st-component-selection-checkedBackground, var(--st-semantic-action-primary));
    cursor: inherit;
    height: 1rem;
    margin: 0.125rem 0 0;
    width: 1rem;
  }

  
  .st-choice__input:focus-visible {
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-choice__input[aria-invalid="true"] {
    accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
    outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-choice__input:disabled {
    cursor: var(--st-cursor-disabled, not-allowed);
    opacity: 0.55;
  }

  .st-choice:has(.st-choice__input:disabled) {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: var(--st-cursor-disabled, not-allowed);
  }

  .st-choice__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-choice__label {
    
    color: var(--st-component-selection-choiceLabelColor, inherit);
    font-size: var(--st-component-selection-choiceLabelFontSize, 0.9375rem);
    line-height: var(--st-component-selection-choiceLabelLineHeight, normal);
    letter-spacing: var(--st-component-selection-choiceLabelLetterSpacing, normal);
  }

  .st-choice__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

.st-codeSnippet__wrapper {
    position: relative;
  }

  .st-codeSnippet {
    background: var(
      --st-component-codeSnippet-background,
      var(--st-semantic-surface-subtle)
    );
    border: 1px solid
      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-codeSnippet-radius, 0.375rem);
    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
    max-height: var(--st-component-codeSnippet-maxHeight, 16rem);
    overflow: auto;
    padding: 0.75rem 0.875rem;
    padding-inline-end: 4rem;
  }

  .st-codeSnippet__code {
    font: inherit;
    white-space: pre;
  }

  .st-codeSnippet__copy {
    position: absolute;
    inset-block-start: 0.375rem;
    inset-inline-end: 0.375rem;
  }

  .st-codeSnippet--inline {
    background: var(
      --st-component-codeSnippet-background,
      var(--st-semantic-surface-subtle)
    );
    border: 1px solid
      var(--st-component-codeSnippet-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-codeSnippet-text, var(--st-semantic-text-primary));
    font-family: var(--st-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    padding: 0.0625rem 0.375rem;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
    position: relative;
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-combobox {
    align-items: center;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: inline-flex;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-combobox--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-combobox--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-combobox--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-combobox:hover:not(:has(input:disabled)) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-combobox:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-combobox:has([aria-invalid="true"]) {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-combobox__control {
    background: transparent;
    border: 0;
    color: inherit;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    padding: 0 0.75rem;
    width: 100%;
  }

  .st-combobox__control:focus {
    outline: none;
  }

  .st-combobox__control::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-combobox__control:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-combobox__clear,
  .st-combobox__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    height: 100%;
    justify-content: center;
    padding: 0 0.5rem;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-combobox__clear:hover:not(:disabled),
  .st-combobox__toggle:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-combobox__clear:focus-visible,
  .st-combobox__toggle:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-combobox__clear:disabled,
  .st-combobox__toggle:disabled {
    cursor: not-allowed;
  }

  .st-combobox__toggleIcon {
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-combobox__toggleIcon--open {
    transform: rotate(180deg);
  }

  .st-combobox__list {
    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-dropdown-radius, 0.375rem);
    box-shadow: var(--st-component-dropdown-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    display: grid;
    left: 0;
    margin-top: var(--st-spacing-1, 0.25rem);
    max-height: 16rem;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-combobox__empty {
    color: var(--st-semantic-text-muted);
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  }

  .st-combobox__option {
    background: transparent;
    border: 0;
    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
    cursor: pointer;
    font: inherit;
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    text-align: left;
  }

  .st-combobox__option:hover:not(:disabled),
  .st-combobox__option--active {
    background: var(
      --st-component-dropdown-optionHoverBackground,
      var(--st-semantic-surface-subtle)
    );
  }

  .st-combobox__option[aria-selected="true"] {
    background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
    color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
  }

  .st-combobox__option:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
  }

.st-contentSwitcher {
    background: var(--st-semantic-surface-subtle);
    border-radius: var(--st-component-control-radius, 0.375rem);
    display: inline-flex;
    padding: 0.125rem;
  }

  .st-contentSwitcher__option {
    background: transparent;
    border: 0;
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    padding: 0 0.875rem;
    transition:
      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-contentSwitcher--sm .st-contentSwitcher__option {
    font-size: 0.75rem;
    min-height: 1.75rem;
  }

  .st-contentSwitcher--md .st-contentSwitcher__option {
    font-size: 0.875rem;
    min-height: 2.25rem;
  }

  .st-contentSwitcher--lg .st-contentSwitcher__option {
    font-size: 0.9375rem;
    min-height: 2.75rem;
  }

  .st-contentSwitcher__option:hover:not([disabled]):not(.st-contentSwitcher__option--selected) {
    color: var(--st-semantic-text-primary);
  }

  .st-contentSwitcher__option:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 1px;
  }

  .st-contentSwitcher__option--selected {
    background: var(--st-semantic-surface-default);
    box-shadow: var(--st-shadow-subtle);
    color: var(--st-semantic-text-primary);
  }

  .st-contentSwitcher__option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

.st-copyButton {
    align-items: center;
    background: var(--st-component-control-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.375rem;
    padding: 0 0.625rem;
    transition:
      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-copyButton--sm {
    font-size: 0.75rem;
    min-height: var(--st-component-control-smHeight, 2rem);
  }

  .st-copyButton--md {
    font-size: 0.875rem;
    min-height: var(--st-component-control-mdHeight, 2.5rem);
  }

  .st-copyButton--lg {
    font-size: 0.9375rem;
    min-height: var(--st-component-control-lgHeight, 3rem);
  }

  .st-copyButton:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-copyButton:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: none;
  }

  .st-copyButton:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-copyButton--copied {
    color: var(--st-semantic-feedback-success);
  }

  .st-copyButton__icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

.st-dataTable-wrap {
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-dataTable-wrap:has(.st-dataTable) {
    overflow-x: auto;
  }

  .st-dataTable {
    background: var(--st-component-dataTable-rowBackground, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
    border-collapse: separate;
    border-radius: var(--st-component-dataTable-radius, 0.5rem);
    border-spacing: 0;
    color: var(--st-component-dataTable-text, var(--st-semantic-text-primary));
    min-width: 100%;
  }

  .st-dataTable caption {
    color: var(--st-component-dataTable-captionText, var(--st-semantic-text-secondary));
    font-weight: 600;
    padding: 0.75rem;
    text-align: start;
  }

  .st-dataTable th,
  .st-dataTable td {
    border-bottom: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
    padding: 0.75rem;
    text-align: start;
    vertical-align: top;
  }

  .st-dataTable--sm th,
  .st-dataTable--sm td {
    font-size: 0.8125rem;
    padding: 0.5rem 0.625rem;
  }

  .st-dataTable--lg th,
  .st-dataTable--lg td {
    padding: 1rem;
  }

  .st-dataTable th {
    background: var(--st-component-dataTable-headerBackground, var(--st-semantic-surface-subtle));
    font-size: 0.875rem;
    font-weight: 650;
  }

  .st-dataTable tbody tr:hover {
    background: var(--st-component-dataTable-rowHoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-dataTable tbody tr:last-child td {
    border-bottom: 0;
  }

  .st-dataTable__row--selected {
    background: color-mix(
      in srgb,
      var(--st-semantic-action-primary) 10%,
      var(--st-semantic-surface-default)
    );
  }

  .st-dataTable__row--clickable {
    cursor: pointer;
  }

  .st-dataTable__cell--center {
    text-align: center;
  }

  .st-dataTable__cell--end {
    text-align: end;
  }

  /* Conditional formatting (« classe Power-BI ») — décoration sémantique de
     cellule/carte. Le fond teinté réutilise le pattern accessible de Badge/Tag
     (color-mix 14% sur token feedback) ; le texte garde le token plein. Le fond
     n'est jamais la seule indication : icône + texte SR accompagnent l'intent. */
  .st-cell__content {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
  }

  .st-cell__icon {
    flex: 0 0 auto;
  }

  .st-cell--intent-positive {
    background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
    color: var(--st-semantic-feedback-success);
  }

  .st-cell--intent-negative {
    background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
    color: var(--st-semantic-feedback-error);
  }

  .st-cell--intent-warning {
    background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
    color: var(--st-semantic-feedback-warning);
  }

  .st-cell--intent-info {
    background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
    color: var(--st-semantic-feedback-info);
  }

  .st-cell--intent-neutral {
    background: var(--st-semantic-surface-subtle);
    color: var(--st-semantic-text-secondary);
  }

  .st-dataTable__select {
    width: 2.5rem;
  }

  .st-dataTable__selectLabel {
    align-items: center;
    display: inline-flex;
    height: 1rem;
    justify-content: center;
    margin: 0;
    width: 1rem;
  }

  .st-dataTable__selectLabel input {
    accent-color: var(--st-semantic-action-primary);
    height: 1rem;
    margin: 0;
    width: 1rem;
  }

  .st-dataTable__sortBtn {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 650;
    gap: 0.375rem;
    margin: -0.25rem -0.5rem;
    padding: 0.25rem 0.5rem;
    text-align: start;
  }

  .st-dataTable__sortBtn:hover {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-dataTable__sortBtn:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-dataTable__sortIcon {
    color: var(--st-semantic-text-secondary);
    font-size: 0.75rem;
  }

  .st-dataTable th[aria-sort="ascending"] .st-dataTable__sortIcon,
  .st-dataTable th[aria-sort="descending"] .st-dataTable__sortIcon {
    color: var(--st-semantic-action-primary);
  }

  .st-dataTable__empty {
    color: var(--st-semantic-text-muted);
    text-align: center;
  }

  .st-dataTable__footer {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.25rem 0.25rem 0;
  }

  .st-dataTable__range {
    font-variant-numeric: tabular-nums;
  }

  .st-dataTable__pager {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }

  .st-dataTable__pagerBtn {
    background: var(--st-component-pagination-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-pagination-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-pagination-radius, 0.375rem);
    color: var(--st-component-pagination-text, var(--st-semantic-text-primary));
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    min-height: 2rem;
    padding: 0 0.625rem;
  }

  .st-dataTable__pagerBtn:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-dataTable__pagerBtn:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
    opacity: 0.65;
  }

  .st-dataTable__pagerStatus {
    font-variant-numeric: tabular-nums;
  }

  .st-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
    position: relative;
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-datepicker {
    align-items: stretch;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: inline-flex;
    overflow: hidden;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-datepicker--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-datepicker--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-datepicker--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-datepicker:hover:not(:has(input:disabled)) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-datepicker:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-datepicker:has([aria-invalid="true"]) {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-datepicker__control {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    padding: 0 0.75rem;
    width: 100%;
  }

  .st-datepicker__control:focus {
    outline: none;
  }

  .st-datepicker__control::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-datepicker__control:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-datepicker__trigger {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 0.5rem;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-datepicker__trigger:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-datepicker__trigger:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-datepicker__trigger:disabled {
    cursor: not-allowed;
  }

  .st-datepicker__panel {
    background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-popover-radius, 0.5rem);
    box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-component-popover-text, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-spacing-3, 0.75rem);
    left: 0;
    margin-top: var(--st-spacing-1, 0.25rem);
    min-width: 18rem;
    padding: var(--st-spacing-3, 0.75rem);
    position: absolute;
    top: 100%;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-datepicker__nav {
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-datepicker__navBtn {
    background: transparent;
    border: 0;
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 1.125rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
  }

  .st-datepicker__navBtn:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-datepicker__navBtn:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 2px;
  }

  .st-datepicker__monthLabel {
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
  }

  .st-datepicker__grid {
    display: grid;
    gap: var(--st-spacing-1, 0.25rem);
  }

  .st-datepicker__weekdays,
  .st-datepicker__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(2rem, 1fr));
    gap: 2px;
  }

  .st-datepicker__weekday {
    color: var(--st-semantic-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0;
    text-align: center;
    text-transform: capitalize;
  }

  .st-datepicker__day {
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 0;
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    min-width: 0;
    padding: 0;
    text-align: center;
  }

  .st-datepicker__day:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-datepicker__day:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-datepicker__day--outside {
    color: var(--st-semantic-text-muted);
  }

  .st-datepicker__day--inRange {
    background: var(
      --st-component-dropdown-optionHoverBackground,
      var(--st-semantic-surface-subtle)
    );
  }

  .st-datepicker__day--selected {
    background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
    color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
  }

  .st-datepicker__day:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .st-datepicker__footer {
    display: flex;
    justify-content: flex-end;
  }

  .st-datepicker__todayBtn {
    background: transparent;
    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
  }

  .st-datepicker__todayBtn:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-datepicker__todayBtn:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 2px;
  }

  .st-datepicker__todayBtn:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
  }

.st-donutChart {
    color: var(--st-semantic-text-secondary);
    display: block;
    font-family: inherit;
    max-width: 100%;
    position: relative;
  }

  .st-donutChart svg { display: block; overflow: visible; }

  .st-donutChart__slice {
    cursor: pointer;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
    transition: opacity 120ms ease;
  }

  .st-donutChart__slice--dim { opacity: 0.4; }

  .st-donutChart__slice:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  .st-donutChart__slice--category1 { fill: var(--st-semantic-data-category1); }
  .st-donutChart__slice--category2 { fill: var(--st-semantic-data-category2); }
  .st-donutChart__slice--category3 { fill: var(--st-semantic-data-category3); }
  .st-donutChart__slice--category4 { fill: var(--st-semantic-data-category4); }
  .st-donutChart__slice--category5 { fill: var(--st-semantic-data-category5); }
  .st-donutChart__slice--category6 { fill: var(--st-semantic-data-category6); }
  .st-donutChart__slice--category7 { fill: var(--st-semantic-data-category7); }
  .st-donutChart__slice--category8 { fill: var(--st-semantic-data-category8); }

  .st-donutChart__center {
    fill: var(--st-semantic-text-primary);
    font-size: 1.25rem;
    font-weight: 650;
  }

  /* Data labels — per-slice value, centred in the arc. Token-only colour. */
  .st-donutChart__dataLabel {
    fill: var(--st-semantic-text-inverse);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .st-donutChart__tooltip {
    background: var(--st-semantic-surface-inverse);
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse);
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    left: 50%;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 1;
  }

  .st-donutChart__tooltipLabel { font-weight: 600; }
  .st-donutChart__tooltipValue { opacity: 0.85; }

.st-drawer__backdrop {
    background: var(--st-component-drawer-backdrop, var(--st-semantic-surface-overlay));
    inset: 0;
    position: fixed;
    z-index: var(--st-component-drawer-zIndex, 90);
  }

  .st-drawer {
    background: var(--st-component-drawer-surface, var(--st-semantic-surface-raised));
    border-color: var(--st-component-drawer-border, var(--st-semantic-border-subtle));
    box-shadow: var(--st-component-drawer-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-semantic-text-primary);
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    max-width: min(100vw, var(--st-component-drawer-width, 24rem));
    padding: var(--st-spacing-4, 1rem);
    position: absolute;
    top: 0;
    width: var(--st-component-drawer-width, 24rem);
  }

  .st-drawer--right {
    border-left-style: solid;
    border-left-width: 1px;
    right: 0;
  }

  .st-drawer--left {
    border-right-style: solid;
    border-right-width: 1px;
    left: 0;
  }

  .st-drawer__header {
    align-items: start;
    display: flex;
    gap: var(--st-spacing-4, 1rem);
    justify-content: space-between;
  }

  .st-drawer__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0;
  }

  .st-drawer__description {
    color: var(--st-semantic-text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0 0;
  }

  .st-drawer__close {
    align-items: center;
    background: transparent;
    border: 1px solid var(--st-semantic-border-subtle);
    border-radius: var(--st-radius-small, 0.375rem);
    color: var(--st-semantic-text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
  }

  .st-drawer__body {
    line-height: 1.5;
    overflow: auto;
    padding-block: var(--st-spacing-4, 1rem);
  }

  .st-drawer__footer {
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
    justify-content: flex-end;
  }

.st-dropdown {
    display: inline-grid;
    min-width: 14rem;
    position: relative;
  }

  .st-dropdown__button {
    align-items: center;
    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-dropdown-radius, 0.375rem);
    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: space-between;
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    padding: 0 var(--st-spacing-3, 0.75rem);
  }

  .st-dropdown__button:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 2px;
  }

  .st-dropdown__icon {
    color: var(--st-semantic-text-secondary);
    flex: 0 0 auto;
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-dropdown__icon--open {
    transform: rotate(180deg);
  }

  .st-dropdown__list {
    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-dropdown-radius, 0.375rem);
    box-shadow: var(--st-component-dropdown-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    display: grid;
    overflow: hidden;
    position: fixed;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-dropdown__option {
    background: transparent;
    border: 0;
    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
    cursor: pointer;
    font: inherit;
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    text-align: left;
  }

  .st-dropdown__option:hover:not(:disabled),
  .st-dropdown__option:focus-visible {
    background: var(
      --st-component-dropdown-optionHoverBackground,
      var(--st-semantic-surface-subtle)
    );
    outline: none;
  }

  .st-dropdown__option[aria-selected="true"] {
    background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
    color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
  }

  .st-dropdown__option:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
  }

.st-empty-state {
    align-items: center;
    background: var(--st-component-emptyState-background, var(--st-semantic-surface-subtle));
    border: 1px solid var(--st-component-emptyState-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-emptyState-radius, 0.5rem);
    color: var(--st-component-emptyState-titleText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-spacing-4, 1rem);
    justify-items: center;
    padding: var(--st-spacing-8, 2rem);
    text-align: center;
  }

  .st-empty-state__content {
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
    max-width: 34rem;
  }

  .st-empty-state__title {
    font-size: 1.125rem;
    margin: 0;
  }

  .st-empty-state__message {
    color: var(--st-component-emptyState-messageText, var(--st-semantic-text-secondary));
    line-height: 1.5;
    margin: 0;
  }

  .st-empty-state__action {
    display: flex;
    justify-content: center;
  }

.st-error-summary {
    background: var(--st-semantic-surface-default);
    border: 2px solid var(--st-semantic-feedback-error);
    border-radius: var(--st-radius-md, 0.25rem);
    color: var(--st-semantic-text-primary);
    padding: var(--st-spacing-4, 1rem);
  }

  .st-error-summary__heading {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 var(--st-spacing-2, 0.5rem);
  }

  .st-error-summary__list {
    display: grid;
    gap: var(--st-spacing-1, 0.25rem);
    margin: 0;
    padding-left: var(--st-spacing-4, 1rem);
  }

  .st-error-summary__link {
    color: var(--st-semantic-feedback-error);
    font-weight: 600;
    text-decoration: underline;
  }

  .st-error-summary__link:hover,
  .st-error-summary__link:focus-visible {
    text-decoration: none;
  }

.st-fileUploader-field {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__label {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  .st-fileUploader__dropzone {
    align-items: center;
    background: var(--st-component-control-background, var(--st-semantic-surface-default));
    border: 1px dashed var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-control-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-3, 0.75rem);
    justify-content: flex-start;
    padding: var(--st-spacing-4, 1rem);
    transition:
      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-fileUploader__dropzone:hover:not(.st-fileUploader__dropzone--disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-fileUploader__dropzone--dragover {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  }

  .st-fileUploader__dropzone--invalid {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-fileUploader__dropzone--disabled {
    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
    opacity: 0.7;
  }

  .st-fileUploader__input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .st-fileUploader__content {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-3, 0.75rem);
  }

  .st-fileUploader__affordance {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    justify-content: center;
    line-height: 0;
  }

  .st-fileUploader__dropzone--dragover .st-fileUploader__affordance {
    color: var(--st-semantic-action-primary);
  }

  .st-fileUploader__trigger {
    align-items: center;
    background: var(--st-semantic-action-primary);
    border: 1px solid transparent;
    border-radius: var(--st-component-button-radius, 0.375rem);
    color: var(--st-semantic-action-primaryText, #ffffff);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 600;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 var(--st-spacing-3, 0.75rem);
    transition:
      background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-fileUploader__trigger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--st-semantic-action-primary) 88%, black);
  }

  .st-fileUploader__trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: none;
  }

  .st-fileUploader__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .st-fileUploader__hint {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
  }

  .st-fileUploader__list {
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-fileUploader__item {
    align-items: center;
    background: var(--st-semantic-surface-subtle);
    border: 1px solid var(--st-semantic-border-subtle);
    border-radius: var(--st-component-control-radius, 0.375rem);
    display: flex;
    gap: var(--st-spacing-3, 0.75rem);
    justify-content: space-between;
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  }

  .st-fileUploader__item--error {
    border-color: var(--st-semantic-feedback-error);
  }

  .st-fileUploader__itemIcon {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    line-height: 0;
  }

  .st-fileUploader__item--uploading .st-fileUploader__itemIcon {
    color: var(--st-semantic-action-primary);
  }

  .st-fileUploader__item--complete .st-fileUploader__itemIcon {
    color: var(--st-semantic-feedback-success);
  }

  .st-fileUploader__item--error .st-fileUploader__itemIcon {
    color: var(--st-semantic-feedback-error);
  }

  .st-fileUploader__spinner {
    align-items: center;
    animation: st-fileUploader-spin 0.9s linear infinite;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
  }

  @keyframes st-fileUploader-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-fileUploader__spinner {
      animation: none;
    }
  }

  .st-fileUploader__itemMeta {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .st-fileUploader__itemName {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st-fileUploader__itemSize {
    color: var(--st-semantic-text-muted);
    font-size: 0.8125rem;
  }

  .st-fileUploader__itemError {
    color: var(--st-semantic-feedback-error);
    font-size: 0.8125rem;
  }

  .st-fileUploader__remove {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    height: 1.75rem;
    justify-content: center;
    line-height: 0;
    padding: 0;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 1.75rem;
  }

  .st-fileUploader__remove:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }

  .st-fileUploader__remove:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 1px;
  }

  .st-fileUploader__remove:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

.st-footer {
    background: var(--st-component-footer-background, var(--st-semantic-surface-subtle));
    border-top: 1px solid var(--st-component-footer-border, var(--st-semantic-border-subtle));
    color: var(--st-component-footer-text, var(--st-semantic-text-secondary));
    display: flex;
    flex-direction: column;
    gap: var(--st-spacing-4, 1rem);
    padding: var(--st-spacing-8, 2rem) var(--st-spacing-4, 1rem);
    width: 100%;
  }

  .st-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-8, 2rem);
    align-items: flex-start;
    justify-content: space-between;
  }

  .st-footer__brand {
    align-items: center;
    color: var(--st-semantic-text-primary);
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--st-spacing-3, 0.75rem);
  }

  .st-footer__columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-8, 2rem);
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .st-footer__bottom {
    align-items: center;
    border-top: 1px solid var(--st-semantic-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-4, 1rem);
    justify-content: space-between;
    padding-top: var(--st-spacing-4, 1rem);
  }

  .st-footer__copyright {
    color: var(--st-semantic-text-muted);
    font-size: 0.8125rem;
  }

  .st-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-4, 1rem);
    font-size: 0.8125rem;
  }

.st-forceGraph {
    color: var(--st-semantic-text-secondary);
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-forceGraph svg { display: block; overflow: visible; }

  .st-forceGraph__svg--panning { cursor: grabbing; }

  .st-forceGraph__edge {
    stroke: var(--st-semantic-border-strong);
    stroke-width: 1;
    opacity: 0.55;
    transition: opacity 120ms ease, stroke-width 120ms ease;
  }

  .st-forceGraph__edge--weak {
    stroke: var(--st-semantic-border-subtle);
    opacity: 0.5;
  }

  /* Emphasised edge (e.g. reconciliation match): thicker, fully opaque, on top. */
  .st-forceGraph__edge--emphasis {
    stroke: var(--st-semantic-border-interactive, var(--st-semantic-border-strong));
    opacity: 0.95;
  }

  /* Hover: match the node hover (fully visible) so the edge is never paler
     than the two nodes it connects. */
  .st-forceGraph__edge--hovered {
    opacity: 1;
    stroke-width: 2;
  }

  /* Dimmed by an active selection (edge touches no selected/focused node). */
  .st-forceGraph__edge--dim {
    opacity: 0.12;
  }

  /* Invisible wide hit target for edge hover */
  .st-forceGraph__edgeHit {
    stroke: transparent;
    stroke-width: 10;
    fill: none;
    cursor: crosshair;
  }

  .st-forceGraph__node { transition: opacity 120ms ease; }
  .st-forceGraph__node--dim { opacity: 0.3; }

  /* During a merge the opacity/transform are driven per-frame via rAF, so the
     CSS transitions are disabled to avoid a lag that would smear the glide. The
     fading/masked `from` node is also taken out of hit-testing so the invisible
     node cannot be hovered, focused or clicked. */
  .st-forceGraph__node--merging,
  .st-forceGraph__edge--merging { transition: none; }
  .st-forceGraph__node--merging { pointer-events: none; }

  .st-forceGraph__dot {
    cursor: pointer;
    fill-opacity: 0.9;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
    transition: fill-opacity 120ms ease;
  }

  .st-forceGraph__dot:hover,
  .st-forceGraph__dot:focus-visible { fill-opacity: 1; }

  .st-forceGraph__dot:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  /* Selection highlight: slightly thicker stroke ring, full opacity. */
  .st-forceGraph__node--selected .st-forceGraph__dot {
    fill-opacity: 1;
    stroke: var(--st-semantic-border-interactive, #0f62fe);
    stroke-width: 2.5;
  }

  /* Focus (keyboard/programmatic focus): stronger ring + slight scale. */
  .st-forceGraph__node--focus .st-forceGraph__dot {
    fill-opacity: 1;
    stroke: var(--st-semantic-border-interactive, #0f62fe);
    stroke-width: 3.5;
    filter: drop-shadow(0 0 4px var(--st-semantic-border-interactive, #0f62fe));
  }

  .st-forceGraph__label {
    fill: var(--st-semantic-text-secondary);
    font-size: 0.6875rem;
    pointer-events: none;
  }

  .st-forceGraph__node--category1 .st-forceGraph__dot { fill: var(--st-semantic-data-category1); }
  .st-forceGraph__node--category2 .st-forceGraph__dot { fill: var(--st-semantic-data-category2); }
  .st-forceGraph__node--category3 .st-forceGraph__dot { fill: var(--st-semantic-data-category3); }
  .st-forceGraph__node--category4 .st-forceGraph__dot { fill: var(--st-semantic-data-category4); }
  .st-forceGraph__node--category5 .st-forceGraph__dot { fill: var(--st-semantic-data-category5); }
  .st-forceGraph__node--category6 .st-forceGraph__dot { fill: var(--st-semantic-data-category6); }
  .st-forceGraph__node--category7 .st-forceGraph__dot { fill: var(--st-semantic-data-category7); }
  .st-forceGraph__node--category8 .st-forceGraph__dot { fill: var(--st-semantic-data-category8); }

  .st-forceGraph__tooltip {
    background: var(--st-semantic-surface-inverse);
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse);
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 10px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-forceGraph__tooltipLabel { font-weight: 600; }
  .st-forceGraph__tooltipMeta { opacity: 0.85; }
  .st-forceGraph__tooltipRelation {
    opacity: 0.75;
    font-style: italic;
    font-size: 0.6875rem;
  }

  /* Reset view button */
  .st-forceGraph__resetBtn {
    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.55));
    border: none;
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    opacity: 0.8;
    transition: opacity 120ms ease;
    z-index: 2;
  }

  .st-forceGraph__resetBtn:hover,
  .st-forceGraph__resetBtn:focus-visible {
    opacity: 1;
  }

  .st-forceGraph__resetBtn:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 2px;
  }

  /* Legend overlay */
  .st-forceGraph__legend {
    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse);
    display: flex;
    flex-direction: column;
    font-size: 0.6875rem;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 2;
  }

  .st-forceGraph__legendEntry {
    align-items: center;
    display: flex;
    gap: 0.375rem;
  }

  .st-forceGraph__legendSwatch {
    flex-shrink: 0;
  }

  .st-forceGraph__legendLabel {
    white-space: nowrap;
  }

  .st-forceGraph__legendShape {
    fill-opacity: 0.9;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1;
  }

  .st-forceGraph__legendShape--category1 { fill: var(--st-semantic-data-category1); }
  .st-forceGraph__legendShape--category2 { fill: var(--st-semantic-data-category2); }
  .st-forceGraph__legendShape--category3 { fill: var(--st-semantic-data-category3); }
  .st-forceGraph__legendShape--category4 { fill: var(--st-semantic-data-category4); }
  .st-forceGraph__legendShape--category5 { fill: var(--st-semantic-data-category5); }
  .st-forceGraph__legendShape--category6 { fill: var(--st-semantic-data-category6); }
  .st-forceGraph__legendShape--category7 { fill: var(--st-semantic-data-category7); }
  .st-forceGraph__legendShape--category8 { fill: var(--st-semantic-data-category8); }

  .st-forceGraph__legendEdge {
    stroke: var(--st-semantic-border-strong, #888);
    stroke-width: 1.5;
    opacity: 0.8;
  }

  .st-forceGraph__legendEdge--weak {
    stroke: var(--st-semantic-border-subtle, #aaa);
    stroke-dasharray: 3 3;
    opacity: 0.65;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-forceGraph__node,
    .st-forceGraph__dot,
    .st-forceGraph__edge,
    .st-forceGraph__resetBtn { transition: none; }
  }

.st-graphLegend {
    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse);
    display: inline-flex;
    flex-direction: column;
    font-size: 0.6875rem;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
  }

  .st-graphLegend__title {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.125rem;
    opacity: 0.75;
    text-transform: uppercase;
  }

  .st-graphLegend__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-graphLegend__entry {
    align-items: center;
    display: flex;
    gap: 0.375rem;
  }

  .st-graphLegend__swatch { flex-shrink: 0; }

  .st-graphLegend__label { white-space: nowrap; }

  .st-graphLegend__shape {
    fill-opacity: 0.9;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1;
  }

  .st-graphLegend__shape--category1 { fill: var(--st-semantic-data-category1); }
  .st-graphLegend__shape--category2 { fill: var(--st-semantic-data-category2); }
  .st-graphLegend__shape--category3 { fill: var(--st-semantic-data-category3); }
  .st-graphLegend__shape--category4 { fill: var(--st-semantic-data-category4); }
  .st-graphLegend__shape--category5 { fill: var(--st-semantic-data-category5); }
  .st-graphLegend__shape--category6 { fill: var(--st-semantic-data-category6); }
  .st-graphLegend__shape--category7 { fill: var(--st-semantic-data-category7); }
  .st-graphLegend__shape--category8 { fill: var(--st-semantic-data-category8); }

  .st-graphLegend__edge {
    stroke: var(--st-semantic-border-strong, #888);
    stroke-width: 1.5;
    opacity: 0.8;
  }

  .st-graphLegend__edge--weak {
    stroke: var(--st-semantic-border-subtle, #aaa);
    stroke-dasharray: 3 3;
    opacity: 0.65;
  }

.st-form {
    display: grid;
    gap: var(--st-component-form-gap, 1rem);
    width: 100%;
  }

  .st-form__body {
    display: grid;
    gap: var(--st-component-form-fieldGap, 1rem);
  }

  .st-form__message {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0;
  }

  .st-form__message--help {
    color: var(--st-component-form-helpText, var(--st-semantic-text-secondary));
  }

  .st-form__message--error {
    color: var(--st-component-form-errorText, var(--st-semantic-feedback-error));
  }

  .st-form__message--success {
    color: var(--st-component-form-successText, var(--st-semantic-feedback-success));
  }

.st-form-group {
    border: 1px solid
      var(--st-component-formGroup-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-formGroup-radius, 0.5rem);
    color: var(--st-semantic-text-primary);
    display: grid;
    gap: var(--st-component-formGroup-gap, 1rem);
    margin: 0;
    padding: var(--st-component-formGroup-padding, 1rem);
  }

  .st-form-group__legend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 0.25rem;
  }

  .st-form-group__body {
    display: grid;
    gap: var(--st-component-formGroup-fieldGap, 1rem);
  }

  .st-form-group__help {
    color: var(
      --st-component-formGroup-helpText,
      var(--st-semantic-text-secondary)
    );
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0;
  }

  .st-form-group:disabled {
    opacity: 0.6;
  }

.st-header {
    align-items: center;
    background: var(--st-component-header-background, var(--st-semantic-surface-default));
    border-bottom: 1px solid var(--st-component-header-border, var(--st-semantic-border-subtle));
    box-shadow: var(--st-component-header-shadow, 0 1px 3px rgb(15 23 42 / 0.06));
    color: var(--st-component-header-text, var(--st-semantic-text-primary));
    display: flex;
    gap: var(--st-spacing-4, 1rem);
    height: var(--st-component-header-height, 3.5rem);
    padding: 0 var(--st-spacing-4, 1rem);
    width: 100%;
    z-index: var(--st-component-header-zIndex, 70);
  }

  .st-header--sticky {
    position: sticky;
    top: 0;
  }

  .st-header__leading {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--st-spacing-3, 0.75rem);
  }

  .st-header__logo {
    align-items: center;
    color: var(--st-component-header-logoText, var(--st-semantic-text-primary));
    display: inline-flex;
  }

  .st-header__title {
    color: var(--st-component-header-titleText, var(--st-semantic-text-primary));
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1.2;
  }

  .st-header__navigation {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  .st-header__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--st-spacing-2, 0.5rem);
    margin-left: auto;
  }

  

  
  .st-header__account {
    position: relative;
  }

  .st-header__account-trigger {
    align-items: center;
    background: transparent;
    border: 1px solid var(--st-component-header-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-radius-sm, 0.375rem);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: var(--st-spacing-2, 0.5rem);
    max-width: 18rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
  }

  .st-header__account-trigger:hover,
  .st-header__account-trigger:focus-visible {
    border-color: var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
    outline: none;
  }

  .st-header__avatar {
    aspect-ratio: 1;
    border-radius: var(--st-radius-sm, 0.375rem);
    flex: 0 0 auto;
    height: 2rem;
    overflow: hidden;
    width: 2rem;
  }

  .st-header__avatar--initials {
    align-items: center;
    background: var(--st-semantic-surface-subtle, #eef2f7);
    color: var(--st-semantic-text-primary, #0f172a);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.01em;
  }

  .st-header__avatar-image {
    background: var(--st-semantic-surface-subtle, #eef2f7);
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }

  .st-header__account-meta {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    text-align: left;
  }

  .st-header__account-name {
    color: var(--st-semantic-text-primary, #0f172a);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st-header__account-email {
    color: var(--st-semantic-text-secondary, #64748b);
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st-header__account-caret {
    color: var(--st-semantic-text-secondary, #64748b);
    flex: 0 0 auto;
  }

  .st-header__account-menu {
    background: var(--st-component-popover-background, var(--st-semantic-surface-raised, #ffffff));
    border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle, #e2e8f0));
    border-radius: var(--st-component-popover-radius, 0.5rem);
    box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-semantic-text-primary, #0f172a);
    display: grid;
    gap: 0.35rem;
    min-width: 14rem;
    padding: var(--st-spacing-3, 0.75rem);
    position: absolute;
    right: 0;
    top: calc(100% + var(--st-spacing-2, 0.5rem));
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-header__signin {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm, 0.375rem);
    color: var(--st-semantic-text-link, var(--st-semantic-action-primary));
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 2.25rem;
    padding: 0 0.875rem;
  }

  .st-header__signin:hover,
  .st-header__signin:focus-visible {
    background: var(--st-semantic-surface-subtle, #f1f5f9);
    outline: none;
  }

.st-highlight {
    --st-highlight-accent: var(--st-semantic-action-primary);
    background: var(--st-semantic-surface-subtle);
    border-left: 4px solid var(--st-highlight-accent);
    /* Accent latéral fort = coins carrés. Ne pas arrondir une carte/exergue à liseré. */
    border-radius: 0;
    color: var(--st-semantic-text-primary);
    padding: var(--st-spacing-4, 1rem);
  }

  .st-highlight--info { --st-highlight-accent: var(--st-semantic-feedback-info); }
  .st-highlight--success { --st-highlight-accent: var(--st-semantic-feedback-success); }
  .st-highlight--warning { --st-highlight-accent: var(--st-semantic-feedback-warning); }
  .st-highlight--error { --st-highlight-accent: var(--st-semantic-feedback-error); }

  .st-highlight__title {
    font-size: 0.9375rem;
    font-weight: 650;
    margin: 0 0 var(--st-spacing-2, 0.5rem);
  }

  .st-highlight__body {
    color: var(--st-semantic-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .st-highlight__body p { margin: 0; }

.st-iconButton {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--st-component-iconButton-radius, 0.375rem);
    color: var(--st-component-iconButton-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    justify-content: center;
    padding: 0;
    transition:
      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-iconButton--sm {
    height: var(--st-component-iconButton-smSize, 2rem);
    width: var(--st-component-iconButton-smSize, 2rem);
  }

  .st-iconButton--md {
    height: var(--st-component-iconButton-mdSize, 2.25rem);
    width: var(--st-component-iconButton-mdSize, 2.25rem);
  }

  .st-iconButton--lg {
    height: var(--st-component-iconButton-lgSize, 2.5rem);
    width: var(--st-component-iconButton-lgSize, 2.5rem);
  }

  .st-iconButton--secondary {
    background: var(--st-component-control-background, var(--st-semantic-surface-default));
    border-color: var(--st-component-control-border, var(--st-semantic-border-subtle));
  }

  .st-iconButton--danger {
    color: var(--st-semantic-feedback-error, #b91c1c);
  }

  .st-iconButton:hover:not(:disabled) {
    background: var(--st-component-iconButton-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-iconButton--secondary:hover:not(:disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-iconButton:focus-visible {
    border-color: var(--st-component-iconButton-focusRing, var(--st-semantic-border-interactive));
    box-shadow: 0 0 0 2px var(--st-component-iconButton-focusRing, var(--st-semantic-border-interactive));
    outline: none;
  }

  .st-iconButton:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

.st-inlineLoading {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    font-size: 0.875rem;
    gap: 0.5rem;
  }

  .st-inlineLoading__icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .st-inlineLoading__spinner {
    align-items: center;
    animation: st-inlineLoading-spin 0.9s linear infinite;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
  }

  .st-inlineLoading--active .st-inlineLoading__icon {
    color: var(--st-semantic-action-primary);
  }

  .st-inlineLoading--success {
    color: var(--st-semantic-feedback-success);
  }

  .st-inlineLoading--error {
    color: var(--st-semantic-feedback-error);
  }

  .st-inlineLoading--inactive {
    color: var(--st-semantic-text-muted);
  }

  @keyframes st-inlineLoading-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-inlineLoading__spinner {
      animation: none;
    }
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  .st-control {
    
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    
    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    
    box-shadow: var(--st-component-control-anatomy-field-underline, none);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    font-family: var(--st-component-control-anatomy-typography-family, inherit);
    font-size: var(--st-component-control-anatomy-typography-size, inherit);
    font-weight: var(--st-component-control-anatomy-typography-weight, 400);
    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
    min-width: 0;
    
    padding: var(--st-component-control-anatomy-density-md-paddingBlock, 0)
      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
    cursor: var(--st-cursor-text, text);
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-control--sm {
    min-height: var(--st-component-control-anatomy-density-sm-controlHeight, var(--st-component-control-smHeight, 2rem));
    font-size: 0.8125rem;
  }

  .st-control--md {
    min-height: var(--st-component-control-anatomy-density-md-controlHeight, var(--st-component-control-mdHeight, 2.5rem));
    font-size: 0.875rem;
  }

  .st-control--lg {
    min-height: var(--st-component-control-anatomy-density-lg-controlHeight, var(--st-component-control-lgHeight, 3rem));
    font-size: 1rem;
  }

  .st-control::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-control:hover:not(:disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  
  .st-control:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
      var(--st-component-control-anatomy-focus-boxShadow,
        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
  }

  .st-control[aria-invalid="true"] {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-control:disabled {
    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: var(--st-cursor-disabled, not-allowed);
  }

.st-languageSelector {
    display: inline-block;
    position: relative;
  }

  .st-languageSelector__trigger {
    align-items: center;
    background: var(--st-component-control-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-radius-md, 0.375rem);
    color: var(--st-semantic-text-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.85rem;
    gap: var(--st-spacing-2, 0.5rem);
    padding: 0.35rem 0.6rem;
  }

  .st-languageSelector__trigger:hover:not(:disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-languageSelector__trigger:focus-visible {
    border-color: var(--st-semantic-border-interactive);
    box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
    outline: none;
  }

  .st-languageSelector__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .st-languageSelector__caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    display: inline-block;
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-languageSelector__caret--open {
    transform: rotate(180deg);
  }

  .st-languageSelector__menu {
    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-radius-md, 0.375rem);
    box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    list-style: none;
    margin: 0.25rem 0 0;
    min-width: 9rem;
    padding: 0.25rem;
    position: absolute;
    right: 0;
    z-index: var(--st-zindex-overlay, 80);
  }

  .st-languageSelector__option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 0.85rem;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    text-align: left;
    width: 100%;
  }

  .st-languageSelector__option:hover {
    background: var(--st-semantic-surface-subtle);
    color: var(--st-semantic-text-primary);
  }

  .st-languageSelector__option--active {
    color: var(--st-semantic-action-primary);
    font-weight: 600;
  }

  .st-languageSelector__check {
    display: inline-flex;
    justify-content: center;
    width: 0.75rem;
  }

.st-lineChart {
    color: var(--st-semantic-data-category1);
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-lineChart--category1 { color: var(--st-semantic-data-category1); }
  .st-lineChart--category2 { color: var(--st-semantic-data-category2); }
  .st-lineChart--category3 { color: var(--st-semantic-data-category3); }
  .st-lineChart--category4 { color: var(--st-semantic-data-category4); }
  .st-lineChart--category5 { color: var(--st-semantic-data-category5); }
  .st-lineChart--category6 { color: var(--st-semantic-data-category6); }
  .st-lineChart--category7 { color: var(--st-semantic-data-category7); }
  .st-lineChart--category8 { color: var(--st-semantic-data-category8); }

  .st-lineChart svg {
    display: block;
    overflow: visible;
  }

  .st-lineChart__visual {
    display: block;
    position: relative;
  }

  .st-lineChart__grid {
    stroke: var(--st-component-lineChart-gridStroke, var(--st-semantic-border-subtle));
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0.7;
  }

  .st-lineChart__axis {
    stroke: var(--st-component-lineChart-axisStroke, var(--st-semantic-border-subtle));
    stroke-width: 1;
  }

  .st-lineChart__tickLabel {
    fill: var(--st-component-lineChart-labelColor, var(--st-semantic-text-secondary));
    font-size: 0.6875rem;
  }

  .st-lineChart__line {
    stroke: currentColor;
  }

  /* Forecast segment — dashed, dedicated tokenized tone (palette purple),
     mirrors the dataviz ForecastLineChart fallback (dasharray 5 4). */
  .st-lineChart__line--forecast {
    stroke: var(--st-component-lineChart-forecastStroke, var(--st-semantic-data-category7));
    stroke-dasharray: 5 4;
  }

  .st-lineChart__area {
    fill: currentColor;
    opacity: 0.18;
    stroke: none;
  }

  .st-lineChart__dot {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
    cursor: pointer;
    transition: r 120ms ease;
  }

  .st-lineChart__dot:hover,
  .st-lineChart__dot:focus-visible {
    r: 5.5;
  }

  .st-lineChart__dot:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  .st-lineChart__dot--forecast {
    fill: var(--st-component-lineChart-forecastStroke, var(--st-semantic-data-category7));
  }

  @media (prefers-reduced-motion: reduce) {
    .st-lineChart__dot {
      transition: none;
    }
  }

  .st-lineChart__tooltip {
    background: var(--st-component-lineChart-tooltipBackground, var(--st-semantic-surface-inverse));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-lineChart-tooltipText, var(--st-semantic-text-inverse));
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-lineChart__tooltipLabel {
    font-weight: 600;
  }

  .st-lineChart__tooltipValue {
    opacity: 0.85;
  }

  /* --- Analytical overlay layer --------------------------------------------
     Bands sit BELOW the data via render order; their fill uses color-mix (a
     semi-transparent tint of the tone token) rather than raw opacity, so the
     data series drawn on top keeps full contrast. */
  .st-lineChart__band {
    fill: color-mix(in srgb, var(--st-overlay-tone, var(--st-semantic-border-strong)) 12%, transparent);
    stroke: none;
  }
  .st-lineChart__band--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
  .st-lineChart__band--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
  .st-lineChart__band--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
  .st-lineChart__band--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
  .st-lineChart__band--info { --st-overlay-tone: var(--st-semantic-feedback-info); }

  .st-lineChart__refLine {
    stroke: var(--st-overlay-tone, var(--st-semantic-border-strong));
    stroke-width: 1;
    stroke-dasharray: 4 3;
  }
  .st-lineChart__refLine--neutral { --st-overlay-tone: var(--st-semantic-border-strong); }
  .st-lineChart__refLine--success { --st-overlay-tone: var(--st-semantic-feedback-success); }
  .st-lineChart__refLine--warning { --st-overlay-tone: var(--st-semantic-feedback-warning); }
  .st-lineChart__refLine--error { --st-overlay-tone: var(--st-semantic-feedback-error); }
  .st-lineChart__refLine--info { --st-overlay-tone: var(--st-semantic-feedback-info); }

  .st-lineChart__overlayLabel {
    fill: var(--st-semantic-text-secondary);
    font-size: 0.625rem;
  }

  .st-lineChart__trend {
    stroke: var(--st-semantic-text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.85;
  }

  /* Goal line — drawn ABOVE the data, emphasised (thicker, solid accent). */
  .st-lineChart__goalLine {
    stroke: var(--st-semantic-feedback-success);
    stroke-width: 2.5;
  }
  .st-lineChart__goalLabel {
    fill: var(--st-semantic-feedback-success);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Annotation layer ----------------------------------------------------
     Regions render BEHIND the series (color-mix tint, never raw opacity so the
     data keeps contrast); lines/shapes/points/labels render ABOVE. */
  .st-lineChart__annotationRegion {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
    stroke: none;
  }
  .st-lineChart__annotationLine {
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
  }
  .st-lineChart__annotationShape {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
  }
  .st-lineChart__annotationPoint {
    fill: var(--st-semantic-feedback-info);
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
  }
  .st-lineChart__annotationLabel,
  .st-lineChart__annotationText {
    fill: var(--st-semantic-text-primary);
    font-size: 0.625rem;
    font-weight: 600;
  }

  /* Data labels — per-point value, drawn on top. Token-only colour. */
  .st-lineChart__dataLabel {
    fill: var(--st-semantic-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Crosshair layer (FR-3) ----------------------------------------------
     A tokenised dashed vertical line at the active (hovered/controlled) key,
     plus an emphasised marker on the point. Decorative (aria-hidden). */
  .st-lineChart__crosshairLine {
    stroke: var(--st-semantic-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
  }
  .st-lineChart__crosshairMarker {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 2;
  }

  /* --- Keyboard navigation layer (FR-5) ------------------------------------
     A focusable, transparent overlay of one hit-rect per point. Carries the
     roving tab stop; the focus ring is tokenised (border-interactive). */
  .st-lineChart__navLayer {
    inset: 0;
    position: absolute;
  }
  .st-lineChart__navDatum {
    fill: transparent;
    outline: none;
  }
  .st-lineChart__navDatum:focus-visible {
    fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

.st-link {
    color: var(--st-component-link-text, var(--st-semantic-text-link));
    cursor: var(--st-cursor-interactive, pointer);
    
    font-size: var(--st-component-link-anatomy-typography-size, inherit);
    line-height: var(--st-component-link-anatomy-typography-lineHeight, normal);
    letter-spacing: var(--st-component-link-anatomy-typography-letterSpacing, normal);
    text-decoration: var(--st-component-link-anatomy-typography-textDecoration, underline);
    text-decoration-thickness: var(--st-component-link-anatomy-typography-decorationThickness, auto);
    text-underline-offset: var(--st-component-link-anatomy-typography-decorationOffset, 0.18em);
  }

  .st-link--standalone {
    display: inline-flex;
    font-weight: 600;
    gap: var(--st-spacing-1, 0.25rem);
  }

  .st-link--muted {
    color: var(--st-semantic-text-secondary);
  }

  .st-link:hover {
    color: var(--st-component-link-anatomy-states-hover-text, var(--st-component-link-hoverText, var(--st-semantic-action-primary)));
    
    text-decoration-line: var(--st-component-link-anatomy-states-hover-decoration, underline);
  }

  
  .st-link:focus-visible {
    border-radius: var(--st-component-link-anatomy-shape-radius, var(--st-radius-sm, 0.25rem));
    outline: var(--st-component-link-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
    outline-offset: var(--st-component-link-anatomy-focus-offset, 2px);
    box-shadow: var(--st-component-link-anatomy-focus-boxShadow, none);
  }

  .st-link--disabled {
    color: var(--st-component-link-anatomy-states-disabled-text, var(--st-component-link-disabledText, var(--st-semantic-text-muted)));
    cursor: var(--st-cursor-disabled, not-allowed);
    text-decoration: var(--st-component-link-anatomy-states-disabled-decoration, none);
  }

.st-loading {
    align-items: center;
    color: var(--st-component-loadingState-text, var(--st-semantic-text-secondary));
    display: inline-flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-loading__spinner {
    animation: st-loading-spin 800ms linear infinite;
    border: 2px solid var(--st-component-loadingState-track, var(--st-semantic-surface-subtle));
    border-radius: var(--st-component-loadingState-radius, 9999px);
    border-top-color: var(--st-component-loadingState-indicator, var(--st-semantic-action-primary));
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
  }

  .st-loading__skeleton {
    background: linear-gradient(
      90deg,
      var(--st-component-loadingState-track, var(--st-semantic-surface-subtle)),
      var(--st-component-loadingState-indicator, var(--st-semantic-action-primary)),
      var(--st-component-loadingState-track, var(--st-semantic-surface-subtle))
    );
    background-size: 200% 100%;
    border-radius: var(--st-component-loadingState-radius, 9999px);
    display: inline-block;
    height: 0.75rem;
    width: 8rem;
  }

  .st-loading--skeleton .st-loading__skeleton {
    animation: st-loading-skeleton 1200ms ease-in-out infinite;
  }

  .st-loading__label {
    font-size: 0.875rem;
  }

  @keyframes st-loading-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes st-loading-skeleton {
    to {
      background-position: -200% 0;
    }
  }

.st-menu {
    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-menu-radius, 0.375rem);
    box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    color: var(--st-component-menu-text, var(--st-semantic-text-primary));
    display: grid;
    min-width: var(--st-component-menu-minWidth, 12rem);
    max-width: var(--st-component-menu-maxWidth, 18rem);
    padding: var(--st-spacing-1, 0.25rem);
  }

  .st-menu__item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--st-radius-small, 0.375rem);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--st-spacing-2, 0.5rem);
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    text-align: left;
    width: 100%;
  }

  .st-menu--dense .st-menu__item {
    padding: 0.3rem 0.6rem;
  }

  .st-menu__item:hover:not(:disabled),
  .st-menu__item:focus-visible {
    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
    outline: none;
  }

  .st-menu__item:disabled {
    color: var(--st-component-menu-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-menu__item--danger {
    color: var(--st-component-menu-dangerText, var(--st-semantic-feedback-error, #b91c1c));
  }

  .st-menu__item--danger:hover:not(:disabled),
  .st-menu__item--danger:focus-visible {
    background: var(--st-component-menu-dangerHoverBackground, rgba(185, 28, 28, 0.08));
  }

  .st-menu__itemIcon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
  }

  .st-menu__itemLabel {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st-menu__divider {
    background: var(--st-component-menu-border, var(--st-semantic-border-subtle));
    height: 1px;
    margin: 0.25rem 0;
  }

  .st-menu__group {
    color: var(--st-component-menu-groupText, var(--st-semantic-text-muted));
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.75rem 0.25rem;
    text-transform: uppercase;
  }

.st-menuPopover {
    background: var(--st-component-menu-background, var(--st-semantic-surface-raised, #ffffff));
    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-menu-radius, 0.375rem);
    box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    color: var(--st-component-menu-text, var(--st-semantic-text-primary));
    min-width: var(--st-component-menu-minWidth, 12rem);
    max-width: var(--st-component-menu-maxWidth, 18rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 0;
    position: absolute;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  
  .st-menuPopover--alignEnd {
    
    transform: translateX(-100%);
  }

  .st-menuPopover--alignCenter {
    transform: translateX(-50%);
  }

  
  .st-menuPopover--top-start {
    transform: translateY(-100%);
  }

  .st-menuPopover--top-end {
    transform: translate(-100%, -100%);
  }

  .st-menuPopover--top-start.st-menuPopover--alignEnd {
    transform: translate(-100%, -100%);
  }

  .st-menuPopover--top-start.st-menuPopover--alignCenter {
    transform: translate(-50%, -100%);
  }

  .st-menuPopover--top-end.st-menuPopover--alignCenter {
    transform: translate(-50%, -100%);
  }

.st-messageActions {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
  }

  .st-messageActions--hoverOnly {
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-messageActions--hoverOnly:focus-within,
  .st-messageActions--hoverOnly:hover {
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-messageActions--hoverOnly {
      transition: none;
    }
  }

  .st-messageActions__overflow {
    align-items: center;
    display: inline-flex;
  }

.st-messageStatusBadge {
    align-items: center;
    text-transform: none;
  }

  .st-messageStatusBadge__dot {
    background: currentColor;
    border-radius: 999px;
    display: inline-block;
    height: 0.38rem;
    width: 0.38rem;
  }

.st-modal__backdrop {
    align-items: center;
    background: var(--st-component-overlay-backdrop, var(--st-semantic-surface-overlay));
    display: grid;
    inset: 0;
    justify-items: center;
    padding: var(--st-spacing-4, 1rem);
    position: fixed;
    z-index: var(--st-component-overlay-zIndex, 90);
  }

  .st-modal {
    background: var(--st-component-overlay-surface, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-overlay-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-overlay-radius, 0.5rem);
    box-shadow: var(--st-component-overlay-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-semantic-text-primary);
    display: grid;
    gap: var(--st-spacing-4, 1rem);
    max-height: min(42rem, calc(100vh - 2rem));
    max-width: 36rem;
    overflow: auto;
    padding: var(--st-spacing-4, 1rem);
    width: min(100%, 36rem);
  }

  .st-modal__header {
    align-items: start;
    display: flex;
    gap: var(--st-spacing-4, 1rem);
    justify-content: space-between;
  }

  .st-modal__title {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
  }

  .st-modal__description {
    color: var(--st-semantic-text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0 0;
  }

  .st-modal__close {
    align-items: center;
    background: transparent;
    border: 1px solid var(--st-semantic-border-subtle);
    border-radius: var(--st-radius-small, 0.375rem);
    color: var(--st-semantic-text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
  }

  .st-modal__body {
    line-height: 1.5;
  }

  .st-modal__footer {
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
    justify-content: flex-end;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
    position: relative;
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  .st-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .st-multiSelect {
    display: inline-flex;
    width: 100%;
  }

  .st-multiSelect--sm .st-multiSelect__trigger {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-multiSelect--md .st-multiSelect__trigger {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-multiSelect--lg .st-multiSelect__trigger {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }


  .st-multiSelect__trigger {
    align-items: center;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    font: inherit;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-multiSelect__trigger:hover:not(:disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-multiSelect__trigger:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-multiSelect[data-invalid="true"] .st-multiSelect__trigger {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-multiSelect__trigger:disabled {
    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-multiSelect__placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
    flex: 1 1 auto;
    text-align: start;
  }

  .st-multiSelect__count {
    color: var(--st-semantic-text-secondary);
    flex: 1 1 auto;
    font-size: 0.875rem;
    text-align: start;
  }

  .st-multiSelect__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .st-multiSelect__tag {
    align-items: center;
    background: var(--st-semantic-surface-subtle);
    border-radius: var(--st-radius-pill, 999px);
    color: var(--st-semantic-text-primary);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
  }

  .st-multiSelect__tagLabel {
    line-height: 1;
  }

  .st-multiSelect__tagRemove {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1em;
    height: 1.25em;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.25em;
  }

  .st-multiSelect__tagRemove:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 18%, transparent);
  }

  .st-multiSelect__tagRemove:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }

  .st-multiSelect__caret {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding-inline-start: 0.25rem;
  }

  .st-multiSelect__caretIcon {
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-multiSelect__caretIcon--open {
    transform: rotate(180deg);
  }

  .st-multiSelect__panel {
    background: var(--st-component-dropdown-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dropdown-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-dropdown-radius, 0.375rem);
    box-shadow: var(--st-component-dropdown-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    display: grid;
    left: 0;
    margin-top: var(--st-spacing-1, 0.25rem);
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-multiSelect__search {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    color: inherit;
    font: inherit;
    padding: 0.5rem 0.75rem;
    width: 100%;
  }

  .st-multiSelect__search:focus {
    outline: none;
  }

  .st-multiSelect__list {
    display: grid;
    max-height: 14rem;
    overflow-y: auto;
  }

  .st-multiSelect__empty {
    color: var(--st-semantic-text-muted);
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  }

  .st-multiSelect__option {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--st-component-dropdown-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.5rem;
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    text-align: left;
  }

  .st-multiSelect__option:hover:not(:disabled),
  .st-multiSelect__option:focus-visible {
    background: var(
      --st-component-dropdown-optionHoverBackground,
      var(--st-semantic-surface-subtle)
    );
    outline: none;
  }

  .st-multiSelect__option[aria-selected="true"] {
    background: color-mix(in srgb, var(--st-semantic-action-primary) 12%, transparent);
  }

  .st-multiSelect__option:disabled {
    color: var(--st-semantic-text-muted);
    cursor: not-allowed;
  }

  .st-multiSelect__check {
    color: var(--st-semantic-action-primary);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    width: 1rem;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-numberInput {
    align-items: stretch;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: inline-flex;
    overflow: hidden;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-numberInput--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-numberInput--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-numberInput--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-numberInput:hover:not(:has(input:disabled)) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-numberInput:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-numberInput:has([aria-invalid="true"]) {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-numberInput__control {
    background: transparent;
    border: 0;
    color: inherit;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    padding: 0 0.75rem;
    text-align: right;
    width: 100%;
  }

  .st-numberInput__control:focus {
    outline: none;
  }

  .st-numberInput__control::-webkit-inner-spin-button,
  .st-numberInput__control::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .st-numberInput__control[type="number"] {
    -moz-appearance: textfield;
  }

  .st-numberInput__control:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-numberInput__buttons {
    border-left: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
    display: inline-flex;
    flex: 0 0 auto;
  }

  .st-numberInput__button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.125rem;
    justify-content: center;
    line-height: 1;
    min-width: 2.25rem;
    padding: 0 0.5rem;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-numberInput__button + .st-numberInput__button {
    border-left: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
  }

  .st-numberInput__button:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-numberInput__button:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-numberInput__button:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

.st-orderedList {
    color: var(--st-semantic-text-primary);
    counter-reset: st-ol;
    display: grid;
    gap: var(--st-spacing-1, 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-orderedList--nested {
    margin-block-start: var(--st-spacing-1, 0.25rem);
    margin-inline-start: var(--st-spacing-4, 1rem);
  }

  .st-orderedList__item {
    counter-increment: st-ol;
    line-height: 1.5;
    padding-inline-start: var(--st-spacing-8, 2rem);
    position: relative;
  }

  .st-orderedList__item::before {
    color: var(--st-semantic-text-secondary);
    content: counter(st-ol) ".";
    font-variant-numeric: tabular-nums;
    inset-inline-start: 0;
    position: absolute;
    text-align: end;
    width: var(--st-spacing-6, 1.5rem);
  }

.st-overflowMenu {
    display: inline-block;
    position: relative;
  }

  .st-overflowMenu__trigger {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--st-component-overflowMenu-triggerRadius, var(--st-radius-small, 0.375rem));
    color: var(--st-component-overflowMenu-triggerText, var(--st-semantic-text-primary));
    cursor: pointer;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
  }

  .st-overflowMenu__trigger:hover {
    background: var(
      --st-component-overflowMenu-triggerHoverBackground,
      var(--st-semantic-surface-subtle)
    );
  }

  
  .st-overflowMenu__trigger:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-overflowMenu__trigger[aria-expanded="true"] {
    background: var(
      --st-component-overflowMenu-triggerHoverBackground,
      var(--st-semantic-surface-subtle)
    );
  }

  .st-overflowMenu__list {
    background: var(--st-component-menu-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-menu-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-menu-radius, 0.375rem);
    box-shadow: var(--st-component-menu-shadow, 0 8px 24px rgb(15 23 42 / 0.14));
    display: grid;
    list-style: none;
    margin: 0;
    min-width: var(--st-component-menu-minWidth, 12rem);
    max-width: var(--st-component-menu-maxWidth, 18rem);
    padding: var(--st-spacing-1, 0.25rem);
    position: absolute;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-overflowMenu--bottom-end .st-overflowMenu__list {
    right: 0;
    top: calc(100% + var(--st-spacing-1, 0.25rem));
  }

  .st-overflowMenu--bottom-start .st-overflowMenu__list {
    left: 0;
    top: calc(100% + var(--st-spacing-1, 0.25rem));
  }

  .st-overflowMenu--top-end .st-overflowMenu__list {
    bottom: calc(100% + var(--st-spacing-1, 0.25rem));
    right: 0;
  }

  .st-overflowMenu--top-start .st-overflowMenu__list {
    bottom: calc(100% + var(--st-spacing-1, 0.25rem));
    left: 0;
  }

  .st-overflowMenu__listItem {
    margin: 0;
    padding: 0;
  }

  .st-overflowMenu__item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--st-radius-small, 0.375rem);
    color: var(--st-component-menu-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: var(--st-spacing-2, 0.5rem);
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
    text-align: left;
    width: 100%;
  }

  .st-overflowMenu--dense .st-overflowMenu__item {
    padding: 0.3rem 0.6rem;
  }

  .st-overflowMenu__item:hover:not(:disabled),
  .st-overflowMenu__item:focus-visible {
    background: var(--st-component-menu-itemHoverBackground, var(--st-semantic-surface-subtle));
    outline: none;
  }

  .st-overflowMenu__item:disabled {
    color: var(--st-component-menu-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-overflowMenu__item--danger {
    color: var(--st-component-overflowMenu-dangerText, var(--st-semantic-feedback-error));
  }

  .st-overflowMenu__item--danger:hover:not(:disabled),
  .st-overflowMenu__item--danger:focus-visible {
    background: var(
      --st-component-overflowMenu-dangerHoverBackground,
      var(--st-semantic-feedback-error)
    );
    color: var(--st-component-overflowMenu-dangerHoverText, var(--st-semantic-action-primaryText));
  }

  .st-overflowMenu__itemIcon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
  }

  .st-overflowMenu__itemLabel {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .st-overflowMenu__divider {
    background: var(--st-component-menu-border, var(--st-semantic-border-subtle));
    height: 1px;
    list-style: none;
    margin: 0.25rem 0;
  }

  .st-overflowMenu__group {
    color: var(--st-component-menu-groupText, var(--st-semantic-text-muted));
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.75rem 0.25rem;
    text-transform: uppercase;
    list-style: none;
  }

.st-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-pagination button {
    background: var(--st-component-pagination-background, var(--st-semantic-surface-default));
    border: var(--st-component-pagination-borderWidth, 1px) solid
      var(--st-component-pagination-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-pagination-radius, 0.375rem);
    color: var(--st-component-pagination-text, var(--st-semantic-text-primary));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--st-component-pagination-fontSize, inherit);
    line-height: var(--st-component-pagination-lineHeight, normal);
    letter-spacing: var(--st-component-pagination-letterSpacing, normal);
    min-height: var(--st-component-pagination-minSize, 2.25rem);
    min-width: var(--st-component-pagination-minSize, 2.25rem);
    padding: var(--st-component-pagination-paddingBlock, 0)
      var(--st-component-pagination-paddingInline, 0.75rem);
  }

  
  .st-pagination button.st-pagination__page--active {
    background: var(--st-component-pagination-activeBackground, var(--st-semantic-action-primary));
    border-color: var(
      --st-component-pagination-activeBorder,
      var(--st-component-pagination-border, var(--st-semantic-border-subtle))
    );
    border-width: var(
      --st-component-pagination-activeBorderWidth,
      var(--st-component-pagination-borderWidth, 1px)
    );
    color: var(--st-component-pagination-activeText, var(--st-semantic-action-primaryText));
    font-weight: var(--st-component-pagination-activeWeight, inherit);
  }

  .st-pagination button:disabled {
    color: var(--st-component-pagination-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
    opacity: 0.65;
  }

.st-paginationNav {
    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
    display: inline-block;
  }

  .st-paginationNav__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-1, 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-paginationNav__page,
  .st-paginationNav__nav {
    align-items: center;
    background: var(--st-component-paginationNav-background, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-paginationNav-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-paginationNav-radius, 0.375rem);
    color: var(--st-component-paginationNav-text, var(--st-semantic-text-primary));
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.875rem;
    height: 2.25rem;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 0.5rem;
  }

  .st-paginationNav__page:hover:not(:disabled),
  .st-paginationNav__nav:hover:not(:disabled) {
    background: var(
      --st-component-paginationNav-hoverBackground,
      var(--st-semantic-surface-subtle)
    );
  }

  
  .st-paginationNav__page:focus-visible,
  .st-paginationNav__nav:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-paginationNav__page--active {
    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
    border-color: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
    color: var(--st-component-paginationNav-activeText, var(--st-semantic-action-primaryText));
  }

  .st-paginationNav__page--active:hover {
    background: var(--st-component-paginationNav-activeBackground, var(--st-semantic-action-primary));
  }

  .st-paginationNav__page:disabled,
  .st-paginationNav__nav:disabled {
    color: var(--st-component-paginationNav-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
    opacity: 0.6;
  }

  .st-paginationNav__ellipsis {
    align-items: center;
    color: var(--st-component-paginationNav-ellipsisText, var(--st-semantic-text-muted));
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 0.25rem;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-passwordInput {
    align-items: center;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: inline-flex;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-passwordInput--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-passwordInput--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-passwordInput--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-passwordInput:hover:not(:has(input:disabled)) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-passwordInput:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-passwordInput:has([aria-invalid="true"]) {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-passwordInput__control {
    background: transparent;
    border: 0;
    color: inherit;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    padding: 0 0.75rem;
    width: 100%;
  }

  .st-passwordInput__control:focus {
    outline: none;
  }

  .st-passwordInput__control::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-passwordInput__control:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-passwordInput__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    height: 100%;
    justify-content: center;
    padding: 0 0.625rem;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-passwordInput__toggle:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-passwordInput__toggle:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: -2px;
  }

  .st-passwordInput__toggle:disabled {
    cursor: not-allowed;
  }

.st-popover-host {
    display: inline-block;
    position: relative;
  }

  .st-popover {
    background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-popover-radius, 0.5rem);
    box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-component-popover-text, var(--st-semantic-text-primary));
    min-width: 16rem;
    padding: var(--st-spacing-4, 1rem);
    position: absolute;
    z-index: var(--st-component-popover-zIndex, 80);
  }

  .st-popover--bottom {
    left: 0;
    top: calc(100% + var(--st-spacing-2, 0.5rem));
  }

  .st-popover--top {
    bottom: calc(100% + var(--st-spacing-2, 0.5rem));
    left: 0;
  }

  .st-popover--right {
    left: calc(100% + var(--st-spacing-2, 0.5rem));
    top: 0;
  }

  .st-popover--left {
    right: calc(100% + var(--st-spacing-2, 0.5rem));
    top: 0;
  }

.st-progressBar {
    color: var(--st-semantic-text-primary);
    display: grid;
    gap: 0.375rem;
    width: 100%;
  }

  .st-progressBar__header {
    align-items: baseline;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
  }

  .st-progressBar__label {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .st-progressBar__value {
    color: var(--st-semantic-text-secondary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }

  .st-progressBar__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

  .st-progressBar__track {
    background: var(--st-semantic-surface-subtle);
    border-radius: var(--st-radius-pill, 999px);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .st-progressBar__track--sm {
    height: 0.25rem;
  }

  .st-progressBar__track--md {
    height: 0.5rem;
  }

  .st-progressBar__track--lg {
    height: 0.75rem;
  }

  .st-progressBar__fill {
    background: var(--st-progressBar-color, var(--st-semantic-action-primary));
    border-radius: inherit;
    height: 100%;
    transform-origin: left center;
    transition: width var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: var(--st-progressBar-pct, 0%);
  }

  .st-progressBar__track--neutral .st-progressBar__fill {
    background: var(--st-semantic-action-primary);
  }

  .st-progressBar__track--success .st-progressBar__fill {
    background: var(--st-semantic-feedback-success);
  }

  .st-progressBar__track--warning .st-progressBar__fill {
    background: var(--st-semantic-feedback-warning);
  }

  .st-progressBar__track--error .st-progressBar__fill {
    background: var(--st-semantic-feedback-error);
  }

  .st-progressBar__track--indeterminate .st-progressBar__fill {
    animation: st-progressBar-indeterminate 1.4s ease-in-out infinite;
    width: 30%;
  }

  @keyframes st-progressBar-indeterminate {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(380%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-progressBar__track--indeterminate .st-progressBar__fill {
      animation: none;
      width: 100%;
    }
  }

.st-progressIndicator {
    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-progressIndicator--horizontal {
    align-items: flex-start;
    flex-direction: row;
    gap: 0;
  }

  .st-progressIndicator--vertical {
    flex-direction: column;
    gap: 0;
  }

  .st-progressIndicator__step {
    display: flex;
    flex: 1 1 0;
    gap: var(--st-spacing-2, 0.5rem);
    min-width: 0;
    position: relative;
  }

  .st-progressIndicator--horizontal .st-progressIndicator__step {
    align-items: flex-start;
    flex-direction: column;
  }

  .st-progressIndicator--vertical .st-progressIndicator__step {
    align-items: flex-start;
    flex: 0 0 auto;
    flex-direction: row;
  }

  .st-progressIndicator__indicator {
    align-items: center;
    color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
  }

  .st-progressIndicator--horizontal .st-progressIndicator__indicator {
    flex-direction: row;
    width: 100%;
  }

  .st-progressIndicator--vertical .st-progressIndicator__indicator {
    flex-direction: column;
    min-height: 3rem;
  }

  .st-progressIndicator__circle {
    align-items: center;
    background: var(--st-component-progressIndicator-circleBackground, var(--st-semantic-surface-default));
    border: 1.5px solid
      var(--st-component-progressIndicator-circleBorder, var(--st-semantic-border-strong));
    border-radius: 50%;
    color: var(--st-component-progressIndicator-iconText, var(--st-semantic-text-secondary));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    width: 1.5rem;
    z-index: 1;
  }

  .st-progressIndicator__index {
    line-height: 1;
  }

  .st-progressIndicator__dot {
    background: currentColor;
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
  }

  .st-progressIndicator__connector {
    background: var(--st-component-progressIndicator-connector, var(--st-semantic-border-subtle));
    flex: 1 1 auto;
  }

  .st-progressIndicator--horizontal .st-progressIndicator__connector {
    height: 2px;
    margin-top: calc(0.75rem - 1px);
  }

  .st-progressIndicator--vertical .st-progressIndicator__connector {
    margin-left: calc(0.75rem - 1px);
    min-height: 1.5rem;
    width: 2px;
  }

  .st-progressIndicator__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
  }

  .st-progressIndicator--horizontal .st-progressIndicator__text {
    padding-right: var(--st-spacing-3, 0.75rem);
    padding-top: var(--st-spacing-2, 0.5rem);
  }

  .st-progressIndicator--vertical .st-progressIndicator__text {
    padding-bottom: var(--st-spacing-3, 0.75rem);
  }

  .st-progressIndicator__label {
    color: var(--st-component-progressIndicator-text, var(--st-semantic-text-primary));
    font-size: 0.875rem;
    font-weight: 600;
  }

  .st-progressIndicator__description {
    color: var(--st-component-progressIndicator-descriptionText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

  
  .st-progressIndicator__step--complete .st-progressIndicator__circle {
    background: var(
      --st-component-progressIndicator-completeBackground,
      var(--st-semantic-action-primary)
    );
    border-color: var(
      --st-component-progressIndicator-completeBackground,
      var(--st-semantic-action-primary)
    );
    color: var(--st-component-progressIndicator-completeIcon, var(--st-semantic-action-primaryText));
  }

  .st-progressIndicator__step--complete .st-progressIndicator__connector {
    background: var(
      --st-component-progressIndicator-completeConnector,
      var(--st-semantic-action-primary)
    );
  }

  
  .st-progressIndicator__step--current .st-progressIndicator__circle {
    border-color: var(
      --st-component-progressIndicator-currentBorder,
      var(--st-semantic-action-primary)
    );
    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
  }

  .st-progressIndicator__step--current .st-progressIndicator__label {
    color: var(--st-component-progressIndicator-currentText, var(--st-semantic-action-primary));
  }

  
  .st-progressIndicator__step--invalid .st-progressIndicator__circle {
    border-color: var(
      --st-component-progressIndicator-invalidBorder,
      var(--st-semantic-feedback-error)
    );
    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
  }

  .st-progressIndicator__step--invalid .st-progressIndicator__label {
    color: var(--st-component-progressIndicator-invalidText, var(--st-semantic-feedback-error));
  }

  
  .st-progressIndicator__step--disabled {
    opacity: 0.55;
  }

  .st-progressIndicator__step--disabled .st-progressIndicator__label,
  .st-progressIndicator__step--disabled .st-progressIndicator__description {
    color: var(--st-component-progressIndicator-disabledText, var(--st-semantic-text-muted));
  }

.st-quote {
    border-left: 4px solid var(--st-semantic-action-primary);
    margin: 0;
    padding: var(--st-spacing-2, 0.5rem) 0 var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
  }

  .st-quote__text {
    color: var(--st-semantic-text-primary);
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0;
  }

  .st-quote__attribution {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
    margin-top: var(--st-spacing-2, 0.5rem);
  }

  .st-quote__author {
    font-weight: 600;
  }

  .st-quote__author + .st-quote__source::before {
    content: ", ";
  }

  .st-quote__source {
    font-style: italic;
  }

.st-choice {
    align-items: start;
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    cursor: var(--st-cursor-interactive, pointer);
    display: inline-grid;
    gap: 0.625rem;
    grid-template-columns: auto 1fr;
  }

  .st-choice__input {
    
    accent-color: var(--st-component-selection-checkedBackground, var(--st-semantic-action-primary));
    cursor: inherit;
    height: 1rem;
    margin: 0.125rem 0 0;
    width: 1rem;
  }

  
  .st-choice__input:focus-visible {
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-choice__input[aria-invalid="true"] {
    accent-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
    outline-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-choice__input:disabled {
    cursor: var(--st-cursor-disabled, not-allowed);
    opacity: 0.55;
  }

  .st-choice:has(.st-choice__input:disabled) {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: var(--st-cursor-disabled, not-allowed);
  }

  .st-choice__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-choice__label {
    
    color: var(--st-component-selection-choiceLabelColor, inherit);
    font-size: var(--st-component-selection-choiceLabelFontSize, 0.9375rem);
    line-height: var(--st-component-selection-choiceRadioLineHeight,
      var(--st-component-selection-choiceLabelLineHeight, normal));
    letter-spacing: var(--st-component-selection-choiceLabelLetterSpacing, normal);
  }

  .st-choice__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

.st-scatterPlot { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
  .st-scatterPlot svg { display: block; overflow: visible; }
  .st-scatterPlot__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
  .st-scatterPlot__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
  .st-scatterPlot__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
  .st-scatterPlot__axisLabel { fill: var(--st-semantic-text-secondary); font-size: 0.75rem; font-weight: 600; }
  .st-scatterPlot__point { cursor: pointer; fill-opacity: 0.85; transition: fill-opacity 120ms ease, r 120ms ease; }
  .st-scatterPlot__point:hover, .st-scatterPlot__point:focus-visible { fill-opacity: 1; }
  .st-scatterPlot__point:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 1px; }
  .st-scatterPlot__point--category1 { fill: var(--st-semantic-data-category1); }
  .st-scatterPlot__point--category2 { fill: var(--st-semantic-data-category2); }
  .st-scatterPlot__point--category3 { fill: var(--st-semantic-data-category3); }
  .st-scatterPlot__point--category4 { fill: var(--st-semantic-data-category4); }
  .st-scatterPlot__point--category5 { fill: var(--st-semantic-data-category5); }
  .st-scatterPlot__point--category6 { fill: var(--st-semantic-data-category6); }
  .st-scatterPlot__point--category7 { fill: var(--st-semantic-data-category7); }
  .st-scatterPlot__point--category8 { fill: var(--st-semantic-data-category8); }
  /* Centroid markers — non-interactive ring + cross, toned via currentColor. */
  .st-scatterPlot__centroid { pointer-events: none; }
  .st-scatterPlot__centroidRing { fill: none; stroke: currentColor; stroke-width: 2; }
  .st-scatterPlot__centroidCross { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .st-scatterPlot__centroid--category1 { color: var(--st-semantic-data-category1); }
  .st-scatterPlot__centroid--category2 { color: var(--st-semantic-data-category2); }
  .st-scatterPlot__centroid--category3 { color: var(--st-semantic-data-category3); }
  .st-scatterPlot__centroid--category4 { color: var(--st-semantic-data-category4); }
  .st-scatterPlot__centroid--category5 { color: var(--st-semantic-data-category5); }
  .st-scatterPlot__centroid--category6 { color: var(--st-semantic-data-category6); }
  .st-scatterPlot__centroid--category7 { color: var(--st-semantic-data-category7); }
  .st-scatterPlot__centroid--category8 { color: var(--st-semantic-data-category8); }
  @media (prefers-reduced-motion: reduce) {
    .st-scatterPlot__point { transition: none; }
  }
  .st-scatterPlot__tooltip {
    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column;
    font-size: 0.75rem; gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem;
    pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
  }
  .st-scatterPlot__tooltipLabel { font-weight: 600; }
  .st-scatterPlot__tooltipValue { opacity: 0.85; }

  /* --- Annotation layer ----------------------------------------------------
     Regions render BEHIND the points (color-mix tint, never raw opacity so the
     data keeps contrast); lines/shapes/points/labels render ABOVE. */
  .st-scatterPlot__annotationRegion {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
    stroke: none;
  }
  .st-scatterPlot__annotationLine {
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
  }
  .st-scatterPlot__annotationShape {
    fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
    stroke: var(--st-semantic-feedback-info);
    stroke-width: 1.5;
  }
  .st-scatterPlot__annotationPoint {
    fill: var(--st-semantic-feedback-info);
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
  }
  .st-scatterPlot__annotationLabel,
  .st-scatterPlot__annotationText {
    fill: var(--st-semantic-text-primary);
    font-size: 0.625rem;
    font-weight: 600;
  }

  /* Data labels — per-point value/label, drawn on top. Token-only colour. */
  .st-scatterPlot__dataLabel {
    fill: var(--st-semantic-text-primary);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* --- Crosshair layer (FR-3) ----------------------------------------------
     A tokenised dashed CROSSED pair (vertical + horizontal) at the active
     (hovered/controlled) key, plus an emphasised marker on the point.
     Decorative (aria-hidden). */
  .st-scatterPlot__crosshairLine {
    stroke: var(--st-semantic-border-strong);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
  }
  .st-scatterPlot__crosshairMarker {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 2;
  }

  /* --- Keyboard navigation layer (FR-5) ------------------------------------
     A focusable, transparent overlay of one hit-rect per point. Carries the
     roving tab stop; the focus ring is tokenised (border-interactive). */
  .st-scatterPlot__navLayer {
    inset: 0;
    position: absolute;
  }
  .st-scatterPlot__navDatum {
    fill: transparent;
    outline: none;
  }
  .st-scatterPlot__navDatum:focus-visible {
    fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-search {
    align-items: center;
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    
    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    display: inline-flex;
    
    padding: var(--st-component-search-paddingBlock, 0) var(--st-component-search-paddingInline, 0);
    font-size: var(--st-component-search-fontSize, 1rem);
    line-height: var(--st-component-search-lineHeight, normal);
    letter-spacing: var(--st-component-search-letterSpacing, normal);
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-search--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-search--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-search--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-search:hover:not(:has(input:disabled)) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-search:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-search:has([aria-invalid="true"]) {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-search__icon {
    align-items: center;
    color: var(--st-semantic-text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    padding-inline-start: 0.625rem;
  }

  .st-search__control {
    background: transparent;
    border: 0;
    color: inherit;
    flex: 1 1 auto;
    font: inherit;
    min-width: 0;
    padding: 0 0.5rem;
    width: 100%;
  }

  .st-search__control:focus {
    outline: none;
  }

  .st-search__control::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-search__control::-webkit-search-cancel-button {
    appearance: none;
  }

  .st-search__control:disabled {
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

  .st-search__clear {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    color: var(--st-semantic-text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    height: 1.5rem;
    justify-content: center;
    line-height: 1;
    margin-inline-end: 0.25rem;
    padding: 0 0.25rem;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 1.5rem;
  }

  .st-search__clear:hover:not(:disabled) {
    background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-search__clear:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 1px;
  }

  .st-search__clear:disabled {
    cursor: not-allowed;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-select {
    
    appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
    -webkit-appearance: var(--st-component-control-anatomy-field-selectAppearance, auto);
    background:
      var(--st-component-control-anatomy-field-selectChevron, none),
      var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    
    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    box-shadow: var(--st-component-control-anatomy-field-underline, none);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    font-family: var(--st-component-control-anatomy-typography-family, inherit);
    font-size: var(--st-component-control-anatomy-typography-size, inherit);
    font-weight: var(--st-component-control-anatomy-typography-weight, 400);
    
    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
    min-width: 0;
    
    padding:
      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
      var(--st-component-control-anatomy-field-selectPaddingRight, 2rem)
      var(--st-component-control-anatomy-density-md-paddingBlock, 0)
      var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
    width: 100%;
  }

  .st-select--sm {
    min-height: var(--st-component-control-smHeight, 2rem);
    font-size: 0.8125rem;
  }

  .st-select--md {
    min-height: var(--st-component-control-mdHeight, 2.5rem);
    font-size: 0.875rem;
  }

  .st-select--lg {
    min-height: var(--st-component-control-lgHeight, 3rem);
    font-size: 1rem;
  }

  .st-select:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    
    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
      var(--st-component-control-anatomy-focus-boxShadow,
        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
  }

  .st-select[aria-invalid="true"] {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

.st-sidenav {
    background: var(--st-component-sideNav-background, var(--st-semantic-surface-default));
    border-right: 1px solid var(--st-component-sideNav-border, var(--st-semantic-border-subtle));
    padding: var(--st-spacing-3, 0.75rem);
    width: var(--st-component-sideNav-width, 16rem);
  }

  .st-sidenav ul {
    display: grid;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-sidenav a {
    border-radius: var(--st-radius-small, 0.375rem);
    color: var(--st-component-sideNav-itemText, var(--st-semantic-text-secondary));
    display: block;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
  }

  .st-sidenav__link--active {
    background: var(--st-component-sideNav-activeBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-sideNav-activeText, var(--st-semantic-text-primary));
    font-weight: 650;
  }

.st-skeleton {
    display: grid;
    gap: 0.5rem;
    width: 100%;
  }

  .st-skeleton__line {
    background: linear-gradient(
      90deg,
      var(--st-semantic-surface-subtle, #eaeef2),
      var(--st-semantic-border-subtle, #d8dee4),
      var(--st-semantic-surface-subtle, #eaeef2)
    );
    background-size: 200% 100%;
    border-radius: 0.25rem;
    display: block;
    height: 0.875rem;
    width: 100%;
    animation: st-skeleton-shimmer 1.4s ease-in-out infinite;
  }

  .st-skeleton__line--heading {
    height: 1.25rem;
  }

  @keyframes st-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .st-skeleton__line {
      animation: none;
    }
  }

.st-skipLink {
    background: var(--st-semantic-action-primary);
    border-radius: var(--st-radius-md, 0.375rem);
    color: var(--st-semantic-action-primaryText, #fff);
    font-size: 0.875rem;
    font-weight: 600;
    left: var(--st-spacing-2, 0.5rem);
    padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
    position: fixed;
    text-decoration: none;
    top: var(--st-spacing-2, 0.5rem);
    transform: translateY(-150%);
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    z-index: var(--st-zindex-modal, 100);
  }

  .st-skipLink:focus,
  .st-skipLink:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 2px;
    transform: translateY(0);
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__label {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  .st-slider__header {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }

  .st-slider__value {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }

  .st-slider {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    width: 100%;
  }

  .st-slider__bounds {
    color: var(--st-semantic-text-muted);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .st-slider__track {
    background: var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: 999px;
    flex: 1 1 auto;
    height: 0.25rem;
    position: relative;
  }

  .st-slider--sm .st-slider__track {
    height: 0.1875rem;
  }

  .st-slider--lg .st-slider__track {
    height: 0.375rem;
  }

  .st-slider__fill {
    background: var(--st-semantic-action-primary);
    border-radius: 999px;
    display: block;
    height: 100%;
    width: var(--st-slider-fill, 0%);
  }

  .st-slider__thumb {
    background: var(--st-semantic-action-primary);
    border-radius: 50%;
    height: 1rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
  }

  .st-slider--sm .st-slider__thumb {
    height: 0.75rem;
    width: 0.75rem;
  }

  .st-slider--lg .st-slider__thumb {
    height: 1.25rem;
    width: 1.25rem;
  }

  .st-slider__tooltip {
    background: var(--st-semantic-text-primary);
    border-radius: var(--st-component-control-radius, 0.375rem);
    bottom: calc(100% + 0.375rem);
    color: var(--st-semantic-surface-default);
    font-size: 0.6875rem;
    font-weight: 600;
    left: 50%;
    line-height: 1;
    opacity: 0;
    padding: 0.25rem 0.375rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    white-space: nowrap;
  }

  .st-slider:hover .st-slider__tooltip,
  .st-slider:focus-within .st-slider__tooltip {
    opacity: 1;
  }

  .st-slider__input {
    appearance: none;
    background: transparent;
    height: 100%;
    inset: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
  }

  .st-slider__input:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 4px;
  }

  .st-slider__input::-webkit-slider-thumb {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
  }

  .st-slider__input::-moz-range-thumb {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
  }

  .st-slider__input:disabled {
    cursor: not-allowed;
  }

  .st-slider:has(.st-slider__input:disabled) .st-slider__fill,
  .st-slider:has(.st-slider__input:disabled) .st-slider__thumb {
    background: var(--st-semantic-text-muted);
  }

  .st-slider:has([aria-invalid="true"]) .st-slider__fill,
  .st-slider:has([aria-invalid="true"]) .st-slider__thumb {
    background: var(--st-semantic-feedback-error);
  }

  .st-rangeSlider__header {
    align-items: baseline;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
  }

  .st-rangeSlider__value {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }

  .st-rangeSlider {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    width: 100%;
  }

  .st-rangeSlider__bounds {
    color: var(--st-semantic-text-muted);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .st-rangeSlider__track {
    background: var(--st-component-control-border, var(--st-semantic-border-subtle));
    border-radius: 999px;
    flex: 1 1 auto;
    height: 0.25rem;
    position: relative;
  }

  .st-rangeSlider--sm .st-rangeSlider__track {
    height: 0.1875rem;
  }

  .st-rangeSlider--lg .st-rangeSlider__track {
    height: 0.375rem;
  }

  .st-rangeSlider__fill {
    background: var(--st-semantic-action-primary);
    border-radius: 999px;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
  }

  .st-rangeSlider__thumb {
    background: var(--st-semantic-action-primary);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    height: 1rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
  }

  .st-rangeSlider--sm .st-rangeSlider__thumb {
    height: 0.75rem;
    width: 0.75rem;
  }

  .st-rangeSlider--lg .st-rangeSlider__thumb {
    height: 1.25rem;
    width: 1.25rem;
  }

  .st-rangeSlider__thumb:focus-visible {
    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline-offset: 4px;
  }

  .st-rangeSlider__tooltip {
    background: var(--st-semantic-text-primary);
    border-radius: var(--st-component-control-radius, 0.375rem);
    bottom: calc(100% + 0.375rem);
    color: var(--st-semantic-surface-default);
    font-size: 0.6875rem;
    font-weight: 600;
    left: 50%;
    line-height: 1;
    opacity: 0;
    padding: 0.25rem 0.375rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    white-space: nowrap;
  }

  .st-rangeSlider__thumb:hover .st-rangeSlider__tooltip,
  .st-rangeSlider__thumb:focus-visible .st-rangeSlider__tooltip {
    opacity: 1;
  }

  .st-rangeSlider--disabled .st-rangeSlider__thumb,
  .st-rangeSlider--disabled .st-rangeSlider__fill {
    background: var(--st-semantic-text-muted);
  }

  .st-rangeSlider--disabled .st-rangeSlider__thumb {
    cursor: not-allowed;
  }

  .st-rangeSlider__track[aria-invalid="true"] .st-rangeSlider__fill,
  .st-rangeSlider__track[aria-invalid="true"] .st-rangeSlider__thumb {
    background: var(--st-semantic-feedback-error);
  }

  @media (prefers-reduced-motion: reduce) {
    .st-rangeSlider__tooltip {
      transition: none;
    }
  }

.st-sparkline {
    display: inline-flex;
    line-height: 0;
    vertical-align: middle;
  }

  .st-sparkline svg {
    display: block;
  }

  .st-sparkline--neutral {
    color: var(--st-component-sparkline-neutralStroke, var(--st-semantic-text-secondary));
  }

  .st-sparkline--success {
    color: var(--st-component-sparkline-successStroke, var(--st-semantic-feedback-success));
  }

  .st-sparkline--warning {
    color: var(--st-component-sparkline-warningStroke, var(--st-semantic-feedback-warning));
  }

  .st-sparkline--error {
    color: var(--st-component-sparkline-errorStroke, var(--st-semantic-feedback-error));
  }

  .st-sparkline__line {
    stroke: currentColor;
  }

  .st-sparkline__area {
    fill: currentColor;
    opacity: 0.18;
    stroke: none;
  }

.st-stackedBar { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
  .st-stackedBar svg { display: block; overflow: visible; }
  .st-stackedBar__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
  .st-stackedBar__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
  .st-stackedBar__tick, .st-stackedBar__categoryLabel { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
  .st-stackedBar__seg { cursor: pointer; stroke: var(--st-semantic-surface-default); stroke-width: 1; transition: opacity 120ms ease; }
  .st-stackedBar__seg--dim { opacity: 0.45; }
  .st-stackedBar__seg:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 1px; }
  .st-stackedBar__seg--category1 { fill: var(--st-semantic-data-category1); }
  .st-stackedBar__seg--category2 { fill: var(--st-semantic-data-category2); }
  .st-stackedBar__seg--category3 { fill: var(--st-semantic-data-category3); }
  .st-stackedBar__seg--category4 { fill: var(--st-semantic-data-category4); }
  .st-stackedBar__seg--category5 { fill: var(--st-semantic-data-category5); }
  .st-stackedBar__seg--category6 { fill: var(--st-semantic-data-category6); }
  .st-stackedBar__seg--category7 { fill: var(--st-semantic-data-category7); }
  .st-stackedBar__seg--category8 { fill: var(--st-semantic-data-category8); }
  /* Data labels — per-segment value, centred. Token-only colour. */
  .st-stackedBar__dataLabel { fill: var(--st-semantic-text-inverse); font-size: 0.6875rem; font-weight: 600; }
  .st-stackedBar__tooltip {
    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column; font-size: 0.75rem;
    gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem; pointer-events: none; position: absolute;
    transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
  }
  .st-stackedBar__tooltipLabel { font-weight: 600; }
  .st-stackedBar__tooltipValue { opacity: 0.85; }
  .st-stackedBar__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
  .st-stackedBar__legendItem { align-items: center; color: var(--st-semantic-text-secondary); display: inline-flex; font-size: 0.75rem; gap: 0.35rem; }
  .st-stackedBar__legendItem--off { opacity: 0.45; }
  .st-stackedBar__legendButton { align-items: center; background: none; border: 0; border-radius: var(--st-radius-sm, 0.25rem); color: inherit; cursor: pointer; display: inline-flex; font: inherit; gap: 0.35rem; padding: 0.125rem 0.25rem; }
  .st-stackedBar__legendButton:focus-visible { outline: 2px solid var(--st-semantic-border-interactive); outline-offset: 2px; }
  .st-stackedBar__legendSwatch { border-radius: 2px; height: 0.7rem; width: 0.7rem; }
  .st-stackedBar__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
  .st-stackedBar__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
  .st-stackedBar__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
  .st-stackedBar__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
  .st-stackedBar__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
  .st-stackedBar__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
  .st-stackedBar__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
  .st-stackedBar__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-streamingMessage {
    position: relative;
  }

  .st-streamingMessage__text {
    font-family: var(--st-component-chatMessage-font, var(--st-typography-fontFamilyBody, inherit));
    margin: 0;
    white-space: pre-wrap;
  }

  .st-streamingMessage__text--muted {
    color: var(--st-semantic-text-muted);
    font-style: italic;
  }

  .st-streamingMessage__reasoning {
    background: var(--st-component-chatMessage-reasoningBackground, var(--st-semantic-surface-subtle));
    border-left: 2px solid var(--st-semantic-border-subtle);
    border-radius: 0;
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.6rem;
  }

  .st-streamingMessage__reasoningToggle {
    color: var(--st-semantic-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .st-streamingMessage__reasoningText {
    color: var(--st-semantic-text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
    margin: 0.35rem 0 0;
    white-space: pre-wrap;
  }

  .st-streamingMessage__meta {
    color: var(--st-semantic-text-muted);
    font-size: 0.75rem;
    margin: 0.35rem 0 0;
  }

  .st-streamingMessage__trail {
    margin-top: 0.5rem;
  }

  .st-streamingMessage__trailToggle {
    color: var(--st-component-chatMessage-actionText, var(--st-semantic-text-secondary));
    cursor: pointer;
    font-size: 0.75rem;
  }

  .st-streamingMessage__trailList,
  .st-streamingMessage__subList {
    margin: 0.4rem 0 0 1rem;
    padding: 0;
  }

  .st-streamingMessage__trailSection {
    margin-bottom: 0.45rem;
  }

  .st-streamingMessage__trailSection strong {
    color: var(--st-semantic-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
  }

  .st-streamingMessage__trailSection li {
    color: var(--st-semantic-text-primary);
    font-size: 0.75rem;
    line-height: 1.4;
    list-style: none;
  }

  .st-streamingMessage__trailSection li + li {
    margin-top: 0.2rem;
  }

  .st-streamingMessage__trailSection li::before {
    content: "• ";
    color: var(--st-semantic-text-muted);
  }

  @media (max-width: 640px) {
    .st-streamingMessage__trail {
      margin-top: 0.35rem;
    }
  }

.st-structuredList {
    color: var(--st-semantic-text-primary);
    display: grid;
    margin: 0;
    width: 100%;
  }

  .st-structuredList--bordered {
    border-block-start: 1px solid
      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
  }

  .st-structuredList__row {
    align-items: baseline;
    display: grid;
    gap: var(--st-spacing-3, 0.75rem);
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    padding: 0.75rem 0;
  }

  .st-structuredList--bordered .st-structuredList__row {
    border-block-end: 1px solid
      var(--st-component-structuredList-border, var(--st-semantic-border-subtle));
  }

  .st-structuredList__term {
    color: var(--st-semantic-text-secondary);
    font-weight: 600;
    margin: 0;
  }

  .st-structuredList__definition {
    margin: 0;
  }

.st-switch {
    align-items: center;
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: inline-grid;
    gap: 0.75rem;
    grid-template-columns: auto 1fr;
    position: relative;
  }

  .st-switch__input {
    height: var(--st-component-selection-toggleTrackHeight, 1.25rem);
    margin: 0;
    opacity: 0;
    position: absolute;
    width: var(--st-component-selection-toggleTrackWidth, 2.25rem);
  }

  .st-switch__track {
    align-items: center;
    background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
    
    border-radius: var(--st-component-selection-toggleTrackRadius, var(--st-radius-pill, 999px));
    display: inline-flex;
    height: var(--st-component-selection-toggleTrackHeight, 1.25rem);
    padding: var(--st-component-selection-toggleTrackPadding, 0.125rem);
    transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: var(--st-component-selection-toggleTrackWidth, 2.25rem);
  }

  .st-switch__thumb {
    background: var(--st-component-selection-switchThumb, var(--st-semantic-surface-default));
    border-radius: var(--st-radius-pill, 999px);
    height: var(--st-component-selection-toggleThumbSize, 1rem);
    transform: translateX(0);
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: var(--st-component-selection-toggleThumbSize, 1rem);
  }

  .st-switch__input:checked + .st-switch__track {
    background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
  }

  .st-switch__input:checked + .st-switch__track .st-switch__thumb {
    transform: translateX(calc(var(--st-component-selection-toggleTrackWidth, 2.25rem) - var(--st-component-selection-toggleThumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
  }

  
  .st-switch__input:focus-visible + .st-switch__track {
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-switch__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-switch__label {
    font-size: 0.9375rem;
  }

  .st-switch__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

.st-table-wrap {
    overflow-x: auto;
  }

  .st-table {
    background: var(--st-component-dataTable-rowBackground, var(--st-semantic-surface-default));
    border: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
    border-collapse: separate;
    border-radius: var(--st-component-dataTable-radius, 0.5rem);
    border-spacing: 0;
    color: var(--st-component-dataTable-text, var(--st-semantic-text-primary));
    min-width: 100%;
  }

  .st-table caption {
    color: var(--st-component-dataTable-captionText, var(--st-semantic-text-secondary));
    font-weight: 600;
    padding: 0.75rem;
    text-align: left;
  }

  .st-table th,
  .st-table td {
    border-bottom: 1px solid var(--st-component-dataTable-border, var(--st-semantic-border-subtle));
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
  }

  .st-table th {
    background: var(--st-component-dataTable-headerBackground, var(--st-semantic-surface-subtle));
    font-size: 0.875rem;
    font-weight: 650;
  }

  .st-table tbody tr:hover {
    background: var(--st-component-dataTable-rowHoverBackground, var(--st-semantic-surface-subtle));
  }

  .st-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .st-table__cell--right {
    text-align: right;
  }

  .st-table__cell--center {
    text-align: center;
  }

.st-tabs {
    
    color: var(--st-semantic-text-primary);
    display: grid;
    gap: var(--st-spacing-4, 1rem);
  }

  .st-tabs__list {
    border-bottom: 1px solid var(--st-component-tabs-border, var(--st-semantic-border-subtle));
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

  .st-tabs__tab {
    
    background: var(--st-component-tabs-inactiveBackground, transparent);
    border: 0;
    
    border-top-width: var(--st-component-tabs-activeBorderTopWidth, 0);
    border-bottom-width: var(--st-component-tabs-activeBorderBottomWidth, var(--st-component-tabs-anatomy-shape-borderWidth, 2px));
    border-top-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
    border-bottom-style: var(--st-component-tabs-anatomy-shape-borderStyle, solid);
    border-top-color: transparent;
    border-bottom-color: transparent;
    color: var(--st-component-tabs-inactiveText, var(--st-semantic-text-secondary));
    cursor: var(--st-cursor-interactive, pointer);
    font-family: var(--st-component-tabs-anatomy-typography-family, inherit);
    font-size: var(--st-component-tabs-tabFontSize, inherit);
    font-weight: var(--st-component-tabs-anatomy-typography-weight, 600);
    line-height: var(--st-component-tabs-tabLineHeight, var(--st-component-tabs-anatomy-typography-lineHeight, 1.2));
    letter-spacing: var(--st-component-tabs-anatomy-typography-letterSpacing, 0);
    text-transform: var(--st-component-tabs-anatomy-typography-textTransform, none);
    padding: var(--st-component-tabs-tabPaddingBlock, 0.75rem) var(--st-component-tabs-tabPaddingInline, 0.25rem);
  }

  .st-tabs__tab--active {
    background: var(--st-component-tabs-activeBackground, transparent);
    border-top-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
    border-bottom-color: var(--st-component-tabs-indicator, var(--st-semantic-action-primary));
    
    box-shadow: var(--st-component-tabs-activeShadow, none);
    font-weight: var(--st-component-tabs-activeWeight, var(--st-component-tabs-anatomy-typography-weight, 600));
    color: var(--st-component-tabs-activeText, var(--st-semantic-text-primary));
  }

  
  .st-tabs__tab:focus-visible {
    outline: var(--st-component-tabs-anatomy-focus-outline, 2px solid var(--st-semantic-border-interactive));
    outline-offset: var(--st-component-tabs-anatomy-focus-offset, 2px);
    box-shadow: var(--st-component-tabs-anatomy-focus-boxShadow, none);
    border-radius: var(--st-component-tabs-anatomy-shape-radius, 0);
  }

  .st-tabs__tab:disabled {
    cursor: var(--st-cursor-disabled, not-allowed);
    opacity: var(--st-component-tabs-anatomy-states-disabled-opacity, 0.55);
  }

  .st-tabs__panel {
    background: var(--st-component-tabs-panelBackground, var(--st-semantic-surface-default));
    line-height: 1.5;
  }

.st-tag {
    align-items: center;
    border-radius: var(--st-component-tag-radius, var(--st-radius-pill, 999px));
    display: inline-flex;
    font-weight: var(--st-component-tag-fontWeight, 600);
    gap: 0.25rem;
    letter-spacing: var(--st-component-tag-letterSpacing, normal);
    line-height: var(--st-component-tag-lineHeight, 1);
    min-height: var(--st-component-tag-minHeight, 0);
    padding: var(--st-component-tag-paddingBlock, 0.25rem)
      var(--st-component-tag-paddingInline, 0.5rem);
    text-transform: var(--st-component-tag-textTransform, none);
  }

  .st-tag--sm {
    font-size: var(--st-component-tag-fontSize, 0.6875rem);
    padding: var(--st-component-tag-paddingBlock, 0.1875rem)
      var(--st-component-tag-paddingInline, 0.5rem);
  }

  .st-tag--md {
    font-size: var(--st-component-tag-fontSize, 0.75rem);
    padding: var(--st-component-tag-paddingBlock, 0.25rem)
      var(--st-component-tag-paddingInline, 0.625rem);
  }

  .st-tag--neutral {
    background: var(--st-component-tag-neutralBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-tag-neutralText, var(--st-semantic-text-secondary));
  }

  .st-tag--success {
    background: color-mix(in srgb, var(--st-semantic-feedback-success) 14%, white);
    color: var(--st-semantic-feedback-success);
  }

  .st-tag--warning {
    background: color-mix(in srgb, var(--st-semantic-feedback-warning) 14%, white);
    color: var(--st-semantic-feedback-warning);
  }

  .st-tag--error {
    background: color-mix(in srgb, var(--st-semantic-feedback-error) 14%, white);
    color: var(--st-semantic-feedback-error);
  }

  .st-tag--info {
    background: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, white);
    color: var(--st-semantic-feedback-info);
  }

  .st-tag--disabled {
    opacity: 0.55;
  }

  .st-tag__label {
    display: inline-flex;
    align-items: center;
  }

  .st-tag__dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1em;
    height: 1.25em;
    justify-content: center;
    line-height: 1;
    margin-inline-start: 0.125rem;
    padding: 0;
    transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 1.25em;
  }

  .st-tag__dismiss:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 18%, transparent);
  }

  .st-tag__dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
  }

  .st-tag__dismiss:disabled {
    cursor: not-allowed;
  }

.st-field {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
    max-width: var(--st-component-field-maxWidth, 28rem);
  }

  .st-field__control {
    display: grid;
    gap: var(--st-component-field-gap, 0.5rem);
  }

  .st-field__label {
    font-family: var(--st-component-field-labelTypography-family, inherit);
    font-size: var(--st-component-field-labelTypography-size, 0.875rem);
    font-weight: var(--st-component-field-labelTypography-weight, 600);
    line-height: var(--st-component-field-labelTypography-lineHeight, 1.4);
    letter-spacing: var(--st-component-field-labelTypography-letterSpacing, 0);
    text-transform: var(--st-component-field-labelTypography-textTransform, none);
  }

  .st-field__help,
  .st-field__error {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .st-field__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  }

  .st-field__error {
    color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  }

  
  .st-textarea {
    background: var(--st-component-control-anatomy-field-fillBg, var(--st-component-control-background, var(--st-semantic-surface-default)));
    border-top: var(--st-component-control-anatomy-field-borderTop, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-right: var(--st-component-control-anatomy-field-borderRight, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-bottom: var(--st-component-control-anatomy-field-borderBottom, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    border-left: var(--st-component-control-anatomy-field-borderLeft, var(--st-component-control-anatomy-shape-borderWidth, 1px) var(--st-component-control-anatomy-shape-borderStyle, solid) var(--st-component-control-border, var(--st-semantic-border-subtle)));
    
    border-top-left-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-top-right-radius: var(--st-component-control-anatomy-field-radiusTop, var(--st-component-control-anatomy-shape-radius, 0.375rem));
    border-bottom-right-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    border-bottom-left-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
    box-shadow: var(--st-component-control-anatomy-field-underline, none);
    color: var(--st-component-control-text, var(--st-semantic-text-primary));
    font-family: var(--st-component-control-anatomy-typography-family, inherit);
    font-size: var(--st-component-control-anatomy-typography-size, inherit);
    font-weight: var(--st-component-control-anatomy-typography-weight, 400);
    line-height: var(--st-component-control-anatomy-typography-lineHeight, 1.5);
    letter-spacing: var(--st-component-control-anatomy-typography-letterSpacing, normal);
    min-height: 6rem;
    min-width: 0;
    padding: 0.625rem var(--st-component-control-anatomy-density-sm-paddingInline, 0.75rem);
    resize: vertical;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: 100%;
  }

  .st-textarea::placeholder {
    color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
  }

  .st-textarea:hover:not(:disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-textarea:focus-visible {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    
    box-shadow: var(--st-component-control-anatomy-field-focusShadow,
      var(--st-component-control-anatomy-focus-boxShadow,
        0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive))));
  }

  .st-textarea[aria-invalid="true"] {
    border-color: var(--st-component-control-invalidBorder, var(--st-semantic-feedback-error));
  }

  .st-textarea:disabled {
    background: var(--st-component-control-disabledBackground, var(--st-semantic-surface-subtle));
    color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
    cursor: not-allowed;
  }

.st-tile {
    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-card-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-card-radius, 0.5rem);
    color: var(--st-semantic-text-primary);
    display: block;
    padding: var(--st-spacing-4, 1rem);
    text-align: left;
    text-decoration: none;
    width: 100%;
  }

  
  a.st-tile,
  button.st-tile {
    cursor: pointer;
    font: inherit;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-tile--clickable:hover:not(.st-tile--disabled),
  .st-tile--selectable:hover:not(.st-tile--disabled) {
    border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
  }

  .st-tile--clickable:focus-visible,
  .st-tile--selectable:focus-within {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    box-shadow: 0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    outline: none;
  }

  .st-tile--selectable {
    align-items: start;
    cursor: pointer;
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
    grid-template-columns: auto 1fr;
  }

  .st-tile--selected {
    border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    box-shadow: 0 0 0 1px var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  }

  .st-tile--disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .st-tile__input {
    accent-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
    margin: 0.2rem 0 0;
  }

  .st-tile__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-tile__title {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .st-tile__description {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

.st-tileGroup {
    border: 0;
    color: var(--st-semantic-text-primary);
    margin: 0;
    min-width: 0;
    padding: 0;
  }

  .st-tileGroup__legend {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    font-weight: 600;
    margin-block-end: var(--st-spacing-2, 0.5rem);
    padding: 0;
  }

  .st-tileGroup__legend--hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .st-tileGroup__items {
    display: grid;
    gap: var(--st-spacing-2, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .st-tileGroup__tile {
    background: var(--st-component-card-background, var(--st-semantic-surface-raised));
    border: 1px solid
      var(--st-component-card-border, var(--st-semantic-border-subtle));
    border-radius: var(--st-component-card-radius, 0.5rem);
    cursor: pointer;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: auto 1fr;
    padding: 0.875rem 1rem;
    transition:
      border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
      box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-tileGroup__tile:hover:not(.st-tileGroup__tile--disabled) {
    border-color: var(
      --st-component-control-hoverBorder,
      var(--st-semantic-border-strong)
    );
  }

  .st-tileGroup__tile--checked {
    border-color: var(
      --st-component-control-focusRing,
      var(--st-semantic-border-interactive)
    );
    box-shadow: 0 0 0 1px
      var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  }

  .st-tileGroup__tile--disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .st-tileGroup__input {
    accent-color: var(
      --st-component-control-focusRing,
      var(--st-semantic-border-interactive)
    );
    margin: 0.25rem 0 0;
  }

  .st-tileGroup__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-tileGroup__label {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .st-tileGroup__description {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

.st-toast {
    background: var(--st-component-toast-background, var(--st-semantic-surface-raised));
    border: 1px solid var(--st-component-toast-border, var(--st-semantic-border-subtle));
    border-left-width: 0.25rem;
    border-radius: 0;
    box-shadow: var(--st-component-toast-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
    color: var(--st-component-toast-text, var(--st-semantic-text-primary));
    display: flex;
    gap: var(--st-spacing-4, 1rem);
    justify-content: space-between;
    padding: var(--st-spacing-4, 1rem);
    width: min(100%, 28rem);
    z-index: var(--st-component-toast-zIndex, 60);
  }

  .st-toast--info {
    border-left-color: var(--st-component-toast-infoBorder, var(--st-semantic-feedback-info));
  }

  .st-toast--success {
    border-left-color: var(--st-component-toast-successBorder, var(--st-semantic-feedback-success));
  }

  .st-toast--warning {
    border-left-color: var(--st-component-toast-warningBorder, var(--st-semantic-feedback-warning));
  }

  .st-toast--error {
    border-left-color: var(--st-component-toast-errorBorder, var(--st-semantic-feedback-error));
  }

  .st-toast__content {
    display: grid;
    gap: 0.25rem;
  }

  .st-toast__title {
    font-size: 0.9375rem;
    margin: 0;
  }

  .st-toast__message {
    color: var(--st-semantic-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
  }

  .st-toast__actions {
    align-items: start;
    display: flex;
    gap: var(--st-spacing-2, 0.5rem);
  }

.st-toggle {
    color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
    display: inline-grid;
    gap: 0.375rem;
  }

  .st-toggle__label {
    font-size: 0.875rem;
    font-weight: 600;
  }

  .st-toggle__row {
    align-items: center;
    display: inline-flex;
    gap: 0.625rem;
    position: relative;
  }

  .st-toggle__input {
    height: var(--st-toggle-trackHeight, 1.25rem);
    margin: 0;
    opacity: 0;
    position: absolute;
    width: var(--st-toggle-trackWidth, 2.25rem);
  }

  .st-toggle__track {
    align-items: center;
    background: var(--st-component-selection-switchTrack, var(--st-semantic-border-strong));
    
    border-radius: var(--st-component-selection-toggleTrackRadius, var(--st-radius-pill, 999px));
    color: var(--st-component-selection-toggleTextColor, var(--st-semantic-text-primary));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--st-component-selection-toggleFontSize, inherit);
    height: var(--st-toggle-trackHeight, 1.25rem);
    letter-spacing: var(--st-component-selection-toggleLetterSpacing, normal);
    line-height: var(--st-component-selection-toggleLineHeight, normal);
    padding: var(--st-component-selection-toggleTrackPadding, 0.125rem);
    transition: background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: var(--st-toggle-trackWidth, 2.25rem);
  }

  .st-toggle__thumb {
    background: var(--st-component-selection-switchThumb, var(--st-semantic-surface-default));
    border-radius: var(--st-radius-pill, 999px);
    height: var(--st-toggle-thumbSize, 1rem);
    transform: translateX(0);
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: var(--st-toggle-thumbSize, 1rem);
  }

  .st-toggle__input:checked + .st-toggle__track {
    background: var(--st-component-selection-switchTrackChecked, var(--st-semantic-action-primary));
  }

  .st-toggle__input:checked + .st-toggle__track .st-toggle__thumb {
    transform: translateX(calc(var(--st-toggle-trackWidth, 2.25rem) - var(--st-toggle-thumbSize, 1rem) - 2 * var(--st-component-selection-toggleTrackPadding, 0.125rem)));
  }

  
  .st-toggle__input:focus-visible + .st-toggle__track {
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-toggle__input:disabled + .st-toggle__track {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .st-toggle__state {
    color: var(--st-semantic-text-secondary);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
  }

  .st-toggle__help {
    color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
    font-size: 0.8125rem;
  }

  .st-toggle--sm {
    --st-toggle-trackHeight: 1rem;
    --st-toggle-trackWidth: 1.875rem;
    --st-toggle-thumbSize: 0.75rem;
  }

  .st-toggle--md {
    
    --st-toggle-trackHeight: var(--st-component-selection-toggleTrackHeight, 1.25rem);
    --st-toggle-trackWidth: var(--st-component-selection-toggleTrackWidth, 2.25rem);
    --st-toggle-thumbSize: var(--st-component-selection-toggleThumbSize, 1rem);
  }

.st-toggletip {
    align-items: center;
    display: inline-flex;
    gap: 0.25rem;
    position: relative;
  }

  .st-toggletip__trigger {
    align-items: center;
    background: var(--st-component-selection-switchTrack, var(--st-semantic-border-subtle));
    border: 0;
    border-radius: 50%;
    color: var(--st-semantic-text-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.25rem;
  }

  .st-toggletip__trigger:hover {
    background: var(--st-semantic-border-strong);
  }

  
  .st-toggletip__trigger:focus-visible {
    outline: var(--st-component-control-anatomy-focus-outline, none);
    outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
    box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
      0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
  }

  .st-toggletip__bubble {
    background: var(--st-semantic-surface-default);
    border: 1px solid var(--st-semantic-border-subtle);
    border-radius: var(--st-radius-md, 0.5rem);
    box-shadow: var(--st-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.08));
    color: var(--st-semantic-text-primary);
    display: grid;
    font-size: 0.8125rem;
    gap: 0.25rem;
    line-height: 1.4;
    max-width: 16rem;
    min-width: 8rem;
    padding: 0.5rem 0.625rem;
    position: absolute;
    z-index: var(--st-zindex-overlay, 50);
  }

  .st-toggletip--top .st-toggletip__bubble {
    bottom: calc(100% + 0.375rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .st-toggletip--bottom .st-toggletip__bubble {
    top: calc(100% + 0.375rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .st-toggletip--start .st-toggletip__bubble {
    right: calc(100% + 0.375rem);
    top: 50%;
    transform: translateY(-50%);
  }

  .st-toggletip--end .st-toggletip__bubble {
    left: calc(100% + 0.375rem);
    top: 50%;
    transform: translateY(-50%);
  }

  .st-toggletip__label {
    color: var(--st-semantic-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
  }

.st-tooltip {
    display: inline-flex;
    position: relative;
  }

  .st-tooltip__trigger {
    display: inline-flex;
  }

  .st-tooltip__content {
    background: var(--st-component-tooltip-background, var(--st-semantic-surface-inverse));
    border-radius: var(--st-component-tooltip-radius, 0.375rem);
    box-shadow: var(--st-component-tooltip-shadow, 0 8px 24px rgb(15 23 42 / 0.12));
    color: var(--st-component-tooltip-text, var(--st-semantic-text-inverse));
    font-size: 0.8125rem;
    line-height: 1.4;
    max-width: 16rem;
    opacity: 0;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
    width: max-content;
    z-index: var(--st-component-tooltip-zIndex, 80);
  }

  .st-tooltip--top .st-tooltip__content {
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .st-tooltip--bottom .st-tooltip__content {
    left: 50%;
    top: calc(100% + 0.5rem);
    transform: translateX(-50%);
  }

  .st-tooltip:hover .st-tooltip__content,
  .st-tooltip:focus-within .st-tooltip__content {
    opacity: 1;
  }

.st-treeView {
    color: var(--st-semantic-text-primary);
    list-style: none;
    margin: 0;
    padding: var(--st-spacing-1, 0.25rem);
  }

  .st-treeView__row {
    align-items: center;
    border-radius: var(--st-radius-md, 0.375rem);
    cursor: pointer;
    display: flex;
    gap: var(--st-spacing-1, 0.25rem);
    padding-block: 0.3rem;
    padding-inline-end: 0.5rem;
  }

  .st-treeView__row:hover:not(.st-treeView__row--disabled) {
    background: var(--st-semantic-surface-subtle);
  }

  .st-treeView__row:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: -2px;
  }

  .st-treeView__row--selected {
    background: var(--st-semantic-surface-subtle);
    color: var(--st-semantic-action-primary);
    font-weight: 600;
  }

  .st-treeView__row--disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .st-treeView__caret {
    flex: 0 0 auto;
    height: 0.85rem;
    position: relative;
    width: 0.85rem;
  }

  .st-treeView__caret:not(.st-treeView__caret--leaf)::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    content: "";
    inset-block-start: 0.32rem;
    inset-inline-start: 0.1rem;
    position: absolute;
    transform: rotate(-90deg);
    transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-treeView__caret--open::before {
    transform: rotate(0deg);
  }

  .st-treeView__label {
    font-size: 0.9rem;
    line-height: 1.3;
  }

.st-unorderedList {
    color: var(--st-semantic-text-primary);
    display: grid;
    gap: var(--st-spacing-1, 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .st-unorderedList--nested {
    gap: var(--st-spacing-1, 0.25rem);
    margin-block-start: var(--st-spacing-1, 0.25rem);
    margin-inline-start: var(--st-spacing-4, 1rem);
  }

  .st-unorderedList__item {
    line-height: 1.5;
    padding-inline-start: var(--st-spacing-4, 1rem);
    position: relative;
  }

  .st-unorderedList__item::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    display: block;
    height: 0.3125rem;
    inset-block-start: 0.5625rem;
    inset-inline-start: var(--st-spacing-1, 0.25rem);
    opacity: 0.65;
    position: absolute;
    width: 0.3125rem;
  }


.st-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.st-sideNav { display: grid; gap: var(--st-spacing-1, 0.25rem); }
.st-sideNav__link { color: var(--st-component-sideNav-itemText, var(--st-semantic-text-secondary)); text-decoration: none; }
.st-sideNav__link--active { background: var(--st-component-sideNav-activeBackground, var(--st-semantic-surface-subtle)); color: var(--st-component-sideNav-activeText, var(--st-semantic-text-primary)); }
.st-contentSwitcher__button { border: 0; }
.st-search__input { width: 100%; }
.st-fileUploader__name { font-weight: 600; }

/* --- Parité 0.3.0 : BackToTop, MediaContent, TableOfContents, Notification, Transcription, DisplaySettings --- */
.st-backToTop {
  align-items: center;
  background: var(--st-component-control-background, var(--st-semantic-surface-contrast, #0f172a));
  border: 1px solid var(--st-component-control-border, #334155);
  border-radius: 999px;
  bottom: var(--st-spacing-4, 1rem);
  color: var(--st-semantic-text-inverse);
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  gap: 0.5rem;
  opacity: 0;
  padding: 0.6rem 0.8rem;
  position: fixed;
  pointer-events: none;
  right: var(--st-spacing-4, 1rem);
  transform: translateY(0.75rem);
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  z-index: var(--st-zindex-toast, 70);
}
.st-backToTop:not([aria-hidden="true"]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.st-backToTop:hover:not(:disabled),
.st-backToTop:focus-visible {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  box-shadow: 0 0 0 2px var(--st-component-control-focusRing, #38bdf8);
  outline: none;
}
.st-backToTop:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, #38bdf8);
  outline-offset: 2px;
}
.st-backToTop__label { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.st-backToTop__icon { align-items: center; display: inline-flex; }
@media (max-width: 38rem) {
  .st-backToTop__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-backToTop { transition: none; }
}

.st-mediaContent {
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: 0.5rem;
  margin: 0;
  overflow: hidden;
}
.st-mediaContent__media {
  aspect-ratio: var(--st-mediaContent-ratio);
  background: var(--st-semantic-surface-subtle);
  overflow: hidden;
}
.st-mediaContent__media > img,
.st-mediaContent__media > video {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  display: block;
}
.st-mediaContent__caption {
  background: var(--st-semantic-surface-primary);
  color: var(--st-semantic-text-primary);
  font-size: 0.875rem;
  padding: 0.6rem 0.75rem;
}
.st-mediaContent__title { color: var(--st-semantic-text-primary); font-weight: 600; margin: 0; }
.st-mediaContent__caption p { margin: 0.25rem 0 0; }
.st-mediaContent__byline { color: var(--st-semantic-text-secondary); }

.st-tableOfContents {
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.st-tableOfContents__title {
  color: var(--st-semantic-text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.st-tableOfContents__list { list-style: none; margin: 0; padding-left: 0; }
.st-tableOfContents__item {
  padding-inline-start: calc(var(--st-tableOfContents-level) * var(--st-spacing-4, 1rem));
}
.st-tableOfContents__item + .st-tableOfContents__item { margin-top: 0.125rem; }
.st-tableOfContents__link {
  color: var(--st-semantic-text-secondary);
  display: inline-block;
  padding: 0.25rem 0;
  text-decoration: none;
}
.st-tableOfContents__link:hover,
.st-tableOfContents__link:focus-visible {
  color: var(--st-semantic-text-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}
.st-tableOfContents__link[aria-current="location"] {
  color: var(--st-semantic-text-primary);
  font-weight: 600;
}

.st-notification {
  background: var(--st-component-notification-background, var(--st-semantic-surface-raised));
  border: 1px solid var(--st-component-notification-border, var(--st-semantic-border-subtle));
  border-left-width: var(--st-component-notification-accentWidth, 0.25rem);
  border-left-style: solid;
  border-left-color: var(--st-component-notification-accent, var(--st-semantic-feedback-info));
  border-radius: 0;
  color: var(--st-component-notification-text, var(--st-semantic-text-primary));
  display: flex;
  gap: var(--st-spacing-4, 1rem);
  justify-content: space-between;
  padding: var(--st-spacing-4, 1rem);
  width: min(100%, 32rem);
}
.st-notification--info {
  --st-component-notification-accent: var(--st-component-notification-infoAccent, var(--st-semantic-feedback-info));
}
.st-notification--success {
  --st-component-notification-accent: var(--st-component-notification-successAccent, var(--st-semantic-feedback-success));
}
.st-notification--warning {
  --st-component-notification-accent: var(--st-component-notification-warningAccent, var(--st-semantic-feedback-warning));
}
.st-notification--error {
  --st-component-notification-accent: var(--st-component-notification-errorAccent, var(--st-semantic-feedback-error));
}
.st-notification__content { display: grid; gap: 0.25rem; flex: 1; min-width: 0; }
.st-notification__title { font-size: 0.9375rem; margin: 0; }
.st-notification__message {
  color: var(--st-semantic-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}
.st-notification__meta { align-items: start; display: flex; flex-shrink: 0; gap: 0.5rem; }
.st-notification__actions { align-items: start; display: flex; gap: var(--st-spacing-2, 0.5rem); }
.st-notification__close {
  align-items: center;
  background: transparent;
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-border-radius-full, 999px);
  color: var(--st-semantic-text-secondary);
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  font-size: 0.875rem;
  height: 1.75rem;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0;
  width: 1.75rem;
}
.st-notification__close:hover {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-transcription {
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.st-transcription summary {
  color: var(--st-semantic-text-primary);
  cursor: var(--st-cursor-interactive, pointer);
  font-weight: 600;
  list-style: none;
}
.st-transcription summary::marker { color: var(--st-semantic-text-secondary); }
.st-transcription__content { margin-top: 0.75rem; }
.st-transcription__list { margin: 0; padding-left: 1rem; }
.st-transcription__item + .st-transcription__item { margin-top: 0.625rem; }
.st-transcription__meta { color: var(--st-semantic-text-secondary); font-size: 0.8125rem; margin: 0; }
.st-transcription__speaker { font-weight: 600; }
.st-transcription__text { color: var(--st-semantic-text-primary); margin: 0.2rem 0 0; }
.st-transcription__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.st-displaySettings {
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.st-displaySettings__title {
  color: var(--st-semantic-text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
}
.st-displaySettings__grid { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.st-displaySettings__field {
  display: grid;
  gap: 0.35rem;
  color: var(--st-semantic-text-secondary);
  font-size: 0.875rem;
}
.st-displaySettings__label { font-weight: 600; }
.st-displaySettings select,
.st-displaySettings input[type="checkbox"] {
  appearance: auto;
  width: 100%;
  border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
  border-radius: 0.375rem;
  color: var(--st-semantic-text-primary);
  background: var(--st-component-control-background, var(--st-semantic-surface-primary));
  padding: 0.5rem 0.65rem;
  font: inherit;
}
.st-displaySettings input[type="checkbox"] {
  width: fit-content;
  min-width: 1.2rem;
  min-height: 1.2rem;
  margin: 0;
}
.st-displaySettings__field--switch {
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}


/* ==========================================================================
   Layout system (Flex / Stack / Inline / Container / Row / Col / Hidden /
   Divider) — ported from components-svelte scoped styles. Dynamic values
   (gap / align / justify / span / offset) are applied inline via style props.
   ========================================================================== */

/* Flex / Stack / Inline */
.st-flex {
  box-sizing: border-box;
  min-width: 0;
}

/* Container */
.st-container {
  box-sizing: border-box;
  inline-size: 100%;
  margin-inline: auto;
}

.st-container--sm {
  max-inline-size: var(--st-container-sm, 40rem);
}

.st-container--md {
  max-inline-size: var(--st-container-md, 48rem);
}

.st-container--lg {
  max-inline-size: var(--st-container-lg, 64rem);
}

.st-container--xl {
  max-inline-size: var(--st-container-xl, 80rem);
}

.st-container--full {
  max-inline-size: none;
}

.st-container--padded {
  padding-inline: var(--st-spacing-4, 1rem);
}

/* Row */
.st-row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  inline-size: 100%;
  min-width: 0;
}

/* Col */
.st-col {
  box-sizing: border-box;
  flex-shrink: 1;
  min-width: 0;
}

.st-col--auto {
  flex-basis: auto;
}

@media (min-width: 640px) {
  .st-col--has-sm {
    flex-basis: var(--st-col-sm);
    max-inline-size: var(--st-col-sm);
    flex-grow: 0;
  }
}

@media (min-width: 768px) {
  .st-col--has-md {
    flex-basis: var(--st-col-md);
    max-inline-size: var(--st-col-md);
    flex-grow: 0;
  }
}

@media (min-width: 1024px) {
  .st-col--has-lg {
    flex-basis: var(--st-col-lg);
    max-inline-size: var(--st-col-lg);
    flex-grow: 0;
  }
}

/* Hidden — breakpoints: sm 640 / md 768 / lg 1024 / xl 1280. */
.st-hidden {
  display: contents;
}

/* below: hidden when viewport < breakpoint */
@media (max-width: 639.98px) {
  .st-hidden--below-sm {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .st-hidden--below-md {
    display: none !important;
  }
}
@media (max-width: 1023.98px) {
  .st-hidden--below-lg {
    display: none !important;
  }
}
@media (max-width: 1279.98px) {
  .st-hidden--below-xl {
    display: none !important;
  }
}

/* above: hidden when viewport >= breakpoint */
@media (min-width: 640px) {
  .st-hidden--above-sm {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .st-hidden--above-md {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .st-hidden--above-lg {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .st-hidden--above-xl {
    display: none !important;
  }
}

/* Divider */
.st-divider {
  border: 0;
  box-sizing: border-box;
  color: var(--st-semantic-border-subtle, #e2e8f0);
}

.st-divider--horizontal:not(.st-divider--labeled) {
  block-size: 0;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: currentColor;
  inline-size: 100%;
}

.st-divider--vertical {
  align-self: stretch;
  border-inline-start-width: 1px;
  border-inline-start-style: solid;
  border-inline-start-color: currentColor;
  display: inline-block;
  inline-size: 0;
  min-block-size: 1em;
}

.st-divider--dashed.st-divider--horizontal:not(.st-divider--labeled) {
  border-block-start-style: dashed;
}

.st-divider--dashed.st-divider--vertical {
  border-inline-start-style: dashed;
}

.st-divider--labeled {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-3, 0.75rem);
  inline-size: 100%;
}

.st-divider__line {
  block-size: 0;
  border-block-start-width: 1px;
  border-block-start-style: solid;
  border-block-start-color: currentColor;
  flex: 1 1 0;
}

.st-divider--dashed .st-divider__line {
  border-block-start-style: dashed;
}

.st-divider__label {
  color: var(--st-semantic-text-secondary, inherit);
  flex: 0 0 auto;
  font-size: var(--st-font-size-sm, 0.875rem);
  line-height: 1;
  white-space: nowrap;
}

/* ===========================================================================
   Avatar — ported from components-svelte/src/lib/Avatar.svelte
   =========================================================================== */
.st-avatar {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  vertical-align: middle;
}

.st-avatar--circle {
  border-radius: 50%;
}

.st-avatar--square {
  border-radius: var(--st-radius-sm, 0.375rem);
}

.st-avatar--sm {
  font-size: 0.6875rem;
  height: 1.5rem;
  width: 1.5rem;
}

.st-avatar--md {
  font-size: 0.8125rem;
  height: 2rem;
  width: 2rem;
}

.st-avatar--lg {
  font-size: 1rem;
  height: 2.5rem;
  width: 2.5rem;
}

.st-avatar--xl {
  font-size: 1.25rem;
  height: 3.5rem;
  width: 3.5rem;
}

.st-avatar__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.st-avatar__initials {
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.st-avatar--category1 {
  background: color-mix(in srgb, var(--st-semantic-data-category1) 16%, white);
  color: var(--st-semantic-data-category1);
}
.st-avatar--category2 {
  background: color-mix(in srgb, var(--st-semantic-data-category2) 16%, white);
  color: var(--st-semantic-data-category2);
}
.st-avatar--category3 {
  background: color-mix(in srgb, var(--st-semantic-data-category3) 16%, white);
  color: var(--st-semantic-data-category3);
}
.st-avatar--category4 {
  background: color-mix(in srgb, var(--st-semantic-data-category4) 16%, white);
  color: var(--st-semantic-data-category4);
}
.st-avatar--category5 {
  background: color-mix(in srgb, var(--st-semantic-data-category5) 16%, white);
  color: var(--st-semantic-data-category5);
}
.st-avatar--category6 {
  background: color-mix(in srgb, var(--st-semantic-data-category6) 16%, white);
  color: var(--st-semantic-data-category6);
}
.st-avatar--category7 {
  background: color-mix(in srgb, var(--st-semantic-data-category7) 16%, white);
  color: var(--st-semantic-data-category7);
}
.st-avatar--category8 {
  background: color-mix(in srgb, var(--st-semantic-data-category8) 16%, white);
  color: var(--st-semantic-data-category8);
}

.st-avatar--image {
  background: var(--st-semantic-surface-subtle, #eef2f7);
}

/* ===========================================================================
   AvatarGroup — ported from components-svelte/src/lib/AvatarGroup.svelte
   =========================================================================== */
.st-avatarGroup {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
}

.st-avatarGroup > * {
  box-shadow: 0 0 0 2px var(--st-semantic-surface-default, #ffffff);
  position: relative;
}

.st-avatarGroup > * + * {
  margin-inline-start: -0.5rem;
}

.st-avatarGroup--sm > * + * {
  margin-inline-start: -0.375rem;
}

.st-avatarGroup--lg > * + * {
  margin-inline-start: -0.625rem;
}

.st-avatarGroup--xl > * + * {
  margin-inline-start: -0.875rem;
}

.st-avatarGroup__overflow {
  align-items: center;
  background: var(--st-semantic-surface-subtle, #eef2f7);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--st-semantic-surface-default, #ffffff);
  color: var(--st-semantic-text-secondary, #64748b);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  justify-content: center;
  margin-inline-start: -0.5rem;
  position: relative;
  user-select: none;
}

.st-avatarGroup--sm .st-avatarGroup__overflow {
  font-size: 0.6875rem;
  height: 1.5rem;
  margin-inline-start: -0.375rem;
  width: 1.5rem;
}

.st-avatarGroup--md .st-avatarGroup__overflow {
  font-size: 0.75rem;
  height: 2rem;
  width: 2rem;
}

.st-avatarGroup--lg .st-avatarGroup__overflow {
  font-size: 0.875rem;
  height: 2.5rem;
  margin-inline-start: -0.625rem;
  width: 2.5rem;
}

.st-avatarGroup--xl .st-avatarGroup__overflow {
  font-size: 1.125rem;
  height: 3.5rem;
  margin-inline-start: -0.875rem;
  width: 3.5rem;
}

/* ===========================================================================
   ButtonGroup — ported from components-svelte/src/lib/ButtonGroup.svelte
   =========================================================================== */
.st-buttonGroup {
  align-items: stretch;
  display: inline-flex;
}

.st-buttonGroup--horizontal {
  flex-direction: row;
}

.st-buttonGroup--vertical {
  flex-direction: column;
}

.st-buttonGroup:not(.st-buttonGroup--attached) {
  gap: var(--st-spacing-2, 0.5rem);
}

.st-buttonGroup--attached {
  gap: 0;
}

.st-buttonGroup--attached.st-buttonGroup--horizontal > * + * {
  margin-inline-start: -1px;
}

.st-buttonGroup--attached.st-buttonGroup--vertical > * + * {
  margin-block-start: -1px;
}

.st-buttonGroup--attached.st-buttonGroup--horizontal > *:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.st-buttonGroup--attached.st-buttonGroup--horizontal > *:first-child {
  border-end-end-radius: 0;
  border-start-end-radius: 0;
}

.st-buttonGroup--attached.st-buttonGroup--horizontal > *:last-child {
  border-end-start-radius: 0;
  border-start-start-radius: 0;
}

.st-buttonGroup--attached.st-buttonGroup--vertical > *:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.st-buttonGroup--attached.st-buttonGroup--vertical > *:first-child {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.st-buttonGroup--attached.st-buttonGroup--vertical > *:last-child {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.st-buttonGroup--attached > *:hover,
.st-buttonGroup--attached > *:focus-visible {
  z-index: 1;
}

/* ===========================================================================
   CheckboxGroup — ported from components-svelte/src/lib/CheckboxGroup.svelte
   =========================================================================== */
.st-checkboxGroup {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.st-checkboxGroup__legend {
  color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  padding: 0;
}

.st-checkboxGroup__help {
  color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
}

.st-checkboxGroup__options {
  display: flex;
  gap: var(--st-spacing-3, 0.75rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-checkboxGroup--vertical .st-checkboxGroup__options {
  flex-direction: column;
}

.st-checkboxGroup--horizontal .st-checkboxGroup__options {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ===========================================================================
   RadioGroup — ported from components-svelte/src/lib/RadioGroup.svelte
   =========================================================================== */
.st-radioGroup {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.st-radioGroup__legend {
  color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  padding: 0;
}

.st-radioGroup__help {
  color: var(--st-component-field-helpText, var(--st-semantic-text-secondary));
  font-size: 0.8125rem;
  margin: 0.25rem 0 0;
}

.st-radioGroup__options {
  display: flex;
  gap: var(--st-spacing-3, 0.75rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-radioGroup--vertical .st-radioGroup__options {
  flex-direction: column;
}

.st-radioGroup--horizontal .st-radioGroup__options {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ===========================================================================
   Typography — ported from components-svelte/src/lib/Typography.svelte
   =========================================================================== */
.st-typography {
  color: var(--st-semantic-text-primary);
  margin: 0;
}

.st-typography--display {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.st-typography--h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.st-typography--h2 {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.st-typography--h3 {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.st-typography--h4 {
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
}

.st-typography--h5 {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.st-typography--h6 {
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.4;
}

.st-typography--body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

.st-typography--body-sm {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.st-typography--caption {
  color: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}

.st-typography--overline {
  color: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.st-typography--weight-regular {
  font-weight: 400;
}
.st-typography--weight-medium {
  font-weight: 500;
}
.st-typography--weight-semibold {
  font-weight: 650;
}
.st-typography--weight-bold {
  font-weight: 700;
}

.st-typography--tone-primary {
  color: var(--st-semantic-text-primary);
}
.st-typography--tone-secondary {
  color: var(--st-semantic-text-secondary);
}
.st-typography--tone-muted {
  color: var(--st-semantic-text-muted);
}
.st-typography--tone-inverse {
  color: var(--st-semantic-text-inverse);
}
.st-typography--tone-link {
  color: var(--st-semantic-text-link, var(--st-semantic-action-primary));
}

.st-typography--align-start {
  text-align: start;
}
.st-typography--align-center {
  text-align: center;
}
.st-typography--align-end {
  text-align: end;
}
.st-typography--align-justify {
  text-align: justify;
}

.st-typography--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
   Collapsible — ported from components-svelte/src/lib/Collapsible.svelte
   =========================================================================== */
.st-collapsible {
  color: var(--st-semantic-text-primary);
  width: 100%;
}

.st-collapsible__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--st-component-accordion-text, inherit);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--st-component-accordion-fontSize, 0.9375rem);
  font-weight: var(--st-component-accordion-fontWeight, 650);
  gap: 0.75rem;
  justify-content: space-between;
  line-height: var(--st-component-accordion-lineHeight, 1.3);
  padding: var(--st-component-accordion-paddingBlock, 0.625rem)
    var(--st-component-accordion-paddingInline, 0.25rem);
  text-align: start;
  transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  width: 100%;
}

.st-collapsible__trigger:hover:not(:disabled) {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-collapsible__trigger:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: -2px;
}

.st-collapsible__trigger:disabled {
  color: var(--st-semantic-text-muted);
  cursor: not-allowed;
}

.st-collapsible__title {
  flex: 1 1 auto;
}

/* Trigger trailing slot (additive). Holds a count badge / status / glyph
   between the title and the chevron; never grows, so the chevron stays the
   rightmost affordance and the title keeps `flex: 1 1 auto`. */
.st-collapsible__trailing {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.st-collapsible__icon {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.25rem;
  justify-content: center;
  transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  width: 1.25rem;
}

.st-collapsible--open .st-collapsible__icon {
  transform: rotate(180deg);
}

.st-collapsible__region {
  color: var(--st-semantic-text-secondary);
  line-height: 1.5;
  padding: 0 0.25rem 0.625rem;
}

/* ===========================================================================
   Stepper — ported from components-svelte/src/lib/Stepper.svelte
   =========================================================================== */
.st-stepper {
  color: var(--st-semantic-text-primary);
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-stepper--horizontal {
  align-items: flex-start;
  flex-direction: row;
}

.st-stepper--vertical {
  flex-direction: column;
}

.st-stepper__step {
  display: flex;
  flex: 1 1 0;
  gap: var(--st-spacing-2, 0.5rem);
  min-width: 0;
  position: relative;
}

.st-stepper--horizontal .st-stepper__step {
  align-items: flex-start;
  flex-direction: column;
}

.st-stepper--vertical .st-stepper__step {
  align-items: flex-start;
  flex: 0 0 auto;
  flex-direction: row;
}

.st-stepper__indicator {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  position: relative;
}

.st-stepper--horizontal .st-stepper__indicator {
  flex-direction: row;
  width: 100%;
}

.st-stepper--vertical .st-stepper__indicator {
  flex-direction: column;
  min-height: 3rem;
}

.st-stepper__circle {
  align-items: center;
  background: var(--st-semantic-surface-default);
  border: 1.5px solid var(--st-semantic-border-strong);
  border-radius: 50%;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  height: 1.5rem;
  justify-content: center;
  line-height: 1;
  width: 1.5rem;
  z-index: 1;
}

.st-stepper__circle--button {
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0;
  transition:
    background var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-stepper__circle--button:hover {
  border-color: var(--st-semantic-action-primary);
}

.st-stepper__circle--button:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
  outline-offset: 2px;
}

.st-stepper__index {
  line-height: 1;
}

.st-stepper__connector {
  background: var(--st-semantic-border-subtle);
  flex: 1 1 auto;
}

.st-stepper--horizontal .st-stepper__connector {
  height: 2px;
  margin-top: calc(0.75rem - 1px);
}

.st-stepper--vertical .st-stepper__connector {
  margin-left: calc(0.75rem - 1px);
  min-height: 1.5rem;
  width: 2px;
}

.st-stepper__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.st-stepper--horizontal .st-stepper__text {
  padding-right: var(--st-spacing-3, 0.75rem);
  padding-top: var(--st-spacing-2, 0.5rem);
}

.st-stepper--vertical .st-stepper__text {
  padding-bottom: var(--st-spacing-3, 0.75rem);
}

.st-stepper__label {
  color: var(--st-semantic-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

.st-stepper__description {
  color: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
}

.st-stepper__step--complete .st-stepper__circle {
  background: var(--st-semantic-action-primary);
  border-color: var(--st-semantic-action-primary);
  color: var(--st-semantic-action-primaryText);
}

.st-stepper__step--complete .st-stepper__connector {
  background: var(--st-semantic-action-primary);
}

.st-stepper__step--current .st-stepper__circle {
  border-color: var(--st-semantic-action-primary);
  color: var(--st-semantic-action-primary);
}

.st-stepper__step--current .st-stepper__label {
  color: var(--st-semantic-action-primary);
}

/* ===========================================================================
   Specialized components ported from Svelte (Rating / TimePicker / Calendar /
   SlideIndicator / Autosave). Rules mirror the scoped <style> blocks 1:1.
   =========================================================================== */

/* --- Rating -------------------------------------------------------------- */
.st-rating {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-rating__star {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-component-control-radius, 0.375rem);
  color: var(--st-semantic-text-muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
  padding: var(--st-spacing-1, 0.25rem);
}

.st-rating__star--full,
.st-rating__star--half {
  color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
}

.st-rating__star:hover:not(:disabled) {
  color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
}

.st-rating__star:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: 2px;
}

.st-rating__star:disabled {
  cursor: default;
}

.st-rating--readonly .st-rating__star {
  cursor: default;
}

/* --- TimePicker ---------------------------------------------------------- */
.st-timepicker {
  align-items: stretch;
  background: var(--st-component-control-background, var(--st-semantic-surface-default));
  border: var(--st-component-control-anatomy-shape-borderWidth, 1px)
    var(--st-component-control-anatomy-shape-borderStyle, solid)
    var(--st-component-control-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
  color: var(--st-component-control-text, var(--st-semantic-text-primary));
  display: inline-flex;
  overflow: hidden;
  transition:
    border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  width: 100%;
}

.st-timepicker--sm {
  min-height: var(--st-component-control-smHeight, 2rem);
  font-size: 0.8125rem;
}

.st-timepicker--md {
  min-height: var(--st-component-control-mdHeight, 2.5rem);
  font-size: 0.875rem;
}

.st-timepicker--lg {
  min-height: var(--st-component-control-lgHeight, 3rem);
  font-size: 1rem;
}

.st-timepicker:hover:not(:has(input:disabled)) {
  border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
}

.st-timepicker:focus-within {
  border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
    0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
}

.st-timepicker__control {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex: 1 1 auto;
  font: inherit;
  min-width: 0;
  padding: 0 0.75rem;
  width: 100%;
}

.st-timepicker__control:focus {
  outline: none;
}

.st-timepicker__control::placeholder {
  color: var(--st-component-control-placeholderText, var(--st-semantic-text-muted));
}

.st-timepicker__control:disabled {
  color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
  cursor: not-allowed;
}

.st-timepicker__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0 0.5rem;
}

.st-timepicker__trigger:hover:not(:disabled) {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-timepicker__trigger:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: -2px;
}

.st-timepicker__trigger:disabled {
  cursor: not-allowed;
}

.st-timepicker__list {
  background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
  border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-popover-radius, 0.5rem);
  box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
  list-style: none;
  margin: var(--st-spacing-1, 0.25rem) 0 0;
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--st-spacing-1, 0.25rem);
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: var(--st-component-popover-zIndex, 80);
}

.st-timepicker__option {
  background: transparent;
  border: 0;
  border-radius: var(--st-component-control-radius, 0.375rem);
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  text-align: left;
  width: 100%;
}

.st-timepicker__option:hover {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-timepicker__option:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: -2px;
}

.st-timepicker__option--selected {
  background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
  color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
}

/* --- Calendar ------------------------------------------------------------ */
.st-calendar {
  background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
  border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-popover-radius, 0.5rem);
  color: var(--st-component-popover-text, var(--st-semantic-text-primary));
  display: inline-grid;
  gap: var(--st-spacing-3, 0.75rem);
  min-width: 18rem;
  padding: var(--st-spacing-3, 0.75rem);
}

.st-calendar__nav {
  align-items: center;
  display: grid;
  gap: var(--st-spacing-2, 0.5rem);
  grid-template-columns: auto 1fr auto;
}

.st-calendar__navBtn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-component-control-radius, 0.375rem);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
  padding: 0.25rem 0.5rem;
}

.st-calendar__navBtn:hover {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-calendar__navBtn:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: 2px;
}

.st-calendar__monthLabel {
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

.st-calendar__grid {
  display: grid;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-calendar__weekdays {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, minmax(2rem, 1fr));
}

.st-calendar__days {
  display: grid;
  gap: 2px;
}

.st-calendar__week {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, minmax(2rem, 1fr));
}

.st-calendar__weekday {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0;
  text-align: center;
  text-transform: capitalize;
}

.st-calendar__day {
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
  border-radius: var(--st-component-control-radius, 0.375rem);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  min-width: 0;
  padding: 0;
  text-align: center;
}

.st-calendar__day:hover:not(:disabled) {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-calendar__day:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: -2px;
}

.st-calendar__day--outside {
  color: var(--st-semantic-text-muted);
}

.st-calendar__day--today {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--st-semantic-border-interactive);
}

.st-calendar__day--inRange {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-calendar__day--selected {
  background: var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary));
  color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
}

/* Jour sélectionné survolé : garder un fond foncé sinon texte blanc sur fond
   clair (hover générique) -> invisible. Spécificité (0,4,0) > :hover (0,3,0). */
.st-calendar__day--selected:hover:not(:disabled) {
  background: var(
    --st-semantic-action-primaryHover,
    var(--st-component-dropdown-selectedBackground, var(--st-semantic-action-primary))
  );
  color: var(--st-component-dropdown-selectedText, var(--st-semantic-action-primaryText));
}

.st-calendar__day:disabled {
  color: var(--st-semantic-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

/* --- SlideIndicator ------------------------------------------------------ */
.st-slideIndicator {
  align-items: center;
  display: inline-flex;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-slideIndicator__dot {
  background: var(--st-semantic-border-strong, var(--st-semantic-text-muted));
  border: 0;
  cursor: pointer;
  opacity: 0.5;
  padding: 0;
  transition:
    opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    width var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-slideIndicator__dot:hover {
  opacity: 0.8;
}

.st-slideIndicator__dot:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: 2px;
}

.st-slideIndicator__dot--current {
  background: var(--st-semantic-action-primary);
  opacity: 1;
}

.st-slideIndicator--dots .st-slideIndicator__dot {
  border-radius: 50%;
}

.st-slideIndicator--dots.st-slideIndicator--sm .st-slideIndicator__dot {
  height: 0.375rem;
  width: 0.375rem;
}

.st-slideIndicator--dots.st-slideIndicator--md .st-slideIndicator__dot {
  height: 0.5rem;
  width: 0.5rem;
}

.st-slideIndicator--dots.st-slideIndicator--lg .st-slideIndicator__dot {
  height: 0.75rem;
  width: 0.75rem;
}

.st-slideIndicator--bars .st-slideIndicator__dot {
  border-radius: 999px;
}

.st-slideIndicator--bars.st-slideIndicator--sm .st-slideIndicator__dot {
  height: 0.25rem;
  width: 0.75rem;
}

.st-slideIndicator--bars.st-slideIndicator--md .st-slideIndicator__dot {
  height: 0.3125rem;
  width: 1rem;
}

.st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot {
  height: 0.375rem;
  width: 1.25rem;
}

.st-slideIndicator--bars .st-slideIndicator__dot--current {
  width: 1.75rem;
}

.st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot--current {
  width: 2.25rem;
}

/* --- Autosave ------------------------------------------------------------ */
.st-autosave {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.875rem;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-autosave__icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
}

.st-autosave__spinner {
  align-items: center;
  animation: st-autosave-spin 0.9s linear infinite;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
}

.st-autosave--saving .st-autosave__icon {
  color: var(--st-semantic-action-primary);
}

.st-autosave--saved {
  color: var(--st-semantic-feedback-success);
}

.st-autosave--error {
  color: var(--st-semantic-feedback-error);
}

.st-autosave--idle {
  color: var(--st-semantic-text-muted);
}

.st-autosave__time {
  color: var(--st-semantic-text-muted);
}

.st-autosave__retry {
  background: transparent;
  border: 0;
  color: var(--st-semantic-feedback-error);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.st-autosave__retry:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: 2px;
}

@keyframes st-autosave-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-autosave__spinner {
    animation: none;
  }
}

.st-portal {
  display: contents;
}

.st-popper {
  z-index: var(--st-component-popover-zIndex, 80);
}

.st-popper__arrow {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
  pointer-events: none;
}

.st-popper__arrow[data-popper-side="bottom"] {
  top: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
}

.st-popper__arrow[data-popper-side="top"] {
  bottom: -0.25rem;
  left: 50%;
  margin-left: -0.25rem;
}

.st-popper__arrow[data-popper-side="right"] {
  left: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
}

.st-popper__arrow[data-popper-side="left"] {
  right: -0.25rem;
  top: 50%;
  margin-top: -0.25rem;
}

/* ---------------------------------------------------------------------------
   SelectableRow — compact, full-width selectable list/rail row. By DEFAULT the
   selected state is just two calm signals — a tinted surface + accented text —
   deliberately NOT the off-theme "boudin box" (inset box-shadow + heavy rounded
   border) it replaces, and NOT a reflow-causing font-weight bump. The fine left
   accent bar is OPT-IN via the `accentBar` prop / `--accentBar` modifier.
   --------------------------------------------------------------------------- */
.st-selectableRow {
  align-items: center;
  background: transparent;
  border-radius: var(--st-radius-sm, 0.25rem);
  box-sizing: border-box;
  color: var(--st-semantic-text-secondary, #475569);
  cursor: pointer;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  padding: 0.5rem 0.75rem;
  position: relative;
  text-align: left;
  transition:
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  user-select: none;
  width: 100%;
}

/* Opt-in accent bar: reserve a 2px gutter without attaching a border to the
   rounded host. The selected accent is painted by a square pseudo-element so no
   one-sided stroke follows the row radius. */
.st-selectableRow--accentBar {
  padding-left: calc(0.75rem - 2px);
}

.st-selectableRow--accentBar::before {
  background: transparent;
  block-size: 100%;
  content: "";
  inline-size: 2px;
  inset-block: 0;
  inset-inline-start: 0;
  position: absolute;
}

.st-selectableRow:hover:not(.st-selectableRow--disabled):not(.st-selectableRow--selected) {
  background: var(
    --st-component-control-hoverBackground,
    var(--st-semantic-surface-subtle, #f8fafc)
  );
  color: var(--st-semantic-text-primary, #0f172a);
}

/* Focus ring as an EXTERNAL offset (not inset) so it reads as a focus
   affordance around the row rather than an inner stroke. */
.st-selectableRow:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary));
  outline-offset: 2px;
}

/* Selected: two signals by default — tinted surface + accented (contrast-safe)
   text. The token values carry a flat fallback; the inline color-mix is only a
   last-resort default when the token is unset. */
.st-selectableRow--selected {
  background: var(
    --st-component-selectableRow-selectedBackground,
    color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 12%, transparent)
  );
  color: var(
    --st-component-selectableRow-selectedText,
    color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 78%, black)
  );
}

/* The left accent bar paints only when opt-in AND selected. */
.st-selectableRow--accentBar.st-selectableRow--selected::before {
  background: var(
    --st-component-selectableRow-selectedAccent,
    var(--st-semantic-action-primary, #2563eb)
  );
}

/* color-mix fallback: engines without color-mix() get a flat tinted surface +
   a solid accent text from the resolved tokens' plain values. */
@supports not (color: color-mix(in oklch, red, blue)) {
  .st-selectableRow--selected {
    background: var(
      --st-component-selectableRow-selectedBackground,
      var(--st-semantic-surface-subtle, #eef2ff)
    );
    color: var(
      --st-component-selectableRow-selectedText,
      var(--st-semantic-action-primary, #1d4ed8)
    );
  }
}

.st-selectableRow--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.st-selectableRow__leading,
.st-selectableRow__trailing {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.st-selectableRow__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Caption variant (additive). Rows WITHOUT a caption keep the single-line
   `.st-selectableRow__content` above byte-identically (no `--stacked` rule
   applies). `--stacked` overlays a vertical column: the primary `__label` keeps
   its own single-line ellipsis, and the muted `__caption` truncates
   independently so a long legend never pushes the row width. Every leaf falls
   back to a base literal so a theme that emits no
   `--st-component-selectableRow-caption*` renders the caption identically. */
.st-selectableRow__content--stacked {
  display: flex;
  flex-direction: column;
  /* The column stack drops the inline ellipsis/nowrap (each line truncates on
     its own child); keep min-width:0 so the column can shrink and ellipsize. */
  overflow: visible;
  white-space: normal;
  gap: var(--st-component-selectableRow-captionGap, 0.125rem);
}

.st-selectableRow__label,
.st-selectableRow__caption {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-selectableRow__caption {
  color: var(--st-component-selectableRow-captionColor, var(--st-semantic-text-muted));
  font-size: var(--st-component-selectableRow-captionFontSize, 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  .st-selectableRow {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   SelectableList — accessible listbox wrapper owning a roving tabindex for its
   SelectableRow children (role=listbox → option).
   --------------------------------------------------------------------------- */
.st-selectableList {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-1, 0.25rem);
  width: 100%;
}

/* ---------------------------------------------------------------------------
   KpiCard — indicateur chiffré avec delta, tendance et sparkline optionnels.
   --------------------------------------------------------------------------- */
.st-kpiCard {
  background: var(--st-component-card-background, var(--st-semantic-surface-raised));
  border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
  border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
  border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
  box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
  color: var(--st-semantic-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-2, 0.5rem);
  padding: var(--st-spacing-4, 1rem);
}

.st-kpiCard--sm {
  gap: var(--st-spacing-1, 0.25rem);
  padding: var(--st-spacing-3, 0.75rem);
}

.st-kpiCard--lg {
  gap: var(--st-spacing-3, 0.75rem);
  padding: var(--st-spacing-6, 1.5rem);
}

.st-kpiCard__label {
  color: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.st-kpiCard--lg .st-kpiCard__label {
  font-size: 0.875rem;
}

.st-kpiCard__value {
  align-items: baseline;
  color: var(--st-semantic-text-primary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-1, 0.25rem);
  margin: 0;
}

/* Conditional formatting sur KpiCard : fond teinté pleine carte + icône alignée
   sur la valeur. Le fond hérite de .st-cell--intent-* (token feedback). */
.st-kpiCard.st-cell {
  padding: var(--st-spacing-4, 1rem);
}

.st-kpiCard.st-cell .st-kpiCard__value {
  align-items: center;
}

.st-kpiCard.st-cell .st-kpiCard__number {
  color: inherit;
}

.st-kpiCard__number {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

.st-kpiCard--sm .st-kpiCard__number {
  font-size: 1.25rem;
}

.st-kpiCard--lg .st-kpiCard__number {
  font-size: 2.25rem;
}

.st-kpiCard__unit {
  color: var(--st-semantic-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.st-kpiCard__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  justify-content: space-between;
}

.st-kpiCard__delta {
  align-items: center;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-kpiCard__arrow {
  display: block;
  flex: 0 0 auto;
}

.st-kpiCard__delta--up {
  color: var(--st-semantic-feedback-success);
}

.st-kpiCard__delta--down {
  color: var(--st-semantic-feedback-error);
}

.st-kpiCard__delta--flat {
  color: var(--st-semantic-text-secondary);
}

/* Accent catégoriel : liseré conservé, mais carte carrée pour éviter
   le liseré arrondi sur conteneur arrondi. */
.st-kpiCard--toned {
  border-inline-start-width: var(--st-spacing-1, 0.25rem);
  border-radius: 0;
}

/* Liserés catégoriels — alignés sur la palette data des autres composants. */
.st-kpiCard--category1 {
  border-inline-start-color: var(--st-semantic-data-category1);
}
.st-kpiCard--category2 {
  border-inline-start-color: var(--st-semantic-data-category2);
}
.st-kpiCard--category3 {
  border-inline-start-color: var(--st-semantic-data-category3);
}
.st-kpiCard--category4 {
  border-inline-start-color: var(--st-semantic-data-category4);
}
.st-kpiCard--category5 {
  border-inline-start-color: var(--st-semantic-data-category5);
}
.st-kpiCard--category6 {
  border-inline-start-color: var(--st-semantic-data-category6);
}
.st-kpiCard--category7 {
  border-inline-start-color: var(--st-semantic-data-category7);
}
.st-kpiCard--category8 {
  border-inline-start-color: var(--st-semantic-data-category8);
}

/* ---------------------------------------------------------------------------
   ComboChart — barres groupées (axe gauche) + lignes (axe droit).
   --------------------------------------------------------------------------- */
.st-comboChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-comboChart svg {
  display: block;
  overflow: visible;
}

.st-comboChart__visual {
  display: block;
}

.st-comboChart__grid {
  stroke: var(--st-component-comboChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-comboChart__axis {
  stroke: var(--st-component-comboChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-comboChart__tickLabel,
.st-comboChart__categoryLabel {
  fill: var(--st-component-comboChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-comboChart__axisLabel {
  fill: var(--st-component-comboChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
  font-weight: 600;
}

.st-comboChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-comboChart__bar:hover {
  opacity: 0.82;
}

.st-comboChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-comboChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-comboChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-comboChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-comboChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-comboChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-comboChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-comboChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-comboChart__line--category1 { stroke: var(--st-semantic-data-category1); }
.st-comboChart__line--category2 { stroke: var(--st-semantic-data-category2); }
.st-comboChart__line--category3 { stroke: var(--st-semantic-data-category3); }
.st-comboChart__line--category4 { stroke: var(--st-semantic-data-category4); }
.st-comboChart__line--category5 { stroke: var(--st-semantic-data-category5); }
.st-comboChart__line--category6 { stroke: var(--st-semantic-data-category6); }
.st-comboChart__line--category7 { stroke: var(--st-semantic-data-category7); }
.st-comboChart__line--category8 { stroke: var(--st-semantic-data-category8); }

.st-comboChart__dot {
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-comboChart__dot:hover {
  r: 5.5;
}

.st-comboChart__dot--category1 { fill: var(--st-semantic-data-category1); }
.st-comboChart__dot--category2 { fill: var(--st-semantic-data-category2); }
.st-comboChart__dot--category3 { fill: var(--st-semantic-data-category3); }
.st-comboChart__dot--category4 { fill: var(--st-semantic-data-category4); }
.st-comboChart__dot--category5 { fill: var(--st-semantic-data-category5); }
.st-comboChart__dot--category6 { fill: var(--st-semantic-data-category6); }
.st-comboChart__dot--category7 { fill: var(--st-semantic-data-category7); }
.st-comboChart__dot--category8 { fill: var(--st-semantic-data-category8); }

/* --- Annotation layer ------------------------------------------------------
   Regions render BEHIND the bars; lines/shapes/points/labels render ABOVE. */
.st-comboChart__annotationRegion {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
  stroke: none;
}
.st-comboChart__annotationLine {
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.st-comboChart__annotationShape {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
}
.st-comboChart__annotationPoint {
  fill: var(--st-semantic-feedback-info);
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
}
.st-comboChart__annotationLabel,
.st-comboChart__annotationText {
  fill: var(--st-semantic-text-primary);
  font-size: 0.625rem;
  font-weight: 600;
}

/* Data labels — per-bar + per-point value, drawn on top. Token-only colour. */
.st-comboChart__dataLabel {
  fill: var(--st-semantic-text-primary);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* --- Crosshair layer (FR-3) ------------------------------------------------
   A tokenised dashed line on the CATEGORY axis at the active (hovered/
   controlled) category. Decorative (aria-hidden). */
.st-comboChart__crosshairLine {
  stroke: var(--st-semantic-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

/* --- Keyboard navigation layer (FR-5) -------------------------------------
   A focusable, transparent overlay of one column per category. Carries the
   roving tab stop; the focus ring is tokenised (border-interactive). */
.st-comboChart__navLayer {
  inset: 0;
  position: absolute;
}
.st-comboChart__navDatum {
  fill: transparent;
  outline: none;
}
.st-comboChart__navDatum:focus-visible {
  fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .st-comboChart__bar,
  .st-comboChart__dot {
    transition: none;
  }
}

.st-comboChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0;
  padding: 0;
}

.st-comboChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-comboChart__legendItem--off {
  opacity: 0.45;
}

.st-comboChart__legendButton {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--st-radius-sm, 0.25rem);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: var(--st-spacing-1, 0.25rem);
  padding: 0.125rem 0.25rem;
}

.st-comboChart__legendButton:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 2px;
}

.st-comboChart__legendSwatch {
  display: inline-block;
  flex: none;
}

.st-comboChart__legendSwatch--bar {
  border-radius: 2px;
  height: 0.75rem;
  width: 0.75rem;
}

.st-comboChart__legendSwatch--line {
  border-radius: 999px;
  height: 0.25rem;
  width: 1rem;
}

.st-comboChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-comboChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-comboChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-comboChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-comboChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-comboChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-comboChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-comboChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-comboChart__tooltip {
  background: var(--st-component-comboChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-comboChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-comboChart__tooltipLabel {
  font-weight: 600;
}

.st-comboChart__tooltipValue {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   GaugeChart — jauge en arc avec bandes de seuils, aiguille et valeur centrale.
   --------------------------------------------------------------------------- */
.st-gaugeChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
}

.st-gaugeChart__visual,
.st-gaugeChart svg {
  display: block;
  overflow: visible;
}

.st-gaugeChart__track {
  stroke: var(--st-semantic-surface-subtle);
  stroke-linecap: round;
}

.st-gaugeChart__band {
  stroke-linecap: butt;
}

.st-gaugeChart__progress {
  stroke: var(--st-semantic-action-primary);
  stroke-linecap: round;
  transition: d var(--st-motion-fast, 200ms) var(--st-motion-easing, ease);
}

.st-gaugeChart__needle {
  fill: var(--st-semantic-text-primary);
  transition: d var(--st-motion-fast, 200ms) var(--st-motion-easing, ease);
}

.st-gaugeChart__hub {
  fill: var(--st-semantic-text-primary);
}

.st-gaugeChart__value {
  fill: var(--st-semantic-text-primary);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.st-gaugeChart__label {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Tons sémantiques de feedback */
.st-gaugeChart__band--neutral { stroke: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-gaugeChart__band--info { stroke: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-gaugeChart__band--success { stroke: var(--st-semantic-feedback-success); }
.st-gaugeChart__band--warning { stroke: var(--st-semantic-feedback-warning); }
.st-gaugeChart__band--error { stroke: var(--st-semantic-feedback-error); }

/* Tons catégoriels data */
.st-gaugeChart__band--category1 { stroke: var(--st-semantic-data-category1); }
.st-gaugeChart__band--category2 { stroke: var(--st-semantic-data-category2); }
.st-gaugeChart__band--category3 { stroke: var(--st-semantic-data-category3); }
.st-gaugeChart__band--category4 { stroke: var(--st-semantic-data-category4); }
.st-gaugeChart__band--category5 { stroke: var(--st-semantic-data-category5); }
.st-gaugeChart__band--category6 { stroke: var(--st-semantic-data-category6); }
.st-gaugeChart__band--category7 { stroke: var(--st-semantic-data-category7); }
.st-gaugeChart__band--category8 { stroke: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-gaugeChart__progress,
  .st-gaugeChart__needle {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   SolidGaugeChart — anneau de progression plein (arc rempli + valeur centrale).
   --------------------------------------------------------------------------- */
.st-solidGaugeChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
}

.st-solidGaugeChart__visual,
.st-solidGaugeChart svg {
  display: block;
  overflow: visible;
}

.st-solidGaugeChart__track {
  stroke: var(--st-semantic-surface-subtle);
  stroke-linecap: round;
}

.st-solidGaugeChart__progress {
  stroke: var(--st-semantic-action-primary);
  stroke-linecap: round;
  transition: d var(--st-motion-fast, 200ms) var(--st-motion-easing, ease);
}

.st-solidGaugeChart__value {
  fill: var(--st-semantic-text-primary);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.st-solidGaugeChart__label {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Tons sémantiques de feedback */
.st-solidGaugeChart__progress--neutral { stroke: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-solidGaugeChart__progress--info { stroke: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-solidGaugeChart__progress--success { stroke: var(--st-semantic-feedback-success); }
.st-solidGaugeChart__progress--warning { stroke: var(--st-semantic-feedback-warning); }
.st-solidGaugeChart__progress--error { stroke: var(--st-semantic-feedback-error); }

/* Tons catégoriels data */
.st-solidGaugeChart__progress--category1 { stroke: var(--st-semantic-data-category1); }
.st-solidGaugeChart__progress--category2 { stroke: var(--st-semantic-data-category2); }
.st-solidGaugeChart__progress--category3 { stroke: var(--st-semantic-data-category3); }
.st-solidGaugeChart__progress--category4 { stroke: var(--st-semantic-data-category4); }
.st-solidGaugeChart__progress--category5 { stroke: var(--st-semantic-data-category5); }
.st-solidGaugeChart__progress--category6 { stroke: var(--st-semantic-data-category6); }
.st-solidGaugeChart__progress--category7 { stroke: var(--st-semantic-data-category7); }
.st-solidGaugeChart__progress--category8 { stroke: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-solidGaugeChart__progress {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   StateTimelineChart — bandes d'états discrets dans le temps (xrange, une lane
   par series, segments contigus colorés par état).
   --------------------------------------------------------------------------- */
.st-stateTimelineChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-stateTimelineChart svg {
  display: block;
  overflow: visible;
}

.st-stateTimelineChart__visual {
  display: block;
}

.st-stateTimelineChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-stateTimelineChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-stateTimelineChart__tickLabel,
.st-stateTimelineChart__seriesLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-stateTimelineChart__segment {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-stateTimelineChart__segment--dim {
  opacity: 0.4;
}

.st-stateTimelineChart__segment--neutral { fill: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-stateTimelineChart__segment--info { fill: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-stateTimelineChart__segment--success { fill: var(--st-semantic-feedback-success); }
.st-stateTimelineChart__segment--warning { fill: var(--st-semantic-feedback-warning); }
.st-stateTimelineChart__segment--error { fill: var(--st-semantic-feedback-error); }

.st-stateTimelineChart__segment--category1 { fill: var(--st-semantic-data-category1); }
.st-stateTimelineChart__segment--category2 { fill: var(--st-semantic-data-category2); }
.st-stateTimelineChart__segment--category3 { fill: var(--st-semantic-data-category3); }
.st-stateTimelineChart__segment--category4 { fill: var(--st-semantic-data-category4); }
.st-stateTimelineChart__segment--category5 { fill: var(--st-semantic-data-category5); }
.st-stateTimelineChart__segment--category6 { fill: var(--st-semantic-data-category6); }
.st-stateTimelineChart__segment--category7 { fill: var(--st-semantic-data-category7); }
.st-stateTimelineChart__segment--category8 { fill: var(--st-semantic-data-category8); }

.st-stateTimelineChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-stateTimelineChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-stateTimelineChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-stateTimelineChart__legendSwatch--neutral { background: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-stateTimelineChart__legendSwatch--info { background: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-stateTimelineChart__legendSwatch--success { background: var(--st-semantic-feedback-success); }
.st-stateTimelineChart__legendSwatch--warning { background: var(--st-semantic-feedback-warning); }
.st-stateTimelineChart__legendSwatch--error { background: var(--st-semantic-feedback-error); }
.st-stateTimelineChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-stateTimelineChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-stateTimelineChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-stateTimelineChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-stateTimelineChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-stateTimelineChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-stateTimelineChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-stateTimelineChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-stateTimelineChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-stateTimelineChart__tooltipLabel {
  font-weight: 600;
}

.st-stateTimelineChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-stateTimelineChart__segment {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   StatusHistoryChart — grille temps × entité, cellules colorées par statut
   discret (façon Grafana « status history »), une ligne par series.
   --------------------------------------------------------------------------- */
.st-statusHistoryChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-statusHistoryChart svg {
  display: block;
  overflow: visible;
}

.st-statusHistoryChart__visual {
  display: block;
}

.st-statusHistoryChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-statusHistoryChart__tickLabel,
.st-statusHistoryChart__seriesLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-statusHistoryChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-statusHistoryChart__cell--dim {
  opacity: 0.4;
}

.st-statusHistoryChart__cell--neutral { fill: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-statusHistoryChart__cell--info { fill: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-statusHistoryChart__cell--success { fill: var(--st-semantic-feedback-success); }
.st-statusHistoryChart__cell--warning { fill: var(--st-semantic-feedback-warning); }
.st-statusHistoryChart__cell--error { fill: var(--st-semantic-feedback-error); }

.st-statusHistoryChart__cell--category1 { fill: var(--st-semantic-data-category1); }
.st-statusHistoryChart__cell--category2 { fill: var(--st-semantic-data-category2); }
.st-statusHistoryChart__cell--category3 { fill: var(--st-semantic-data-category3); }
.st-statusHistoryChart__cell--category4 { fill: var(--st-semantic-data-category4); }
.st-statusHistoryChart__cell--category5 { fill: var(--st-semantic-data-category5); }
.st-statusHistoryChart__cell--category6 { fill: var(--st-semantic-data-category6); }
.st-statusHistoryChart__cell--category7 { fill: var(--st-semantic-data-category7); }
.st-statusHistoryChart__cell--category8 { fill: var(--st-semantic-data-category8); }

.st-statusHistoryChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-statusHistoryChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-statusHistoryChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-statusHistoryChart__legendSwatch--neutral { background: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-statusHistoryChart__legendSwatch--info { background: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-statusHistoryChart__legendSwatch--success { background: var(--st-semantic-feedback-success); }
.st-statusHistoryChart__legendSwatch--warning { background: var(--st-semantic-feedback-warning); }
.st-statusHistoryChart__legendSwatch--error { background: var(--st-semantic-feedback-error); }
.st-statusHistoryChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-statusHistoryChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-statusHistoryChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-statusHistoryChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-statusHistoryChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-statusHistoryChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-statusHistoryChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-statusHistoryChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-statusHistoryChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-statusHistoryChart__tooltipLabel {
  font-weight: 600;
}

.st-statusHistoryChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-statusHistoryChart__cell {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   WaffleChart — grille N×M de cellules ; la proportion colorée encode la part
   de chaque catégorie (façon Kibana « waffle »).
   --------------------------------------------------------------------------- */
.st-waffleChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
}

.st-waffleChart svg,
.st-waffleChart__visual {
  display: block;
  overflow: visible;
}

.st-waffleChart__cell {
  transition: opacity 120ms ease;
}

.st-waffleChart__cell--track {
  fill: var(--st-semantic-surface-subtle);
}

.st-waffleChart__cell--neutral { fill: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-waffleChart__cell--info { fill: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-waffleChart__cell--success { fill: var(--st-semantic-feedback-success); }
.st-waffleChart__cell--warning { fill: var(--st-semantic-feedback-warning); }
.st-waffleChart__cell--error { fill: var(--st-semantic-feedback-error); }

.st-waffleChart__cell--category1 { fill: var(--st-semantic-data-category1); }
.st-waffleChart__cell--category2 { fill: var(--st-semantic-data-category2); }
.st-waffleChart__cell--category3 { fill: var(--st-semantic-data-category3); }
.st-waffleChart__cell--category4 { fill: var(--st-semantic-data-category4); }
.st-waffleChart__cell--category5 { fill: var(--st-semantic-data-category5); }
.st-waffleChart__cell--category6 { fill: var(--st-semantic-data-category6); }
.st-waffleChart__cell--category7 { fill: var(--st-semantic-data-category7); }
.st-waffleChart__cell--category8 { fill: var(--st-semantic-data-category8); }

.st-waffleChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-waffleChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-waffleChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-waffleChart__legendSwatch--neutral { background: var(--st-semantic-border-strong, var(--st-semantic-surface-subtle)); }
.st-waffleChart__legendSwatch--info { background: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-waffleChart__legendSwatch--success { background: var(--st-semantic-feedback-success); }
.st-waffleChart__legendSwatch--warning { background: var(--st-semantic-feedback-warning); }
.st-waffleChart__legendSwatch--error { background: var(--st-semantic-feedback-error); }
.st-waffleChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-waffleChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-waffleChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-waffleChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-waffleChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-waffleChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-waffleChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-waffleChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-waffleChart__cell {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   RibbonChart — rang empilé à rubans dans le temps (façon Power BI « ribbon
   chart ») : segments empilés triés par valeur + rubans lissés par catégorie.
   --------------------------------------------------------------------------- */
.st-ribbonChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-ribbonChart svg {
  display: block;
  overflow: visible;
}

.st-ribbonChart__visual {
  display: block;
}

.st-ribbonChart__periodLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-ribbonChart__ribbon {
  opacity: 0.34;
  transition: opacity 120ms ease;
}

.st-ribbonChart__ribbon--dim {
  opacity: 0.1;
}

.st-ribbonChart__seg {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-ribbonChart__seg--dim {
  opacity: 0.4;
}

.st-ribbonChart__seg--category1,
.st-ribbonChart__ribbon--category1 { fill: var(--st-semantic-data-category1); }
.st-ribbonChart__seg--category2,
.st-ribbonChart__ribbon--category2 { fill: var(--st-semantic-data-category2); }
.st-ribbonChart__seg--category3,
.st-ribbonChart__ribbon--category3 { fill: var(--st-semantic-data-category3); }
.st-ribbonChart__seg--category4,
.st-ribbonChart__ribbon--category4 { fill: var(--st-semantic-data-category4); }
.st-ribbonChart__seg--category5,
.st-ribbonChart__ribbon--category5 { fill: var(--st-semantic-data-category5); }
.st-ribbonChart__seg--category6,
.st-ribbonChart__ribbon--category6 { fill: var(--st-semantic-data-category6); }
.st-ribbonChart__seg--category7,
.st-ribbonChart__ribbon--category7 { fill: var(--st-semantic-data-category7); }
.st-ribbonChart__seg--category8,
.st-ribbonChart__ribbon--category8 { fill: var(--st-semantic-data-category8); }

.st-ribbonChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-ribbonChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-ribbonChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-ribbonChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-ribbonChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-ribbonChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-ribbonChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-ribbonChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-ribbonChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-ribbonChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-ribbonChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-ribbonChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-ribbonChart__tooltipLabel {
  font-weight: 600;
}

.st-ribbonChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-ribbonChart__seg,
  .st-ribbonChart__ribbon {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   AnomalySwimLaneChart — heatmap temps × job, score CONTINU → gradient
   d'intensité (façon Kibana ML « anomaly swim lane »).
   --------------------------------------------------------------------------- */
.st-anomalySwimLaneChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-anomalySwimLaneChart svg {
  display: block;
  overflow: visible;
}

.st-anomalySwimLaneChart__visual {
  display: block;
}

.st-anomalySwimLaneChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-anomalySwimLaneChart__tickLabel,
.st-anomalySwimLaneChart__jobLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-anomalySwimLaneChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-anomalySwimLaneChart__cell--dim {
  opacity: 0.4;
}

.st-anomalySwimLaneChart__cell--category1,
.st-anomalySwimLaneChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
.st-anomalySwimLaneChart__cell--category2,
.st-anomalySwimLaneChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
.st-anomalySwimLaneChart__cell--category3,
.st-anomalySwimLaneChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
.st-anomalySwimLaneChart__cell--category4,
.st-anomalySwimLaneChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
.st-anomalySwimLaneChart__cell--category5,
.st-anomalySwimLaneChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
.st-anomalySwimLaneChart__cell--category6,
.st-anomalySwimLaneChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
.st-anomalySwimLaneChart__cell--category7,
.st-anomalySwimLaneChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
.st-anomalySwimLaneChart__cell--category8,
.st-anomalySwimLaneChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }

.st-anomalySwimLaneChart__legend {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-anomalySwimLaneChart__legendRamp {
  display: inline-grid;
  grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
  min-width: 8rem;
}

.st-anomalySwimLaneChart__legendSwatch {
  display: block;
  height: 0.5rem;
}

.st-anomalySwimLaneChart__legendText {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

.st-anomalySwimLaneChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-anomalySwimLaneChart__tooltipLabel {
  font-weight: 600;
}

.st-anomalySwimLaneChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-anomalySwimLaneChart__cell {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   FunnelChart — entonnoir de trapèzes décroissants (vertical/horizontal).
   --------------------------------------------------------------------------- */
.st-funnelChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-funnelChart svg,
.st-funnelChart__visual {
  display: block;
  overflow: visible;
}

.st-funnelChart__segment {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-funnelChart__segment--dim {
  opacity: 0.45;
}

.st-funnelChart__segment--category1 { fill: var(--st-semantic-data-category1); }
.st-funnelChart__segment--category2 { fill: var(--st-semantic-data-category2); }
.st-funnelChart__segment--category3 { fill: var(--st-semantic-data-category3); }
.st-funnelChart__segment--category4 { fill: var(--st-semantic-data-category4); }
.st-funnelChart__segment--category5 { fill: var(--st-semantic-data-category5); }
.st-funnelChart__segment--category6 { fill: var(--st-semantic-data-category6); }
.st-funnelChart__segment--category7 { fill: var(--st-semantic-data-category7); }
.st-funnelChart__segment--category8 { fill: var(--st-semantic-data-category8); }

.st-funnelChart__label {
  fill: var(--st-component-funnelChart-labelColor, var(--st-semantic-text-inverse));
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}

.st-funnelChart__value {
  fill: var(--st-component-funnelChart-valueColor, var(--st-semantic-text-inverse));
  font-size: 0.6875rem;
  pointer-events: none;
}

.st-funnelChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-funnelChart__tooltipLabel { font-weight: 600; }
.st-funnelChart__tooltipValue { opacity: 0.85; }

.st-funnelChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.st-funnelChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.35rem;
}

.st-funnelChart__legendSwatch {
  border-radius: 2px;
  height: 0.7rem;
  width: 0.7rem;
}

.st-funnelChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-funnelChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-funnelChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-funnelChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-funnelChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-funnelChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-funnelChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-funnelChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-funnelChart__segment {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   WaterfallChart — barres flottantes cumulatives (hausse/baisse/total).
   --------------------------------------------------------------------------- */
.st-waterfallChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-waterfallChart svg {
  display: block;
  overflow: visible;
}

.st-waterfallChart__visual {
  display: block;
}

.st-waterfallChart__grid {
  stroke: var(--st-component-waterfallChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-waterfallChart__axis {
  stroke: var(--st-component-waterfallChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-waterfallChart__zero {
  stroke: var(--st-component-waterfallChart-zeroStroke, var(--st-semantic-border-strong));
  stroke-width: 1;
}

.st-waterfallChart__connector {
  stroke: var(--st-component-waterfallChart-connectorStroke, var(--st-semantic-border-strong));
  stroke-dasharray: 3 2;
  stroke-width: 1;
  opacity: 0.6;
}

.st-waterfallChart__tickLabel,
.st-waterfallChart__categoryLabel {
  fill: var(--st-component-waterfallChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-waterfallChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-waterfallChart__bar:hover {
  opacity: 0.82;
}

.st-waterfallChart__bar--increase {
  fill: var(--st-component-waterfallChart-increaseFill, var(--st-semantic-feedback-success));
}
.st-waterfallChart__bar--decrease {
  fill: var(--st-component-waterfallChart-decreaseFill, var(--st-semantic-feedback-error));
}
.st-waterfallChart__bar--total {
  fill: var(--st-component-waterfallChart-totalFill, var(--st-semantic-data-category1));
}

@media (prefers-reduced-motion: reduce) {
  .st-waterfallChart__bar {
    transition: none;
  }
}

.st-waterfallChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0;
  padding: 0;
}

.st-waterfallChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-waterfallChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.75rem;
  width: 0.75rem;
}

.st-waterfallChart__legendSwatch--increase {
  background: var(--st-component-waterfallChart-increaseFill, var(--st-semantic-feedback-success));
}
.st-waterfallChart__legendSwatch--decrease {
  background: var(--st-component-waterfallChart-decreaseFill, var(--st-semantic-feedback-error));
}
.st-waterfallChart__legendSwatch--total {
  background: var(--st-component-waterfallChart-totalFill, var(--st-semantic-data-category1));
}

.st-waterfallChart__tooltip {
  background: var(--st-component-waterfallChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-waterfallChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-waterfallChart__tooltipLabel {
  font-weight: 600;
}

.st-waterfallChart__tooltipValue {
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   TreemapChart — pavage squarified hiérarchique (1 ou 2 niveaux).
   --------------------------------------------------------------------------- */
.st-treemapChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-treemapChart svg,
.st-treemapChart__visual {
  display: block;
  overflow: visible;
}

.st-treemapChart__rect {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  transition: opacity 120ms ease;
}

.st-treemapChart__rect--dim {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .st-treemapChart__rect {
    transition: none;
  }
}

.st-treemapChart__rect--category1 { fill: var(--st-semantic-data-category1); }
.st-treemapChart__rect--category2 { fill: var(--st-semantic-data-category2); }
.st-treemapChart__rect--category3 { fill: var(--st-semantic-data-category3); }
.st-treemapChart__rect--category4 { fill: var(--st-semantic-data-category4); }
.st-treemapChart__rect--category5 { fill: var(--st-semantic-data-category5); }
.st-treemapChart__rect--category6 { fill: var(--st-semantic-data-category6); }
.st-treemapChart__rect--category7 { fill: var(--st-semantic-data-category7); }
.st-treemapChart__rect--category8 { fill: var(--st-semantic-data-category8); }

.st-treemapChart__label {
  fill: var(--st-component-treemapChart-labelColor, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}

.st-treemapChart__value {
  fill: var(--st-component-treemapChart-valueColor, #fff);
  font-size: 0.6875rem;
  opacity: 0.85;
  pointer-events: none;
}

.st-treemapChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-treemapChart__tooltipLabel { font-weight: 600; }
.st-treemapChart__tooltipValue { opacity: 0.85; }

.st-treemapChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0;
  padding: 0;
}

.st-treemapChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.35rem);
}

.st-treemapChart__legendSwatch {
  border-radius: 2px;
  height: 0.7rem;
  width: 0.7rem;
}

.st-treemapChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-treemapChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-treemapChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-treemapChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-treemapChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-treemapChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-treemapChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-treemapChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

/* ── Lot 2 : Heatmap / Sankey / BoxPlot / Histogram / Radar / Sunburst ── */

.st-heatmapChart,
.st-histogramChart,
.st-boxPlotChart,
.st-radarChart,
.st-sankeyChart,
.st-sunburstChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-heatmapChart svg,
.st-heatmapChart__visual,
.st-histogramChart svg,
.st-histogramChart__visual,
.st-boxPlotChart svg,
.st-boxPlotChart__visual,
.st-radarChart svg,
.st-radarChart__visual,
.st-sankeyChart svg,
.st-sankeyChart__visual,
.st-sunburstChart svg,
.st-sunburstChart__visual {
  display: block;
  overflow: visible;
}

/* ── Axis labels ── */
.st-heatmapChart__axisLabel,
.st-histogramChart__label,
.st-boxPlotChart__label,
.st-radarChart__axisLabel,
.st-sankeyChart__nodeLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

/* ── Axes / grids ── */
.st-histogramChart__axis,
.st-boxPlotChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-radarChart__ring,
.st-radarChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-radarChart__ring {
  fill: none;
}

/* ── Heatmap ── */
.st-heatmapChart__plot {
  fill: none;
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-heatmapChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-heatmapChart__cell--dim {
  opacity: 0.45;
}

/* ── Histogram ── */
.st-histogramChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-histogramChart__bar--dim {
  opacity: 0.45;
}

/* ── BoxPlot ── */
.st-boxPlotChart__axis,
.st-boxPlotChart__whisker,
.st-boxPlotChart__whiskerCap {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-boxPlotChart__median {
  stroke: var(--st-semantic-text-primary);
  stroke-width: 2;
}

.st-boxPlotChart__box {
  cursor: pointer;
  fill-opacity: 0.72;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-boxPlotChart__box--dim {
  opacity: 0.45;
}

.st-boxPlotChart__outlier {
  fill: var(--st-semantic-surface-default, Canvas);
  stroke: var(--st-semantic-text-secondary);
  stroke-width: 1.5;
}

/* ── Radar ── */
.st-radarChart__polygon {
  cursor: pointer;
  fill-opacity: 0.16;
  stroke-width: 2;
  transition: opacity 120ms ease;
}

.st-radarChart__polygon--dim {
  opacity: 0.35;
}

.st-radarChart__point {
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
}

/* ── Sankey ── */
.st-sankeyChart__node {
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
}

.st-sankeyChart__link {
  cursor: pointer;
  fill: none;
  opacity: 0.38;
  stroke-linecap: round;
  transition: opacity 120ms ease;
}

.st-sankeyChart__link:hover {
  opacity: 0.62;
}

.st-sankeyChart__link--dim {
  opacity: 0.16;
}

/* ── Sunburst ── */
.st-sunburstChart__arc {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-sunburstChart__arc--dim {
  opacity: 0.4;
}

.st-sunburstChart__label {
  font-size: 0.68rem;
  font-weight: 650;
  pointer-events: none;
}

/* ── Category fills — cells / bars / boxes / nodes / arcs ── */
.st-heatmapChart__cell--category1,
.st-histogramChart__bar--category1,
.st-boxPlotChart__box--category1,
.st-sankeyChart__node--category1,
.st-sunburstChart__arc--category1 { fill: var(--st-semantic-data-category1); }
.st-heatmapChart__cell--category2,
.st-histogramChart__bar--category2,
.st-boxPlotChart__box--category2,
.st-sankeyChart__node--category2,
.st-sunburstChart__arc--category2 { fill: var(--st-semantic-data-category2); }
.st-heatmapChart__cell--category3,
.st-histogramChart__bar--category3,
.st-boxPlotChart__box--category3,
.st-sankeyChart__node--category3,
.st-sunburstChart__arc--category3 { fill: var(--st-semantic-data-category3); }
.st-heatmapChart__cell--category4,
.st-histogramChart__bar--category4,
.st-boxPlotChart__box--category4,
.st-sankeyChart__node--category4,
.st-sunburstChart__arc--category4 { fill: var(--st-semantic-data-category4); }
.st-heatmapChart__cell--category5,
.st-histogramChart__bar--category5,
.st-boxPlotChart__box--category5,
.st-sankeyChart__node--category5,
.st-sunburstChart__arc--category5 { fill: var(--st-semantic-data-category5); }
.st-heatmapChart__cell--category6,
.st-histogramChart__bar--category6,
.st-boxPlotChart__box--category6,
.st-sankeyChart__node--category6,
.st-sunburstChart__arc--category6 { fill: var(--st-semantic-data-category6); }
.st-heatmapChart__cell--category7,
.st-histogramChart__bar--category7,
.st-boxPlotChart__box--category7,
.st-sankeyChart__node--category7,
.st-sunburstChart__arc--category7 { fill: var(--st-semantic-data-category7); }
.st-heatmapChart__cell--category8,
.st-histogramChart__bar--category8,
.st-boxPlotChart__box--category8,
.st-sankeyChart__node--category8,
.st-sunburstChart__arc--category8 { fill: var(--st-semantic-data-category8); }

/* ── Radar polygon + point (fill + stroke) ── */
.st-radarChart__polygon--category1,
.st-radarChart__point--category1,
.st-radarChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); stroke: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
.st-radarChart__polygon--category2,
.st-radarChart__point--category2,
.st-radarChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); stroke: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
.st-radarChart__polygon--category3,
.st-radarChart__point--category3,
.st-radarChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); stroke: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
.st-radarChart__polygon--category4,
.st-radarChart__point--category4,
.st-radarChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); stroke: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
.st-radarChart__polygon--category5,
.st-radarChart__point--category5,
.st-radarChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); stroke: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
.st-radarChart__polygon--category6,
.st-radarChart__point--category6,
.st-radarChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); stroke: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
.st-radarChart__polygon--category7,
.st-radarChart__point--category7,
.st-radarChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); stroke: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
.st-radarChart__polygon--category8,
.st-radarChart__point--category8,
.st-radarChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); stroke: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }

/* ── Sankey links (stroke seulement) ── */
.st-sankeyChart__link--category1 { stroke: var(--st-semantic-data-category1); }
.st-sankeyChart__link--category2 { stroke: var(--st-semantic-data-category2); }
.st-sankeyChart__link--category3 { stroke: var(--st-semantic-data-category3); }
.st-sankeyChart__link--category4 { stroke: var(--st-semantic-data-category4); }
.st-sankeyChart__link--category5 { stroke: var(--st-semantic-data-category5); }
.st-sankeyChart__link--category6 { stroke: var(--st-semantic-data-category6); }
.st-sankeyChart__link--category7 { stroke: var(--st-semantic-data-category7); }
.st-sankeyChart__link--category8 { stroke: var(--st-semantic-data-category8); }

/* ── Heatmap legend (gradient ramp) ── */
.st-heatmapChart__legend {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-heatmapChart__legendRamp {
  display: inline-grid;
  grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
  min-width: 8rem;
}

.st-heatmapChart__legendSwatch {
  display: block;
  height: 0.5rem;
}

.st-heatmapChart__legendText {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

.st-heatmapChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-heatmapChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-heatmapChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-heatmapChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-heatmapChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-heatmapChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-heatmapChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-heatmapChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

/* ── Radar legend ── */
.st-radarChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0;
  padding: 0;
}

.st-radarChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-radarChart__legendSwatch {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}

/* ── Sunburst legend ── */
.st-sunburstChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-2, 0.5rem) var(--st-spacing-4, 1rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0;
  padding: 0;
}

.st-sunburstChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-sunburstChart__legendSwatch {
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}

.st-sunburstChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-sunburstChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-sunburstChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-sunburstChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-sunburstChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-sunburstChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-sunburstChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-sunburstChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

/* ── Tooltips communs ── */
.st-heatmapChart__tooltip,
.st-histogramChart__tooltip,
.st-boxPlotChart__tooltip,
.st-radarChart__tooltip,
.st-sankeyChart__tooltip,
.st-sunburstChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-radarChart__tooltip {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.st-heatmapChart__tooltipLabel,
.st-histogramChart__tooltipLabel,
.st-boxPlotChart__tooltipLabel,
.st-radarChart__tooltipLabel,
.st-sankeyChart__tooltipLabel,
.st-sunburstChart__tooltipLabel {
  font-weight: 600;
}

.st-heatmapChart__tooltipValue,
.st-histogramChart__tooltipValue,
.st-boxPlotChart__tooltipValue,
.st-sankeyChart__tooltipValue,
.st-sunburstChart__tooltipValue {
  opacity: 0.85;
}

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .st-heatmapChart__cell,
  .st-histogramChart__bar,
  .st-boxPlotChart__box,
  .st-radarChart__polygon,
  .st-sankeyChart__link,
  .st-sunburstChart__arc {
    transition: none;
  }
}

/* ── BulletChart (lot-3) ── */
.st-bulletChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-bulletChart svg {
  display: block;
  overflow: visible;
}

.st-bulletChart__visual {
  display: block;
}

.st-bulletChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-bulletChart__baseline {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1.5;
}

.st-bulletChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.6;
}

.st-bulletChart__range {
  fill: var(--st-semantic-data-category1);
}

.st-bulletChart__bar {
  cursor: pointer;
  fill: var(--st-semantic-text-secondary);
  transition: opacity 120ms ease;
}

.st-bulletChart__bar:hover {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .st-bulletChart__bar {
    transition: none;
  }
}

.st-bulletChart__target {
  stroke: var(--st-semantic-text-primary, currentColor);
  stroke-width: 2.5;
}

.st-bulletChart__tickLabel,
.st-bulletChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-bulletChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-bulletChart__tooltipLabel {
  font-weight: 600;
}

.st-bulletChart__tooltipValue {
  opacity: 0.85;
}

/* ── LollipopChart ── */
.st-lollipopChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-lollipopChart svg {
  display: block;
  overflow: visible;
}

.st-lollipopChart__visual {
  display: block;
}

.st-lollipopChart__grid {
  stroke: var(--st-component-lollipopChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-lollipopChart__axis {
  stroke: var(--st-component-lollipopChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-lollipopChart__tickLabel,
.st-lollipopChart__categoryLabel {
  fill: var(--st-component-lollipopChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-lollipopChart__valueLabel {
  font-size: 0.625rem;
  font-weight: 600;
}

.st-lollipopChart__stem {
  stroke: var(--st-semantic-border-interactive, var(--st-semantic-border-subtle));
  stroke-width: 1.5;
}

.st-lollipopChart__dot {
  cursor: pointer;
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-lollipopChart__dot:hover {
  opacity: 0.82;
}

.st-lollipopChart__dot--category1 { fill: var(--st-semantic-data-category1); }
.st-lollipopChart__dot--category2 { fill: var(--st-semantic-data-category2); }
.st-lollipopChart__dot--category3 { fill: var(--st-semantic-data-category3); }
.st-lollipopChart__dot--category4 { fill: var(--st-semantic-data-category4); }
.st-lollipopChart__dot--category5 { fill: var(--st-semantic-data-category5); }
.st-lollipopChart__dot--category6 { fill: var(--st-semantic-data-category6); }
.st-lollipopChart__dot--category7 { fill: var(--st-semantic-data-category7); }
.st-lollipopChart__dot--category8 { fill: var(--st-semantic-data-category8); }

.st-lollipopChart__tooltip {
  background: var(--st-component-lollipopChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-lollipopChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-lollipopChart__tooltipLabel {
  font-weight: 600;
}

.st-lollipopChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-lollipopChart__dot {
    transition: none;
  }
}

/* ── ParetoChart ── */
.st-paretoChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-paretoChart svg {
  display: block;
  overflow: visible;
}

.st-paretoChart__visual {
  display: block;
}

.st-paretoChart__grid {
  stroke: var(--st-component-paretoChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-paretoChart__axis {
  stroke: var(--st-component-paretoChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-paretoChart__tickLabel,
.st-paretoChart__categoryLabel,
.st-paretoChart__percentLabel {
  fill: var(--st-component-paretoChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-paretoChart__bar {
  cursor: pointer;
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-paretoChart__bar:hover {
  opacity: 0.82;
}

.st-paretoChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-paretoChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-paretoChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-paretoChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-paretoChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-paretoChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-paretoChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-paretoChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-paretoChart__cumLine {
  stroke: var(--st-semantic-action-primary, var(--st-semantic-border-interactive));
  stroke-width: 2;
}

.st-paretoChart__cumDot {
  cursor: pointer;
  fill: var(--st-semantic-action-primary, var(--st-semantic-border-interactive));
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-paretoChart__cumDot:hover {
  opacity: 0.82;
}

.st-paretoChart__tooltip {
  background: var(--st-component-paretoChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-paretoChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-paretoChart__tooltipLabel {
  font-weight: 600;
}

.st-paretoChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-paretoChart__bar,
  .st-paretoChart__cumDot {
    transition: none;
  }
}

/* ── MarimekkoChart (lot-3) ── */
.st-marimekkoChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-marimekkoChart svg {
  display: block;
  overflow: visible;
}

.st-marimekkoChart__visual {
  display: block;
}

.st-marimekkoChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-marimekkoChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-marimekkoChart__cell--dim {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .st-marimekkoChart__cell {
    transition: none;
  }
}

.st-marimekkoChart__cell--category1 { fill: var(--st-semantic-data-category1); }
.st-marimekkoChart__cell--category2 { fill: var(--st-semantic-data-category2); }
.st-marimekkoChart__cell--category3 { fill: var(--st-semantic-data-category3); }
.st-marimekkoChart__cell--category4 { fill: var(--st-semantic-data-category4); }
.st-marimekkoChart__cell--category5 { fill: var(--st-semantic-data-category5); }
.st-marimekkoChart__cell--category6 { fill: var(--st-semantic-data-category6); }
.st-marimekkoChart__cell--category7 { fill: var(--st-semantic-data-category7); }
.st-marimekkoChart__cell--category8 { fill: var(--st-semantic-data-category8); }

.st-marimekkoChart__cellLabel {
  font-size: 0.625rem;
  pointer-events: none;
}

.st-marimekkoChart__catLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-marimekkoChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-marimekkoChart__tooltipLabel {
  font-weight: 600;
}

.st-marimekkoChart__tooltipValue {
  opacity: 0.85;
}

/* ── CandlestickChart (lot-3) ── */
.st-candlestickChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-candlestickChart svg {
  display: block;
  overflow: visible;
}

.st-candlestickChart__visual {
  display: block;
  position: relative;
}

.st-candlestickChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-candlestickChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-candlestickChart__wick {
  stroke-width: 1.5;
}

.st-candlestickChart__wick--up {
  stroke: var(--st-semantic-feedback-success);
}

.st-candlestickChart__wick--down {
  stroke: var(--st-semantic-feedback-error);
}

.st-candlestickChart__body {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-candlestickChart__body--dim {
  opacity: 0.4;
}

.st-candlestickChart__body--up {
  fill: var(--st-semantic-feedback-success);
}

.st-candlestickChart__body--down {
  fill: var(--st-semantic-feedback-error);
}

/* --- Annotation layer ------------------------------------------------------
   Regions render BEHIND the candles; lines/shapes/points/labels render ABOVE. */
.st-candlestickChart__annotationRegion {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
  stroke: none;
}
.st-candlestickChart__annotationLine {
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.st-candlestickChart__annotationShape {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
}
.st-candlestickChart__annotationPoint {
  fill: var(--st-semantic-feedback-info);
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
}
.st-candlestickChart__annotationLabel,
.st-candlestickChart__annotationText {
  fill: var(--st-semantic-text-primary);
  font-size: 0.625rem;
  font-weight: 600;
}

/* Data labels — per-candle close value, drawn on top. Token-only colour. */
.st-candlestickChart__dataLabel {
  fill: var(--st-semantic-text-primary);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Crosshair (FR-3) — a tokenised dashed vertical line at the active candle. */
.st-candlestickChart__crosshairLine {
  stroke: var(--st-semantic-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

/* Keyboard navigation layer (FR-5) — a focusable, transparent overlay of one
   hit-rect per candle. Carries the roving tab stop; the focus ring is tokenised. */
.st-candlestickChart__navLayer {
  inset: 0;
  position: absolute;
}
.st-candlestickChart__navDatum {
  fill: transparent;
  outline: none;
}
.st-candlestickChart__navDatum:focus-visible {
  fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .st-candlestickChart__body {
    transition: none;
  }
}

.st-candlestickChart__tickLabel,
.st-candlestickChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-candlestickChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-candlestickChart__tooltipLabel {
  font-weight: 600;
}

.st-candlestickChart__tooltipValue {
  opacity: 0.85;
}

/* ── OHLCChart ── */
.st-ohlcChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-ohlcChart svg {
  display: block;
  overflow: visible;
}

.st-ohlcChart__visual {
  display: block;
  position: relative;
}

.st-ohlcChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-ohlcChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-ohlcChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-ohlcChart__bar--dim {
  opacity: 0.4;
}

.st-ohlcChart__range,
.st-ohlcChart__open,
.st-ohlcChart__close {
  stroke-width: 1.75;
  stroke-linecap: round;
}

.st-ohlcChart__bar--up :is(.st-ohlcChart__range, .st-ohlcChart__open, .st-ohlcChart__close) {
  stroke: var(--st-semantic-feedback-success);
}

.st-ohlcChart__bar--down :is(.st-ohlcChart__range, .st-ohlcChart__open, .st-ohlcChart__close) {
  stroke: var(--st-semantic-feedback-error);
}

/* --- Annotation layer ------------------------------------------------------
   Regions render BEHIND the bars; lines/shapes/points/labels render ABOVE. */
.st-ohlcChart__annotationRegion {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 12%, transparent);
  stroke: none;
}
.st-ohlcChart__annotationLine {
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.st-ohlcChart__annotationShape {
  fill: color-mix(in srgb, var(--st-semantic-feedback-info) 14%, transparent);
  stroke: var(--st-semantic-feedback-info);
  stroke-width: 1.5;
}
.st-ohlcChart__annotationPoint {
  fill: var(--st-semantic-feedback-info);
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
}
.st-ohlcChart__annotationLabel,
.st-ohlcChart__annotationText {
  fill: var(--st-semantic-text-primary);
  font-size: 0.625rem;
  font-weight: 600;
}

/* Data labels — per-bar close value, drawn on top. Token-only colour. */
.st-ohlcChart__dataLabel {
  fill: var(--st-semantic-text-primary);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Crosshair (FR-3) — a tokenised dashed vertical line at the active bar. */
.st-ohlcChart__crosshairLine {
  stroke: var(--st-semantic-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

/* Keyboard navigation layer (FR-5) — a focusable, transparent overlay of one
   hit-rect per bar. Carries the roving tab stop; the focus ring is tokenised. */
.st-ohlcChart__navLayer {
  inset: 0;
  position: absolute;
}
.st-ohlcChart__navDatum {
  fill: transparent;
  outline: none;
}
.st-ohlcChart__navDatum:focus-visible {
  fill: color-mix(in srgb, var(--st-semantic-border-interactive) 12%, transparent);
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .st-ohlcChart__bar {
    transition: none;
  }
}

.st-ohlcChart__tickLabel,
.st-ohlcChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-ohlcChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-ohlcChart__tooltipLabel {
  font-weight: 600;
}

.st-ohlcChart__tooltipValue {
  opacity: 0.85;
}

/* ── HollowCandlestickChart ── */
.st-hollowCandlestickChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-hollowCandlestickChart svg {
  display: block;
  overflow: visible;
}

.st-hollowCandlestickChart__visual {
  display: block;
}

.st-hollowCandlestickChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-hollowCandlestickChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-hollowCandlestickChart__wick {
  stroke-width: 1.5;
}

.st-hollowCandlestickChart__wick--up {
  stroke: var(--st-semantic-feedback-success);
}

.st-hollowCandlestickChart__wick--down {
  stroke: var(--st-semantic-feedback-error);
}

.st-hollowCandlestickChart__candle {
  cursor: pointer;
  stroke-width: 1.5;
  transition: opacity 120ms ease;
}

.st-hollowCandlestickChart__candle--dim {
  opacity: 0.4;
}

.st-hollowCandlestickChart__candle--up {
  stroke: var(--st-semantic-feedback-success);
}

.st-hollowCandlestickChart__candle--down {
  stroke: var(--st-semantic-feedback-error);
}

.st-hollowCandlestickChart__candle--hollow {
  fill: transparent;
}

.st-hollowCandlestickChart__candle--filled.st-hollowCandlestickChart__candle--up {
  fill: var(--st-semantic-feedback-success);
}

.st-hollowCandlestickChart__candle--filled.st-hollowCandlestickChart__candle--down {
  fill: var(--st-semantic-feedback-error);
}

@media (prefers-reduced-motion: reduce) {
  .st-hollowCandlestickChart__candle {
    transition: none;
  }
}

.st-hollowCandlestickChart__tickLabel,
.st-hollowCandlestickChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-hollowCandlestickChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-hollowCandlestickChart__tooltipLabel {
  font-weight: 600;
}

.st-hollowCandlestickChart__tooltipValue {
  opacity: 0.85;
}

/* ── StreamgraphChart ── */
.st-streamgraphChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-streamgraphChart svg,
.st-streamgraphChart__visual {
  display: block;
  overflow: visible;
}

.st-streamgraphChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-streamgraphChart__tickLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-streamgraphChart__area {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 0.75;
  transition: opacity 120ms ease;
}

.st-streamgraphChart__area--dim {
  opacity: 0.4;
}

.st-streamgraphChart__area--category1 {
  fill: var(--st-semantic-data-category1);
}

.st-streamgraphChart__area--category2 {
  fill: var(--st-semantic-data-category2);
}

.st-streamgraphChart__area--category3 {
  fill: var(--st-semantic-data-category3);
}

.st-streamgraphChart__area--category4 {
  fill: var(--st-semantic-data-category4);
}

.st-streamgraphChart__area--category5 {
  fill: var(--st-semantic-data-category5);
}

.st-streamgraphChart__area--category6 {
  fill: var(--st-semantic-data-category6);
}

.st-streamgraphChart__area--category7 {
  fill: var(--st-semantic-data-category7);
}

.st-streamgraphChart__area--category8 {
  fill: var(--st-semantic-data-category8);
}

@media (prefers-reduced-motion: reduce) {
  .st-streamgraphChart__area {
    transition: none;
  }
}

.st-streamgraphChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-streamgraphChart__tooltipLabel {
  font-weight: 600;
}

.st-streamgraphChart__tooltipValue {
  opacity: 0.85;
}

.st-streamgraphChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.st-streamgraphChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.35rem;
}

.st-streamgraphChart__legendSwatch {
  border-radius: 2px;
  height: 0.7rem;
  width: 0.7rem;
}

.st-streamgraphChart__legendSwatch--category1 {
  background: var(--st-semantic-data-category1);
}

.st-streamgraphChart__legendSwatch--category2 {
  background: var(--st-semantic-data-category2);
}

.st-streamgraphChart__legendSwatch--category3 {
  background: var(--st-semantic-data-category3);
}

.st-streamgraphChart__legendSwatch--category4 {
  background: var(--st-semantic-data-category4);
}

.st-streamgraphChart__legendSwatch--category5 {
  background: var(--st-semantic-data-category5);
}

.st-streamgraphChart__legendSwatch--category6 {
  background: var(--st-semantic-data-category6);
}

.st-streamgraphChart__legendSwatch--category7 {
  background: var(--st-semantic-data-category7);
}

.st-streamgraphChart__legendSwatch--category8 {
  background: var(--st-semantic-data-category8);
}

/* ── CalendarHeatmapChart (lot-3) ── */
.st-calendarHeatmapChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-calendarHeatmapChart svg {
  display: block;
  overflow: visible;
}

.st-calendarHeatmapChart__visual {
  display: block;
}

.st-calendarHeatmapChart__dayLabel,
.st-calendarHeatmapChart__monthLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.5625rem;
}

.st-calendarHeatmapChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-calendarHeatmapChart__cell--empty {
  fill: var(--st-semantic-border-subtle);
  opacity: 0.25;
}

.st-calendarHeatmapChart__cell--dim {
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .st-calendarHeatmapChart__cell {
    transition: none;
  }
}

.st-calendarHeatmapChart__cell--category1 { fill: var(--st-semantic-data-category1); }
.st-calendarHeatmapChart__cell--category2 { fill: var(--st-semantic-data-category2); }
.st-calendarHeatmapChart__cell--category3 { fill: var(--st-semantic-data-category3); }
.st-calendarHeatmapChart__cell--category4 { fill: var(--st-semantic-data-category4); }
.st-calendarHeatmapChart__cell--category5 { fill: var(--st-semantic-data-category5); }
.st-calendarHeatmapChart__cell--category6 { fill: var(--st-semantic-data-category6); }
.st-calendarHeatmapChart__cell--category7 { fill: var(--st-semantic-data-category7); }
.st-calendarHeatmapChart__cell--category8 { fill: var(--st-semantic-data-category8); }

.st-calendarHeatmapChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-calendarHeatmapChart__tooltipLabel {
  font-weight: 600;
}

.st-calendarHeatmapChart__tooltipValue {
  opacity: 0.85;
}

/* ── ParallelCoordinatesChart (lot-3) ── */
.st-parallelCoordinatesChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-parallelCoordinatesChart svg {
  display: block;
  overflow: visible;
}

.st-parallelCoordinatesChart__visual {
  display: block;
}

.st-parallelCoordinatesChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1.5;
}

.st-parallelCoordinatesChart__axisLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
}

.st-parallelCoordinatesChart__tickLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.5625rem;
}

.st-parallelCoordinatesChart__line {
  cursor: pointer;
  stroke-width: 1.5;
  stroke-opacity: 0.65;
  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
}

.st-parallelCoordinatesChart__line--dim {
  stroke-opacity: 0.12;
}

.st-parallelCoordinatesChart__line--active {
  stroke-opacity: 1;
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
  .st-parallelCoordinatesChart__line {
    transition: none;
  }
}

.st-parallelCoordinatesChart__line--category1 { stroke: var(--st-semantic-data-category1); }
.st-parallelCoordinatesChart__line--category2 { stroke: var(--st-semantic-data-category2); }
.st-parallelCoordinatesChart__line--category3 { stroke: var(--st-semantic-data-category3); }
.st-parallelCoordinatesChart__line--category4 { stroke: var(--st-semantic-data-category4); }
.st-parallelCoordinatesChart__line--category5 { stroke: var(--st-semantic-data-category5); }
.st-parallelCoordinatesChart__line--category6 { stroke: var(--st-semantic-data-category6); }
.st-parallelCoordinatesChart__line--category7 { stroke: var(--st-semantic-data-category7); }
.st-parallelCoordinatesChart__line--category8 { stroke: var(--st-semantic-data-category8); }

/* ── BumpChart (lot-3) ── */
.st-bumpChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-bumpChart svg {
  display: block;
  overflow: visible;
}

.st-bumpChart__visual {
  display: block;
}

.st-bumpChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.5;
}

.st-bumpChart__rankLabel,
.st-bumpChart__catLabel,
.st-bumpChart__seriesLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-bumpChart__line {
  cursor: pointer;
  stroke-width: 2;
  stroke-opacity: 0.7;
  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
}

.st-bumpChart__line--dim {
  stroke-opacity: 0.12;
}

.st-bumpChart__line--active {
  stroke-opacity: 1;
  stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
  .st-bumpChart__line {
    transition: none;
  }
}

.st-bumpChart__dot {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1.5;
  transition: r 120ms ease;
}

.st-bumpChart__dot--dim {
  opacity: 0.15;
}

@media (prefers-reduced-motion: reduce) {
  .st-bumpChart__dot {
    transition: none;
  }
}

.st-bumpChart__line--category1 { stroke: var(--st-semantic-data-category1); }
.st-bumpChart__line--category2 { stroke: var(--st-semantic-data-category2); }
.st-bumpChart__line--category3 { stroke: var(--st-semantic-data-category3); }
.st-bumpChart__line--category4 { stroke: var(--st-semantic-data-category4); }
.st-bumpChart__line--category5 { stroke: var(--st-semantic-data-category5); }
.st-bumpChart__line--category6 { stroke: var(--st-semantic-data-category6); }
.st-bumpChart__line--category7 { stroke: var(--st-semantic-data-category7); }
.st-bumpChart__line--category8 { stroke: var(--st-semantic-data-category8); }

.st-bumpChart__dot--category1 { fill: var(--st-semantic-data-category1); }
.st-bumpChart__dot--category2 { fill: var(--st-semantic-data-category2); }
.st-bumpChart__dot--category3 { fill: var(--st-semantic-data-category3); }
.st-bumpChart__dot--category4 { fill: var(--st-semantic-data-category4); }
.st-bumpChart__dot--category5 { fill: var(--st-semantic-data-category5); }
.st-bumpChart__dot--category6 { fill: var(--st-semantic-data-category6); }
.st-bumpChart__dot--category7 { fill: var(--st-semantic-data-category7); }
.st-bumpChart__dot--category8 { fill: var(--st-semantic-data-category8); }

/* ---------------------------------------------------------------------------
   FilterPill
   --------------------------------------------------------------------------- */

.st-filterPill {
  align-items: center;
  border-radius: var(--st-radius-pill, 999px);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 500;
  gap: 0;
  line-height: 1;
  transition:
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  user-select: none;
}

.st-filterPill--neutral {
  background: var(--st-semantic-surface-subtle, #f8fafc);
  color: var(--st-semantic-text-secondary, #475569);
  border: 1px solid var(--st-semantic-border-interactive, #cbd5e1);
}

.st-filterPill--success {
  background: color-mix(in srgb, var(--st-semantic-feedback-success, #16a34a) 12%, white);
  color: color-mix(in oklch, var(--st-semantic-feedback-success, #16a34a) 78%, black);
  border: 1px solid color-mix(in srgb, var(--st-semantic-feedback-success, #16a34a) 40%, white);
}

.st-filterPill--warning {
  background: color-mix(in srgb, var(--st-semantic-feedback-warning, #d97706) 12%, white);
  color: color-mix(in oklch, var(--st-semantic-feedback-warning, #d97706) 78%, black);
  border: 1px solid color-mix(in srgb, var(--st-semantic-feedback-warning, #d97706) 40%, white);
}

.st-filterPill--error {
  background: color-mix(in srgb, var(--st-semantic-feedback-error, #dc2626) 12%, white);
  color: color-mix(in oklch, var(--st-semantic-feedback-error, #dc2626) 78%, black);
  border: 1px solid color-mix(in srgb, var(--st-semantic-feedback-error, #dc2626) 40%, white);
}

.st-filterPill--info {
  background: color-mix(in srgb, var(--st-semantic-feedback-info, #2563eb) 12%, white);
  color: color-mix(in oklch, var(--st-semantic-feedback-info, #2563eb) 78%, black);
  border: 1px solid color-mix(in srgb, var(--st-semantic-feedback-info, #2563eb) 40%, white);
}

.st-filterPill--neutral.st-filterPill--active {
  background: var(--st-component-filterPill-activeBackground, color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 12%, white));
  color: var(--st-component-filterPill-activeText, color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 78%, black));
  border-color: color-mix(in oklch, var(--st-semantic-action-primary, #2563eb) 50%, white);
}

.st-filterPill--success.st-filterPill--active {
  background: color-mix(in oklch, var(--st-semantic-feedback-success, #16a34a) 78%, black);
  color: white;
  border-color: color-mix(in oklch, var(--st-semantic-feedback-success, #16a34a) 78%, black);
}

.st-filterPill--warning.st-filterPill--active {
  background: color-mix(in oklch, var(--st-semantic-feedback-warning, #d97706) 78%, black);
  color: white;
  border-color: color-mix(in oklch, var(--st-semantic-feedback-warning, #d97706) 78%, black);
}

.st-filterPill--error.st-filterPill--active {
  background: color-mix(in oklch, var(--st-semantic-feedback-error, #dc2626) 78%, black);
  color: white;
  border-color: color-mix(in oklch, var(--st-semantic-feedback-error, #dc2626) 78%, black);
}

.st-filterPill--info.st-filterPill--active {
  background: color-mix(in oklch, var(--st-semantic-feedback-info, #2563eb) 78%, black);
  color: white;
  border-color: color-mix(in oklch, var(--st-semantic-feedback-info, #2563eb) 78%, black);
}

@supports not (color: color-mix(in oklch, red, blue)) {
  .st-filterPill--neutral.st-filterPill--active {
    background: var(--st-component-filterPill-activeBackground, var(--st-semantic-surface-subtle, #eef2ff));
    color: var(--st-component-filterPill-activeText, var(--st-semantic-action-primary, #1d4ed8));
  }
  .st-filterPill--success.st-filterPill--active { background: var(--st-semantic-feedback-success, #16a34a); color: white; }
  .st-filterPill--warning.st-filterPill--active { background: var(--st-semantic-feedback-warning, #d97706); color: white; }
  .st-filterPill--error.st-filterPill--active { background: var(--st-semantic-feedback-error, #dc2626); color: white; }
  .st-filterPill--info.st-filterPill--active { background: var(--st-semantic-feedback-info, #2563eb); color: white; }
}

.st-filterPill--disabled {
  cursor: var(--st-cursor-disabled, not-allowed);
  opacity: 0.55;
}

.st-filterPill__body {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-pill, 999px) 0 0 var(--st-radius-pill, 999px);
  color: inherit;
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  font: inherit;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
  padding: 0.3125rem var(--st-spacing-1, 0.25rem) 0.3125rem var(--st-spacing-2, 0.5rem);
  transition:
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-filterPill__body--static {
  cursor: default;
  padding: 0.3125rem var(--st-spacing-2, 0.5rem);
  border-radius: var(--st-radius-pill, 999px);
}

.st-filterPill:has(.st-filterPill__remove) .st-filterPill__body--static {
  border-radius: var(--st-radius-pill, 999px) 0 0 var(--st-radius-pill, 999px);
  padding-right: var(--st-spacing-1, 0.25rem);
}

.st-filterPill__body:not(:disabled):hover { opacity: 0.88; }

.st-filterPill__body:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive, var(--st-semantic-action-primary, #2563eb));
  outline-offset: 2px;
  border-radius: var(--st-radius-pill, 999px);
  z-index: 1;
  position: relative;
}

.st-filterPill__body:disabled { cursor: var(--st-cursor-disabled, not-allowed); }

.st-filterPill__operator {
  color: var(--st-semantic-text-muted, #64748b);
  font-size: 0.75em;
  font-style: italic;
  margin-inline: 0.125rem;
}

.st-filterPill__value {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-filterPill__remove {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0 var(--st-radius-pill, 999px) var(--st-radius-pill, 999px) 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 100%;
  justify-content: center;
  line-height: 1;
  padding: 0.3125rem var(--st-spacing-2, 0.5rem) 0.3125rem var(--st-spacing-1, 0.25rem);
  transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  min-width: 1.75rem;
}

.st-filterPill__remove:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.st-filterPill__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  border-radius: var(--st-radius-pill, 999px);
  z-index: 1;
  position: relative;
}

.st-filterPill__remove:disabled { cursor: var(--st-cursor-disabled, not-allowed); }

@media (prefers-reduced-motion: reduce) {
  .st-filterPill,
  .st-filterPill__body,
  .st-filterPill__remove { transition: none; }
}

/* ---------------------------------------------------------------------------
   FilterBar
   --------------------------------------------------------------------------- */

.st-filterBar {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-filterBar__pills {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-filterBar__clearAll {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-md, 0.375rem);
  color: var(--st-semantic-text-link, #2563eb);
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  gap: var(--st-spacing-1, 0.25rem);
  padding: 0.3125rem var(--st-spacing-2, 0.5rem);
  transition:
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  white-space: nowrap;
}

.st-filterBar__clearAll:hover {
  background: var(--st-semantic-surface-subtle, #f8fafc);
  color: var(--st-semantic-action-primaryHover, #1d4ed8);
}

.st-filterBar__clearAll:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive, #2563eb);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .st-filterBar__clearAll { transition: none; }
}

/* ---------------------------------------------------------------------------
   SelectionChip
   --------------------------------------------------------------------------- */

.st-selectionChip {
  align-items: center;
  border-radius: var(--st-radius-pill, 999px);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
  padding: 0.25rem var(--st-spacing-2, 0.5rem);
}

.st-selectionChip--neutral {
  background: var(--st-semantic-surface-subtle, #f8fafc);
  color: var(--st-semantic-text-secondary, #475569);
}

.st-selectionChip--success {
  background: color-mix(in srgb, var(--st-semantic-feedback-success, #16a34a) 14%, white);
  color: var(--st-semantic-feedback-success, #16a34a);
}

.st-selectionChip--warning {
  background: color-mix(in srgb, var(--st-semantic-feedback-warning, #d97706) 14%, white);
  color: var(--st-semantic-feedback-warning, #d97706);
}

.st-selectionChip--error {
  background: color-mix(in srgb, var(--st-semantic-feedback-error, #dc2626) 14%, white);
  color: var(--st-semantic-feedback-error, #dc2626);
}

.st-selectionChip--info {
  background: color-mix(in srgb, var(--st-semantic-feedback-info, #2563eb) 14%, white);
  color: var(--st-semantic-feedback-info, #2563eb);
}

.st-selectionChip--disabled {
  cursor: var(--st-cursor-disabled, not-allowed);
  opacity: 0.55;
}

.st-selectionChip__count {
  color: inherit;
  opacity: 0.75;
}

.st-selectionChip__clear {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1em;
  height: 1.25em;
  justify-content: center;
  line-height: 1;
  margin-inline-start: 0.0625rem;
  padding: 0;
  transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  width: 1.25em;
}

.st-selectionChip__clear:hover:not(:disabled) {
  background: var(--st-semantic-surface-subtle, #f1f5f9);
}

.st-selectionChip__clear:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.st-selectionChip__clear:disabled { cursor: var(--st-cursor-disabled, not-allowed); }

@media (prefers-reduced-motion: reduce) {
  .st-selectionChip__clear { transition: none; }
}

/* --- Shell : AppHeader / LanguageToggle / IdentityMenu (calque sentropic) --- */
.st-appHeader {
  background: var(--st-semantic-surface-default);
  border-bottom: 1px solid var(--st-semantic-border-subtle);
  color: var(--st-semantic-text-primary);
  font-family: var(--st-font-sans);
  width: 100%;
}

.st-appHeader__bar {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-4, 1rem);
  height: var(--st-component-appHeader-height, 3.5rem);
  justify-content: space-between;
  padding: 0 var(--st-spacing-4, 1rem);
  width: 100%;
}

.st-appHeader__nav {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 500;
  gap: var(--st-spacing-4, 1rem);
  min-width: 0;
}

.st-appHeader__burger {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.st-appHeader__burgerButton {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-primary);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: var(--st-spacing-2, 0.5rem);
}

.st-appHeader__burgerButton:hover {
  background: var(--st-semantic-surface-subtle);
}

.st-appHeader__burgerButton:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-appHeader__burgerIcon {
  display: block;
}

.st-appHeader__logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.st-appHeader__brand {
  align-items: center;
  color: var(--st-semantic-text-primary);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--st-spacing-3, 0.75rem);
  min-width: 0;
  text-decoration: none;
}

.st-appHeader__brand:hover,
.st-appHeader__brand:focus-visible {
  text-decoration: none;
}

.st-appHeader__brand:focus-visible {
  border-radius: var(--st-radius-sm, 0.375rem);
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-appHeader__brandMark {
  aspect-ratio: 1;
  display: inline-block;
  flex: 0 0 auto;
  height: 2rem;
  object-fit: contain;
  width: 2rem;
}

.st-appHeader__brandCopy {
  display: grid;
  gap: 0.08rem;
  line-height: 1;
  min-width: 0;
}

.st-appHeader__brandName {
  color: var(--st-semantic-text-primary);
  font-size: 1rem;
  font-weight: 760;
}

.st-appHeader__brandProduct {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
  font-weight: 650;
}

.st-appHeader__navLink {
  align-items: center;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.35rem;
  line-height: 1;
  padding: 0.38rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--st-motion-fast, 120ms) ease,
    border-color var(--st-motion-fast, 120ms) ease;
}

.st-appHeader__navLink:hover,
.st-appHeader__navLink:focus-visible {
  color: var(--st-semantic-text-primary);
  text-decoration: none;
}

.st-appHeader__navLink[aria-current="page"] {
  border-bottom-color: var(--st-semantic-border-interactive);
  color: var(--st-semantic-text-primary);
  font-weight: 700;
}

.st-appChrome__navLink--disabled,
.st-appChrome__navLink--disabled:hover,
.st-appChrome__navLink--disabled:focus-visible {
  color: var(--st-semantic-text-disabled, var(--st-semantic-text-secondary));
  cursor: not-allowed;
  opacity: 0.56;
  pointer-events: none;
}

.st-appHeader__control {
  align-items: center;
  background: var(--st-semantic-surface-default);
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  gap: 0.35rem;
  height: 2.25rem;
  line-height: 1;
  padding: 0 0.65rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--st-motion-fast, 120ms) ease,
    border-color var(--st-motion-fast, 120ms) ease,
    color var(--st-motion-fast, 120ms) ease;
}

.st-appHeader__control:hover,
.st-appHeader__control:focus-visible,
.st-appHeader__control[aria-expanded="true"] {
  background: var(--st-semantic-surface-subtle);
  border-color: var(--st-semantic-border-interactive);
  color: var(--st-semantic-text-primary);
  outline: none;
}

.st-appHeader__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--st-spacing-3, 0.75rem);
}

.st-appHeader__scrim {
  background: transparent;
  border: 0;
  cursor: default;
  inset: 0;
  padding: 0;
  position: fixed;
  z-index: var(--st-zindex-overlay, 80);
}

.st-appHeader__drawer {
  background: var(--st-semantic-surface-default);
  border: 1px solid var(--st-semantic-border-subtle);
  box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
  left: 0;
  max-height: 100vh;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: min(22rem, 85vw);
  z-index: calc(var(--st-zindex-overlay, 80) + 10);
}

.st-languageToggle {
  width: 100%;
}

.st-languageToggle__select {
  background: var(--st-semantic-surface-default);
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-radius-md, 0.375rem);
  color: var(--st-semantic-text-primary);
  cursor: pointer;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  padding: var(--st-spacing-1, 0.25rem) var(--st-spacing-2, 0.5rem);
}

.st-languageToggle__select:focus-visible {
  border-color: var(--st-semantic-border-interactive);
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-languageToggle__accordionTrigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-primary);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  justify-content: space-between;
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  width: 100%;
}

.st-languageToggle__accordionTrigger:hover {
  background: var(--st-semantic-surface-subtle);
}

.st-languageToggle__accordionTrigger:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-languageToggle__chevron {
  color: var(--st-semantic-text-secondary);
  transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-languageToggle__chevron--open {
  transform: rotate(180deg);
}

.st-languageToggle__accordionPanel {
  display: grid;
  gap: var(--st-spacing-1, 0.25rem);
  padding: var(--st-spacing-1, 0.25rem) var(--st-spacing-3, 0.75rem) var(--st-spacing-2, 0.5rem);
}

.st-languageToggle__option {
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  text-align: left;
  width: 100%;
}

.st-languageToggle__option:hover {
  background: var(--st-semantic-surface-subtle);
  color: var(--st-semantic-text-primary);
}

.st-languageToggle__option--active {
  background: var(--st-semantic-surface-subtle);
  color: var(--st-semantic-text-primary);
}

.st-languageToggle__option:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-identityMenu {
  font-family: var(--st-font-sans);
  position: relative;
}

.st-identityMenu--accordion {
  width: 100%;
}

.st-identityMenu__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-primary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  gap: var(--st-spacing-2, 0.5rem);
  padding: var(--st-spacing-1, 0.25rem) var(--st-spacing-3, 0.75rem);
}

.st-identityMenu--accordion .st-identityMenu__trigger {
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  width: 100%;
}

.st-identityMenu__trigger:hover {
  background: var(--st-semantic-surface-subtle);
}

.st-identityMenu__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-identityMenu__avatar {
  align-items: center;
  background: var(--st-semantic-action-primary);
  border-radius: var(--st-radius-pill, 9999px);
  color: var(--st-semantic-action-primaryText);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 500;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.st-identityMenu__meta {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
}

.st-identityMenu--accordion .st-identityMenu__meta {
  flex: 1 1 auto;
}

.st-identityMenu__name {
  color: var(--st-semantic-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-identityMenu__email {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-identityMenu__chevron {
  color: var(--st-semantic-text-secondary);
  flex: 0 0 auto;
  transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-identityMenu__chevron--open {
  transform: rotate(180deg);
}

.st-identityMenu__menu {
  background: var(--st-semantic-surface-raised);
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-radius-md, 0.375rem);
  box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.12));
  display: grid;
  margin-top: var(--st-spacing-2, 0.5rem);
  min-width: 12rem;
  padding: var(--st-spacing-1, 0.25rem);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--st-zindex-overlay, 80);
}

.st-identityMenu--accordion .st-identityMenu__menu {
  box-shadow: none;
  margin-top: var(--st-spacing-1, 0.25rem);
  position: static;
  width: 100%;
}

.st-identityMenu__item {
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-sm, 0.375rem);
  color: var(--st-semantic-text-primary);
  cursor: pointer;
  display: block;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.st-identityMenu__item:hover {
  background: var(--st-semantic-surface-subtle);
}

.st-identityMenu__item:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

.st-identityMenu__item--danger {
  color: var(--st-semantic-action-danger);
}

.st-identityMenu__divider {
  background: var(--st-semantic-border-subtle);
  height: 1px;
  margin: var(--st-spacing-1, 0.25rem) 0;
}

.st-identityMenu__login {
  background: var(--st-semantic-action-primary);
  border: 0;
  border-radius: var(--st-radius-md, 0.375rem);
  color: var(--st-semantic-action-primaryText);
  cursor: pointer;
  font: inherit;
  font-family: var(--st-font-sans);
  font-size: 0.875rem;
  padding: var(--st-spacing-1, 0.25rem) var(--st-spacing-3, 0.75rem);
}

.st-identityMenu__login--accordion {
  display: block;
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
  text-align: center;
  width: 100%;
}

.st-identityMenu__login:hover {
  background: var(--st-semantic-action-primaryHover);
}

.st-identityMenu__login:focus-visible {
  box-shadow: 0 0 0 2px var(--st-semantic-border-interactive);
  outline: none;
}

/* StepLineChart */
.st-stepLineChart {
    color: var(--st-semantic-data-category1);
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-stepLineChart--category1 { color: var(--st-semantic-data-category1); }
  .st-stepLineChart--category2 { color: var(--st-semantic-data-category2); }
  .st-stepLineChart--category3 { color: var(--st-semantic-data-category3); }
  .st-stepLineChart--category4 { color: var(--st-semantic-data-category4); }
  .st-stepLineChart--category5 { color: var(--st-semantic-data-category5); }
  .st-stepLineChart--category6 { color: var(--st-semantic-data-category6); }
  .st-stepLineChart--category7 { color: var(--st-semantic-data-category7); }
  .st-stepLineChart--category8 { color: var(--st-semantic-data-category8); }

  .st-stepLineChart svg {
    display: block;
    overflow: visible;
  }

  .st-stepLineChart__visual {
    display: block;
  }

  .st-stepLineChart__grid {
    stroke: var(--st-component-stepLineChart-gridStroke, var(--st-semantic-border-subtle));
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0.7;
  }

  .st-stepLineChart__axis {
    stroke: var(--st-component-stepLineChart-axisStroke, var(--st-semantic-border-subtle));
    stroke-width: 1;
  }

  .st-stepLineChart__tickLabel {
    fill: var(--st-component-stepLineChart-labelColor, var(--st-semantic-text-secondary));
    font-size: 0.6875rem;
  }

  .st-stepLineChart__line {
    stroke: currentColor;
  }

  .st-stepLineChart__dot {
    fill: currentColor;
    stroke: var(--st-semantic-surface-default);
    stroke-width: 1.5;
    cursor: pointer;
    transition: r 120ms ease;
  }

  .st-stepLineChart__dot:hover,
  .st-stepLineChart__dot:focus-visible {
    r: 5.5;
  }

  .st-stepLineChart__dot:focus-visible {
    outline: 2px solid var(--st-semantic-border-interactive);
    outline-offset: 1px;
  }

  .st-stepLineChart__tooltip {
    background: var(--st-component-stepLineChart-tooltipBackground, var(--st-semantic-surface-inverse));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-stepLineChart-tooltipText, var(--st-semantic-text-inverse));
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-stepLineChart__tooltipLabel {
    font-weight: 600;
  }

  .st-stepLineChart__tooltipValue {
    opacity: 0.85;
  }

  @media (prefers-reduced-motion: reduce) {
    .st-stepLineChart__dot {
      transition: none;
    }
  }


/* DivergentBarChart */
.st-divergentBarChart {
    color: var(--st-component-divergentBarChart-labelColor, var(--st-semantic-text-secondary));
    display: block;
    font-family: inherit;
    position: relative;
    width: 100%;
  }

  .st-divergentBarChart svg,
  .st-divergentBarChart__visual {
    display: block;
    overflow: visible;
  }

  .st-divergentBarChart__grid {
    stroke: var(--st-component-divergentBarChart-gridStroke, var(--st-semantic-border-subtle));
    stroke-dasharray: 2 3;
    stroke-width: 1;
    opacity: 0.7;
  }

  .st-divergentBarChart__axis {
    stroke: var(--st-component-divergentBarChart-axisStroke, var(--st-semantic-border-subtle));
    stroke-width: 1;
  }

  .st-divergentBarChart__zeroAxis {
    stroke: var(--st-component-divergentBarChart-zeroStroke, var(--st-semantic-border-strong));
    stroke-width: 1.5;
  }

  .st-divergentBarChart__tickLabel,
  .st-divergentBarChart__categoryLabel {
    fill: var(--st-component-divergentBarChart-labelColor, var(--st-semantic-text-secondary));
    font-size: 0.6875rem;
  }

  .st-divergentBarChart__bar {
    cursor: pointer;
    transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
  }

  .st-divergentBarChart__bar--positive {
    fill: var(--st-component-divergentBarChart-positiveFill, var(--st-semantic-data-category5));
  }

  .st-divergentBarChart__bar--negative {
    fill: var(--st-component-divergentBarChart-negativeFill, var(--st-semantic-data-category3));
  }

  .st-divergentBarChart__bar--neutral,
  .st-divergentBarChart__bar--zero {
    fill: var(--st-component-divergentBarChart-neutralFill, var(--st-semantic-data-category6));
  }

  .st-divergentBarChart__tooltip {
    background: var(--st-component-divergentBarChart-tooltipBackground, var(--st-semantic-surface-inverse));
    border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-component-divergentBarChart-tooltipText, var(--st-semantic-text-inverse));
    display: inline-flex;
    flex-direction: column;
    font-size: 0.75rem;
    gap: 0.125rem;
    line-height: 1.2;
    padding: 0.375rem 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    white-space: nowrap;
    z-index: 1;
  }

  .st-divergentBarChart__tooltipLabel {
    font-weight: 600;
  }

  .st-divergentBarChart__tooltipValue {
    opacity: 0.85;
  }

  .st-divergentBarChart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-spacing-3, 0.75rem);
    list-style: none;
    margin: var(--st-spacing-2, 0.5rem) 0 0;
    padding: 0;
  }

  .st-divergentBarChart__legendItem {
    align-items: center;
    color: var(--st-semantic-text-secondary);
    display: inline-flex;
    font-size: 0.75rem;
    gap: var(--st-spacing-1, 0.25rem);
  }

  .st-divergentBarChart__legendSwatch {
    border-radius: 2px;
    height: 0.7rem;
    width: 0.7rem;
  }

  .st-divergentBarChart__legendSwatch--positive {
    background: var(--st-component-divergentBarChart-positiveFill, var(--st-semantic-data-category5));
  }

  .st-divergentBarChart__legendSwatch--negative {
    background: var(--st-component-divergentBarChart-negativeFill, var(--st-semantic-data-category3));
  }

  .st-divergentBarChart__legendSwatch--neutral {
    background: var(--st-component-divergentBarChart-neutralFill, var(--st-semantic-data-category6));
  }

  @media (prefers-reduced-motion: reduce) {
    .st-divergentBarChart__bar {
      transition: none;
    }
  }


/* ── ChordDiagram ── */
.st-chordDiagram {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-chordDiagram svg,
.st-chordDiagram__visual {
  display: block;
  overflow: visible;
}

.st-chordDiagram__ribbon {
  cursor: pointer;
  fill-opacity: 0.4;
  stroke-opacity: 0.55;
  transition: opacity 120ms ease;
}

.st-chordDiagram__ribbon:hover {
  fill-opacity: 0.62;
}

.st-chordDiagram__ribbon--dim {
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .st-chordDiagram__ribbon {
    transition: none;
  }
}

.st-chordDiagram__arc {
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
}

.st-chordDiagram__arc--category1,
.st-chordDiagram__ribbon--category1 { fill: var(--st-semantic-data-category1); stroke: var(--st-semantic-data-category1); }
.st-chordDiagram__arc--category2,
.st-chordDiagram__ribbon--category2 { fill: var(--st-semantic-data-category2); stroke: var(--st-semantic-data-category2); }
.st-chordDiagram__arc--category3,
.st-chordDiagram__ribbon--category3 { fill: var(--st-semantic-data-category3); stroke: var(--st-semantic-data-category3); }
.st-chordDiagram__arc--category4,
.st-chordDiagram__ribbon--category4 { fill: var(--st-semantic-data-category4); stroke: var(--st-semantic-data-category4); }
.st-chordDiagram__arc--category5,
.st-chordDiagram__ribbon--category5 { fill: var(--st-semantic-data-category5); stroke: var(--st-semantic-data-category5); }
.st-chordDiagram__arc--category6,
.st-chordDiagram__ribbon--category6 { fill: var(--st-semantic-data-category6); stroke: var(--st-semantic-data-category6); }
.st-chordDiagram__arc--category7,
.st-chordDiagram__ribbon--category7 { fill: var(--st-semantic-data-category7); stroke: var(--st-semantic-data-category7); }
.st-chordDiagram__arc--category8,
.st-chordDiagram__ribbon--category8 { fill: var(--st-semantic-data-category8); stroke: var(--st-semantic-data-category8); }

.st-chordDiagram__arcLabel {
  /* fill calculé par contrastTextForTone() en inline */
  font-size: 0.7rem;
  font-weight: 600;
  pointer-events: none;
}

.st-chordDiagram__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-chordDiagram__tooltipLabel { font-weight: 600; }
.st-chordDiagram__tooltipValue { opacity: 0.85; }

/* ── DependencyWheelChart ── */
.st-dependencyWheelChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-dependencyWheelChart svg,
.st-dependencyWheelChart__visual {
  display: block;
  overflow: visible;
}

.st-dependencyWheelChart__visual {
  position: relative;
}

.st-dependencyWheelChart__legend {
  position: absolute;
  right: 0;
  top: 0;
}

.st-dependencyWheelChart__ribbon {
  cursor: pointer;
  fill-opacity: 0.4;
  stroke-opacity: 0.55;
  transition: opacity 120ms ease;
}

.st-dependencyWheelChart__ribbon:hover {
  fill-opacity: 0.62;
}

.st-dependencyWheelChart__ribbon--dim {
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .st-dependencyWheelChart__ribbon {
    transition: none;
  }
}

.st-dependencyWheelChart__arc {
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
}

.st-dependencyWheelChart__arc--category1,
.st-dependencyWheelChart__ribbon--category1 { fill: var(--st-semantic-data-category1); stroke: var(--st-semantic-data-category1); }
.st-dependencyWheelChart__arc--category2,
.st-dependencyWheelChart__ribbon--category2 { fill: var(--st-semantic-data-category2); stroke: var(--st-semantic-data-category2); }
.st-dependencyWheelChart__arc--category3,
.st-dependencyWheelChart__ribbon--category3 { fill: var(--st-semantic-data-category3); stroke: var(--st-semantic-data-category3); }
.st-dependencyWheelChart__arc--category4,
.st-dependencyWheelChart__ribbon--category4 { fill: var(--st-semantic-data-category4); stroke: var(--st-semantic-data-category4); }
.st-dependencyWheelChart__arc--category5,
.st-dependencyWheelChart__ribbon--category5 { fill: var(--st-semantic-data-category5); stroke: var(--st-semantic-data-category5); }
.st-dependencyWheelChart__arc--category6,
.st-dependencyWheelChart__ribbon--category6 { fill: var(--st-semantic-data-category6); stroke: var(--st-semantic-data-category6); }
.st-dependencyWheelChart__arc--category7,
.st-dependencyWheelChart__ribbon--category7 { fill: var(--st-semantic-data-category7); stroke: var(--st-semantic-data-category7); }
.st-dependencyWheelChart__arc--category8,
.st-dependencyWheelChart__ribbon--category8 { fill: var(--st-semantic-data-category8); stroke: var(--st-semantic-data-category8); }

.st-dependencyWheelChart__arcLabel {
  /* fill calculé par contrastTextForTone() en inline */
  font-size: 0.6rem;
  font-weight: 600;
  pointer-events: none;
}

.st-dependencyWheelChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-dependencyWheelChart__tooltipLabel { font-weight: 600; }
.st-dependencyWheelChart__tooltipValue { opacity: 0.85; }

.st-organizationChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-organizationChart svg,
.st-organizationChart__visual {
  display: block;
  overflow: visible;
}

.st-organizationChart__link {
  stroke: var(--st-semantic-border-default);
  stroke-width: 1.5;
}

.st-organizationChart__box {
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
}

.st-organizationChart__box--category1 { fill: var(--st-semantic-data-category1); }
.st-organizationChart__box--category2 { fill: var(--st-semantic-data-category2); }
.st-organizationChart__box--category3 { fill: var(--st-semantic-data-category3); }
.st-organizationChart__box--category4 { fill: var(--st-semantic-data-category4); }
.st-organizationChart__box--category5 { fill: var(--st-semantic-data-category5); }
.st-organizationChart__box--category6 { fill: var(--st-semantic-data-category6); }
.st-organizationChart__box--category7 { fill: var(--st-semantic-data-category7); }
.st-organizationChart__box--category8 { fill: var(--st-semantic-data-category8); }

.st-organizationChart__label {
  fill: var(--st-semantic-text-inverse);
  font-weight: 600;
  pointer-events: none;
}

/* ── GanttChart ── */
.st-ganttChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-ganttChart svg {
  display: block;
  overflow: visible;
}

.st-ganttChart__visual {
  display: block;
}

.st-ganttChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-ganttChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-ganttChart__tickLabel,
.st-ganttChart__taskLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-ganttChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-ganttChart__bar--dim {
  opacity: 0.4;
}

.st-ganttChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-ganttChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-ganttChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-ganttChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-ganttChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-ganttChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-ganttChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-ganttChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-ganttChart__marker {
  stroke: var(--st-semantic-feedback-error);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.st-ganttChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-ganttChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-ganttChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-ganttChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-ganttChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-ganttChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-ganttChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-ganttChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-ganttChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-ganttChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-ganttChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-ganttChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-ganttChart__tooltipLabel {
  font-weight: 600;
}

.st-ganttChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-ganttChart__bar {
    transition: none;
  }
}

/* ── TimelineChart ── */
.st-timelineChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-timelineChart svg {
  display: block;
  overflow: visible;
}

.st-timelineChart__visual {
  display: block;
}

.st-timelineChart__axis {
  stroke: var(--st-semantic-border-strong);
  stroke-width: 2;
}

.st-timelineChart__tick {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-timelineChart__tickLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-timelineChart__connector {
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.6;
}

.st-timelineChart__eventLabel {
  fill: var(--st-semantic-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.st-timelineChart__marker {
  fill: currentColor;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 2;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-timelineChart__marker:hover {
  r: 7.5;
}

@media (prefers-reduced-motion: reduce) {
  .st-timelineChart__marker {
    transition: none;
  }
}

.st-timelineChart__connector--category1,
.st-timelineChart__marker--category1 { color: var(--st-semantic-data-category1); }
.st-timelineChart__connector--category2,
.st-timelineChart__marker--category2 { color: var(--st-semantic-data-category2); }
.st-timelineChart__connector--category3,
.st-timelineChart__marker--category3 { color: var(--st-semantic-data-category3); }
.st-timelineChart__connector--category4,
.st-timelineChart__marker--category4 { color: var(--st-semantic-data-category4); }
.st-timelineChart__connector--category5,
.st-timelineChart__marker--category5 { color: var(--st-semantic-data-category5); }
.st-timelineChart__connector--category6,
.st-timelineChart__marker--category6 { color: var(--st-semantic-data-category6); }
.st-timelineChart__connector--category7,
.st-timelineChart__marker--category7 { color: var(--st-semantic-data-category7); }
.st-timelineChart__connector--category8,
.st-timelineChart__marker--category8 { color: var(--st-semantic-data-category8); }

.st-timelineChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  max-width: 16rem;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: normal;
  z-index: 1;
}

.st-timelineChart__tooltipLabel {
  font-weight: 600;
}

.st-timelineChart__tooltipValue {
  opacity: 0.85;
}

.st-timelineChart__tooltipDesc {
  opacity: 0.85;
}

/* ── PackedBubblesChart ── */
.st-packedBubblesChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-packedBubblesChart svg,
.st-packedBubblesChart__visual {
  display: block;
  overflow: visible;
}

.st-packedBubblesChart__circle {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1.5;
  transition: opacity 120ms ease;
}

.st-packedBubblesChart__circle--dim {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .st-packedBubblesChart__circle {
    transition: none;
  }
}

.st-packedBubblesChart__circle--category1 { fill: var(--st-semantic-data-category1); }
.st-packedBubblesChart__circle--category2 { fill: var(--st-semantic-data-category2); }
.st-packedBubblesChart__circle--category3 { fill: var(--st-semantic-data-category3); }
.st-packedBubblesChart__circle--category4 { fill: var(--st-semantic-data-category4); }
.st-packedBubblesChart__circle--category5 { fill: var(--st-semantic-data-category5); }
.st-packedBubblesChart__circle--category6 { fill: var(--st-semantic-data-category6); }
.st-packedBubblesChart__circle--category7 { fill: var(--st-semantic-data-category7); }
.st-packedBubblesChart__circle--category8 { fill: var(--st-semantic-data-category8); }

.st-packedBubblesChart__label {
  /* fill calculé par contrastTextForTone() en inline */
  font-size: 0.7rem;
  font-weight: 600;
  pointer-events: none;
}

.st-packedBubblesChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-packedBubblesChart__tooltipLabel { font-weight: 600; }
.st-packedBubblesChart__tooltipValue { opacity: 0.85; }

/* ── RoseChart (nightingale / polar area) ── */
.st-roseChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-roseChart svg,
.st-roseChart__visual {
  display: block;
  overflow: visible;
}

.st-roseChart__sector {
  cursor: pointer;
  fill-opacity: 0.82;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-roseChart__sector--dim {
  opacity: 0.4;
}

.st-roseChart__sector--category1 { fill: var(--st-semantic-data-category1); }
.st-roseChart__sector--category2 { fill: var(--st-semantic-data-category2); }
.st-roseChart__sector--category3 { fill: var(--st-semantic-data-category3); }
.st-roseChart__sector--category4 { fill: var(--st-semantic-data-category4); }
.st-roseChart__sector--category5 { fill: var(--st-semantic-data-category5); }
.st-roseChart__sector--category6 { fill: var(--st-semantic-data-category6); }
.st-roseChart__sector--category7 { fill: var(--st-semantic-data-category7); }
.st-roseChart__sector--category8 { fill: var(--st-semantic-data-category8); }

.st-roseChart__label {
  font-size: 0.68rem;
  font-weight: 650;
  pointer-events: none;
}

.st-roseChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-roseChart__tooltipLabel { font-weight: 600; }
.st-roseChart__tooltipValue { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .st-roseChart__sector {
    transition: none;
  }
}

/* ── ViolinChart (distribution density) ── */
.st-violinChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-violinChart svg,
.st-violinChart__visual {
  display: block;
  overflow: visible;
}

.st-violinChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-violinChart__shape {
  cursor: pointer;
  fill-opacity: 0.72;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-violinChart__shape--dim {
  opacity: 0.4;
}

.st-violinChart__shape--category1 { fill: var(--st-semantic-data-category1); }
.st-violinChart__shape--category2 { fill: var(--st-semantic-data-category2); }
.st-violinChart__shape--category3 { fill: var(--st-semantic-data-category3); }
.st-violinChart__shape--category4 { fill: var(--st-semantic-data-category4); }
.st-violinChart__shape--category5 { fill: var(--st-semantic-data-category5); }
.st-violinChart__shape--category6 { fill: var(--st-semantic-data-category6); }
.st-violinChart__shape--category7 { fill: var(--st-semantic-data-category7); }
.st-violinChart__shape--category8 { fill: var(--st-semantic-data-category8); }

.st-violinChart__box {
  fill: var(--st-semantic-surface-default, Canvas);
  fill-opacity: 0.85;
  stroke: var(--st-semantic-text-secondary);
  stroke-width: 1;
}

.st-violinChart__median {
  stroke: var(--st-semantic-text-primary);
  stroke-width: 2;
}

.st-violinChart__label {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

.st-violinChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-violinChart__tooltipLabel { font-weight: 600; }
.st-violinChart__tooltipValue { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .st-violinChart__shape {
    transition: none;
  }
}

.st-geoMap {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}
.st-geoMap svg,
.st-geoMap__visual { display: block; }
.st-geoMap__frame { fill: var(--st-semantic-surface-default, Canvas); stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
/* GeoJSON : remplissage translucide (color-mix) + contour au ton. */
.st-geoMap__feature { stroke-width: 1.5; transition: fill-opacity 120ms ease; }
.st-geoMap__feature--category1 { fill: color-mix(in srgb, var(--st-semantic-data-category1) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category1); }
.st-geoMap__feature--category2 { fill: color-mix(in srgb, var(--st-semantic-data-category2) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category2); }
.st-geoMap__feature--category3 { fill: color-mix(in srgb, var(--st-semantic-data-category3) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category3); }
.st-geoMap__feature--category4 { fill: color-mix(in srgb, var(--st-semantic-data-category4) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category4); }
.st-geoMap__feature--category5 { fill: color-mix(in srgb, var(--st-semantic-data-category5) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category5); }
.st-geoMap__feature--category6 { fill: color-mix(in srgb, var(--st-semantic-data-category6) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category6); }
.st-geoMap__feature--category7 { fill: color-mix(in srgb, var(--st-semantic-data-category7) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category7); }
.st-geoMap__feature--category8 { fill: color-mix(in srgb, var(--st-semantic-data-category8) var(--st-geoMap-mix, 34%), transparent); stroke: var(--st-semantic-data-category8); }
.st-geoMap__feature--line { fill: none; }
/* Choroplèthe : intensité ∝ valeur via color-mix sur le ton de la couche. */
.st-geoMap__region { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
.st-geoMap__region--empty { fill: var(--st-semantic-surface-default, Canvas); }
.st-geoMap__region--category1 { fill: color-mix(in srgb, var(--st-semantic-data-category1) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category2 { fill: color-mix(in srgb, var(--st-semantic-data-category2) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category3 { fill: color-mix(in srgb, var(--st-semantic-data-category3) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category4 { fill: color-mix(in srgb, var(--st-semantic-data-category4) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category5 { fill: color-mix(in srgb, var(--st-semantic-data-category5) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category6 { fill: color-mix(in srgb, var(--st-semantic-data-category6) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category7 { fill: color-mix(in srgb, var(--st-semantic-data-category7) var(--st-geoMap-mix, 60%), transparent); }
.st-geoMap__region--category8 { fill: color-mix(in srgb, var(--st-semantic-data-category8) var(--st-geoMap-mix, 60%), transparent); }
/* Points/épingles : ton plein, légère translucidité (parité dataviz). */
.st-geoMap__point { fill-opacity: 0.82; }
.st-geoMap__point--category1 { fill: var(--st-semantic-data-category1); }
.st-geoMap__point--category2 { fill: var(--st-semantic-data-category2); }
.st-geoMap__point--category3 { fill: var(--st-semantic-data-category3); }
.st-geoMap__point--category4 { fill: var(--st-semantic-data-category4); }
.st-geoMap__point--category5 { fill: var(--st-semantic-data-category5); }
.st-geoMap__point--category6 { fill: var(--st-semantic-data-category6); }
.st-geoMap__point--category7 { fill: var(--st-semantic-data-category7); }
.st-geoMap__point--category8 { fill: var(--st-semantic-data-category8); }
/* Densité : cercles translucides superposés (color-mix ∝ poids). */
.st-geoMap__density--category1 { fill: color-mix(in srgb, var(--st-semantic-data-category1) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category2 { fill: color-mix(in srgb, var(--st-semantic-data-category2) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category3 { fill: color-mix(in srgb, var(--st-semantic-data-category3) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category4 { fill: color-mix(in srgb, var(--st-semantic-data-category4) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category5 { fill: color-mix(in srgb, var(--st-semantic-data-category5) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category6 { fill: color-mix(in srgb, var(--st-semantic-data-category6) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category7 { fill: color-mix(in srgb, var(--st-semantic-data-category7) var(--st-geoMap-mix, 45%), transparent); }
.st-geoMap__density--category8 { fill: color-mix(in srgb, var(--st-semantic-data-category8) var(--st-geoMap-mix, 45%), transparent); }
/* Flux : arcs quadratiques, épaisseur portée par l'attribut stroke-width. */
.st-geoMap__flow { fill: none; stroke-linecap: round; stroke-opacity: 0.62; }
.st-geoMap__flow--category1 { stroke: var(--st-semantic-data-category1); }
.st-geoMap__flow--category2 { stroke: var(--st-semantic-data-category2); }
.st-geoMap__flow--category3 { stroke: var(--st-semantic-data-category3); }
.st-geoMap__flow--category4 { stroke: var(--st-semantic-data-category4); }
.st-geoMap__flow--category5 { stroke: var(--st-semantic-data-category5); }
.st-geoMap__flow--category6 { stroke: var(--st-semantic-data-category6); }
.st-geoMap__flow--category7 { stroke: var(--st-semantic-data-category7); }
.st-geoMap__flow--category8 { stroke: var(--st-semantic-data-category8); }
/* Hexbin : intensité ∝ valeur agrégée via color-mix. */
.st-geoMap__hexbin--category1 { fill: color-mix(in srgb, var(--st-semantic-data-category1) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category2 { fill: color-mix(in srgb, var(--st-semantic-data-category2) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category3 { fill: color-mix(in srgb, var(--st-semantic-data-category3) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category4 { fill: color-mix(in srgb, var(--st-semantic-data-category4) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category5 { fill: color-mix(in srgb, var(--st-semantic-data-category5) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category6 { fill: color-mix(in srgb, var(--st-semantic-data-category6) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category7 { fill: color-mix(in srgb, var(--st-semantic-data-category7) var(--st-geoMap-mix, 72%), transparent); }
.st-geoMap__hexbin--category8 { fill: color-mix(in srgb, var(--st-semantic-data-category8) var(--st-geoMap-mix, 72%), transparent); }
/* Clusters : centroïde distinctif (disque + anneau), toné via currentColor. */
.st-geoMap__cluster--category1 { color: var(--st-semantic-data-category1); }
.st-geoMap__cluster--category2 { color: var(--st-semantic-data-category2); }
.st-geoMap__cluster--category3 { color: var(--st-semantic-data-category3); }
.st-geoMap__cluster--category4 { color: var(--st-semantic-data-category4); }
.st-geoMap__cluster--category5 { color: var(--st-semantic-data-category5); }
.st-geoMap__cluster--category6 { color: var(--st-semantic-data-category6); }
.st-geoMap__cluster--category7 { color: var(--st-semantic-data-category7); }
.st-geoMap__cluster--category8 { color: var(--st-semantic-data-category8); }
.st-geoMap__clusterDot { fill: currentColor; fill-opacity: 0.78; }
.st-geoMap__clusterRing { fill: none; stroke: currentColor; stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .st-geoMap__feature { transition: none; }
}

.st-columnRangeChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-columnRangeChart svg {
  display: block;
  overflow: visible;
}

.st-columnRangeChart__visual {
  display: block;
}

.st-columnRangeChart__grid {
  stroke: var(--st-component-columnRangeChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-columnRangeChart__axis {
  stroke: var(--st-component-columnRangeChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-columnRangeChart__tickLabel,
.st-columnRangeChart__categoryLabel {
  fill: var(--st-component-columnRangeChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-columnRangeChart__bar {
  cursor: pointer;
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-columnRangeChart__bar:hover {
  opacity: 0.82;
}

.st-columnRangeChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-columnRangeChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-columnRangeChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-columnRangeChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-columnRangeChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-columnRangeChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-columnRangeChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-columnRangeChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-columnRangeChart__tooltip {
  background: var(--st-component-columnRangeChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-columnRangeChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-columnRangeChart__tooltipLabel {
  font-weight: 600;
}

.st-columnRangeChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-columnRangeChart__bar { transition: none; }
}

.st-areaRangeChart {
  color: var(--st-semantic-data-category1);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-areaRangeChart--category1 { color: var(--st-semantic-data-category1); }
.st-areaRangeChart--category2 { color: var(--st-semantic-data-category2); }
.st-areaRangeChart--category3 { color: var(--st-semantic-data-category3); }
.st-areaRangeChart--category4 { color: var(--st-semantic-data-category4); }
.st-areaRangeChart--category5 { color: var(--st-semantic-data-category5); }
.st-areaRangeChart--category6 { color: var(--st-semantic-data-category6); }
.st-areaRangeChart--category7 { color: var(--st-semantic-data-category7); }
.st-areaRangeChart--category8 { color: var(--st-semantic-data-category8); }

.st-areaRangeChart svg {
  display: block;
  overflow: visible;
}

.st-areaRangeChart__visual {
  display: block;
}

.st-areaRangeChart__grid {
  stroke: var(--st-component-areaRangeChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-areaRangeChart__axis {
  stroke: var(--st-component-areaRangeChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-areaRangeChart__tickLabel {
  fill: var(--st-component-areaRangeChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-areaRangeChart__line {
  stroke: currentColor;
}

.st-areaRangeChart__line--low {
  opacity: 0.7;
}

.st-areaRangeChart__area {
  stroke: none;
}

.st-areaRangeChart__dot {
  fill: currentColor;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-areaRangeChart__dot:hover {
  r: 5;
}

@media (prefers-reduced-motion: reduce) {
  .st-areaRangeChart__dot { transition: none; }
}

.st-areaRangeChart__tooltip {
  background: var(--st-component-areaRangeChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-areaRangeChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-areaRangeChart__tooltipLabel {
  font-weight: 600;
}

.st-areaRangeChart__tooltipValue {
  opacity: 0.85;
}

.st-areaSplineRangeChart {
  color: var(--st-semantic-data-category1);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-areaSplineRangeChart--category1 { color: var(--st-semantic-data-category1); }
.st-areaSplineRangeChart--category2 { color: var(--st-semantic-data-category2); }
.st-areaSplineRangeChart--category3 { color: var(--st-semantic-data-category3); }
.st-areaSplineRangeChart--category4 { color: var(--st-semantic-data-category4); }
.st-areaSplineRangeChart--category5 { color: var(--st-semantic-data-category5); }
.st-areaSplineRangeChart--category6 { color: var(--st-semantic-data-category6); }
.st-areaSplineRangeChart--category7 { color: var(--st-semantic-data-category7); }
.st-areaSplineRangeChart--category8 { color: var(--st-semantic-data-category8); }

.st-areaSplineRangeChart svg {
  display: block;
  overflow: visible;
}

.st-areaSplineRangeChart__visual {
  display: block;
}

.st-areaSplineRangeChart__grid {
  stroke: var(--st-component-areaSplineRangeChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-areaSplineRangeChart__axis {
  stroke: var(--st-component-areaSplineRangeChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-areaSplineRangeChart__tickLabel {
  fill: var(--st-component-areaSplineRangeChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-areaSplineRangeChart__line {
  stroke: currentColor;
}

.st-areaSplineRangeChart__line--low {
  opacity: 0.7;
}

.st-areaSplineRangeChart__area {
  stroke: none;
}

.st-areaSplineRangeChart__dot {
  fill: currentColor;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-areaSplineRangeChart__dot:hover {
  r: 5;
}

@media (prefers-reduced-motion: reduce) {
  .st-areaSplineRangeChart__dot { transition: none; }
}

.st-areaSplineRangeChart__tooltip {
  background: var(--st-component-areaSplineRangeChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-areaSplineRangeChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-areaSplineRangeChart__tooltipLabel {
  font-weight: 600;
}

.st-areaSplineRangeChart__tooltipValue {
  opacity: 0.85;
}

.st-columnPyramidChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-columnPyramidChart svg {
  display: block;
  overflow: visible;
}

.st-columnPyramidChart__visual {
  display: block;
}

.st-columnPyramidChart__grid {
  stroke: var(--st-component-columnPyramidChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-columnPyramidChart__axis {
  stroke: var(--st-component-columnPyramidChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-columnPyramidChart__tickLabel,
.st-columnPyramidChart__categoryLabel {
  fill: var(--st-component-columnPyramidChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-columnPyramidChart__column {
  cursor: pointer;
  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-columnPyramidChart__column:hover {
  opacity: 0.82;
}

.st-columnPyramidChart__column--category1 { fill: var(--st-semantic-data-category1); }
.st-columnPyramidChart__column--category2 { fill: var(--st-semantic-data-category2); }
.st-columnPyramidChart__column--category3 { fill: var(--st-semantic-data-category3); }
.st-columnPyramidChart__column--category4 { fill: var(--st-semantic-data-category4); }
.st-columnPyramidChart__column--category5 { fill: var(--st-semantic-data-category5); }
.st-columnPyramidChart__column--category6 { fill: var(--st-semantic-data-category6); }
.st-columnPyramidChart__column--category7 { fill: var(--st-semantic-data-category7); }
.st-columnPyramidChart__column--category8 { fill: var(--st-semantic-data-category8); }

.st-columnPyramidChart__tooltip {
  background: var(--st-component-columnPyramidChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-columnPyramidChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-columnPyramidChart__tooltipLabel {
  font-weight: 600;
}

.st-columnPyramidChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-columnPyramidChart__column {
    transition: none;
  }
}

.st-polygonChart { color: var(--st-semantic-text-secondary); display: block; font-family: inherit; position: relative; width: 100%; }
  .st-polygonChart svg, .st-polygonChart__visual { display: block; overflow: visible; }
  .st-polygonChart__grid { stroke: var(--st-semantic-border-subtle); stroke-dasharray: 2 3; stroke-width: 1; opacity: 0.7; }
  .st-polygonChart__axis { stroke: var(--st-semantic-border-subtle); stroke-width: 1; }
  .st-polygonChart__tick { fill: var(--st-semantic-text-secondary); font-size: 0.6875rem; }
  .st-polygonChart__polygon { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
  .st-polygonChart__vertex { fill: currentColor; }
  .st-polygonChart__polygon--category1, .st-polygonChart__vertex--category1 { color: var(--st-semantic-data-category1); }
  .st-polygonChart__polygon--category2, .st-polygonChart__vertex--category2 { color: var(--st-semantic-data-category2); }
  .st-polygonChart__polygon--category3, .st-polygonChart__vertex--category3 { color: var(--st-semantic-data-category3); }
  .st-polygonChart__polygon--category4, .st-polygonChart__vertex--category4 { color: var(--st-semantic-data-category4); }
  .st-polygonChart__polygon--category5, .st-polygonChart__vertex--category5 { color: var(--st-semantic-data-category5); }
  .st-polygonChart__polygon--category6, .st-polygonChart__vertex--category6 { color: var(--st-semantic-data-category6); }
  .st-polygonChart__polygon--category7, .st-polygonChart__vertex--category7 { color: var(--st-semantic-data-category7); }
  .st-polygonChart__polygon--category8, .st-polygonChart__vertex--category8 { color: var(--st-semantic-data-category8); }
  .st-polygonChart__tooltip {
    background: var(--st-semantic-surface-inverse); border-radius: var(--st-radius-sm, 0.25rem);
    color: var(--st-semantic-text-inverse); display: inline-flex; flex-direction: column;
    font-size: 0.75rem; gap: 0.125rem; line-height: 1.2; padding: 0.375rem 0.5rem;
    pointer-events: none; position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; z-index: 1;
  }
  .st-polygonChart__tooltipValue { opacity: 0.85; }

.st-tileMapChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-tileMapChart svg,
.st-tileMapChart__visual {
  display: block;
  overflow: visible;
}

.st-tileMapChart__tile {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-tileMapChart__tile--dim {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .st-tileMapChart__tile {
    transition: none;
  }
}

.st-tileMapChart__tile--category1,
.st-tileMapChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
.st-tileMapChart__tile--category2,
.st-tileMapChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
.st-tileMapChart__tile--category3,
.st-tileMapChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
.st-tileMapChart__tile--category4,
.st-tileMapChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
.st-tileMapChart__tile--category5,
.st-tileMapChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
.st-tileMapChart__tile--category6,
.st-tileMapChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
.st-tileMapChart__tile--category7,
.st-tileMapChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
.st-tileMapChart__tile--category8,
.st-tileMapChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }

.st-tileMapChart__tileLabel {
  fill: var(--st-semantic-text-inverse);
  font-size: 0.6875rem;
  font-weight: 600;
}

.st-tileMapChart__legend {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-tileMapChart__legendRamp {
  display: inline-grid;
  grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
  min-width: 8rem;
}

.st-tileMapChart__legendSwatch {
  display: block;
  height: 0.5rem;
}

.st-tileMapChart__legendText {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

.st-tileMapChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-tileMapChart__tooltipLabel {
  font-weight: 600;
}

.st-tileMapChart__tooltipValue {
  opacity: 0.85;
}

.st-dumbbellChart {
  color: var(--st-semantic-data-category1);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-dumbbellChart svg {
  display: block;
  overflow: visible;
}

.st-dumbbellChart__visual {
  display: block;
  position: relative;
}

.st-dumbbellChart__legend {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}

.st-dumbbellChart__grid {
  stroke: var(--st-component-dumbbellChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-dumbbellChart__axis {
  stroke: var(--st-component-dumbbellChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-dumbbellChart__tickLabel,
.st-dumbbellChart__categoryLabel {
  fill: var(--st-component-dumbbellChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-dumbbellChart__connector {
  stroke: var(--st-component-dumbbellChart-connectorStroke, var(--st-semantic-border-strong));
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
}

.st-dumbbellChart__dot {
  fill: currentColor;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-dumbbellChart__dot:hover {
  r: 7;
}

.st-dumbbellChart__dot--category1 { fill: var(--st-semantic-data-category1); }
.st-dumbbellChart__dot--category2 { fill: var(--st-semantic-data-category2); }
.st-dumbbellChart__dot--category3 { fill: var(--st-semantic-data-category3); }
.st-dumbbellChart__dot--category4 { fill: var(--st-semantic-data-category4); }
.st-dumbbellChart__dot--category5 { fill: var(--st-semantic-data-category5); }
.st-dumbbellChart__dot--category6 { fill: var(--st-semantic-data-category6); }
.st-dumbbellChart__dot--category7 { fill: var(--st-semantic-data-category7); }
.st-dumbbellChart__dot--category8 { fill: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-dumbbellChart__dot { transition: none; }
}

.st-dumbbellChart__tooltip {
  background: var(--st-component-dumbbellChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-dumbbellChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-dumbbellChart__tooltipLabel {
  font-weight: 600;
}

.st-dumbbellChart__tooltipValue {
  opacity: 0.85;
}

.st-errorBarChart {
  color: var(--st-semantic-data-category1);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-errorBarChart svg {
  display: block;
  overflow: visible;
}

.st-errorBarChart__visual {
  display: block;
  position: relative;
}

.st-errorBarChart__legend {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}

.st-errorBarChart__grid {
  stroke: var(--st-component-errorBarChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-errorBarChart__axis {
  stroke: var(--st-component-errorBarChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-errorBarChart__tickLabel,
.st-errorBarChart__categoryLabel {
  fill: var(--st-component-errorBarChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-errorBarChart__whisker {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.st-errorBarChart__cap {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.st-errorBarChart__whisker--category1,
.st-errorBarChart__cap--category1 { stroke: var(--st-semantic-data-category1); }
.st-errorBarChart__whisker--category2,
.st-errorBarChart__cap--category2 { stroke: var(--st-semantic-data-category2); }
.st-errorBarChart__whisker--category3,
.st-errorBarChart__cap--category3 { stroke: var(--st-semantic-data-category3); }
.st-errorBarChart__whisker--category4,
.st-errorBarChart__cap--category4 { stroke: var(--st-semantic-data-category4); }
.st-errorBarChart__whisker--category5,
.st-errorBarChart__cap--category5 { stroke: var(--st-semantic-data-category5); }
.st-errorBarChart__whisker--category6,
.st-errorBarChart__cap--category6 { stroke: var(--st-semantic-data-category6); }
.st-errorBarChart__whisker--category7,
.st-errorBarChart__cap--category7 { stroke: var(--st-semantic-data-category7); }
.st-errorBarChart__whisker--category8,
.st-errorBarChart__cap--category8 { stroke: var(--st-semantic-data-category8); }

.st-errorBarChart__marker {
  fill: currentColor;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 120ms ease;
}

.st-errorBarChart__marker:hover {
  r: 6;
}

.st-errorBarChart__marker--category1 { fill: var(--st-semantic-data-category1); }
.st-errorBarChart__marker--category2 { fill: var(--st-semantic-data-category2); }
.st-errorBarChart__marker--category3 { fill: var(--st-semantic-data-category3); }
.st-errorBarChart__marker--category4 { fill: var(--st-semantic-data-category4); }
.st-errorBarChart__marker--category5 { fill: var(--st-semantic-data-category5); }
.st-errorBarChart__marker--category6 { fill: var(--st-semantic-data-category6); }
.st-errorBarChart__marker--category7 { fill: var(--st-semantic-data-category7); }
.st-errorBarChart__marker--category8 { fill: var(--st-semantic-data-category8); }

@media (prefers-reduced-motion: reduce) {
  .st-errorBarChart__marker { transition: none; }
}

.st-errorBarChart__tooltip {
  background: var(--st-component-errorBarChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-errorBarChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-errorBarChart__tooltipLabel {
  font-weight: 600;
}

.st-errorBarChart__tooltipValue {
  opacity: 0.85;
}

.st-bellCurveChart {
  color: var(--st-semantic-data-category1);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-bellCurveChart--category1 { color: var(--st-semantic-data-category1); }
.st-bellCurveChart--category2 { color: var(--st-semantic-data-category2); }
.st-bellCurveChart--category3 { color: var(--st-semantic-data-category3); }
.st-bellCurveChart--category4 { color: var(--st-semantic-data-category4); }
.st-bellCurveChart--category5 { color: var(--st-semantic-data-category5); }
.st-bellCurveChart--category6 { color: var(--st-semantic-data-category6); }
.st-bellCurveChart--category7 { color: var(--st-semantic-data-category7); }
.st-bellCurveChart--category8 { color: var(--st-semantic-data-category8); }

.st-bellCurveChart svg {
  display: block;
  overflow: visible;
}

.st-bellCurveChart__visual {
  display: block;
  position: relative;
}

.st-bellCurveChart__grid {
  stroke: var(--st-component-bellCurveChart-gridStroke, var(--st-semantic-border-subtle));
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-bellCurveChart__axis {
  stroke: var(--st-component-bellCurveChart-axisStroke, var(--st-semantic-border-subtle));
  stroke-width: 1;
}

.st-bellCurveChart__tickLabel {
  fill: var(--st-component-bellCurveChart-labelColor, var(--st-semantic-text-secondary));
  font-size: 0.6875rem;
}

.st-bellCurveChart__line {
  stroke: currentColor;
}

.st-bellCurveChart__area {
  stroke: none;
}

.st-bellCurveChart__sdMark {
  stroke: currentColor;
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.5;
}

.st-bellCurveChart__mean {
  stroke: currentColor;
  stroke-dasharray: 4 3;
  stroke-width: 1.5;
  opacity: 0.85;
}

.st-bellCurveChart__meanLabel {
  fill: currentColor;
  font-size: 0.6875rem;
  font-weight: 600;
}

.st-bellCurveChart__hit {
  fill: transparent;
  cursor: pointer;
}

.st-bellCurveChart__tooltip {
  background: var(--st-component-bellCurveChart-tooltipBackground, var(--st-semantic-surface-inverse));
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-component-bellCurveChart-tooltipText, var(--st-semantic-text-inverse));
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-bellCurveChart__tooltipLabel {
  font-weight: 600;
}

.st-bellCurveChart__tooltipValue {
  opacity: 0.85;
}

.st-arcDiagramChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-arcDiagramChart svg,
.st-arcDiagramChart__visual {
  display: block;
  overflow: visible;
}

.st-arcDiagramChart__visual {
  position: relative;
}

.st-arcDiagramChart__legend {
  position: absolute;
  right: 0;
  top: 0;
}

.st-arcDiagramChart__axis {
  stroke: var(--st-semantic-border-subtle, var(--st-semantic-text-secondary));
  stroke-width: 1;
}

.st-arcDiagramChart__arc {
  cursor: pointer;
  fill: none;
  stroke-opacity: 0.6;
  transition: opacity 120ms ease, stroke-opacity 120ms ease;
}

.st-arcDiagramChart__arc:hover {
  stroke-opacity: 0.85;
}

.st-arcDiagramChart__arc--dim {
  opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
  .st-arcDiagramChart__arc {
    transition: none;
  }
}

.st-arcDiagramChart__node {
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1.5;
}

.st-arcDiagramChart__arc--category1,
.st-arcDiagramChart__node--category1 { stroke: var(--st-semantic-data-category1); }
.st-arcDiagramChart__node--category1 { fill: var(--st-semantic-data-category1); }
.st-arcDiagramChart__arc--category2,
.st-arcDiagramChart__node--category2 { stroke: var(--st-semantic-data-category2); }
.st-arcDiagramChart__node--category2 { fill: var(--st-semantic-data-category2); }
.st-arcDiagramChart__arc--category3,
.st-arcDiagramChart__node--category3 { stroke: var(--st-semantic-data-category3); }
.st-arcDiagramChart__node--category3 { fill: var(--st-semantic-data-category3); }
.st-arcDiagramChart__arc--category4,
.st-arcDiagramChart__node--category4 { stroke: var(--st-semantic-data-category4); }
.st-arcDiagramChart__node--category4 { fill: var(--st-semantic-data-category4); }
.st-arcDiagramChart__arc--category5,
.st-arcDiagramChart__node--category5 { stroke: var(--st-semantic-data-category5); }
.st-arcDiagramChart__node--category5 { fill: var(--st-semantic-data-category5); }
.st-arcDiagramChart__arc--category6,
.st-arcDiagramChart__node--category6 { stroke: var(--st-semantic-data-category6); }
.st-arcDiagramChart__node--category6 { fill: var(--st-semantic-data-category6); }
.st-arcDiagramChart__arc--category7,
.st-arcDiagramChart__node--category7 { stroke: var(--st-semantic-data-category7); }
.st-arcDiagramChart__node--category7 { fill: var(--st-semantic-data-category7); }
.st-arcDiagramChart__arc--category8,
.st-arcDiagramChart__node--category8 { stroke: var(--st-semantic-data-category8); }
.st-arcDiagramChart__node--category8 { fill: var(--st-semantic-data-category8); }

.st-arcDiagramChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-arcDiagramChart__tooltipLabel {
  font-weight: 600;
}

.st-arcDiagramChart__tooltipValue {
  opacity: 0.85;
}

/* ── TreegraphChart ── */
.st-treegraphChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-treegraphChart svg,
.st-treegraphChart__visual {
  display: block;
  overflow: visible;
}

.st-treegraphChart__link {
  stroke: var(--st-semantic-border-default);
  stroke-width: 1.5;
}

.st-treegraphChart__dot {
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1.5;
}

.st-treegraphChart__dot--category1 { fill: var(--st-semantic-data-category1); }
.st-treegraphChart__dot--category2 { fill: var(--st-semantic-data-category2); }
.st-treegraphChart__dot--category3 { fill: var(--st-semantic-data-category3); }
.st-treegraphChart__dot--category4 { fill: var(--st-semantic-data-category4); }
.st-treegraphChart__dot--category5 { fill: var(--st-semantic-data-category5); }
.st-treegraphChart__dot--category6 { fill: var(--st-semantic-data-category6); }
.st-treegraphChart__dot--category7 { fill: var(--st-semantic-data-category7); }
.st-treegraphChart__dot--category8 { fill: var(--st-semantic-data-category8); }

.st-treegraphChart__label {
  fill: var(--st-semantic-text-primary);
  font-weight: 600;
  pointer-events: none;
}

.st-heikinAshiChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-heikinAshiChart svg {
  display: block;
  overflow: visible;
}

.st-heikinAshiChart__visual {
  display: block;
}

.st-heikinAshiChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-heikinAshiChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-heikinAshiChart__wick {
  stroke-width: 1.5;
}

.st-heikinAshiChart__wick--up {
  stroke: var(--st-semantic-feedback-success);
}

.st-heikinAshiChart__wick--down {
  stroke: var(--st-semantic-feedback-error);
}

.st-heikinAshiChart__body {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-heikinAshiChart__body--dim {
  opacity: 0.4;
}

.st-heikinAshiChart__body--up {
  fill: var(--st-semantic-feedback-success);
}

.st-heikinAshiChart__body--down {
  fill: var(--st-semantic-feedback-error);
}

@media (prefers-reduced-motion: reduce) {
  .st-heikinAshiChart__body {
    transition: none;
  }
}

.st-heikinAshiChart__tickLabel,
.st-heikinAshiChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-heikinAshiChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-heikinAshiChart__tooltipLabel {
  font-weight: 600;
}

.st-heikinAshiChart__tooltipValue {
  opacity: 0.85;
}

/* ── VariablePieChart (variable-radius pie: angle ∝ value, radius ∝ z) ── */
.st-variablePieChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-variablePieChart svg,
.st-variablePieChart__visual {
  display: block;
  overflow: visible;
}

.st-variablePieChart__sector {
  cursor: pointer;
  fill-opacity: 0.82;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-variablePieChart__sector--dim {
  opacity: 0.4;
}

.st-variablePieChart__sector--category1 { fill: var(--st-semantic-data-category1); }
.st-variablePieChart__sector--category2 { fill: var(--st-semantic-data-category2); }
.st-variablePieChart__sector--category3 { fill: var(--st-semantic-data-category3); }
.st-variablePieChart__sector--category4 { fill: var(--st-semantic-data-category4); }
.st-variablePieChart__sector--category5 { fill: var(--st-semantic-data-category5); }
.st-variablePieChart__sector--category6 { fill: var(--st-semantic-data-category6); }
.st-variablePieChart__sector--category7 { fill: var(--st-semantic-data-category7); }
.st-variablePieChart__sector--category8 { fill: var(--st-semantic-data-category8); }

.st-variablePieChart__label {
  font-size: 0.68rem;
  font-weight: 650;
  pointer-events: none;
}

.st-variablePieChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-variablePieChart__tooltipLabel { font-weight: 600; }
.st-variablePieChart__tooltipValue { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .st-variablePieChart__sector {
    transition: none;
  }
}

.st-hlcChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-hlcChart svg {
  display: block;
  overflow: visible;
}

.st-hlcChart__visual {
  display: block;
}

.st-hlcChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-hlcChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-hlcChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-hlcChart__bar--dim {
  opacity: 0.4;
}

.st-hlcChart__range,
.st-hlcChart__close {
  stroke-width: 1.75;
  stroke-linecap: round;
}

.st-hlcChart__bar--up :is(.st-hlcChart__range, .st-hlcChart__close) {
  stroke: var(--st-semantic-feedback-success);
}

.st-hlcChart__bar--down :is(.st-hlcChart__range, .st-hlcChart__close) {
  stroke: var(--st-semantic-feedback-error);
}

@media (prefers-reduced-motion: reduce) {
  .st-hlcChart__bar {
    transition: none;
  }
}

.st-hlcChart__tickLabel,
.st-hlcChart__categoryLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-hlcChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-hlcChart__tooltipLabel {
  font-weight: 600;
}

.st-hlcChart__tooltipValue {
  opacity: 0.85;
}

/* ── ItemChart (parliament / hemicycle) ── */
.st-itemChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-itemChart svg,
.st-itemChart__visual {
  display: block;
  overflow: visible;
}

.st-itemChart__seat {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-itemChart__seat--dim {
  opacity: 0.32;
}

.st-itemChart__seat--category1 { fill: var(--st-semantic-data-category1); }
.st-itemChart__seat--category2 { fill: var(--st-semantic-data-category2); }
.st-itemChart__seat--category3 { fill: var(--st-semantic-data-category3); }
.st-itemChart__seat--category4 { fill: var(--st-semantic-data-category4); }
.st-itemChart__seat--category5 { fill: var(--st-semantic-data-category5); }
.st-itemChart__seat--category6 { fill: var(--st-semantic-data-category6); }
.st-itemChart__seat--category7 { fill: var(--st-semantic-data-category7); }
.st-itemChart__seat--category8 { fill: var(--st-semantic-data-category8); }

.st-itemChart__total {
  fill: var(--st-semantic-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.st-itemChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.st-itemChart__legendItem {
  align-items: center;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.375rem;
  transition: opacity 120ms ease;
}

.st-itemChart__legendItem--dim {
  opacity: 0.4;
}

.st-itemChart__swatch {
  border-radius: 999px;
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}

.st-itemChart__swatch--category1 { background: var(--st-semantic-data-category1); }
.st-itemChart__swatch--category2 { background: var(--st-semantic-data-category2); }
.st-itemChart__swatch--category3 { background: var(--st-semantic-data-category3); }
.st-itemChart__swatch--category4 { background: var(--st-semantic-data-category4); }
.st-itemChart__swatch--category5 { background: var(--st-semantic-data-category5); }
.st-itemChart__swatch--category6 { background: var(--st-semantic-data-category6); }
.st-itemChart__swatch--category7 { background: var(--st-semantic-data-category7); }
.st-itemChart__swatch--category8 { background: var(--st-semantic-data-category8); }

.st-itemChart__legendLabel {
  color: var(--st-semantic-text-primary);
  font-weight: 500;
}

.st-itemChart__legendValue {
  color: var(--st-semantic-text-secondary);
  font-variant-numeric: tabular-nums;
}

.st-itemChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  left: 50%;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.st-itemChart__tooltipLabel { font-weight: 600; }
.st-itemChart__tooltipValue { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .st-itemChart__seat {
    transition: none;
  }
}

.st-wordCloudChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-wordCloudChart svg,
.st-wordCloudChart__visual {
  display: block;
  overflow: visible;
}

.st-wordCloudChart__word {
  cursor: pointer;
  font-weight: 600;
  transition: opacity 120ms ease;
}

.st-wordCloudChart__word--dim {
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .st-wordCloudChart__word {
    transition: none;
  }
}

.st-wordCloudChart__word--category1 { fill: var(--st-semantic-data-category1); }
.st-wordCloudChart__word--category2 { fill: var(--st-semantic-data-category2); }
.st-wordCloudChart__word--category3 { fill: var(--st-semantic-data-category3); }
.st-wordCloudChart__word--category4 { fill: var(--st-semantic-data-category4); }
.st-wordCloudChart__word--category5 { fill: var(--st-semantic-data-category5); }
.st-wordCloudChart__word--category6 { fill: var(--st-semantic-data-category6); }
.st-wordCloudChart__word--category7 { fill: var(--st-semantic-data-category7); }
.st-wordCloudChart__word--category8 { fill: var(--st-semantic-data-category8); }

.st-wordCloudChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-wordCloudChart__tooltipLabel { font-weight: 600; }
.st-wordCloudChart__tooltipValue { opacity: 0.85; }

.st-vennChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.st-vennChart svg,
.st-vennChart__visual {
  display: block;
  overflow: visible;
}

.st-vennChart__circle {
  cursor: pointer;
  fill-opacity: 0.42;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1.5;
  transition: opacity 120ms ease;
}

.st-vennChart__circle--dim {
  opacity: 0.45;
}

.st-vennChart__circle--category1 { fill: var(--st-semantic-data-category1); }
.st-vennChart__circle--category2 { fill: var(--st-semantic-data-category2); }
.st-vennChart__circle--category3 { fill: var(--st-semantic-data-category3); }
.st-vennChart__circle--category4 { fill: var(--st-semantic-data-category4); }
.st-vennChart__circle--category5 { fill: var(--st-semantic-data-category5); }
.st-vennChart__circle--category6 { fill: var(--st-semantic-data-category6); }
.st-vennChart__circle--category7 { fill: var(--st-semantic-data-category7); }
.st-vennChart__circle--category8 { fill: var(--st-semantic-data-category8); }

.st-vennChart__label {
  fill: var(--st-semantic-text-primary);
  font-size: 0.78rem;
  font-weight: 650;
  pointer-events: none;
}

.st-vennChart__value {
  fill: var(--st-semantic-text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  pointer-events: none;
}

.st-vennChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -115%);
  white-space: nowrap;
  z-index: 1;
}

.st-vennChart__tooltipLabel { font-weight: 600; }
.st-vennChart__tooltipValue { opacity: 0.85; }


/* ---------------------------------------------------------------------------
   ConfigItemCard — carte d'item de configuration (agents, workflows, gabarits)
   avec badge de provenance et actions Copier / Éditer / Réinitialiser / Supprimer.
   --------------------------------------------------------------------------- */
.st-configItemCard {
  background: var(--st-component-card-background, var(--st-semantic-surface-raised));
  border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
  border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
  border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
  color: var(--st-semantic-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-1, 0.25rem);
  padding: var(--st-spacing-4, 1rem);
}

.st-configItemCard__header {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: space-between;
}

.st-configItemCard__name {
  color: var(--st-semantic-text-primary);
  font-weight: 600;
}

.st-configItemCard__badge {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 500;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
  padding: 0.1875rem var(--st-spacing-2, 0.5rem);
}

.st-configItemCard__badge--system {
  background: var(--st-semantic-surface-subtle);
  color: var(--st-semantic-text-secondary);
}

.st-configItemCard__badge--custom {
  background: var(--st-semantic-feedback-info);
  color: var(--st-semantic-text-inverse);
}

.st-configItemCard__badgeIcon {
  display: block;
  flex: 0 0 auto;
}

.st-configItemCard__key {
  color: var(--st-semantic-text-muted);
  font-size: 0.75rem;
}

.st-configItemCard__description {
  color: var(--st-semantic-text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
  margin: var(--st-spacing-1, 0.25rem) 0 0;
}

.st-configItemCard__actions {
  display: flex;
  gap: var(--st-spacing-1, 0.25rem);
  margin-top: var(--st-spacing-3, 0.75rem);
}

.st-configItemCard__action {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-muted);
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  justify-content: center;
  padding: var(--st-spacing-1, 0.25rem);
  transition: color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-configItemCard__action:hover:not(:disabled) {
  background: var(--st-semantic-surface-hover);
  color: var(--st-semantic-text-primary);
}

.st-configItemCard__action--warning:hover:not(:disabled) {
  color: var(--st-semantic-feedback-warning);
}

.st-configItemCard__action--danger:hover:not(:disabled) {
  color: var(--st-semantic-feedback-error);
}

.st-configItemCard__action:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 2px;
}

.st-configItemCard__action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
   FieldCard — carte de groupe de champs avec en-tête titré, pastille de
   commentaires et variantes plain / bordered / accent (liseré catégoriel).
   --------------------------------------------------------------------------- */
.st-fieldCard {
  background: var(--st-component-card-background, var(--st-semantic-surface-raised));
  border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
  border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
  border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
  color: var(--st-semantic-text-primary);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--st-spacing-4, 1rem);
}

.st-fieldCard--accent {
  border-inline-start-width: var(--st-spacing-1, 0.25rem);
  border-radius: 0;
}

.st-fieldCard__header {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: space-between;
}

.st-fieldCard--bordered .st-fieldCard__header {
  border-bottom: 1px solid var(--st-semantic-border-subtle);
  margin-bottom: var(--st-spacing-3, 0.75rem);
  padding-bottom: var(--st-spacing-3, 0.75rem);
}

.st-fieldCard__label {
  color: var(--st-semantic-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.st-fieldCard--bordered .st-fieldCard__label {
  font-size: 1rem;
}

.st-fieldCard__comments {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-muted);
  cursor: var(--st-cursor-interactive, pointer);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  gap: 0.1875rem;
  line-height: 1;
  padding: 0.125rem var(--st-spacing-1, 0.25rem);
}

.st-fieldCard__comments--static {
  cursor: default;
}

.st-fieldCard__comments:hover:not(.st-fieldCard__comments--static) {
  color: var(--st-semantic-text-primary);
}

.st-fieldCard__comments:focus-visible {
  outline: 2px solid var(--st-semantic-border-interactive);
  outline-offset: 2px;
}

.st-fieldCard__body {
  color: var(--st-semantic-text-primary);
  flex: 1 1 auto;
}

.st-fieldCard--plain .st-fieldCard__body,
.st-fieldCard--accent .st-fieldCard__body {
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-fieldCard--category1 {
  border-inline-start-color: var(--st-semantic-data-category1);
}
.st-fieldCard--category2 {
  border-inline-start-color: var(--st-semantic-data-category2);
}
.st-fieldCard--category3 {
  border-inline-start-color: var(--st-semantic-data-category3);
}
.st-fieldCard--category4 {
  border-inline-start-color: var(--st-semantic-data-category4);
}
.st-fieldCard--category5 {
  border-inline-start-color: var(--st-semantic-data-category5);
}
.st-fieldCard--category6 {
  border-inline-start-color: var(--st-semantic-data-category6);
}
.st-fieldCard--category7 {
  border-inline-start-color: var(--st-semantic-data-category7);
}
.st-fieldCard--category8 {
  border-inline-start-color: var(--st-semantic-data-category8);
}

/* ---------------------------------------------------------------------------
   ScoreCard — carte de score avec notation symbolique (étoiles = value,
   croix = complexity) et score chiffré.
   --------------------------------------------------------------------------- */
.st-scoreCard {
  background: var(--st-component-card-background, var(--st-semantic-surface-raised));
  border-width: var(--st-component-card-anatomy-shape-borderWidth, 1px);
  border-style: var(--st-component-card-anatomy-shape-borderStyle, solid);
  border-color: var(--st-component-card-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-card-anatomy-shape-radius, 0.5rem);
  box-shadow: var(--st-component-card-shadow, 0 1px 2px rgb(15 23 42 / 0.08));
  color: var(--st-semantic-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-2, 0.5rem);
  padding: var(--st-spacing-4, 1rem);
}

.st-scoreCard--sm {
  gap: var(--st-spacing-1, 0.25rem);
  padding: var(--st-spacing-3, 0.75rem);
}

.st-scoreCard--lg {
  gap: var(--st-spacing-3, 0.75rem);
  padding: var(--st-spacing-6, 1.5rem);
}

.st-scoreCard__title {
  color: var(--st-semantic-text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.st-scoreCard__row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
}

.st-scoreCard__symbols {
  display: inline-flex;
  gap: 0.125rem;
}

.st-scoreCard__symbol {
  display: block;
  flex: 0 0 auto;
}

.st-scoreCard--sm .st-scoreCard__symbol {
  height: 16px;
  width: 16px;
}

.st-scoreCard--lg .st-scoreCard__symbol {
  height: 24px;
  width: 24px;
}

.st-scoreCard__symbol--off {
  color: var(--st-semantic-border-default);
}

.st-scoreCard--value .st-scoreCard__symbol--on {
  color: var(--st-semantic-feedback-warning);
}

.st-scoreCard--complexity .st-scoreCard__symbol--on {
  color: var(--st-semantic-text-secondary);
}

.st-scoreCard__score {
  font-size: 1.0625rem;
  font-weight: 700;
}

.st-scoreCard--value .st-scoreCard__score {
  color: var(--st-semantic-feedback-success);
}

.st-scoreCard--complexity .st-scoreCard__score {
  color: var(--st-semantic-feedback-warning);
}

/* --- AppChrome : coque docs assemblée (compose AppHeader) --- */
.st-appChrome {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 30;
}

.st-appChrome__header .st-appHeader__bar {
  background: color-mix(in srgb, var(--st-semantic-surface-default) 96%, transparent);
  backdrop-filter: blur(8px);
  height: 5rem;
  max-width: none;
  padding: 0 var(--st-spacing-6, 1.5rem);
}

.st-appChrome__brand {
  align-items: center;
  color: var(--st-semantic-text-primary);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--st-spacing-3, 0.75rem);
  min-width: 0;
  text-decoration: none;
}

.st-appChrome__brandMark {
  aspect-ratio: 1;
  display: inline-block;
  flex: 0 0 auto;
  height: 2rem;
  object-fit: contain;
  width: 2rem;
}

.st-appChrome__brandCopy {
  display: grid;
  gap: 0.08rem;
  line-height: 1;
  min-width: 0;
}

.st-appChrome__brandName {
  color: var(--st-semantic-text-primary);
  font-size: 1rem;
  font-weight: 760;
}

.st-appChrome__brandProduct {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
  font-weight: 650;
}

.st-appChrome__utilityNav {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-appChrome__menuWrap {
  display: inline-block;
  position: relative;
}

.st-appChrome__control {
  font-size: 0.75rem;
}

.st-appChrome__iconControl {
  justify-content: center;
  padding: 0;
  width: 2.25rem;
}

.st-appChrome__chevron {
  transition: transform var(--st-motion-fast, 120ms) ease;
}

.st-appChrome__chevron.is-rotated {
  transform: rotate(180deg);
}

.st-appChrome__menu {
  background: var(--st-semantic-surface-raised, var(--st-semantic-surface-default));
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-radius-sm, 0.375rem);
  box-shadow: var(--st-shadow-medium, 0 8px 24px rgb(15 23 42 / 0.08));
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 8.5rem;
  padding: 0.25rem;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--st-zindex-overlay, 80);
}

.st-appChrome__menuItem {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-xs, 0.25rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 550;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  text-align: left;
  width: 100%;
  transition: background-color var(--st-motion-fast, 120ms) ease,
    color var(--st-motion-fast, 120ms) ease;
}

.st-appChrome__menuItem:hover {
  background: var(--st-semantic-surface-subtle);
  color: var(--st-semantic-text-primary);
}

.st-appChrome__menuItem.is-active {
  color: var(--st-semantic-text-link);
  font-weight: 650;
}

.st-appChrome__check {
  align-items: center;
  display: inline-flex;
  font-size: 0.75rem;
  justify-content: center;
  width: 0.75rem;
}

.st-appChrome__burgerTrigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--st-radius-xs, 0.25rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  display: none;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.st-appChrome__burgerTrigger:hover {
  background: var(--st-semantic-surface-subtle);
  color: var(--st-semantic-text-primary);
}

.st-appChrome__extraSelectors {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-appChrome__drawer {
  background: var(--st-semantic-surface-default);
  border-bottom: 1px solid var(--st-semantic-border-subtle);
  box-shadow: var(--st-shadow-medium, 0 10px 20px rgb(15 23 42 / 0.05));
  display: none;
  flex-direction: column;
  gap: var(--st-spacing-5, 1.25rem);
  padding: var(--st-spacing-5, 1.25rem);
}

.st-appChrome__drawerSection {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-appChrome__drawerLabel {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.st-appChrome__drawerLink {
  align-items: center;
  border-bottom: 1px solid var(--st-semantic-border-subtle);
  color: var(--st-semantic-text-primary);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 650;
  gap: 0.45rem;
  padding: 0.45rem 0;
  text-decoration: none;
}

.st-appChrome__drawerLink[aria-current="page"],
.st-appChrome__drawerLink:hover {
  color: var(--st-semantic-text-link);
}

.st-appChrome__drawerSwitcher {
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-appChrome__drawerBtn {
  background: var(--st-semantic-surface-subtle);
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: var(--st-radius-xs, 0.25rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 0.45rem;
}

.st-appChrome__drawerBtn.is-active {
  background: var(--st-semantic-border-interactive);
  border-color: var(--st-semantic-border-interactive);
  color: var(--st-semantic-text-on-emphasis, var(--st-semantic-surface-default));
}

@media (max-width: 768px) {
  .st-appChrome__utilityNav {
    display: none;
  }

  .st-appChrome__burgerTrigger {
    display: inline-flex;
  }

  .st-appChrome__drawer {
    display: flex;
  }
}

/* ---------------------------------------------------------------------------
   FlamegraphChart — pile d'appels « icicle » empilée (façon Grafana
   flamegraph), largeur ∝ value, profondeur = niveau vertical.
   --------------------------------------------------------------------------- */
.st-flamegraphChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-flamegraphChart svg {
  display: block;
  overflow: visible;
}

.st-flamegraphChart__visual {
  display: block;
}

.st-flamegraphChart__frame {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-flamegraphChart__frame--dim {
  opacity: 0.4;
}

.st-flamegraphChart__frame--category1 { fill: var(--st-semantic-data-category1); }
.st-flamegraphChart__frame--category2 { fill: var(--st-semantic-data-category2); }
.st-flamegraphChart__frame--category3 { fill: var(--st-semantic-data-category3); }
.st-flamegraphChart__frame--category4 { fill: var(--st-semantic-data-category4); }
.st-flamegraphChart__frame--category5 { fill: var(--st-semantic-data-category5); }
.st-flamegraphChart__frame--category6 { fill: var(--st-semantic-data-category6); }
.st-flamegraphChart__frame--category7 { fill: var(--st-semantic-data-category7); }
.st-flamegraphChart__frame--category8 { fill: var(--st-semantic-data-category8); }

.st-flamegraphChart__label {
  fill: var(--st-semantic-text-inverse);
  font-size: 0.6875rem;
  pointer-events: none;
}

.st-flamegraphChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-flamegraphChart__tooltipLabel {
  font-weight: 600;
}

.st-flamegraphChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-flamegraphChart__frame {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   TraceWaterfallChart — spans distribués imbriqués (trace waterfall), barres
   start → start + duration sur l'axe temps, ordre hiérarchique (DFS) + indentation.
   --------------------------------------------------------------------------- */
.st-traceWaterfallChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-traceWaterfallChart svg {
  display: block;
  overflow: visible;
}

.st-traceWaterfallChart__visual {
  display: block;
}

.st-traceWaterfallChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-traceWaterfallChart__grid {
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  opacity: 0.7;
}

.st-traceWaterfallChart__tickLabel,
.st-traceWaterfallChart__spanLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-traceWaterfallChart__bar {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.st-traceWaterfallChart__bar--dim {
  opacity: 0.4;
}

.st-traceWaterfallChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-traceWaterfallChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-traceWaterfallChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-traceWaterfallChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-traceWaterfallChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-traceWaterfallChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-traceWaterfallChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-traceWaterfallChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-traceWaterfallChart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
  list-style: none;
  margin: var(--st-spacing-2, 0.5rem) 0 0 0;
  padding: 0;
}

.st-traceWaterfallChart__legendItem {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  font-size: 0.75rem;
  gap: var(--st-spacing-1, 0.25rem);
  line-height: 1;
}

.st-traceWaterfallChart__legendSwatch {
  border-radius: var(--st-radius-sm, 0.25rem);
  display: inline-block;
  height: 0.625rem;
  width: 0.625rem;
}
.st-traceWaterfallChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-traceWaterfallChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-traceWaterfallChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-traceWaterfallChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-traceWaterfallChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-traceWaterfallChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-traceWaterfallChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-traceWaterfallChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-traceWaterfallChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-traceWaterfallChart__tooltipLabel {
  font-weight: 600;
}

.st-traceWaterfallChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-traceWaterfallChart__bar {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   DecompositionTreeChart — arbre de décomposition (Power BI decomposition tree).
   --------------------------------------------------------------------------- */
.st-decompositionTreeChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-decompositionTreeChart svg {
  display: block;
  overflow: visible;
}

.st-decompositionTreeChart__visual {
  display: block;
}

.st-decompositionTreeChart__link {
  fill: none;
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1.5;
  transition: opacity 120ms ease;
}

.st-decompositionTreeChart__link--dim {
  opacity: 0.3;
}

.st-decompositionTreeChart__bar {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 1;
  transition: opacity 120ms ease;
}

.st-decompositionTreeChart__bar--dim {
  opacity: 0.4;
}

.st-decompositionTreeChart__bar--category1 { fill: var(--st-semantic-data-category1); }
.st-decompositionTreeChart__bar--category2 { fill: var(--st-semantic-data-category2); }
.st-decompositionTreeChart__bar--category3 { fill: var(--st-semantic-data-category3); }
.st-decompositionTreeChart__bar--category4 { fill: var(--st-semantic-data-category4); }
.st-decompositionTreeChart__bar--category5 { fill: var(--st-semantic-data-category5); }
.st-decompositionTreeChart__bar--category6 { fill: var(--st-semantic-data-category6); }
.st-decompositionTreeChart__bar--category7 { fill: var(--st-semantic-data-category7); }
.st-decompositionTreeChart__bar--category8 { fill: var(--st-semantic-data-category8); }

.st-decompositionTreeChart__label {
  fill: var(--st-semantic-text-inverse);
  font-size: 0.6875rem;
  pointer-events: none;
}

.st-decompositionTreeChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-decompositionTreeChart__tooltipLabel {
  font-weight: 600;
}

.st-decompositionTreeChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-decompositionTreeChart__bar,
  .st-decompositionTreeChart__link {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Density2DChart — densité 2D binned sur axes numériques (Tableau/Dataiku).
   --------------------------------------------------------------------------- */
.st-density2DChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-density2DChart svg {
  display: block;
  overflow: visible;
}

.st-density2DChart__visual {
  display: block;
}

.st-density2DChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-density2DChart__tickLabel {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-density2DChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 0.5;
  transition: opacity 120ms ease;
}

.st-density2DChart__cell--dim {
  opacity: 0.4;
}

.st-density2DChart__cell--category1,
.st-density2DChart__legendSwatch--category1 { fill: var(--st-semantic-data-category1); background: var(--st-semantic-data-category1); }
.st-density2DChart__cell--category2,
.st-density2DChart__legendSwatch--category2 { fill: var(--st-semantic-data-category2); background: var(--st-semantic-data-category2); }
.st-density2DChart__cell--category3,
.st-density2DChart__legendSwatch--category3 { fill: var(--st-semantic-data-category3); background: var(--st-semantic-data-category3); }
.st-density2DChart__cell--category4,
.st-density2DChart__legendSwatch--category4 { fill: var(--st-semantic-data-category4); background: var(--st-semantic-data-category4); }
.st-density2DChart__cell--category5,
.st-density2DChart__legendSwatch--category5 { fill: var(--st-semantic-data-category5); background: var(--st-semantic-data-category5); }
.st-density2DChart__cell--category6,
.st-density2DChart__legendSwatch--category6 { fill: var(--st-semantic-data-category6); background: var(--st-semantic-data-category6); }
.st-density2DChart__cell--category7,
.st-density2DChart__legendSwatch--category7 { fill: var(--st-semantic-data-category7); background: var(--st-semantic-data-category7); }
.st-density2DChart__cell--category8,
.st-density2DChart__legendSwatch--category8 { fill: var(--st-semantic-data-category8); background: var(--st-semantic-data-category8); }

.st-density2DChart__legend {
  align-items: center;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  margin-top: var(--st-spacing-2, 0.5rem);
}

.st-density2DChart__legendRamp {
  display: inline-grid;
  grid-template-columns: repeat(8, minmax(0.75rem, 1fr));
  min-width: 8rem;
}

.st-density2DChart__legendSwatch {
  display: block;
  height: 0.5rem;
}

.st-density2DChart__legendText {
  color: var(--st-semantic-text-secondary);
  font-size: 0.75rem;
}

.st-density2DChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-density2DChart__tooltipLabel {
  font-weight: 600;
}

.st-density2DChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-density2DChart__cell {
    transition: none;
  }
}

.st-eventFeedPanel {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  width: 100%;
}

.st-eventFeedPanel__label {
  color: var(--st-semantic-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0 0 var(--st-spacing-2, 0.5rem) 0;
}

.st-eventFeedPanel__list {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-1, 0.25rem);
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;
}

.st-eventFeedPanel__item {
  align-items: flex-start;
  background: var(--st-semantic-surface-subtle);
  border-left: 3px solid var(--st-semantic-border-strong);
  /* Accent latéral fort = coins carrés. Ne pas arrondir une carte/exergue à liseré. */
  border-radius: 0;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  padding: var(--st-spacing-2, 0.5rem) var(--st-spacing-3, 0.75rem);
}

.st-eventFeedPanel__item--info { border-left-color: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-eventFeedPanel__item--success { border-left-color: var(--st-semantic-feedback-success); }
.st-eventFeedPanel__item--warning { border-left-color: var(--st-semantic-feedback-warning); }
.st-eventFeedPanel__item--error { border-left-color: var(--st-semantic-feedback-error); }
.st-eventFeedPanel__item--neutral { border-left-color: var(--st-semantic-border-strong); }

.st-eventFeedPanel__badge {
  border-radius: var(--st-radius-full, 9999px);
  flex: none;
  height: 0.5rem;
  margin-top: 0.3125rem;
  width: 0.5rem;
}

.st-eventFeedPanel__badge--info { background: var(--st-semantic-feedback-info, var(--st-semantic-action-primary)); }
.st-eventFeedPanel__badge--success { background: var(--st-semantic-feedback-success); }
.st-eventFeedPanel__badge--warning { background: var(--st-semantic-feedback-warning); }
.st-eventFeedPanel__badge--error { background: var(--st-semantic-feedback-error); }
.st-eventFeedPanel__badge--neutral { background: var(--st-semantic-border-strong); }

.st-eventFeedPanel__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.st-eventFeedPanel__meta {
  align-items: baseline;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: space-between;
}

.st-eventFeedPanel__type {
  color: var(--st-semantic-text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.st-eventFeedPanel__time {
  color: var(--st-semantic-text-secondary);
  flex: none;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.st-eventFeedPanel__message {
  color: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
  margin: 0;
}

.st-vectorFieldChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-vectorFieldChart svg {
  display: block;
  overflow: visible;
}

.st-vectorFieldChart__visual {
  display: block;
}

.st-vectorFieldChart__grid {
  opacity: 0.7;
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}

.st-vectorFieldChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-vectorFieldChart__tick {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-vectorFieldChart__arrow {
  transition: opacity 120ms ease;
}

.st-vectorFieldChart__arrow--dim {
  opacity: 0.35;
}

.st-vectorFieldChart__shaft {
  cursor: pointer;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.st-vectorFieldChart__head {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.st-vectorFieldChart__arrow--category1 { color: var(--st-semantic-data-category1); }
.st-vectorFieldChart__arrow--category2 { color: var(--st-semantic-data-category2); }
.st-vectorFieldChart__arrow--category3 { color: var(--st-semantic-data-category3); }
.st-vectorFieldChart__arrow--category4 { color: var(--st-semantic-data-category4); }
.st-vectorFieldChart__arrow--category5 { color: var(--st-semantic-data-category5); }
.st-vectorFieldChart__arrow--category6 { color: var(--st-semantic-data-category6); }
.st-vectorFieldChart__arrow--category7 { color: var(--st-semantic-data-category7); }
.st-vectorFieldChart__arrow--category8 { color: var(--st-semantic-data-category8); }

.st-vectorFieldChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-vectorFieldChart__tooltipLabel {
  font-weight: 600;
}

.st-vectorFieldChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-vectorFieldChart__arrow {
    transition: none;
  }
}

.st-contourChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-contourChart svg {
  display: block;
  overflow: visible;
}

.st-contourChart__visual {
  display: block;
}

.st-contourChart__grid {
  opacity: 0.5;
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}

.st-contourChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-contourChart__tick {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-contourChart__cell {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default);
  stroke-width: 0.5;
  transition: opacity 120ms ease;
}

.st-contourChart__cell--dim {
  opacity: 0.35;
}

.st-contourChart__isoline {
  pointer-events: none;
  stroke: var(--st-semantic-border-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.st-contourChart__cell--category1 { fill: var(--st-semantic-data-category1); }
.st-contourChart__cell--category2 { fill: var(--st-semantic-data-category2); }
.st-contourChart__cell--category3 { fill: var(--st-semantic-data-category3); }
.st-contourChart__cell--category4 { fill: var(--st-semantic-data-category4); }
.st-contourChart__cell--category5 { fill: var(--st-semantic-data-category5); }
.st-contourChart__cell--category6 { fill: var(--st-semantic-data-category6); }
.st-contourChart__cell--category7 { fill: var(--st-semantic-data-category7); }
.st-contourChart__cell--category8 { fill: var(--st-semantic-data-category8); }

.st-contourChart__legend {
  align-items: center;
  color: var(--st-semantic-text-secondary);
  display: flex;
  font-size: 0.6875rem;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.st-contourChart__legendRamp {
  display: inline-flex;
}

.st-contourChart__legendSwatch {
  display: inline-block;
  height: 0.75rem;
  width: 1.25rem;
}

.st-contourChart__legendSwatch--category1 { background: var(--st-semantic-data-category1); }
.st-contourChart__legendSwatch--category2 { background: var(--st-semantic-data-category2); }
.st-contourChart__legendSwatch--category3 { background: var(--st-semantic-data-category3); }
.st-contourChart__legendSwatch--category4 { background: var(--st-semantic-data-category4); }
.st-contourChart__legendSwatch--category5 { background: var(--st-semantic-data-category5); }
.st-contourChart__legendSwatch--category6 { background: var(--st-semantic-data-category6); }
.st-contourChart__legendSwatch--category7 { background: var(--st-semantic-data-category7); }
.st-contourChart__legendSwatch--category8 { background: var(--st-semantic-data-category8); }

.st-contourChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-contourChart__tooltipLabel {
  font-weight: 600;
}

.st-contourChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-contourChart__cell {
    transition: none;
  }
}

.st-windBarbChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-windBarbChart svg {
  display: block;
  overflow: visible;
}

.st-windBarbChart__visual {
  display: block;
}

.st-windBarbChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-windBarbChart__tick {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-windBarbChart__barb {
  transition: opacity 120ms ease;
}

.st-windBarbChart__barb--dim {
  opacity: 0.35;
}

.st-windBarbChart__shaft {
  cursor: pointer;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.st-windBarbChart__feather {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.st-windBarbChart__barb--category1 { color: var(--st-semantic-data-category1); }
.st-windBarbChart__barb--category2 { color: var(--st-semantic-data-category2); }
.st-windBarbChart__barb--category3 { color: var(--st-semantic-data-category3); }
.st-windBarbChart__barb--category4 { color: var(--st-semantic-data-category4); }
.st-windBarbChart__barb--category5 { color: var(--st-semantic-data-category5); }
.st-windBarbChart__barb--category6 { color: var(--st-semantic-data-category6); }
.st-windBarbChart__barb--category7 { color: var(--st-semantic-data-category7); }
.st-windBarbChart__barb--category8 { color: var(--st-semantic-data-category8); }

.st-windBarbChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-windBarbChart__tooltipLabel {
  font-weight: 600;
}

.st-windBarbChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-windBarbChart__barb {
    transition: none;
  }
}

.st-renkoChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-renkoChart svg {
  display: block;
  overflow: visible;
}

.st-renkoChart__visual {
  display: block;
}

.st-renkoChart__grid {
  opacity: 0.5;
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}

.st-renkoChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-renkoChart__tick {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-renkoChart__brick {
  cursor: pointer;
  stroke: var(--st-semantic-surface-default, Canvas);
  stroke-width: 0.5;
  transition: opacity 120ms ease;
}

.st-renkoChart__brick--dim {
  opacity: 0.35;
}

.st-renkoChart__brick--up {
  fill: var(--st-semantic-feedback-success);
}

.st-renkoChart__brick--down {
  fill: var(--st-semantic-feedback-error);
}

.st-renkoChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-renkoChart__tooltipLabel {
  font-weight: 600;
}

.st-renkoChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-renkoChart__brick {
    transition: none;
  }
}

.st-pointAndFigureChart {
  color: var(--st-semantic-text-secondary);
  display: block;
  font-family: inherit;
  position: relative;
  width: 100%;
}

.st-pointAndFigureChart svg {
  display: block;
  overflow: visible;
}

.st-pointAndFigureChart__visual {
  display: block;
}

.st-pointAndFigureChart__grid {
  opacity: 0.5;
  stroke: var(--st-semantic-border-subtle);
  stroke-dasharray: 2 3;
  stroke-width: 1;
}

.st-pointAndFigureChart__axis {
  stroke: var(--st-semantic-border-subtle);
  stroke-width: 1;
}

.st-pointAndFigureChart__tick {
  fill: var(--st-semantic-text-secondary);
  font-size: 0.6875rem;
}

.st-pointAndFigureChart__mark {
  transition: opacity 120ms ease;
}

.st-pointAndFigureChart__mark--dim {
  opacity: 0.35;
}

.st-pointAndFigureChart__glyph {
  cursor: pointer;
  fill: none;
  stroke-linecap: round;
  stroke-width: 2;
}

.st-pointAndFigureChart__mark--x .st-pointAndFigureChart__glyph,
.st-pointAndFigureChart__mark--x.st-pointAndFigureChart__glyph {
  stroke: var(--st-semantic-feedback-success);
}

.st-pointAndFigureChart__mark--o .st-pointAndFigureChart__glyph,
.st-pointAndFigureChart__mark--o.st-pointAndFigureChart__glyph {
  stroke: var(--st-semantic-feedback-error);
}

.st-pointAndFigureChart__tooltip {
  background: var(--st-semantic-surface-inverse);
  border-radius: var(--st-radius-sm, 0.25rem);
  color: var(--st-semantic-text-inverse);
  display: inline-flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 0.125rem;
  line-height: 1.2;
  padding: 0.375rem 0.5rem;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  white-space: nowrap;
  z-index: 1;
}

.st-pointAndFigureChart__tooltipLabel {
  font-weight: 600;
}

.st-pointAndFigureChart__tooltipValue {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .st-pointAndFigureChart__mark {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   ColorSwatch — affiche UNE couleur arbitraire (hex/rgb/oklch/token) sous forme
   de pastille. La couleur passée en prop est rendue via un background inline
   (raison d'être du composant) ; le style propre ci-dessous reste token-only.
   --------------------------------------------------------------------------- */
.st-colorSwatch {
  align-items: center;
  color: var(--st-semantic-text-secondary, inherit);
  display: inline-flex;
  font-family: inherit;
  gap: var(--st-spacing-2, 0.5rem);
  line-height: 1;
  vertical-align: middle;
}

.st-colorSwatch__chip {
  border: var(--st-border-width-thin, 1px) solid
    var(--st-semantic-border-subtle, var(--st-semantic-border-strong, rgba(0, 0, 0, 0.12)));
  border-radius: var(--st-radius-sm, 0.25rem);
  box-sizing: border-box;
  display: inline-block;
  flex: none;
}

.st-colorSwatch--circle .st-colorSwatch__chip {
  border-radius: var(--st-radius-full, 999px);
}

.st-colorSwatch--pill .st-colorSwatch__chip {
  border-radius: var(--st-radius-pill, var(--st-radius-full, 999px));
}

.st-colorSwatch__label {
  color: var(--st-semantic-text-primary, inherit);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   ColorScaleBar — échelle de couleur continue (gradient) à partir de stops
   arbitraires. Le gradient est rendu via un background inline (raison d'être) ;
   le style propre ci-dessous reste token-only.
   --------------------------------------------------------------------------- */
.st-colorScaleBar {
  color: var(--st-semantic-text-secondary, inherit);
  display: inline-flex;
  flex-direction: column;
  font-family: inherit;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-colorScaleBar__label {
  color: var(--st-semantic-text-primary, inherit);
  font-size: 0.875rem;
  line-height: 1.2;
}

.st-colorScaleBar__track {
  align-items: center;
  display: inline-flex;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-colorScaleBar--vertical .st-colorScaleBar__track {
  flex-direction: column;
}

.st-colorScaleBar__bar {
  border: var(--st-border-width-thin, 1px) solid
    var(--st-semantic-border-subtle, var(--st-semantic-border-strong, rgba(0, 0, 0, 0.12)));
  border-radius: var(--st-radius-sm, 0.25rem);
  box-sizing: border-box;
}

.st-colorScaleBar--horizontal .st-colorScaleBar__bar {
  height: var(--st-colorScaleBar-thickness, 0.75rem);
  width: var(--st-colorScaleBar-length, 12rem);
}

.st-colorScaleBar--vertical .st-colorScaleBar__bar {
  height: var(--st-colorScaleBar-length, 12rem);
  width: var(--st-colorScaleBar-thickness, 0.75rem);
}

.st-colorScaleBar__end {
  color: var(--st-semantic-text-secondary, inherit);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Timeline — liste d'événements datés reliés par une ligne de connexion (façon
   Ant Design / MUI Timeline). Sémantique <ol>/<li>, pastilles aria-hidden.
   Style 100% token-only. Distinct de TimelineChart (dataviz à échelle temporelle).
   --------------------------------------------------------------------------- */
.st-timeline {
  color: var(--st-semantic-text-primary, inherit);
  display: flex;
  font-family: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-timeline--vertical {
  flex-direction: column;
}

.st-timeline--horizontal {
  flex-direction: row;
}

.st-timeline__item {
  --st-timeline-dot: var(--st-semantic-border-strong, rgba(0, 0, 0, 0.32));
  display: flex;
  gap: var(--st-spacing-3, 0.75rem);
  position: relative;
}

.st-timeline--vertical .st-timeline__item {
  flex-direction: row;
  padding-bottom: var(--st-spacing-4, 1rem);
}

.st-timeline--vertical .st-timeline__item:last-child {
  padding-bottom: 0;
}

.st-timeline--horizontal .st-timeline__item {
  flex: 1 1 0;
  flex-direction: column;
  padding-right: var(--st-spacing-4, 1rem);
}

.st-timeline--horizontal .st-timeline__item:last-child {
  padding-right: 0;
}

.st-timeline__item--info {
  --st-timeline-dot: var(--st-semantic-feedback-info, var(--st-semantic-action-primary));
}

.st-timeline__item--success {
  --st-timeline-dot: var(--st-semantic-feedback-success);
}

.st-timeline__item--warning {
  --st-timeline-dot: var(--st-semantic-feedback-warning);
}

.st-timeline__item--danger {
  --st-timeline-dot: var(--st-semantic-feedback-error);
}

.st-timeline__rail {
  align-items: center;
  display: flex;
  flex: none;
  position: relative;
}

.st-timeline--vertical .st-timeline__rail {
  flex-direction: column;
}

.st-timeline--horizontal .st-timeline__rail {
  flex-direction: row;
  width: 100%;
}

.st-timeline__dot {
  background: var(--st-timeline-dot);
  border-radius: var(--st-radius-full, 9999px);
  box-sizing: border-box;
  flex: none;
  height: var(--st-timeline-dot-size, 0.75rem);
  width: var(--st-timeline-dot-size, 0.75rem);
}

.st-timeline__line {
  background: var(--st-semantic-border-subtle, var(--st-semantic-border-strong, rgba(0, 0, 0, 0.12)));
  flex: 1 1 auto;
}

.st-timeline--vertical .st-timeline__line {
  margin-top: var(--st-spacing-1, 0.25rem);
  min-height: var(--st-spacing-4, 1rem);
  width: var(--st-border-width-thin, 1px);
}

.st-timeline--horizontal .st-timeline__line {
  height: var(--st-border-width-thin, 1px);
  margin-left: var(--st-spacing-1, 0.25rem);
}

.st-timeline__item:last-child .st-timeline__line {
  display: none;
}

.st-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-1, 0.25rem);
  padding-bottom: var(--st-spacing-1, 0.25rem);
}

.st-timeline__meta {
  color: var(--st-semantic-text-secondary, inherit);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.st-timeline__title {
  color: var(--st-semantic-text-primary, inherit);
  font-size: 0.9375rem;
  font-weight: var(--st-font-weight-medium, 600);
  line-height: 1.3;
}

.st-timeline__description {
  color: var(--st-semantic-text-secondary, inherit);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ===========================================================================
   Wave 1 NavSystem — Overline, StatusDot, NavActionStack + Checkbox/Search ext.
   Token-only (P-C : anatomie par thème). Aucun hex littéral.
   =========================================================================== */

/* --- Overline ------------------------------------------------------------ */
.st-overline {
  color: var(--st-component-overline-color, var(--st-semantic-text-secondary, inherit));
  display: var(--st-component-overline-display, inline-block);
  font-family: inherit;
  font-size: var(--st-component-overline-fontSize, 0.6875rem);
  font-weight: var(--st-component-overline-fontWeight, 600);
  letter-spacing: var(--st-component-overline-letterSpacing, 0.04em);
  line-height: var(--st-component-overline-lineHeight, 1.3);
  margin: 0;
  text-transform: var(--st-component-overline-textTransform, uppercase);
}

/* --- StatusDot ----------------------------------------------------------- */
.st-statusDot {
  align-items: center;
  color: var(--st-semantic-text-primary, inherit);
  display: inline-flex;
  font-family: inherit;
  gap: var(--st-spacing-2, 0.5rem);
  line-height: 1;
  vertical-align: middle;
}

.st-statusDot__dot {
  border-radius: var(--st-radius-full, 50%);
  box-sizing: border-box;
  display: inline-block;
  flex: none;
}

/* Tone background + matching `color` so `currentColor` in the pulse keyframe
   follows the dot. */
.st-statusDot__dot--neutral {
  background-color: var(--st-component-statusDot-neutral, var(--st-semantic-text-secondary));
  color: var(--st-component-statusDot-neutral, var(--st-semantic-text-secondary));
}
.st-statusDot__dot--info {
  background-color: var(--st-component-statusDot-info, var(--st-semantic-feedback-info));
  color: var(--st-component-statusDot-info, var(--st-semantic-feedback-info));
}
.st-statusDot__dot--success {
  background-color: var(--st-component-statusDot-success, var(--st-semantic-feedback-success));
  color: var(--st-component-statusDot-success, var(--st-semantic-feedback-success));
}
.st-statusDot__dot--warning {
  background-color: var(--st-component-statusDot-warning, var(--st-semantic-feedback-warning));
  color: var(--st-component-statusDot-warning, var(--st-semantic-feedback-warning));
}
.st-statusDot__dot--error {
  background-color: var(--st-component-statusDot-error, var(--st-semantic-feedback-error));
  color: var(--st-component-statusDot-error, var(--st-semantic-feedback-error));
}

.st-statusDot__label {
  color: var(--st-semantic-text-primary, inherit);
  font-size: var(--st-component-statusDot-labelFontSize, 0.8125rem);
  font-weight: var(--st-component-statusDot-labelFontWeight, 500);
}

/* Halo « live » : box-shadow animé. currentColor = la couleur du point. */
.st-statusDot__dot--pulse {
  animation: st-statusDot-pulse 1.6s ease-out infinite;
}

@keyframes st-statusDot-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 var(--st-component-statusDot-pulseSpread, 0.375rem)
      color-mix(in srgb, currentColor 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-statusDot__dot--pulse {
    animation: none;
  }
}

/* --- NavActionStack ------------------------------------------------------ */
.st-navActionStack {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-4, 1rem);
  inline-size: 100%;
}

.st-navActionStack__actions {
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-navActionStack--vertical .st-navActionStack__actions {
  flex-direction: column;
  align-items: stretch;
}

.st-navActionStack--horizontal .st-navActionStack__actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Pleine largeur en pile verticale ; largeur naturelle en rangée. */
.st-navActionStack--vertical .st-navActionStack__item {
  inline-size: 100%;
}

.st-navActionStack__danger {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-navActionStack__dangerLabel {
  color: var(--st-component-overline-color, var(--st-semantic-text-secondary, inherit));
  display: inline-block;
  font-size: var(--st-component-overline-fontSize, 0.6875rem);
  font-weight: var(--st-component-overline-fontWeight, 600);
  letter-spacing: var(--st-component-overline-letterSpacing, 0.04em);
  line-height: var(--st-component-overline-lineHeight, 1.3);
  text-transform: var(--st-component-overline-textTransform, uppercase);
}

/* La zone sensible est pleine largeur quelle que soit l'orientation. */
.st-navActionStack .st-navActionStack__dangerAction {
  inline-size: 100%;
}

/* --- Checkbox extensions (description + trailing) ------------------------- */
/* SIGNAL filter row: input + content + trailing count, content fills, trailing
   pushed to the row end. Top-aligned so the box rides the first text line when a
   secondary description wraps below the label. */
.st-choice:has(.st-choice__trailing) {
  align-items: start;
  grid-template-columns: auto 1fr auto;
  justify-content: space-between;
  width: 100%;
}

.st-choice__trailing {
  align-items: center;
  align-self: start;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* Secondary muted description under the label (SIGNAL filter hint). */
.st-choice__description {
  color: var(--st-semantic-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* --- Search extension (fluid) -------------------------------------------- */
/* Fluid mode: lift the width cap so the field fills a narrow drawer/rail. */
.st-search--fluid {
  max-width: none;
  width: 100%;
}

/* ===========================================================================
   NavItem — canonical nav-row anatomy (wave 2). Composes SelectableRow +
   ColorSwatch / StatusDot (head) + Badge (count). Token-only, no raw hex.
   =========================================================================== */
.st-navItem {
  display: block;
  inline-size: 100%;
}

/* Depth INDENTATION: offset the composed SelectableRow (its head included) by an
   inline-start padding ADDITIVE to its base padding (0.75rem). The
   --st-navItem-indent var is set on the wrapper and inherited by the row. */
.st-navItem .st-selectableRow {
  padding-inline-start: calc(0.75rem + var(--st-navItem-indent, 0rem));
}

/* Typographic scale: weight AND size DECREASE with depth so the hierarchy reads
   without a colour cue. Each token falls back to a literal → a silent theme
   renders byte-identically. */
.st-navItem--depth0 .st-navItem__title {
  font-size: var(--st-component-navItem-depth0-fontSize, 0.875rem);
  font-weight: var(--st-component-navItem-depth0-fontWeight, 600);
}
.st-navItem--depth1 .st-navItem__title {
  font-size: var(--st-component-navItem-depth1-fontSize, 0.8125rem);
  font-weight: var(--st-component-navItem-depth1-fontWeight, 500);
}
.st-navItem--depth2 .st-navItem__title {
  font-size: var(--st-component-navItem-depth2-fontSize, 0.8125rem);
  font-weight: var(--st-component-navItem-depth2-fontWeight, 400);
}
/* L3 — muted: same metric as L2, dimmed colour. */
.st-navItem--depth3 .st-navItem__title {
  font-size: var(--st-component-navItem-depth3-fontSize, 0.8125rem);
  font-weight: var(--st-component-navItem-depth3-fontWeight, 400);
  color: var(--st-component-navItem-depth3-color, var(--st-semantic-text-muted));
}

.st-navItem__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-navItem__caption {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Semantic ROW status: tints the title with the matching feedback. A "HTTP 403"
   error becomes a real semantic red. Each tone falls back to its
   --st-semantic-feedback-* token. */
.st-navItem--status-info .st-navItem__title {
  color: var(--st-component-navItem-status-info, var(--st-semantic-feedback-info));
}
.st-navItem--status-success .st-navItem__title {
  color: var(--st-component-navItem-status-success, var(--st-semantic-feedback-success));
}
.st-navItem--status-warning .st-navItem__title {
  color: var(--st-component-navItem-status-warning, var(--st-semantic-feedback-warning));
}
.st-navItem--status-error .st-navItem__title {
  color: var(--st-component-navItem-status-error, var(--st-semantic-feedback-error));
}

/* Token-only divider: a fine full-width rule after the row. */
.st-navItem__divider {
  border: 0;
  border-top: var(--st-border-width-thin, 1px) solid
    var(--st-component-navItem-dividerColor, var(--st-semantic-border-subtle, rgba(0, 0, 0, 0.08)));
  margin-block: var(--st-component-navItem-dividerGap, 0.375rem);
}

/* ===========================================================================
   NavSection — group header of a rail / drawer. Composes Overline (label),
   Badge (count), Collapsible (disclosure). Token-only scoped.
   =========================================================================== */
.st-navSection {
  inline-size: 100%;
}

.st-navSection__header {
  align-items: baseline;
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: space-between;
  padding-block: var(--st-component-navSection-headerPaddingBlock, 0.375rem);
}

/* The label and its count form one block; the circle Badge aligns to the
   vertical centre of the small-caps text. */
.st-navSection .st-navSection__label {
  align-items: center;
  display: inline-flex;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-navSection .st-navSection__count {
  flex: 0 0 auto;
}

/* Section-action focus: anchored right, does not grow. */
.st-navSection__action {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
}

.st-navSection__body {
  display: block;
}

/* NavSystem wave 3 primitives */
.st-appShell {
  background: var(--st-component-appShell-surface, var(--st-semantic-surface-default));
  color: var(--st-semantic-text-primary);
  min-block-size: 100vh;
}

.st-appShell--workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  position: relative;
}

/* The body owns the horizontal layout: a flex row whose panels collapse when
   they aren't rendered, so empty rail/nav/context/utility columns are never
   reserved (a dashboard providing only `main` gets the full width). The outer
   element only stacks top / body / bottom. */
.st-appShell__body {
  grid-row: 2;
  display: flex;
  flex-flow: row nowrap;
  min-block-size: 0;
  min-inline-size: 0;
  position: relative;
}

.st-appShell[data-utility-side="bottom"] .st-appShell__body {
  flex-wrap: wrap;
}

.st-appShell__topChrome { grid-row: 1; }
.st-appShell__bottomPanel { grid-row: 3; }

.st-appShell__primaryRail {
  order: 10;
  flex: 0 0 auto;
  min-block-size: 0;
  overflow: hidden;
}

.st-appShell__navigationPanel {
  order: 20;
  flex: 0 1 auto;
  inline-size: var(--st-appShell-navigation-width, var(--st-component-appShell-navigationWidth, 20rem));
  min-block-size: 0;
  overflow: hidden;
  position: relative;
}

.st-appShell__main {
  order: 30;
  flex: 1 1 0;
  min-block-size: 0;
  min-inline-size: 0;
  overflow: auto;
}

.st-appShell__contextPanel {
  order: 40;
  flex: 0 1 auto;
  inline-size: var(--st-appShell-context-width, var(--st-component-appShell-contextWidth, 22rem));
  min-block-size: 0;
  overflow: hidden;
  position: relative;
}

.st-appShell__utilityPanel {
  order: 50;
  flex: 0 1 auto;
  inline-size: var(--st-appShell-utility-width, var(--st-component-appShell-utilityWidth, 24rem));
  min-block-size: 0;
  overflow: hidden;
  position: relative;
}

.st-appShell[data-utility-side="left"] .st-appShell__utilityPanel {
  order: 25;
}

.st-appShell[data-utility-mode="reserve"][data-utility-side="bottom"] .st-appShell__utilityPanel {
  flex-basis: 100%;
  inline-size: auto;
  order: 60;
}

.st-appShell[data-utility-mode="overlay"] .st-appShell__utilityPanel,
.st-appShell[data-utility-mode="floating"] .st-appShell__utilityPanel {
  box-shadow: var(--st-component-appShell-utilityShadow, 0 18px 45px rgb(15 23 42 / 0.18));
  max-block-size: 100%;
  position: absolute;
  z-index: var(--st-component-appShell-utility-zIndex, 40);
}

.st-appShell[data-utility-mode="overlay"][data-utility-side="right"] .st-appShell__utilityPanel,
.st-appShell[data-utility-mode="floating"][data-utility-side="right"] .st-appShell__utilityPanel {
  block-size: 100%;
  inline-size: min(100%, var(--st-appShell-utility-width, var(--st-component-appShell-utilityWidth, 24rem)));
  inset-block: 0;
  inset-inline-end: 0;
}

.st-appShell[data-utility-mode="overlay"][data-utility-side="left"] .st-appShell__utilityPanel,
.st-appShell[data-utility-mode="floating"][data-utility-side="left"] .st-appShell__utilityPanel {
  block-size: 100%;
  inline-size: min(100%, var(--st-appShell-utility-width, var(--st-component-appShell-utilityWidth, 24rem)));
  inset-block: 0;
  inset-inline-start: 0;
}

.st-appShell[data-utility-mode="overlay"][data-utility-side="bottom"] .st-appShell__utilityPanel,
.st-appShell[data-utility-mode="floating"][data-utility-side="bottom"] .st-appShell__utilityPanel {
  block-size: var(--st-component-appShell-utilityBottomHeight, min(40%, 20rem));
  inline-size: auto;
  inset-block-end: 0;
  inset-inline: 0;
}

.st-appShell[data-utility-mode="floating"] .st-appShell__utilityPanel {
  border: 1px solid var(--st-component-appShell-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-radius-lg, 0.75rem);
  margin: var(--st-spacing-4, 1rem);
}

/* Disclosure trigger for panelCollapse="accordion". Hidden by default (this
   rule has no `@media` guard, so it also hides the button on desktop where
   accordion mode is not active) — only shown by the max-width:48rem rule
   below, and only when `data-panel-collapse="accordion"`. This keeps desktop
   rendering byte-identical in both modes. */
.st-appShell__panelDisclosure {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: none;
  font: inherit;
  font-weight: 650;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: space-between;
  padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
  text-align: start;
  width: 100%;
}

.st-appShell__panelDisclosure:focus-visible {
  outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline-offset: -2px;
}

.st-appShell__panelDisclosureIcon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--st-motion-duration-fast, 0.15s) ease;
}

.st-appShell__panelDisclosureIcon--expanded {
  transform: rotate(180deg);
}

/* The region stays mounted at all times — it is only ever resized/hidden via
   CSS below, never removed from the DOM, so panel content (maps, live
   widgets…) never remounts when a panel collapses or expands. */
.st-appShell__panelRegion {
  min-block-size: 0;
  min-inline-size: 0;
}

/* Drag-to-resize handle (panelResize). Desktop-only: visible by default
   here, forced to `display:none` under the 48rem breakpoint below — the
   element is only ever rendered to the DOM at all when `panelResize` is
   true, so a `panelResize`-less shell never pays for or shows any of this.
   Sits fully inside its panel's own `overflow:hidden` box (no negative
   inset), flush against the edge shared with the next region in flow. */
.st-appShell__resizeHandle {
  background: transparent;
  block-size: auto;
  cursor: col-resize;
  display: block;
  inset-block: 0;
  inline-size: var(--st-component-appShell-resizeHandle-width, 0.5rem);
  position: absolute;
  touch-action: none;
  z-index: var(--st-component-appShell-resizeHandle-zIndex, 5);
}

.st-appShell__resizeHandle:hover,
.st-appShell__resizeHandle:focus-visible {
  background: var(--st-component-appShell-resizeHandle-activeBackground, var(--st-semantic-border-interactive));
}

.st-appShell__resizeHandle:focus-visible {
  outline: 2px solid var(--st-semantic-border-focus, var(--st-semantic-brand-default));
  outline-offset: -2px;
}

.st-appShell__navigationPanel > .st-appShell__resizeHandle {
  inset-inline-end: 0;
}

.st-appShell__contextPanel > .st-appShell__resizeHandle {
  inset-inline-start: 0;
}

.st-appShell[data-utility-side="left"] .st-appShell__utilityPanel > .st-appShell__resizeHandle {
  inset-inline-end: 0;
}

.st-appShell[data-utility-side="right"] .st-appShell__utilityPanel > .st-appShell__resizeHandle {
  inset-inline-start: 0;
}

@media (max-width: 48rem) {
  .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelDisclosure {
    display: flex;
  }

  .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelRegion {
    max-block-size: min(60vh, 28rem);
    overflow: auto;
  }

  .st-appShell[data-panel-collapse="accordion"] .st-appShell__panelRegion--collapsed {
    block-size: 0;
    max-block-size: 0;
    overflow: hidden;
    padding-block: 0;
    visibility: hidden;
  }

  /* Resize is desktop-only (>48rem) — panels stack/accordion below this
     breakpoint instead, where a drag handle has no meaning. */
  .st-appShell__resizeHandle {
    display: none;
  }
}

.st-navRail {
  align-items: stretch;
  background: var(--st-component-navRail-surface, var(--st-semantic-surface-raised));
  color: var(--st-semantic-text-primary);
  display: grid;
  grid-template-rows: 1fr auto;
  block-size: 100%;
  inline-size: var(--st-component-navRail-width, 4.5rem);
  padding: var(--st-spacing-2, 0.5rem);
}

.st-navRail__items,
.st-navRail__footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-navRail__items {
  min-block-size: 0;
  overflow-y: auto;
}

.st-navRail__item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--st-radius-md, 0.375rem);
  color: var(--st-semantic-text-secondary);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font: inherit;
  gap: var(--st-spacing-1, 0.25rem);
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: var(--st-spacing-2, 0.5rem);
  position: relative;
  text-align: center;
  text-decoration: none;
}

.st-navRail__item:hover,
.st-navRail__item--active {
  background: var(--st-component-navRail-activeBackground, var(--st-semantic-surface-subtle));
  color: var(--st-semantic-text-primary);
}

.st-navRail__item--active {
  border-color: var(--st-component-navRail-activeBorder, var(--st-semantic-border-strong));
}

.st-navRail__item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.st-navRail__label {
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.1;
}

.st-navRail__badge {
  background: var(--st-component-navRail-badgeBackground, var(--st-semantic-surface-inverse));
  border-radius: 999px;
  color: var(--st-semantic-text-inverse);
  font-size: 0.625rem;
  line-height: 1;
  padding: 0.125rem 0.3rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
}

.st-navShell {
  background: var(--st-component-navShell-surface, var(--st-semantic-surface-raised));
  border-inline-end: 1px solid var(--st-component-navShell-border, var(--st-semantic-border-subtle));
  color: var(--st-semantic-text-primary);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-block-size: 0;
}

.st-navShell--drawer {
  border-inline-end: 0;
}

.st-navShell__header {
  align-items: start;
  border-block-end: 1px solid var(--st-component-navShell-border, var(--st-semantic-border-subtle));
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  padding: var(--st-spacing-4, 1rem);
}

.st-navShell__back {
  align-items: center;
  background: transparent;
  border: 1px solid var(--st-semantic-border-subtle);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  block-size: 2rem;
  inline-size: 2rem;
  justify-content: center;
}

.st-navShell__heading {
  display: grid;
  gap: var(--st-spacing-1, 0.25rem);
}

.st-navShell__title,
.st-navShell__subtitle {
  margin: 0;
}

.st-navShell__title {
  font-weight: 700;
}

.st-navShell__subtitle {
  color: var(--st-semantic-text-secondary);
  font-size: 0.875rem;
}

.st-navShell__search {
  border-block-end: 1px solid var(--st-component-navShell-border, var(--st-semantic-border-subtle));
  padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
}

.st-navShell__body {
  min-block-size: 0;
  overflow: auto;
  padding: var(--st-spacing-3, 0.75rem);
}

.st-navShell__footer {
  border-block-start: 1px solid var(--st-component-navShell-border, var(--st-semantic-border-subtle));
  padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
}

.st-contextPanel,
.st-utilityPanel {
  background: var(--st-component-panel-surface, var(--st-semantic-surface-raised));
  color: var(--st-semantic-text-primary);
  display: grid;
  min-block-size: 0;
}

.st-contextPanel {
  border-inline-start: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.st-utilityPanel {
  border-block-start: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
  grid-template-rows: auto minmax(0, 1fr);
}

.st-contextPanel--left {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
}

.st-contextPanel__header,
.st-utilityPanel__header {
  align-items: center;
  border-block-end: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
  display: flex;
  gap: var(--st-spacing-3, 0.75rem);
  justify-content: space-between;
  padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
}

.st-contextPanel__title,
.st-utilityPanel__title {
  font-weight: 700;
  margin: 0;
}

.st-contextPanel__body,
.st-utilityPanel__body {
  min-block-size: 0;
  overflow: auto;
  padding: var(--st-spacing-4, 1rem);
}

.st-contextPanel__footer {
  border-block-start: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
  padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-4, 1rem);
}

.st-drawer--bottom {
  align-items: end;
  justify-content: stretch;
}

.st-drawer--bottom .st-drawer__panel {
  block-size: min(70vh, var(--st-component-drawer-bottomHeight, 42rem));
  inline-size: 100%;
  max-inline-size: none;
}

@media (max-width: 900px) {
  .st-appShell__body {
    flex-flow: column nowrap;
  }

  .st-appShell__primaryRail,
  .st-appShell__navigationPanel,
  .st-appShell__contextPanel,
  .st-appShell__utilityPanel {
    inline-size: auto;
  }

  .st-navRail {
    block-size: auto;
    inline-size: 100%;
  }

  .st-navRail__items,
  .st-navRail__footer {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .st-navRail__item {
    inline-size: auto;
    min-inline-size: 4rem;
  }

  .st-navShell,
  .st-contextPanel {
    border-inline-end: 0;
    border-inline-start: 0;
    border-block-end: 1px solid var(--st-component-panel-border, var(--st-semantic-border-subtle));
  }
}

/* ── WP20 : Heatmap sequential ramp + DashboardGrid ── */
.st-heatmapChart {
  --st-heatmapChart-ramp-base: var(--st-semantic-data-category1);
  --st-heatmapChart-ramp-1: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 86%, var(--st-heatmapChart-ramp-base) 14%);
  --st-heatmapChart-ramp-2: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 74%, var(--st-heatmapChart-ramp-base) 26%);
  --st-heatmapChart-ramp-3: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 62%, var(--st-heatmapChart-ramp-base) 38%);
  --st-heatmapChart-ramp-4: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 50%, var(--st-heatmapChart-ramp-base) 50%);
  --st-heatmapChart-ramp-5: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 38%, var(--st-heatmapChart-ramp-base) 62%);
  --st-heatmapChart-ramp-6: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 26%, var(--st-heatmapChart-ramp-base) 74%);
  --st-heatmapChart-ramp-7: color-mix(in srgb, var(--st-semantic-surface-default, Canvas) 14%, var(--st-heatmapChart-ramp-base) 86%);
  --st-heatmapChart-ramp-8: var(--st-heatmapChart-ramp-base);
}

.st-heatmapChart--sequential .st-heatmapChart__cell--category1,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category1 { fill: var(--st-heatmapChart-ramp-1); background: var(--st-heatmapChart-ramp-1); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category2,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category2 { fill: var(--st-heatmapChart-ramp-2); background: var(--st-heatmapChart-ramp-2); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category3,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category3 { fill: var(--st-heatmapChart-ramp-3); background: var(--st-heatmapChart-ramp-3); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category4,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category4 { fill: var(--st-heatmapChart-ramp-4); background: var(--st-heatmapChart-ramp-4); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category5,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category5 { fill: var(--st-heatmapChart-ramp-5); background: var(--st-heatmapChart-ramp-5); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category6,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category6 { fill: var(--st-heatmapChart-ramp-6); background: var(--st-heatmapChart-ramp-6); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category7,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category7 { fill: var(--st-heatmapChart-ramp-7); background: var(--st-heatmapChart-ramp-7); }
.st-heatmapChart--sequential .st-heatmapChart__cell--category8,
.st-heatmapChart--sequential .st-heatmapChart__legendSwatch--category8 { fill: var(--st-heatmapChart-ramp-8); background: var(--st-heatmapChart-ramp-8); }

.st-dashboardGrid { --st-component-dashboardGrid-tile-background: var(--st-semantic-surface-default); --st-component-dashboardGrid-tile-border-color: var(--st-semantic-border-subtle); --st-component-dashboardGrid-tile-border-width: var(--st-component-card-anatomy-shape-borderWidth); --st-component-dashboardGrid-tile-radius: var(--st-radius-lg); --st-component-dashboardGrid-tile-shadow: var(--st-shadow-sm); --st-component-dashboardGrid-title-fontSize: var(--st-component-field-labelTypography-size); --st-component-dashboardGrid-title-fontWeight: var(--st-component-field-labelTypography-weight); --st-component-dashboardGrid-title-letterSpacing: var(--st-component-field-labelTypography-letterSpacing); --st-component-dashboardGrid-value-fontSize: var(--st-component-button-anatomy-density-lg-fontSize); --st-component-dashboardGrid-value-fontWeight: var(--st-component-button-anatomy-typography-weight); --st-component-dashboardGrid-value-lineHeight: var(--st-component-field-labelTypography-lineHeight); --st-component-dashboardGrid-description-fontSize: var(--st-component-field-labelTypography-size); --st-component-dashboardGrid-control-fontSize: var(--st-component-button-anatomy-density-sm-fontSize); --st-component-dashboardGrid-control-fontWeight: var(--st-component-button-anatomy-typography-weight); --st-component-dashboardGrid-control-size: var(--st-component-button-anatomy-density-sm-controlHeight); --st-component-dashboardGrid-control-paddingInline: var(--st-spacing-2); --st-component-dashboardGrid-control-focusWidth: var(--st-component-card-anatomy-shape-borderWidth); display: grid; gap: var(--st-dashboardGrid-gap); grid-auto-rows: var(--st-dashboardGrid-row-height); grid-template-columns: repeat(var(--st-dashboardGrid-columns), minmax(0, 1fr)); width: 100%; }
.st-dashboardGrid__tile { background: var(--st-component-dashboardGrid-tile-background); border: var(--st-component-dashboardGrid-tile-border-width) solid var(--st-component-dashboardGrid-tile-border-color); border-radius: var(--st-component-dashboardGrid-tile-radius); box-shadow: var(--st-component-dashboardGrid-tile-shadow); color: var(--st-semantic-text-primary); min-width: 0; overflow: hidden; padding: var(--st-spacing-4); position: relative; }
.st-dashboardGrid--editable .st-dashboardGrid__tile { outline: var(--st-component-dashboardGrid-tile-border-width) dashed var(--st-semantic-border-strong); outline-offset: calc(-1 * var(--st-spacing-2)); }
.st-dashboardGrid__content { display: grid; gap: var(--st-spacing-2); }
.st-dashboardGrid__title { color: var(--st-semantic-text-secondary); font-size: var(--st-component-dashboardGrid-title-fontSize); font-weight: var(--st-component-dashboardGrid-title-fontWeight); letter-spacing: var(--st-component-dashboardGrid-title-letterSpacing); margin: 0; text-transform: uppercase; }
.st-dashboardGrid__value { color: var(--st-semantic-text-primary); font-size: var(--st-component-dashboardGrid-value-fontSize); font-weight: var(--st-component-dashboardGrid-value-fontWeight); line-height: var(--st-component-dashboardGrid-value-lineHeight); margin: 0; }
.st-dashboardGrid__description { color: var(--st-semantic-text-secondary); font-size: var(--st-component-dashboardGrid-description-fontSize); margin: 0; }
.st-dashboardGrid__controls { align-items: center; bottom: var(--st-spacing-2); display: flex; flex-wrap: wrap; gap: var(--st-spacing-1); position: absolute; right: var(--st-spacing-2); }
.st-dashboardGrid__controls button { align-items: center; background: var(--st-semantic-surface-raised); border: var(--st-component-dashboardGrid-tile-border-width) solid var(--st-semantic-border-subtle); border-radius: var(--st-radius-sm); color: var(--st-semantic-text-primary); cursor: pointer; display: inline-flex; font: inherit; font-size: var(--st-component-dashboardGrid-control-fontSize); font-weight: var(--st-component-dashboardGrid-control-fontWeight); justify-content: center; min-height: var(--st-component-dashboardGrid-control-size); min-width: var(--st-component-dashboardGrid-control-size); padding: 0 var(--st-component-dashboardGrid-control-paddingInline); }
.st-dashboardGrid__controls button:focus-visible { outline: var(--st-component-dashboardGrid-control-focusWidth) solid var(--st-semantic-border-interactive); outline-offset: var(--st-component-control-anatomy-focus-offset); }

/* --- TimeRangePicker ------------------------------------------------------ */
.st-timeRangePicker {
  display: inline-flex;
  flex-direction: column;
  gap: var(--st-component-field-gap, 0.5rem);
  position: relative;
}

.st-timeRangePicker__label {
  color: var(--st-component-field-labelText, var(--st-semantic-text-primary));
  font-size: var(--st-component-field-labelTypography-size, 0.875rem);
  font-weight: var(--st-component-field-labelTypography-weight, 600);
}

.st-timeRangePicker__trigger {
  align-items: center;
  background: var(--st-component-control-background, var(--st-semantic-surface-default));
  border: var(--st-component-control-anatomy-shape-borderWidth, 1px)
    var(--st-component-control-anatomy-shape-borderStyle, solid)
    var(--st-component-control-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-control-anatomy-shape-radius, 0.375rem);
  color: var(--st-component-control-text, var(--st-semantic-text-primary));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: var(--st-spacing-2, 0.5rem);
  transition:
    border-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
    box-shadow var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-timeRangePicker--sm .st-timeRangePicker__trigger {
  min-height: var(--st-component-control-smHeight, 2rem);
  padding: 0 0.625rem;
  font-size: 0.8125rem;
}

.st-timeRangePicker--md .st-timeRangePicker__trigger {
  min-height: var(--st-component-control-mdHeight, 2.5rem);
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

.st-timeRangePicker--lg .st-timeRangePicker__trigger {
  min-height: var(--st-component-control-lgHeight, 3rem);
  padding: 0 0.875rem;
  font-size: 1rem;
}

.st-timeRangePicker__trigger:hover:not(:disabled) {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
  border-color: var(--st-component-control-hoverBorder, var(--st-semantic-border-strong));
}

.st-timeRangePicker__trigger:focus-visible {
  border-color: var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
  outline: var(--st-component-control-anatomy-focus-outline, none);
  outline-offset: var(--st-component-control-anatomy-focus-offset, 0);
  box-shadow: var(--st-component-control-anatomy-focus-boxShadow,
    0 0 0 2px var(--st-component-control-focusRing, var(--st-semantic-border-interactive)));
}

.st-timeRangePicker__trigger:disabled {
  color: var(--st-component-control-disabledText, var(--st-semantic-text-muted));
  cursor: not-allowed;
  opacity: 0.65;
}

.st-timeRangePicker__triggerLabel {
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Positioned dialog panel. DEVIATION from the Svelte reference: Vue's
   MenuPopover.ts is a self-contained trigger+dialog widget with no external
   `trigger` prop and no JS-computed viewport position (see TimeRangePicker.ts's
   doc comment) — so this panel anchors itself via CSS relative to the
   `.st-timeRangePicker` root (`position: relative` above) instead of the
   getBoundingClientRect-driven inline style the Svelte MenuPopover computes. */
.st-timeRangePicker__popover {
  background: var(--st-component-popover-background, var(--st-semantic-surface-raised));
  border: 1px solid var(--st-component-popover-border, var(--st-semantic-border-subtle));
  border-radius: var(--st-component-popover-radius, 0.5rem);
  box-shadow: var(--st-component-popover-shadow, 0 18px 45px rgb(15 23 42 / 0.18));
  color: var(--st-component-popover-text, var(--st-semantic-text-primary));
  margin-top: var(--st-spacing-1, 0.25rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  position: absolute;
  z-index: var(--st-component-popover-zIndex, 80);
}

.st-timeRangePicker__popover--bottom-start {
  left: 0;
  top: 100%;
}

.st-timeRangePicker__popover--bottom-end {
  right: 0;
  top: 100%;
}

.st-timeRangePicker__popover--top-start {
  bottom: 100%;
  left: 0;
  margin-bottom: var(--st-spacing-1, 0.25rem);
  margin-top: 0;
}

.st-timeRangePicker__popover--top-end {
  bottom: 100%;
  right: 0;
  margin-bottom: var(--st-spacing-1, 0.25rem);
  margin-top: 0;
}

.st-timeRangePicker__popover--alignEnd {
  left: auto;
  right: 0;
}

.st-timeRangePicker__popover--alignCenter {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Panel content — a single stacked column under the tab switcher. NO left
   rail (proscribed DS anti-pattern): tabs on top, one column beneath. */
.st-timeRangePicker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-3, 0.75rem);
  min-width: 20rem;
  padding: var(--st-spacing-3, 0.75rem);
}

.st-timeRangePicker__panel:focus {
  outline: none;
}

.st-timeRangePicker__custom {
  display: flex;
  flex-direction: column;
  gap: var(--st-spacing-3, 0.75rem);
}

.st-timeRangePicker__calendars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--st-spacing-3, 0.75rem);
}

.st-timeRangePicker__calendars .st-calendar {
  flex: 1 1 16rem;
  min-width: 16rem;
}

.st-timeRangePicker__bounds {
  display: grid;
  gap: var(--st-spacing-3, 0.75rem);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.st-timeRangePicker__bound {
  display: grid;
  gap: var(--st-spacing-2, 0.5rem);
}

.st-timeRangePicker__error {
  color: var(--st-component-field-errorText, var(--st-semantic-feedback-error));
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
}

.st-timeRangePicker__actions {
  display: flex;
  gap: var(--st-spacing-2, 0.5rem);
  justify-content: flex-end;
}

/* PanelStack / PanelSection — stacks several contents inside ONE panel
   (typically an AppShell panel slot) so a docked chat can share a pane with
   other content. The invariant is the whole point: exactly one element in
   the stack has `overflow: auto` at any moment, and the stack itself NEVER
   scrolls — see the single `overflow: auto` declaration below, on
   `.st-panelSection__body--scrollOwner`. */
.st-panelStack {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  overflow: hidden;
}

/* Separator between adjacent PanelSection instances. */
.st-panelStack > .st-panelSection + .st-panelSection {
  border-top: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
}

.st-panelSection {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-block-size: 0;
}

/* The scroll-owning section grows to fill the stack; every other section
   stays content-sized. */
.st-panelSection--scrollOwner {
  flex: 1 1 0;
  min-block-size: 0;
  overflow: hidden;
}

.st-panelSection__header {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.st-panelSection__heading {
  flex: 1 1 auto;
  margin: 0;
  min-inline-size: 0;
}

.st-panelSection__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--st-component-accordion-text, inherit);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--st-component-accordion-fontSize, inherit);
  font-weight: var(--st-component-accordion-fontWeight, 600);
  gap: 0.75rem;
  inline-size: 100%;
  justify-content: space-between;
  line-height: var(--st-component-accordion-lineHeight, normal);
  padding: var(--st-component-accordion-paddingBlock, 0.875rem)
    var(--st-component-accordion-paddingInline, 0.5rem);
  text-align: start;
  transition: background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-panelSection__trigger:hover {
  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
}

.st-panelSection__trigger:focus-visible {
  outline: 2px solid var(--st-semantic-border-focus, var(--st-semantic-brand-default));
  outline-offset: -2px;
}

.st-panelSection__title {
  flex: 1 1 auto;
}

/* Primary heading (split-primary): same box/typography as a trigger's title
   so switching shapes doesn't reflow the header row, but it is a plain
   <span> inside the <h3> — never a <button> — because it cannot collapse
   and a disclosure affordance would lie. */
.st-panelSection__title--primary {
  color: var(--st-semantic-text-primary);
  display: block;
  font-weight: 600;
  padding: var(--st-component-accordion-paddingBlock, 0.875rem)
    var(--st-component-accordion-paddingInline, 0.5rem);
}

.st-panelSection__icon {
  align-items: center;
  block-size: 1.25rem;
  color: var(--st-semantic-text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 1.25rem;
  justify-content: center;
  transition: transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
}

.st-panelSection__icon--expanded {
  transform: rotate(180deg);
}

.st-panelSection__actions {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  padding-inline-end: 0.5rem;
}

.st-panelSection__body {
  color: var(--st-semantic-text-secondary);
  flex: 0 0 auto;
  line-height: 1.5;
  overflow: hidden;
  padding: 0 0.5rem 0.875rem;
}

/* THE single scroll owner across the whole stack: at any moment exactly one
   PanelSection body carries this class (see PanelStack.ts's context
   contract, which is the only place deciding who gets it) — every other
   body stays overflow: hidden, content-sized or collapsed to zero.

   min-block-size is the floor split-primary's auto-collapse protects (see
   PanelStack.ts): secondaries collapse before the primary is ever squeezed
   below this. PanelStack's `primaryMinHeight` prop is the single source of
   truth for this value — it is emitted as this same custom property, inline,
   on the stack root, so this rule and the JS auto-collapse threshold can
   never drift apart. The literal 160px fallback only applies when that
   inline style hasn't landed (matches PanelStack.ts's
   PRIMARY_MIN_BLOCK_SIZE_PX default). Harmless for sticky-item too (there is
   only ever one scroll owner in that shape as well). */
.st-panelSection__body--scrollOwner {
  flex: 1 1 0;
  min-block-size: var(--st-component-panelStack-primaryMinBlockSize, 160px);
  overflow: auto;
}

/* Collapsed (sticky-item, not the expanded item): header-only. The region
   stays mounted — never removed — only sized to zero and hidden. */
.st-panelSection__body--collapsed {
  block-size: 0;
  max-block-size: 0;
  overflow: hidden;
  padding-block: 0;
  visibility: hidden;
}