@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap") layer(spotlight-tokens);@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap") layer(spotlight-tokens);@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap") layer(spotlight-tokens);@layer spotlight-ui.components {
  ._spotlight_Icon_hxlxz_2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  }

  ._spotlight_Icon-wrapper_hxlxz_8 {
    display: inline-flex;
    height: var(--size-icon-md);
    width: var(--size-icon-md);
    justify-content: center;
    align-items: center;
    &._spotlight_Icon-sm_hxlxz_14 {
      height: var(--size-icon-sm);
      width: var(--size-icon-sm);
    }
    &._spotlight_Icon-xs_hxlxz_18 {
      height: var(--size-icon-xs);
      width: var(--size-icon-xs);
    }
    &._spotlight_Icon-md_hxlxz_22 {
      height: var(--size-icon-md);
      width: var(--size-icon-md);
    }

    &._spotlight_Icon-lg_hxlxz_27 {
      height: var(--size-icon-lg);
      width: var(--size-icon-lg);
    }

    &._spotlight_Icon-xl_hxlxz_32 {
      height: var(--size-icon-xl);
      width: var(--size-icon-xl);
    }

    &._spotlight_Icon-2xl_hxlxz_37 {
      height: var(--size-icon-2xl);
      width: var(--size-icon-2xl);
    }

    &._spotlight_Icon-3xl_hxlxz_42 {
      height: var(--size-icon-3xl);
      width: var(--size-icon-3xl);
    }
  }

  ._spotlight_Icon-xs_hxlxz_18 {
    font-size: var(--size-icon-xs);
  }

  ._spotlight_Icon-sm_hxlxz_14 {
    font-size: var(--size-icon-sm);
  }

  ._spotlight_Icon-md_hxlxz_22 {
    font-size: var(--size-icon-md);
  }

  ._spotlight_Icon-lg_hxlxz_27 {
    font-size: var(--size-icon-lg);
  }

  ._spotlight_Icon-xl_hxlxz_32 {
    font-size: var(--size-icon-xl);
  }

  ._spotlight_Icon-2xl_hxlxz_37 {
    font-size: var(--size-icon-2xl);
  }

  ._spotlight_Icon-3xl_hxlxz_42 {
    font-size: var(--size-icon-3xl);
  }
}
@layer spotlight-ui.components {
  ._spotlight_List_lcxwf_2 {
    display: flex;
    padding: var(--list-space-edge-to-content-vertical-primary)
      var(--list-space-edge-to-content-horizontal-primary);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }
}
@layer spotlight-ui.components {
  ._spotlight_ListItem_gou9d_2,
  ._spotlight_ListItem-card_gou9d_3 {
    display: flex;
    flex-direction: column;
  }

  ._spotlight_ListItem-card_gou9d_3 {
    padding: var(--list-item-card-space-edge-to-element-vertical-primary)
      var(--list-item-card-space-edge-to-element-horizontal-primary);
    align-items: flex-start;
    border-radius: var(--border-radius-sm);
    border: var(--list-item-border-weight-primary) solid
      var(--color-border-primary);
    background: var(--color-background-interactive-tertiary);
  }

  ._spotlight_ListItem-container_gou9d_18 {
    display: flex;
    padding: var(--list-item-space-edge-to-element-vertical-primary)
      var(--list-item-space-edge-to-element-horizontal-primary);
    align-items: center;
    width: 100%;
  }

  ._spotlight_ListItem-container-sm_gou9d_26 {
    gap: var(--space-md);
  }

  ._spotlight_ListItem-container-md_gou9d_30 {
    gap: var(--space-lg);
  }

  ._spotlight_ListItem-container-lg_gou9d_34 {
    gap: var(--space-xl);
  }

  ._spotlight_ListItem-start-adornment_gou9d_38 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    align-self: stretch;
  }

  ._spotlight_ListItem-text-content-container_gou9d_47 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
  }

  ._spotlight_ListItem-text-content-container-sm_gou9d_56 {
    gap: var(--space-md);
  }

  ._spotlight_ListItem-text-content-container-md_gou9d_60 {
    gap: var(--space-lg);
  }

  ._spotlight_ListItem-text-content-container-lg_gou9d_64 {
    gap: var(--space-xl);
  }

  @media (max-width: 600px) {
    ._spotlight_ListItem-text-content-container_gou9d_47,
    ._spotlight_ListItem-text-content-container-sm_gou9d_56,
    ._spotlight_ListItem-text-content-container-md_gou9d_60,
    ._spotlight_ListItem-text-content-container-lg_gou9d_64 {
      flex-direction: column;
      align-items: stretch;
    }
  }

  ._spotlight_ListItem-label-group_gou9d_78 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
  }

  ._spotlight_ListItem-label-text_gou9d_85 {
    align-self: stretch;
    color: var(--list-item-color-text-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-sm);
    font-style: normal;
    font-weight: var(--text-weight-label-sm-strong);
    line-height: var(--text-line-height-label-sm);
    white-space: normal;
    word-break: break-word;
  }

  ._spotlight_ListItem-label-text-sm_gou9d_97 {
    font-size: var(--text-size-label-sm);
  }
  ._spotlight_ListItem-label-text-md_gou9d_100 {
    font-size: var(--text-size-label-md);
  }
  ._spotlight_ListItem-label-text-lg_gou9d_103 {
    font-size: var(--text-size-label-lg);
  }

  ._spotlight_ListItem-description-text_gou9d_107 {
    align-self: stretch;
    color: var(--list-item-color-text-secondary);
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-sm);
    font-style: normal;
    font-weight: var(--text-weight-label-sm);
    line-height: var(--text-line-height-label-sm);
    white-space: normal;
    word-break: break-word;
  }

  ._spotlight_ListItem-description-text-sm_gou9d_119 {
    font-size: var(--text-size-body-sm);
  }
  ._spotlight_ListItem-description-text-md_gou9d_122 {
    font-size: var(--text-size-body-md);
  }
  ._spotlight_ListItem-description-text-lg_gou9d_125 {
    font-size: var(--text-size-body-lg);
  }

  ._spotlight_ListItem-content_gou9d_129 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: var(--space-sm);
  }

  ._spotlight_ListItem-end-adornment_gou9d_138 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: var(--space-sm);
  }

  ._spotlight_ListItem-border_gou9d_147 {
    border: none;
    border-bottom: var(--list-item-border-weight-primary) solid
      var(--color-border-primary);
    margin: 0;
    margin-top: var(--list-item-space-edge-to-element-vertical-primary);
    height: 0;
    background: none;
  }
}
@layer spotlight-ui.components {
  ._spotlight_MultiSelectHeader_title_1r11a_2 {
    color: var(--color-text-secondary);
    display: flex;
    padding: var(--space-xl) var(--space-lg) var(--space-md) var(--space-lg);
    align-items: center;
    border-top: 1px solid var(--color-border-primary);
  }

  ._spotlight_MultiSelectHeader_firstItem_1r11a_10 {
    padding: var(--space-md) var(--space-lg);
    border-top: none;
  }
}
@layer spotlight-ui.components {
  ._spotlight_MultiSelect_section_18osz_2 {
    gap: var(--field-space-element-to-element-vertical-secondary);
  }
}
@layer spotlight-ui.components {
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-secondary);

    .row {
      flex-direction: row;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_address_1ojw5_2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);

    ._spotlight_address_group_1ojw5_7 {
      display: flex;
      align-items: flex-start;
      align-content: flex-start;
      gap: var(--space-xl, 16px);
      align-self: center;
      flex-wrap: wrap;
      width: 100%;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_Modal-Overlay_1bhav_2 {
    position: fixed;
    inset: 0;
    background: var(--container-color-background-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
  }

  ._spotlight_Modal_1bhav_2 {
    display: flex;
    flex-direction: column;
    gap: var(--container-space-element-to-element-vertical-secondary);
    border-radius: var(--border-radius-sm);
    background: var(--container-color-background-primary);
    border: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
  }

  ._spotlight_Modal-header_1bhav_22 {
    display: flex;
    border-bottom: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-secondary);
    align-items: center;
    gap: var(--space-sm);
    align-self: stretch;
  }

  ._spotlight_Modal-title_1bhav_33 {
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-primary);
    flex-grow: 1;
  }

  ._spotlight_Modal-close_1bhav_40 {
    background: none;
    border: none;
    cursor: pointer;
  }

  ._spotlight_Modal-Dialog_1bhav_46 {
    padding: var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 60%;
    outline: none;
    outline-offset: none;
    @media (max-width: 768px) {
      width: 85%;
    }
  }

  ._spotlight_Modal-content_1bhav_59 {
    display: flex;
    max-height: 25rem;
    overflow-y: auto;
    flex-direction: column;
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-secondary);
    padding-bottom: var(--container-space-edge-to-content-vertical-secondary);
  }
}
@layer spotlight-ui.components {
  .react-aria-Popover {
    border-radius: var(--container-border-radius-primary);
    border: var(--border-weight-default) solid
      var(--container-color-border-primary);
    background: var(--container-color-background-primary);
    outline: none;
    max-width: 250px;
    padding: var(--container-popover-space-edge-to-content-vertical-primary)
      var(--container-popover-space-edge-to-content-horizontal-primary);
    transition:
      transform 200ms,
      opacity 200ms;

    .react-aria-OverlayArrow svg {
      display: block;
      fill: var(--color-background-primary);
      stroke: var(--color-border-primary);
      stroke-width: 1px;
    }

    &[data-entering],
    &[data-exiting] {
      transform: var(--origin);
      opacity: 0;
    }

    &[data-placement='top'] {
      --origin: translateY(8px);

      &:has(.react-aria-OverlayArrow) {
        margin-bottom: 12px;
      }
    }

    &[data-placement='bottom'] {
      --origin: translateY(-8px);

      &:has(.react-aria-OverlayArrow) {
        margin-top: 12px;
      }

      .react-aria-OverlayArrow svg {
        transform: rotate(180deg);
      }
    }

    &[data-placement='right'] {
      --origin: translateX(-8px);

      &:has(.react-aria-OverlayArrow) {
        margin-left: 12px;
      }

      .react-aria-OverlayArrow svg {
        transform: rotate(90deg);
      }
    }

    &[data-placement='left'] {
      --origin: translateX(8px);

      &:has(.react-aria-OverlayArrow) {
        margin-right: 12px;
      }

      .react-aria-OverlayArrow svg {
        transform: rotate(-90deg);
      }
    }

    .react-aria-Dialog {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-sm);
      align-self: stretch;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_autocomplete_h3orm_2 {
    position: relative;

    ._spotlight_autocomplete_group_h3orm_5 {
      display: flex;
      flex-direction: column;
      gap: var(--field-element-to-element-primary);

      ._spotlight_autocomplete_label_h3orm_10 {
        color: var(--color-text-secondary);
        font-family: var(--text-font-san-serif);
        font-size: var(--text-size-label-sm);
        font-style: normal;
        font-weight: var(--text-weight-label-sm);
        line-height: var(--text-line-height-label-sm);
      }

      ._spotlight_autocomplete_input_h3orm_19 {
        background: var(--input-color-background-primary);
        border: var(--border-weight-default, 1px) solid
          var(--input-color-border-primary);
        border-radius: var(--input-border-radius-primary);
        display: flex;
        height: 24px;
        padding: var(--input-space-edge-to-element-vertical-primary)
          var(--input-space-edge-to-element-horizontal-primary);
        align-items: center;
        align-self: stretch;
        gap: var(--input-space-element-to-element-horizontal-primary);

        &:focus,
        &:focus-within {
          outline: 0;
          outline-offset: 0;
          border-color: var(--input-color-border-primary);
        }

        &:focus-visible {
          border-color: var(--input-border-color-selected);
          outline: var(--border-weight-heaviest) solid
            var(--input-border-color-selected);
          outline-offset: calc(-1 * var(--border-weight-heaviest));
        }
      }
    }

    ._spotlight_autocomplete_popover_h3orm_48 {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: white;
      z-index: 100;

      margin-top: 6px;

      ._spotlight_autocomplete_list_h3orm_60 {
        list-style: none;
        padding: 16px;

        ._spotlight_autocomplete_item_h3orm_64 {
          margin: 0;
          padding: 0;

          button {
            background: inherit;
            border: none;
            cursor: pointer;
            text-align: left;
            width: 100%;
          }
        }
      }
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_FieldLabel_1tk1z_2 {
    color: var(--field-label-color-text-primary);
    display: inline-flex;
    gap: var(--field-label-space-element-to-element-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_CheckboxGroup_uih4e_2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_TextField_1rvsz_2 {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--field-space-element-to-element-vertical-primary);
    flex: 1;

    &[data-readonly]:hover ._spotlight_TextField-Group_1rvsz_10,
    &[data-readonly]:hover ._spotlight_TextField-Input_1rvsz_11 {
      cursor: default;
    }

    &[data-readonly] {
      ._spotlight_TextField-Group_1rvsz_10 {
        border: var(--input-border-weight-primary) solid
          var(--input-color-border-read-only-primary);
      }
      ._spotlight_TextField-Group_1rvsz_10,
      ._spotlight_TextField-Input_1rvsz_11 {
        cursor: default;
        color: var(--input-color-text-primary);
        background: var(--input-color-background-read-only-primary);
      }
    }

    ._spotlight_TextField-Group_1rvsz_10 {
      display: flex;
      align-items: center;
      width: auto;
      gap: var(--input-space-element-to-element-horizontal-primary);
      border-radius: var(--input-border-radius-primary);
      border: var(--input-border-weight-primary) solid
        var(--input-color-border-primary);
      background: var(--input-color-background-primary);
      overflow: hidden;
      box-sizing: content-box;
      color: var(--color-content-interactive-primary);
      width: calc(
        100% -
          (var(--input-space-element-to-element-horizontal-primary) + 1.313rem)
      ); /*remove the extra width of the endornment*/

      &[data-focus-visible] {
        border-color: var(--input-border-color-selected);
        outline: var(--border-weight-heaviest) solid
          var(--input-border-color-selected);
        outline-offset: calc(-1 * var(--border-weight-heaviest));
      }
      i {
        color: var(--color-content-interactive-primary);
      }

      button {
        background: none;
        border: none;
      }
      &._sm_1rvsz_59 {
        padding: var(--input-space-edge-to-element-vertical-secondary)
          var(--input-space-edge-to-element-horizontal-quaternary);
      }
      &._md_1rvsz_63 {
        padding: var(--input-space-edge-to-element-vertical-primary)
          var(--input-space-edge-to-element-horizontal-primary);
      }
    }

    ._spotlight_TextField-Input_1rvsz_11 {
      display: flex;
      background: inherit;
      color: var(--color-text-interactive-primary);
      border: none;
      height: var(--input-size-height-primary); /* Input height (24px) */
      width: 100%;

      &[data-focused] {
        outline: 0;
        outline-offset: 0;
      }
    }
  }

  ._spotlight_TextField-full-width_1rvsz_84 {
    width: 100%;
    flex: 1;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Icon-Button_uhj8y_2 {
    align-items: center;
    border-style: solid;
    border-width: var(--button-border-weight-primary);
    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  ._spotlight_Icon-Button-sm_uhj8y_11 {
    padding: var(--button-icon-space-edge-to-element-horizontal-primary)
      var(--button-icon-space-edge-to-element-vertical-primary);
    border-radius: var(--button-border-radius-secondary);
  }
  ._spotlight_Icon-Button-md_uhj8y_16 {
    padding: var(--button-icon-space-edge-to-element-horizontal-secondary)
      var(--button-icon-space-edge-to-element-vertical-secondary);
    border-radius: var(--button-border-radius-secondary);
  }
  ._spotlight_Icon-Button-lg_uhj8y_21 {
    padding: var(--button-icon-space-edge-to-element-horizontal-tertiary)
      var(--button-icon-space-edge-to-element-vertical-tertiary);
    border-radius: var(--button-border-radius-primary);
  }

  ._spotlight_Icon-Button-solid_uhj8y_27 {
    background: var(--button-color-background-primary);
    border-color: var(--button-color-background-primary);
    color: var(--button-color-content-primary);
    & svg {
      color: var(--button-color-content-primary);
    }
    &._critical_uhj8y_34 {
      background: var(--button-color-background-destructive-primary);
      border-color: var(--button-color-background-destructive-primary);
      & svg {
        color: var(--button-color-content-destructive-primary);
      }
    }
  }

  ._spotlight_Icon-Button-ghost_uhj8y_43 {
    background: var(--button-color-background-secondary);
    border-color: var(--button-color-background-secondary);
    color: var(--button-color-content-secondary);
    & svg {
      color: var(--button-color-content-secondary);
    }
    &._critical_uhj8y_34 {
      background: var(--button-color-background-destructive-secondary);
      border-color: var(--button-color-background-destructive-secondary);
      color: var(--button-color-text-destructive-secondary);
      & svg {
        color: var(--button-color-text-destructive-secondary);
      }
    }
  }

  ._spotlight_Icon-Button-outlined_uhj8y_60 {
    background: var(--button-color-background-secondary);
    border-color: var(--button-color-border-primary);
    color: var(--button-color-content-secondary);

    & svg {
      color: var(--button-color-content-secondary);
    }
    &._critical_uhj8y_34 {
      border-color: var(--button-color-border-destructive-primary);
      color: var(--button-color-content-destructive-secondary);
      background: var(--button-color-background-destructive-secondary);

      & svg {
        color: var(--button-color-content-destructive-secondary);
      }
    }
  }
}
@layer spotlight-ui.components {
  ._footnote_1y8m5_2 {
    color: var(--field-label-color-text-primary);
  }
}
@layer spotlight-ui.components {
  ._trigger_yash5_2 {
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xs);
    background: var(--field-tooltip-control-color-background-primary);
    padding: var(--space-xxs)
      var(--control-space-edge-to-element-horizontal-primary);
    color: var(--field-tooltip-control-color-content-primary);
    line-height: 100%;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Tooltip_1eco0_2 {
    background: var(--field-tooltip-color-background-primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(
      --tooltip-elevation-shadow
    ); /* Elevation-02 equivalent for floating tooltip */
    color: var(--field-tooltip-color-text-primary);
    display: flex;
    outline: none;
    padding: var(--popover-space-edge-to-content-vertical-secondary)
      var(--popover-space-edge-to-content-horizontal-secondary);
    width: auto;
    min-width: 80px;
    max-width: 400px;
    /* fixes FF gap */
    transform: translate3d(0, 0, 0);
    transform: translateX(
      var(--tooltip-transform-offset-horizontal)
    ); /* Horizontal positioning offset (-16px) */
    transition: opacity var(--tooltip-transition-duration-primary);

    &[data-entering],
    &[data-exiting] {
      opacity: 0;
    }

    &[data-placement='bottom'] {
      margin-top: var(--tooltip-space-edge-to-trigger-md);
    }

    &[data-placement='bottom'] ._arrow_1eco0_32 {
      transform: rotate(180deg);
    }

    &[data-placement='bottom'] ._spotlight_Tooltip-overlay_1eco0_36 {
      margin-left: var(--tooltip-space-edge-to-trigger-lg);
    }

    &[data-placement='top'] {
      margin-bottom: var(--tooltip-space-edge-to-trigger-md);
    }

    &[data-placement='top'] ._spotlight_Tooltip-overlay_1eco0_36 {
      margin-left: var(--tooltip-space-edge-to-trigger-lg);
    }

    &[data-placement='left'] ._arrow_1eco0_32 {
      transform: rotate(270deg);
    }

    &[data-placement='left'] ._spotlight_Tooltip-overlay_1eco0_36 {
      margin-left: calc(
        -1 * var(--tooltip-arrow-offset)
      ); /* Arrow positioning for left placement */
      margin-top: var(--tooltip-space-edge-to-trigger-sm);
    }

    &[data-placement='right'] {
      margin-left: var(--tooltip-space-edge-to-trigger-xl);
    }

    &[data-placement='right'] ._arrow_1eco0_32 {
      transform: rotate(90deg);
    }

    &[data-placement='right'] ._spotlight_Tooltip-overlay_1eco0_36 {
      margin-right: calc(
        -1 * var(--tooltip-arrow-offset)
      ); /* Arrow positioning for right placement */
      margin-top: var(--tooltip-space-edge-to-trigger-sm);
    }
  }
  ._spotlight_Tooltip_text_1eco0_74 {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  ._spotlight_Tooltip-overlay_1eco0_36 {
    display: flex;
  }

  ._arrow_1eco0_32 {
    display: flex;
    fill: var(--color-background-interactive-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Required_wmqn5_2 {
    padding: var(--field-label-space-element-to-element-primary);
  }

  ._spotlight_sr-only_wmqn5_6 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Select_cyy1k_2 {
    gap: var(--field-space-element-to-element-vertical-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
    min-width: 150px;
    flex: 1;
  }

  ._spotlight_Select-Input_cyy1k_13 {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-radius: var(--input-border-radius-primary);
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);
    background: var(--input-color-background-primary);
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    gap: var(--input-space-element-to-element-horizontal-primary);

    &[data-pressed] {
      span > svg {
        transform: rotate(180deg);
        transform-box: fill-box;
        transform-origin: center;
      }
    }
  }

  ._spotlight_Select-Value_cyy1k_34 {
    width: 100%;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-interactive-primary);
  }

  ._spotlight_Select-Value_cyy1k_34 + span > svg {
    fill: var(--color-content-interactive-primary);
  }

  ._spotlight_Select-Arrow_cyy1k_47 {
    height: 24px;
    width: 24px;
    display: flex;
    padding: 0px 3px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: var(--border-radius-full);
    background: var(--color-background-interactive-secondary);
    &[data-selected] {
      background: var(--color-background-interactive-selected-secondary);
    }
  }
  ._spotlight_Select-Popover_cyy1k_61 {
    width: var(--trigger-width);
    display: flex;
    padding: var(--input-space-drawer-edge-to-content-vertical-primary)
      var(--input-space-drawer-edge-to-content-horizontal-primary);
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border-interactive-primary);
    background: var(--color-background-primary);
    overflow-y: auto;
  }

  ._spotlight_SelectOption-List_cyy1k_76 {
    background: var(--color-background-primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--space-xs);
    &:focus {
      outline: none;
    }
  }

  ._spotlight_SelectOption_cyy1k_76 {
    align-items: center;
    width: 100%;
    overflow: hidden;
    gap: var(--space-md);
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: -webkit-fill-available;
    max-height: calc(
      (3rem + (2 * var(--input-space-edge-to-element-vertical-primary))) -
        0.313rem
    ); /* Limit the option to 2 lines*/
    color: var(--input-select-option-color-text-primary);
    padding: var(--input-select-option-space-edge-to-element-vertical-primary)
      var(--input-select-option-space-edge-to-element-horizontal-primary);
    border-radius: var(--input-select-option-border-radius-primary);
    background: var(--input-select-option-color-background-primary);
  }

  ._spotlight_Select-Error_cyy1k_110 {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xxs);
    align-self: stretch;
    color: var(--color-text-critical-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-xs);
    font-style: normal;
    font-weight: var(--text-weight-body-xs);
    line-height: 14px;
  }

  ._spotlight_Select-full-width_cyy1k_123 {
    width: 100%;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Checkbox_vlrr0_2 {
    color: var(--control-label-color-primary);
    display: flex;
    align-items: center;
    width: fit-content;
    position: relative;

    [slot='footnote'] {
      color: var(--color-text-secondary);
      font-size: var(--text-size-label-sm);
      font-weight: var(--text-weight-label-sm);
      line-height: var(--text-line-height-label-sm);
    }

    ._spotlight_Checkbox-checkbox_vlrr0_16 {
      width: var(--control-size-primary); /* Small checkbox size (16px) */
      height: var(--control-size-primary);
      background: var(--control-color-background-secondary);
      border: var(--border-weight-default) solid
        var(--control-color-border-primary);
      border-radius: var(--control-border-radius);
      transition: all var(--control-transition-duration-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(
        --control-space-edge-to-element-horizontal-primary
      ); /* Internal padding (2px) */
      box-sizing: border-box;
      cursor: pointer;
      margin: var(--control-space-edge-to-element-vertical-tertiary) 0; /* Vertical alignment (4px) */
      flex-shrink: 0;
      &:focus-visible {
        outline: var(--border-weight-heaviest) solid var(--color-border-focus);
        outline-offset: var(--control-focus-outline-offset-primary);
      }
    }

    &[data-disabled],
    &[data-disabled] ._spotlight_Checkbox-checkbox_vlrr0_16 {
      cursor: default;
    }

    svg {
      width: var(--control-icon-size-primary); /* Small icon (12px) */
      height: var(--control-icon-size-primary);
      fill: none;
      stroke: var(--color-content-interactive-inverse);
      stroke-width: var(--control-icon-stroke-width-primary);
      stroke-dasharray: 22px;
      stroke-dashoffset: 66;
      transition: all var(--control-transition-duration-primary);
    }

    &._spotlight_Checkbox-md_vlrr0_56 {
      svg {
        width: var(--control-icon-size-secondary); /* Medium icon (14px) */
        height: var(--control-icon-size-secondary);
      }

      ._spotlight_Checkbox-checkbox_vlrr0_16 {
        width: var(--control-size-secondary); /* Medium checkbox size (20px) */
        height: var(--control-size-secondary);
      }
    }

    &[data-selected],
    &[data-indeterminate] {
      svg {
        stroke-dashoffset: 44;
        color: var(--control-color-content-secondary);
      }
    }

    &[data-readonly],
    &:active[data-readonly] {
      color: var(--control-label-color-primary);
      ._spotlight_Checkbox-checkbox_vlrr0_16 {
        border: var(--border-weight-default) solid
          var(--control-color-border-read-only-primary);
        background: var(--control-color-background-read-only-primary);
        cursor: default;
      }
      svg {
        stroke: var(--color-content-interactive-primary);
      }
    }
  }

  ._spotlight_Checkbox-row_vlrr0_91 {
    align-items: baseline;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--control-space-element-to-element-horizontal-primary);
  }

  ._spotlight_Checkbox-row-reverse_vlrr0_99 {
    flex-direction: row-reverse;
  }

  ._spotlight_Checkbox-footnote_vlrr0_103 {
    margin-left: var(
      --control-footnote-space-edge-to-element-horizontal-primary
    ); /* Footnote indent (24px) */
  }

  ._spotlight_Checkbox-label_vlrr0_109 {
    align-items: baseline;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Button_1j8pi_2 {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    width: fit-content;
    /* typography */
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    font-weight: var(--button-text-weight-primary);
    /* border */
    border-width: var(--button-border-weight-primary);
    border-style: solid;
  }

  ._spotlight_Button-full-width_1j8pi_19 {
    width: 100%;
  }
  ._spotlight_Button-xs_1j8pi_22 {
    padding: var(--button-space-edge-to-element-vertical-quaternary)
      var(--button-space-edge-to-element-horizontal-tertiary);
    border-radius: var(--button-border-radius-tertiary);
    font-size: var(--button-text-size-tertiary);
    ._spotlight_Button-body_1j8pi_27 {
      gap: var(--button-space-element-to-element-horizontal-primary);
    }
  }
  ._spotlight_Button-sm_1j8pi_31 {
    font-size: var(--button-text-size-primary);
    padding: var(--button-space-edge-to-element-vertical-primary)
      var(--button-space-edge-to-element-horizontal-primary);
    border-radius: var(--button-border-radius-secondary);
    ._spotlight_Button-body_1j8pi_27 {
      gap: var(--button-space-element-to-element-horizontal-primary);
    }
  }
  ._spotlight_Button-md_1j8pi_40 {
    font-size: var(--button-text-size-primary);
    padding: var(--button-space-edge-to-element-vertical-secondary)
      var(--button-space-edge-to-element-horizontal-primary);
    border-radius: var(--button-border-radius-primary);
    ._spotlight_Button-body_1j8pi_27 {
      gap: var(--button-space-element-to-element-horizontal-primary);
    }
  }
  ._spotlight_Button-lg_1j8pi_49 {
    font-size: var(--button-text-size-secondary);
    padding: var(--button-space-edge-to-element-vertical-tertiary)
      var(--button-space-edge-to-element-horizontal-secondary);
    border-radius: var(--button-border-radius-primary);
    ._spotlight_Button-body_1j8pi_27 {
      gap: var(--button-space-element-to-element-horizontal-secondary);
    }
  }

  ._spotlight_Button-solid_1j8pi_59 {
    color: var(--button-color-text-primary);
    background: var(--button-color-background-primary);
    border-color: var(--button-color-background-primary);
    &._critical_1j8pi_63 {
      background: var(--button-color-background-destructive-primary);
      border-color: var(--button-color-background-destructive-primary);
    }
  }
  ._spotlight_Button-outlined_1j8pi_68 {
    color: var(--button-color-text-secondary);
    background: var(--button-color-background-secondary);
    border-color: var(--button-color-border-primary);
    &._critical_1j8pi_63 {
      color: var(--button-color-text-destructive-secondary);
      background: var(--button-color-background-destructive-secondary);
      border-color: var(--button-color-border-destructive-primary);
    }
  }
  ._spotlight_Button-ghost_1j8pi_78 {
    color: var(--button-color-text-secondary);
    background: var(--button-color-background-secondary);
    border-color: var(--button-color-background-secondary);
    &._critical_1j8pi_63 {
      color: var(--button-color-text-destructive-secondary);
      background: var(--button-color-background-destructive-secondary);
      border-color: var(--button-color-background-destructive-secondary);
    }
  }
  ._spotlight_Button-body_1j8pi_27 {
    align-items: center;
    display: flex;
  }
}
@layer spotlight-ui.components {
  ._spotlight_IconToggleButton_tblee_2 {
    border-radius: var(--toggle-button-border-radius-primary);
    color: var(--toggle-button-color-content-secondary);
    cursor: pointer;
    width: var(--toggle-button-icon-size-sm);
    height: var(--toggle-button-icon-size-sm);
    padding: var(--toggle-button-icon-padding-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: var(--toggle-button-border-weight-primary);
    border-style: solid;
    & svg {
      color: var(--toggle-button-color-content-secondary);
    }

    &._spotlight_IconToggleButton-large_tblee_18 {
      padding: var(--toggle-button-icon-padding-lg);
      height: var(--toggle-button-icon-size-lg);
      width: var(--toggle-button-icon-size-lg);
    }

    &._spotlight_IconToggleButton-ghost_tblee_24 {
      border-color: var(--color-background-interactive-secondary);
      background: var(--color-background-interactive-secondary);
    }

    &._spotlight_IconToggleButton-outlined_tblee_29 {
      border-color: var(--toggle-button-color-border-secondary);
      background: var(--toggle-button-color-background-secondary);
    }

    &[data-disabled] {
      cursor: default;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavLabelMobile_1pl6g_2 {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    ._wrapper_1pl6g_8 {
      align-items: center;
      display: flex;
      flex-direction: row;
      font-size: 14px;
      gap: 4px;
    }

    ._chip_1pl6g_16 {
      background: var(--color-background-neutral-secondary);
      border-radius: var(--tag-border-radius-primary, 8px);
      border: 1px solid var(--color-border-neutral-secondary);
      padding: var(--tag-space-edge-to-element-vertical-primary, 4px)
        var(--space-md, 8px);
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_NumberIcon_1bv6b_2 {
    font-size: var(--text-size-label-base);
    font-style: normal;
    font-weight: var(--text-weight-label-base-strong);
    line-height: var(--text-line-height-label-base);
  }

  ._spotlight_NumberIcon-xs_1bv6b_9 {
    font-size: var(--size-icon-xs);
  }
  ._spotlight_NumberIcon-sm_1bv6b_12 {
    font-size: var(--size-icon-sm);
  }
  ._spotlight_NumberIcon-md_1bv6b_15 {
    font-size: var(--size-icon-md);
  }
  ._spotlight_NumberIcon-lg_1bv6b_18 {
    font-size: var(--size-icon-lg);
  }
  ._spotlight_NumberIcon-xl_1bv6b_21 {
    font-size: var(--size-icon-xl);
  }
  ._spotlight_NumberIcon-2xl_1bv6b_24 {
    font-size: var(--size-icon-2xl);
  }
  ._spotlight_NumberIcon-3xl_1bv6b_27 {
    font-size: var(--size-icon-3xl);
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavIndicator_offl2_2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: Inter;
    width: var(--stepper-graphic-size-width-primary);
    height: var(--stepper-graphic-size-horizontal-primary);
    padding: var(--space-md);
    border-radius: var(--nav-stepper-graphic-border-radius-primary);
    border: var(--nav-stepper-graphic-border-weight-primary) solid
      var(--nav-stepper-graphic-color-border-primary);
    background: var(--nav-stepper-graphic-color-content-secondary);
    color: var(--nav-stepper-graphic-color-content-primary);
  }

  ._completed_offl2_18 {
    border-radius: var(--nav-stepper-graphic-border-radius-primary);
    border: var(--nav-stepper-graphic-border-weight-primary) solid
      var(--nav-stepper-graphic-color-border-completed-primary);
    background: var(--nav-stepper-graphic-color-content-completed-secondary);
    color: var(--nav-stepper-graphic-color-content-completed-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavListItem_191jg_2 {
    border-radius: var(--nav-stepper-border-radius-primary);
    background: var(--nav-stepper-color-background-primary);
    display: flex;
    border: none;
    width: 100%;
    height: unset;
    cursor: pointer;
    text-align: left;
    flex-direction: row;
    align-items: flex-start;
    justify-content: start;
    color: var(--nav-stepper-color-text-primary);
    gap: var(--space-lg);
    padding: var(--nav-stepper-space-edge-to-element-vertical-secondary)
      var(--nav-item-space-edge-to-element-horizontal-primary)
      var(--nav-stepper-space-edge-to-element-vertical-tertiary)
      var(--nav-item-space-edge-to-element-horizontal-primary);

    &._label_191jg_21 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      align-self: stretch;
      overflow: hidden;
      color: var(--color-text-interactive-primary);
      text-overflow: ellipsis;
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--nav-stepper-text-size-primary, 14px);
      font-style: normal;
      font-weight: var(--nav-stepper-text-weight-primary, 700);
      line-height: var(--nav-stepper-text-line-height-primary, 18px);
    }
  }
}
@layer spotlight-ui.components {
  ._listitem_ro1bh_2 {
    align-items: center;
    display: flex;
    gap: var(--list-item-space-element-to-element-horizontal-primary);
    padding: var(--list-item-space-edge-to-element-vertical-primary)
      var(--list-item-space-element-to-element-horizontal-primary);

    &[data-hovered] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #eff0f3
      );
    }

    &[data-selected] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #eaf2ff
      );
    }

    &[data-hovered][data-selected] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #dbeaff
      );
    }

    &[data-disabled] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        rgba(255, 255, 255, 0)
      );
    }

    &[data-selected] ._indicator_ro1bh_37:before {
      border-color: var(--color-border-interactive-primary);
      border-width: var(--selectable-list-border-weight-primary);
    }

    &._divided_ro1bh_42 {
      border-bottom: solid var(--list-item-border-weight-primary)
        var(--color-border-primary);
    }
  }

  ._card_ro1bh_48 {
    background-color: var(
      --list-item-color-background-interactive-selectable-primary,
      #fff
    );
    border: solid var(--list-item-border-weight-primary)
      var(--list-item-color-border-primary, #d8d9e0);
    border-radius: var(--border-radius-sm);

    &[data-hovered] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #eff0f3
      );
      border-color: var(--list-item-color-border-primary, #cdced7);
    }

    &[data-selected] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #eaf2ff
      );
      border-color: var(--list-item-color-border-primary, #9bbfff);
    }

    &[data-hovered][data-selected] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #dbeaff
      );
      border-color: var(--list-item-color-border-primary, #78a5ff);
    }

    &[data-disabled] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        rgba(255, 255, 255, 0)
      );
      border-color: var(--list-item-color-border-primary, #d8d9e0);
    }

    &[data-disabled][data-selected] {
      background-color: var(
        --list-item-color-background-interactive-selectable-secondary,
        #e7e8ec
      );
      border-color: var(--list-item-color-border-primary, #d8d9e0);
    }
  }

  ._list_ro1bh_2 {
    border: none;
    display: flex;
    flex-direction: column;

    ._listitem_ro1bh_2:last-child {
      border-bottom: none;
    }

    &._card_ro1bh_48 {
      gap: var(--selectable-list-gap-md);

      ._listitem_ro1bh_2 {
        border: solid var(--list-item-border-weight-primary)
          var(--list-item-color-border-primary, #d8d9e0);
        border-radius: var(--border-radius-sm);
      }
    }
  }

  ._checkbox_ro1bh_118 {
    background: var(--color-background-interactive-tertiary);
    border-radius: var(--control-border-radius);
    border: var(--list-item-border-weight-primary) solid
      var(--color-border-interactive-tertiary);
    display: flex;
    transition: all 200ms;
  }

  ._checkmark_ro1bh_127 {
    width: var(--selectable-list-checkbox-size);
    height: var(--selectable-list-checkbox-size);
    fill: none;
    stroke: var(--color-content-interactive-inverse);
    stroke-width: var(--selectable-list-checkbox-stroke-width);
    stroke-dasharray: var(--selectable-list-checkbox-stroke-dasharray);
    stroke-dashoffset: 66;
    transition: all 200ms;
  }

  ._listitem_ro1bh_2[data-selected] {
    ._checkbox_ro1bh_118 {
      background: var(--color-background-interactive-selected-quaternary);
    }

    ._checkmark_ro1bh_127 {
      stroke-dashoffset: 44;
    }
  }

  ._indicator_ro1bh_37 {
    display: flex;
    position: relative;
    align-items: center;
    gap: 0.571rem;
    font-size: 1.143rem;
    color: black;

    &:before {
      background-color: var(--color-background-interactive-tertiary);
      border: var(--list-item-border-weight-primary) solid
        var(--color-border-interactive-tertiary);
      border-radius: var(--border-radius-full);
      box-sizing: border-box;
      content: '';
      cursor: pointer;
      display: block;
      width: var(--selectable-list-checkbox-size-lg);
      height: var(--selectable-list-checkbox-size-lg);
      transition: all 200ms;
    }
  }
}
@layer spotlight-ui.components {
  ._content_1c4o5_2 {
    display: flex;
    gap: var(--list-item-space-element-to-element-horizontal-primary);
  }

  ._description_1c4o5_7 {
    color: var(--color-text-interactive-secondary);
    font-family: var(--text-font-san-serif, Inter);
    font-size: var(--text-size-label-sm, 14px);
    font-style: normal;
    font-weight: var(--text-weight-label-sm, 500);
    line-height: var(--text-line-height-label-sm, 20px);
  }

  ._label_1c4o5_16 {
    color: var(--color-text-interactive-primary);
    font-family: var(--text-font-san-serif, Inter);
    font-size: var(--text-size-label-sm, 14px);
    font-style: normal;
    font-weight: var(--text-weight-label-sm-strong, 700);
    line-height: var(--text-line-height-label-sm, 20px);
  }
}
@layer spotlight-ui.components {
  ._content_w90d8_2 {
    width: 100%;
    display: flex;
    gap: var(--space-sm);
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-xl);
    border-radius: var(--border-radius-sm);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Drawer-modal_1czsb_2 {
    position: fixed;
    top: 0;
    bottom: 0;
    padding: var(--container-space-edge-to-content-vertical-primary);
    @media (max-width: 768px) {
      padding: 0;
      width: 100%;
    }

    &._left_1czsb_12 {
      left: 0;
      transform: translateX(0%);
      &[data-entering] {
        animation: _slideInLeft_1czsb_1 300ms ease-out forwards;
      }

      &[data-exiting] {
        animation: _slideInLeft_1czsb_1 300ms ease-in reverse;
      }
    }
    &._right_1czsb_23 {
      right: 0;
      transform: translateX(100%);
      animation: _slideInRight_1czsb_1 0.3s ease-out forwards;
      &[data-entering] {
        animation: _slideInRight_1czsb_1 0.3s ease-out forwards;
      }

      &[data-exiting] {
        animation: _slideInRight_1czsb_1 0.3s ease-in reverse;
      }
    }
  }

  ._spotlight_Drawer-dialog_1czsb_37 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: var(--drawer-border-radius-primary);
    border: var(--container-border-weight-primary) solid
      var(--color-border-primary);
    background: var(--color-background-primary);
    height: 100%;
    position: relative;
    &._sm_1czsb_50 {
      width: var(--drawer-size-width-sm);
    }
    &._md_1czsb_53 {
      width: var(--drawer-size-width-md);
    }
    &._lg_1czsb_56 {
      width: var(--drawer-size-width-lg);
    }
    @media (max-width: 768px) {
      border-radius: var(--border-radius-none);
      width: 100%;
      &._sm_1czsb_50,
      &._md_1czsb_53,
      &._lg_1czsb_56 {
        width: 100%;
      }
    }

    &[data-focused] {
      outline: 0;
      outline-offset: 0;
    }
  }

  ._spotlight_Drawer-header_1czsb_75 {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-secondary);
    gap: var(--container-header-space-element-to-element-horizontal-primary);
    border-bottom: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
  }
  ._spotlight_Drawer-title_1czsb_86 {
    color: var(--container-header-color-text-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--container-header-text-size-primary);
    font-style: normal;
    font-weight: var(--container-header-text-weight-primary);
    line-height: var(--container-header-text-line-height-primary);
  }

  ._spotlight_Drawer-content_1czsb_95 {
    gap: var(--space-sm);
    flex: 1 0 0;
    display: flex;
    overflow-y: auto;
    align-self: stretch;
    align-items: flex-start;
    padding: var(--container-space-edge-to-content-vertical-secondary)
      var(--container-space-edge-to-content-horizontal-secondary);
  }

  ._spotlight_Drawer-footer_1czsb_106 {
    gap: var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-secondary)
      var(--container-space-edge-to-content-vertical-secondary)
      var(--container-space-edge-to-content-horizontal-secondary);
  }

  @keyframes _slideInRight_1czsb_1 {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  @keyframes _slideInLeft_1czsb_1 {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }

  ._spotlight_Drawer-overlay_1czsb_136 {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(2px);
    z-index: 99;

    &[data-entering] {
      animation: _obscure_1czsb_1 300ms ease-out;
    }

    &[data-exiting] {
      animation: _obscure_1czsb_1 300ms reverse ease-in;
    }
  }

  @keyframes _obscure_1czsb_1 {
    from {
      backdrop-filter: blur(0);
    }

    to {
      backdrop-filter: blur(2px);
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_section_1r6na_2 {
    align-items: flex-start;
    border-radius: var(--container-border-radius-primary);
    border: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
    background: var(--container-color-background-primary);
    display: flex;
    flex-direction: column;
    gap: var(--card-space-element-to-element-primary);
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-primary);
  }

  ._spotlight_Section_trigger_1r6na_15 {
    all: unset;

    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    &._spotlight_Section_expandable_1r6na_24 {
      cursor: pointer;
    }
  }

  ._triggerIcon_1r6na_29 {
    margin-right: var(--space-lg);
    transition: rotate 300ms;

    &._expanded_1r6na_33 {
      rotate: 180deg;
      transition: rotate 300ms;
    }
  }

  ._spotlight_ExpandableSection_panel_1r6na_39,
  ._spotlight_Section_panel_1r6na_40 {
    width: -webkit-fill-available;
    padding: var(--space-3xl) var(--space-lg) var(--space-xl) var(--space-lg);
  }
  ._spotlight_section_1r6na_2
    ._spotlight_Section_expandable_1r6na_24[aria-expanded='false']
    + ._spotlight_ExpandableSection_panel_1r6na_39 {
    padding: var(--space-none);
  }

  ._spotlight_Section_icon_1r6na_50 {
    border-radius: var(--toggle-button-border-radius-primary);
    color: var(--toggle-button-color-content-secondary);
    width: 24px;
    height: 24px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background: var(--color-background-interactive-secondary);

    & svg {
      color: var(--toggle-button-color-content-secondary);
    }
  }
}
@layer spotlight-ui.components {
  ._tile_ua7jq_2 {
    gap: var(--size-125);
    display: inline-flex;
    flex-direction: column;
    background: var(
      --container-color-background-interactive-selectable-primary
    );
    border-radius: var(--container-border-radius-primary);
    border: var(--tile-border-weight-primary) solid
      var(--container-color-border-interactive-primary);
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-tertiary);
  }

  ._wrapper_ua7jq_16 {
    display: contents;
    padding: var(--container-space-edge-to-content-vertical-primary, 16px)
      var(--container-space-edge-to-content-horizontal-tertiary, 16px);
  }

  ._group_ua7jq_22 {
    display: flex;
    gap: var(--space-xl);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Tile_z9kzg_2 {
    background: var(--color-background-primary);
    border: var(--tile-border-weight-primary) solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  ._spotlight_Tile-wrapper_z9kzg_11 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-horizontal-tertiary);
    gap: var(--size-125);
    align-self: stretch;
  }

  ._spotlight_Tile-title_z9kzg_21 {
    display: flex;
    padding: var(--container-space-edge-to-content-vertical-primary)
      var(--container-space-edge-to-content-vertical-primary) 0
      var(--container-space-edge-to-content-vertical-primary);
    align-items: flex-start;
    gap: var(--container-header-space-element-to-element-horizontal-secondary);
    align-self: stretch;
  }

  ._spotlight_Tile-content_z9kzg_31 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    align-self: stretch;

    ._spotlight_Tile_z9kzg_2 {
      border-radius: var(--border-radius-sm);
      background: var(--color-background-tertiary);
      border: var(--tile-border-weight-primary) solid
        var(--color-background-tertiary);
    }
  }

  ._spotlight_Tile-footer_z9kzg_47 {
    display: flex;
    padding: var(--container-space-edge-to-content-vertical-quinary)
      var(--container-space-edge-to-content-horizontal-tertiary);
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--size-125);
    align-self: stretch;
    border-top: 1px solid var(--color-border-primary);
  }

  /* Variants */
  ._spotlight-tile--default_z9kzg_59 {
    background: var(--color-background-primary);
    border-color: var(--color-border-primary);
  }

  ._spotlight-tile--outlined_z9kzg_64 {
    background: transparent;
    border-color: var(--color-primary);
  }

  ._spotlight-tile--filled_z9kzg_69 {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
  }

  ._spotlight-tile--elevated_z9kzg_74 {
    background: var(--color-background-primary);
    border-color: var(--color-border-primary);
    box-shadow:
      0 6px 12px rgba(0, 0, 0, 0.15),
      0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Interactive states */
  ._spotlight-tile--clickable_z9kzg_83 {
    cursor: pointer;
  }

  ._spotlight-tile--clickable_z9kzg_83:hover:not(._spotlight-tile--disabled_z9kzg_87) {
    transform: translateY(-2px);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.16),
      0 6px 16px rgba(0, 0, 0, 0.23);
    border-color: var(--color-primary-light);
  }

  ._spotlight-tile--clickable_z9kzg_83:focus:not(._spotlight-tile--disabled_z9kzg_87) {
    outline: var(--tile-outline-width) solid var(--color-primary);
    outline-offset: var(--tile-outline-offset);
  }

  ._spotlight-tile--clickable_z9kzg_83:active:not(._spotlight-tile--disabled_z9kzg_87) {
    transform: translateY(0);
  }

  ._spotlight-tile--disabled_z9kzg_87 {
    opacity: 0.6;
    cursor: not-allowed;
  }

  ._spotlight-tile--selected_z9kzg_109 {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(59, 130, 246, 0.05));
  }

  ._spotlight-tile--selected_z9kzg_109._spotlight-tile--outlined_z9kzg_64 {
    border-width: var(--tile-border-weight-secondary);
    border-color: var(--color-primary);
  }

  /* Tile subcomponents */
  ._spotlight-tile-content_z9kzg_120 {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-2xl);
    gap: var(--space-md);
  }

  ._spotlight-tile-footer_z9kzg_128 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-2xl);
    border-top: 1px solid var(--color-border-primary);
    gap: var(--space-md);
  }

  ._spotlight-tile-title_z9kzg_137 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
    color: var(--color-text-primary);
  }

  /* Icon styling */
  ._spotlight-tile-icon_z9kzg_146 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
  }

  /* Description styling */
  ._spotlight-tile-description_z9kzg_155 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
  }

  /* Accessibility support */
  @media (prefers-contrast: high) {
    ._spotlight-tile_z9kzg_59 {
      border-width: var(--tile-border-weight-secondary);
    }

    ._spotlight-tile--selected_z9kzg_109 {
      border-width: var(--tile-border-weight-tertiary);
    }
  }

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

    ._spotlight-tile--clickable_z9kzg_83:hover:not(._spotlight-tile--disabled_z9kzg_87) {
      transform: none;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_SidePanel-root_collapsed_1vbmt_2 {
    display: none;
  }

  ._spotlight_SidePanel-root_minified_1vbmt_6 {
    width: var(--side-panel-size-width-horizontal-primary);
  }

  ._spotlight_SidePanel-root_expanded_1vbmt_10 {
    width: fit-content;
  }

  ._spotlight_SidePanel-content_1vbmt_14 {
    height: 100%;
  }

  ._spotlight_SidePanel-content_collapsed_1vbmt_18 {
    display: none;
  }

  ._spotlight_SidePanel-content_minified_1vbmt_22 {
    width: var(--side-panel-size-width-horizontal-primary);
  }

  ._spotlight_SidePanel-content_expanded_1vbmt_26 {
    width: max-content;
  }
}
@layer spotlight-ui.components {
  ._slider_152or_2 {
    position: relative;

    &._vertical_152or_5 {
      height: 100%;
      top: 16px;
    }

    &._horizontal_152or_10 {
      width: 100%;
      height: 84px;
      top: 24px;
      transform: translateY(-24px);
    }
  }

  ._group_152or_18 {
    display: block;

    &._horizontal_152or_10._disabled_152or_21,
    &._vertical_152or_5._disabled_152or_21 {
      ._bar_152or_23 {
        background: var(--slider-color-background-secondary, #e7e8ec);
      }

      ._dot_152or_27 {
        svg {
          circle {
            fill: var(--slider-dot-color-background-primary, #d4d9e2);
          }
        }
      }

      ._fill_152or_35 {
        background: var(--slider-color-background-disabled, #8b8d98);
      }

      ._tick_152or_39 {
        color: var(--slider-color-text-secondary, #8b8d98);
      }

      ._thumb_152or_43 {
        border: 2px solid var(--slider-thumb-color-border-primary, #d8d9e0);
        background: var(--slider-thumb-color-background-primary, #e7e8ec);
      }
    }
  }

  ._group_152or_18._horizontal_152or_10 {
    width: 100%;

    ._track_152or_53 {
      height: 68px;
      align-items: center;
      box-sizing: border-box;
      display: flex;
    }

    ._label_152or_60 {
      color: var(--color-text-secondary);
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-sm, 14px);
      font-style: normal;
      font-weight: var(--text-weight-label-sm, 500);
      line-height: var(--text-line-height-label-sm, 20px);
      transform: translate(-4px, -24px);
      position: absolute;
    }

    ._bar_152or_23 {
      background: var(--color-background-tertiary);
      border-radius: 4px;
      border: var(--border-weight-default, 1px) solid
        var(--color-border-primary);
      box-sizing: border-box;
      position: absolute;
      height: 8px;
      width: calc(100% + 8px);
      transform: translateX(-4px);
    }

    ._fill_152or_35 {
      border-radius: 4px;
      background: var(--color-background-interactive-primary-enabled, #272b36);
      box-sizing: border-box;
      position: absolute;
      height: 8px;
      transform: translateX(-4px);
    }

    ._graduations_152or_92 {
      display: flex;
      justify-content: space-between;
      position: absolute;
      width: calc(100% + 4px);
      transform: translateX(-2px);
      z-index: 999;
    }

    ._dot_152or_27 {
      display: flex;
      justify-content: center;
    }

    ._tick_152or_39 {
      color: var(--slider-color-text-primary, #1e1f24);
      text-align: center;
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-xxs, 10px);
      font-style: normal;
      font-weight: var(--text-weight-label-xxs, 400);
      line-height: var(--text-line-height-label-xxs, 12px);
      position: absolute;
      transform: translateY(16px);
    }

    ._thumb_152or_43 {
      background: var(--slider-control-color-background-primary, #fff);
      border-radius: 12px;
      border: 2px solid var(--slider-control-color-border-primary, #1e1f24);
      box-sizing: border-box;
      height: 24px;
      width: 24px;
      transform: translate(-50%, 0%) !important;
      z-index: 9999;
    }

    ._footnote_152or_129 {
      color: var(--color-text-secondary);
      /* Label/xSmall */
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-xs, 12px);
      font-style: normal;
      font-weight: var(--text-weight-label-xs, 400);
      line-height: var(--text-line-height-label-xs, 16px);
    }
  }

  ._group_152or_18._vertical_152or_5 {
    height: 100%;

    ._label_152or_60 {
      color: var(--color-text-secondary);
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-sm, 14px);
      font-style: normal;
      font-weight: var(--text-weight-label-sm, 500);
      line-height: var(--text-line-height-label-sm, 20px);
      transform: translate(24px, -32px);
      position: absolute;
      white-space: nowrap;
    }

    ._track_152or_53 {
      width: 8px;
      height: 100%;

      justify-content: center;
      box-sizing: border-box;
      display: flex;
    }

    ._bar_152or_23 {
      background: var(--color-background-tertiary);
      border-radius: 4px;
      border: var(--border-weight-default, 1px) solid
        var(--color-border-primary);
      box-sizing: border-box;
      position: absolute;
      height: calc(100% + 8px);
      width: 8px;
      transform: translateY(-4px);
    }

    ._fill_152or_35 {
      background: var(--color-background-interactive-primary-enabled, #272b36);
      border-radius: 4px;
      bottom: 0;
      box-sizing: border-box;
      position: absolute;
      width: 8px;
      transform: translateY(4px);
    }

    ._graduations_152or_92 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      height: calc(100% + 4px);
      transform: translateY(-2px);
      z-index: 999;
    }

    ._dot_152or_27 {
      display: flex;
      align-items: center;
    }

    ._tick_152or_39 {
      color: var(--color-text-secondary);
      text-align: center;
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-xxs, 10px);
      font-style: normal;
      font-weight: var(--text-weight-label-xxs, 400);
      line-height: var(--text-line-height-label-xxs, 12px);
      position: absolute;
      transform: translateX(18px);
    }

    ._thumb_152or_43 {
      background: var(--slider-control-color-background-primary, #fff);
      border-radius: 12px;
      border: 2px solid var(--slider-control-color-border-primary, #1e1f24);
      box-sizing: border-box;
      height: 24px;
      width: 24px;
      transform: translate(0%, -50%);
      z-index: 9999;
    }

    ._footnote_152or_129 {
      padding-top: 16px;
      color: var(--color-text-secondary);
      font-family: var(--text-font-san-serif, Inter);
      font-size: var(--text-size-label-xs, 12px);
      font-style: normal;
      font-weight: var(--text-weight-label-xs, 400);
      line-height: var(--text-line-height-label-xs, 16px);
    }
  }
}
@layer spotlight-ui.components {
  ._group_b0met_2 {
    & > * {
      border-radius: 0;
    }

    & > :first-child {
      border-bottom-left-radius: var(--button-border-radius-secondary);
      border-top-left-radius: var(--button-border-radius-secondary);
    }

    & > :last-child {
      border-bottom-right-radius: var(--button-border-radius-secondary);
      border-top-right-radius: var(--button-border-radius-secondary);
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_SplitButton_1ym6v_2 {
    display: inline-flex;
    align-items: stretch;
    position: relative;
  }

  ._spotlight_SplitButton-button_1ym6v_8 {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    font-weight: var(--button-text-weight-primary);
    border-width: var(--button-border-weight-primary);
    border-style: solid;
    position: relative;

    padding: var(--splitbutton-space-edge-to-element-vertical-secondary)
      var(--splitbutton-space-edge-to-element-horizontal-quartenary);
    justify-content: center;
    align-items: center;
    gap: var(--splitbutton-space-element-to-element-horizontal-primary);
  }

  ._spotlight_SplitButton-icon-wrapper_1ym6v_29 {
    padding-right: var(--splitbutton-space-edge-to-element-vertical-tertiary);
  }

  ._spotlight_SplitButton-divider_1ym6v_33 {
    width: var(--border-weight-heaviest);
    align-self: stretch;
    background: var(--color-border-inverse);
  }

  ._spotlight_SplitButton-outlined_1ym6v_39 ._spotlight_SplitButton-divider_1ym6v_33 {
    background: var(--button-color-border-primary);
  }

  ._spotlight_SplitButton-solid_1ym6v_43:has([data-disabled])
    ._spotlight_SplitButton-divider_1ym6v_33 {
    background: var(--color-border-inverse);
  }

  ._spotlight_SplitButton-outlined_1ym6v_39:has([data-disabled])
    ._spotlight_SplitButton-divider_1ym6v_33 {
    background: var(--color-border-disabled);
  }

  ._spotlight_SplitButton-primary_1ym6v_53 {
    border-top-left-radius: var(--button-border-radius-tertiary);
    border-bottom-left-radius: var(--button-border-radius-tertiary);
    border-right: none;
  }

  ._spotlight_SplitButton-trigger_1ym6v_59 {
    border-left: none;
    border-top-right-radius: var(--button-border-radius-tertiary);
    border-bottom-right-radius: var(--button-border-radius-tertiary);
  }

  /* Size variants */
  ._spotlight_SplitButton-xs_1ym6v_66 ._spotlight_SplitButton-button_1ym6v_8 {
    display: flex;
    padding: var(--splitbutton-space-edge-to-element-vertical-primary)
      var(--splitbutton-space-edge-to-element-horizontal-primary);
    justify-content: center;
    align-items: center;
    gap: var(--splitbutton-space-element-to-element-horizontal-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--button-text-size-tertiary);
    font-style: normal;
    font-weight: var(--button-text-weight-primary);
    line-height: var(--button-text-line-height-tertiary); /* 133.333% */
  }

  ._spotlight_SplitButton-xs_1ym6v_66 ._spotlight_SplitButton-trigger_1ym6v_59 {
    padding: var(--splitbutton-space-edge-to-element-vertical-secondary)
      var(--splitbutton-space-edge-to-element-horizontal-primary);
  }

  ._spotlight_SplitButton-sm_1ym6v_87 ._spotlight_SplitButton-button_1ym6v_8 {
    display: flex;
    padding: var(--splitbutton-space-edge-to-element-vertical-secondary)
      var(--splitbutton-space-edge-to-element-horizontal-quartenary);
    justify-content: center;
    align-items: center;
    gap: var(--splitbutton-space-element-to-element-horizontal-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--button-text-size-primary);
    font-style: normal;
    font-weight: var(--button-text-weight-primary);
    line-height: var(--button-text-line-height-primary); /* 142.857% */
  }

  ._spotlight_SplitButton-sm_1ym6v_87 ._spotlight_SplitButton-trigger_1ym6v_59 {
    padding: var(--splitbutton-space-edge-to-element-vertical-tertiary)
      var(--splitbutton-space-edge-to-element-horizontal-secondary);
  }

  ._spotlight_SplitButton-md_1ym6v_108 ._spotlight_SplitButton-button_1ym6v_8 {
    display: flex;
    padding: var(--splitbutton-space-edge-to-element-vertical-quartenary)
      var(--splitbutton-space-edge-to-element-horizontal-quartenary);
    justify-content: center;
    align-items: center;
    gap: var(--splitbutton-space-element-to-element-horizontal-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: var(--button-text-size-primary);
    font-style: normal;
    font-weight: var(--button-text-weight-primary);
    line-height: var(--button-text-line-height-primary); /* 142.857% */
  }

  ._spotlight_SplitButton-md_1ym6v_108 ._spotlight_SplitButton-trigger_1ym6v_59 {
    padding: var(--splitbutton-space-edge-to-element-vertical-quartenary)
      var(--splitbutton-space-edge-to-element-horizontal-tertiary);
  }

  ._spotlight_SplitButton-lg_1ym6v_129 ._spotlight_SplitButton-button_1ym6v_8 {
    display: flex;
    padding: var(--splitbutton-space-edge-to-element-vertical-quintenary)
      var(--splitbutton-space-edge-to-element-horizontal-quintenary);
    justify-content: center;
    align-items: center;
    gap: var(--splitbutton-space-element-to-element-horizontal-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--button-text-size-secondary);
    font-style: normal;
    font-weight: var(--button-text-weight-primary);
    line-height: var(--button-text-line-height-secondary); /* 150% */
  }

  ._spotlight_SplitButton-lg_1ym6v_129 ._spotlight_SplitButton-trigger_1ym6v_59 {
    padding: var(--splitbutton-space-edge-to-element-vertical-quintenary)
      var(--splitbutton-space-edge-to-element-horizontal-quartenary);
  }

  /* Visual variants */
  ._spotlight_SplitButton-button-solid_1ym6v_151 {
    color: var(--button-color-text-primary);
    background: var(--button-color-background-primary);
    border-color: var(--button-color-background-primary);
  }
  ._spotlight_SplitButton-button-outlined_1ym6v_156 {
    color: var(--button-color-text-secondary);
    background: var(--button-color-background-secondary);
    border-color: var(--button-color-border-primary);
  }

  /* Popover and Menu */
  ._spotlight_SplitButton-popover_1ym6v_163 {
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xs) 0;
    width: max-content;
  }

  ._spotlight_SplitButton-menu_1ym6v_169 {
    width: fit-content;
    display: flex;
    padding: var(--space-xs);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: var(--input-border-radius-primary);
    border: var(--border-weight-default) solid
      var(--input-color-border-secondary);
    background: var(--input-color-background-primary);
  }

  /* Menu Options */
  ._spotlight_SplitButton-option_1ym6v_183 {
    display: flex;
    padding: var(--space-sm) var(--space-sm);
    align-items: center;
    gap: var(--space-md);
    transition: background-color 0.2s ease;
    cursor: pointer;
    border-radius: var(--button-border-radius-tertiary);
  }

  ._spotlight_SplitButton-option-outlined_1ym6v_193:hover {
    background: var(---co-brand-primary-100);
  }

  ._spotlight_SplitButton-option-outlined_1ym6v_193[data-focused] {
    background: var(---co-brand-primary-300);
  }

  ._spotlight_SplitButton-option-outlined_1ym6v_193[data-pressed] {
    background: var(---co-brand-primary-300);
  }

  ._spotlight_SplitButton-option-solid_1ym6v_205:hover {
    background: var(---co-brand-secondary-300);
  }

  ._spotlight_SplitButton-option-solid_1ym6v_205[data-focused] {
    background: var(---co-brand-secondary-500);
  }

  ._spotlight_SplitButton-option-solid_1ym6v_205[data-pressed] {
    background: var(---co-brand-secondary-500);
  }

  ._spotlight_SplitButton-option_1ym6v_183[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  ._spotlight_SplitButton-option-icon_1ym6v_222 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  ._spotlight_SplitButton-option-label_1ym6v_229 {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@layer spotlight-ui.components {
  ._spotlight_ToggleButton_Group_1tqkx_2 {
    display: inline-flex;
    gap: var(--toggle-button-group-space-element-to-element-secondary);
  }
  ._spotlight_ToggleButton_Group-vertical_1tqkx_6 {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--toggle-button-group-space-edge-to-element-vertical-primary)
      var(--space-none);
  }
  ._spotlight_ToggleButton_Group-horizontal_1tqkx_13 {
    align-items: center;
    padding: var(--space-none)
      var(--toggle-button-group-space-edge-to-element-horizontal-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_SquareIconToggleButton_14tm9_2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--button-space-element-to-element-horizontal-primary);
    background: var(--toggle-button-color-background-primary);
    border: var(--toggle-button-border-weight-primary) solid
      var(--toggle-button-color-background-primary);
    border-radius: var(--button-border-radius-primary);
    color: var(--toggle-button-color-content-primary);

    &._spotlight_SquareIconToggleButton-lg_14tm9_13 {
      height: var(--toggle-button-square-icon-size-lg);
      width: var(--toggle-button-square-icon-size-lg);
      padding: var(--space-md);
    }
    &._spotlight_SquareIconToggleButton-md_14tm9_18 {
      height: var(--toggle-button-square-icon-size-md);
      width: var(--toggle-button-square-icon-size-md);
      padding: var(--space-xs);
      border-radius: var(--toggle-button-border-radius-primary);
    }

    ._spotlight_SquareIconToggleButton_icon-wrapper_14tm9_25 {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
      color: inherit;
    }
  }
  ._spotlight_SquareIconToggleButton_14tm9_2[data-hovered],
  ._spotlight_SquareIconToggleButton_14tm9_2:hover {
    background: var(--toggle-button-color-background-primary);
  }
}
@layer spotlight-ui.components {
  /* Base avatar styles */
  ._spotlight_Avatar_ydzzb_3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    font-weight: var(--avatar-text-weight-primary);
    text-transform: uppercase;
    overflow: hidden;
    user-select: none;
    /* Image styles */
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  ._spotlight_Avatar-accent_ydzzb_19 {
    /*defaut heavy*/
    background: var(--avatar-color-background-accent-primary);
    color: var(--avatar-color-text-accent-primary);
    &._spotlight_Avatar-light_ydzzb_23 {
      background: var(--avatar-color-background-accent-secondary);
      color: var(--avatar-color-text-accent-secondary);
    }
  }

  ._spotlight_Avatar-brand_ydzzb_29 {
    background: var(--avatar-color-background-brand-primary);
    color: var(--avatar-color-text-brand-primary);
    &._spotlight_Avatar-light_ydzzb_23 {
      background: var(--avatar-color-background-brand-secondary);
      color: var(--avatar-color-text-brand-secondary);
    }
  }

  ._spotlight_Avatar-neutral_ydzzb_38 {
    background: var(--avatar-color-background-neutral-primary);
    color: var(--avatar-color-text-neutral-primary);
    &._spotlight_Avatar-light_ydzzb_23 {
      background: var(--avatar-color-background-neutral-secondary);
      color: var(--avatar-color-text-neutral-secondary);
    }
  }

  ._spotlight_Avatar-clickable_ydzzb_47 {
    cursor: pointer;
  }

  ._spotlight_Avatar-default_ydzzb_51 {
    cursor: default;
  }

  ._spotlight_Avatar-size-xs_ydzzb_55 {
    width: var(--avatar-size-primary);
    height: var(--avatar-size-primary);
    font-size: var(--avatar-text-size-primary);
  }

  ._spotlight_Avatar-size-sm_ydzzb_61 {
    width: var(--avatar-size-secondary);
    height: var(--avatar-size-secondary);
    font-size: var(--avatar-text-size-secondary);
  }

  ._spotlight_Avatar-size-md_ydzzb_67 {
    width: var(--avatar-size-tertiary);
    height: var(--avatar-size-tertiary);
    font-size: var(--avatar-text-size-tertiary);
  }

  ._spotlight_Avatar-size-lg_ydzzb_73 {
    width: var(--avatar-size-quaternary);
    height: var(--avatar-size-quaternary);
    font-size: var(--avatar-text-size-tertiary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Badge_znp0b_2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--badge-text-weight-primary);
    border-radius: var(--badge-border-radius-primary);
    box-sizing: border-box;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
  }
  ._spotlight_Badge-light_znp0b_13 {
    background: var(--badge-color-background-secondary);
    color: var(--badge-color-text-secondary);
  }
  ._spotlight_Badge-heavy_znp0b_17 {
    background: var(--badge-color-background-primary);
    color: var(--badge-color-text-primary);
  }

  ._spotlight_Badge-md_znp0b_22 {
    min-width: var(--badge-size-min-width-primary);
    padding: var(--badge-space-edge-to-element-vertical-primary)
      var(--badge-space-edge-to-element-horizontal-primary);
    font-size: var(--badge-text-size-primary);
    line-height: var(--badge-text-size-primary);
  }
  ._spotlight_Badge-sm_znp0b_29 {
    min-width: var(--badge-size-min-width-secondary);
    padding: var(--badge-space-edge-to-element-vertical-secondary)
      var(--badge-space-edge-to-element-horizontal-secondary);
    font-size: var(--badge-text-size-secondary);
    line-height: var(--badge-text-line-height-secondary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Chip_5ghmx_2 {
    display: flex;
    align-items: center;
    border-radius: var(--chip-border-radius-primary);
    border: var(--chip-border-weight-primary) solid
      var(--chip-color-border-primary);
    background: var(--chip-color-background-primary);
    color: var(--chip-color-text-primary);
    font-size: var(--chip-label-text-size-primary);
    font-weight: var(--text-weight-label-xs);
    line-height: var(--chip-label-text-line-height-primary);
    max-width: 100%;
    min-width: 0;
    width: fit-content;
  }
  ._spotlight_Chip-sm_5ghmx_17 {
    padding: var(--chip-space-edge-to-element-vertical-primary)
      var(--chip-space-edge-to-element-horizontal-secondary)
      var(--chip-space-edge-to-element-vertical-primary)
      var(--chip-space-edge-to-element-horizontal-primary);
  }
  ._spotlight_Chip-xs_5ghmx_23 {
    padding: var(--chip-space-edge-to-element-vertical-secondary)
      var(--chip-space-edge-to-element-horizontal-tertiary)
      var(--chip-space-edge-to-element-vertical-secondary)
      var(--chip-space-edge-to-element-horizontal-secondary);
  }

  ._spotlight_Chip_5ghmx_2[role='button'] {
    cursor: pointer;
  }

  ._spotlight_Chip-dismissible_5ghmx_34 {
    font-weight: var(--text-weight-label-sm-strong);
  }

  ._spotlight_Chip-dismiss_5ghmx_34 {
    display: flex;
    width: var(--size-icon-xxs);
    height: var(--size-icon-xxs);
    justify-content: center;
    align-items: center;
    gap: var(--chip-gap-sm);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-size: var(--chip-text-size-md);
    line-height: 1;
    align-self: center;
  }

  ._spotlight_Chip-dismiss_5ghmx_34 > * {
    display: flex;
    height: var(--chip-icon-size-sm);
    padding: var(--space-padding-vertical-square)
      var(--space-padding-horizontal-square);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--chip-gap-md);
    flex: 1 0 0;
    aspect-ratio: 5/4;
    font-size: 1em;
    width: 100%;
    line-height: 1;
  }

  ._spotlight_Chip_5ghmx_2[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  ._spotlight_ChipIcon_5ghmx_75 {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 1em;
    width: 1em;
  }

  ._spotlight_ChipIconWrapper_5ghmx_84 {
    width: var(--chip-icon-size-md);
    height: var(--chip-icon-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  ._spotlight_ChipStatusCircle_5ghmx_93 {
    display: inline-block;
    width: var(--chip-icon-size-sm);
    height: var(--chip-icon-size-sm);
    border-radius: 50%;
    background: var(--color-content-neutral-primary);
    vertical-align: middle;
  }

  ._spotlight_ChipStatusCircle_5ghmx_93._selected_5ghmx_102 {
    background: var(--chip-color-text-primary);
    font-size: var(--chip-label-text-size-primary, 14px);
    font-style: normal;
    font-weight: var(--chip-label-text-weight-primary, 700);
    line-height: var(
      --chip-label-text-line-height-primary,
      20px
    ); /* 142.857% */
  }

  ._spotlight_Chip-label_5ghmx_113 {
    display: flex;
    padding: 0px var(--chip-label-space-edge-to-element-horizontal-secondary)
      0px var(--chip-label-space-edge-to-element-horizontal-primary);
    justify-content: center;
    align-items: center;
  }

  ._spotlight_Chip-content_5ghmx_121 {
    display: flex;
    align-items: center;
  }

  ._spotlight_ChipAvatar_5ghmx_126 span {
    font-size: var(--chip-text-size-sm);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  ._spotlight_ChipAvatar_5ghmx_126 img {
    width: var(--chip-icon-size-md);
    height: var(--chip-icon-size-md);
    object-fit: contain;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: block;
  }

  ._spotlight_ChipAvatar_5ghmx_126 [class*='MuiAvatar-root'] {
    width: var(--chip-icon-size-md);
    height: var(--chip-icon-size-md);
    min-width: var(--chip-icon-size-md);
    min-height: var(--chip-icon-size-md);
    max-width: var(--chip-icon-size-md);
    max-height: var(--chip-icon-size-md);
    font-size: var(--chip-text-size-sm);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0;
  }
}
@layer spotlight-ui.components {
  ._spotlight_SelectInputActions_actions_1wzqk_2 {
    position: sticky;
    z-index: 2;
    background: var(--input-color-background-primary);
    top: 0;
    display: flex;
    padding: var(--space-md) var(--space-lg);
    justify-content: space-between;
    align-self: stretch;
    border-radius: var(--border-radius-none);
    border-bottom: var(--border-weight-default) solid
      var(--color-border-primary);
  }

  ._spotlight_SelectInputActions_clear_1wzqk_16 {
    margin-left: auto;
  }
}
@layer spotlight-ui.components {
  ._spotlight_MultiSelect_psgo9_2 {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
    ._spotlight_MultiSelect_trigger_psgo9_6._spotlight_Select-readonly_psgo9_6 {
      cursor: default;
      border-radius: var(--input-border-radius-primary);
      border: var(--input-border-weight-primary) solid
        var(--input-color-border-read-only-primary);
      background: var(--input-color-background-read-only-primary);
      & svg {
        color: var(--input-color-text-primary);
      }
    }
  }

  ._spotlight_MultiSelect_trigger_psgo9_6 {
    display: flex;
    align-items: center;
    padding-left: var(--input-space-edge-to-element-horizontal-primary);
    box-sizing: border-box;
    border-radius: var(--input-border-radius-primary);
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);
    background: var(--input-color-background-primary);
  }

  ._spotlight_MultiSelect_trigger_psgo9_6._Spotlight_Select-md_psgo9_29 {
    min-height: 40px;
  }

  ._spotlight_MultiSelect_trigger_psgo9_6._Spotlight_Select-sm_psgo9_33 {
    min-height: 36px;
  }

  ._spotlight_MultiSelect_marker_psgo9_37 {
    display: flex;
    align-items: center;
    width: 12px;
    height: 12px;
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    margin-left: auto;
  }

  ._value_psgo9_47 {
    flex: 1 0 0;
    text-align: left;
  }

  ._spotlight_MultiSelect_popover_psgo9_52 {
    width: var(--trigger-width);
    border-radius: var(--input-border-radius-primary);
    border: var(--border-weight-default) solid
      var(--input-color-border-secondary);
    background: var(--input-color-background-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  ._spotlight_MultiSelect_list_psgo9_63 {
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-secondary);
    overflow: auto;
    flex: 1;
    outline: none;
  }

  ._spotlight_MultiSelect_input_psgo9_73 {
    flex: 1 1 0;
    pointer-events: auto;
    cursor: pointer;
    height: 100%;
    background: transparent;
    border: var(--border-weight-none);
    position: relative;
  }

  ._spotlight_MultiSelect_input_psgo9_73._Spotlight_Select-md_psgo9_29 {
    min-height: 40px;
  }

  ._spotlight_MultiSelect_input_psgo9_73._Spotlight_Select-sm_psgo9_33 {
    min-height: 36px;
  }

  ._spotlight_MultiSelect_optionChips_psgo9_91 {
    display: flex;
    flex-wrap: wrap;
    margin-left: var(--input-space-element-to-element-horizontal-primary);
    margin-top: var(--input-space-edge-to-element-vertical-secondary);
    margin-bottom: var(--input-space-edge-to-element-vertical-secondary);
    gap: var(--input-space-element-to-element-horizontal-primary);
    align-items: center;
  }

  ._spotlight_MultiSelect_overflowBadge_psgo9_101 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--badge-text-weight-primary);
    border-radius: var(--badge-border-radius-primary);
    box-sizing: border-box;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    background: var(--badge-color-background-primary);
    color: var(--badge-color-text-primary);
    min-width: var(--badge-size-min-width-secondary);
    padding: var(--badge-space-edge-to-element-vertical-secondary)
      var(--badge-space-edge-to-element-horizontal-secondary);
    font-size: var(--badge-text-size-secondary);
    line-height: var(--badge-text-line-height-secondary);
    margin-left: var(--input-space-element-to-element-horizontal-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_ToggleButton_xu3tw_2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--toggle-button-color-text-primary);
    border-radius: var(--button-border-radius-primary);
    background: var(--toggle-button-color-background-primary);
    border-width: var(--toggle-button-border-weight-primary);
    border-style: solid;
  }

  ._spotlight_ToggleButton_sm_xu3tw_13 {
    display: inline-flex;
    padding: var(--button-space-edge-to-element-vertical-primary)
      var(--button-space-edge-to-element-horizontal-primary);
    gap: var(--button-space-element-to-element-horizontal-primary);
  }

  ._spotlight_ToggleButton_xs_xu3tw_20 {
    padding: var(--button-space-edge-to-element-vertical-quaternary)
      var(--button-space-edge-to-element-horizontal-tertiary);
    gap: var(--button-space-element-to-element-horizontal-tertiary);
    border-radius: var(--button-border-radius-secondary);
  }

  ._spotlight_ToggleButton_xs_xu3tw_20 {
    padding: var(--button-space-edge-to-element-vertical-quaternary)
      var(--button-space-edge-to-element-horizontal-tertiary);
    gap: var(--button-space-element-to-element-horizontal-tertiary);
    border-radius: var(--button-border-radius-secondary);
  }

  ._spotlight_ToggleButton_ghost_xu3tw_34 {
    border-color: var(--toggle-button-color-background-primary);
  }

  ._spotlight_ToggleButton_outlined_xu3tw_38 {
    border-color: var(--toggle-button-color-border-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_counter_1vt6g_2 {
    color: var(--color-text-primary);
    display: flex;
    gap: var(--input-space-element-to-element-horizontal-quaternary);

    font-variant-numeric: lining-nums tabular-nums;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-xs);
    font-style: normal;
    font-weight: var(--text-weight-body-xs);
    line-height: 16px;
  }
}
@layer spotlight-ui.components {
  ._card_1m6yu_2 {
    align-items: flex-start;
    border-radius: var(--container-border-radius-primary);
    border: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
    background: var(--container-color-background-primary);
    display: inline-flex;
    flex-direction: column;
    gap: var(--container-space-element-to-element-vertical-primary);
    padding: var(--container-space-edge-to-content-horizontal-secondary);

    &._fullWidth_1m6yu_13 {
      display: flex;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_ChipGroup_oeof9_2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
    min-height: 2rem;
  }
}
@layer spotlight-ui.components {
  ._spotlight_FeaturedIcon_sr8nm_2 {
    display: inline-flex;
    align-items: center;
    border-radius: var(--border-radius-full);
  }

  ._spotlight_FeaturedIcon_sr8nm_2._sm_sr8nm_8 {
    padding: var(--featured-icon-space-edge-to-element-secondary);
  }

  ._spotlight_FeaturedIcon_sr8nm_2._md_sr8nm_12 {
    padding: var(--featured-icon-space-edge-to-element-tertiary);
  }

  ._spotlight_FeaturedIcon_sr8nm_2._lg_sr8nm_16 {
    padding: var(--space-lg);
  }

  ._spotlight_FeaturedIcon_sr8nm_2._spotlight_FeaturedIcon-info_sr8nm_20,
  ._spotlight_FeaturedIcon_sr8nm_2._spotlight_FeaturedIcon-positive_sr8nm_21,
  ._spotlight_FeaturedIcon_sr8nm_2._spotlight_FeaturedIcon-neutral_sr8nm_22,
  ._spotlight_FeaturedIcon_sr8nm_2._spotlight_FeaturedIcon-critical_sr8nm_23,
  ._spotlight_FeaturedIcon_sr8nm_2._spotlight_FeaturedIcon-attention_sr8nm_24 {
    background: var(--color-background-semantic-secondary);
    color: var(--color-content-semantic-tertiary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_LabelValuePair_1u456_2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    & ._spotlight_LabelValuePair-label_1u456_7 {
      color: var(--color-text-secondary);
    }

    & ._spotlight_LabelValuePair-value_1u456_11 {
      background: none;
      border: none;
      color: var(--color-text-primary);
      padding: 0;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight-container_u0eea_2 {
    width: 100%;
    margin: 0.5rem 0;
  }

  ._spotlight-label-row_u0eea_7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
    ._spotlight-label-row-value_u0eea_14 {
      color: var(--color-text-primary);
      font-variant-numeric: lining-nums tabular-nums;
      font-family: var(--text-font-san-serif);
      font-size: var(--progress-bar-label-text-size-primary);
      font-style: normal;
      font-weight: var(--progress-bar-label-text-weight-primary);
      line-height: var(--progress-bar-label-text-line-height);
    }
  }

  ._spotlight-bar-background_u0eea_25 {
    width: 100%;
    height: var(--progress-bar-height-primary);
    background: var(--progress-bar-track-color-background-primary);
    border-radius: var(--progress-bar-border-radius-secondary);
    overflow: hidden;
  }

  ._spotlight-bar-fill_u0eea_33 {
    height: 100%;
    background: var(--progress-bar-color-content-gradient);
    border-radius: var(--progress-bar-border-radius-primary);
    transition: width 0.3s;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Progress-Dot_rw1vl_2 {
    border-radius: var(--progress-bar-border-radius-primary);
    height: var(--progress-dot-size-primary);
    width: 100%;

    &._completed_rw1vl_7 {
      background: var(--progress-bar-status-color-background-complete);
    }
    &._in-progress_rw1vl_10 {
      background: var(--progress-bar-status-color-background-in-progress);
    }
    &._not-started_rw1vl_13 {
      background: var(--progress-bar-status-color-background-not-started);
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_ProgressStepBar_1bca5_2 {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Status-Circle_1xvtt_2 {
    width: var(--tag-status-circle-size);
    height: var(--tag-status-circle-size);
    border-radius: var(--border-radius-full);
    background: var(--tag-color-content-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_SelectInput_zlnbv_2 {
    display: inline-flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
    ._spotlight_SelectInput_trigger_zlnbv_6._spotlight_Select-readonly_zlnbv_6 {
      cursor: default;
      border-radius: var(--input-border-radius-primary);
      border: var(--input-border-weight-primary) solid
        var(--input-color-border-read-only-primary);
      background: var(--input-color-background-read-only-primary);
      & svg {
        color: var(--input-color-text-primary);
      }
    }
  }

  ._spolight_SelectInputField-full-width_zlnbv_18 {
    display: flex;
  }

  ._spotlight_SelectInput_trigger_zlnbv_6 {
    height: 42px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--input-border-radius-primary);
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);
    background: var(--input-color-background-primary);
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    gap: var(--input-space-element-to-element-horizontal-primary);
  }

  ._spotlight_SelectInput_marker_zlnbv_36 {
    display: flex;
    height: 12px;
    width: 12px;
    padding: 3px;
  }

  ._spotlight_SelectInput_value_zlnbv_43 {
    flex: 1 0 0;
    text-align: left;
  }

  ._spotlight_SelectInput_popover_zlnbv_48 {
    border-radius: var(--input-border-radius-primary);
    border: var(--border-weight-default) solid
      var(--input-color-border-secondary);
    background: var(--input-color-background-primary);
    width: var(--trigger-width);
    overflow: auto;
    padding: var(--space-xs);
    gap: 10px;
  }

  ._spotlight_SelectInput_list_zlnbv_59 {
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Pagination-container_13odk_2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--pagination-space-element-to-element-primary);
    width: 100%;
    padding: var(--space-xs) var(--space-none);
  }

  ._spotlight_Pagination_13odk_2 {
    display: flex;
    gap: var(--pagination-control-space-element-to-element-horizontal-primary);
    align-items: center;
  }

  ._spotlight_Pagination-button_13odk_18 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--nav-pagination-number-size-width-primary);
    min-height: var(--nav-pagination-number-size-height-primary);
    background: var(--pagination-number-color-background-primary);
    border: none;
    color: var(--pagination-number-color-text-primary);
    border-radius: var(--nav-pagination-number-border-radius-primary);
    cursor: pointer;
    transition:
      background var(--pagination-transition-duration-primary),
      border var(--pagination-transition-duration-primary);
  }

  ._spotlight_Pagination-button_13odk_18:disabled {
    opacity: var(--pagination-opacity-disabled); /* Disabled button opacity */
    cursor: not-allowed;
  }

  ._spotlight_Pagination-button-expanded_13odk_39 {
    display: flex;
    align-items: center;
    padding: var(--button-space-edge-to-element-vertical-primary)
      var(--button-space-edge-to-element-horizontal-primary);
    border-radius: var(--button-border-radius-primary);
    border: var(--button-border-weight-primary) solid
      var(--button-color-border-primary);
    background: var(--button-color-background-secondary);
    gap: var(--pagination-button-gap-primary); /* Button element gap */
  }

  ._spotlight_Pagination-button-expanded-nav_13odk_51 {
    /* border-radius: var(--button-border-radius-primary);
  border: var(--button-border-weight, 1px) solid
    var(--color-border-interactive-secondary);
  background: var(--color-background-interactive-secondary); */
  }

  ._spotlight_Pagination-page-size-section_13odk_58 {
    display: flex;
    height: var(--pagination-page-size-height); /* Page size section height */
    align-items: center;
    min-width: var(
      --pagination-page-size-min-width
    ); /* Page size section min-width */
    color: var(--color-text-secondary);
    gap: var(--space-lg);
  }

  ._spotlight_Pagination-page-size-listbox_13odk_69 {
    max-height: var(--pagination-listbox-max-height); /* Listbox max height */
    overflow-y: auto;
    border-radius: var(--input-select-option-border-radius-primary);
    background: var(--input-select-option-color-background-primary);
    padding: var(--input-select-option-space-edge-to-element-vertical-secondary)
      var(--input-select-option-space-edge-to-element-horizontal-secondary);
    display: flex;
    flex-direction: column;
    gap: var(
      --input-select-option-space-element-to-element-horizontal-secondary
    );
    z-index: 10;
  }

  ._spotlight_Pagination-dots_13odk_84 {
    padding: 0 var(--button-space-edge-to-element-label-horizontal-primary, 2px);
    user-select: none;
  }

  ._spotlight_pagination-selected_13odk_89 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--nav-pagination-number-border-radius-primary);
    background: var(--nav-pagination-number-color-background-primary);
    color: var(--nav-pagination-number-color-text-primary);
  }

  ._spotlight_Pagination-ellipsis-button_13odk_100 {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--button-space-edge-to-element-vertical-quaternary, 4px)
      var(--button-space-edge-to-element-horizontal-tertiary, 4px);
    border-radius: var(--button-border-radius-primary, 8px);
    transition: background var(--pagination-transition-duration-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ._spotlight_Pagination-ellipsis-button_13odk_100:hover {
    background: var(--pagination-number-color-background-primary);
  }

  ._spotlight_Pagination-ellipsis-button-active_13odk_117 {
    background: var(
      --color-light-background-interactive-info-secondary,
      #e6f0ff
    );
    color: var(--color-text-info-tertiary, #1e55e9);
  }

  ._spotlight_Pagination-ellipsis-popover_13odk_125 {
    display: flex;
    min-width: var(
      --pagination-ellipsis-popover-min-width
    ); /* Ellipsis popover min-width */
    max-width: var(
      --pagination-ellipsis-popover-max-width
    ); /* Ellipsis popover max-width */
    max-height: var(
      --pagination-ellipsis-popover-max-height
    ); /* Ellipsis popover max-height */
    overflow-y: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--input-border-radius-primary);
    background: var(--input-color-background-primary);
    padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-xl);
    border: var(--border-weight-default) solid
      var(--input-color-border-secondary);
    cursor: pointer;
  }

  ._spotlight_Pagination-ellipsis-listbox_13odk_148 {
    max-height: var(
      --pagination-ellipsis-popover-max-height
    ); /* Ellipsis listbox max-height */
    line-height: var(
      --pagination-ellipsis-listbox-line-height
    ); /* Ellipsis listbox line-height */
    border-radius: var(--input-select-option-border-radius-primary);
    background: var(--input-select-option-color-background-primary);
    padding: var(--input-select-option-space-edge-to-element-vertical-primary)
      var(--input-select-option-space-edge-to-element-horizontal-primary);
    color: var(--input-select-option-color-text-primary);
    &:focus {
      outline: none;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_gridtable_17zyv_2 {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Selection column styles using design system tokens */
  ._spotlight_gridtable__select-column_17zyv_11 {
    width: var(--space-3xl);
    min-width: var(--space-3xl);
    max-width: var(--space-3xl);
    text-align: center;
    vertical-align: middle;
    padding: var(--space-md);
  }

  ._spotlight_gridtable__select-column-header_17zyv_20 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    min-height: var(--space-3xl);
  }

  ._spotlight_gridtable__select-column-cell_17zyv_29 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    min-height: var(--space-lg);
  }

  ._spotlight_gridtable__filter-container_17zyv_38 {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--table-filter-margin-bottom);
  }

  ._spotlight_gridtable__search-input_17zyv_44 {
    padding: var(--table-padding-md) var(--table-padding-lg);
    border: var(--table-border-weight-primary) solid
      var(--table-color-border-primary);
    border-radius: var(--table-space-border-radius-primary);
    font-size: var(--font-size-body);
    min-width: var(--table-search-min-width-lg);
    background-color: var(--table-color-background-interactive-quinary);
    transition: var(--table-transition-all);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-medium);
    color: var(--table-color-text-primary);
  }

  ._spotlight_gridtable__search-input_17zyv_44:focus {
    outline: none;
    border-color: var(--table-color-border-brand-primary);
    box-shadow: var(--table-focus-box-shadow);
  }

  ._spotlight_gridtable__search-input_17zyv_44::placeholder {
    color: var(--table-color-text-secondary);
  }

  ._spotlight_gridtable__wrapper_17zyv_68 {
    overflow-x: auto;
    border-radius: var(--table-space-border-radius-primary);
    border: var(--table-border-weight-primary) solid
      var(--table-color-border-primary);
    background-color: var(--table-color-background-primary);
    box-shadow: var(--table-box-shadow);
  }

  ._spotlight_gridtable__table_17zyv_77 {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body-sm);
    background-color: var(--table-color-background-primary);
    font-family: var(--text-font-san-serif);
    color: var(--color-text-primary);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--spotlight_elevation-01);
  }

  ._spotlight_gridtable__header_17zyv_89 {
    background-color: var(--color-background-secondary);
    border-bottom: var(--border-weight-default) solid
      var(--color-border-primary);
  }

  ._spotlight_gridtable__header--sticky_17zyv_95 {
    position: sticky;
    top: 0;
    z-index: var(--table-header-z-index);
  }

  ._spotlight_gridtable__header-row_17zyv_101 {
    height: var(--table-header-row-height);
  }

  ._spotlight_gridtable__header-cell_17zyv_105 {
    padding: var(--table-header-space-edge-to-element-vertical-primary)
      var(--table-header-space-edge-to-element-horizontal-primary)
      var(--table-header-space-edge-to-element-vertical-primary)
      var(--table-header-space-edge-to-element-horizontal-secondary);
    text-align: left;
    font-weight: var(--text-weight-medium);
    font-size: var(--font-size-body-sm);
    color: var(--color-text-primary);
    background-color: var(--color-background-secondary);
    border-bottom: var(--border-weight-default) solid
      var(--color-border-primary);
    border-right: var(--table-border-weight-primary) solid
      var(--table-color-border-primary);
    white-space: nowrap;
    font-family: var(--text-font-san-serif);
    transition: background-color 0.2s ease;
  }

  ._spotlight_gridtable__header-cell_17zyv_105:last-child {
    border-right: none;
  }

  ._spotlight_gridtable__header-cell--sortable_17zyv_128 {
    cursor: pointer;
    user-select: none;
  }

  ._spotlight_gridtable__header-cell_17zyv_105:hover {
    background-color: var(--color-background-interactive-secondary);
  }

  ._spotlight_gridtable__header-cell--sortable_17zyv_128:hover {
    background-color: var(--color-background-interactive-secondary);
  }

  ._spotlight_gridtable__header-cell--sortable_17zyv_128:focus {
    outline: var(--border-weight-200) solid var(--color-border-focus);
    outline-offset: -2px;
  }

  ._spotlight_gridtable__header-content_17zyv_146 {
    display: flex;
    align-items: center;
    gap: var(--table-header-content-gap);
  }

  ._spotlight_gridtable__header-text_17zyv_152 {
    flex: 1;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body-sm);
    color: var(--table-header-color-text-primary);
    line-height: var(--table-text-line-height-primary);
    font-family: var(--font-family-primary);
  }

  ._spotlight_gridtable__sort-icon_17zyv_161 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--table-padding-md);
    border-radius: var(--table-sort-icon-border-radius);
    color: var(--table-color-text-primary);
    background-color: transparent;
    transition: var(--table-transition-background);
  }

  ._spotlight_gridtable__sort-icon--unsorted_17zyv_172 {
    opacity: var(--table-unsorted-icon-opacity);
  }

  ._spotlight_gridtable__sort-icon_17zyv_161:hover {
    background-color: var(--table-sorticon-color-background-hover);
  }

  ._spotlight_gridtable__body_17zyv_180 {
    background-color: var(--color-background-primary);
  }

  ._spotlight_gridtable__row_17zyv_184 {
    border-bottom: var(--border-weight-default) solid
      var(--color-border-primary);
    min-height: var(--table-body-row-min-height);
    transition: background-color 0.2s ease;
  }

  ._spotlight_gridtable__row_17zyv_184:hover {
    background-color: var(--color-background-interactive-secondary);
  }

  ._spotlight_gridtable__row_17zyv_184:last-child {
    border-bottom: none;
  }

  /* Striped rows option */
  ._spotlight_gridtable__row--striped_17zyv_200:nth-child(even) {
    background-color: var(--color-background-secondary);
  }

  ._spotlight_gridtable__row--striped_17zyv_200:nth-child(even):hover {
    background-color: var(--color-background-interactive-secondary);
  }

  ._spotlight_gridtable__cell_17zyv_208 {
    padding: var(--table-body-space-edge-to-element-vertical-primary)
      var(--table-body-space-edge-to-element-horizontal-primary)
      var(--table-body-space-edge-to-element-vertical-primary)
      var(--table-body-space-edge-to-element-horizontal-secondary);
    color: var(--color-text-primary);
    vertical-align: center;
    border-right: var(--table-border-weight-primary) solid
      var(--table-color-border-primary);
    border-bottom: var(--border-weight-default) solid
      var(--color-border-primary);
    font-size: var(--font-size-body);
    line-height: var(--table-text-line-height-secondary);
    font-family: var(--text-font-san-serif);
    min-height: var(--table-body-row-min-height);
    transition: background-color 0.2s ease;
  }

  ._spotlight_gridtable__cell_17zyv_208:focus {
    outline: var(--border-weight-200) solid var(--color-border-focus);
    outline-offset: -2px;
  }

  ._spotlight_gridtable__cell_17zyv_208:last-child {
    border-right: none;
  }

  ._spotlight_gridtable__pagination_17zyv_235 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--table-pagination-gap);
    padding: var(--table-padding-xs) 0;
    height: var(--table-pagination-container-height);
  }

  ._spotlight_gridtable__pagination-info_17zyv_245 {
    color: var(--table-color-text-secondary);
    font-size: var(--font-size-body);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--table-text-line-height-secondary);
  }

  /* Responsive design */
  @media (max-width: 768px) {
    ._spotlight_gridtable__search-input_17zyv_44 {
      min-width: var(--table-search-min-width-md);
    }

    ._spotlight_gridtable__pagination_17zyv_235 {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
    }

    ._spotlight_gridtable__header-cell_17zyv_105,
    ._spotlight_gridtable__cell_17zyv_208 {
      padding: var(--table-padding-md) var(--table-padding-lg);
    }

    ._spotlight_gridtable__select-column_17zyv_11 {
      width: var(--space-lg);
      min-width: var(--space-lg);
      max-width: var(--space-lg);
      padding: var(--space-xs);
    }
  }

  @media (max-width: 480px) {
    ._spotlight_gridtable__header-cell_17zyv_105,
    ._spotlight_gridtable__cell_17zyv_208 {
      padding: var(--table-padding-sm) var(--table-padding-md);
      font-size: var(--font-size-body-sm);
    }

    ._spotlight_gridtable__search-input_17zyv_44 {
      min-width: var(--table-search-min-width-sm);
    }
  }

  /* Scrollbar styles to match Figma design */
  ._spotlight_gridtable__wrapper_17zyv_68::-webkit-scrollbar {
    width: var(--table-scrollbar-width);
    height: var(--table-scrollbar-height);
  }

  ._spotlight_gridtable__wrapper_17zyv_68::-webkit-scrollbar-track {
    background: var(--table-color-background-secondary);
    border-radius: var(--table-space-border-radius-primary);
  }

  ._spotlight_gridtable__wrapper_17zyv_68::-webkit-scrollbar-thumb {
    background: var(--table-color-background-secondary);
    border-radius: var(--table-space-border-radius-primary);
  }

  ._spotlight_gridtable__wrapper_17zyv_68::-webkit-scrollbar-thumb:hover {
    background: var(--table-color-border-primary);
  }

  /* Size system using Spotlight tokens */
  ._spotlight_gridtable__header-cell--xs_17zyv_311,
  ._spotlight_gridtable__cell--xs_17zyv_312 {
    padding: var(--space-xxs) var(--space-xs);
    font-size: var(--text-size-body-xxs);
    line-height: var(--text-line-height-body-xxs);
    min-height: var(--space-xs);
  }

  ._spotlight_gridtable__header-cell--sm_17zyv_319,
  ._spotlight_gridtable__cell--sm_17zyv_320 {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-size-body-xs);
    line-height: var(--text-line-height-body-xs);
    min-height: var(--space-sm);
  }

  ._spotlight_gridtable__header-cell--md_17zyv_327,
  ._spotlight_gridtable__cell--md_17zyv_328 {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-size-body-sm);
    line-height: var(--text-line-height-body-sm);
    min-height: var(--space-md);
  }

  ._spotlight_gridtable__header-cell--lg_17zyv_335,
  ._spotlight_gridtable__cell--lg_17zyv_336 {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-size-body-base);
    line-height: var(--text-line-height-body-base);
    min-height: var(--space-lg);
  }

  ._spotlight_gridtable__header-cell--xl_17zyv_343,
  ._spotlight_gridtable__cell--xl_17zyv_344 {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--text-size-body-lg);
    line-height: var(--text-line-height-body-lg);
    min-height: var(--space-xl);
  }

  /* Selection column adjustments based on size */
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__header-cell--xs_17zyv_311,
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__cell--xs_17zyv_312 {
    width: var(--space-lg);
    min-width: var(--space-lg);
    max-width: var(--space-lg);
    padding: var(--space-xxs);
  }

  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__header-cell--sm_17zyv_319,
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__cell--sm_17zyv_320 {
    width: var(--space-xl);
    min-width: var(--space-xl);
    max-width: var(--space-xl);
    padding: var(--space-xs);
  }

  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__header-cell--md_17zyv_327,
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__cell--md_17zyv_328 {
    width: var(--space-2xl);
    min-width: var(--space-2xl);
    max-width: var(--space-2xl);
    padding: var(--space-sm);
  }

  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__header-cell--lg_17zyv_335,
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__cell--lg_17zyv_336 {
    width: var(--space-3xl);
    min-width: var(--space-3xl);
    max-width: var(--space-3xl);
    padding: var(--space-md);
  }

  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__header-cell--xl_17zyv_343,
  ._spotlight_gridtable__select-column_17zyv_11._spotlight_gridtable__cell--xl_17zyv_344 {
    width: var(--space-4xl);
    min-width: var(--space-4xl);
    max-width: var(--space-4xl);
    padding: var(--space-lg);
  }

  /* Theme support */
  ._spotlight_theme-dark_17zyv_393 ._spotlight_gridtable__table_17zyv_77 {
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
  }

  ._spotlight_theme-dark_17zyv_393 ._spotlight_gridtable__header_17zyv_89 {
    background-color: var(--color-background-secondary);
  }

  ._spotlight_theme-dark_17zyv_393 ._spotlight_gridtable__header-cell_17zyv_105 {
    background-color: var(--color-background-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
  }

  ._spotlight_theme-dark_17zyv_393 ._spotlight_gridtable__row_17zyv_184:hover {
    background-color: var(--color-background-interactive-secondary);
  }

  ._spotlight_theme-dark_17zyv_393 ._spotlight_gridtable__cell_17zyv_208 {
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
  }

  /* Interactive states */
  ._spotlight_interactive_17zyv_418 ._spotlight_gridtable__row_17zyv_184 {
    transition: all var(--transition-duration) ease;
  }

  ._spotlight_interactive_17zyv_418 ._spotlight_gridtable__row_17zyv_184:hover {
    background-color: var(--color-background-interactive-secondary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Tag_19a7f_2 {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    color: var(--tag-color-text-primary);
    text-align: center;
    font-family: var(--text-font-san-serif);
    font-style: normal;
  }

  ._spotlight_Tag_19a7f_2._sm_19a7f_12 {
    padding: var(--tag-space-edge-to-element-vertical-secondary)
      var(--tag-space-edge-to-element-horizontal-secondary);
    gap: var(--tag-space-element-to-element-horizontal-secondary);
    font-size: var(--text-size-label-xs);
    font-weight: var(--text-weight-label-xs-strong);
    line-height: var(--text-line-height-label-xs);
    border-radius: var(--tag-border-radius-secondary);
  }

  ._spotlight_Tag-status_19a7f_22 {
    color: var(--color-text-primary);
    border: var(--tag-border-weight-primary) solid
      var(--tag-color-border-secondary);
    background: var(--tag-color-background-secondary);
    &._sm_19a7f_12 {
      padding: var(--tag-space-edge-to-element-vertical-secondary)
        var(--tag-space-edge-to-element-horizontal-tertiary);
    }
  }

  ._spotlight_Tag-default_19a7f_33 {
    border: var(--tag-border-weight-primary) solid
      var(--tag-color-border-primary);
    background: var(--tag-color-background-primary);
    & svg {
      color: var(--tag-color-content-primary);
    }
  }

  ._spotlight_Tag_19a7f_2._md_19a7f_42 {
    padding: var(--tag-space-edge-to-element-vertical-primary)
      var(--tag-space-edge-to-element-horizontal-primary);
    gap: var(--tag-space-element-to-element-horizontal-primary);
    font-size: var(--text-size-label-sm);
    font-weight: var(--text-weight-label-sm);
    line-height: var(--text-line-height-label-sm);
    border-radius: var(--tag-border-radius-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_CountryTag_b8dzw_2 {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    color: var(--tag-color-text-primary);
    text-align: center;
    font-family: var(--text-font-san-serif);
    font-style: normal;
    border: var(--tag-border-weight-primary) solid
      var(--tag-color-border-primary);
    background: transparent;
    gap: var(--tag-space-element-to-element-horizontal-primary);
    border: none;
  }

  ._spotlight_CountryTag_b8dzw_2._sm_b8dzw_17 {
    padding: var(--tag-space-edge-to-element-vertical-secondary)
      var(--tag-space-edge-to-element-horizontal-secondary);
    gap: var(--tag-space-element-to-element-horizontal-secondary);
    font-size: var(--text-size-label-xs);
    font-weight: var(--text-weight-label-xs-strong);
    line-height: var(--text-line-height-label-xs);
    border-radius: var(--tag-border-radius-secondary);
  }

  ._spotlight_CountryTag_b8dzw_2._md_b8dzw_27 {
    padding: var(--tag-space-edge-to-element-vertical-primary)
      var(--tag-space-edge-to-element-horizontal-primary);
    gap: var(--tag-space-element-to-element-horizontal-primary);
    font-size: var(--text-size-label-sm);
    font-weight: var(--text-weight-label-sm);
    line-height: var(--text-line-height-label-sm);
    border-radius: var(--tag-border-radius-primary);
  }

  ._spotlight_CountryTag_b8dzw_2._lg_b8dzw_37 {
    padding: var(--tag-space-edge-to-element-vertical-primary)
      var(--tag-space-edge-to-element-horizontal-primary);
    gap: var(--tag-space-element-to-element-horizontal-primary);
    font-size: var(--text-size-label-md);
    font-weight: var(--text-weight-label-md);
    line-height: var(--text-line-height-label-md);
    border-radius: var(--tag-border-radius-primary);
  }

  ._spotlight_CountryTag-text_b8dzw_47 {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-interactive-neutral-secondary);
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-xs);
    font-style: normal;
    font-weight: var(--text-weight-body-xs);
    line-height: var(--text-line-height-body-xs); /* 166.667% */
  }

  ._spotlight_CountryTag_b8dzw_2._text-left_b8dzw_58 {
    flex-direction: row-reverse;
  }

  ._spotlight_CountryTag_b8dzw_2._text-right_b8dzw_62 {
    flex-direction: row;
  }

  ._spotlight_CountryTag_b8dzw_2._text-top_b8dzw_66 {
    flex-direction: column-reverse;
  }

  ._spotlight_CountryTag_b8dzw_2._text-bottom_b8dzw_70 {
    flex-direction: column;
  }
}
@layer spotlight-ui.components {
  ._cell_19drk_2 {
    gap: var(--calendar-cell-gap);
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: var(--date-picker-control-size-height-primary);
    border-radius: var(--date-picker-control-border-radius-primary);
    background: var(--date-picker-control-color-background-primary);
    padding: var(--date-picker-control-space-edge-to-element-vertical-primary)
      var(--date-picker-control-space-edge-to-element-horizontal-primary);
    width: var(--date-picker-control-size-width-primary);
    color: var(--date-picker-control-color-text-primary);
    font-variant-numeric: lining-nums tabular-nums;
    font-family: var(--text-font-san-serif);
    font-size: var(--date-picker-control-text-size-primary);
    font-style: normal;
    font-weight: var(--date-picker-control-text-weight-primary);
    line-height: var(--date-picker-control-text-line-height-primary);
    &._disabled_19drk_23 {
      display: none;
    }
  }

  ._unavailable_19drk_28 {
    color: var(--date-picker-control-color-text-primary);
    background: var(--date-picker-control-color-background-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_MonthPicker_picker_1xw7c_2 {
    display: inline-flex;
    flex-direction: column;
    height: var(--month-picker-height);
    align-items: center;
    gap: var(--input-space-element-to-element-horizontal-secondary);
  }

  ._spotlight_MonthPicker_placeholder_1xw7c_10 {
    color: grey;
  }

  ._spotlight_MonthPicker-button_1xw7c_14 {
    align-items: center;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    gap: var(--month-picker-gap-sm);
    text-align: start;
    height: var(--month-picker-height);
    width: 100%;
    font-weight: var(--text-weight-label-base);
    padding: var(--input-space-edge-to-element-vertical-tertiary)
      var(--space-xxs) var(--input-space-edge-to-element-vertical-tertiary)
      var(--input-space-edge-to-element-horizontal-tertiary);
  }

  ._spotlight_MonthPicker-SelectValue_1xw7c_30 {
    flex-grow: 1;
    overflow: hidden;
    width: fit-content;
    color: var(--input-color-text-primary);
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--input-text-size-primary);
    font-style: normal;
    font-weight: var(--input-text-weight-primary);
    line-height: var(--input-text-line-height-primary);
    padding-right: var(--space-xs);

    & svg {
      display: none;
    }
  }

  ._spotlight_MonthPicker-trigger_1xw7c_48 {
    display: flex;
    align-items: center;
    padding: var(--month-picker-padding-sm);
  }

  ._spotlight_MonthPicker_popover_1xw7c_54 {
    align-items: flex-start;
    background: var(--container-color-background-primary);
    border: var(--month-picker-border-weight) solid
      var(--color-border-interactive-tertiary);
    border-radius: var(--input-border-radius, 8px);
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    max-width: 400px;
    min-width: 80px;
    padding: var(--space-xs);
    overflow: auto;
  }

  ._overlay_1xw7c_69 {
    position: fixed;
    inset: 0;
  }

  ._spotlight_MonthPicker_list_1xw7c_74 {
    display: flex;
    width: fit-content;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--input-space-element-to-element-vertical-primary);

    &[data-focused] {
      outline: 0;
      outline-offset: 0;
    }
  }

  ._spotlight_MonthPicker_item_1xw7c_87 {
    max-width: 56px;
    width: 100%;
    justify-content: flex-start;
    display: flex;
    padding: var(
        --date-picker-drawer-month-select-option-space-edge-to-element-vertical-primary
      )
      var(--input-select-option-space-edge-to-element-horizontal-primary);
    gap: var(--space-md);
    border-radius: var(
      --date-picker-drawer-month-select-option-border-radius-primary
    );
    background: var(--input-select-option-color-background-primary);
    color: var(--input-select-option-color-text-primary);
    cursor: pointer;
    font-size: var(--input-select-option-text-size-primary);
    font-style: normal;
    font-weight: var(--input-select-option-text-weight-primary);
    line-height: var(--input-select-option-text-line-height-primary);
    i {
      display: none;
    }

    &[data-hovered] {
      background: var(--color-system-200);
    }

    &[data-pressed] {
      background-color: var(--color-system-200);
    }

    &[data-selected] {
      background-color: var(--color-background-interactive-selected-primary);
      color: var(--color-light-text-interactive-primary);

      i {
        color: var(--input-control-color-content-primary);
        display: block;
      }

      &[data-disabled] {
        color: var(--color-light-text-disabled);
        background-color: var(--color-light-background-disabled);
      }

      ._spotlight_MonthPicker_check-icon_1xw7c_133 svg {
        display: block;
      }
    }

    &[data-disabled] {
      color: var(--color-light-text-disabled);
      background: var(--color-light-background-interactive-secondary);
      cursor: not-allowed;
    }
  }

  ._spotlight_MonthPicker_check-icon_1xw7c_133 {
    min-width: 12px;
  }
}
@layer spotlight-ui.components {
  ._picker_938vj_2 {
    align-items: flex-start;
    border-radius: var(--border-radius-xs);
    background: var(--input-color-background-tertiary);
    display: flex;
    flex-direction: column;
    gap: var(--input-space-element-to-element-horizontal-secondary);
    height: 24px;
    padding: var(--input-space-edge-to-element-vertical-tertiary)
      var(--space-xxs) var(--input-space-edge-to-element-vertical-tertiary)
      var(--input-space-edge-to-element-horizontal-tertiary);
    align-self: stretch;
  }

  ._input_938vj_16 {
    border: none;
    text-overflow: ellipsis;
    outline: none;
    overflow: hidden;
    width: 44px;
    color: var(--input-color-text-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--input-text-size-primary);
    font-style: normal;
    font-weight: var(--input-text-weight-primary);
    line-height: var(--input-text-line-height-primary);
    background: inherit;
  }

  ._group_938vj_31 {
    display: flex;
    align-items: center;
    gap: var(--input-space-element-to-element-horizontal-secondary);
    align-self: stretch;
  }

  ._button_938vj_38 {
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    color: var(--color-content-interactive-secondary);
  }

  ._button_group_938vj_47 {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 24px;
    padding: 0px 3px;
  }
}
@layer spotlight-ui.components {
  ._picker_vxgh6_2 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--month-year-picker-gap);
  }
}
@layer spotlight-ui.components {
  ._calendar_ka32d_2 {
    color: var(--color-text-primary);
    display: inline-flex;
    flex-direction: column;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: var(--text-font-san-serif);
    font-size: var(--date-picker-control-text-font-size);
    font-style: normal;
    font-weight: var(--text-weight-body-base);
    line-height: var(--text-line-height-body-base);
    gap: var(--date-picker-drawer-space-element-to-element-vertical-primary);

    ._header_ka32d_14 {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    ._button_ka32d_20 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-sm) 7px;
      border-radius: var(
        --date-picker-drawer-pagination-control-border-radius-primary
      );
      border: var(--button-border-weight-primary) solid
        var(--date-picker-drawer-pagination-control-color-border-primary);
      background: var(--button-color-background-secondary);
      cursor: pointer;
      gap: var(--button-space-element-to-element-horizontal-primary);
      height: var(--calendar-icon-size-md);
      width: var(--calendar-icon-size-md);
    }
  }
}
@layer spotlight-ui.components {
  ._segment_1tdo7_2 {
    color: var(--color-text-interactive-primary);
    font-variant-numeric: lining-nums tabular-nums;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-base);
    font-style: normal;
    font-weight: var(--text-weight-body-base);
    line-height: var(--text-line-height-body-base);
    overflow: hidden;
    &[data-placeholder] {
      color: grey;
    }
  }

  ._segment_1tdo7_2:focus {
    outline: none;
  }
}
@layer spotlight-ui.components {
  ._wrapper_12lyd_2 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }

  ._dateField-input_12lyd_8 {
    display: flex;
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    color: var(--input-color-text-primary);
    font-size: var(--input-text-size-primary);
    font-weight: var(--input-text-weight-primary);
    line-height: var(--input-text-line-height-primary);
    background: var(--input-color-background-primary);
    border-radius: var(--input-border-radius-primary);
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);

    &._readonly_12lyd_21 {
      background: var(--input-color-background-read-only-primary);
      border: var(--input-border-weight-primary) solid
        var(--input-color-border-read-only-primary);

      color: var(--input-color-text-primary);
      cursor: default;
    }
    &._spotlight_interactive-disabled_12lyd_29:hover {
      cursor: default;
      color: var(--color-dark-text-disabled);
    }
  }
}
@layer spotlight-ui.components {
  ._input_13vu9_2,
  ._input_13vu9_2:focus,
  ._input_13vu9_2:focus-within,
  ._input_13vu9_2:hover {
    border: none;
    padding: 0;
  }

  ._button_13vu9_10 {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--border-radius-xs);
    cursor: pointer;
    display: flex;
    height: var(--calendar-icon-size-sm);
    justify-content: center;
    width: var(--calendar-icon-size-sm);

    &:hover {
      background: var(--color-background-interactive-selected-secondary);
    }
  }

  ._datePicker_group_13vu9_26 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--input-space-element-to-element-horizontal-primary);
    border-radius: var(--input-border-radius-primary);
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);
    background: var(--input-color-background-primary);
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    ._dateField-input_13vu9_37 {
      border: none;
    }
  }

  ._picker_13vu9_42 {
    display: inline-flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
  }

  ._spotlight_DatePicker_full-width_13vu9_48 {
    width: 100%;
    flex: 1;
  }
}
@layer spotlight-ui.components {
  ._popover_1rrlm_2 {
    width: var(--date-picker-popover-width);
    display: flex;
    min-width: var(--tooltip-size-min-width);
    max-width: var(--tooltip-size-max-width);
    align-items: center;
    flex-direction: column;
    padding: var(--space-xl);
    border-radius: var(--container-border-radius-primary);
    border: var(--container-border-weight-primary) solid
      var(--container-color-border-primary);
    background: var(--container-color-background-primary);
    margin: var(--space-sm) 0;
  }

  ._overlay_1rrlm_17 {
    position: fixed;
    inset: 0;
  }
}
@layer spotlight-ui.components {
  ._spotlight_Alert_s0so8_2 {
    display: flex;
    padding: var(--space-md);
    gap: var(--space-xl);
    border-radius: var(--alert-border-radius-primary);
    border: var(--alert-border-weight-primary) solid
      var(--alert-color-border-primary);
    background: var(--alert-color-background-primary);
  }

  ._spotlight_Alert_main_s0so8_12 {
    display: flex;
    flex-grow: 1;
    gap: var(--space-md);
    padding: var(--space-md);
    svg {
      color: var(--alert-color-content-primary);
    }
  }

  ._spotlight_Alert_content_s0so8_22 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: var(--color-text-primary);
  }

  ._spotlight_Alert_message_s0so8_29 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: var(--color-text-primary);
    margin-top: var(--space-sm);
  }

  ._spotlight_Alert_close_s0so8_37 {
    background: none;
    border: none;
    display: flex;
    justify-content: center;
    font-size: var(--text-size-label-lg);
    min-width: var(--grid-space-400);
    cursor: pointer;
    line-height: var(--text-line-height-label-base);
    padding: var(--space-lg) var(--space-md);
  }

  ._spotlight_Alert_icon_s0so8_49 {
    flex-shrink: 0;
    background: none;
    margin-top: var(--alert-icon-space-edge-to-element-vertical-primary);
    color: var(--color-content-semantic-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Snackbar_1yojv_2 {
    display: flex;
    width: var(--snackbar-size-width-primary);
    max-width: 100vw;
    min-width: var(--snackbar-size-min-width-primary);
    padding: var(--space-md);
    gap: var(--space-md);
    align-items: center;
    border: var(--alert-border-weight-secondary) solid
      var(--alert-color-border-secondary);
    background: var(--alert-color-background-secondary);
    border-radius: var(--border-radius-sm);
  }
  ._spotlight_Snackbar_provider_1yojv_15 {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--snackbar-provider-space-element-to-element-vertical);
  }
  ._spotlight_Snackbar_wrapper_1yojv_22 {
    margin: var(--snackbar-wrapper-space-edge-vertical) 0;
  }
  ._spotlight_Snackbar_content-wrapper_1yojv_25 {
    display: flex;
    padding: var(--space-sm);
    align-items: flex-start;
    gap: var(--space-lg);
    flex: 1 0 0;
  }
  ._spotlight_Snackbar_icon-wrapper_1yojv_32 {
    display: flex;
    padding: var(--space-xxs, 2px);
    align-items: center;
    gap: var(--snackbar-icon-wrapper-space-element-to-element-horizontal);
    border-radius: var(--border-radius-full);
    border: var(--snackbar-icon-wrapper-border-weight-primary) solid
      var(--color-border-semantic-secondary);
  }
  ._spotlight_Snackbar_heading_1yojv_41 {
    width: 100%;
    color: var(--color-text-primary);
    display: grid;
  }

  ._spotlight_Snackbar_button_1yojv_47 {
    background: var(--button-color-background-secondary);
    color: var(--alert-button-color-text-primary);
    white-space: nowrap;
    font-size: var(--text-size-label-sm);
    font-weight: var(--text-weight-label-sm-strong);
    width: min-content;
  }

  ._toast_1yojv_56 {
    view-transition-class: toast;
    transition: opacity 300ms ease-out;
    will-change: transform, opacity;
  }

  ::view-transition-new(._toast_1yojv_56):only-child {
    animation: _slide-in_1yojv_1 400ms ease-out;
  }

  ::view-transition-old(._toast_1yojv_56):only-child {
    animation: _slide-out_1yojv_1 400ms ease-in;
  }

  @keyframes _slide-in_1yojv_1 {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes _slide-out_1yojv_1 {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @media (max-width: 700px) {
    ._spotlight_Snackbar_1yojv_2 {
      width: 100vw;
      max-width: 95vw;
      min-width: 0;
      padding: var(--space-sm);
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_Autocomplete_1s0no_2 {
  }
}
@layer spotlight-ui.components {
  ._spotlight_ComboBox_75k88_2 {
    overflow: hidden;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-base);
    font-style: normal;
    font-weight: var(--text-weight-label-base);
    line-height: var(--text-line-height-label-base);

    ._spotlight_Input_75k88_12 {
      border: var(--border-weight-default) solid
        var(--color-border-interactive-primary);
      border-radius: var(--input-border-radius-primary);
      box-sizing: border-box;
      height: 46px;
      padding: var(--input-space-edge-to-element-vertical-primary)
        var(--input-space-edge-to-element-horizontal-primary);

      &[data-focused] {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: -1px;
      }
    }

    ._spotlight_Button_75k88_27 {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
      forced-color-adjust: none;
      border-radius: 4px;
      border: none;
      margin-left: -1.714rem;
      width: 1.429rem;
      height: 1.429rem;
      padding: 0;
      font-size: 0.857rem;
      cursor: default;

      &[data-pressed] {
        box-shadow: none;
        background: var(--highlight-background);
      }
    }
  }

  ._spotlight_Popover_75k88_47[data-trigger='ComboBox'] {
    width: var(--trigger-width);

    ._spotlight_ListBox_75k88_50 {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      background: var(--color-background-interactive-tertiary);
      padding: var(--space-xs);
      gap: 10px;
      border-radius: var(--input-border-radius-primary);
      border: var(--border-weight-default) solid
        var(--input-color-border-secondary);

      ._react-aria-Header_75k88_63 {
        padding-left: 1.571rem;
      }
    }
    ._spotlight_ListBoxItem_75k88_67 {
      padding: var(--input-space-edge-to-element-vertical-primary)
        var(--input-space-edge-to-element-horizontal-primary);

      &[data-focus-visible] {
        outline: none;
      }

      &[data-selected] {
        font-weight: 600;
        background: unset;
        color: var(--text-color);
      }

      &[data-focused],
      &[data-pressed] {
        background: var(--highlight-background);
        color: var(--highlight-foreground);
      }
    }
  }
}
@layer spotlight-ui.components {
  ._field_1o87p_2 {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);

    ._group_1o87p_7 {
      display: flex;

      &[data-focus-within] {
        outline: none;
        ._react-aria-Input_1o87p_12,
        ._react-aria-Button_1o87p_13 {
          border-color: none;
        }
      }
    }

    ._button_1o87p_19 {
      align-items: center;
      border: none;
      display: flex;
      cursor: pointer;
      justify-content: center;
      background: var(--input-color-background-secondary);
      padding: var(--control-space-edge-to-element-vertical-secondary)
        var(--control-space-edge-to-element-horizontal-secondary);

      ._icon_wrapper_1o87p_29 {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: var(
          --button-icon-space-edge-to-element-horizontal-primary,
          8px
        );
      }

      ._icon_1o87p_29 {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      &[slot='decrement'] {
        border-radius: var(--input-border-radius-primary) 0 0
          var(--input-border-radius-primary);
        border-top: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        border-bottom: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        border-left: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        background: var(--input-color-background-secondary);
      }

      &[slot='increment'] {
        border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
        border-top: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        border-right: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        border-bottom: var(--input-border-weight-secondary) solid
          var(--control-color-border-primary);
        background: var(--input-color-background-secondary);
      }
    }

    ._input_1o87p_69 {
      display: flex;
      min-width: 80px;
      align-items: center;
      color: var(--input-color-text-primary);
      padding: var(--space-md) var(--space-lg);
      border: var(--input-border-weight-primary) solid
        var(--input-color-border-primary);
      background: var(--input-color-background-primary);
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: var(--text-font-san-serif);
      font-size: var(--input-text-size-primary);
      font-weight: var(--input-text-weight-primary);
      line-height: var(--input-text-line-height-primary);

      &[data-focused] {
        outline: none;
      }
    }
  }

  ._fullWidth_1o87p_91 {
    flex-grow: 1;
  }
}
@layer spotlight-ui.components {
  ._spotlight_SelectInputField_option_ighs7_2 {
    display: flex;
    align-items: center;
    color: var(--input-select-option-color-text-primary);
    border-radius: var(--input-select-option-border-radius-primary);
    background: var(--input-select-option-color-background-primary);
    padding: var(--input-select-option-space-edge-to-element-vertical-primary)
      var(--input-select-option-space-edge-to-element-horizontal-primary);
    gap: var(
      --input-select-option-space-element-to-element-horizontal-secondary
    );
    &[data-selected]::after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M13.7892 0.334355C14.0703 0.646681 14.0703 1.11517 13.7892 1.39626L5.54378 9.64166C5.23146 9.95399 4.76297 9.95399 4.48187 9.64166L0.234244 5.39403C-0.0780814 5.11294 -0.0780814 4.64445 0.234244 4.36336C0.515337 4.05103 0.983826 4.05103 1.26492 4.36336L4.9816 8.08003L12.7273 0.334355C13.0084 0.0532619 13.4769 0.0532619 13.7579 0.334355H13.7892Z' fill='%231E1F24'/%3E%3C/svg%3E");
      display: flex;
      justify-content: space-between;
    }
  }

  ._spotlight_SelectInputField_optionLabel_ighs7_20 {
    flex: 1 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-base);
    font-style: normal;
    font-weight: var(--text-weight-label-base);
    line-height: var(--text-line-height-label-base);
  }
}
@layer spotlight-ui.components {
  ._spotlight_SelectInputFieldSearchbox-container_lefn0_2 {
    display: flex;
    padding: var(--space-sm) var(--space-md);
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  ._spotlight_SelectInputFieldSearchbox_lefn0_2 {
    padding: var(--input-space-edge-to-element-vertical-secondary)
      var(--input-space-edge-to-element-horizontal-quaternary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_MultiOption_option_4tq64_2 {
    display: flex;
    align-items: center;
    color: var(--input-select-option-color-text-primary);
    border-radius: var(--input-select-option-border-radius-primary);
    background: var(--input-select-option-color-background-primary);
    padding: var(--input-select-option-space-edge-to-element-vertical-primary)
      var(--input-select-option-space-edge-to-element-horizontal-primary);
    gap: var(
      --input-select-option-space-element-to-element-horizontal-secondary
    );
  }

  ._spotlight_MultiOption_label_4tq64_15 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-base);
    font-style: normal;
    font-weight: var(--text-weight-label-base);
    line-height: var(--text-line-height-label-base);
    display: flex;
    gap: var(--input-select-option-space-element-to-element-horizontal-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_RadioControlGroup_1szlr_2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);

    ._spotlight_FieldError_1szlr_8 {
      color: var(--color-text-critical-tertiary);
      font-family: var(--text-font-san-serif);
      font-size: var(--text-size-label-xs);
      font-style: normal;
      font-weight: var(--text-weight-label-xs);
      line-height: var(--text-line-height-label-xs);
    }

    ._spotlight_Radio_1szlr_2 {
      display: flex;
      align-items: center;
      gap: var(--control-space-element-to-element-primary);
      color: var(--color-text-interactive-primary);
      cursor: pointer;
      forced-color-adjust: none;

      &:before {
        content: '';
        align-items: center;
        display: flex;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: var(--border-weight-default) solid
          var(--radio-color-border-primary);
        background: var(--radio-color-background-primary);
        border-radius: var(--border-radius-full);
        transition: all 200ms;
        flex-shrink: 0;
      }

      &[data-selected] {
        &:before {
          border-color: var(--radio-color-border-selected-primary);
          border-width: 5px;
        }
        &[data-pressed] {
          &:before {
            border-color: var(--color-content-secondary);
          }
        }
      }

      &[data-readonly] {
        cursor: default;
        &:before {
          border-color: var(--radio-color-border-read-only-primary);
          background: var(--radio-color-background-read-only-primary);
        }
        &[data-selected]:before {
          background: var(--radio-color-background-selected-read-only-primary);
        }
      }

      &[data-disabled] {
        color: var(--color-text-disabled);
        &:before {
          border-color: var(--color-light-border-disabled);
          background: var(--color-light-background-disabled);
        }
        &[data-selected]:before {
          border-color: var(--color-light-border-disabled);
          background: var(--color-light-content-disabled);
        }
      }
    }
    ._spotlight_RadioControlGroup_horizontal_1szlr_75 {
      display: flex;
      gap: var(--field-space-element-to-element-horizontal-secondary);
    }
    ._spotlight_RadioControlGroup_vertical_1szlr_79 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--field-space-element-to-element-vertical-secondary);
    }

    ._spotlight_RadioControlGroup_horizontal_1szlr_75 > label._spotlight_Radio_1szlr_2 {
      align-items: center;
    }
  }
}
@layer spotlight-ui.components {
  ._radio_g8eul_2 {
    align-items: center;
    color: var(--color-text-interactive-primary);
    display: flex;
    gap: var(--control-space-element-to-element-horizontal-primary);

    &._disabled_g8eul_8 {
      ._label_g8eul_9 {
        color: var(--color-text-interactive-primary);
      }
    }
  }
}
@layer spotlight-ui.components {
  ._indicator_hmrdn_2 {
    /*
	align-items: center;	
	display: inline-flex;
	flex-shrink: 0;	
	
	&.selected {
		border-color: var(--color-border-interactive-primary);
		border-width: 6px;	
		height: 12px;	
		width: 12px;		

		&.disabled {
			&::before {
				content: "";
				background-color: var(--color-content-interactive-inverse);
				border-radius: 360px;
				width: 8px;
				height: 8px;
				margin-left: 6px;
				position: absolute;
			}
			
			&.small::before {
				width: 6px;
				height: 6px;
				margin-left: 5px;
			}
		}
	}
	
	&.disabled {
		border: 1px solid var(--color-border-interactive-tertiary);
		background: var(--color-background-interactive-tertiary);	
		cursor: not-allowed;
	}	
	*/

    display: flex;
    position: relative;
    align-items: center;
    gap: 0.571rem;
    font-size: 1.143rem;
    color: black;

    &:before {
      background-color: var(--color-background-interactive-tertiary);
      border: 1px solid var(--color-border-interactive-tertiary);
      border-radius: var(--border-radius-full);
      box-sizing: border-box;
      content: '';
      cursor: pointer;
      display: block;
      width: 22px;
      height: 22px;
      transition: all 200ms;
    }
  }

  ._small_hmrdn_25:before {
    width: 18px;
    height: 18px;
  }

  ._selected_hmrdn_8:before {
    border-color: var(--color-border-interactive-primary);
    border-width: 6px;

    &._disabled_hmrdn_14 {
      &::before {
        content: '';
        background-color: var(--color-content-interactive-inverse);
        border-radius: 360px;
        width: 8px;
        height: 8px;
        margin-left: 6px;
        position: absolute;
      }

      &._small_hmrdn_25::before {
        width: 6px;
        height: 6px;
        margin-left: 5px;
      }
    }
  }
}
@layer spotlight-ui.components {
  ._group_15unx_2 {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
  }

  ._wrapper_15unx_8 {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-secondary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_Switch_whmlx_2 {
    display: flex;
    align-items: center;
    gap: var(--control-space-element-to-element-secondary);
  }

  ._spotlight_Switch_whmlx_2 [slot='header'],
  ._spotlight_Switch_whmlx_2 [slot='content'] {
    display: flex;
    cursor: pointer;
  }

  ._spotlight_Switch_whmlx_2 [slot='header'] {
    color: var(--color-text-primary);
    font-weight: var(--text-weight-label-sm-strong);
  }

  ._spotlight_Switch_whmlx_2 [slot='content'] {
    color: var(--color-text-secondary);
  }

  ._spotlight_Switch_whmlx_2[data-selected] ._spotlight_Switch-indicator_whmlx_23 {
    background: var(--control-color-background-primary);
    color: var(--color-content-interactive-selected-primary);
  }
  ._spotlight_Switch_whmlx_2[data-selected] ._spotlight_Switch-indicator_whmlx_23::before {
    background: var(--color-content-interactive-selected-primary);
    transform: translateX(100%);
  }

  ._spotlight_Switch_whmlx_2[data-readonly] ._spotlight_Switch-indicator_whmlx_23 {
    border: var(--border-weight-default) solid
      var(--control-color-border-read-only-primary);
    background: var(--input-color-background-read-only-secondary);
    cursor: default;
  }
  ._spotlight_Switch_whmlx_2[data-readonly] ._spotlight_Switch-indicator_whmlx_23::before {
    background: var(--color-content-disabled);
  }

  ._spotlight_Switch-indicator_whmlx_23 {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: var(--switch-size-width-md); /* Medium switch width (44px) */
    min-width: var(--switch-size-width-md);
    height: var(--switch-size-height-md); /* Medium switch height (24px) */
    padding: var(--switch-space-edge-to-element-vertical-primary)
      var(--switch-space-edge-to-element-horizontal-primary)
      var(--switch-space-edge-to-element-vertical-primary)
      var(--switch-space-edge-to-element-horizontal-secondary); /* 1px 2px 1px 4px */
    cursor: pointer;
    border-radius: var(--switch-border-radius-md);
    background: var(--control-color-background-primary);
    transition:
      background var(--control-transition-duration-primary),
      color var(--control-transition-duration-primary);
  }

  ._spotlight_Switch-indicator_whmlx_23::before {
    content: '';
    display: flex;
    width: var(--switch-thumb-size-md); /* Medium thumb (20px) */
    height: var(--switch-thumb-size-md);
    background: var(--control-color-content-primary);
    border-radius: var(--switch-thumb-border-radius);
    flex-shrink: 0;
    transition:
      background var(--control-transition-duration-primary),
      transform var(--control-transition-duration-primary);
  }

  ._spotlight_Switch-indicator_whmlx_23._small_whmlx_74 {
    width: var(--switch-size-width-sm); /* Small switch width (34px) */
    height: var(--switch-size-height-sm); /* Small switch height (20px) */
    min-width: var(--switch-size-width-sm);
  }
  ._spotlight_Switch-indicator_whmlx_23._small_whmlx_74::before {
    width: var(--switch-thumb-size-sm); /* Small thumb (16px) */
    height: var(--switch-thumb-size-sm);
  }

  /* Opcional: estados de accesibilidad */
  ._spotlight_Switch-indicator_whmlx_23:focus {
    outline: var(--border-weight-heaviest) solid var(--color-focus);
  }
  ._spotlight_Switch-indicator_whmlx_23:disabled {
    opacity: var(--control-opacity-disabled);
    cursor: not-allowed;
  }
}
@layer spotlight-ui.components {
  ._spotlight_TextArea-base_pffie_2 {
    display: flex;
    flex-direction: column;
    gap: var(--field-space-element-to-element-vertical-primary);
    &[data-readonly] {
      ._spotlight_TextArea-input_pffie_7 {
        border: var(--border-weight-default) solid
          var(--input-color-border-primary);
        color: var(--input-color-text-primary);
        background: var(--input-color-background-read-only-primary);
      }
    }
  }

  ._spotlight_TextArea-input_pffie_7 {
    color: var(--input-color-text-primary);
    background: var(--input-color-background-primary);
    border-radius: var(--input-border-radius-primary);
    border: 1px solid var(--input-color-border-primary);
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    &[data-readonly],
    &[readonly] {
      cursor: default;
    }
    &[data-focused] {
      outline: 0;
      outline-offset: 0;
    }
    &[data-focus-visible] {
      border-color: var(--input-border-color-selected);
      outline: var(--border-weight-heaviest) solid
        var(--input-border-color-selected);
      outline-offset: calc(-1 * var(--border-weight-heaviest));
    }
  }

  ._spotlight_TextArea-footer_pffie_39 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
@layer spotlight-ui.components {
  ._item_guedl_2 {
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--action-item-text-size-primary);
    font-weight: var(--action-item-text-weight-primary);
    line-height: var(--action-item-text-line-height-primary);
    color: var(--action-item-color-text-primary);
    padding: var(--action-item-space-edge-to-element-vertical-primary)
      var(--space-md);
    gap: var(--action-item-space-element-to-element-horizontal-primary);
    border-radius: var(--action-item-border-radius-border);
    background: var(--action-item-color-background-primary);
    color: var(--action-item-color-text-primary);

    &[data-disabled] {
      cursor: not-allowed;

      ._icon_guedl_24 {
        color: var(--action-item-color-text-primary);
      }
    }
    &._critical_guedl_28 {
      color: var(--action-item-color-text-destructive-primary);
      &:hover {
        background: var(--action-item-color-background-destructive-primary);
      }
      &[data-pressed] {
        background: var(--action-item-color-background-destructive-primary);
      }
    }
    &[data-focused] {
      outline-offset: none;
      outline: none;
    }
  }

  ._icon_guedl_24 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--size-element-xl);
    width: var(--size-element-xl);
  }

  ._label_guedl_51 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@layer spotlight-ui.components {
  ._menu_1bu69_2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }

  ._popover_1bu69_9 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    min-width: 80px;
    max-width: 400px;
    border-radius: var(--container-border-radius-primary);
    border: var(--border-weight-default) solid
      var(--container-color-border-primary);
    background: var(--container-color-background-primary);
  }

  ._menu_1bu69_2[data-focused],
  ._popover_1bu69_9[data-focused] {
    outline-offset: none;
    outline: none;
  }

  ._scrollable_1bu69_28 {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  ._scrollable_1bu69_28::-webkit-scrollbar {
    width: 8px;
  }

  ._scrollable_1bu69_28::-webkit-scrollbar-track {
    background: transparent;
  }

  ._scrollable_1bu69_28::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--container-border-radius-primary);
  }

  ._scrollable_1bu69_28:hover::-webkit-scrollbar-thumb {
    background: var(--container-color-border-primary);
  }

  ._scrollable_1bu69_28::-webkit-scrollbar-thumb:hover {
    background: var(--container-color-border-primary);
  }

  /* Firefox scrollbar support */
  ._scrollable_1bu69_28 {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  ._scrollable_1bu69_28:hover {
    scrollbar-color: var(--container-color-border-primary) transparent;
  }
}
@layer spotlight-ui.components {
  /* Default button */
  ._spotlight_ProjectSelector-neutral-button_iz0lt_3 {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--input-space-element-to-element-horizontal-primary);
    align-self: stretch;
    padding: var(--input-space-edge-to-element-vertical-primary)
      var(--input-space-edge-to-element-horizontal-primary);
    border: var(--project-selector-color-border-primary) 1px solid;
    border-radius: var(--input-border-radius-primary);
    background: var(--input-color-background-primary);
  }

  ._spotlight_ProjectSelector-neutral-button_iz0lt_3:focus,
  ._spotlight_ProjectSelector-neutral-button_iz0lt_3:active {
    border: var(--input-border-weight-primary) solid
      var(--input-color-border-primary);
  }

  /* Breadcrumb button */
  ._spotlight_ProjectSelector-breadcrumb_button_iz0lt_24 {
    position: relative;
    display: inline-flex;
    padding: var(
        --project-wrapper-breadcrumb-space-edge-to-element-vertical-primary
      )
      var(
        --project-wrapper-breadcrumb-space-edge-to-element-horizontal-secondary
      )
      var(--project-wrapper-breadcrumb-space-edge-to-element-vertical-primary)
      var(--project-wrapper-breadcrumb-space-edge-to-element-horizontal-primary);
    justify-content: center;
    align-items: center;
    gap: var(--input-space-element-to-element-horizontal-primary);
    border-radius: var(--border-radius-full);
    background: var(--project-wrapper-breadcrumb-color-background-primary);
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--project-wrapper-breadcrumb-color-border-secondary);
    background: var(--project-wrapper-breadcrumb-color-background-primary);
  }

  ._spotlight_ProjectSelector-breadcrumb_button_iz0lt_24:hover {
    background: var(--project-wrapper-breadcrumb-color-background-primary);
  }

  ._spotlight_ProjectSelector-breadcrumb_button_iz0lt_24:active {
    border: var(--project-wrapper-breadcrumb-color-text-primary) solid
      var(--input-border-weight-primary);
    background: var(---co-brand-primary-500);
  }

  ._spotlight_ProjectSelector-breadcrumb_button_iz0lt_24:focus {
    border: var(--project-wrapper-breadcrumb-color-text-primary) solid
      var(--input-border-weight-primary);
  }

  ._spotlight_ProjectSelector-breadcrumb_button_iz0lt_24:disabled,
  ._spotlight_ProjectSelector-neutral-button_iz0lt_3:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: var(--color-background-interactive-secondary);
  }

  ._spotlight_ProjectSelector-button_text_iz0lt_69 {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--project-wrapper-breadcrumb-color-text-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--text-weight-medium);
    line-height: var(--input-text-line-height-primary);
    border: none;
    outline: none;
  }

  ._spotlight_ProjectSelector-neutral-button_iz0lt_3
    ._spotlight_ProjectSelector-button_text_iz0lt_69 {
    color: var(--input-color-text-primary);
  }

  ._spotlight_ProjectSelector-button_icon_wrapper_iz0lt_89 {
    border-radius: var(--border-radius-full);
    background: var(--color-background-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 26px;
  }

  ._spotlight_ProjectSelector-neutral-button_iz0lt_3
    ._spotlight_ProjectSelector-button_icon_wrapper_iz0lt_89 {
    background: var(--input-color-background-secondary);
  }

  ._spotlight_ProjectSelector-button_icon_iz0lt_89 {
    flex-shrink: 0;
    color: var(--color-content-inverse);
    transition: transform 0.2s ease-in-out;
    transform: translateX(-1px);
  }

  ._spotlight_ProjectSelector-neutral-button_iz0lt_3
    ._spotlight_ProjectSelector-button_icon_iz0lt_89 {
    color: var(--input-color-text-primary);
  }

  ._spotlight_ProjectSelector-dropdown_iz0lt_116 {
    width: 400px;
    max-width: 90vw;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    min-width: 80px;
    max-width: 400px;
    outline: none;
    border-radius: var(--border-radius-sm, 8px);
    border: 1px solid var(--project-selector-drawer-color-border-primary);
    background: var(--project-selector-drawer-color-background-primary);
    box-shadow:
      0 12px 16px -4px rgba(16, 24, 40, 0.08),
      0 4px 6px -2px rgba(16, 24, 40, 0.03);
  }
}
@layer spotlight-ui.components {
  ._spotlight_ProjectSelectorListItem-root_97n6d_2 {
    display: flex;
    list-style: none;
    padding: var(--interactive-list-item-space-edge-to-element-vertical-primary)
      var(--interactive-list-item-space-edge-to-element-horizontal-primary);
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    outline: none;
    background: var(--interactive-list-item-color-background-secondary);
    cursor: pointer;
  }

  ._spotlight_ProjectSelectorListItem-root_97n6d_2:not(:last-child) {
    border-bottom: var(--interactive-list-item-border-weight-primary) solid
      var(--interactive-list-item-border-color-primary);
  }

  ._spotlight_ProjectSelectorListItem-root_97n6d_2:hover {
    border-bottom: var(--interactive-list-item-border-weight-primary) solid
      var(--interactive-list-item-border-color-primary);
    background: var(--interactive-list-item-color-background-secondary);
    outline: none;
  }

  ._spotlight_ProjectSelectorListItem-root_97n6d_2[aria-selected='true'] {
    border-bottom: var(--interactive-list-item-border-weight-primary) solid
      var(--interactive-list-item-border-color-primary);
    background: var(--interactive-list-item-color-background-selected-primary);
  }

  ._spotlight_ProjectSelectorListItem-root_97n6d_2[aria-selected='true']:hover {
    background: var(--interactive-list-item-color-background-selected-primary);
    opacity: 0.9;
  }

  ._spotlight_ProjectSelectorListItem-name_97n6d_38 {
    overflow: hidden;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-sm);
    font-style: normal;
    font-weight: var(--text-weight-body-sm-strong);
    line-height: var(--text-line-height-body-sm);
  }

  ._spotlight_ProjectSelectorListItem-content_97n6d_49 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-md);
  }

  ._spotlight_ProjectSelectorListItem-text_container_97n6d_57 {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    flex: 1;
    min-width: 0;
  }

  ._spotlight_ProjectSelectorListItem-subtitle_97n6d_65 {
    color: var(--project-selector-color-text-secondary);
    /* Body/Small */
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-sm);
    font-style: normal;
    font-weight: var(--text-weight-body-sm);
    line-height: var(--text-line-height-body-sm);
  }

  ._spotlight_ProjectSelectorListItem-name-disabled_97n6d_75 {
    color: var(--color-system-500);
  }

  ._spotlight_ProjectSelectorListItem-subtitle-disabled_97n6d_79 {
    color: var(--color-text-disabled);
  }

  ._spotlight_ProjectSelectorListItem-root-disabled_97n6d_83 {
    cursor: not-allowed;
  }

  ._spotlight_ProjectSelectorListItem-tag-disabled_97n6d_87 {
    span {
      color: var(--color-system-500);
    }
  }
  
  ._spotlight_ProjectSelectorListItem-tag-disabled_97n6d_87._spotlight_ProjectSelectorListItem-tag_97n6d_87 {
    border-radius: var(--tag-border-radius-secondary);
    border: var(--tag-border-weight-primary) solid
      var(--project-selector-tag-color-border-primary);
    background: var(--project-selector-tag-color-background-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_ProjectSelectorList-root_7yqjg_2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 400px;
    background: var(--color-background-primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elevation-shadow-lg);
    overflow: hidden;
    border: 1px solid var(--project-selector-drawer-color-border-primary);

  }

  ._spotlight_ProjectSelectorList-search_container_7yqjg_15 {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: var(
        --project-selector-space-edge-to-element-vertical-primary,
        16px
      )
      var(--project-selector-space-edge-to-element-horizontal-primary, 16px);
  }
  ._spotlight_ProjectSelectorList-search_input_7yqjg_27 {
    flex: 1;
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--color-border-interactive-secondary);
    background: var(--color-background-primary);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    color: var(--color-text-primary);
    font-family: var(--text-font-san-serif, Inter);
    font-size: var(--text-size-body-base, 16px);
    font-style: normal;
    font-weight: var(--text-weight-body-base, 400);
    line-height: var(--text-line-height-body-base, 24px);
  }

  ._spotlight_ProjectSelectorList-search_input_7yqjg_27::placeholder {
    color: var(--color-border-interactive-secondary);
    font-family: var(--text-font-san-serif, Inter);
    font-size: var(--text-size-body-base, 16px);
    font-style: normal;
    font-weight: var(--text-weight-body-base, 400);
    line-height: var(--text-line-height-body-base, 24px);
  }

  ._spotlight_ProjectSelectorList-search_input_7yqjg_27:focus {
    outline: none;
  }

  ._spotlight_ProjectSelectorList-search_help_button_7yqjg_59 {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-border-interactive-secondary);
  }

  ._spotlight_ProjectSelectorList-search_help_button_7yqjg_59:focus,
  ._spotlight_ProjectSelectorList-search_help_button_7yqjg_59:hover {
    background-color: transparent;
    outline: none;
    border: none;
  }

  ._spotlight_ProjectSelectorList-items_7yqjg_73 {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  ._spotlight_ProjectSelectorList-items_7yqjg_73::-webkit-scrollbar {
    width: 8px;
  }

  ._spotlight_ProjectSelectorList-items_7yqjg_73::-webkit-scrollbar-track {
    background: var(--color-background-secondary);
  }

  ._spotlight_ProjectSelectorList-items_7yqjg_73::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: var(--border-radius-xs);
    cursor: pointer;
  }

  ._spotlight_ProjectSelectorList-empty_7yqjg_96 {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-md);
    font-weight: var(--text-weight-regular);
    line-height: var(--text-line-height-body-md);
    color: var(--color-text-tertiary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_breadcrumbs_mvhgq_2 {
    display: flex;
    align-items: center;
    gap: var(--nav-breadcrumb-space-element-to-element-horizontal-primary);
    list-style: none;
  }
  ._spotlight_breadcrumbs-page_link_mvhgq_8 {
    color: var(--nav-breadcrumb-color-text-primary);
    gap: var(--nav-breadcrumb-space-element-to-element-horizontal-primary);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    font-size: inherit;
  }
  ._spotlight_breadcrumbs-current_page_mvhgq_18 {
    color: var(--color-text-primary);
    margin: 0;
    font-size: inherit;
  }

  ._spotlight_breadcrumbs-compact_mvhgq_24,
  ._spotlight_breadcrumb_mvhgq_2 {
    display: flex;
    align-items: center;
    gap: var(--nav-breadcrumb-space-element-to-element-horizontal-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-body-sm);
    font-style: normal;
    font-weight: var(--text-weight-body-sm-strong);
    line-height: var(--text-line-height-body-sm);
  }

  ._spotlight_breadcrumbs-comfortable_mvhgq_36 {
    &[data-hovered],
    &[data-disabled][data-hovered] {
      text-decoration: underline;
      text-underline-offset: var(
        --nav-breadcrumb-text-underline-offset-primary
      ); /* Hover underline offset */
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_MinifiedNav-root_1yklz_2 {
    display: flex;
    padding-top: var(--space-3xl);
    flex-direction: column;
    align-items: center;
    gap: var(--space-4xl);
    flex: 1 0 0;

    > * {
      flex-shrink: 0;
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_MinifiedNavDivider_1rttf_2 {
    width: 100%;
    height: 1px;
    background: var(--nav-minified-item-group-color-border-primary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_MinifiedNavItem-root_v26c0_2 {
    list-style: none;
    width: 100%;
  }

  ._spotlight_MinifiedNavItem-prominence_light_v26c0_7 {
    ._spotlight_MinifiedNavItem-button_v26c0_8 {
      background: var(--nav-minified-item-color-background-secondary);
      color: var(--nav-minified-item-color-text-secondary);
    }
  }

  ._spotlight_MinifiedNavItem-prominence_heavy_v26c0_14 {
    ._spotlight_MinifiedNavItem-button_v26c0_8 {
      background: var(--nav-minified-item-color-background-primary);
      color: var(--nav-minified-item-color-text-primary);
    }
  }

  ._spotlight_MinifiedNavItem-minified_v26c0_21 {
    ._spotlight_MinifiedNavItem-label_v26c0_22 {
      display: none;
    }
  }

  ._spotlight_MinifiedNavItem-button_v26c0_8 {
    display: flex;
    padding: var(--nav-minified-item-space-edge-to-element-vertical-primary)
      var(--nav-minified-item-space-edge-to-element-horizontal-primary);
    align-items: center;
    gap: var(--nav-minified-item-space-element-to-element-primary);
    flex: 1 0 0;
    width: 100%;

    border-radius: var(--nav-minified-item-border-radius-primary);
    border: none;
  }

  ._spotlight_MinifiedNavItem-label_v26c0_22 {
    text-align: center;
    font-family: var(--text-font-san-serif);
    font-size: var(--nav-minified-item-text-size-primary);
    font-style: normal;
    font-weight: var(--nav-minified-item-text-weight-primary);
    line-height: var(--nav-minified-item-text-line-height-primary);

    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  ._spotlight_MinifiedNavItem-tooltip_v26c0_53 {
    display: flex;
    padding: var(
        --nav-minified-item-flyout-space-edge-to-element-vertical-primary
      )
      var(--nav-minified-item-flyout-space-edge-to-element-horizontal-primary);
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: var(--nav-minified-item-flyout-border-radius-primary);
    background: var(--nav-minified-item-flyout-color-background-primary);

    box-shadow: var(--tooltip-elevation-shadow);
    color: var(--field-tooltip-color-text-primary);
    outline: none;

    width: auto;

    transform: translate3d(0, 0, 0);
    transform: translateX(var(--tooltip-transform-offset-horizontal));
    transition: opacity var(--tooltip-transition-duration-primary);

    &[data-entering],
    &[data-exiting] {
      opacity: 0;
    }

    &[data-placement='right'] {
      margin-left: var(--tooltip-space-edge-to-trigger-xl);
    }
  }

  ._spotlight_MinifiedNavItem-tooltip_text_v26c0_86 {
    color: var(--nav-minified-item-flyout-color-text-primary);
    text-align: center;
    font-size: var(--text-size-label-sm);
    font-style: normal;
    font-weight: var(--text-weight-regular);
    line-height: var(--text-line-height-label-sm); /* 142.857% */
  }
}
@layer spotlight-ui.components {
  ._spotlight_MinifiedNavItemGroup-root_1hxq8_2 {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-none);

    &._spotlight_MinifiedNavItemGroup-minified_1hxq8_10 {
      ._spotlight_MinifiedNavItemGroup-label_container_1hxq8_11 {
        opacity: 0;
        overflow: hidden;
        width: 0px;
      }
    }
  }

  ._spotlight_MinifiedNavItemGroup-label_container_1hxq8_11 {
    display: flex;
    padding-bottom: var(
      --nav-minified-item-group-space-element-to-element-vertical-secondary
    );
    justify-content: center;
    align-items: center;
    align-self: stretch;
    white-space: pre;
  }

  ._spotlight_MinifiedNavItemGroup-label_1hxq8_11 {
    color: var(--nav-minified-item-group-color-text-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--nav-minified-item-group-text-size-primary);
    font-style: normal;
    font-weight: var(--nav-minified-item-group-text-weight-primary);
    line-height: var(--text-line-height-label-sm);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  ._spotlight_MinifiedNavItemGroup-items_1hxq8_42 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(
      --nav-minified-item-group-space-element-to-element-vertical-primary
    );
    width: 100%;
  }
}
@layer spotlight-ui.components {
  ._nav_1bkdr_2 {
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    border-radius: var(--nav-item-border-radius-primary);
    background: var(--nav-item-color-background-primary);
    gap: var(--nav-item-space-element-to-element-vertical-primary);
    padding: var(--nav-item-space-edge-to-element-vertical-primary)
      var(--nav-item-space-edge-to-element-horizontal-primary);
  }

  ._content_1bkdr_14 {
    display: flex;
    width: 100%;
  }

  ._main_1bkdr_19 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
  }

  ._icon_1bkdr_26 {
    align-items: center;
    color: var(--nav-item-color-content-primary);
    display: flex;
    justify-content: center;
  }

  ._title_1bkdr_33 {
    color: var(--nav-item-color-text-primary);
  }

  ._description_1bkdr_37 {
    color: var(--nav-item-color-text-secondary);
  }

  ._title_1bkdr_33,
  ._description_1bkdr_37 {
    padding: var(--space-none)
      var(--nav-space-label-edge-to-text-horizontal-primary);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }

  ._flex_1bkdr_50 {
    align-items: center;
    display: flex;
    gap: var(--nav-item-space-element-to-element-horizontal-primary);
  }
  ._spacer_1bkdr_55 {
    width: 16px;
  }

  ._level-1_1bkdr_59 {
    padding: var(--nav-item-space-edge-to-element-vertical-primary)
      var(--nav-item-space-edge-to-element-horizontal-primary);
  }

  ._level-2_1bkdr_64 {
    padding: var(--nav-item-space-edge-to-element-vertical-primary)
      var(--nav-item-space-edge-to-element-horizontal-primary)
      var(--nav-item-space-edge-to-element-vertical-primary)
      var(--nav-item-space-edge-to-element-horizontal-secondary);
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavBar_nt4bn_2 {
    display: flex;
    flex-direction: row;
    gap: 4px;
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavLabel_15uwx_2 {
    color: var(--color-text-primary);
    font-size: var(--text-size-heading-sm);
    font-weight: var(--text-weight-heading-sm);
    line-height: var(--text-line-height-heading-sm);
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNavList_iuatu_2 {
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
  }

  ._spotlight_StepperNavList-item_iuatu_8 {
    margin-bottom: 24px;
    position: relative;
  }

  ._spotlight_StepperNavList-item_iuatu_8:not(:first-child)::before {
    content: ' ';
    background-color: var(--color-border-interactive-tertiary);
    border-radius: 360px;
    height: var(--stepper-connector-size-height-primary);
    width: 3px;
    position: absolute;
    top: -24px;
    left: 22px;
  }
}
@layer spotlight-ui.components {
  ._spotlight_StepperNav_17s1y_2 {
    display: flex;
    flex-direction: column;
    /* gap: var(--space-xxs); */
    /* gap: 8px; */

    ._bar_17s1y_8 {
      padding: var(--space-lg) 0px;
    }

    ._container_17s1y_12 {
      overflow: hidden;
    }

    ._expand_17s1y_16 {
      margin-top: -110%;
      transition: all 0.5s ease-in-out;

      &._expanded_17s1y_20 {
        margin-top: var(--space-none);
      }
    }

    @media (max-width: 768px) {
      /* small displays */
    }
  }
}
@layer spotlight-ui.components {
  ._spotlight_tab-container_mfi68_2 {
    display: flex;
    cursor: pointer;
    color: var(--tab-color-text-primary);
    justify-content: center;
    align-items: center;
    background: var(--tab-color-background-primary);
    border-radius: var(--border-radius-sm) var(--border-radius-sm)
      var(--border-radius-none) var(--border-radius-none);
    gap: var(--tab-space-element-to-element-horizontal-primary);
    & > div,
    & > span {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }
    ._spotlight_tab-label_mfi68_18 {
      display: block;
    }

    &[data-selected] {
      font-weight: var(--tab-text-weight-secondary, 700);
    }
  }
  ._spotlight_tab-underline_mfi68_26 {
    background: transparent;
    &[data-selected] {
      border-bottom: var(--border-weight-heaviest) solid
        var(--tab-color-border-primary);
    }
    &:hover {
      border-bottom: var(--border-weight-heaviest) solid
        var(--tab-color-border-primary);
    }
  }
  ._spotlight_tab-underline_mfi68_26._spotlight_tab-vertical_mfi68_37 {
    border-bottom: none;
    border-left: var(--tab-border-weight-primary) solid
      var(--tab-color-border-primary);
  }

  ._spotlight_tab-ghost_mfi68_43 {
    border-radius: var(--table-space-border-radius-primary);
    border: none;

    &:hover {
      background: var(--tab-color-background-primary);
    }
  }
  ._spotlight_tab-outline_mfi68_51 {
    border-radius: var(--tab-border-radius-primary);
    border: var(--tab-border-weight-secondary) solid
      var(--tab-color-border-primary);
    background: none;
  }
  ._tab_mfi68_57[data-disabled] {
    color: var(--tab-color-text-disabled); /* Disabled tab text color */
    cursor: not-allowed;
  }

  ._spotlight_tab-sm_mfi68_62 {
    font-size: var(--tab-text-size-primary);
    line-height: var(--text-line-height-label-sm);
    padding: var(--tab-space-edge-to-element-vertical-primary)
      var(--tab-space-edge-to-element-horizontal-primary);
  }
  ._spotlight_tab-md_mfi68_68 {
    font-size: var(--tab-text-size-secondary);
    line-height: var(--text-line-height-label-base);
    padding: var(--tab-space-edge-to-element-vertical-primary)
      var(--tab-space-edge-to-element-horizontal-primary);
  }
  ._spotlight_tab-lg_mfi68_74 {
    font-size: var(--tab-text-size-tertiary);
    line-height: var(--text-line-height-label-lg);
    padding: var(--tab-space-edge-to-element-vertical-secondary)
      var(--tab-space-edge-to-element-horizontal-primary);
  }

  ._spotlight_tab-label_mfi68_18 {
    color: var(--tab-color-text-primary);
    font-family: var(--text-font-san-serif);
    font-size: var(--tab-text-size-primary);
    font-style: normal;
    line-height: var(--text-line-height-label-sm);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@layer spotlight-ui.components {
  ._spotlight_tab-tabList_1u84x_2 {
    display: inline-flex;
    align-items: center;
    gap: var(--tab-bar-space-element-to-element-horizontal-primary);
  }
  ._vertical_1u84x_7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    &._spotlight_tab-underline_1u84x_12 {
      border-bottom: none;
      border-left: var(--tab-bar-border-weight-primary) solid
        var(--tab-bar-color-border-primary);
    }
  }

  ._spotlight_tab-container_1u84x_19 {
    border-radius: var(--border-radius-md);
    border: var(--tab-bar-border-weight-primary) solid
      var(--tab-bar-color-border-primary);
    background: var(--tab-bar-color-background-primary);
    padding: var(--tab-bar-space-edge-to-element-vertical-primary)
      var(--tab-bar-space-edge-to-element-horizontal-primary);
  }
  ._spotlight_tab-underline_1u84x_12 {
    border-bottom: var(--tab-bar-border-weight-primary) solid
      var(--tab-bar-color-border-primary);
  }
  ._spotlight_tab-full-width_1u84x_31 {
    width: 100%;
    box-sizing: border-box;
  }
}
@layer spotlight-ui.components {
  ._spotlight_tab-panel_1wdyd_2 {
    width: 100%;
    margin: var(--tabs-space-edge-to-element-horizontal-primary, 8px) 0;
    padding: var(--tabs-space-element-to-element-vertical-primary);
    outline: none;
  }
}
@layer spotlight-ui.components {
  ._tabs_yyfu7_2 {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }

  ._tabs--vertical_yyfu7_9 {
    flex-direction: row;
  }
}
@layer spotlight-ui.components {
  ._spotlight_TreeNav_opxyt_2 {
    display: flex;
    flex-direction: column;
    overflow: auto;
    outline: none;

    & [data-type-leaf][data-level='1'] ._leaf_opxyt_8 {
      padding-left: calc(
        (var(--tree-item-level) - 1) * 28px +
          var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
      );
    }

    &:has(._header_opxyt_15) ._branch_opxyt_15 {
      padding-left: calc(
        (var(--tree-item-level) - 2) * 28px +
          var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
      );
    }

    &:has(._header_opxyt_15) {
      [data-type-leaf] ._leaf_opxyt_8 {
        padding-left: calc(
          (var(--tree-item-level) - 2) * 28px +
            var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
        );
      }

      [data-type-leaf]:not([data-level='2']) ._leaf_opxyt_8 {
        padding-left: calc(
          (var(--tree-item-level) - 3) * 28px +
            var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
        );
      }
    }

    ._label_opxyt_38 {
      align-items: center;
      display: flex;
    }
  }

  ._spotlight_TreeHeader_opxyt_44 {
    background: var(--nav-item-color-background-secondary);
    border-radius: var(--nav-item-border-radius-secondary)
      var(--nav-item-border-radius-secondary) 0px 0px;
    border-bottom: 1px solid var(--color-border-primary);
    color: var(--nav-item-color-text-primary);
    display: flex;
    align-items: center;
    height: 26px;
    padding: var(--nav-item-space-edge-to-element-vertical-primary)
      var(--nav-item-space-edge-to-element-horizontal-primary);

    font-family: var(--text-font-san-serif);
    font-size: var(--text-size-label-sm);
    font-style: normal;
    font-weight: var(--text-weight-label-sm-strong);
    line-height: var(--text-line-height-label-sm);
  }

  ._spotlight_TreeBranch_opxyt_63 {
    background: var(--nav-item-color-background-primary);
    border-radius: var(--nav-item-border-radius-secondary);
    display: flex;
    gap: var(
      --nav-tree-item-branch-space-element-to-element-horizontal-primary
    );
    padding: var(--nav-tree-item-trunk-space-edge-to-element-vertical-primary)
      var(--nav-tree-item-space-edge-to-element-horizontal-primary)
      var(--nav-tree-item-trunk-space-edge-to-element-vertical-primary)
      calc(
        (var(--tree-item-level) - 1) * 28px +
          var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
      );
  }

  ._spotlight_TreeLeaf_opxyt_79 {
    background: var(--nav-item-color-background-primary);
    border-radius: var(--nav-item-border-radius-secondary);
    display: flex;
    gap: var(
      --nav-tree-item-branch-space-element-to-element-horizontal-primary
    );
    padding: var(--nav-tree-item-leaf-space-edge-to-element-vertical-primary)
      var(--nav-tree-item-space-edge-to-element-horizontal-primary)
      var(--nav-tree-item-leaf-space-edge-to-element-vertical-primary)
      calc(
        (var(--tree-item-level) - 2) * 28px +
          var(--nav-tree-item-trunk-space-edge-to-element-horizontal-primary)
      );
    align-items: center;
    ._spotlight_TreeNavButton_opxyt_94[slot='chevron'] {
      visibility: hidden;
    }
  }

  ._spotlight_TreeNavButton_opxyt_94[slot='chevron'] {
    all: unset;
    align-items: center;
    display: flex;
    width: 24px;
    height: 26px;

    svg {
      rotate: -90deg;
      transition: rotate 300ms;
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 3px;
    }
  }

  [data-has-child-items] ._spotlight_TreeNavButton_opxyt_94[slot='chevron'] {
    visibility: visible;
  }

  [data-expanded] ._spotlight_TreeNavButton_opxyt_94[slot='chevron'] i {
    rotate: 90deg;
  }

  ._spotlight_TreeNavLabel_opxyt_125 {
    overflow: hidden;
    color: var(--nav-item-color-text-primary);
    text-overflow: ellipsis;
    font-family: var(--text-font-san-serif);
    font-size: var(--nav-item-text-size-primary);
    font-style: normal;
    font-weight: var(--nav-item-text-weight-primary);
    line-height: var(--nav-item-text-line-height-primary);
    display: flex;
    align-items: center;
  }
}
/* ActionMenu Component Styles */

/*
 * Menu content wrapper - provides layout structure inside Popover
 * Note: Popover already provides background, border-radius, and box-shadow
 */
._menuContent_1mjni_7 {
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: var(--space-xs);
}

._menuContent__item_1mjni_14 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm, 4px);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  transition: background-color 0.2s ease;
  color: var(--color-text-primary, #1a1a1a);
}

._menuContent__item_1mjni_14:hover {
  background-color: var(--color-background-interactive-secondary, #f5f5f5);
}

._menuContent__item_1mjni_14:active {
  background-color: var(--color-background-interactive-tertiary, #e8e8e8);
}

._menuContent__item_1mjni_14:focus-visible {
  outline: 2px solid var(--color-primary-500, #0066cc);
  outline-offset: -2px;
}

._menuContent__item--danger_1mjni_43 {
  color: var(--button-color-background-destructive-primary, #d32f2f);
}

._menuContent__item--danger_1mjni_43:hover {
  background-color: rgba(211, 47, 47, 0.08);
}

._menuContent__item--danger_1mjni_43:active {
  background-color: rgba(211, 47, 47, 0.12);
}

._menuContent__item--disabled_1mjni_55 {
  color: var(--color-text-disabled, #9e9e9e);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

._menuContent__icon_1mjni_62 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  font-size: 16px;
}

._menuContent__label_1mjni_69 {
  flex: 1;
  white-space: nowrap;
}

._menuContent__separator_1mjni_74 {
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background-color: var(--color-border-primary, #e0e0e0);
}
/* TableEmpty Component Styles */

._empty_1efkt_3 {
  background-color: var(--table-body-color-background-primary);
}

._empty__cell_1efkt_7 {
  padding: var(--space-7xl) var(--space-3xl);
  text-align: center;
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._empty__content_1efkt_13 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

._empty__icon_1efkt_20 {
  font-size: 48px;
  color: var(--color-text-secondary);
  opacity: 0.5;
}

._empty__message_1efkt_26 {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

._empty__action_1efkt_33 {
  margin-top: var(--space-md);
}
/* TableHeaderMenu Component Styles */

._menu_12jcs_3 {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-xs);
  background-color: var(--color-background-primary);
}

._menu__item_12jcs_11 {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

._menu__item_12jcs_11:hover {
  background-color: var(--color-background-interactive-secondary);
}

._menu__item_12jcs_11:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

._menu__item--active_12jcs_36 {
  background-color: var(--color-background-interactive-tertiary);
  font-weight: 600;
}

._menu__item--checkbox_12jcs_41 {
  justify-content: flex-start;
}

._menu__item--hidden_12jcs_45 {
  color: var(--color-text-disabled);
  opacity: 0.5;
}

._menu__item--hidden_12jcs_45:hover {
  background-color: var(--color-background-interactive-secondary);
  opacity: 0.7;
}

._menu__icon_12jcs_55 {
  width: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

._menu__check_12jcs_62 {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-primary-500);
}

._menu__arrow_12jcs_68 {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-secondary);
}

._menu__separator_12jcs_74 {
  height: 1px;
  margin: var(--space-xs) var(--space-sm);
  background-color: var(--color-border-primary);
}

/* Scrollable area for long column lists */
._menu__scrollable_12jcs_81 {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

._menu__scrollable_12jcs_81::-webkit-scrollbar {
  width: 8px;
}

._menu__scrollable_12jcs_81::-webkit-scrollbar-track {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-sm);
}

._menu__scrollable_12jcs_81::-webkit-scrollbar-thumb {
  background: var(--color-border-primary);
  border-radius: var(--border-radius-sm);
}

._menu__scrollable_12jcs_81::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Checkbox styling */
._checkbox_12jcs_106 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

._checkbox_12jcs_106 input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

._checkbox_12jcs_106::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-primary);
  transition: all 0.2s ease;
}

._checkbox_12jcs_106 input[type="checkbox"]:checked + ._checkbox__icon_12jcs_136 {
  opacity: 1;
}

._checkbox_12jcs_106 input[type="checkbox"]:checked ~ ._checkbox_12jcs_106::before,
._checkbox_12jcs_106:has(input[type="checkbox"]:checked)::before {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

._checkbox__icon_12jcs_136 {
  position: absolute;
  font-size: 10px;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

._checkbox_12jcs_106 input[type="checkbox"]:checked ~ ._checkbox__icon_12jcs_136 {
  opacity: 1;
}

/* Focus state for checkbox */
._checkbox_12jcs_106 input[type="checkbox"]:focus ~ ._checkbox_12jcs_106::before {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
._tableContainer_frms0_1 {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--table-space-border-radius-primary);
  border: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  background-color: var(--color-background-primary);
}

._table_frms0_1 {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;
  /* Required for column resizing */
}

._table__header_frms0_18 {
  background-color: var(--table-header-color-background-primary);
}

._table__headerRow_frms0_22 {
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._table__headerCell_frms0_26 {
  padding: 0;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  color: var(--table-header-color-text-primary);
  background-color: var(--table-header-color-background-primary);
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  border-right: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

._table__headerCell_frms0_26:last-child {
  border-right: none;
}

._table__headerCell--sortable_frms0_45 ._table__headerContent_frms0_45 {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

._table__headerCell--sortable_frms0_45:hover ._table__headerContent_frms0_45 {
  background-color: var(--color-background-interactive-secondary);
}

._table__headerCell--sortable_frms0_45:active ._table__headerContent_frms0_45 {
  background-color: var(--color-background-interactive-tertiary);
}

._table__headerContent_frms0_45 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-height: 40px;
  background-color: var(--table-header-color-background-primary);
  padding: var(--table-header-space-edge-to-element-vertical-primary)
    var(--table-header-space-edge-to-element-horizontal-primary);
}

._table__headerText_frms0_72 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  cursor: pointer;
}

._table__headerMenu_frms0_80 {
  background-color: var(--table-header-color-background-primary);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  margin-left: auto;
}

._table__sortIcon_frms0_91 {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

._table__sortIcon--active_frms0_99 {
  opacity: 1;
  color: var(--color-primary-500);
}

._table__body_frms0_104 {
  background-color: var(--table-body-color-background-primary);
}

._table__row_frms0_108 {
  background-color: var(--table-body-color-background-primary);
  transition: background-color 0.15s ease;
}

._table__row--striped_frms0_113 {
  background-color: var(--table-body-color-background-secondary);
}

._table__row--hoverable_frms0_117 {
  cursor: pointer;
}

._table__row--hoverable_frms0_117:hover {
  background-color: var(--table-row-color-background-hover);
}

._table__cell_frms0_125 {
  padding: var(--table-body-space-edge-to-element-vertical-primary)
    var(--table-body-space-edge-to-element-horizontal-primary);
  color: var(--color-text-primary);
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  border-right: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._table__cell_frms0_125:last-child {
  border-right: none;
}

._editCell_frms0_137 {
  padding: var(--table-body-space-edge-to-element-vertical-primary)
    var(--table-body-space-edge-to-element-horizontal-primary);
  color: var(--color-text-primary);
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  border-right: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  vertical-align: top;
}

._editCell_frms0_137:last-child {
  border-right: none;
}

._table--withFilters_frms0_150 ._table__headerContent_frms0_45 {
  padding: var(--table-header-space-edge-to-element-vertical-primary)
    var(--table-header-space-edge-to-element-horizontal-primary);
}

._table--compact_frms0_155 ._table__headerContent_frms0_45 {
  padding: var(--table-header-space-edge-to-element-vertical-secondary)
    var(--table-header-space-edge-to-element-horizontal-secondary);
}

._table--compact_frms0_155 ._table__cell_frms0_125 {
  padding: var(--table-body-space-edge-to-element-vertical-secondary)
    var(--table-body-space-edge-to-element-horizontal-secondary);
}

._table--compact_frms0_155 ._editCell_frms0_137 {
  padding: var(--table-body-space-edge-to-element-vertical-secondary)
    var(--table-body-space-edge-to-element-horizontal-secondary);
}

._table--stickyHeader_frms0_170 ._table__headerCell_frms0_26 {
  position: sticky;
  top: 0;
  z-index: 10;
}

._table--stickyHeader_frms0_170 ._table__filterCell_frms0_176 {
  position: sticky;
  top: 48px;
  z-index: 9;
}

._table--compact_frms0_155._table--stickyHeader_frms0_170 ._table__filterCell_frms0_176 {
  top: 39px;
}

/* Sticky footer for traditional mode */
._tablePaginationWrapper_frms0_187 {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: var(--color-background-primary);
  border-top: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._table--stickyFooter_frms0_195 ._tablePaginationWrapper_frms0_187 {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

._table__filterRow_frms0_201 {
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  background-color: var(--color-background-secondary);
}

._table__filterCell_frms0_176 {
  padding: var(--table-header-space-edge-to-element-vertical-secondary) 0;
  background-color: var(--color-background-secondary);
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  vertical-align: middle;
}

._table__filterCell_frms0_176:last-child {
  border-right: none;
}

._table--compact_frms0_155._table--withFilters_frms0_150 ._table__filterCell_frms0_176 {
  padding: var(--table-header-space-edge-to-element-vertical-secondary) 0;
}

._loadingOverlay_frms0_221 {
  position: relative;
}

._table__headerCell_frms0_26:focus,
._table__row_frms0_108:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  ._table__headerContent_frms0_45 {
    padding: var(--table-header-space-edge-to-element-vertical-secondary)
      var(--table-header-space-edge-to-element-horizontal-tertairy);
  }

  ._table__headerCell_frms0_26 {
    font-size: 13px;
  }

  ._table__cell_frms0_125 {
    padding: var(--table-body-space-edge-to-element-vertical-secondary)
      var(--table-body-space-edge-to-element-horizontal-secondary);
    font-size: 13px;
  }

  ._table_frms0_1 {
    font-size: 13px;
  }
}

._table__headerCell--resizing_frms0_252 {
  user-select: none;
}

._table__resizeHandle_frms0_256 {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 1;
}

._table__resizeHandle_frms0_256::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

._table__resizeHandle_frms0_256:hover::after {
  background-color: var(--color-primary-300);
}

._table__resizeHandle--active_frms0_283::after {
  background-color: var(--color-primary-500);
  width: 2px;
}

/* Full-height visual indicator during column resize */
._table__resizeHandle--active_frms0_283::before {
  content: '';
  position: absolute;
  top: -100vh;
  bottom: -100vh;
  right: 1px;
  width: 2px;
  background-color: var(--color-primary-500);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  pointer-events: none;
}

._table__headerCell--resizing_frms0_252 {
  background-color: var(--color-background-interactive-tertiary);
  cursor: col-resize !important;
  user-select: none;
}

._table__headerCell--dragging_frms0_308 {
  opacity: 0.5;
  background-color: var(--color-background-interactive-secondary);
  cursor: grabbing !important;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

._table__row--grouped_frms0_316 {
  background-color: var(--color-background-secondary);
  font-weight: 600;
}

._table__row--grouped_frms0_316:hover {
  background-color: var(--color-background-interactive-secondary);
}

._table__cell--grouped_frms0_325 {
  font-weight: 600;
  color: var(--color-text-primary);
}

._table__groupButton_frms0_330 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  transition: color 0.2s ease;
}

._table__groupButton_frms0_330:hover {
  color: var(--color-primary-500);
}

._table__groupButton_frms0_330:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: 4px;
}

._table__groupIcon_frms0_356 {
  font-size: 12px;
  transition: transform 0.2s ease;
  color: var(--color-text-secondary);
}

._table__groupValue_frms0_362 {
  margin-left: var(--space-xs);
  font-weight: 600;
}

._table__groupCount_frms0_367 {
  margin-left: var(--space-xs);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Vertical Scroll Layout Styles */
._tableWrapper_frms0_375 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--table-space-border-radius-primary);
  border: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  background-color: var(--color-background-primary);
  overflow: hidden;
}

._tableHeaderContainer_frms0_386 {
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  background-color: var(--table-header-color-background-primary);
  position: sticky;
  top: 0;
  z-index: 20;
}

._tableHeaderContainer_frms0_386 table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

._tableBodyContainer_frms0_402 {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1 auto;
  background-color: var(--table-body-color-background-primary);
}

._tableBodyContainer_frms0_402 table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

._tablePaginationContainer_frms0_415 {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: var(--color-background-primary);
  border-top: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

/* Scrollbar styling for vertical scroll containers */

/* Hide scrollbar in header container */
._tableHeaderContainer_frms0_386::-webkit-scrollbar {
  height: 0;
  width: 0;
  display: none;
}

/* Visible scrollbar in body container */
._tableBodyContainer_frms0_402::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

._tableBodyContainer_frms0_402::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

._tableBodyContainer_frms0_402::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

._tableBodyContainer_frms0_402::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

@media print {
  ._tableContainer_frms0_1 {
    border: none;
    overflow: visible;
  }

  ._table__row--hoverable_frms0_117:hover {
    background-color: inherit;
  }

  /* Unstick footer for printing */
  ._tablePaginationWrapper_frms0_187 {
    position: static;
  }

  /* Print mode for vertical scroll layout */
  ._tableWrapper_frms0_375 {
    display: block;
  }

  ._tableBodyContainer_frms0_402 {
    overflow: visible;
    height: auto !important;
    max-height: none !important;
  }

  ._tableHeaderContainer_frms0_386,
  ._tablePaginationContainer_frms0_415 {
    position: static;
  }
}
._comboFilter_1rmks_1 {
  position: relative;
  width: 100%;
  background: var(--color-background-primary);
}

._comboFilter__input_1rmks_7 {
  position: relative;
  display: flex;
  align-items: center;
}

._comboFilter__input_1rmks_7>div {
  flex: 1;
}

/* Popover handles positioning, border, and box-shadow - we just provide content styling */
._comboFilter__dropdown_1rmks_18 {
  min-width: 200px;
  max-height: 415px;
  overflow: auto;
}

._comboFilter__popover_1rmks_24 {
  display: flex;
  max-width: fit-content;
  max-height: fit-content;
}

._comboFilter--disabled_1rmks_30 {
  opacity: 0.6;
  pointer-events: none;
}/* Date Range Picker Container - Popover handles border/shadow */
._dateRangePicker_53ft3_2 {
  padding: var(--space-md);
  min-width: 320px;
}

/* Range Display */
._dateRangePicker__display_53ft3_8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--space-md);
}

._dateRangePicker__rangeText_53ft3_18 {
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: 500;
}

._dateRangePicker__clear_53ft3_24 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
  border-radius: var(--border-radius-sm);
  padding: 0;
}

._dateRangePicker__clear_53ft3_24:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background-interactive-secondary);
}

._dateRangePicker__clear_53ft3_24 i {
  font-size: 12px;
}

/* Calendar Container */
._dateRangePicker__calendar_53ft3_49 {
  margin-bottom: var(--space-md);
}

/* Action Buttons */
._dateRangePicker__actions_53ft3_54 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-primary);
  gap: var(--space-sm);
}
/* TableLoading Component Styles */

/* Overlay variant */
._loading_1y88f_4 {
  background-color: var(--table-body-color-background-primary);
}

._loading__cell_1y88f_8 {
  padding: 0;
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._loading__overlay_1y88f_13 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: var(--color-background-primary);
  opacity: 0.95;
}

._loading__spinner_1y88f_22 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

._loading__message_1y88f_29 {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Spinner animation */
._spinner_1y88f_37 {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border-primary);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: _spin_1y88f_37 0.8s linear infinite;
}

@keyframes _spin_1y88f_37 {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton variant */
._skeletonRow_1y88f_53 {
  background-color: var(--table-body-color-background-primary);
}

._skeletonCell_1y88f_57 {
  padding: var(--table-body-space-edge-to-element-vertical-primary)
           var(--table-body-space-edge-to-element-horizontal-primary);
  border-bottom: var(--table-border-weight-primary) solid var(--table-color-border-primary);
}

._skeleton_1y88f_53 {
  height: 20px;
  background: linear-gradient(
    90deg,
    var(--color-background-interactive-tertiary) 0%,
    var(--color-background-interactive-quinary) 50%,
    var(--color-background-interactive-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--border-radius-sm);
  animation: _shimmer_1y88f_1 1.5s ease-in-out infinite;
}

@keyframes _shimmer_1y88f_1 {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* TablePagination Component Styles */

._pagination_a2kn0_3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  background-color: var(--color-background-primary);
  border-top: var(--table-border-weight-primary) solid var(--table-color-border-primary);
  gap: var(--space-xl);
  flex-wrap: wrap;
}

/* Navigation controls section */
._pagination__controls_a2kn0_15 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Page info (page input) */
._pagination__pageInfo_a2kn0_22 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 var(--space-sm);
}

._pagination__label_a2kn0_29 {
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
}

._pagination__input_a2kn0_35 {
  width: 60px;
  padding: var(--space-xs) var(--space-sm);
  font-size: 14px;
  text-align: center;
  border: var(--border-weight-default) solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease;
}

._pagination__input_a2kn0_35:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

._pagination__input_a2kn0_35:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-background-disabled);
}

/* Remove number input arrows in WebKit browsers */
._pagination__input_a2kn0_35::-webkit-outer-spin-button,
._pagination__input_a2kn0_35::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove number input arrows in Firefox */
._pagination__input_a2kn0_35[type=number] {
  -moz-appearance: textfield;
}

/* Info section (page size and item count) */
._pagination__info_a2kn0_71 {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

._pagination__pageSize_a2kn0_77 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

._pagination__select_a2kn0_83 {
  padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-sm);
  font-size: 14px;
  border: var(--border-weight-default) solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

._pagination__select_a2kn0_83:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

._pagination__select_a2kn0_83:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-background-disabled);
}

._pagination__itemCount_a2kn0_105 {
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Responsive design */
@media (max-width: 768px) {
  ._pagination_a2kn0_3 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }

  ._pagination__controls_a2kn0_15 {
    justify-content: center;
  }

  ._pagination__info_a2kn0_71 {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
  }

  ._pagination__pageSize_a2kn0_77,
  ._pagination__itemCount_a2kn0_105 {
    justify-content: center;
  }
}
/* ============================================
   TABLE ROW EDIT - INLINE EDITING STYLES
   ============================================ */

/* Edit Row - Replaces normal row with visual indicator */
._editRow_kwlsd_6 {
  background-color: var(--color-background-info-secondary);
  /* Light blue to indicate edit mode */
  border-left: 3px solid var(--color-primary-500);
  border: var(--border-weight-default) solid var(--color-border-primary);
  position: relative;
}

._editRow--striped_kwlsd_14 {
  background-color: var(--color-background-info-secondary);
  /* Same light blue for consistency */
}

/* Edit Cell Wrapper - contains input elements */
._editCell__wrapper_kwlsd_20 {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

/* Readonly cells (actions column) */
._editCell__readonly_kwlsd_27 {
  display: flex;
  align-items: center;
  min-height: 36px;
  /* Match input height */
}

/* ============================================
   ACTION BUTTONS - UPDATE/CANCEL
   ============================================ */

/* Overlay row for buttons - positioned to not take up height */
._editRow__overlay_kwlsd_39 {
  height: 0;
  position: relative;
}

/* Cell that spans full width and positions buttons */
._editRow__actionsCell_kwlsd_45 {
  padding: 0;
  border: none;
  height: 0;
  overflow: visible;
  position: relative;
}

/* Buttons positioned at bottom center */
._editRow__buttons_kwlsd_54 {
  position: absolute;
  top: 0px;
  /* Position at the bottom edge of the edit row */
  left: 50%;
  transform: translate(-50%, -2%);
  /* Center horizontally and move up by button height */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-background-info-secondary);
  /* Match edit row background */
  border-bottom-left-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
  border: var(--border-weight-default) solid var(--color-border-primary);
  border-top: none;
  z-index: 100;
  white-space: nowrap;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  ._editCell_kwlsd_20 {
    padding: var(--table-body-space-edge-to-element-vertical-secondary) var(--table-body-space-edge-to-element-horizontal-secondary);
  }

  ._editRow__buttons_kwlsd_54 {
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  ._editRow__buttons_kwlsd_54>button {
    width: auto;
    min-width: 100px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.error-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: #fee;
  border: 1px solid #fcc;
  border-left: 4px solid #c33;
  border-radius: 4px;
  color: #c33;
  font-size: 14px;
  line-height: 1.5;
  animation: slideDown 0.3s ease-out;
  margin-bottom: 20px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-message svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.error-message span {
  flex: 1;
}

/* Floating Label Form Group */
.form-group-floating {
  position: relative;
  margin: 8px;
}

.floating-input {
  width: 100%;
  padding: 16px 12px 8px 12px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  background: white;
  box-sizing: border-box;
}

.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 400;
  color: #6c757d;
  background: white;
  padding: 0 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  user-select: none;
}

.required {
  color: #dc3545;
  margin-left: 2px;
}

/* Floating label active state */
.floating-input:focus + .floating-label,
.floating-input.has-value + .floating-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #17a2b8;
  padding: 0 6px;
}

/* Input focus state */
.floating-input:focus {
  border-color: #17a2b8;
  box-shadow: 0 0 0 4px rgba(23, 162, 184, 0.15);
}

/* Input hover state */
.floating-input:hover:not(:focus):not(.input-error) {
  border-color: #adb5bd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Error state */
.form-group-floating.has-error .floating-input {
  border-color: #dc3545;
  background: #fff5f5;
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

.form-group-floating.has-error .floating-input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
}

.form-group-floating.has-error .floating-label {
  color: #dc3545;
}

.form-group-floating.has-error .floating-input:focus + .floating-label,
.form-group-floating.has-error .floating-input.has-value + .floating-label {
  color: #dc3545;
}

/* Field error message */
.field-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeIn 0.3s ease-out;
}

.field-error::before {
  content: "⚠";
  font-size: 14px;
}

/* Disabled state */
.floating-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #dee2e6;
}

.floating-input:disabled + .floating-label {
  color: #adb5bd;
  cursor: not-allowed;
}

/* Autofill styles */
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #212529;
  transition: background-color 5000s ease-in-out 0s;
}

.floating-input:-webkit-autofill + .floating-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 500;
  color: #17a2b8;
}

/* Focus visible for accessibility */
.floating-input:focus-visible {
  outline: 1px solid #60cedf;
  outline-offset: 0px;
}

/* Responsive */
@media (max-width: 576px) {
  .floating-label {
    font-size: 13px;
  }

  .floating-input {
    padding: 14px 10px 6px 10px;
    font-size: 13px;
  }

  .floating-input:focus + .floating-label,
  .floating-input.has-value + .floating-label {
    font-size: 11px;
  }
}

.floating-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

.floating-select:disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  cursor: not-allowed;
}

.floating-select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a2b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.floating-select option {
  padding: 10px;
  background: white;
  color: #212529;
}

.floating-select option:disabled {
  color: #adb5bd;
}

/* Responsive select */
@media (max-width: 576px) {
  .floating-select {
    background-size: 14px;
    background-position: right 10px center;
    padding-right: 36px;
  }
}



/*
 * Design Token System
 *
 * This compiled CSS includes comprehensive documentation on token usage,
 * naming conventions, and best practices. The documentation is embedded
 * as CSS comments to help both developers and AI systems understand
 * how to properly use our design tokens.
 *
 * Key Documentation Sections:
 * - Token naming conventions (color, spacing, typography)
 * - Interactive state management
 * - Internal-only tokens (do not reference externally)
 * - Usage guidelines and best practices
 * - Common patterns and examples
 */
@layer spotlight-tokens {
  /*
   * ⚠️ INTERNAL USE ONLY - DO NOT REFERENCE EXTERNALLY ⚠️
   *
   * This file contains co-brand tokens that should ONLY be used internally
   * within this design token system. These tokens are brand-specific primitives
   * and should NOT be referenced by:
   * - External applications using this package
   * - Component libraries consuming these tokens
   * - Any code outside of this repository
   *
   * Instead, use the semantic tokens defined in other files (e.g., _theme.scss,
   * _interactive.scss) which provide meaningful, context-aware token names.
   */
  /* co-brand */
  :root {
    /* company 1 */
    /* color */
    ---co-brand-primary-100: hsl(220 100% 95%);
    ---co-brand-primary-1000: hsl(224 82% 48%);
    ---co-brand-primary-1100: hsl(224 82% 52%);
    ---co-brand-primary-1200: hsl(223 71% 25%);
    ---co-brand-primary-200: hsl(220 100% 92%);
    ---co-brand-primary-300: hsl(217 100% 90%);
    ---co-brand-primary-400: hsl(215 100% 88%);
    ---co-brand-primary-500: hsl(218 100% 84%);
    ---co-brand-primary-600: hsl(220 95% 79%);
    ---co-brand-primary-700: hsl(220 93% 72%);
    ---co-brand-primary-800: hsl(224 90% 61%);
    ---co-brand-primary-900: hsl(224 88% 52%);
    ---co-brand-primary-dark-100: hsl(220 45% 8%);
    ---co-brand-primary-dark-1000: hsl(221 85% 63%);
    ---co-brand-primary-dark-1100: hsl(219 100% 77%);
    ---co-brand-primary-dark-1200: hsl(218 100% 91%);
    ---co-brand-primary-dark-200: hsl(220 38% 11%);
    ---co-brand-primary-dark-300: hsl(222 55% 18%);
    ---co-brand-primary-dark-400: hsl(222 64% 24%);
    ---co-brand-primary-dark-500: hsl(222 59% 29%);
    ---co-brand-primary-dark-600: hsl(222 53% 35%);
    ---co-brand-primary-dark-700: hsl(221 50% 42%);
    ---co-brand-primary-dark-800: hsl(221 50% 50%);
    ---co-brand-primary-dark-900: hsl(221 100% 68%);
    ---co-brand-secondary-100: hsl(240 20% 99%);
    ---co-brand-secondary-1000: hsl(240 3% 21%);
    ---co-brand-secondary-1100: hsl(240 2% 40%);
    ---co-brand-secondary-1200: hsl(240 5% 13%);
    ---co-brand-secondary-200: hsl(240 9% 98%);
    ---co-brand-secondary-300: hsl(240 7% 95%);
    ---co-brand-secondary-400: hsl(240 7% 92%);
    ---co-brand-secondary-500: hsl(240 5% 89%);
    ---co-brand-secondary-600: hsl(240 6% 86%);
    ---co-brand-secondary-700: hsl(240 5% 82%);
    ---co-brand-secondary-800: hsl(240 5% 75%);
    ---co-brand-secondary-900: hsl(240 5% 12%);
    ---co-brand-secondary-dark-100: hsl(254 30% 8%);
    ---co-brand-secondary-dark-1000: hsl(256 37% 51%);
    ---co-brand-secondary-dark-1100: hsl(256 100% 82%);
    ---co-brand-secondary-dark-1200: hsl(252 100% 93%);
    ---co-brand-secondary-dark-200: hsl(254 29% 12%);
    ---co-brand-secondary-dark-300: hsl(256 39% 19%);
    ---co-brand-secondary-dark-400: hsl(257 43% 25%);
    ---co-brand-secondary-dark-500: hsl(258 41% 29%);
    ---co-brand-secondary-dark-600: hsl(257 37% 34%);
    ---co-brand-secondary-dark-700: hsl(256 35% 41%);
    ---co-brand-secondary-dark-800: hsl(257 37% 52%);
    ---co-brand-secondary-dark-900: hsl(259 63% 59%);
  }
  .netflix-brand {
    /* Netflix */
    /* color */
    ---co-brand-primary-100: hsl(357 100% 96%);
    ---co-brand-primary-1000: hsl(357 98% 38%);
    ---co-brand-primary-1100: hsl(357 98% 38%);
    ---co-brand-primary-1200: hsl(357 98% 38%);
    ---co-brand-primary-200: hsl(357 100% 91%);
    ---co-brand-primary-300: hsl(357 100% 86%);
    ---co-brand-primary-400: hsl(357 100% 81%);
    ---co-brand-primary-500: hsl(357 100% 76%);
    ---co-brand-primary-600: hsl(357 99% 67%);
    ---co-brand-primary-700: hsl(357 95% 60%);
    ---co-brand-primary-800: hsl(357 90% 53%);
    ---co-brand-primary-900: hsl(357 92% 47%);
    ---co-brand-primary-dark-100: hsl(357 100% 96%);
    ---co-brand-primary-dark-1000: hsl(357 98% 38%);
    ---co-brand-primary-dark-1100: hsl(357 100% 23%);
    ---co-brand-primary-dark-1200: hsl(356 100% 10%);
    ---co-brand-primary-dark-200: hsl(357 100% 91%);
    ---co-brand-primary-dark-300: hsl(357 100% 86%);
    ---co-brand-primary-dark-400: hsl(357 100% 81%);
    ---co-brand-primary-dark-500: hsl(357 100% 76%);
    ---co-brand-primary-dark-600: hsl(357 99% 67%);
    ---co-brand-primary-dark-700: hsl(357 95% 60%);
    ---co-brand-primary-dark-800: hsl(357 90% 53%);
    ---co-brand-primary-dark-900: hsl(357 92% 47%);
    ---co-brand-secondary-100: hsl(357 100% 96%);
    ---co-brand-secondary-1000: hsl(357 98% 38%);
    ---co-brand-secondary-1100: hsl(0 0% 100%);
    ---co-brand-secondary-1200: hsl(0 0% 100%);
    ---co-brand-secondary-200: hsl(357 100% 91%);
    ---co-brand-secondary-300: hsl(357 100% 86%);
    ---co-brand-secondary-400: hsl(357 100% 81%);
    ---co-brand-secondary-500: hsl(357 100% 76%);
    ---co-brand-secondary-600: hsl(357 99% 67%);
    ---co-brand-secondary-700: hsl(357 95% 60%);
    ---co-brand-secondary-800: hsl(357 90% 53%);
    ---co-brand-secondary-900: hsl(357 92% 47%);
    ---co-brand-secondary-dark-100: hsl(357 100% 96%);
    ---co-brand-secondary-dark-1000: hsl(357 98% 38%);
    ---co-brand-secondary-dark-1100: hsl(0 0% 100%);
    ---co-brand-secondary-dark-1200: hsl(0 0% 100%);
    ---co-brand-secondary-dark-200: hsl(357 100% 91%);
    ---co-brand-secondary-dark-300: hsl(357 100% 86%);
    ---co-brand-secondary-dark-400: hsl(357 100% 81%);
    ---co-brand-secondary-dark-500: hsl(357 100% 76%);
    ---co-brand-secondary-dark-600: hsl(357 99% 67%);
    ---co-brand-secondary-dark-700: hsl(357 95% 60%);
    ---co-brand-secondary-dark-800: hsl(357 90% 53%);
    ---co-brand-secondary-dark-900: hsl(357 92% 47%);
  }
  .paramount-brand {
    /* Paramount */
    /* color */
    ---co-brand-primary-100: hsl(216 100% 96%);
    ---co-brand-primary-1000: hsl(232 100% 38%);
    ---co-brand-primary-1100: hsl(232 100% 38%);
    ---co-brand-primary-1200: hsl(232 100% 38%);
    ---co-brand-primary-200: hsl(215 100% 89%);
    ---co-brand-primary-300: hsl(215 100% 82%);
    ---co-brand-primary-400: hsl(215 100% 75%);
    ---co-brand-primary-500: hsl(214 100% 69%);
    ---co-brand-primary-600: hsl(216 100% 59%);
    ---co-brand-primary-700: hsl(216 100% 50%);
    ---co-brand-primary-800: hsl(222 100% 48%);
    ---co-brand-primary-900: hsl(228 100% 45%);
    ---co-brand-primary-dark-100: hsl(216 100% 96%);
    ---co-brand-primary-dark-1000: hsl(232 100% 38%);
    ---co-brand-primary-dark-1100: hsl(236 100% 25%);
    ---co-brand-primary-dark-1200: hsl(240 100% 14%);
    ---co-brand-primary-dark-200: hsl(215 100% 89%);
    ---co-brand-primary-dark-300: hsl(215 100% 82%);
    ---co-brand-primary-dark-400: hsl(215 100% 75%);
    ---co-brand-primary-dark-500: hsl(214 100% 69%);
    ---co-brand-primary-dark-600: hsl(216 100% 59%);
    ---co-brand-primary-dark-700: hsl(216 100% 50%);
    ---co-brand-primary-dark-800: hsl(222 100% 48%);
    ---co-brand-primary-dark-900: hsl(228 100% 45%);
    ---co-brand-secondary-100: hsl(216 100% 96%);
    ---co-brand-secondary-1000: hsl(232 100% 38%);
    ---co-brand-secondary-1100: hsl(0 0% 100%);
    ---co-brand-secondary-1200: hsl(0 0% 100%);
    ---co-brand-secondary-200: hsl(215 100% 89%);
    ---co-brand-secondary-300: hsl(215 100% 82%);
    ---co-brand-secondary-400: hsl(215 100% 75%);
    ---co-brand-secondary-500: hsl(214 100% 69%);
    ---co-brand-secondary-600: hsl(216 100% 59%);
    ---co-brand-secondary-700: hsl(216 100% 50%);
    ---co-brand-secondary-800: hsl(222 100% 48%);
    ---co-brand-secondary-900: hsl(228 100% 45%);
    ---co-brand-secondary-dark-100: hsl(216 100% 96%);
    ---co-brand-secondary-dark-1000: hsl(232 100% 38%);
    ---co-brand-secondary-dark-1100: hsl(0 0% 100%);
    ---co-brand-secondary-dark-1200: hsl(0 0% 100%);
    ---co-brand-secondary-dark-200: hsl(215 100% 89%);
    ---co-brand-secondary-dark-300: hsl(215 100% 82%);
    ---co-brand-secondary-dark-400: hsl(215 100% 75%);
    ---co-brand-secondary-dark-500: hsl(214 100% 69%);
    ---co-brand-secondary-dark-600: hsl(216 100% 59%);
    ---co-brand-secondary-dark-700: hsl(216 100% 50%);
    ---co-brand-secondary-dark-800: hsl(222 100% 48%);
    ---co-brand-secondary-dark-900: hsl(228 100% 45%);
  }
  /* Design Token System Documentation - Read First */
  /*
   * ============================================================================
   * DESIGN TOKEN SYSTEM - MACHINE-READABLE METADATA
   * ============================================================================
   *
   * @system: Common UI Design Tokens
   * @version: 0.1.18
   * @package: @castandcrew/common-ui-design-tokens
   * @total-tokens: 2188
   * @documented-tokens: 304
   * @categories: color, spacing, typography, border, size, interactive
   * @ai-compatible: true
   * @human-readable: true
   *
   * TOKEN SCHEMA:
   * @naming-convention: BEM-inspired semantic naming
   * @structure: category-property-variant-hierarchy-state
   * @separator: hyphen (-)
   * @prefix: --
   * @scope: :root (CSS custom properties)
   *
   * SUPPORTED FEATURES:
   * @interactive-states: enabled, hovered, pressed, focused, disabled
   * @semantic-colors: brand, critical, attention, info, positive, magic, neutral
   * @spacing-scale: 0px to 96px (15 steps)
   * @typography-scale: 10px to 80px (multiple categories)
   * @border-radius: 0px to 100% (7 steps)
   *
   * AI PARSING INSTRUCTIONS:
   * @parse-method: hyphen-split
   * @ignore-prefix: --
   * @read-inline-comments: true
   * @check-usage-counts: true
   * @follow-best-practices: see BEST PRACTICES section
   * @avoid-internal-tokens: co-brand, ref, disabled
   *
   * COMPATIBILITY:
   * @css-version: CSS3+ Custom Properties
   * @browser-support: Modern browsers (Chrome 49+, Firefox 31+, Safari 9.1+)
   * @framework-agnostic: true
   * @build-tool: SASS/SCSS
   */
  /*
   * ============================================================================
   * DESIGN TOKEN SYSTEM GUIDE
   * ============================================================================
   *
   * This guide provides comprehensive documentation on how to use our design
   * token system. It covers naming conventions, token structure, usage guidelines,
   * and best practices for both human developers and AI systems.
   */
  /*
   * ============================================================================
   * QUICK REFERENCE INDEX
   * ============================================================================
   *
   * TOKEN CATEGORIES (in compiled style.css):
   * ┌─────────────────────────────────────────────────────────────────┐
   * │ Category          │ Line Range    │ Count │ Documentation       │
   * ├─────────────────────────────────────────────────────────────────┤
   * │ Co-brand          │ ~30-190       │ 120   │ Internal only ⚠️   │
   * │ System Guide      │ ~194-596      │ N/A   │ Read this first 📖 │
   * │ Ref Tokens        │ ~600-900      │ 400+  │ Internal only ⚠️   │
   * │ Disabled Tokens   │ ~900-1000     │ 50    │ Internal only ⚠️   │
   * │ Interactive       │ ~1000-1100    │ 60    │ Use with classes ✓ │
   * │ Theme Colors      │ ~1100-1400    │ 300+  │ Primary tokens ✓   │
   * │ Grid/Spacing      │ ~1900-2000    │ 15    │ Most used: md ⭐   │
   * │ Border Tokens     │ ~2000-2100    │ 10    │ Most used: sm ⭐   │
   * │ Size Tokens       │ ~2100-2200    │ 20    │ Elements & icons   │
   * │ Typography        │ ~2500-2900    │ 100+  │ Text scale ✓       │
   * │ Utility Classes   │ ~3000-5000    │ 1000+ │ Component styles   │
   * └─────────────────────────────────────────────────────────────────┘
   *
   * MOST COMMONLY USED TOKENS:
   * - Spacing:    --space-md (8px) - 52 uses ⭐⭐⭐
   * - Border:     --border-radius-sm (8px) - 17 uses ⭐⭐⭐
   * - Text Size:  --text-size-label-sm (14px) - 13 uses ⭐⭐⭐
   * - Text Weight: --text-weight-medium (500) - 11 uses ⭐⭐⭐
   * - Color:      --color-background-interactive-secondary - 19 uses ⭐⭐⭐
   *
   * SEARCH KEYWORDS FOR AI:
   * button, input, card, container, nav, alert, badge, text, spacing,
   * color, interactive, brand, critical, attention, positive, hover,
   * focus, disabled, primary, secondary
   */
  /*
   * ----------------------------------------------------------------------------
   * INTERNAL-ONLY TOKENS - DO NOT REFERENCE EXTERNALLY
   * ----------------------------------------------------------------------------
   *
   * The following token files are for INTERNAL USE ONLY and should NEVER be
   * referenced by external applications, component libraries, or any code
   * outside of this repository:
   *
   * - co-brand tokens: Brand-specific primitive tokens
   * - ref tokens: Low-level reference/primitive tokens
   * - disabled tokens: Low-level disabled state primitives
   *
   * ⚠️ ALWAYS use semantic tokens from _theme.scss, _interactive.scss, or
   * other semantic token files instead.
   */
  /*
   * ----------------------------------------------------------------------------
   * COLOR TOKEN NAMING CONVENTION
   * ----------------------------------------------------------------------------
   *
   * Structure: category - property - variant - hierarchy - state
   *
   * Example: --color-background-interactive-primary-enabled
   *
   * BREAKDOWN:
   * - category:   "color" (the type of token)
   * - property:   "background" (what the color applies to: background, border, text, content)
   * - variant:    "interactive" (the context: interactive, brand, critical, attention, etc.)
   * - hierarchy:  "primary" (importance level: primary, secondary, tertiary, quaternary, etc.)
   * - state:      "enabled" (interaction state: enabled, hovered, pressed, focused, disabled)
   *
   * PROPERTIES:
   * - background: Surface colors for backgrounds
   * - border: Border and outline colors
   * - text: Text colors for typography
   * - content: Icon and graphic content colors
   *
   * VARIANTS (Semantic):
   * - interactive: General interactive elements
   * - brand: Brand-specific colors
   * - brand-accent: Secondary brand colors
   * - critical: Error/destructive states
   * - attention: Warning/attention states
   * - info: Informational states
   * - positive: Success/positive states
   * - magic: AI/magic feature colors
   * - neutral: Neutral semantic colors
   *
   * HIERARCHY:
   * - primary: Most prominent/important
   * - secondary: Second level importance
   * - tertiary: Third level importance
   * - quaternary: Fourth level importance
   * - quinary: Fifth level importance
   * - (continues as needed)
   *
   * STATES (for interactive tokens only):
   * - enabled: Default/resting state
   * - hovered: Mouse hover state
   * - pressed: Active/clicked state
   * - focused: Keyboard focus state
   * - disabled: Disabled/inactive state
   */
  /*
   * ----------------------------------------------------------------------------
   * SPACING TOKEN NAMING CONVENTION
   * ----------------------------------------------------------------------------
   *
   * Structure: category - first object - to - second object - direction - hierarchy
   *
   * Example: --spacing-edge-to-element-horizontal-primary
   *
   * BREAKDOWN:
   * - category:       "spacing" (the type of token)
   * - first object:   "edge" (what we're spacing FROM)
   * - to:             "to" (connector word)
   * - second object:  "element" (what we're spacing TO)
   * - direction:      "horizontal" (which axis)
   * - hierarchy:      "primary" (size importance)
   *
   * FIRST OBJECT (where spacing starts):
   * - edge: Container edge/boundary
   * - element: Generic UI element
   * - text: Text content
   * - container: Container component
   * - button: Button component
   *
   * SECOND OBJECT (where spacing ends):
   * - element: Generic UI element
   * - text: Text content
   * - container: Container component
   * - button: Button component
   *
   * Note: "edge" can ONLY be the first object, not the second
   *
   * DIRECTION:
   * - horizontal: Left/right axis
   * - vertical: Top/bottom axis
   *
   * Important: We do NOT differentiate between top/bottom or left/right in the
   * token name. Specific directional context (e.g., "top padding" vs "bottom
   * padding") should be documented in the token's usage description.
   *
   * HIERARCHY (indicates spacing size):
   * - primary: Largest/most prominent spacing
   * - secondary: Second level spacing
   * - tertiary: Third level spacing
   * - quaternary: Fourth level spacing
   * - (continues as needed)
   */
  /*
   * ----------------------------------------------------------------------------
   * INTERACTIVE STATES & CLASSES
   * ----------------------------------------------------------------------------
   *
   * INTERACTIVE TOKENS:
   * Interactive tokens automatically update based on user interaction state.
   * They are designed to work with the .spotlight_interactive class.
   *
   * HOW IT WORKS:
   * 1. Interactive tokens reference the -enabled state by default
   * 2. When used with .spotlight_interactive class, they automatically
   *    transition between states based on user interaction
   * 3. States map to CSS pseudo-classes and data attributes:
   *    - enabled:  Default state (no modifier)
   *    - hovered:  :hover, [data-hovered]
   *    - pressed:  :active, [data-pressed]
   *    - focused:  :focus, :focus-within, [data-focused]
   *    - disabled: :disabled, [data-disabled]
   *
   * EXAMPLE USAGE:
   *
   * HTML:
   * <button class="spotlight_interactive">Click me</button>
   *
   * CSS:
   * .button {
   *   background: var(--color-background-interactive-primary);
   * }
   *
   * This will automatically use:
   * - --color-background-interactive-primary-enabled (default)
   * - --color-background-interactive-primary-hovered (on hover)
   * - --color-background-interactive-primary-pressed (when clicked)
   * - --color-background-interactive-primary-focused (when focused)
   *
   * BENEFITS:
   * - Consistent interaction patterns across all components
   * - No need to manually manage state-specific token references
   * - Easy to maintain and update interaction behaviors
   */
  /*
   * ----------------------------------------------------------------------------
   * GRID/SPACING SCALE
   * ----------------------------------------------------------------------------
   *
   * Our spacing system uses a consistent scale for all spacing values:
   *
   * --space-none:  0px   - No spacing (stacked elements)
   * --space-xxs:   2px   - Extra extra small (tight layouts)
   * --space-xs:    4px   - Extra small (compact elements)
   * --space-sm:    6px   - Small (related elements)
   * --space-md:    8px   - Medium (default spacing) ⭐ Most commonly used
   * --space-lg:    12px  - Large (sections)
   * --space-xl:    16px  - Extra large (major sections)
   * --space-2xl:   20px  - Double extra large
   * --space-3xl:   24px  - Triple extra large
   * --space-4xl:   32px  - Quad extra large
   * --space-5xl:   40px  - Quint extra large
   * --space-6xl:   48px  - Sext extra large
   * --space-7xl:   64px  - Sept extra large
   * --space-8xl:   80px  - Oct extra large
   * --space-9xl:   96px  - Non extra large
   *
   * USAGE GUIDELINES:
   * - Use --space-md (8px) as your default spacing value
   * - Use smaller values (xxs-sm) for tight, compact layouts
   * - Use larger values (lg-4xl) for major sections and page layout
   * - Values 5xl and above are available but currently unused
   */
  /*
   * ----------------------------------------------------------------------------
   * BORDER RADIUS SCALE
   * ----------------------------------------------------------------------------
   *
   * Border radius tokens for component rounding:
   *
   * --border-radius-none:  0px   - No rounding (3 uses)
   * --border-radius-xs:    4px   - Extra small rounding (6 uses)
   * --border-radius-sm:    8px   - Small rounding (17 uses) ⭐ Most commonly used
   * --border-radius-md:    12px  - Medium rounding (7 uses)
   * --border-radius-lg:    16px  - Large rounding (no usage)
   * --border-radius-xl:    20px  - Extra large rounding (no usage)
   * --border-radius-full:  100%  - Full circle/pill shape (8 uses)
   *
   * USAGE GUIDELINES:
   * - Use --border-radius-sm (8px) as the default for most components
   * - Use --border-radius-full for badges, pills, and circular elements
   * - Use --border-radius-none for sharp edges (tables, accordions)
   */
  /*
   * ----------------------------------------------------------------------------
   * BORDER WEIGHT SCALE
   * ----------------------------------------------------------------------------
   *
   * Border width tokens:
   *
   * --border-weight-default:   1px   - Standard borders (13 uses) ⭐ Most commonly used
   * --border-weight-heavy:     1.5px - Heavy emphasis borders (4 uses)
   * --border-weight-heaviest:  2px   - Maximum emphasis borders (3 uses)
   *
   * USAGE GUIDELINES:
   * - Use --border-weight-default for standard component borders
   * - Use --border-weight-heavy for selected states and alerts
   * - Use --border-weight-heaviest for active tabs and maximum emphasis
   */
  /*
   * ----------------------------------------------------------------------------
   * TYPOGRAPHY SCALE
   * ----------------------------------------------------------------------------
   *
   * TEXT SIZES:
   *
   * Labels (UI text):
   * --text-size-label-xxs:  10px
   * --text-size-label-xs:   12px
   * --text-size-label-sm:   14px ⭐ Most commonly used (13 uses)
   * --text-size-label-base: 16px
   * --text-size-label-lg:   20px
   *
   * Body (content text):
   * --text-size-body-xxs:   10px
   * --text-size-body-xs:    12px
   * --text-size-body-sm:    14px (7 uses)
   * --text-size-body-base:  16px
   * --text-size-body-lg:    20px
   *
   * Headings:
   * --text-size-heading-xxs: 16px
   * --text-size-heading-xs:  20px
   * --text-size-heading-sm:  24px
   * --text-size-heading-md:  28px
   * --text-size-heading-lg:  36px
   * --text-size-heading-xl:  40px
   *
   * Display (hero text):
   * --text-size-display-xs:  40px
   * --text-size-display-sm:  48px
   * --text-size-display-md:  56px
   * --text-size-display-lg:  68px
   * --text-size-display-xl:  80px
   *
   * TEXT WEIGHTS:
   * --text-weight-regular:   400 - Body text (9 uses)
   * --text-weight-medium:    500 - Labels, emphasis (11 uses) ⭐ Most commonly used
   * --text-weight-semibold:  600 - Strong emphasis
   * --text-weight-bold:      700 - Headings (5 uses)
   *
   * USAGE GUIDELINES:
   * - Use label sizes for UI elements (buttons, inputs, navigation)
   * - Use body sizes for content (paragraphs, descriptions)
   * - Use heading sizes for section titles and page headers
   * - Display sizes are available but currently unused (ready for hero content)
   */
  /*
   * ----------------------------------------------------------------------------
   * SIZE TOKENS
   * ----------------------------------------------------------------------------
   *
   * Element sizes for components:
   *
   * --size-element-xs:   12px (6 uses)
   * --size-element-sm:   16px (4 uses)
   * --size-element-md:   18px (no usage)
   * --size-element-lg:   20px (3 uses)
   * --size-element-xl:   24px (6 uses)
   * --size-element-2xl:  28px (3 uses)
   * --size-element-3xl:  32px (3 uses)
   * --size-element-4xl:  48px (1 use)
   *
   * Icon sizes (defined but not currently used):
   * --size-icon-xxs through --size-icon-3xl (10px - 32px)
   *
   * USAGE GUIDELINES:
   * - Use size-element tokens for component dimensions
   * - Icon size tokens are available for standardizing icon sizing
   */
  /*
   * ----------------------------------------------------------------------------
   * BEST PRACTICES
   * ----------------------------------------------------------------------------
   *
   * 1. ALWAYS USE SEMANTIC TOKENS:
   *    ✅ Do:   var(--color-background-interactive-primary)
   *    ❌ Don't: var(--color-brand-primary-900)
   *
   * 2. NEVER REFERENCE INTERNAL TOKENS:
   *    ❌ Don't use: --color-system-*, ---co-brand-*, --color-light-*, --color-dark-*
   *
   * 3. USE INTERACTIVE CLASSES:
   *    ✅ Do:   <button class="spotlight_interactive">
   *    ❌ Don't: Manually manage hover/focus states
   *
   * 4. FOLLOW NAMING CONVENTIONS:
   *    - Token names are self-documenting
   *    - The structure tells you exactly what the token is for
   *    - When in doubt, read the token name from left to right
   *
   * 5. RESPECT HIERARCHY:
   *    - Primary = Most important/prominent
   *    - Secondary = Second level
   *    - Use consistent hierarchy throughout your designs
   *
   * 6. USE THE MOST SPECIFIC TOKEN AVAILABLE:
   *    ✅ Do:   var(--color-background-interactive-critical-primary)
   *    ❌ Don't: var(--color-background-critical-primary) for interactive elements
   *
   * 7. CHECK USAGE COUNTS:
   *    - Tokens with high usage counts are established patterns
   *    - Tokens with no usage may be available for new patterns
   *    - Don't reinvent the wheel - use existing tokens when possible
   */
  /*
   * ----------------------------------------------------------------------------
   * COMMON PATTERNS
   * ----------------------------------------------------------------------------
   *
   * BUTTONS:
   * - Primary button: --color-background-interactive-brand-primary
   * - Secondary button: --color-background-interactive-brand-secondary
   * - Destructive button: --color-background-interactive-critical-primary
   *
   * INPUTS:
   * - Background: --color-background-interactive-tertiary
   * - Border: --color-border-primary
   * - Text: --color-text-interactive-primary
   *
   * CONTAINERS/CARDS:
   * - Background: --color-background-primary
   * - Border: --color-border-primary
   * - Padding: --space-lg or --space-xl
   * - Border radius: --border-radius-md
   *
   * NAVIGATION:
   * - Default: --color-background-interactive-secondary
   * - Selected: --color-background-interactive-selected-primary
   *
   * ALERTS/BADGES:
   * - Use semantic variant tokens:
   *   - Critical: --color-background-critical-*
   *   - Attention: --color-background-attention-*
   *   - Info: --color-background-info-*
   *   - Positive: --color-background-positive-*
   */
  /*
   * ----------------------------------------------------------------------------
   * COMPLETE COMPONENT EXAMPLES
   * ----------------------------------------------------------------------------
   *
   * These examples show complete token usage for common UI components.
   * AI systems can use these as templates for generating component styles.
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * PRIMARY BUTTON
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <button class="spotlight_interactive btn-primary">
   *   Click me
   * </button>
   *
   * CSS:
   * .btn-primary {
   *   background: var(--color-background-interactive-brand-primary);
   *   color: var(--color-text-interactive-inverse);
   *   border: var(--border-weight-default) solid var(--color-border-interactive-selected-primary);
   *   border-radius: var(--border-radius-sm);
   *   padding: var(--space-sm) var(--space-lg);
   *   font-size: var(--text-size-label-sm);
   *   font-weight: var(--text-weight-medium);
   *   line-height: var(--text-line-height-label-sm);
   * }
   *
   * States handled automatically by spotlight_interactive:
   * - enabled:  default appearance
   * - hovered:  background darkens
   * - pressed:  background darkens further
   * - focused:  adds focus ring
   * - disabled: reduced opacity, not interactive
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * SECONDARY BUTTON
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <button class="spotlight_interactive btn-secondary">
   *   Cancel
   * </button>
   *
   * CSS:
   * .btn-secondary {
   *   background: var(--color-background-interactive-brand-tertiary);
   *   color: var(--color-text-interactive-tertiary);
   *   border: var(--border-weight-default) solid var(--color-border-primary);
   *   border-radius: var(--border-radius-sm);
   *   padding: var(--space-sm) var(--space-lg);
   *   font-size: var(--text-size-label-sm);
   *   font-weight: var(--text-weight-medium);
   * }
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * DESTRUCTIVE BUTTON
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <button class="spotlight_interactive btn-destructive">
   *   Delete
   * </button>
   *
   * CSS:
   * .btn-destructive {
   *   background: var(--color-background-interactive-critical-primary);
   *   color: var(--color-text-interactive-inverse);
   *   border: var(--border-weight-default) solid var(--color-border-interactive-critical);
   *   border-radius: var(--border-radius-sm);
   *   padding: var(--space-sm) var(--space-lg);
   *   font-size: var(--text-size-label-sm);
   *   font-weight: var(--text-weight-medium);
   * }
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * TEXT INPUT FIELD
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <input type="text" class="spotlight_interactive input-field" placeholder="Enter text">
   *
   * CSS:
   * .input-field {
   *   background: var(--color-background-interactive-tertiary);
   *   color: var(--color-text-interactive-primary);
   *   border: var(--border-weight-default) solid var(--color-border-primary);
   *   border-radius: var(--border-radius-xs);
   *   padding: var(--space-sm) var(--space-md);
   *   font-size: var(--text-size-body-sm);
   *   line-height: var(--text-line-height-body-sm);
   * }
   *
   * Focus state (automatic):
   * - border-color: var(--color-border-interactive-primary)
   * - adds focus ring
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * CARD / CONTAINER
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <div class="card">
   *   <h3>Card Title</h3>
   *   <p>Card content goes here</p>
   * </div>
   *
   * CSS:
   * .card {
   *   background: var(--color-background-primary);
   *   border: var(--border-weight-default) solid var(--color-border-primary);
   *   border-radius: var(--border-radius-md);
   *   padding: var(--space-xl);
   * }
   *
   * .card h3 {
   *   color: var(--color-text-primary);
   *   font-size: var(--text-size-heading-xxs);
   *   font-weight: var(--text-weight-heading-xxs);
   *   margin-bottom: var(--space-md);
   * }
   *
   * .card p {
   *   color: var(--color-text-secondary);
   *   font-size: var(--text-size-body-sm);
   *   line-height: var(--text-line-height-body-sm);
   * }
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * ALERT / BADGE (Semantic Variants)
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * Success Alert:
   * .alert-success {
   *   background: var(--color-background-positive-secondary);
   *   border: var(--border-weight-default) solid var(--color-border-positive-secondary);
   *   color: var(--color-text-positive-tertiary);
   *   padding: var(--space-md) var(--space-lg);
   *   border-radius: var(--border-radius-sm);
   * }
   *
   * Error Alert:
   * .alert-error {
   *   background: var(--color-background-critical-secondary);
   *   border: var(--border-weight-heavy) solid var(--color-border-critical-secondary);
   *   color: var(--color-text-critical-tertiary);
   *   padding: var(--space-md) var(--space-lg);
   *   border-radius: var(--border-radius-sm);
   * }
   *
   * Warning Alert:
   * .alert-warning {
   *   background: var(--color-background-attention-secondary);
   *   border: var(--border-weight-default) solid var(--color-border-attention-secondary);
   *   color: var(--color-text-attention-tertiary);
   *   padding: var(--space-md) var(--space-lg);
   *   border-radius: var(--border-radius-sm);
   * }
   *
   * Info Badge:
   * .badge-info {
   *   background: var(--color-background-info-secondary);
   *   color: var(--color-text-info-tertiary);
   *   border-radius: var(--border-radius-full);
   *   padding: var(--space-xxs) var(--space-xs);
   *   font-size: var(--text-size-label-xs);
   *   font-weight: var(--text-weight-medium);
   * }
   *
   * ═══════════════════════════════════════════════════════════════════════════
   * NAVIGATION ITEM
   * ═══════════════════════════════════════════════════════════════════════════
   *
   * HTML:
   * <nav>
   *   <a href="#" class="spotlight_interactive nav-item">Home</a>
   *   <a href="#" class="spotlight_interactive nav-item nav-item--active">Products</a>
   * </nav>
   *
   * CSS:
   * .nav-item {
   *   background: var(--color-background-interactive-secondary);
   *   color: var(--color-text-interactive-primary);
   *   padding: var(--space-sm) var(--space-md);
   *   border-radius: var(--border-radius-sm);
   *   text-decoration: none;
   * }
   *
   * .nav-item--active {
   *   background: var(--color-background-interactive-selected-primary);
   *   color: var(--color-text-interactive-selected-primary);
   * }
   */
  /*
   * ----------------------------------------------------------------------------
   * FOR AI SYSTEMS
   * ----------------------------------------------------------------------------
   *
   * When working with this design token system:
   *
   * 1. PARSE TOKEN NAMES to understand their purpose:
   *    - Split by hyphens
   *    - Identify category, property, variant, hierarchy, state
   *    - Use the structure to determine appropriate usage
   *
   * 2. CHECK INLINE COMMENTS for usage information:
   *    - Each token has a comment explaining its use
   *    - Usage counts indicate how established a pattern is
   *    - "No current usage" means the token is available but unused
   *
   * 3. PREFER TOKENS WITH ESTABLISHED USAGE:
   *    - High usage counts = proven patterns
   *    - Follow existing patterns for consistency
   *
   * 4. INTERACTIVE ELEMENTS:
   *    - Always use interactive variant tokens
   *    - Apply spotlight_interactive class
   *    - Don't manually manage states
   *
   * 5. SPACING DECISIONS:
   *    - Default to --space-md (8px)
   *    - Use semantic spacing tokens when available
   *    - Consider the spacing token naming convention
   *
   * 6. NEVER SUGGEST:
   *    - Using ref, co-brand, or disabled tokens directly
   *    - Creating custom color values
   *    - Hardcoded spacing values
   *    - Manual state management for interactive elements
   */
  /*
   * End of Design Token System Guide
   * ============================================================================
   */
  /* Token Definitions */
  /*
   * ⚠️ INTERNAL USE ONLY - DO NOT REFERENCE EXTERNALLY ⚠️
   *
   * This file contains reference tokens that should ONLY be used internally
   * within this design token system. These tokens are low-level primitives
   * and should NOT be referenced by:
   * - External applications using this package
   * - Component libraries consuming these tokens
   * - Any code outside of this repository
   *
   * Instead, use the semantic tokens defined in other files (e.g., _theme.scss,
   * _interactive.scss) which provide meaningful, context-aware token names.
   */
  :root {
    /* default */
    /* color */
    --color-dark-brand-primary-100: var(---co-brand-primary-dark-100);
    --color-dark-brand-primary-1000: var(---co-brand-primary-dark-1000);
    --color-dark-brand-primary-1100: var(---co-brand-primary-dark-1100);
    --color-dark-brand-primary-1200: var(---co-brand-primary-dark-1200);
    --color-dark-brand-primary-200: var(---co-brand-primary-dark-200);
    --color-dark-brand-primary-300: var(---co-brand-primary-dark-300);
    --color-dark-brand-primary-400: var(---co-brand-primary-dark-400);
    --color-dark-brand-primary-500: var(---co-brand-primary-dark-500);
    --color-dark-brand-primary-600: var(---co-brand-primary-dark-600);
    --color-dark-brand-primary-700: var(---co-brand-primary-dark-700);
    --color-dark-brand-primary-800: var(---co-brand-primary-dark-800);
    --color-dark-brand-primary-900: var(---co-brand-primary-dark-900);
    --color-dark-brand-secondary-00: hsl(220 9% 7%);
    --color-dark-brand-secondary-050: hsl(225 8% 10%);
    --color-dark-brand-secondary-100: hsl(0 0% 7%);
    --color-dark-brand-secondary-1000: hsl(0 0% 88%);
    --color-dark-brand-secondary-1100: hsl(0 0% 70%);
    --color-dark-brand-secondary-1200: hsl(0 0% 93%);
    --color-dark-brand-secondary-200: hsl(0 0% 9%);
    --color-dark-brand-secondary-300: hsl(0 0% 13%);
    --color-dark-brand-secondary-400: hsl(0 0% 16%);
    --color-dark-brand-secondary-500: hsl(0 0% 19%);
    --color-dark-brand-secondary-600: hsl(0 0% 23%);
    --color-dark-brand-secondary-700: hsl(0 0% 28%);
    --color-dark-brand-secondary-800: hsl(0 0% 38%);
    --color-dark-brand-secondary-900: hsl(0 0% 92%);
    --color-dark-brand-tertiary-100: var(---co-brand-secondary-dark-100);
    --color-dark-brand-tertiary-1000: var(---co-brand-secondary-dark-1000);
    --color-dark-brand-tertiary-1100: var(---co-brand-secondary-dark-1100);
    --color-dark-brand-tertiary-1200: var(---co-brand-secondary-dark-1200);
    --color-dark-brand-tertiary-200: var(---co-brand-secondary-dark-200);
    --color-dark-brand-tertiary-300: var(---co-brand-secondary-dark-300);
    --color-dark-brand-tertiary-400: var(---co-brand-secondary-dark-400);
    --color-dark-brand-tertiary-500: var(---co-brand-secondary-dark-500);
    --color-dark-brand-tertiary-600: var(---co-brand-secondary-dark-600);
    --color-dark-brand-tertiary-700: var(---co-brand-secondary-dark-700);
    --color-dark-brand-tertiary-800: var(---co-brand-secondary-dark-800);
    --color-dark-brand-tertiary-900: var(---co-brand-secondary-dark-900);
    --color-dark-extended-primary-100: hsl(240 4% 5%);
    --color-dark-extended-primary-1000: hsl(195 11% 85%);
    --color-dark-extended-primary-1100: hsl(197 16% 92%);
    --color-dark-extended-primary-1200: hsl(200 50% 98%);
    --color-dark-extended-primary-200: hsl(200 5% 12%);
    --color-dark-extended-primary-300: hsl(200 3% 18%);
    --color-dark-extended-primary-400: hsl(195 3% 24%);
    --color-dark-extended-primary-500: hsl(200 3% 36%);
    --color-dark-extended-primary-600: hsl(197 3% 48%);
    --color-dark-extended-primary-700: hsl(200 5% 66%);
    --color-dark-extended-primary-800: hsl(195 6% 73%);
    --color-dark-extended-primary-900: hsl(195 7% 79%);
    --color-dark-extended-secondary-100: hsl(330 22% 7%);
    --color-dark-extended-secondary-1000: hsl(328 73% 65%);
    --color-dark-extended-secondary-1100: hsl(326 100% 76%);
    --color-dark-extended-secondary-1200: hsl(333 96% 91%);
    --color-dark-extended-secondary-200: hsl(330 28% 10%);
    --color-dark-extended-secondary-300: hsl(328 44% 15%);
    --color-dark-extended-secondary-400: hsl(326 60% 19%);
    --color-dark-extended-secondary-500: hsl(327 54% 23%);
    --color-dark-extended-secondary-600: hsl(328 46% 29%);
    --color-dark-extended-secondary-700: hsl(328 41% 37%);
    --color-dark-extended-secondary-800: hsl(328 41% 47%);
    --color-dark-extended-secondary-900: hsl(329 86% 70%);
    --color-dark-extended-tertiary-100: hsl(264 100% 99%);
    --color-dark-extended-tertiary-1000: hsl(256 48% 42%);
    --color-dark-extended-tertiary-200: hsl(264 100% 98%);
    --color-dark-extended-tertiary-300: hsl(267 100% 96%);
    --color-dark-extended-tertiary-400: hsl(268 95% 92%);
    --color-dark-extended-tertiary-500: hsl(265 89% 86%);
    --color-dark-extended-tertiary-600: hsl(262 85% 77%);
    --color-dark-extended-tertiary-700: hsl(260 77% 70%);
    --color-dark-extended-tertiary-800: hsl(259 63% 59%);
    --color-dark-extended-tertiary-900: hsl(258 54% 52%);
    --color-dark-neutral-100: hsl(220 17% 7%);
    --color-dark-neutral-1000: hsl(218 9% 61%);
    --color-dark-neutral-1100: hsl(218 13% 72%);
    --color-dark-neutral-1200: hsl(219 52% 94%);
    --color-dark-neutral-200: hsl(220 12% 10%);
    --color-dark-neutral-300: hsl(214 10% 14%);
    --color-dark-neutral-400: hsl(218 9% 17%);
    --color-dark-neutral-500: hsl(220 9% 20%);
    --color-dark-neutral-600: hsl(218 7% 24%);
    --color-dark-neutral-700: hsl(218 5% 29%);
    --color-dark-neutral-800: hsl(223 4% 39%);
    --color-dark-neutral-900: hsl(218 11% 65%);
    --color-dark-semantic-attention-100: hsl(40 29% 6%);
    --color-dark-semantic-attention-1000: hsl(44 100% 45%);
    --color-dark-semantic-attention-1100: hsl(41 100% 63%);
    --color-dark-semantic-attention-1200: hsl(39 94% 86%);
    --color-dark-semantic-attention-200: hsl(42 30% 8%);
    --color-dark-semantic-attention-300: hsl(39 64% 11%);
    --color-dark-semantic-attention-400: hsl(39 100% 12%);
    --color-dark-semantic-attention-500: hsl(41 100% 15%);
    --color-dark-semantic-attention-600: hsl(42 78% 19%);
    --color-dark-semantic-attention-700: hsl(41 57% 27%);
    --color-dark-semantic-attention-800: hsl(40 55% 34%);
    --color-dark-semantic-attention-900: hsl(43 88% 52%);
    --color-dark-semantic-critical-100: hsl(0 19% 7%);
    --color-dark-semantic-critical-1000: hsl(360 77% 66%);
    --color-dark-semantic-critical-1100: hsl(2 100% 77%);
    --color-dark-semantic-critical-1200: hsl(4 96% 91%);
    --color-dark-semantic-critical-200: hsl(0 24% 10%);
    --color-dark-semantic-critical-300: hsl(0 48% 15%);
    --color-dark-semantic-critical-400: hsl(357 62% 19%);
    --color-dark-semantic-critical-500: hsl(357 57% 24%);
    --color-dark-semantic-critical-600: hsl(359 48% 30%);
    --color-dark-semantic-critical-700: hsl(359 43% 38%);
    --color-dark-semantic-critical-800: hsl(359 42% 49%);
    --color-dark-semantic-critical-900: hsl(0 91% 71%);
    --color-dark-semantic-info-100: hsl(220 38% 8%);
    --color-dark-semantic-info-1000: hsl(219 85% 66%);
    --color-dark-semantic-info-1100: hsl(219 100% 77%);
    --color-dark-semantic-info-1200: hsl(219 96% 91%);
    --color-dark-semantic-info-200: hsl(220 33% 11%);
    --color-dark-semantic-info-300: hsl(219 51% 18%);
    --color-dark-semantic-info-400: hsl(219 59% 23%);
    --color-dark-semantic-info-500: hsl(219 54% 28%);
    --color-dark-semantic-info-600: hsl(220 49% 34%);
    --color-dark-semantic-info-700: hsl(219 46% 41%);
    --color-dark-semantic-info-800: hsl(220 45% 49%);
    --color-dark-semantic-info-900: hsl(219 100% 71%);
    --color-dark-semantic-positive-100: hsl(130 19% 6%);
    --color-dark-semantic-positive-1000: hsl(143 63% 53%);
    --color-dark-semantic-positive-1100: hsl(143 65% 55%);
    --color-dark-semantic-positive-1200: hsl(134 71% 83%);
    --color-dark-semantic-positive-200: hsl(128 17% 9%);
    --color-dark-semantic-positive-300: hsl(137 36% 13%);
    --color-dark-semantic-positive-400: hsl(141 47% 16%);
    --color-dark-semantic-positive-500: hsl(139 45% 20%);
    --color-dark-semantic-positive-600: hsl(140 41% 24%);
    --color-dark-semantic-positive-700: hsl(139 40% 29%);
    --color-dark-semantic-positive-800: hsl(139 41% 35%);
    --color-dark-semantic-positive-900: hsl(142 69% 58%);
    --color-dark-system-00: hsl(0 0% 0%);
    --color-dark-system-100: hsl(240 6% 7%);
    --color-dark-system-1000: hsl(240 2% 38%);
    --color-dark-system-1100: hsl(240 3% 71%);
    --color-dark-system-1200: hsl(240 6% 93%);
    --color-dark-system-200: hsl(240 4% 10%);
    --color-dark-system-300: hsl(240 3% 14%);
    --color-dark-system-400: hsl(240 4% 17%);
    --color-dark-system-500: hsl(240 3% 19%);
    --color-dark-system-600: hsl(240 3% 23%);
    --color-dark-system-700: hsl(240 3% 29%);
    --color-dark-system-800: hsl(240 2% 38%);
    --color-dark-system-900: hsl(240 2% 43%);
    --color-attention-100: hsl(51 95% 92%);
    --color-attention-1000: hsl(42 83% 49%);
    --color-attention-1100: hsl(35 100% 34%);
    --color-attention-1200: hsl(24 40% 22%);
    --color-attention-200: hsl(52 100% 88%);
    --color-attention-300: hsl(50 100% 81%);
    --color-attention-400: hsl(50 93% 77%);
    --color-attention-500: hsl(50 94% 74%);
    --color-attention-600: hsl(46 85% 68%);
    --color-attention-700: hsl(42 81% 63%);
    --color-attention-800: hsl(38 77% 56%);
    --color-attention-900: hsl(42 77% 56%);
    --color-brand-primary-100: var(---co-brand-primary-100);
    --color-brand-primary-1000: var(---co-brand-primary-1000);
    --color-brand-primary-1100: var(---co-brand-primary-1100);
    --color-brand-primary-1200: var(---co-brand-primary-1200);
    --color-brand-primary-200: var(---co-brand-primary-200);
    --color-brand-primary-300: var(---co-brand-primary-300);
    --color-brand-primary-400: var(---co-brand-primary-400);
    --color-brand-primary-500: var(---co-brand-primary-500);
    --color-brand-primary-600: var(---co-brand-primary-600);
    --color-brand-primary-700: var(---co-brand-primary-700);
    --color-brand-primary-800: var(---co-brand-primary-800);
    --color-brand-primary-900: var(---co-brand-primary-900);
    --color-brand-secondary-100: var(---co-brand-secondary-100);
    --color-brand-secondary-1000: var(---co-brand-secondary-1000);
    --color-brand-secondary-1100: var(---co-brand-secondary-1100);
    --color-brand-secondary-1200: var(---co-brand-secondary-1200);
    --color-brand-secondary-200: var(---co-brand-secondary-200);
    --color-brand-secondary-300: var(---co-brand-secondary-300);
    --color-brand-secondary-400: var(---co-brand-secondary-400);
    --color-brand-secondary-500: var(---co-brand-secondary-500);
    --color-brand-secondary-600: var(---co-brand-secondary-600);
    --color-brand-secondary-700: var(---co-brand-secondary-700);
    --color-brand-secondary-800: var(---co-brand-secondary-800);
    --color-brand-secondary-900: var(---co-brand-secondary-900);
    --color-brand-tertiary-100: var(---co-brand-secondary-100);
    --color-brand-tertiary-1000: var(---co-brand-secondary-1000);
    --color-brand-tertiary-1100: var(---co-brand-secondary-1100);
    --color-brand-tertiary-1200: var(---co-brand-secondary-1200);
    --color-brand-tertiary-200: var(---co-brand-secondary-200);
    --color-brand-tertiary-300: var(---co-brand-secondary-300);
    --color-brand-tertiary-400: var(---co-brand-secondary-400);
    --color-brand-tertiary-500: var(---co-brand-secondary-500);
    --color-brand-tertiary-600: var(---co-brand-secondary-600);
    --color-brand-tertiary-700: var(---co-brand-secondary-700);
    --color-brand-tertiary-800: var(---co-brand-secondary-800);
    --color-brand-tertiary-900: var(---co-brand-secondary-900);
    --color-critical-100: hsl(8 100% 95%);
    --color-critical-1000: hsl(355 94% 41%);
    --color-critical-1100: hsl(359 76% 48%);
    --color-critical-1200: hsl(3 61% 24%);
    --color-critical-200: hsl(9 100% 92%);
    --color-critical-300: hsl(8 100% 86%);
    --color-critical-400: hsl(7 100% 83%);
    --color-critical-500: hsl(7 100% 80%);
    --color-critical-600: hsl(7 91% 74%);
    --color-critical-700: hsl(0 84% 69%);
    --color-critical-800: hsl(0 89% 64%);
    --color-critical-900: hsl(0 72% 51%);
    --color-extended-primary-100: hsl(240 33% 99%);
    --color-extended-primary-1000: hsl(198 3% 18%);
    --color-extended-primary-1100: hsl(198 5% 12%);
    --color-extended-primary-1200: hsl(200 5% 5%);
    --color-extended-primary-200: hsl(240 33% 98%);
    --color-extended-primary-300: hsl(198 11% 85%);
    --color-extended-primary-400: hsl(198 7% 79%);
    --color-extended-primary-500: hsl(198 6% 73%);
    --color-extended-primary-600: hsl(198 5% 66%);
    --color-extended-primary-700: hsl(198 3% 48%);
    --color-extended-primary-800: hsl(198 3% 36%);
    --color-extended-primary-900: hsl(198 3% 24%);
    --color-extended-secondary-100: hsl(320 100% 99%);
    --color-extended-secondary-1000: hsl(317 73% 55%);
    --color-extended-secondary-1100: hsl(315 84% 42%);
    --color-extended-secondary-1200: hsl(315 89% 22%);
    --color-extended-secondary-200: hsl(330 100% 98%);
    --color-extended-secondary-300: hsl(323 100% 95%);
    --color-extended-secondary-400: hsl(326 95% 93%);
    --color-extended-secondary-500: hsl(325 82% 89%);
    --color-extended-secondary-600: hsl(324 69% 85%);
    --color-extended-secondary-700: hsl(324 62% 79%);
    --color-extended-secondary-800: hsl(323 60% 73%);
    --color-extended-secondary-900: hsl(318 83% 60%);
    --color-info-100: hsl(219 100% 96%);
    --color-info-1000: hsl(221 81% 55%);
    --color-info-1100: hsl(221 68% 45%);
    --color-info-1200: hsl(221 66% 24%);
    --color-info-200: hsl(215 100% 93%);
    --color-info-300: hsl(216 100% 90%);
    --color-info-400: hsl(218 100% 86%);
    --color-info-500: hsl(219 98% 81%);
    --color-info-600: hsl(220 91% 74%);
    --color-info-700: hsl(220 90% 68%);
    --color-info-800: hsl(221 92% 64%);
    --color-info-900: hsl(221 98% 61%);
    --color-neutral-100: hsl(220 60% 98%);
    --color-neutral-1000: hsl(220 7% 43%);
    --color-neutral-1100: hsl(223 7% 40%);
    --color-neutral-1200: hsl(220 16% 15%);
    --color-neutral-200: hsl(223 26% 95%);
    --color-neutral-300: hsl(218 19% 89%);
    --color-neutral-400: hsl(219 19% 86%);
    --color-neutral-500: hsl(220 19% 82%);
    --color-neutral-600: hsl(219 18% 74%);
    --color-neutral-700: hsl(220 11% 61%);
    --color-neutral-800: hsl(220 9% 56%);
    --color-neutral-900: hsl(220 9% 48%);
    --color-positive-100: hsl(127 56% 94%);
    --color-positive-1000: hsl(144 100% 29%);
    --color-positive-1100: hsl(143 100% 25%);
    --color-positive-1200: hsl(135 42% 17%);
    --color-positive-200: hsl(128 53% 89%);
    --color-positive-300: hsl(129 51% 84%);
    --color-positive-400: hsl(130 47% 81%);
    --color-positive-500: hsl(130 48% 77%);
    --color-positive-600: hsl(131 45% 68%);
    --color-positive-700: hsl(135 46% 53%);
    --color-positive-800: hsl(142 63% 43%);
    --color-positive-900: hsl(142 76% 36%);
    --color-system-00: hsl(0 0% 100%);
    --color-system-050: hsl(240 23% 97%);
    --color-system-100: hsl(240 24% 96%);
    --color-system-1000: hsl(240 9% 28%);
    --color-system-1100: hsl(240 10% 21%);
    --color-system-1200: hsl(240 11% 12%);
    --color-system-200: hsl(240 14% 93%);
    --color-system-300: hsl(240 10% 89%);
    --color-system-400: hsl(240 10% 84%);
    --color-system-500: hsl(240 15% 82%);
    --color-system-600: hsl(240 10% 70%);
    --color-system-700: hsl(240 6% 53%);
    --color-system-800: hsl(240 6% 45%);
    --color-system-900: hsl(240 8% 38%);
    /* number */
    --border-radius-none: 0px;
    --border-radius-050: 4px;
    --border-radius-100: 8px;
    --border-radius-150: 12px;
    --border-radius-200: 16px;
    --border-radius-250: 20px;
    --border-radius-circle: 360px;
    --border-weight-100: 1px;
    --border-weight-200: 1.5px;
    --border-weight-300: 2px;
    --grid-breakpoint-none: 0px;
    --grid-space-none: 0px;
    --grid-space-025: 2px;
    --grid-space-050: 4px;
    --grid-space-075: 6px;
    --grid-space-100: 8px;
    --grid-space-150: 12px;
    --grid-space-200: 16px;
    --grid-space-250: 20px;
    --grid-space-300: 24px;
    --grid-space-400: 32px;
    --grid-space-500: 40px;
    --grid-space-600: 48px;
    --grid-space-800: 64px;
    --grid-space-1000: 80px;
    --grid-space-1200: 96px;
    --size-125: 10px;
    --size-150: 12px;
    --size-200: 16px;
    --size-225: 18px;
    --size-250: 20px;
    --size-300: 24px;
    --size-350: 28px;
    --size-400: 32px;
    --size-600: 48px;
    --text-line-height-150: 12px;
    --text-line-height-175: 14px;
    --text-line-height-200: 16px;
    --text-line-height-250: 20px;
    --text-line-height-300: 24px;
    --text-line-height-350: 28px;
    --text-line-height-400: 32px;
    --text-line-height-450: 36px;
    --text-line-height-550: 44px;
    --text-line-height-600: 48px;
    --text-line-height-650: 52px;
    --text-line-height-750: 60px;
    --text-line-height-900: 72px;
    --text-line-height-1050: 84px;
    --text-line-height-1250: 100px;
    --text-size-125: 10px;
    --text-size-150: 12px;
    --text-size-175: 14px;
    --text-size-200: 16px;
    --text-size-250: 20px;
    --text-size-300: 24px;
    --text-size-350: 28px;
    --text-size-450: 36px;
    --text-size-500: 40px;
    --text-size-600: 48px;
    --text-size-700: 56px;
    --text-size-850: 68px;
    --text-size-1000: 80px;
    --text-weight-regular: 400;
    --text-weight-medium: 500;
    --text-weight-semibold: 600;
    --text-weight-bold: 700;
    /* string */
    --text-font-mono: String value;
    --text-font-san-serif: Inter;
  }
  /*
   * ⚠️ INTERNAL USE ONLY - DO NOT REFERENCE EXTERNALLY ⚠️
   *
   * This file contains disabled state tokens that should ONLY be used internally
   * within this design token system. These tokens are low-level state primitives
   * and should NOT be referenced by:
   * - External applications using this package
   * - Component libraries consuming these tokens
   * - Any code outside of this repository
   *
   * Instead, use the semantic tokens defined in other files (e.g., _theme.scss,
   * _interactive.scss) which provide meaningful, context-aware token names.
   */
  /* spotlight_disabled */
  :root {
    /* Mode 1 */
    /* color */
    --disabled: var(--color-system-500);
    --color-dark-background-disabled: var(--color-dark-system-100);
    --color-dark-border-disabled: var(--color-dark-system-700);
    --color-dark-content-disabled: var(--color-dark-system-1000);
    --color-dark-text-disabled: var(--color-dark-system-1000);
    --color-light-background-disabled: var(--color-system-300);
    --color-light-border-disabled: var(--color-system-500);
    --color-light-content-disabled: var(--color-system-700);
    --color-light-text-disabled: var(--color-system-800);
  }
  /* spotlight_interactive */
  /*--- PRIMARY INTERACTIVE TOKEN DEFINITIONS ----*/
  /*
   * These tokens automatically update based on interaction state (enabled/hovered/pressed/focused)
   * when used with the .spotlight_interactive class. They reference the appropriate -enabled
   * tokens by default, which are then overridden in hover, press, and focus states.
   */
  :root {
    --color-background-filter: hsl(0 0% 100% / 0); /* Interactive overlay filter for pressed states */
    --color-background-interactive-critical: var(--color-background-critical-interactive-tertiary-enabled); /* Destructive action backgrounds (buttons) */
    --color-background-interactive-primary: var(--color-background-interactive-primary-enabled); /* Primary button backgrounds, field tooltips, sliders (3 uses) */
    --color-background-interactive-quaternary: var(--color-background-interactive-quaternary-enabled); /* Quaternary interactive backgrounds for selected states (1 use) */
    --color-background-interactive-quinary: var(--color-background-interactive-quinary-enabled); /* Quinary interactive backgrounds for sliders, tables, selected states (4 uses) */
    --color-background-interactive-secondary: var(--color-background-interactive-secondary-enabled); /* Secondary interactive backgrounds for actions, containers, nav, selected states (19 uses) */
    --color-background-interactive-tertiary: var(--color-background-interactive-tertiary-enabled); /* Tertiary interactive backgrounds for inputs, sliders, tables, selected states (7 uses) */
    --color-background-interactive-attention-primary: var(--color-background-attention-interactive-primary-enabled); /* Attention semantic interactive backgrounds (1 use) */
    --color-background-interactive-attention-secondary: var(--color-background-attention-interactive-secondary-enabled); /* Attention semantic secondary interactive backgrounds (1 use) */
    --color-background-interactive-brand-primary: var(--color-background-brand-interactive-primary-enabled); /* Brand interactive backgrounds for selected states, validation (4 uses) */
    --color-background-interactive-brand-secondary: var(--color-background-brand-interactive-secondary-enabled); /* Brand secondary interactive backgrounds for selected states, validation (4 uses) */
    --color-background-interactive-brand-tertiary: var(--color-background-brand-interactive-tertiary-enabled); /* Brand tertiary interactive backgrounds (buttons) (1 use) */
    --color-background-interactive-brand-accent-primary: var(--color-background-brand-accent-interactive-primary-enabled); /* Brand accent interactive backgrounds (1 use) */
    --color-background-interactive-brand-accent-secondary: var(--color-background-brand-accent-interactive-secondary-enabled); /* Brand accent secondary interactive backgrounds (1 use) */
    --color-background-interactive-critical-primary: var(--color-background-critical-interactive-primary-enabled); /* Critical interactive backgrounds for buttons, validation (2 uses) */
    --color-background-interactive-critical-secondary: var(--color-background-critical-interactive-secondary-enabled); /* Critical secondary interactive backgrounds for validation (2 uses) */
    --color-background-interactive-critical-tertiary: var(--color-background-critical-interactive-tertiary-enabled); /* Critical tertiary interactive backgrounds for destructive actions (1 use) */
    --color-background-interactive-info-primary: var(--color-background-info-interactive-primary-enabled); /* Info interactive backgrounds (2 uses) */
    --color-background-interactive-info-secondary: var(--color-background-info-interactive-secondary-enabled); /* Info secondary interactive backgrounds (2 uses) */
    --color-background-interactive-magic-primary: var(--color-background-magic-interactive-primary-enabled); /* Magic/AI interactive backgrounds (1 use) */
    --color-background-interactive-magic-secondary: var(--color-background-magic-interactive-secondary-enabled); /* Magic/AI secondary interactive backgrounds (1 use) */
    --color-background-interactive-neutral-primary: var(--color-background-neutral-interactive-primary-enabled); /* Neutral interactive backgrounds (1 use) */
    --color-background-interactive-neutral-secondary: var(--color-background-neutral-interactive-secondary-enabled); /* Neutral secondary interactive backgrounds for selected badges (2 uses) */
    --color-background-interactive-positive-primary: var(--color-background-positive-interactive-primary-enabled); /* Positive/success interactive backgrounds (1 use) */
    --color-background-interactive-positive-secondary: var(--color-background-positive-interactive-secondary-enabled); /* Positive/success secondary interactive backgrounds (1 use) */
    --color-background-interactive-selected-primary: var(--color-background-selected-interactive-primary-enabled); /* Selected state backgrounds for lists, nav, pagination (5 uses) */
    --color-background-interactive-selected-quaternary: var(--color-background-selected-interactive-quaternary-enabled); /* Selected quaternary backgrounds (1 use) */
    --color-background-interactive-selected-secondary: var(--color-background-selected-interactive-secondary-enabled); /* Selected secondary backgrounds (1 use) */
    --color-background-interactive-selected-tertiary: var(--color-background-selected-interactive-tertiary-enabled); /* Selected tertiary backgrounds (1 use) */
    --color-border-interactive-brand: var(--color-brand-primary-700); /* Brand interactive borders for steppers (1 use) */
    --color-border-interactive-critical: var(--color-critical-900); /* Critical interactive borders for buttons, validation (2 uses) */
    --color-border-interactive-primary: var(--color-system-1200); /* Primary interactive borders for field tooltips, radios, sliders (3 uses) */
    --color-border-interactive-secondary: var(--color-system-600); /* Secondary interactive borders for nav, radios, selected states (3 uses) */
    --color-border-interactive-tertiary: var(--color-system-500); /* Tertiary interactive borders for date pickers, selected states (5 uses) */
    --color-border-interactive-positive-primary: var(--color-positive-600); /* Positive interactive borders (1 use) */
    --color-border-interactive-selected-primary: var(--color-brand-primary-700); /* Selected primary interactive borders for buttons (2 uses) */
    --color-border-interactive-selected-secondary: var(--color-system-1200); /* Selected secondary interactive borders (1 use) */
    --color-border-interactive-selected-tertiary: var(--color-brand-primary-600); /* Selected tertiary interactive borders (1 use) */
    --color-content-interactive-brand: var(--color-background-brand-interactive-primary-enabled); /* Brand interactive icon/content colors for nav, selected states (2 uses) */
    --color-content-interactive-inverse: var(--color-content-interactive-inverse-enabled); /* Inverse interactive icon/content colors for buttons, selected states (5 uses) */
    --color-content-interactive-primary: var(--color-content-interactive-primary-enabled); /* Primary interactive icon/content colors for actions, inputs, nav, selected states (7 uses) */
    --color-content-interactive-secondary: var(--color-content-interactive-secondary-enabled); /* Secondary interactive icon/content colors for nav, selected states (4 uses) */
    --color-content-interactive-tertiary: var(--color-content-critical-interactive-enabled); /* Tertiary interactive icon/content colors for destructive actions, buttons, error messages (3 uses) */
    --color-content-interactive-positive-primary: var(--color-content-positive-interactive-primary-enabled); /* Positive interactive icon/content colors for semantic states (2 uses) */
    --color-content-interactive-positive-secondary: var(--color-content-positive-interactive-secondary-enabled); /* Positive secondary interactive icon/content colors for semantic states (2 uses) */
    --color-content-interactive-selected-primary: var(--color-content-selected-interactive-primary-enabled); /* Selected primary interactive icon/content colors for steppers (2 uses) */
    --color-content-interactive-selected-secondary: var(--color-content-selected-interactive-secondary-enabled); /* Selected secondary interactive icon/content colors for buttons, nav, selected states (5 uses) */
    --color-text-interactive-critical: var(--color-text-critical-interactive-enabled); /* Critical interactive text for destructive actions, buttons, validation (4 uses) */
    --color-text-interactive-inverse: var(--color-text-interactive-inverse-enabled); /* Inverse interactive text for buttons, field tooltips, selected states (7 uses) */
    --color-text-interactive-primary: var(--color-text-interactive-primary-enabled); /* Primary interactive text for actions, controls, inputs, lists, nav, pagination, sliders (16 uses) */
    --color-text-interactive-quaternary: var(--color-text-interactive-quaternary-enabled); /* Quaternary interactive text for selected states (1 use) */
    --color-text-interactive-secondary: var(--color-text-interactive-secondary-enabled); /* Secondary interactive text for lists, nav, selected states, validation (12 uses) */
    --color-text-interactive-tertiary: var(--color-text-interactive-tertiary-enabled); /* Tertiary interactive text for buttons, nav, selected states (3 uses) */
    --color-text-interactive-neutral-primary: var(--color-text-neutral-interactive-primary-enabled); /* Neutral primary interactive text for selected states (1 use) */
    --color-text-interactive-neutral-secondary: var(--color-text-neutral-interactive-secondary-enabled); /* Neutral secondary interactive text (no current usage) */
    --color-text-interactive-selected-primary: var(--color-text-selected-interactive-enabled); /* Selected interactive text for nav, pagination, selected states (5 uses) */
  }
  /*--- DEPRECATED - use above tokens instead ----*/
  :root {
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  /* spotlight_theme */
  :root {
    /* light */
    /* color */
    --color-background-disabled: var(--color-light-background-disabled); /* Disabled element backgrounds (badges, controls) */
    --color-background-page: var(--color-system-050); /* Main page background surface */
    --color-background-primary: var(--color-system-00); /* Primary surfaces (cards, containers, modals, tables) */
    --color-background-quaternary: var(--color-system-900); /* Disabled/inactive states, in-progress status */
    --color-background-secondary: var(--color-system-100); /* Secondary surfaces (headers, read-only fields) */
    --color-background-tertiary: var(--color-system-200); /* Tertiary surfaces (progress tracks, not-started states) */
    --color-background-attention-primary: var(--color-attention-900); /* Primary attention semantic backgrounds (badges, alerts) */
    --color-background-attention-secondary: var(--color-attention-100); /* Secondary attention semantic backgrounds (badges, alerts) */
    /*
     * ⚠️ RECOMMENDED APPROACH FOR INTERACTIVE STATES:
     * Instead of referencing these individual state tokens (-enabled, -hovered, -pressed, -focused),
     * use the consolidated tokens from _interactive.scss with the .spotlight_interactive class.
     *
     * Example:
     * ❌ DON'T: background: var(--color-background-attention-interactive-primary-enabled);
     * ✅ DO:    background: var(--color-background-interactive-attention-primary);
     *           class="spotlight_interactive"
     *
     * This automatically handles all interaction states for you!
     */
    --color-background-attention-interactive-primary-enabled: var(--color-attention-900); /* Default attention primary interactive state */
    --color-background-attention-interactive-primary-focused: var(--color-attention-1000); /* Focused attention primary interactive state */
    --color-background-attention-interactive-primary-hovered: var(--color-attention-1000); /* Hover attention primary interactive state */
    --color-background-attention-interactive-primary-pressed: var(--color-attention-1000); /* Pressed attention primary interactive state */
    --color-background-attention-interactive-secondary-enabled: var(--color-attention-200); /* Default attention secondary interactive state */
    --color-background-attention-interactive-secondary-focused: var(--color-attention-300); /* Focused attention secondary interactive state */
    --color-background-attention-interactive-secondary-hovered: var(--color-attention-300); /* Hover attention secondary interactive state */
    --color-background-attention-interactive-secondary-pressed: var(--color-attention-300); /* Pressed attention secondary interactive state */
    --color-background-brand-primary: var(--color-brand-primary-900); /* Brand backgrounds for avatars, badges, selected states */
    --color-background-brand-quaternary: var(--color-brand-primary-200); /* Quaternary brand backgrounds */
    --color-background-brand-secondary: var(--color-brand-primary-100); /* Brand backgrounds for containers, steppers */
    --color-background-brand-tertiary: var(--color-brand-primary-300); /* Brand backgrounds for avatars, nav flyouts */
    --color-background-brand-accent-primary: var(--color-brand-secondary-900); /* Accent brand backgrounds for avatars, badges, progress */
    --color-background-brand-accent-quaternary: var(---co-brand-secondary-700); /* Quaternary brand accent backgrounds */
    --color-background-brand-accent-quinary: var(---co-brand-secondary-1000); /* Quinary brand accent backgrounds */
    --color-background-brand-accent-secondary: var(--color-brand-secondary-200); /* Accent brand backgrounds for avatars, badges */
    --color-background-brand-accent-tertiary: var(---co-brand-secondary-500); /* Tertiary brand accent backgrounds */
    --color-background-brand-accent-interactive-primary-enabled: var(--color-brand-secondary-900); /* Default brand accent primary interactive state */
    --color-background-brand-accent-interactive-primary-focused: var(--color-brand-secondary-1000); /* Focused brand accent primary interactive state */
    --color-background-brand-accent-interactive-primary-hovered: var(--color-brand-secondary-1000); /* Hover brand accent primary interactive state */
    --color-background-brand-accent-interactive-primary-pressed: var(--color-brand-secondary-1000); /* Pressed brand accent primary interactive state */
    --color-background-brand-accent-interactive-secondary-enabled: var(--color-brand-secondary-200); /* Default brand accent secondary interactive state */
    --color-background-brand-accent-interactive-secondary-focused: var(--color-brand-secondary-300); /* Focused brand accent secondary interactive state */
    --color-background-brand-accent-interactive-secondary-hovered: var(--color-brand-secondary-300); /* Hover brand accent secondary interactive state */
    --color-background-brand-accent-interactive-secondary-pressed: var(--color-brand-secondary-300); /* Pressed brand accent secondary interactive state */
    --color-background-brand-interactive-primary-enabled: var(--color-brand-primary-900); /* Default brand primary interactive state - primary buttons */
    --color-background-brand-interactive-primary-focused: var(--color-brand-primary-1000); /* Focused brand primary interactive state */
    --color-background-brand-interactive-primary-hovered: var(--color-brand-primary-1000); /* Hover brand primary interactive state */
    --color-background-brand-interactive-primary-pressed: var(--color-brand-primary-1000); /* Pressed brand primary interactive state */
    --color-background-brand-interactive-secondary-enabled: var(--color-brand-primary-200); /* Default brand secondary interactive state */
    --color-background-brand-interactive-secondary-focused: var(--color-brand-primary-300); /* Focused brand secondary interactive state */
    --color-background-brand-interactive-secondary-hovered: var(--color-brand-primary-300); /* Hover brand secondary interactive state */
    --color-background-brand-interactive-secondary-pressed: var(--color-brand-primary-300); /* Pressed brand secondary interactive state */
    --color-background-brand-interactive-tertiary-enabled: hsl(0 0% 100% / 0); /* Default brand tertiary interactive state - transparent */
    --color-background-brand-interactive-tertiary-focused: var(--color-brand-primary-200); /* Focused brand tertiary interactive state */
    --color-background-brand-interactive-tertiary-hovered: var(--color-brand-primary-200); /* Hover brand tertiary interactive state */
    --color-background-brand-interactive-tertiary-pressed: var(--color-brand-primary-200); /* Pressed brand tertiary interactive state */
    --color-background-critical-primary: var(--color-critical-900); /* Critical/error backgrounds for badges, alerts */
    --color-background-critical-secondary: var(--color-critical-100); /* Secondary critical/error backgrounds for badges, alerts */
    --color-background-critical-interactive-primary-enabled: var(--color-critical-900);
    --color-background-critical-interactive-primary-focused: var(--color-critical-1000);
    --color-background-critical-interactive-primary-hovered: var(--color-critical-1000);
    --color-background-critical-interactive-primary-pressed: var(--color-critical-1000);
    --color-background-critical-interactive-secondary-enabled: var(--color-critical-200);
    --color-beackground-critical-interactive-secondary-focused: var(--color-critical-300);
    --color-background-critical-interactive-secondary-hovered: var(--color-critical-300);
    --color-background-critical-interactive-secondary-pressed: var(--color-critical-300);
    --color-background-critical-interactive-tertiary-enabled: hsl(0 100% 95% / 0);
    --color-background-critical-interactive-tertiary-focused: var(--color-critical-200);
    --color-background-critical-interactive-tertiary-hovered: var(--color-critical-200);
    --color-background-critical-interactive-tertiary-perssed: var(--color-critical-200);
    --color-background-info-primary: var(--color-info-900); /* Info backgrounds for badges, alerts */
    --color-background-info-secondary: var(--color-info-100); /* Secondary info backgrounds for badges, alerts */
    --color-background-info-interactive-primary-enabled: var(--color-info-900);
    --color-background-info-interactive-primary-focused: var(--color-info-1000);
    --color-background-info-interactive-primary-hovered: var(--color-info-1000);
    --color-background-info-interactive-primary-pressed: var(--color-info-1000);
    --color-background-info-interactive-secondary-enabled: var(--color-info-200);
    --color-background-info-interactive-secondary-focused: var(--color-info-300);
    --color-background-info-interactive-secondary-hovered: var(--color-info-300);
    --color-background-info-interactive-secondary-pressed: var(--color-info-300);
    --color-background-interactive-filter-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-focused: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-hovered: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-pressed: hsl(0 0% 0%/ 0.06);
    --color-background-interactive-primary-enabled: var(--color-brand-secondary-900);
    --color-background-interactive-primary-focused: var(--color-brand-secondary-1000);
    --color-background-interactive-primary-hovered: var(--color-brand-secondary-1000);
    --color-background-interactive-primary-pressed: var(--color-brand-secondary-1000);
    --color-background-interactive-quaternary-enabled: var(--color-system-900);
    --color-background-interactive-quaternary-focused: var(--color-system-900);
    --color-background-interactive-quaternary-hovered: var(--color-system-900);
    --color-background-interactive-quaternary-pressed: var(--color-system-900);
    --color-background-interactive-quinary-enabled: var(--color-system-100);
    --color-background-interactive-quinary-focused: var(--color-system-200);
    --color-background-interactive-quinary-hovered: var(--color-system-200);
    --color-background-interactive-quinary-pressed: var(--color-system-200);
    --color-background-interactive-secondary-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-secondary-focused: var(--color-system-200);
    --color-background-interactive-secondary-hovered: var(--color-system-200);
    --color-background-interactive-secondary-pressed: var(--color-system-200);
    --color-background-interactive-tertiary-enabled: var(--color-system-00);
    --color-background-interactive-tertiary-focused: var(--color-system-200);
    --color-background-interactive-tertiary-hovered: var(--color-system-200);
    --color-background-interactive-tertiary-pressed: var(--color-system-200);
    --color-background-magic-primary: var(--color-extended-secondary-900); /* Magic/AI backgrounds for badges, alerts */
    --color-background-magic-secondary: var(--color-extended-secondary-100); /* Secondary magic/AI backgrounds for badges, alerts */
    --color-background-magic-interactive-primary-enabled: var(--color-extended-secondary-900);
    --color-background-magic-interactive-primary-focused: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-primary-hovered: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-primary-pressed: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-secondary-enabled: var(--color-extended-secondary-200);
    --color-background-magic-interactive-secondary-focused: var(--color-extended-secondary-300);
    --color-background-magic-interactive-secondary-hovered: var(--color-extended-secondary-300);
    --color-background-magic-interactive-secondary-pressed: var(--color-extended-secondary-300);
    --color-background-neutral-primary: var(--color-neutral-900); /* Neutral backgrounds for avatars, badges, alerts */
    --color-background-neutral-secondary: var(--color-neutral-100); /* Secondary neutral backgrounds for avatars, badges, alerts */
    --color-background-neutral-interactive-primary-enabled: var(--color-neutral-900);
    --color-background-neutral-interactive-primary-focused: var(--color-neutral-1000);
    --color-background-neutral-interactive-primary-hovered: var(--color-neutral-1000);
    --color-background-neutral-interactive-primary-pressed: var(--color-neutral-1000);
    --color-background-neutral-interactive-secondary-enabled: var(--color-neutral-200);
    --color-background-neutral-interactive-secondary-focused: var(--color-neutral-300);
    --color-background-neutral-interactive-secondary-hovered: var(--color-neutral-300);
    --color-background-neutral-interactive-secondary-pressed: var(--color-neutral-300);
    --color-background-positive-primary: var(--color-positive-900); /* Success/positive backgrounds for badges, alerts */
    --color-background-positive-secondary: var(--color-positive-100); /* Secondary success/positive backgrounds for badges, alerts */
    --color-background-positive-interactive-primary-enabled: var(--color-positive-900);
    --color-background-positive-interactive-primary-focused: var(--color-positive-1000);
    --color-background-positive-interactive-primary-hovered: var(--color-positive-1000);
    --color-background-positive-interactive-primary-pressed: var(--color-positive-1000);
    --color-background-positive-interactive-secondary-enabled: var(--color-positive-200);
    --color-background-positive-interactive-secondary-focused: var(--color-positive-300);
    --color-background-positive-interactive-secondary-hovered: var(--color-positive-300);
    --color-background-positive-interactive-secondary-pressed: var(--color-positive-300);
    --color-background-selected-interactive-primary-enabled: var(--color-brand-primary-100);
    --color-background-selected-interactive-primary-focused: var(--color-brand-primary-200);
    --color-background-selected-interactive-primary-hovered: var(--color-brand-primary-200);
    --color-background-selected-interactive-primary-pressed: var(--color-brand-primary-200);
    --color-background-selected-interactive-quaternary-enabled: var(--color-system-900);
    --color-background-selected-interactive-quaternary-focused: var(--color-system-1000);
    --color-background-selected-interactive-quaternary-hovered: var(--color-system-1000);
    --color-background-selected-interactive-quaternary-pressed: var(--color-system-1000);
    --color-background-selected-interactive-secondary-enabled: var(--color-system-300);
    --color-background-selected-interactive-secondary-focused: var(--color-system-400);
    --color-background-selected-interactive-secondary-hovered: var(--color-system-400);
    --color-background-selected-interactive-secondary-pressed: var(--color-system-400);
    --color-background-selected-interactive-tertiary-enabled: var(--color-system-900);
    --color-background-selected-interactive-tertiary-focused: var(--color-system-1000);
    --color-background-selected-interactive-tertiary-hovered: var(--color-system-1000);
    --color-background-selected-interactive-tertiary-pressed: var(--color-system-1000);
    --color-border-disabled: var(--color-light-border-disabled); /* Disabled borders for badges, controls */
    --color-border-focus: var(---co-brand-primary-800); /* Focus indicator borders */
    --color-border-inverse: var(--color-system-00); /* Inverse/white borders */
    --color-border-primary: var(--color-system-300); /* Primary borders for containers, inputs, tables */
    --color-border-attention-primary: var(--color-attention-800); /* Attention borders for alerts, badges */
    --color-border-attention-secondary: var(--color-attention-600); /* Secondary attention borders for alerts, badges */
    --color-border-brand-primary: var(--color-brand-primary-800); /* Brand borders for lists, tables */
    --color-border-brand-secondary: var(--color-brand-primary-600); /* Secondary brand borders */
    --color-border-brand-tertiary: var(--color-brand-primary-900); /* Tertiary brand borders */
    --color-border-brand-accent-primary: var(--color-brand-secondary-800); /* Accent brand borders */
    --color-border-brand-accent-secondary: var(--color-brand-secondary-600); /* Secondary accent brand borders */
    --color-border-brand-accent-tertiary: var(--color-brand-secondary-900); /* Tertiary accent brand borders */
    --color-border-brand-interactive-enabled: var(--color-brand-primary-700);
    --color-border-brand-interactive-focused: var(--color-brand-primary-800);
    --color-border-brand-interactive-hovered: var(--color-brand-primary-800);
    --color-border-brand-interactive-pressed: var(--color-brand-primary-800);
    --color-border-critical-primary: var(--color-critical-800); /* Critical/error borders for alerts, badges */
    --color-border-critical-secondary: var(--color-critical-600); /* Secondary critical/error borders for alerts, badges */
    --color-border-critical-interactive-enabled: var(--color-critical-900);
    --color-border-critical-interactive-focused: var(--color-critical-1000);
    --color-border-critical-interactive-hovered: var(--color-critical-1000);
    --color-border-critical-interactive-pressed: var(--color-critical-1000);
    --color-border-info-primary: var(--color-info-800); /* Info borders for alerts, badges */
    --color-border-info-secondary: var(--color-info-600); /* Secondary info borders for alerts, badges */
    --color-border-interactive-primary-enabled: var(--color-system-1200);
    --color-border-interactive-primary-focused: var(--color-system-1100);
    --color-border-interactive-primary-hovered: var(--color-system-1100);
    --color-border-interactive-primary-pressed: var(--color-system-1100);
    --color-border-interactive-secondary-enabled: var(--color-system-600);
    --color-border-interactive-secondary-focused: var(--color-system-700);
    --color-border-interactive-secondary-hovered: var(--color-system-700);
    --color-border-interactive-secondary-pressed: var(--color-system-700);
    --color-border-interactive-tertiary-enabled: var(--color-system-500);
    --color-border-interactive-tertiary-focused: var(--color-system-600);
    --color-border-interactive-tertiary-hovered: var(--color-system-600);
    --color-border-interactive-tertiary-pressed: var(--color-system-600);
    --color-border-magic-primary: var(--color-extended-secondary-800); /* Magic/AI borders for alerts, badges */
    --color-border-magic-secondary: var(--color-extended-secondary-600); /* Secondary magic/AI borders for alerts, badges */
    --color-border-neutral-primary: var(--color-neutral-800); /* Neutral borders for alerts, badges */
    --color-border-neutral-secondary: var(--color-neutral-600); /* Secondary neutral borders for alerts, badges */
    --color-border-positive-primary: var(--color-positive-800); /* Success/positive borders for alerts, badges, steppers */
    --color-border-positive-secondary: var(--color-positive-600); /* Secondary success/positive borders for alerts, badges, steppers */
    --color-border-positive-interactive-primary: var(--color-light-border-interactive-positive-primary); /* Interactive positive borders */
    --color-border-selected-interactive-primary-enabled: var(--color-brand-primary-700);
    --color-border-selected-interactive-primary-focused: var(--color-brand-primary-800);
    --color-border-selected-interactive-primary-hovered: var(--color-brand-primary-800);
    --color-border-selected-interactive-primary-pressed: var(--color-brand-primary-800);
    --color-border-selected-interactive-secondary-enabled: var(--color-system-1200);
    --color-border-selected-interactive-secondary-focused: var(--color-system-1100);
    --color-border-selected-interactive-secondary-hovered: var(--color-system-1100);
    --color-border-selected-interactive-secondary-pressed: var(--color-system-1100);
    --color-border-selected-interactive-tertiary-enabled: var(--color-brand-primary-600);
    --color-border-selected-interactive-tertiary-focused: var(--color-brand-primary-700);
    --color-border-selected-interactive-tertiary-hovered: var(--color-brand-primary-700);
    --color-border-selected-interactive-tertiary-pressed: var(--color-brand-primary-700);
    --color-content-disabled: var(--color-light-content-disabled); /* Disabled icon/content colors */
    --color-content-inverse: var(--color-system-00); /* Inverse/white icon/content colors */
    --color-content-primary: var(--color-system-1200); /* Primary icon/content colors for table headers, read-only fields */
    --color-content-secondary: var(--color-system-1100); /* Secondary icon/content colors */
    --color-content-attention-primary: var(--color-attention-1100); /* Attention icon/content colors for alerts, tooltips, tags */
    --color-content-attention-secondary: var(--color-content-inverse); /* Secondary attention icon/content colors */
    --color-content-attention-tertiary: var(--color-attention-900); /* Tertiary attention icon/content colors */
    --color-content-brand-primary: var(--color-brand-primary-1100); /* Brand icon/content colors */
    --color-content-brand-secondary: var(--color-text-inverse); /* Secondary brand icon/content colors */
    --color-content-brand-tertiary: var(--color-brand-primary-900); /* Tertiary brand icon/content colors */
    --color-content-brand-accent-primary: var(--color-brand-secondary-1100); /* Accent brand icon/content colors */
    --color-content-brand-accent-secondary: var(--color-content-inverse); /* Secondary accent brand icon/content colors */
    --color-content-brand-accent-tertiary: var(--color-brand-secondary-900); /* Tertiary accent brand icon/content colors */
    --color-content-brand-interactive-enabled: var(---co-brand-primary-1000);
    --color-content-brand-interactive-focused: var(---co-brand-primary-900);
    --color-content-brand-interactive-hovered: var(---co-brand-primary-900);
    --color-content-brand-interactive-pressed: var(---co-brand-primary-900);
    --color-content-critical-primary: var(--color-critical-1100); /* Critical/error icon/content colors for alerts */
    --color-content-critical-secondary: var(--color-content-inverse); /* Secondary critical/error icon/content colors */
    --color-content-critical-tertiary: var(--color-critical-900); /* Tertiary critical/error icon/content colors */
    --color-content-critical-interactive-enabled: var(--color-critical-1000);
    --color-content-critical-interactive-focused: var(--color-critical-1000);
    --color-content-critical-interactive-hovered: var(--color-critical-1000);
    --color-content-critical-interactive-pressed: var(--color-critical-1000);
    --color-content-info-primary: var(--color-info-1100); /* Info icon/content colors for alerts */
    --color-content-info-secondary: var(--color-content-inverse); /* Secondary info icon/content colors */
    --color-content-info-tertiary: var(--color-info-900); /* Tertiary info icon/content colors */
    --color-content-interactive-inverse-enabled: var(--color-system-00);
    --color-content-interactive-inverse-focused: var(--color-system-00);
    --color-content-interactive-inverse-hovered: var(--color-system-00);
    --color-content-interactive-inverse-pressed: var(--color-system-00);
    --color-content-interactive-primary-enabled: var(--color-system-1200);
    --color-content-interactive-primary-focused: var(--color-system-1200);
    --color-content-interactive-primary-hovered: var(--color-system-1200);
    --color-content-interactive-primary-pressed: var(--color-system-1200);
    --color-content-interactive-secondary-enabled: var(--color-system-1100);
    --color-content-interactive-secondary-focused: var(--color-system-1100);
    --color-content-interactive-secondary-hovered: var(--color-system-1100);
    --color-content-interactive-secondary-pressed: var(--color-system-1100);
    --color-content-magic-primary: var(--color-extended-secondary-1100); /* Magic/AI icon/content colors for alerts */
    --color-content-magic-secondary: var(--color-content-inverse); /* Secondary magic/AI icon/content colors */
    --color-content-magic-tertiary: var(--color-extended-secondary-900); /* Tertiary magic/AI icon/content colors */
    --color-content-neutral-primary: var(--color-neutral-1100); /* Neutral icon/content colors for alerts */
    --color-content-neutral-secondary: var(--color-content-inverse); /* Secondary neutral icon/content colors */
    --color-content-neutral-tertiary: var(--color-neutral-900); /* Tertiary neutral icon/content colors */
    --color-content-positive-primary: var(--color-positive-1100); /* Success/positive icon/content colors for alerts */
    --color-content-positive-secondary: var(--color-content-inverse); /* Secondary success/positive icon/content colors */
    --color-content-positive-tertiary: var(--color-positive-900); /* Tertiary success/positive icon/content colors */
    --color-content-positive-interactive-primary-enabled: var(--color-positive-1100);
    --color-content-positive-interactive-primary-focused: var(--color-positive-1000);
    --color-content-positive-interactive-primary-hovered: var(--color-positive-1000);
    --color-content-positive-interactive-primary-pressed: var(--color-positive-1000);
    --color-content-positive-interactive-secondary-enabled: var(--color-positive-100);
    --color-content-positive-interactive-secondary-focused: var(--color-positive-200);
    --color-content-positive-interactive-secondary-hovered: var(--color-positive-200);
    --color-content-positive-interactive-secondary-pressed: var(--color-positive-200);
    --color-content-selected-interactive-primary-enabled: var(--color-system-00);
    --color-content-selected-interactive-primary-focused: var(--color-system-100);
    --color-content-selected-interactive-primary-hovered: var(--color-system-100);
    --color-content-selected-interactive-primary-pressed: var(--color-system-100);
    --color-content-selected-interactive-secondary-enabled: var(--color-brand-primary-1000);
    --color-content-selected-interactive-secondary-focused: var(--color-brand-primary-900);
    --color-content-selected-interactive-secondary-hovered: var(--color-brand-primary-900);
    --color-content-selected-interactive-secondary-pressed: var(--color-brand-primary-900);
    --color-text-disabled: var(--color-light-text-disabled); /* Disabled text colors for badges, tabs */
    --color-text-inverse: var(--color-system-00); /* Inverse/white text colors */
    --color-text-primary: var(--color-system-1200); /* Primary text colors for body content, headings */
    --color-text-secondary: var(--color-system-1100); /* Secondary text colors for supporting content */
    --color-text-tertiary: var(--color-neutral-900); /* Tertiary text colors for subtle content */
    --color-text-attention-primary: var(--color-attention-1200); /* Attention text colors */
    --color-text-attention-secondary: var(--color-text-primary); /* Secondary attention text colors */
    --color-text-attention-tertiary: var(--color-attention-1100); /* Tertiary attention text colors */
    --color-text-brand-primary: var(--color-brand-primary-1200); /* Brand text colors for avatars */
    --color-text-brand-secondary: var(--color-text-inverse); /* Secondary brand text colors for avatars */
    --color-text-brand-tertiary: var(--color-brand-primary-1100); /* Tertiary brand text colors for avatars, nav flyouts */
    --color-text-brand-accent-primary: var(--color-brand-secondary-1200); /* Accent brand text colors for avatars */
    --color-text-brand-accent-secondary: var(--color-text-inverse); /* Secondary accent brand text colors */
    --color-text-brand-accent-tertiary: var(--color-brand-secondary-1100); /* Tertiary accent brand text colors for avatars */
    --color-text-critical-primary: var(--color-critical-1200); /* Critical/error text colors */
    --color-text-critical-secondary: var(--color-text-inverse); /* Secondary critical/error text colors */
    --color-text-critical-tertiary: var(--color-critical-1100); /* Tertiary critical/error text colors for field errors, validation */
    --color-text-critical-interactive-enabled: var(--color-critical-1100);
    --color-text-critical-interactive-focused: var(--color-critical-1100);
    --color-text-critical-interactive-hovered: var(--color-critical-1100);
    --color-text-critical-interactive-pressed: var(--color-critical-1100);
    --color-text-info-primary: var(--color-info-1200); /* Info text colors */
    --color-text-info-secondary: var(--color-text-inverse); /* Secondary info text colors */
    --color-text-info-tertiary: var(--color-info-1100); /* Tertiary info text colors */
    --color-text-interactive-inverse-enabled: var(--color-system-00);
    --color-text-interactive-inverse-focused: var(--color-system-00);
    --color-text-interactive-inverse-hovered: var(--color-system-00);
    --color-text-interactive-inverse-pressed: var(--color-system-00);
    --color-text-interactive-primary-enabled: var(--color-system-1200);
    --color-text-interactive-primary-focused: var(--color-system-1200);
    --color-text-interactive-primary-hovered: var(--color-system-1200);
    --color-text-interactive-primary-pressed: var(--color-system-1200);
    --color-text-interactive-quaternary-enabled: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-focused: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-hovered: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-pressed: var(--color-brand-primary-1100);
    --color-text-interactive-secondary-enabled: var(--color-system-1100);
    --color-text-interactive-secondary-focused: var(--color-system-1100);
    --color-text-interactive-secondary-hovered: var(--color-system-1100);
    --color-text-interactive-secondary-pressed: var(--color-system-1100);
    --color-text-interactive-tertiary-enabled: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-focused: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-hovered: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-pressed: var(--color-brand-primary-1000);
    --color-text-magic-primary: var(--color-extended-secondary-1200); /* Magic/AI text colors */
    --color-text-magic-secondary: var(--color-text-inverse); /* Secondary magic/AI text colors */
    --color-text-magic-tertiary: var(--color-extended-secondary-1100); /* Tertiary magic/AI text colors */
    --color-text-neutral-primary: var(--color-neutral-1200); /* Neutral text colors for avatars */
    --color-text-neutral-secondary: var(--color-text-inverse); /* Secondary neutral text colors */
    --color-text-neutral-tertiary: var(--color-neutral-1100); /* Tertiary neutral text colors for avatars */
    --color-text-neutral-interactive-primary-enabled: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-focused: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-hovered: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-pressed: var(--color-neutral-1200);
    --color-text-neutral-interactive-secondary-enabled: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-focused: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-hovered: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-pressed: var(--color-neutral-1100);
    --color-text-positive-primary: var(--color-positive-1200); /* Success/positive text colors */
    --color-text-positive-secondary: var(--color-text-inverse); /* Secondary success/positive text colors */
    --color-text-positive-tertiary: var(--color-positive-1100); /* Tertiary success/positive text colors */
    --color-text-selected-interactive-enabled: var(--color-brand-primary-1100);
    --color-text-selected-interactive-focused: var(--color-brand-primary-1000);
    --color-text-selected-interactive-hovered: var(--color-brand-primary-1000);
    --color-text-selected-interactive-pressed: var(--color-brand-primary-1000);
    /*Custom gradient tokens; these can be found in the Figma library as styles*/
    --color-background-gradient-start: var(--color-brand-primary-100);
    --color-background-gradient-end: #F3EDFF;
    --color-background-featured-container-gradient: linear-gradient(90deg, var(--color-background-gradient-start) 0%, var(--color-background-gradient-end) 77.88%);
  }
  /* grid */
  :root {
    /* default */
    /* number */
    --space-none: var(--grid-space-none); /* 0px - No spacing for stacked elements (14 uses) */
    --space-xxs: var(--grid-space-025); /* 2px - Extra extra small spacing for tight layouts, button icons (21 uses) */
    --space-xs: var(--grid-space-050); /* 4px - Extra small spacing for compact elements, badges, chips (43 uses) */
    --space-sm: var(--grid-space-075); /* 6px - Small spacing for related elements, inputs, controls (30 uses) */
    --space-md: var(--grid-space-100); /* 8px - Medium spacing, most common for padding and gaps (52 uses) */
    --space-lg: var(--grid-space-150); /* 12px - Large spacing for sections, cards, lists (36 uses) */
    --space-xl: var(--grid-space-200); /* 16px - Extra large spacing for major sections, containers (37 uses) */
    --space-2xl: var(--grid-space-250); /* 20px - Double extra large for containers, tab bars, tables (5 uses) */
    --space-3xl: var(--grid-space-300); /* 24px - Triple extra large for page sections, table padding (16 uses) */
    --space-4xl: var(--grid-space-400); /* 32px - Quad extra large for major page spacing, nav items (5 uses) */
    --space-5xl: var(--grid-space-500); /* 40px - Quint extra large (no current usage) */
    --space-6xl: var(--grid-space-600); /* 48px - Sext extra large (no current usage) */
    --space-7xl: var(--grid-space-800); /* 64px - Sept extra large (no current usage) */
    --space-8xl: var(--grid-space-1000); /* 80px - Oct extra large (no current usage) */
    --space-9xl: var(--grid-space-1200); /* 96px - Non extra large (no current usage) */
  }
  /* border */
  :root {
    /* default */
    /* number */
    --border-radius-none: var(--border-radius-none); /* No rounding for accordion items, drawers, list drag handles (3 uses) */
    --border-radius-xs: var(--border-radius-050); /* Extra small rounding for controls, inputs, sliders, tags, nav flyouts (6 uses) */
    --border-radius-sm: var(--border-radius-100); /* Small rounding for buttons, inputs, alerts, nav items, tabs, tables (17 uses) */
    --border-radius-md: var(--border-radius-150); /* Medium rounding for containers, drawers, popovers, tab bars (7 uses) */
    --border-radius-lg: var(--border-radius-200); /* Large rounding (no current usage) */
    --border-radius-xl: var(--border-radius-250); /* Extra large rounding (no current usage) */
    --border-radius-full: var(--border-radius-circle); /* Full circle/pill shape for badges, chips, progress bars, switch thumbs (8 uses) */
    --border-weight-default: var(--border-weight-100); /* Standard border width for most components: buttons, containers, tables, badges (13 uses) */
    --border-weight-heavy: var(--border-weight-200); /* Heavy border for alerts, selected states, snackbar icons (4 uses) */
    --border-weight-heaviest: var(--border-weight-300); /* Heaviest border for emphasis on selected states, active tabs (3 uses) */
  }
  /* size */
  :root {
    /* default */
    /* number */
    --size-element-xs: var(--size-150); /* 12px - Extra small element sizing for compact components (6 uses) */
    --size-element-sm: var(--size-200); /* 16px - Small element sizing for inputs, buttons (4 uses) */
    --size-element-md: var(--size-225); /* 18px - Medium element sizing (no current usage) */
    --size-element-lg: var(--size-250); /* 20px - Large element sizing for prominent elements (3 uses) */
    --size-element-xl: var(--size-300); /* 24px - Extra large element sizing for major components (6 uses) */
    --size-element-2xl: var(--size-350); /* 28px - Double extra large for popover arrows, large elements (3 uses) */
    --size-element-3xl: var(--size-400); /* 32px - Triple extra large for substantial components (3 uses) */
    --size-element-4xl: var(--size-600); /* 48px - Quad extra large for hero elements (1 use) */
    --size-icon-xxs: var(--size-125); /* 10px - Extra extra small icons for tight spaces (no current usage) */
    --size-icon-xs: var(--size-150); /* 12px - Extra small icons for compact layouts (no current usage) */
    --size-icon-sm: var(--size-200); /* 16px - Small icons for standard UI elements (no current usage) */
    --size-icon-md: var(--size-225); /* 18px - Medium icons for default states (no current usage) */
    --size-icon-lg: var(--size-250); /* 20px - Large icons for emphasis (no current usage) */
    --size-icon-xl: var(--size-300); /* 24px - Extra large icons for prominent actions (no current usage) */
    --size-icon-2xl: var(--size-350); /* 28px - Double extra large icons (no current usage) */
    --size-icon-3xl: var(--size-400); /* 32px - Triple extra large icons for hero sections (no current usage) */
    --size-illustration-xs: var(--size-150); /* 12px - Extra small illustrations (no current usage) */
  }
  /* typography */
  :root {
    /* default */
    /* number */
    /* Line Heights - Body Text */
    --text-line-height-body-xxs: var(--text-line-height-175); /* 14px - Extra extra small body line height (no current usage) */
    --text-line-height-body-sm: var(--text-line-height-250); /* 20px - Small body text line height (7 uses) */
    --text-line-height-body-xs: var(--text-line-height-250); /* 20px - Extra small body line height (no current usage) */
    --text-line-height-body-base: var(--text-line-height-300); /* 24px - Default body text line height (2 uses) */
    --text-line-height-body-lg: var(--text-line-height-350); /* 28px - Large body text line height (no current usage) */
    /* Line Heights - Display Text */
    --text-line-height-display-xs: var(--text-line-height-650); /* 52px - Extra small display line height (no current usage) */
    --text-line-height-display-sm: var(--text-line-height-750); /* 60px - Small display line height (no current usage) */
    --text-line-height-display-md: var(--text-line-height-900); /* 72px - Medium display line height (no current usage) */
    --text-line-height-display-lg: var(--text-line-height-1050); /* 84px - Large display line height (no current usage) */
    --text-line-height-display-xl: var(--text-line-height-1250); /* 100px - Extra large display line height (no current usage) */
    /* Line Heights - Headings */
    --text-line-height-heading-xxs: var(--text-line-height-250); /* 20px - Extra extra small heading line height (2 uses) */
    --text-line-height-heading-xs: var(--text-line-height-300); /* 24px - Extra small heading line height (no current usage) */
    --text-line-height-heading-sm: var(--text-line-height-350); /* 28px - Small heading line height (no current usage) */
    --text-line-height-heading-md: var(--text-line-height-400); /* 32px - Medium heading line height (no current usage) */
    --text-line-height-heading-lg: var(--text-line-height-550); /* 44px - Large heading line height (no current usage) */
    --text-line-height-heading-xl: var(--text-line-height-600); /* 48px - Extra large heading line height (no current usage) */
    /* Line Heights - Labels */
    --text-line-height-label-xxs: var(--text-line-height-150); /* 12px - Extra extra small label line height (2 uses) */
    --text-line-height-label-xs: var(--text-line-height-200); /* 16px - Extra small label line height (3 uses) */
    --text-line-height-label-sm: var(--text-line-height-250); /* 20px - Small label line height (6 uses) */
    --text-line-height-label-base: var(--text-line-height-300); /* 24px - Default label line height (5 uses) */
    --text-line-height-label-lg: var(--text-line-height-300); /* 24px - Large label line height (1 use) */
    /* Paragraph Spacing - Body Text */
    --text-p-spacing-body-xxs: var(--grid-space-075); /* 6px - Extra extra small paragraph spacing */
    --text-p-spacing-body-xs: var(--grid-space-100); /* 8px - Extra small paragraph spacing */
    --text-p-spacing-body-sm: 0.625rem; /* 10px - Small paragraph spacing */
    --text-p-spacing-body-base: var(--grid-space-150); /* 12px - Default paragraph spacing */
    --text-p-spacing-body-lg: var(--grid-space-200); /* 16px - Large paragraph spacing */
    /* Paragraph Spacing - Display (no spacing) */
    --text-p-spacing-display-lg: 0rem; /* 0px - Large display paragraph spacing */
    --text-p-spacing-display-md: 0rem; /* 0px - Medium display paragraph spacing */
    --text-p-spacing-display-sm: 0rem; /* 0px - Small display paragraph spacing */
    --text-p-spacing-display-xl: 0rem; /* 0px - Extra large display paragraph spacing */
    --text-p-spacing-display-xs: 0rem; /* 0px - Extra small display paragraph spacing */
    /* Paragraph Spacing - Headings (no spacing) */
    --text-p-spacing-heading-lg: 0rem; /* 0px - Large heading paragraph spacing */
    --text-p-spacing-heading-md: 0rem; /* 0px - Medium heading paragraph spacing */
    --text-p-spacing-heading-sm: 0rem; /* 0px - Small heading paragraph spacing */
    --text-p-spacing-heading-xl: 0rem; /* 0px - Extra large heading paragraph spacing */
    --text-p-spacing-heading-xs: 0rem; /* 0px - Extra small heading paragraph spacing */
    --text-p-spacing-heading-xxs: 0rem; /* 0px - Extra extra small heading paragraph spacing */
    /* Paragraph Spacing - Labels */
    --text-p-spacing-label-xxs: var(--grid-space-075); /* 6px - Extra extra small label paragraph spacing */
    --text-p-spacing-label-xs: var(--grid-space-100); /* 8px - Extra small label paragraph spacing */
    --text-p-spacing-label-sm: 0.625rem; /* 10px - Small label paragraph spacing */
    --text-p-spacing-label-base: var(--grid-space-150); /* 12px - Default label paragraph spacing */
    --text-p-spacing-label-lg: var(--grid-space-200); /* 16px - Large label paragraph spacing */
    /* Text Sizes - Body Text */
    --text-size-body-xxs: var(--text-size-125); /* 10px - Extra extra small body text (no current usage) */
    --text-size-body-xs: var(--text-size-150); /* 12px - Extra small body text (2 uses) */
    --text-size-body-sm: var(--text-size-175); /* 14px - Small body text (7 uses) */
    --text-size-body-base: var(--text-size-200); /* 16px - Default body text size (2 uses) */
    --text-size-body-lg: var(--text-size-250); /* 20px - Large body text (no current usage) */
    /* Text Sizes - Display Text */
    --text-size-display-xs: var(--text-size-500); /* 40px - Extra small display text (no current usage) */
    --text-size-display-sm: var(--text-size-600); /* 48px - Small display text (no current usage) */
    --text-size-display-md: var(--text-size-700); /* 56px - Medium display text (no current usage) */
    --text-size-display-lg: var(--text-size-850); /* 68px - Large display text (no current usage) */
    --text-size-display-xl: var(--text-size-1000); /* 80px - Extra large display text (no current usage) */
    /* Text Sizes - Headings */
    --text-size-heading-xxs: var(--text-size-200); /* 16px - Extra extra small headings (2 uses) */
    --text-size-heading-xs: var(--text-size-250); /* 20px - Extra small headings (no current usage) */
    --text-size-heading-sm: var(--text-size-300); /* 24px - Small headings (no current usage) */
    --text-size-heading-md: var(--text-size-350); /* 28px - Medium headings (no current usage) */
    --text-size-heading-lg: var(--text-size-450); /* 36px - Large headings (no current usage) */
    --text-size-heading-xl: var(--text-size-500); /* 40px - Extra large headings (no current usage) */
    /* Text Sizes - Labels */
    --text-size-label-xxs: var(--text-size-125); /* 10px - Extra extra small labels (2 uses) */
    --text-size-label-xs: var(--text-size-150); /* 12px - Extra small labels (5 uses) */
    --text-size-label-sm: var(--text-size-175); /* 14px - Small labels, most commonly used (13 uses) */
    --text-size-label-base: var(--text-size-200); /* 16px - Default label size (6 uses) */
    --text-size-label-lg: var(--text-size-250); /* 20px - Large labels (2 uses) */
    /* Text Weights - Body Text (Regular) */
    --text-weight-body-base: var(--text-weight-regular); /* 400 - Default body text weight (9 uses) */
    --text-weight-body-lg: var(--text-weight-regular); /* 400 - Large body text weight (9 uses) */
    --text-weight-body-sm: var(--text-weight-regular); /* 400 - Small body text weight (9 uses) */
    --text-weight-body-xs: var(--text-weight-regular); /* 400 - Extra small body text weight (9 uses) */
    --text-weight-body-xxs: var(--text-weight-regular); /* 400 - Extra extra small body text weight (9 uses) */
    /* Text Weights - Body Text (Medium) */
    --text-weight-body-base-medium: var(--text-weight-medium); /* 500 - Medium weight body text (11 uses) */
    --text-weight-body-lg-medium: var(--text-weight-medium); /* 500 - Large medium body text (11 uses) */
    --text-weight-body-sm-medium: var(--text-weight-medium); /* 500 - Small medium body text (11 uses) */
    --text-weight-body-xs-medium: var(--text-weight-medium); /* 500 - Extra small medium body text (11 uses) */
    --text-weight-body-xxs-medium: var(--text-weight-medium); /* 500 - Extra extra small medium body text (11 uses) */
    /* Text Weights - Body Text (Strong/Semibold) */
    --text-weight-body-base-strong: var(--text-weight-semibold); /* 600 - Strong/bold body text */
    --text-weight-body-lg-strong: var(--text-weight-semibold); /* 600 - Large strong body text */
    --text-weight-body-sm-strong: var(--text-weight-semibold); /* 600 - Small strong body text */
    --text-weight-body-xs-strong: var(--text-weight-semibold); /* 600 - Extra small strong body text */
    --text-weight-body-xxs-strong: var(--text-weight-semibold); /* 600 - Extra extra small strong body text */
    /* Text Weights - Display Text */
    --text-weight-display-lg: var(--text-weight-medium); /* 500 - Large display text weight (11 uses) */
    --text-weight-display-md: var(--text-weight-medium); /* 500 - Medium display text weight (11 uses) */
    --text-weight-display-sm: var(--text-weight-medium); /* 500 - Small display text weight (11 uses) */
    --text-weight-display-xl: var(--text-weight-medium); /* 500 - Extra large display text weight (11 uses) */
    --text-weight-display-xs: var(--text-weight-medium); /* 500 - Extra small display text weight (11 uses) */
    /* Text Weights - Headings */
    --text-weight-heading-lg: var(--text-weight-bold); /* 700 - Large heading weight (5 uses) */
    --text-weight-heading-md: var(--text-weight-bold); /* 700 - Medium heading weight (5 uses) */
    --text-weight-heading-sm: var(--text-weight-bold); /* 700 - Small heading weight (5 uses) */
    --text-weight-heading-xl: var(--text-weight-bold); /* 700 - Extra large heading weight (5 uses) */
    --text-weight-heading-xs: var(--text-weight-bold); /* 700 - Extra small heading weight (5 uses) */
    --text-weight-heading-xxs: var(--text-weight-bold); /* 700 - Extra extra small heading weight (5 uses) */
    /* Text Weights - Labels (Regular) */
    --text-weight-label-xs: var(--text-weight-regular); /* 400 - Extra small label weight (9 uses) */
    --text-weight-label-xxs: var(--text-weight-regular); /* 400 - Extra extra small label weight (9 uses) */
    /* Text Weights - Labels (Medium) */
    --text-weight-label-base: var(--text-weight-medium); /* 500 - Default label weight (11 uses) */
    --text-weight-label-lg: var(--text-weight-medium); /* 500 - Large label weight (11 uses) */
    --text-weight-label-sm: var(--text-weight-medium); /* 500 - Small label weight (11 uses) */
    /* Text Weights - Labels (Strong) */
    --text-weight-label-xxs-strong: var(--text-weight-medium); /* 500 - Extra extra small strong label (11 uses) */
    --text-weight-label-xs-strong: var(--text-weight-semibold); /* 600 - Extra small strong label */
    --text-weight-label-base-strong: var(--text-weight-bold); /* 700 - Default strong label (5 uses) */
    --text-weight-label-lg-strong: var(--text-weight-bold); /* 700 - Large strong label (5 uses) */
    --text-weight-label-sm-strong: var(--text-weight-bold); /* 700 - Small strong label (5 uses) */
  }
  /* 1. Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
  }
  /* 2. Remove default margin */
  * {
    margin: 0;
  }
  /* 3. Enable keyword animations */
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  body {
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
  }
  /* 8. Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  /* 9. Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }
  /*
      10. Create a root stacking context
    */
  #root,
  #__next {
    isolation: isolate;
  }
  /*---- BODY TEXT STYLES ----*/
  /*---- XXS ----*/
  .spotlight_body-xxs {
    line-height: var(--text-line-height-body-xxs);
    font-size: var(--text-size-body-xxs);
    font-weight: var(--text-weight-body-xxs);
    font-family: var(--text-font-san-serif);
  }
  /*---- XS ----*/
  .spotlight_body-xs {
    line-height: var(--text-line-height-body-xs);
    font-size: var(--text-size-body-xs);
    font-weight: var(--text-weight-body-xs);
    font-family: var(--text-font-san-serif);
  }
  /*---- SM ----*/
  .spotlight_body-sm {
    line-height: var(--text-line-height-body-sm);
    font-size: var(--text-size-body-sm);
    font-weight: var(--text-weight-body-sm);
    font-family: var(--text-font-san-serif);
  }
  /*---- BASE ----*/
  .spotlight_body-base {
    line-height: var(--text-line-height-body-base);
    font-size: var(--text-size-body-base);
    font-weight: var(--text-weight-body-base);
    font-family: var(--text-font-san-serif);
  }
  /*---- MD ----*/
  .spotlight_body-md {
    line-height: var(--text-line-height-body-md);
    font-size: var(--text-size-body-md);
    font-weight: var(--text-weight-body-md);
    font-family: var(--text-font-san-serif);
  }
  /*---- LG ----*/
  .spotlight_body-lg {
    line-height: var(--text-line-height-body-lg);
    font-size: var(--text-size-body-lg);
    font-weight: var(--text-weight-body-lg);
    font-family: var(--text-font-san-serif);
  }
  /*--------------------------*/
  /*---- LABEL TEXT STYLES ----*/
  /*---- XXS ----*/
  .spotlight_label-xxs {
    line-height: var(--text-line-height-label-xxs);
    font-size: var(--text-size-label-xxs);
    font-weight: var(--text-weight-label-xxs);
    font-family: var(--text-font-san-serif);
  }
  /*---- XS ----*/
  .spotlight_label-xs {
    line-height: var(--text-line-height-label-xs);
    font-size: var(--text-size-label-xs);
    font-weight: var(--text-weight-label-xs);
    font-family: var(--text-font-san-serif);
  }
  /*---- SM ----*/
  .spotlight_label-sm {
    line-height: var(--text-line-height-label-sm);
    font-size: var(--text-size-label-sm);
    font-weight: var(--text-weight-label-sm);
    font-family: var(--text-font-san-serif);
  }
  /*---- BASE ----*/
  .spotlight_label-base {
    line-height: var(--text-line-height-label-base);
    font-size: var(--text-size-label-base);
    font-weight: var(--text-weight-label-base);
    font-family: var(--text-font-san-serif);
  }
  /*---- LG ----*/
  .spotlight_label-lg {
    line-height: var(--text-line-height-label-lg);
    font-size: var(--text-size-label-lg);
    font-weight: var(--text-weight-label-lg);
    font-family: var(--text-font-san-serif);
  }
  /*--------------------------*/
  /*---- HEADING TEXT STYLES ----*/
  /*---- XXS ----*/
  .spotlight_heading-xxs {
    line-height: var(--text-line-height-heading-xxs);
    font-size: var(--text-size-heading-xxs);
    font-weight: var(--text-weight-heading-xxs);
    font-family: var(--text-font-san-serif);
  }
  /*---- XS ----*/
  .spotlight_heading-xs {
    line-height: var(--text-line-height-heading-xs);
    font-size: var(--text-size-heading-xs);
    font-weight: var(--text-weight-heading-xs);
    font-family: var(--text-font-san-serif);
  }
  /*---- SM ----*/
  .spotlight_heading-sm {
    line-height: var(--text-line-height-heading-sm);
    font-size: var(--text-size-heading-sm);
    font-weight: var(--text-weight-heading-sm);
    font-family: var(--text-font-san-serif);
  }
  /*---- MD ----*/
  .spotlight_heading-md {
    line-height: var(--text-line-height-heading-md);
    font-size: var(--text-size-heading-md);
    font-weight: var(--text-weight-heading-md);
    font-family: var(--text-font-san-serif);
  }
  /*---- LG ----*/
  .spotlight_heading-lg {
    line-height: var(--text-line-height-heading-lg);
    font-size: var(--text-size-heading-lg);
    font-weight: var(--text-weight-heading-lg);
    font-family: var(--text-font-san-serif);
  }
  /*---- SM ----*/
  .spotlight_heading-sm {
    line-height: var(--text-line-height-heading-sm);
    font-size: var(--text-size-heading-sm);
    font-weight: var(--text-weight-heading-sm);
    font-family: var(--text-font-san-serif);
  }
  /*--------------------------*/
  /*---- DISPLAY TEXT STYLES ----*/
  /*---- XS ----*/
  .spotlight_display-xs {
    line-height: var(--text-line-height-display-xs);
    font-size: var(--text-size-display-xs);
    font-weight: var(--text-weight-display-xs);
    font-family: var(--text-font-san-serif);
  }
  /*---- SM ----*/
  .spotlight_display-sm {
    line-height: var(--text-line-height-display-sm);
    font-size: var(--text-size-display-sm);
    font-weight: var(--text-weight-display-sm);
    font-family: var(--text-font-san-serif);
  }
  /*---- LG ----*/
  .spotlight_display-lg {
    line-height: var(--text-line-height-display-lg);
    font-size: var(--text-size-display-lg);
    font-weight: var(--text-weight-display-lg);
    font-family: var(--text-font-san-serif);
  }
  /*---- XL ----*/
  .spotlight_display-xl {
    line-height: var(--text-line-height-display-xl);
    font-size: var(--text-size-display-xl);
    font-weight: var(--text-weight-display-xl);
    font-family: var(--text-font-san-serif);
  }
  /*---- WEIGHTS ----*/
  .spotlight_medium {
    --text-weight-body-xxs: var(--text-weight-body-xxs-medium);
    --text-weight-body-xs: var(--text-weight-body-xs-medium);
    --text-weight-body-sm: var(--text-weight-body-sm-medium);
    --text-weight-body-base: var(--text-weight-body-base-medium);
    --text-weight-body-md: var(--text-weight-body-md-medium);
    --text-weight-body-lg: var(--text-weight-body-lg-medium);
  }
  .spotlight_strong {
    --text-weight-body-xxs: var(--text-weight-body-xxs-strong);
    --text-weight-body-xs: var(--text-weight-body-xs-strong);
    --text-weight-body-sm: var(--text-weight-body-sm-strong);
    --text-weight-body-base: var(--text-weight-body-base-strong);
    --text-weight-body-md: var(--text-weight-body-md-strong);
    --text-weight-body-lg: var(--text-weight-body-lg-strong);
    --text-weight-label-xxs: var(--text-weight-label-xxs-strong);
    --text-weight-label-xs: var(--text-weight-label-xs-strong);
    --text-weight-label-sm: var(--text-weight-label-sm-strong);
    --text-weight-label-base: var(--text-weight-label-base-strong);
    --text-weight-label-lg: var(--text-weight-label-lg-strong);
  }
  .spotlight_overflow-top {
    box-shadow: 0px 2px 8px -4px rgba(0, 0, 0, 0.04) inset, 0px 8px 16px -8px rgba(0, 0, 0, 0.06) inset;
  }
  .spotlight_overflow-top[data-disabled], .spotlight_overflow-top :disabled {
    box-shadow: none;
  }
  .spotlight_overflow-right {
    box-shadow: -2px 0px 8px -4px rgba(0, 0, 0, 0.04) inset, -8px 0px 16px -8px rgba(0, 0, 0, 0.06) inset;
  }
  .spotlight_overflow-right[data-disabled], .spotlight_overflow-right :disabled {
    box-shadow: none;
  }
  .spotlight_overflow-bottom {
    box-shadow: 0px -2px 8px -4px rgba(0, 0, 0, 0.04) inset, 0px -8px 16px -8px rgba(0, 0, 0, 0.06) inset;
  }
  .spotlight_overflow-bottom[data-disabled], .spotlight_overflow-bottom :disabled {
    box-shadow: none;
  }
  .spotlight_overflow-left {
    box-shadow: 2px 0px 8px -4px rgba(0, 0, 0, 0.04) inset, 8px 0px 16px -8px rgba(0, 0, 0, 0.06) inset;
  }
  .spotlight_overflow-left[data-disabled], .spotlight_overflow-left :disabled {
    box-shadow: none;
  }
  .spotlight_elevation-01 {
    box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.04), 0px 12px 32px -8px rgba(0, 0, 0, 0.06);
  }
  .spotlight_elevation-01[data-disabled], .spotlight_elevation-01 :disabled {
    box-shadow: none;
  }
  .spotlight_elevation-02 {
    box-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.04), 0px 24px 40px -8px rgba(0, 0, 0, 0.08);
  }
  .spotlight_elevation-02[data-disabled], .spotlight_elevation-02 :disabled {
    box-shadow: none;
  }
  .spotlight_elevation-03 {
    box-shadow: 0px 16px 24px -2px rgba(0, 0, 0, 0.04), 0px 32px 48px -4px rgba(0, 0, 0, 0.1);
  }
  .spotlight_elevation-03[data-disabled], .spotlight_elevation-03 :disabled {
    box-shadow: none;
  }
  .body {
    font-family: var(--text-font-san-serif);
  }
  /**
   * Responsive Grid Utility System
   *
   * This SCSS file provides a set of utility classes for building responsive layouts using Flexbox.
   * It supports multiple breakpoints (xs, sm, md, lg, xl) and allows for flexible row and column configurations.
   *
   * Features:
   * - Responsive rows and columns with or without gutters (spacing)
   * - Column width and offset utilities for each breakpoint
   * - Flexbox alignment and distribution utilities per breakpoint
   * - Order utilities (first/last) per breakpoint
   * - Utilities for reversing row/column direction and natural height
   * - Utilities for hiding elements at specific breakpoints
   * - Alignment utilities for individual columns
   *
   * Usage Example:
   * <div class="spotlight_row spotlight_center-md">
   *   <div class="spotlight_col-xs-12 spotlight_col-md-6">Column 1</div>
   *   <div class="spotlight_col-xs-12 spotlight_col-md-6 spotlight_hidden-xs">Column 2</div>
   * </div>
   *
   * How to use:
   * - Use `.spotlight_row` to create a flex row. Add breakpoint alignment classes as needed.
   * - Use `.spotlight_col-{breakpoint}-{n}` for column width (n of grid columns) at a breakpoint.
   * - Use `.spotlight_col-{breakpoint}-offset-{n}` to offset a column by n columns.
   * - Use `.spotlight_col-{breakpoint}-{n}-no-gutter` for columns without spacing.
   * - Use `.spotlight_hidden-{breakpoint}` to hide elements at a specific breakpoint.
   * - Use alignment and order classes for advanced layout control.
   *
   * This system is intended for internal team use and is not a standalone component.
   */
  .spotlight_row.spotlight_reverse {
    flex-direction: row-reverse;
  }
  .spotlight_row.spotlight_natural-height {
    align-items: flex-start;
  }
  .spotlight_row.spotlight_flex-column {
    flex-direction: column;
  }
  .spotlight_col.spotlight_reverse {
    flex-direction: column-reverse;
  }
  .spotlight_first {
    order: -1;
  }
  .spotlight_last {
    order: 1;
  }
  .spotlight_align-start {
    align-self: flex-start;
  }
  .spotlight_align-end {
    align-self: flex-end;
  }
  .spotlight_align-center {
    align-self: center;
  }
  .spotlight_align-baseline {
    align-self: baseline;
  }
  .spotlight_align-stretch {
    align-self: stretch;
  }
  .spotlight_col-xs-1 {
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
    padding: 1rem;
  }
  .spotlight_col-xs-1-no-gutter {
    box-sizing: border-box;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .spotlight_col-xs-offset-1 {
    margin-left: 8.3333333333%;
  }
  .spotlight_col-xs-2 {
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
    padding: 1rem;
  }
  .spotlight_col-xs-2-no-gutter {
    box-sizing: border-box;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .spotlight_col-xs-offset-2 {
    margin-left: 16.6666666667%;
  }
  .spotlight_col-xs-3 {
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
    padding: 1rem;
  }
  .spotlight_col-xs-3-no-gutter {
    box-sizing: border-box;
    flex-basis: 25%;
    max-width: 25%;
  }
  .spotlight_col-xs-offset-3 {
    margin-left: 25%;
  }
  .spotlight_col-xs-4 {
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
    padding: 1rem;
  }
  .spotlight_col-xs-4-no-gutter {
    box-sizing: border-box;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .spotlight_col-xs-offset-4 {
    margin-left: 33.3333333333%;
  }
  .spotlight_col-xs-5 {
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
    padding: 1rem;
  }
  .spotlight_col-xs-5-no-gutter {
    box-sizing: border-box;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .spotlight_col-xs-offset-5 {
    margin-left: 41.6666666667%;
  }
  .spotlight_col-xs-6 {
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
    padding: 1rem;
  }
  .spotlight_col-xs-6-no-gutter {
    box-sizing: border-box;
    flex-basis: 50%;
    max-width: 50%;
  }
  .spotlight_col-xs-offset-6 {
    margin-left: 50%;
  }
  .spotlight_col-xs-7 {
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
    padding: 1rem;
  }
  .spotlight_col-xs-7-no-gutter {
    box-sizing: border-box;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .spotlight_col-xs-offset-7 {
    margin-left: 58.3333333333%;
  }
  .spotlight_col-xs-8 {
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
    padding: 1rem;
  }
  .spotlight_col-xs-8-no-gutter {
    box-sizing: border-box;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .spotlight_col-xs-offset-8 {
    margin-left: 66.6666666667%;
  }
  .spotlight_col-xs-9 {
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
    padding: 1rem;
  }
  .spotlight_col-xs-9-no-gutter {
    box-sizing: border-box;
    flex-basis: 75%;
    max-width: 75%;
  }
  .spotlight_col-xs-offset-9 {
    margin-left: 75%;
  }
  .spotlight_col-xs-10 {
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
    padding: 1rem;
  }
  .spotlight_col-xs-10-no-gutter {
    box-sizing: border-box;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .spotlight_col-xs-offset-10 {
    margin-left: 83.3333333333%;
  }
  .spotlight_col-xs-11 {
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
    padding: 1rem;
  }
  .spotlight_col-xs-11-no-gutter {
    box-sizing: border-box;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .spotlight_col-xs-offset-11 {
    margin-left: 91.6666666667%;
  }
  .spotlight_col-xs-12 {
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
    padding: 1rem;
  }
  .spotlight_col-xs-12-no-gutter {
    box-sizing: border-box;
    flex-basis: 100%;
    max-width: 100%;
  }
  .spotlight_col-xs-offset-12 {
    margin-left: 100%;
  }
  .spotlight_row.spotlight_start-xs {
    justify-content: flex-start;
  }
  .spotlight_row.spotlight_center-xs {
    justify-content: center;
  }
  .spotlight_row.spotlight_end-xs {
    justify-content: flex-end;
  }
  .spotlight_row.spotlight_top-xs {
    align-items: flex-start;
  }
  .spotlight_row.spotlight_middle-xs {
    align-items: center;
  }
  .spotlight_row.spotlight_bottom-xs {
    align-items: flex-end;
  }
  .spotlight_row.spotlight_around-xs {
    justify-content: space-around;
  }
  .spotlight_row.spotlight_between-xs {
    justify-content: space-between;
  }
  .spotlight_first-xs {
    order: -1;
  }
  .spotlight_last-xs {
    order: 1;
  }
  @media only screen and (max-width: 40rem) {
    .spotlight_hidden-xs {
      display: none !important;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-1 {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-1 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-1-no-gutter {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-1 {
      margin-left: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-2 {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-2 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-2-no-gutter {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-2 {
      margin-left: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-3 {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-3 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-3-no-gutter {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-3 {
      margin-left: 25%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-4 {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-4 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-4-no-gutter {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-4 {
      margin-left: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-5 {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-5 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-5-no-gutter {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-5 {
      margin-left: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-6 {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-6 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-6-no-gutter {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-6 {
      margin-left: 50%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-7 {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-7 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-7-no-gutter {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-7 {
      margin-left: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-8 {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-8 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-8-no-gutter {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-8 {
      margin-left: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-9 {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-9 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-9-no-gutter {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-9 {
      margin-left: 75%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-10 {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-10 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-10-no-gutter {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-10 {
      margin-left: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-11 {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-11 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-11-no-gutter {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-12 {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 41rem) and (min-width: 41rem) {
    .spotlight_col-sm-12 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-12-no-gutter {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_col-sm-offset-12 {
      margin-left: 100%;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_start-sm {
      justify-content: flex-start;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_center-sm {
      justify-content: center;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_end-sm {
      justify-content: flex-end;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_top-sm {
      align-items: flex-start;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_middle-sm {
      align-items: center;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_bottom-sm {
      align-items: flex-end;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_around-sm {
      justify-content: space-around;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_row.spotlight_between-sm {
      justify-content: space-between;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_first-sm {
      order: -1;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_last-sm {
      order: 1;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_hidden-sm {
      display: none !important;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-1 {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-1 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-1-no-gutter {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-1 {
      margin-left: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-2 {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-2 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-2-no-gutter {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-2 {
      margin-left: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-3 {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-3 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-3-no-gutter {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-3 {
      margin-left: 25%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-4 {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-4 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-4-no-gutter {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-4 {
      margin-left: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-5 {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-5 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-5-no-gutter {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-5 {
      margin-left: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-6 {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-6 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-6-no-gutter {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-6 {
      margin-left: 50%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-7 {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-7 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-7-no-gutter {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-7 {
      margin-left: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-8 {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-8 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-8-no-gutter {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-8 {
      margin-left: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-9 {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-9 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-9-no-gutter {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-9 {
      margin-left: 75%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-10 {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-10 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-10-no-gutter {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-10 {
      margin-left: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-11 {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-11 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-11-no-gutter {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-12 {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 65rem) and (min-width: 65rem) {
    .spotlight_col-md-12 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-12-no-gutter {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_col-md-offset-12 {
      margin-left: 100%;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_start-md {
      justify-content: flex-start;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_center-md {
      justify-content: center;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_end-md {
      justify-content: flex-end;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_top-md {
      align-items: flex-start;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_middle-md {
      align-items: center;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_bottom-md {
      align-items: flex-end;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_around-md {
      justify-content: space-around;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_row.spotlight_between-md {
      justify-content: space-between;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_first-md {
      order: -1;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_last-md {
      order: 1;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_hidden-md {
      display: none !important;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-1 {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-1 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-1-no-gutter {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-1 {
      margin-left: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-2 {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-2 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-2-no-gutter {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-2 {
      margin-left: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-3 {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-3 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-3-no-gutter {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-3 {
      margin-left: 25%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-4 {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-4 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-4-no-gutter {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-4 {
      margin-left: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-5 {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-5 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-5-no-gutter {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-5 {
      margin-left: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-6 {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-6 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-6-no-gutter {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-6 {
      margin-left: 50%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-7 {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-7 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-7-no-gutter {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-7 {
      margin-left: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-8 {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-8 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-8-no-gutter {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-8 {
      margin-left: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-9 {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-9 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-9-no-gutter {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-9 {
      margin-left: 75%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-10 {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-10 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-10-no-gutter {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-10 {
      margin-left: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-11 {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-11 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-11-no-gutter {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-12 {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 91rem) and (min-width: 91rem) {
    .spotlight_col-lg-12 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-12-no-gutter {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_col-lg-offset-12 {
      margin-left: 100%;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_start-lg {
      justify-content: flex-start;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_center-lg {
      justify-content: center;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_end-lg {
      justify-content: flex-end;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_top-lg {
      align-items: flex-start;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_middle-lg {
      align-items: center;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_bottom-lg {
      align-items: flex-end;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_around-lg {
      justify-content: space-around;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_row.spotlight_between-lg {
      justify-content: space-between;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_first-lg {
      order: -1;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_last-lg {
      order: 1;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_hidden-lg {
      display: none !important;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-1 {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-1 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-1-no-gutter {
      box-sizing: border-box;
      flex-basis: 8.3333333333%;
      max-width: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-1 {
      margin-left: 8.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-2 {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-2 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-2-no-gutter {
      box-sizing: border-box;
      flex-basis: 16.6666666667%;
      max-width: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-2 {
      margin-left: 16.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-3 {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-3 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-3-no-gutter {
      box-sizing: border-box;
      flex-basis: 25%;
      max-width: 25%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-3 {
      margin-left: 25%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-4 {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-4 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-4-no-gutter {
      box-sizing: border-box;
      flex-basis: 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-4 {
      margin-left: 33.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-5 {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-5 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-5-no-gutter {
      box-sizing: border-box;
      flex-basis: 41.6666666667%;
      max-width: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-5 {
      margin-left: 41.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-6 {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-6 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-6-no-gutter {
      box-sizing: border-box;
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-6 {
      margin-left: 50%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-7 {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-7 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-7-no-gutter {
      box-sizing: border-box;
      flex-basis: 58.3333333333%;
      max-width: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-7 {
      margin-left: 58.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-8 {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-8 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-8-no-gutter {
      box-sizing: border-box;
      flex-basis: 66.6666666667%;
      max-width: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-8 {
      margin-left: 66.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-9 {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-9 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-9-no-gutter {
      box-sizing: border-box;
      flex-basis: 75%;
      max-width: 75%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-9 {
      margin-left: 75%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-10 {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-10 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-10-no-gutter {
      box-sizing: border-box;
      flex-basis: 83.3333333333%;
      max-width: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-10 {
      margin-left: 83.3333333333%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-11 {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-11 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-11-no-gutter {
      box-sizing: border-box;
      flex-basis: 91.6666666667%;
      max-width: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-11 {
      margin-left: 91.6666666667%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-12 {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 121rem) and (min-width: 121rem) {
    .spotlight_col-xl-12 {
      padding: 1.5rem;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-12-no-gutter {
      box-sizing: border-box;
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_col-xl-offset-12 {
      margin-left: 100%;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_start-xl {
      justify-content: flex-start;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_center-xl {
      justify-content: center;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_end-xl {
      justify-content: flex-end;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_top-xl {
      align-items: flex-start;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_middle-xl {
      align-items: center;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_bottom-xl {
      align-items: flex-end;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_around-xl {
      justify-content: space-around;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_row.spotlight_between-xl {
      justify-content: space-between;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_first-xl {
      order: -1;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_last-xl {
      order: 1;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_hidden-xl {
      display: none !important;
    }
  }
  .spotlight_show {
    display: block !important;
  }
  .spotlight_row.spotlight_show {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .spotlight_hide {
    display: none !important;
  }
  .spotlight_show-xs {
    display: block !important;
  }
  .spotlight_row.spotlight_show-xs {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .spotlight_hide-xs {
    display: none !important;
  }
  @media only screen and (max-width: 40rem) {
    .spotlight_show-xs-only {
      display: block !important;
    }
    .spotlight_row.spotlight_show-xs-only {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-xs-only {
      display: none !important;
    }
  }
  @media only screen and (min-width: 41rem) {
    .spotlight_show-sm {
      display: block !important;
    }
    .spotlight_row.spotlight_show-sm {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-sm {
      display: none !important;
    }
  }
  @media only screen and (min-width: 41rem) and (max-width: 64rem) {
    .spotlight_show-sm-only {
      display: block !important;
    }
    .spotlight_row.spotlight_show-sm-only {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-sm-only {
      display: none !important;
    }
  }
  @media only screen and (min-width: 65rem) {
    .spotlight_show-md {
      display: block !important;
    }
    .spotlight_row.spotlight_show-md {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-md {
      display: none !important;
    }
  }
  @media only screen and (min-width: 65rem) and (max-width: 90rem) {
    .spotlight_show-md-only {
      display: block !important;
    }
    .spotlight_row.spotlight_show-md-only {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-md-only {
      display: none !important;
    }
  }
  @media only screen and (min-width: 91rem) {
    .spotlight_show-lg {
      display: block !important;
    }
    .spotlight_row.spotlight_show-lg {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-lg {
      display: none !important;
    }
  }
  @media only screen and (min-width: 91rem) and (max-width: 120rem) {
    .spotlight_show-lg-only {
      display: block !important;
    }
    .spotlight_row.spotlight_show-lg-only {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-lg-only {
      display: none !important;
    }
  }
  @media only screen and (min-width: 121rem) {
    .spotlight_show-xl {
      display: block !important;
    }
    .spotlight_row.spotlight_show-xl {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
    }
    .spotlight_hide-xl {
      display: none !important;
    }
  }
  .spotlight_interactive {
    /* enabled */
    /* color */
    transition: 0.3s;
    --color-background-filter: hsl(0 0% 100% / 0);
    --color-background-interactive-critical: var(--color-background-critical-interactive-tertiary-enabled);
    --color-background-interactive-primary: var(--color-background-interactive-primary-enabled);
    --color-background-interactive-quaternary: var(--color-background-interactive-quaternary-enabled);
    --color-background-interactive-quinary: var(--color-background-interactive-quinary-enabled);
    --color-background-interactive-secondary: var(--color-background-interactive-secondary-enabled);
    --color-background-interactive-tertiary: var(--color-background-interactive-tertiary-enabled);
    --color-background-interactive-attention-primary: var(--color-background-attention-interactive-primary-enabled);
    --color-background-interactive-attention-secondary: var(--color-background-attention-interactive-secondary-enabled);
    --color-background-interactive-brand-primary: var(--color-background-brand-interactive-primary-enabled);
    --color-background-interactive-brand-secondary: var(--color-background-brand-interactive-secondary-enabled);
    --color-background-interactive-brand-tertiary: var(--color-background-brand-interactive-tertiary-enabled);
    --color-background-interactive-brand-accent-primary: var(--color-background-brand-accent-interactive-primary-enabled);
    --color-background-interactive-brand-accent-secondary: var(--color-background-brand-accent-interactive-secondary-enabled);
    --color-background-interactive-critical-primary: var(--color-background-critical-interactive-primary-enabled);
    --color-background-interactive-critical-secondary: var(--color-background-critical-interactive-secondary-enabled);
    --color-background-interactive-critical-tertiary: var(--color-background-critical-interactive-tertiary-enabled);
    --color-background-interactive-info-primary: var(--color-background-info-interactive-primary-enabled);
    --color-background-interactive-info-secondary: var(--color-background-info-interactive-secondary-enabled);
    --color-background-interactive-magic-primary: var(--color-background-magic-interactive-primary-enabled);
    --color-background-interactive-magic-secondary: var(--color-background-magic-interactive-secondary-enabled);
    --color-background-interactive-neutral-primary: var(--color-background-neutral-interactive-primary-enabled);
    --color-background-interactive-neutral-secondary: var(--color-background-neutral-interactive-secondary-enabled);
    --color-background-interactive-positive-primary: var(--color-background-positive-interactive-primary-enabled);
    --color-background-interactive-positive-secondary: var(--color-background-positive-interactive-secondary-enabled);
    --color-background-interactive-selected-primary: var(--color-background-selected-interactive-primary-enabled);
    --color-background-interactive-selected-quaternary: var(--color-background-selected-interactive-quaternary-enabled);
    --color-background-interactive-selected-secondary: var(--color-background-selected-interactive-secondary-enabled);
    --color-background-interactive-selected-tertiary: var(--color-background-selected-interactive-tertiary-enabled);
    --color-border-interactive-brand: var(--color-brand-primary-700);
    --color-border-interactive-critical: var(--color-critical-900);
    --color-border-interactive-primary: var(--color-system-1200);
    --color-border-interactive-secondary: var(--color-system-600);
    --color-border-interactive-tertiary: var(--color-system-500);
    --color-border-interactive-positive-primary: var(--color-positive-600);
    --color-border-interactive-selected-primary: var(--color-brand-primary-700);
    --color-border-interactive-selected-secondary: var(--color-system-1200);
    --color-border-interactive-selected-tertiary: var(--color-brand-primary-600);
    --color-content-interactive-brand: var(--color-background-brand-interactive-primary-enabled);
    --color-content-interactive-inverse: var(--color-content-interactive-inverse-enabled);
    --color-content-interactive-primary: var(--color-content-interactive-primary-enabled);
    --color-content-interactive-secondary: var(--color-content-interactive-secondary-enabled);
    --color-content-interactive-tertiary: var(--color-content-critical-interactive-enabled);
    --color-content-interactive-positive-primary: var(--color-content-positive-interactive-primary-enabled);
    --color-content-interactive-positive-secondary: var(--color-content-positive-interactive-secondary-enabled);
    --color-content-interactive-selected-primary: var(--color-content-selected-interactive-primary-enabled);
    --color-content-interactive-selected-secondary: var(--color-content-selected-interactive-secondary-enabled);
    --color-text-interactive-critical: var(--color-text-critical-interactive-enabled);
    --color-text-interactive-inverse: var(--color-text-interactive-inverse-enabled);
    --color-text-interactive-primary: var(--color-text-interactive-primary-enabled);
    --color-text-interactive-quaternary: var(--color-text-interactive-quaternary-enabled);
    --color-text-interactive-secondary: var(--color-text-interactive-secondary-enabled);
    --color-text-interactive-tertiary: var(--color-text-interactive-tertiary-enabled);
    --color-text-interactive-neutral-primary: var(--color-text-neutral-interactive-primary-enabled);
    --color-text-interactive-neutral-secondary: var(--color-text-neutral-interactive-secondary-enabled);
    --color-text-interactive-selected-primary: var(--color-text-selected-interactive-enabled);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    /*--- DEPRECATED - use above tokens instead ----*/
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  .spotlight_interactive:hover,
  .spotlight_interactive[data-hovered] {
    /* hovered */
    /* color */
    --color-background-filter: hsl(0 0% 100% / 0);
    --color-background-interactive-critical: var(--color-background-critical-interactive-tertiary-hovered);
    --color-background-interactive-primary: var(--color-background-interactive-primary-hovered);
    --color-background-interactive-quaternary: var(--color-background-interactive-quaternary-hovered);
    --color-background-interactive-quinary: var(--color-background-interactive-quinary-hovered);
    --color-background-interactive-secondary: var(--color-background-interactive-secondary-hovered);
    --color-background-interactive-tertiary: var(--color-background-interactive-tertiary-hovered);
    --color-background-interactive-attention-primary: var(--color-background-attention-interactive-primary-hovered);
    --color-background-interactive-attention-secondary: var(--color-background-attention-interactive-secondary-hovered);
    --color-background-interactive-brand-primary: var(--color-background-brand-interactive-primary-hovered);
    --color-background-interactive-brand-secondary: var(--color-background-brand-interactive-secondary-hovered);
    --color-background-interactive-brand-tertiary: var(--color-background-brand-interactive-tertiary-hovered);
    --color-background-interactive-brand-accent-primary: var(--color-background-brand-accent-interactive-primary-hovered);
    --color-background-interactive-brand-accent-secondary: var(--color-background-brand-accent-interactive-secondary-hovered);
    --color-background-interactive-critical-primary: var(--color-background-critical-interactive-primary-hovered);
    --color-background-interactive-critical-secondary: var(--color-background-critical-interactive-secondary-hovered);
    --color-background-interactive-critical-tertiary: var(--color-background-critical-interactive-tertiary-hovered);
    --color-background-interactive-info-primary: var(--color-background-info-interactive-primary-hovered);
    --color-background-interactive-info-secondary: var(--color-background-info-interactive-secondary-hovered);
    --color-background-interactive-magic-primary: var(--color-background-magic-interactive-primary-hovered);
    --color-background-interactive-magic-secondary: var(--color-background-magic-interactive-secondary-hovered);
    --color-background-interactive-neutral-primary: var(--color-background-neutral-interactive-primary-hovered);
    --color-background-interactive-neutral-secondary: var(--color-background-neutral-interactive-secondary-hovered);
    --color-background-interactive-positive-primary: var(--color-background-positive-interactive-primary-hovered);
    --color-background-interactive-positive-secondary: var(--color-background-positive-interactive-secondary-hovered);
    --color-background-interactive-selected-primary: var(--color-background-selected-interactive-primary-hovered);
    --color-background-interactive-selected-quaternary: var(--color-background-selected-interactive-tertiary-hovered);
    --color-background-interactive-selected-secondary: var(--color-background-selected-interactive-secondary-hovered);
    --color-background-interactive-selected-tertiary: var(--color-background-selected-interactive-tertiary-hovered);
    --color-border-interactive-brand: var(--color-brand-primary-800);
    --color-border-interactive-critical: var(--color-critical-1000);
    --color-border-interactive-primary: var(--color-system-1100);
    --color-border-interactive-secondary: var(--color-system-700);
    --color-border-interactive-tertiary: var(--color-system-600);
    --color-border-interactive-positive-primary: var(--color-positive-500);
    --color-border-interactive-selected-primary: var(--color-brand-primary-800);
    --color-border-interactive-selected-secondary: var(--color-system-1100);
    --color-border-interactive-selected-tertiary: var(--color-brand-primary-700);
    --color-content-interactive-brand: var(--color-background-brand-interactive-primary-hovered);
    --color-content-interactive-inverse: var(--color-content-interactive-inverse-hovered);
    --color-content-interactive-primary: var(--color-content-interactive-primary-hovered);
    --color-content-interactive-secondary: var(--color-content-interactive-secondary-hovered);
    --color-content-interactive-tertiary: var(--color-content-critical-interactive-hovered);
    --color-content-interactive-positive-primary: var(--color-content-positive-interactive-primary-hovered);
    --color-content-interactive-positive-secondary: var(--color-content-positive-interactive-secondary-hovered);
    --color-content-interactive-selected-primary: var(--color-content-selected-interactive-primary-hovered);
    --color-content-interactive-selected-secondary: var(--color-content-selected-interactive-secondary-hovered);
    --color-text-interactive-critical: var(--color-text-critical-interactive-hovered);
    --color-text-interactive-inverse: var(--color-text-interactive-inverse-hovered);
    --color-text-interactive-primary: var(--color-content-interactive-primary-hovered);
    --color-text-interactive-quaternary: var(--color-text-interactive-quaternary-hovered);
    --color-text-interactive-secondary: var(--color-text-interactive-secondary-hovered);
    --color-text-interactive-tertiary: var(--color-text-interactive-tertiary-hovered);
    --color-text-interactive-neutral-primary: var(--color-text-neutral-interactive-primary-hovered);
    --color-text-interactive-neutral-secondary: var(--color-text-neutral-interactive-secondary-hovered);
    --color-text-interactive-selected-primary: var(--color-text-selected-interactive-hovered);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    /*--- DEPRECATED - use above tokens instead ----*/
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  .spotlight_interactive:active,
  .spotlight_interactive[data-pressed],
  .spotlight_interactive-pressed {
    /* pressed */
    /* color */
    filter: brightness(0.94) saturate(1.3);
    background-blend-mode: multiply;
    --color-background-filter: hsl(0 0% 0%/ 0.06);
    --color-background-interactive-critical: var(--color-background-critical-interactive-tertiary-perssed);
    --color-background-interactive-primary: var(--color-background-interactive-primary-pressed);
    --color-background-interactive-quaternary: var(--color-background-interactive-quaternary-pressed);
    --color-background-interactive-quinary: var(--color-background-interactive-quinary-pressed);
    --color-background-interactive-secondary: var(--color-background-interactive-secondary-pressed);
    --color-background-interactive-tertiary: var(--color-background-interactive-tertiary-pressed);
    --color-background-interactive-attention-primary: var(--color-background-attention-interactive-primary-pressed);
    --color-background-interactive-attention-secondary: var(--color-background-attention-interactive-secondary-pressed);
    --color-background-interactive-brand-primary: var(--color-background-brand-interactive-primary-pressed);
    --color-background-interactive-brand-secondary: var(--color-background-brand-interactive-secondary-pressed);
    --color-background-interactive-brand-tertiary: var(--color-background-brand-interactive-tertiary-pressed);
    --color-background-interactive-brand-accent-primary: var(--color-background-brand-accent-interactive-primary-pressed);
    --color-background-interactive-brand-accent-secondary: var(--color-background-brand-accent-interactive-secondary-pressed);
    --color-background-interactive-critical-primary: var(--color-background-critical-interactive-primary-pressed);
    --color-background-interactive-critical-secondary: var(--color-background-critical-interactive-secondary-pressed);
    --color-background-interactive-critical-tertiary: var(--color-background-critical-interactive-tertiary-perssed);
    --color-background-interactive-info-primary: var(--color-background-info-interactive-primary-pressed);
    --color-background-interactive-info-secondary: var(--color-background-info-interactive-secondary-pressed);
    --color-background-interactive-magic-primary: var(--color-background-magic-interactive-primary-pressed);
    --color-background-interactive-magic-secondary: var(--color-background-magic-interactive-secondary-pressed);
    --color-background-interactive-neutral-primary: var(--color-background-neutral-interactive-primary-pressed);
    --color-background-interactive-neutral-secondary: var(--color-background-neutral-interactive-secondary-pressed);
    --color-background-interactive-positive-primary: var(--color-background-positive-interactive-primary-pressed);
    --color-background-interactive-positive-secondary: var(--color-background-positive-interactive-secondary-pressed);
    --color-background-interactive-selected-primary: var(--color-background-selected-interactive-primary-pressed);
    --color-background-interactive-selected-quaternary: var(--color-background-selected-interactive-quaternary-pressed);
    --color-background-interactive-selected-secondary: var(--color-background-selected-interactive-secondary-pressed);
    --color-background-interactive-selected-tertiary: var(--color-background-selected-interactive-tertiary-pressed);
    --color-border-interactive-brand: var(--color-brand-primary-800);
    --color-border-interactive-critical: var(--color-critical-1000);
    --color-border-interactive-primary: var(--color-system-1100);
    --color-border-interactive-secondary: var(--color-system-700);
    --color-border-interactive-tertiary: var(--color-system-600);
    --color-border-interactive-positive-primary: var(--color-positive-500);
    --color-border-interactive-selected-primary: var(--color-brand-primary-800);
    --color-border-interactive-selected-secondary: var(--color-system-1100);
    --color-border-interactive-selected-tertiary: var(--color-brand-primary-700);
    --color-content-interactive-brand: var(--color-background-brand-interactive-primary-pressed);
    --color-content-interactive-inverse: var(--color-content-interactive-inverse-pressed);
    --color-content-interactive-primary: var(--color-content-interactive-primary-pressed);
    --color-content-interactive-secondary: var(--color-content-interactive-secondary-pressed);
    --color-content-interactive-tertiary: var(--color-content-critical-interactive-pressed);
    --color-content-interactive-positive-primary: var(--color-content-positive-interactive-primary-pressed);
    --color-content-interactive-positive-secondary: var(--color-content-positive-interactive-secondary-pressed);
    --color-content-interactive-selected-primary: var(--color-content-selected-interactive-primary-pressed);
    --color-content-interactive-selected-secondary: var(--color-content-selected-interactive-secondary-pressed);
    --color-text-interactive-critical: var(--color-text-critical-interactive-pressed);
    --color-text-interactive-inverse: var(--color-text-interactive-inverse-pressed);
    --color-text-interactive-primary: var(--color-text-interactive-primary-pressed);
    --color-text-interactive-quaternary: var(--color-text-interactive-quaternary-pressed);
    --color-text-interactive-secondary: var(--color-text-interactive-secondary-pressed);
    --color-text-interactive-tertiary: var(--color-text-interactive-tertiary-pressed);
    --color-text-interactive-neutral-primary: var(--color-text-neutral-interactive-primary-pressed);
    --color-text-interactive-neutral-secondary: var(--color-text-neutral-interactive-secondary-pressed);
    --color-text-interactive-selected-primary: var(--color-text-selected-interactive-pressed);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    /*--- DEPRECATED - use above tokens instead ----*/
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  .spotlight_interactive[data-disabled],
  .spotlight_interactive:disabled,
  .spotlight_interactive-disabled,
  .Mui-disabled {
    --color-background-filter: hsl(0 0% 100% / 0);
    --color-background-interactive-critical: hsl(0 0% 0%/ 0);
    --color-background-interactive-primary: var(--color-background-disabled);
    --color-background-interactive-quaternary: var(--color-background-disabled);
    --color-background-interactive-quinary: var(--color-background-disabled);
    --color-background-interactive-secondary: hsl(0 0% 100% / 0);
    --color-background-interactive-tertiary: var(--color-background-disabled);
    --color-background-interactive-attention-primary: var(--color-background-disabled);
    --color-background-interactive-attention-secondary: var(--color-background-disabled);
    --color-background-interactive-brand-primary: var(--color-background-disabled);
    --color-background-interactive-brand-secondary: var(--color-background-disabled);
    --color-background-interactive-brand-tertiary: hsl(206 100% 47% / 0);
    --color-background-interactive-brand-accent-primary: var(--color-background-disabled);
    --color-background-interactive-brand-accent-secondary: var(--color-background-disabled);
    --color-background-interactive-critical-primary: var(--color-background-disabled);
    --color-background-interactive-critical-secondary: var(--color-background-disabled);
    --color-background-interactive-critical-tertiary: hsl(220 28% 93% / 0);
    --color-background-interactive-info-primary: var(--color-background-disabled);
    --color-background-interactive-info-secondary: var(--color-background-disabled);
    --color-background-interactive-magic-primary: var(--color-background-disabled);
    --color-background-interactive-magic-secondary: var(--color-background-disabled);
    --color-background-interactive-neutral-primary: var(--color-background-disabled);
    --color-background-interactive-neutral-secondary: var(--color-background-disabled);
    --color-background-interactive-positive-primary: var(--color-background-disabled);
    --color-background-interactive-positive-secondary: var(--color-background-disabled);
    --color-background-interactive-selected-primary: var(--color-background-disabled);
    --color-background-interactive-selected-quaternary: var(--color-background-disabled);
    --color-background-interactive-selected-secondary: var(--color-background-disabled);
    --color-background-interactive-selected-tertiary: var(--color-content-disabled);
    --color-border-interactive-brand: var(--color-light-border-disabled);
    --color-border-interactive-critical: var(--color-light-border-disabled);
    --color-border-interactive-primary: var(--color-light-border-disabled);
    --color-border-interactive-secondary: var(--color-light-border-disabled);
    --color-border-interactive-tertiary: var(--color-light-border-disabled);
    --color-border-interactive-positive-primary: var(--color-light-border-disabled);
    --color-border-interactive-selected-primary: var(--color-light-border-disabled);
    --color-border-interactive-selected-secondary: var(--color-light-border-disabled);
    --color-border-interactive-selected-tertiary: var(--color-light-border-disabled);
    --color-content-interactive-brand: var(--color-content-disabled);
    --color-content-interactive-inverse: var(--color-content-disabled);
    --color-content-interactive-primary: var(--color-content-disabled);
    --color-content-interactive-secondary: var(--color-content-disabled);
    --color-content-interactive-tertiary: var(--color-content-disabled);
    --color-content-interactive-positive-primary: var(--color-content-disabled);
    --color-content-interactive-positive-secondary: var(--color-background-disabled);
    --color-content-interactive-selected-primary: var(--color-light-background-disabled);
    --color-content-interactive-selected-secondary: var(--color-background-disabled);
    --color-text-interactive-critical: var(--color-text-disabled);
    --color-text-interactive-inverse: var(--color-text-disabled);
    --color-text-interactive-primary: var(--color-text-disabled);
    --color-text-interactive-quaternary: var(--color-text-disabled);
    --color-text-interactive-secondary: var(--color-text-disabled);
    --color-text-interactive-tertiary: var(--color-text-disabled);
    --color-text-interactive-neutral-primary: var(--color-text-disabled);
    --color-text-interactive-neutral-secondary: var(--color-text-disabled);
    --color-text-interactive-selected-primary: var(--color-text-disabled);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    /*--- DEPRECATED - use above tokens instead ----*/
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  .spotlight_interactive:focus,
  .spotlight_interactive:focus-within,
  .spotlight_interactive[data-focused] {
    outline: 0;
    outline-offset: 0;
    --color-background-filter: hsl(0 0% 0%/ 0.06);
    --color-background-interactive-critical: var(--color-background-critical-interactive-tertiary-focused);
    --color-background-interactive-primary: var(--color-background-interactive-primary-focused);
    --color-background-interactive-quaternary: var(--color-background-interactive-quaternary-focused);
    --color-background-interactive-quinary: var(--color-background-interactive-quinary-focused);
    --color-background-interactive-secondary: var(--color-background-interactive-secondary-focused);
    --color-background-interactive-tertiary: var(--color-background-interactive-tertiary-focused);
    --color-background-interactive-attention-primary: var(--color-background-attention-interactive-primary-focused);
    --color-background-interactive-attention-secondary: var(--color-background-attention-interactive-secondary-focused);
    --color-background-interactive-brand-primary: var(--color-background-brand-interactive-primary-focused);
    --color-background-interactive-brand-secondary: var(--color-background-brand-interactive-secondary-focused);
    --color-background-interactive-brand-tertiary: var(--color-background-brand-interactive-tertiary-focused);
    --color-background-interactive-brand-accent-primary: var(--color-background-brand-accent-interactive-primary-focused);
    --color-background-interactive-brand-accent-secondary: var(--color-background-brand-accent-interactive-secondary-focused);
    --color-background-interactive-critical-primary: var(--color-background-critical-interactive-primary-focused);
    --color-background-interactive-critical-secondary: var(--color-background-critical-interactive-secondary-focused);
    --color-background-interactive-critical-tertiary: var(--color-background-critical-interactive-tertiary-focused);
    --color-background-interactive-info-primary: var(--color-background-info-interactive-primary-focused);
    --color-background-interactive-info-secondary: var(--color-background-info-interactive-secondary-focused);
    --color-background-interactive-magic-primary: var(--color-background-magic-interactive-primary-focused);
    --color-background-interactive-magic-secondary: var(--color-background-magic-interactive-secondary-focused);
    --color-background-interactive-neutral-primary: var(--color-background-neutral-interactive-primary-focused);
    --color-background-interactive-neutral-secondary: var(--color-background-neutral-interactive-secondary-focused);
    --color-background-interactive-positive-primary: var(--color-background-positive-interactive-primary-focused);
    --color-background-interactive-positive-secondary: var(--color-background-positive-interactive-secondary-focused);
    --color-background-interactive-selected-primary: var(--color-background-selected-interactive-primary-focused);
    --color-background-interactive-selected-quaternary: var(--color-background-selected-interactive-quaternary-focused);
    --color-background-interactive-selected-secondary: var(--color-background-selected-interactive-secondary-focused);
    --color-background-interactive-selected-tertiary: var(--color-background-selected-interactive-tertiary-focused);
    --color-border-interactive-brand: var(--color-brand-primary-800);
    --color-border-interactive-critical: var(--color-critical-1000);
    --color-border-interactive-primary: var(--color-system-1100);
    --color-border-interactive-secondary: var(--color-system-700);
    --color-border-interactive-tertiary: var(--color-system-600);
    --color-border-interactive-positive-primary: var(--color-positive-500);
    --color-border-interactive-selected-primary: var(--color-brand-primary-800);
    --color-border-interactive-selected-secondary: var(--color-system-1100);
    --color-border-interactive-selected-tertiary: var(--color-brand-primary-700);
    --color-content-interactive-brand: var(--color-background-brand-interactive-primary-focused);
    --color-content-interactive-inverse: var(--color-content-interactive-inverse-focused);
    --color-content-interactive-primary: var(--color-content-interactive-primary-focused);
    --color-content-interactive-secondary: var(--color-content-interactive-secondary-focused);
    --color-content-interactive-tertiary: var(--color-content-critical-interactive-focused);
    --color-content-interactive-positive-primary: var(--color-content-positive-interactive-primary-focused);
    --color-content-interactive-positive-secondary: var(--color-content-positive-interactive-secondary-focused);
    --color-content-interactive-selected-primary: var(--color-content-selected-interactive-primary-focused);
    --color-content-interactive-selected-secondary: var(--color-content-selected-interactive-secondary-focused);
    --color-text-interactive-critical: var(--color-text-critical-interactive-focused);
    --color-text-interactive-inverse: var(--color-text-interactive-inverse-focused);
    --color-text-interactive-primary: var(--color-text-interactive-primary-focused);
    --color-text-interactive-quaternary: var(--color-text-interactive-quaternary-focused);
    --color-text-interactive-secondary: var(--color-text-interactive-secondary-focused);
    --color-text-interactive-tertiary: var(--color-text-interactive-tertiary-focused);
    --color-text-interactive-neutral-primary: var(--color-text-neutral-interactive-primary-focused);
    --color-text-interactive-neutral-secondary: var(--color-text-neutral-interactive-secondary-focused);
    --color-text-interactive-selected-primary: var(--color-text-selected-interactive-focused);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-attention-interactive-primary: var(--color-background-interactive--attention-primary);
    --color-background-attention-interactive--secondary: var(--color-background-interactive--attention-secondary);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-brand-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-background-brand-interactive-tertiary: var(--color-background-interactive-brand-tertiary);
    --color-background-brand-accent-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-brand-accent-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-background-critical-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-critical-interactive-secondary: var(--color-background-interactive-critical-secondary);
    /*--- DEPRECATED - use above tokens instead ----*/
    --color-background-critical-interactive-tertiary: var(--color-background-interactive-critical-tertiary);
    --color-background-info-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-info-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-background-magic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-magic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-background-neutral-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-neutral-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-background-positive-interactive-primary: var(--color-background-interactive-positive-primary);
    --color-background-positive-interactive-secondary: var(--color-background-interactive-positive-secondary);
    --color-background-selected-interactive-primary: var(--color-background-interactive-selected-primary);
    --color-background-selected-interactive-quaternary: var(--color-background-interactive-selected-quaternary);
    --color-background-selected-interactive-secondary: var(--color-background-interactive-selected-secondary);
    --color-background-selected-interactive-tertiary: var(--color-background-interactive-selected-tertiary);
    --color-border-positive-interactive-primary: var(--color-positive-600);
    --color-border-selected-interactive-primary: var(--color-brand-primary-700);
    --color-border-selected-interactive-secondary: var(--color-system-1200);
    --color-border-selected-interactive-tertiary: var(--color-brand-primary-600);
    --color-background-brand-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-content-critical-interactive: var(--color-content-interactive-tertiary);
    --color-content-positive-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-content-positive-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-content-selected-interactive-primary: var(--color-content-interactive-selected-primary);
    --color-content-selected-interactive-secondary: var(--color-content-interactive-selected-secondary);
    --color-text-critical-interactive: var(--color-text-interactive-critical);
    --color-text-neutral-interactive-primary: var(--color-text-interactive-neutral-primary);
    --color-text-neutral-interactive-secondary: var(--color-text-interactive-neutral-secondary);
    --color-text-selected-interactive-primary: var(--color-text-interactive-selected-primary);
  }
  .spotlight_interactive:focus-visible {
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
    outline: var(--focus-outline-width) solid var(--color-border-focus);
    outline-offset: var(--focus-outline-offset);
  }
  /* spotlight_theme */
  .spotlight_theme-light {
    --color-background-disabled: var(--color-light-background-disabled);
    --color-background-page: var(--color-system-050);
    --color-background-primary: var(--color-system-00);
    --color-background-quaternary: var(--color-system-900);
    --color-background-secondary: var(--color-system-100);
    --color-background-tertiary: var(--color-system-200);
    --color-background-attention-primary: var(--color-attention-900);
    --color-background-attention-secondary: var(--color-attention-100);
    --color-background-attention-interactive-primary-enabled: var(--color-attention-900);
    --color-background-attention-interactive-primary-focused: var(--color-attention-1000);
    --color-background-attention-interactive-primary-hovered: var(--color-attention-1000);
    --color-background-attention-interactive-primary-pressed: var(--color-attention-1000);
    --color-background-attention-interactive-secondary-enabled: var(--color-attention-200);
    --color-background-attention-interactive-secondary-focused: var(--color-attention-300);
    --color-background-attention-interactive-secondary-hovered: var(--color-attention-300);
    --color-background-attention-interactive-secondary-pressed: var(--color-attention-300);
    --color-background-brand-primary: var(--color-brand-primary-900);
    --color-background-brand-quaternary: var(--color-brand-primary-200);
    --color-background-brand-secondary: var(--color-brand-primary-100);
    --color-background-brand-tertiary: var(--color-brand-primary-300);
    --color-background-brand-accent-primary: var(--color-brand-secondary-900);
    --color-background-brand-accent-quaternary: var(---co-brand-secondary-700);
    --color-background-brand-accent-quinary: var(---co-brand-secondary-1000);
    --color-background-brand-accent-secondary: var(--color-brand-secondary-200);
    --color-background-brand-accent-tertiary: var(---co-brand-secondary-500);
    --color-background-brand-accent-interactive-primary-enabled: var(--color-brand-secondary-900);
    --color-background-brand-accent-interactive-primary-focused: var(--color-brand-secondary-1000);
    --color-background-brand-accent-interactive-primary-hovered: var(--color-brand-secondary-1000);
    --color-background-brand-accent-interactive-primary-pressed: var(--color-brand-secondary-1000);
    --color-background-brand-accent-interactive-secondary-enabled: var(--color-brand-secondary-200);
    --color-background-brand-accent-interactive-secondary-focused: var(--color-brand-secondary-300);
    --color-background-brand-accent-interactive-secondary-hovered: var(--color-brand-secondary-300);
    --color-background-brand-accent-interactive-secondary-pressed: var(--color-brand-secondary-300);
    --color-background-brand-interactive-primary-enabled: var(--color-brand-primary-900);
    --color-background-brand-interactive-primary-focused: var(--color-brand-primary-1000);
    --color-background-brand-interactive-primary-hovered: var(--color-brand-primary-1000);
    --color-background-brand-interactive-primary-pressed: var(--color-brand-primary-1000);
    --color-background-brand-interactive-secondary-enabled: var(--color-brand-primary-200);
    --color-background-brand-interactive-secondary-focused: var(--color-brand-primary-300);
    --color-background-brand-interactive-secondary-hovered: var(--color-brand-primary-300);
    --color-background-brand-interactive-secondary-pressed: var(--color-brand-primary-300);
    --color-background-brand-interactive-tertiary-enabled: hsl(0 0% 100% / 0);
    --color-background-brand-interactive-tertiary-focused: var(--color-brand-primary-200);
    --color-background-brand-interactive-tertiary-hovered: var(--color-brand-primary-200);
    --color-background-brand-interactive-tertiary-pressed: var(--color-brand-primary-200);
    --color-background-critical-primary: var(--color-critical-900);
    --color-background-critical-secondary: var(--color-critical-100);
    --color-background-critical-interactive-primary-enabled: var(--color-critical-900);
    --color-background-critical-interactive-primary-focused: var(--color-critical-1000);
    --color-background-critical-interactive-primary-hovered: var(--color-critical-1000);
    --color-background-critical-interactive-primary-pressed: var(--color-critical-1000);
    --color-background-critical-interactive-secondary-enabled: var(--color-critical-200);
    --color-beackground-critical-interactive-secondary-focused: var(--color-critical-300);
    --color-background-critical-interactive-secondary-hovered: var(--color-critical-300);
    --color-background-critical-interactive-secondary-pressed: var(--color-critical-300);
    --color-background-critical-interactive-tertiary-enabled: hsl(0 100% 95% / 0);
    --color-background-critical-interactive-tertiary-focused: var(--color-critical-200);
    --color-background-critical-interactive-tertiary-hovered: var(--color-critical-200);
    --color-background-critical-interactive-tertiary-perssed: var(--color-critical-200);
    --color-background-info-primary: var(--color-info-900);
    --color-background-info-secondary: var(--color-info-100);
    --color-background-info-interactive-primary-enabled: var(--color-info-900);
    --color-background-info-interactive-primary-focused: var(--color-info-1000);
    --color-background-info-interactive-primary-hovered: var(--color-info-1000);
    --color-background-info-interactive-primary-pressed: var(--color-info-1000);
    --color-background-info-interactive-secondary-enabled: var(--color-info-200);
    --color-background-info-interactive-secondary-focused: var(--color-info-300);
    --color-background-info-interactive-secondary-hovered: var(--color-info-300);
    --color-background-info-interactive-secondary-pressed: var(--color-info-300);
    --color-background-interactive-filter-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-focused: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-hovered: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-pressed: hsl(0 0% 0%/ 0.06);
    --color-background-interactive-primary-enabled: var(--color-brand-secondary-900);
    --color-background-interactive-primary-focused: var(--color-brand-secondary-1000);
    --color-background-interactive-primary-hovered: var(--color-brand-secondary-1000);
    --color-background-interactive-primary-pressed: var(--color-brand-secondary-1000);
    --color-background-interactive-quaternary-enabled: var(--color-system-900);
    --color-background-interactive-quaternary-focused: var(--color-system-900);
    --color-background-interactive-quaternary-hovered: var(--color-system-900);
    --color-background-interactive-quaternary-pressed: var(--color-system-900);
    --color-background-interactive-quinary-enabled: var(--color-system-100);
    --color-background-interactive-quinary-focused: var(--color-system-200);
    --color-background-interactive-quinary-hovered: var(--color-system-200);
    --color-background-interactive-quinary-pressed: var(--color-system-200);
    --color-background-interactive-secondary-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-secondary-focused: var(--color-system-200);
    --color-background-interactive-secondary-hovered: var(--color-system-200);
    --color-background-interactive-secondary-pressed: var(--color-system-200);
    --color-background-interactive-tertiary-enabled: var(--color-system-00);
    --color-background-interactive-tertiary-focused: var(--color-system-100);
    --color-background-interactive-tertiary-hovered: var(--color-system-100);
    --color-background-interactive-tertiary-pressed: var(--color-system-100);
    --color-background-magic-primary: var(--color-extended-secondary-900);
    --color-background-magic-secondary: var(--color-extended-secondary-100);
    --color-background-magic-interactive-primary-enabled: var(--color-extended-secondary-900);
    --color-background-magic-interactive-primary-focused: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-primary-hovered: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-primary-pressed: var(--color-extended-secondary-1000);
    --color-background-magic-interactive-secondary-enabled: var(--color-extended-secondary-200);
    --color-background-magic-interactive-secondary-focused: var(--color-extended-secondary-300);
    --color-background-magic-interactive-secondary-hovered: var(--color-extended-secondary-300);
    --color-background-magic-interactive-secondary-pressed: var(--color-extended-secondary-300);
    --color-background-neutral-primary: var(--color-neutral-900);
    --color-background-neutral-secondary: var(--color-neutral-100);
    --color-background-neutral-interactive-primary-enabled: var(--color-neutral-900);
    --color-background-neutral-interactive-primary-focused: var(--color-neutral-1000);
    --color-background-neutral-interactive-primary-hovered: var(--color-neutral-1000);
    --color-background-neutral-interactive-primary-pressed: var(--color-neutral-1000);
    --color-background-neutral-interactive-secondary-enabled: var(--color-neutral-200);
    --color-background-neutral-interactive-secondary-focused: var(--color-neutral-300);
    --color-background-neutral-interactive-secondary-hovered: var(--color-neutral-300);
    --color-background-neutral-interactive-secondary-pressed: var(--color-neutral-300);
    --color-background-positive-primary: var(--color-positive-900);
    --color-background-positive-secondary: var(--color-positive-100);
    --color-background-positive-interactive-primary-enabled: var(--color-positive-900);
    --color-background-positive-interactive-primary-focused: var(--color-positive-1000);
    --color-background-positive-interactive-primary-hovered: var(--color-positive-1000);
    --color-background-positive-interactive-primary-pressed: var(--color-positive-1000);
    --color-background-positive-interactive-secondary-enabled: var(--color-positive-200);
    --color-background-positive-interactive-secondary-focused: var(--color-positive-300);
    --color-background-positive-interactive-secondary-hovered: var(--color-positive-300);
    --color-background-positive-interactive-secondary-pressed: var(--color-positive-300);
    --color-background-selected-interactive-primary-enabled: var(--color-brand-primary-100);
    --color-background-selected-interactive-primary-focused: var(--color-brand-primary-200);
    --color-background-selected-interactive-primary-hovered: var(--color-brand-primary-200);
    --color-background-selected-interactive-primary-pressed: var(--color-brand-primary-200);
    --color-background-selected-interactive-quaternary-enabled: var(--color-system-900);
    --color-background-selected-interactive-quaternary-focused: var(--color-system-1000);
    --color-background-selected-interactive-quaternary-hovered: var(--color-system-1000);
    --color-background-selected-interactive-quaternary-pressed: var(--color-system-1000);
    --color-background-selected-interactive-secondary-enabled: var(--color-system-300);
    --color-background-selected-interactive-secondary-focused: var(--color-system-400);
    --color-background-selected-interactive-secondary-hovered: var(--color-system-400);
    --color-background-selected-interactive-secondary-pressed: var(--color-system-400);
    --color-background-selected-interactive-tertiary-enabled: var(--color-system-900);
    --color-background-selected-interactive-tertiary-focused: var(--color-system-1000);
    --color-background-selected-interactive-tertiary-hovered: var(--color-system-1000);
    --color-background-selected-interactive-tertiary-pressed: var(--color-system-1000);
    --color-border-disabled: var(--color-light-border-disabled);
    --color-border-focus: var(---co-brand-primary-800);
    --color-border-inverse: var(--color-system-00);
    --color-border-primary: var(--color-system-300);
    --color-border-attention-primary: var(--color-attention-800);
    --color-border-attention-secondary: var(--color-attention-600);
    --color-border-brand-primary: var(--color-brand-primary-800);
    --color-border-brand-secondary: var(--color-brand-primary-600);
    --color-border-brand-tertiary: var(--color-brand-primary-900);
    --color-border-brand-accent-primary: var(--color-brand-secondary-800);
    --color-border-brand-accent-secondary: var(--color-brand-secondary-600);
    --color-border-brand-accent-tertiary: var(--color-brand-secondary-900);
    --color-border-brand-interactive-enabled: var(--color-brand-primary-700);
    --color-border-brand-interactive-focused: var(--color-brand-primary-800);
    --color-border-brand-interactive-hovered: var(--color-brand-primary-800);
    --color-border-brand-interactive-pressed: var(--color-brand-primary-800);
    --color-border-critical-primary: var(--color-critical-800);
    --color-border-critical-secondary: var(--color-critical-600);
    --color-border-critical-interactive-enabled: var(--color-critical-900);
    --color-border-critical-interactive-focused: var(--color-critical-1000);
    --color-border-critical-interactive-hovered: var(--color-critical-1000);
    --color-border-critical-interactive-pressed: var(--color-critical-1000);
    --color-border-info-primary: var(--color-info-800);
    --color-border-info-secondary: var(--color-info-600);
    --color-border-interactive-primary-enabled: var(--color-system-1200);
    --color-border-interactive-primary-focused: var(--color-system-1100);
    --color-border-interactive-primary-hovered: var(--color-system-1100);
    --color-border-interactive-primary-pressed: var(--color-system-1100);
    --color-border-interactive-secondary-enabled: var(--color-system-600);
    --color-border-interactive-secondary-focused: var(--color-system-700);
    --color-border-interactive-secondary-hovered: var(--color-system-700);
    --color-border-interactive-secondary-pressed: var(--color-system-700);
    --color-border-interactive-tertiary-enabled: var(--color-system-500);
    --color-border-interactive-tertiary-focused: var(--color-system-600);
    --color-border-interactive-tertiary-hovered: var(--color-system-600);
    --color-border-interactive-tertiary-pressed: var(--color-system-600);
    --color-border-magic-primary: var(--color-extended-secondary-800);
    --color-border-magic-secondary: var(--color-extended-secondary-600);
    --color-border-neutral-primary: var(--color-neutral-800);
    --color-border-neutral-secondary: var(--color-neutral-600);
    --color-border-positive-primary: var(--color-positive-800);
    --color-border-positive-secondary: var(--color-positive-600);
    --color-border-positive-interactive-primary: var(--color-light-border-interactive-positive-primary);
    --color-border-selected-interactive-primary-enabled: var(--color-brand-primary-700);
    --color-border-selected-interactive-primary-focused: var(--color-brand-primary-800);
    --color-border-selected-interactive-primary-hovered: var(--color-brand-primary-800);
    --color-border-selected-interactive-primary-pressed: var(--color-brand-primary-800);
    --color-border-selected-interactive-secondary-enabled: var(--color-system-1200);
    --color-border-selected-interactive-secondary-focused: var(--color-system-1100);
    --color-border-selected-interactive-secondary-hovered: var(--color-system-1100);
    --color-border-selected-interactive-secondary-pressed: var(--color-system-1100);
    --color-border-selected-interactive-tertiary-enabled: var(--color-brand-primary-600);
    --color-border-selected-interactive-tertiary-focused: var(--color-brand-primary-700);
    --color-border-selected-interactive-tertiary-hovered: var(--color-brand-primary-700);
    --color-border-selected-interactive-tertiary-pressed: var(--color-brand-primary-700);
    --color-content-disabled: var(--color-light-content-disabled);
    --color-content-inverse: var(--color-system-00);
    --color-content-primary: var(--color-system-1200);
    --color-content-secondary: var(--color-system-1100);
    --color-content-attention-primary: var(--color-attention-1100);
    --color-content-attention-secondary: var(--color-content-inverse);
    --color-content-attention-tertiary: var(--color-attention-900);
    --color-content-brand-primary: var(--color-brand-primary-1100);
    --color-content-brand-secondary: var(--color-text-inverse);
    --color-content-brand-tertiary: var(--color-brand-primary-900);
    --color-content-brand-accent-primary: var(--color-brand-secondary-1100);
    --color-content-brand-accent-secondary: var(--color-content-inverse);
    --color-content-brand-accent-tertiary: var(--color-brand-secondary-900);
    --color-content-brand-interactive-enabled: var(---co-brand-primary-1000);
    --color-content-brand-interactive-focused: var(---co-brand-primary-900);
    --color-content-brand-interactive-hovered: var(---co-brand-primary-900);
    --color-content-brand-interactive-pressed: var(---co-brand-primary-900);
    --color-content-critical-primary: var(--color-critical-1100);
    --color-content-critical-secondary: var(--color-content-inverse);
    --color-content-critical-tertiary: var(--color-critical-900);
    --color-content-critical-interactive-enabled: var(--color-critical-1000);
    --color-content-critical-interactive-focused: var(--color-critical-1000);
    --color-content-critical-interactive-hovered: var(--color-critical-1000);
    --color-content-critical-interactive-pressed: var(--color-critical-1000);
    --color-content-info-primary: var(--color-info-1100);
    --color-content-info-secondary: var(--color-content-inverse);
    --color-content-info-tertiary: var(--color-info-900);
    --color-content-interactive-inverse-enabled: var(--color-system-00);
    --color-content-interactive-inverse-focused: var(--color-system-00);
    --color-content-interactive-inverse-hovered: var(--color-system-00);
    --color-content-interactive-inverse-pressed: var(--color-system-00);
    --color-content-interactive-primary-enabled: var(--color-system-1200);
    --color-content-interactive-primary-focused: var(--color-system-1200);
    --color-content-interactive-primary-hovered: var(--color-system-1200);
    --color-content-interactive-primary-pressed: var(--color-system-1200);
    --color-content-interactive-secondary-enabled: var(--color-system-1100);
    --color-content-interactive-secondary-focused: var(--color-system-1100);
    --color-content-interactive-secondary-hovered: var(--color-system-1100);
    --color-content-interactive-secondary-pressed: var(--color-system-1100);
    --color-content-magic-primary: var(--color-extended-secondary-1100);
    --color-content-magic-secondary: var(--color-content-inverse);
    --color-content-magic-tertiary: var(--color-extended-secondary-900);
    --color-content-neutral-primary: var(--color-neutral-1100);
    --color-content-neutral-secondary: var(--color-content-inverse);
    --color-content-neutral-tertiary: var(--color-neutral-900);
    --color-content-positive-primary: var(--color-positive-1100);
    --color-content-positive-secondary: var(--color-content-inverse);
    --color-content-positive-tertiary: var(--color-positive-900);
    --color-content-positive-interactive-primary-enabled: var(--color-positive-1100);
    --color-content-positive-interactive-primary-focused: var(--color-positive-1000);
    --color-content-positive-interactive-primary-hovered: var(--color-positive-1000);
    --color-content-positive-interactive-primary-pressed: var(--color-positive-1000);
    --color-content-positive-interactive-secondary-enabled: var(--color-positive-100);
    --color-content-positive-interactive-secondary-focused: var(--color-positive-200);
    --color-content-positive-interactive-secondary-hovered: var(--color-positive-200);
    --color-content-positive-interactive-secondary-pressed: var(--color-positive-200);
    --color-content-selected-interactive-primary-enabled: var(--color-system-00);
    --color-content-selected-interactive-primary-focused: var(--color-system-100);
    --color-content-selected-interactive-primary-hovered: var(--color-system-100);
    --color-content-selected-interactive-primary-pressed: var(--color-system-100);
    --color-content-selected-interactive-secondary-enabled: var(--color-brand-primary-1000);
    --color-content-selected-interactive-secondary-focused: var(--color-brand-primary-900);
    --color-content-selected-interactive-secondary-hovered: var(--color-brand-primary-900);
    --color-content-selected-interactive-secondary-pressed: var(--color-brand-primary-900);
    --color-text-disabled: var(--color-light-text-disabled);
    --color-text-inverse: var(--color-system-00);
    --color-text-primary: var(--color-system-1200);
    --color-text-secondary: var(--color-system-1100);
    --color-text-tertiary: var(--color-neutral-900);
    --color-text-attention-primary: var(--color-attention-1200);
    --color-text-attention-secondary: var(--color-text-primary);
    --color-text-attention-tertiary: var(--color-attention-1100);
    --color-text-brand-primary: var(--color-brand-primary-1200);
    --color-text-brand-secondary: var(--color-text-inverse);
    --color-text-brand-tertiary: var(--color-brand-primary-1100);
    --color-text-brand-accent-primary: var(--color-brand-secondary-1200);
    --color-text-brand-accent-secondary: var(--color-text-inverse);
    --color-text-brand-accent-tertiary: var(--color-brand-secondary-1100);
    --color-text-critical-primary: var(--color-critical-1200);
    --color-text-critical-secondary: var(--color-text-inverse);
    --color-text-critical-tertiary: var(--color-critical-1100);
    --color-text-critical-interactive-enabled: var(--color-critical-1100);
    --color-text-critical-interactive-focused: var(--color-critical-1100);
    --color-text-critical-interactive-hovered: var(--color-critical-1100);
    --color-text-critical-interactive-pressed: var(--color-critical-1100);
    --color-text-info-primary: var(--color-info-1200);
    --color-text-info-secondary: var(--color-text-inverse);
    --color-text-info-tertiary: var(--color-info-1100);
    --color-text-interactive-inverse-enabled: var(--color-system-00);
    --color-text-interactive-inverse-focused: var(--color-system-00);
    --color-text-interactive-inverse-hovered: var(--color-system-00);
    --color-text-interactive-inverse-pressed: var(--color-system-00);
    --color-text-interactive-primary-enabled: var(--color-system-1200);
    --color-text-interactive-primary-focused: var(--color-system-1200);
    --color-text-interactive-primary-hovered: var(--color-system-1200);
    --color-text-interactive-primary-pressed: var(--color-system-1200);
    --color-text-interactive-quaternary-enabled: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-focused: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-hovered: var(--color-brand-primary-1100);
    --color-text-interactive-quaternary-pressed: var(--color-brand-primary-1100);
    --color-text-interactive-secondary-enabled: var(--color-system-1100);
    --color-text-interactive-secondary-focused: var(--color-system-1100);
    --color-text-interactive-secondary-hovered: var(--color-system-1100);
    --color-text-interactive-secondary-pressed: var(--color-system-1100);
    --color-text-interactive-tertiary-enabled: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-focused: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-hovered: var(--color-brand-primary-1000);
    --color-text-interactive-tertiary-pressed: var(--color-brand-primary-1000);
    --color-text-magic-primary: var(--color-extended-secondary-1200);
    --color-text-magic-secondary: var(--color-text-inverse);
    --color-text-magic-tertiary: var(--color-extended-secondary-1100);
    --color-text-neutral-primary: var(--color-neutral-1200);
    --color-text-neutral-secondary: var(--color-text-inverse);
    --color-text-neutral-tertiary: var(--color-neutral-1100);
    --color-text-neutral-interactive-primary-enabled: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-focused: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-hovered: var(--color-neutral-1200);
    --color-text-neutral-interactive-primary-pressed: var(--color-neutral-1200);
    --color-text-neutral-interactive-secondary-enabled: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-focused: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-hovered: var(--color-neutral-1100);
    --color-text-neutral-interactive-secondary-pressed: var(--color-neutral-1100);
    --color-text-positive-primary: var(--color-positive-1200);
    --color-text-positive-secondary: var(--color-text-inverse);
    --color-text-positive-tertiary: var(--color-positive-1100);
    --color-text-selected-interactive-enabled: var(--color-brand-primary-1100);
    --color-text-selected-interactive-focused: var(--color-brand-primary-1000);
    --color-text-selected-interactive-hovered: var(--color-brand-primary-1000);
    --color-text-selected-interactive-pressed: var(--color-brand-primary-1000);
  }
  /* spotlight_theme-dark */
  .spotlight_theme-dark {
    /* dark */
    /* color */
    --color-background-disabled: var(--color-dark-background-disabled);
    --color-background-page: var(--color-dark-system-100);
    --color-background-primary: var(--color-dark-system-200);
    --color-background-quaternary: var(--color-dark-system-900);
    --color-background-secondary: var(--color-dark-system-300);
    --color-background-tertiary: var(--color-dark-system-400);
    --color-background-attention-primary: var(--color-dark-semantic-attention-900);
    --color-background-attention-secondary: var(--color-dark-semantic-attention-200);
    --color-background-attention-interactive-primary-enabled: var(--color-dark-semantic-attention-900);
    --color-background-attention-interactive-primary-focused: var(--color-dark-semantic-attention-1000);
    --color-background-attention-interactive-primary-hovered: var(--color-dark-semantic-attention-1000);
    --color-background-attention-interactive-primary-pressed: var(--color-dark-semantic-attention-1000);
    --color-background-attention-interactive-secondary-enabled: var(--color-dark-semantic-attention-200);
    --color-background-attention-interactive-secondary-focused: var(--color-dark-semantic-attention-300);
    --color-background-attention-interactive-secondary-hovered: var(--color-dark-semantic-attention-300);
    --color-background-attention-interactive-secondary-pressed: var(--color-dark-semantic-attention-300);
    --color-background-brand-primary: var(--color-dark-brand-primary-900);
    --color-background-brand-quaternary: var(--color-dark-brand-primary-300);
    --color-background-brand-secondary: var(--color-dark-brand-primary-200);
    --color-background-brand-tertiary: var(--color-dark-brand-primary-400);
    --color-background-brand-accent-primary: var(--color-dark-brand-secondary-900);
    --color-background-brand-accent-quaternary: hsl(0 0% 100%);
    --color-background-brand-accent-quinary: hsl(0 0% 100%);
    --color-background-brand-accent-secondary: var(--color-dark-brand-secondary-200);
    --color-background-brand-accent-tertiary: hsl(0 0% 100%);
    --color-background-brand-accent-interactive-primary-enabled: var(--color-dark-brand-secondary-900);
    --color-background-brand-accent-interactive-primary-focused: var(--color-dark-brand-secondary-1000);
    --color-background-brand-accent-interactive-primary-hovered: var(--color-dark-brand-secondary-1000);
    --color-background-brand-accent-interactive-primary-pressed: var(--color-dark-brand-secondary-1000);
    --color-background-brand-accent-interactive-secondary-enabled: var(--color-dark-brand-secondary-200);
    --color-background-brand-accent-interactive-secondary-focused: var(--color-dark-brand-secondary-300);
    --color-background-brand-accent-interactive-secondary-hovered: var(--color-dark-brand-secondary-300);
    --color-background-brand-accent-interactive-secondary-pressed: var(--color-dark-brand-secondary-300);
    --color-background-brand-interactive-primary-enabled: var(--color-dark-brand-primary-900);
    --color-background-brand-interactive-primary-focused: var(--color-dark-brand-primary-1000);
    --color-background-brand-interactive-primary-hovered: var(--color-dark-brand-primary-1000);
    --color-background-brand-interactive-primary-pressed: var(--color-dark-brand-primary-1000);
    --color-background-brand-interactive-secondary-enabled: var(--color-dark-brand-primary-200);
    --color-background-brand-interactive-secondary-focused: var(--color-dark-brand-primary-300);
    --color-background-brand-interactive-secondary-hovered: var(--color-dark-brand-primary-300);
    --color-background-brand-interactive-secondary-pressed: var(--color-dark-brand-primary-300);
    --color-background-brand-interactive-tertiary-enabled: hsl(0 0% 100% / 0);
    --color-background-brand-interactive-tertiary-focused: var(--color-dark-brand-primary-200);
    --color-background-brand-interactive-tertiary-hovered: var(--color-dark-brand-primary-200);
    --color-background-brand-interactive-tertiary-pressed: var(--color-dark-brand-primary-200);
    --color-background-critical-primary: var(--color-dark-semantic-critical-900);
    --color-background-critical-secondary: var(--color-dark-semantic-critical-200);
    --color-background-critical-interactive-primary-enabled: var(--color-dark-semantic-critical-900);
    --color-background-critical-interactive-primary-focused: var(--color-dark-semantic-critical-1000);
    --color-background-critical-interactive-primary-hovered: var(--color-dark-semantic-critical-1000);
    --color-background-critical-interactive-primary-pressed: var(--color-dark-semantic-critical-1000);
    --color-background-critical-interactive-secondary-enabled: var(--color-dark-semantic-critical-200);
    --color-background-critical-interactive-secondary-focused: var(--color-dark-semantic-critical-300);
    --color-background-critical-interactive-secondary-hovered: var(--color-dark-semantic-critical-300);
    --color-background-critical-interactive-secondary-pressed: var(--color-dark-semantic-critical-300);
    --color-background-critical-interactive-tertiary-enabled: var(--color-dark-background-interactive-critical);
    --color-background-critical-interactive-tertiary-focused: var(--color-dark-semantic-critical-200);
    --color-background-critical-interactive-tertiary-hovered: var(--color-dark-semantic-critical-200);
    --color-background-critical-interactive-tertiary-perssed: var(--color-dark-semantic-critical-200);
    --color-background-info-primary: var(--color-dark-semantic-info-900);
    --color-background-info-secondary: var(--color-dark-semantic-info-200);
    --color-background-info-interactive-primary-enabled: var(--color-dark-semantic-info-900);
    --color-background-info-interactive-primary-focused: var(--color-dark-semantic-info-1000);
    --color-background-info-interactive-primary-hovered: var(--color-dark-semantic-info-1000);
    --color-background-info-interactive-primary-pressed: var(--color-dark-semantic-info-1000);
    --color-background-info-interactive-secondary-enabled: var(--color-dark-semantic-info-200);
    --color-background-info-interactive-secondary-focused: var(--color-dark-semantic-info-300);
    --color-background-info-interactive-secondary-hovered: var(--color-dark-semantic-info-300);
    --color-background-info-interactive-secondary-pressed: var(--color-dark-semantic-info-300);
    --color-background-interactive-filter-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-focused: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-hovered: hsl(0 0% 100% / 0);
    --color-background-interactive-filter-pressed: hsl(0 0% 100% / 0.06);
    --color-background-interactive-primary-enabled: var(--color-dark-brand-secondary-900);
    --color-background-interactive-primary-focused: var(--color-dark-brand-secondary-1000);
    --color-background-interactive-primary-hovered: var(--color-dark-brand-secondary-1000);
    --color-background-interactive-primary-pressed: var(--color-dark-brand-secondary-1000);
    --color-background-interactive-quaternary-enabled: var(--color-dark-system-900);
    --color-background-interactive-quaternary-focused: var(--color-dark-system-900);
    --color-background-interactive-quaternary-hovered: var(--color-dark-system-900);
    --color-background-interactive-quaternary-pressed: var(--color-dark-system-900);
    --color-background-interactive-quinary-enabled: var(--color-dark-system-100);
    --color-background-interactive-quinary-focused: var(--color-dark-system-200);
    --color-background-interactive-quinary-hovered: var(--color-dark-system-200);
    --color-background-interactive-quinary-pressed: var(--color-dark-system-200);
    --color-background-interactive-secondary-enabled: hsl(0 0% 100% / 0);
    --color-background-interactive-secondary-focused: var(--color-dark-system-200);
    --color-background-interactive-secondary-hovered: var(--color-dark-system-200);
    --color-background-interactive-secondary-pressed: var(--color-dark-system-200);
    --color-background-interactive-tertiary-enabled: var(--color-dark-system-00);
    --color-background-interactive-tertiary-focused: var(--color-dark-system-200);
    --color-background-interactive-tertiary-hovered: var(--color-dark-system-200);
    --color-background-interactive-tertiary-pressed: var(--color-dark-system-200);
    --color-background-magic-primary: var(--color-dark-extended-secondary-900);
    --color-background-magic-secondary: var(--color-dark-extended-secondary-200);
    --color-background-magic-interactive-primary-enabled: var(--color-dark-extended-secondary-900);
    --color-background-magic-interactive-primary-focused: var(--color-dark-extended-secondary-1000);
    --color-background-magic-interactive-primary-hovered: var(--color-dark-extended-secondary-1000);
    --color-background-magic-interactive-primary-pressed: var(--color-dark-extended-secondary-1000);
    --color-background-magic-interactive-secondary-enabled: var(--color-dark-extended-secondary-200);
    --color-background-magic-interactive-secondary-focused: var(--color-dark-extended-secondary-300);
    --color-background-magic-interactive-secondary-hovered: var(--color-dark-extended-secondary-300);
    --color-background-magic-interactive-secondary-pressed: var(--color-dark-extended-secondary-300);
    --color-background-neutral-primary: var(--color-dark-neutral-900);
    --color-background-neutral-secondary: var(--color-dark-neutral-200);
    --color-background-neutral-interactive-primary-enabled: var(--color-dark-neutral-900);
    --color-background-neutral-interactive-primary-focused: var(--color-dark-neutral-1000);
    --color-background-neutral-interactive-primary-hovered: var(--color-dark-neutral-1000);
    --color-background-neutral-interactive-primary-pressed: var(--color-dark-neutral-1000);
    --color-background-neutral-interactive-secondary-enabled: var(--color-dark-neutral-200);
    --color-background-neutral-interactive-secondary-focused: var(--color-dark-neutral-300);
    --color-background-neutral-interactive-secondary-hovered: var(--color-dark-neutral-300);
    --color-background-neutral-interactive-secondary-pressed: var(--color-dark-neutral-300);
    --color-background-positive-primary: var(--color-dark-semantic-positive-900);
    --color-background-positive-secondary: var(--color-dark-semantic-positive-200);
    --color-background-positive-interactive-primary-enabled: var(--color-dark-semantic-positive-900);
    --color-background-positive-interactive-primary-focused: var(--color-dark-semantic-positive-1000);
    --color-background-positive-interactive-primary-hovered: var(--color-dark-semantic-positive-1000);
    --color-background-positive-interactive-primary-pressed: var(--color-dark-semantic-positive-1000);
    --color-background-positive-interactive-secondary-enabled: var(--color-dark-semantic-positive-200);
    --color-background-positive-interactive-secondary-focused: var(--color-dark-semantic-positive-300);
    --color-background-positive-interactive-secondary-hovered: var(--color-dark-semantic-positive-300);
    --color-background-positive-interactive-secondary-pressed: var(--color-dark-semantic-positive-300);
    --color-background-selected-interactive-primary-enabled: var(--color-dark-brand-primary-100);
    --color-background-selected-interactive-primary-focused: var(--color-dark-brand-primary-200);
    --color-background-selected-interactive-primary-hovered: var(--color-dark-brand-primary-200);
    --color-background-selected-interactive-primary-pressed: var(--color-dark-brand-primary-200);
    --color-background-selected-interactive-quaternary-enabled: var(--color-dark-system-900);
    --color-background-selected-interactive-quaternary-focused: var(--color-dark-system-1000);
    --color-background-selected-interactive-quaternary-hovered: var(--color-dark-system-1000);
    --color-background-selected-interactive-quaternary-pressed: var(--color-dark-system-1000);
    --color-background-selected-interactive-secondary-enabled: var(--color-dark-system-300);
    --color-background-selected-interactive-secondary-focused: var(--color-dark-system-400);
    --color-background-selected-interactive-secondary-hovered: var(--color-dark-system-400);
    --color-background-selected-interactive-secondary-pressed: var(--color-dark-system-400);
    --color-background-selected-interactive-tertiary-enabled: var(--color-dark-system-900);
    --color-background-selected-interactive-tertiary-focused: var(--color-dark-system-1000);
    --color-background-selected-interactive-tertiary-hovered: var(--color-dark-system-1000);
    --color-background-selected-interactive-tertiary-pressed: var(--color-dark-system-1000);
    --color-border-disabled: var(--color-dark-border-disabled);
    --color-border-focus: var(--color-dark-brand-primary-800);
    --color-border-inverse: var(--color-dark-system-00);
    --color-border-primary: var(--color-dark-system-500);
    --color-border-attention-primary: var(--color-dark-semantic-attention-800);
    --color-border-attention-secondary: var(--color-dark-semantic-attention-600);
    --color-border-brand-primary: var(--color-dark-brand-primary-800);
    --color-border-brand-secondary: var(--color-dark-brand-primary-600);
    --color-border-brand-tertiary: hsl(0 0% 100%);
    --color-border-brand-accent-primary: var(--color-dark-brand-secondary-800);
    --color-border-brand-accent-secondary: var(--color-dark-brand-secondary-600);
    --color-border-brand-accent-tertiary: hsl(0 0% 100%);
    --color-border-brand-interactive-enabled: var(--color-dark-brand-primary-700);
    --color-border-brand-interactive-focused: var(--color-dark-brand-primary-800);
    --color-border-brand-interactive-hovered: var(--color-dark-brand-primary-800);
    --color-border-brand-interactive-pressed: var(--color-dark-brand-primary-800);
    --color-border-critical-primary: var(--color-dark-semantic-critical-800);
    --color-border-critical-secondary: var(--color-dark-semantic-critical-600);
    --color-border-critical-interactive-enabled: var(--color-dark-semantic-critical-900);
    --color-border-critical-interactive-focused: var(--color-dark-semantic-critical-1000);
    --color-border-critical-interactive-hovered: var(--color-dark-semantic-critical-1000);
    --color-border-critical-interactive-pressed: var(--color-dark-semantic-critical-1000);
    --color-border-info-primary: var(--color-dark-semantic-info-800);
    --color-border-info-secondary: var(--color-dark-semantic-info-600);
    --color-border-interactive-primary-enabled: var(--color-dark-system-1200);
    --color-border-interactive-primary-focused: var(--color-dark-system-1100);
    --color-border-interactive-primary-hovered: var(--color-dark-system-1100);
    --color-border-interactive-primary-pressed: var(--color-dark-system-1100);
    --color-border-interactive-secondary-enabled: var(--color-dark-system-600);
    --color-border-interactive-secondary-focused: var(--color-dark-system-700);
    --color-border-interactive-secondary-hovered: var(--color-dark-system-700);
    --color-border-interactive-secondary-pressed: var(--color-dark-system-700);
    --color-border-interactive-tertiary-enabled: var(--color-dark-system-500);
    --color-border-interactive-tertiary-focused: var(--color-dark-system-600);
    --color-border-interactive-tertiary-hovered: var(--color-dark-system-600);
    --color-border-interactive-tertiary-pressed: var(--color-dark-system-600);
    --color-border-magic-primary: var(--color-dark-extended-secondary-800);
    --color-border-magic-secondary: var(--color-dark-extended-secondary-600);
    --color-border-neutral-primary: var(--color-dark-neutral-800);
    --color-border-neutral-secondary: var(--color-dark-neutral-600);
    --color-border-positive-primary: var(--color-dark-semantic-positive-800);
    --color-border-positive-secondary: var(--color-dark-semantic-positive-600);
    --color-border-positive-interactive-primary: hsl(0 0% 100%);
    --color-border-selected-interactive-primary-enabled: var(--color-dark-brand-primary-700);
    --color-border-selected-interactive-primary-focused: var(--color-dark-brand-primary-800);
    --color-border-selected-interactive-primary-hovered: var(--color-dark-brand-primary-800);
    --color-border-selected-interactive-primary-pressed: var(--color-dark-brand-primary-800);
    --color-border-selected-interactive-secondary-enabled: var(--color-dark-system-1200);
    --color-border-selected-interactive-secondary-focused: var(--color-dark-system-1100);
    --color-border-selected-interactive-secondary-hovered: var(--color-dark-system-1100);
    --color-border-selected-interactive-secondary-pressed: var(--color-dark-system-1100);
    --color-border-selected-interactive-tertiary-enabled: var(--color-dark-brand-primary-600);
    --color-border-selected-interactive-tertiary-focused: var(--color-dark-brand-primary-700);
    --color-border-selected-interactive-tertiary-hovered: var(--color-dark-brand-primary-700);
    --color-border-selected-interactive-tertiary-pressed: var(--color-dark-brand-primary-700);
    --color-content-disabled: var(--color-dark-content-disabled);
    --color-content-inverse: var(--color-dark-system-00);
    --color-content-primary: var(--color-dark-system-1200);
    --color-content-secondary: var(--color-dark-system-1100);
    --color-content-attention-primary: var(--color-dark-semantic-attention-1100);
    --color-content-attention-secondary: var(--color-content-inverse);
    --color-content-attention-tertiary: var(--color-dark-semantic-attention-900);
    --color-content-brand-primary: var(--color-dark-brand-primary-1100);
    --color-content-brand-secondary: var(--color-text-inverse);
    --color-content-brand-tertiary: var(--color-dark-brand-primary-900);
    --color-content-brand-accent-primary: var(--color-dark-brand-secondary-1100);
    --color-content-brand-accent-secondary: var(--color-content-inverse);
    --color-content-brand-accent-tertiary: var(--color-dark-brand-secondary-900);
    --color-content-brand-interactive-enabled: var(--color-dark-brand-primary-1000);
    --color-content-brand-interactive-focused: var(--color-dark-brand-primary-900);
    --color-content-brand-interactive-hovered: var(--color-dark-brand-primary-900);
    --color-content-brand-interactive-pressed: var(--color-dark-brand-primary-900);
    --color-content-critical-primary: var(--color-dark-semantic-critical-1100);
    --color-content-critical-secondary: var(--color-content-inverse);
    --color-content-critical-tertiary: var(--color-dark-semantic-critical-900);
    --color-content-critical-interactive-enabled: var(--color-dark-semantic-critical-1000);
    --color-content-critical-interactive-focused: var(--color-dark-semantic-critical-1000);
    --color-content-critical-interactive-hovered: var(--color-dark-semantic-critical-1000);
    --color-content-critical-interactive-pressed: var(--color-dark-semantic-critical-1000);
    --color-content-info-primary: var(--color-dark-semantic-info-1100);
    --color-content-info-secondary: var(--color-content-inverse);
    --color-content-info-tertiary: var(--color-dark-semantic-info-900);
    --color-content-interactive-inverse-enabled: var(--color-dark-system-00);
    --color-content-interactive-inverse-focused: var(--color-dark-system-00);
    --color-content-interactive-inverse-hovered: var(--color-dark-system-00);
    --color-content-interactive-inverse-pressed: var(--color-dark-system-00);
    --color-content-interactive-primary-enabled: var(--color-dark-system-1200);
    --color-content-interactive-primary-focused: var(--color-dark-system-1200);
    --color-content-interactive-primary-hovered: var(--color-dark-system-1200);
    --color-content-interactive-primary-pressed: var(--color-dark-system-1200);
    --color-content-interactive-secondary-enabled: var(--color-dark-system-1100);
    --color-content-interactive-secondary-focused: var(--color-dark-system-1100);
    --color-content-interactive-secondary-hovered: var(--color-dark-system-1100);
    --color-content-interactive-secondary-pressed: var(--color-dark-system-1100);
    --color-content-magic-primary: var(--color-dark-extended-secondary-1100);
    --color-content-magic-secondary: var(--color-content-inverse);
    --color-content-magic-tertiary: var(--color-dark-extended-secondary-900);
    --color-content-neutral-primary: var(--color-dark-neutral-1100);
    --color-content-neutral-secondary: var(--color-content-inverse);
    --color-content-neutral-tertiary: var(--color-dark-neutral-900);
    --color-content-positive-primary: var(--color-dark-semantic-positive-1100);
    --color-content-positive-secondary: var(--color-content-inverse);
    --color-content-positive-tertiary: var(--color-dark-semantic-positive-900);
    --color-content-positive-interactive-primary-enabled: var(--color-dark-semantic-positive-1100);
    --color-content-positive-interactive-primary-focused: var(--color-dark-semantic-positive-1000);
    --color-content-positive-interactive-primary-hovered: var(--color-dark-semantic-positive-1000);
    --color-content-positive-interactive-primary-pressed: var(--color-dark-semantic-positive-1000);
    --color-content-positive-interactive-secondary-enabled: var(--color-dark-semantic-positive-100);
    --color-content-positive-interactive-secondary-focused: var(--color-dark-semantic-positive-200);
    --color-content-positive-interactive-secondary-hovered: var(--color-dark-semantic-positive-200);
    --color-content-positive-interactive-secondary-pressed: var(--color-dark-semantic-positive-200);
    --color-content-selected-interactive-primary-enabled: var(--color-dark-system-00);
    --color-content-selected-interactive-primary-focused: var(--color-dark-system-100);
    --color-content-selected-interactive-primary-hovered: var(--color-dark-system-100);
    --color-content-selected-interactive-primary-pressed: var(--color-dark-system-100);
    --color-content-selected-interactive-secondary-enabled: var(--color-dark-brand-primary-1000);
    --color-content-selected-interactive-secondary-focused: var(--color-dark-brand-primary-900);
    --color-content-selected-interactive-secondary-hovered: var(--color-dark-brand-primary-900);
    --color-content-selected-interactive-secondary-pressed: var(--color-dark-brand-primary-900);
    --color-text-disabled: var(--color-dark-text-disabled);
    --color-text-inverse: var(--color-dark-system-00);
    --color-text-primary: var(--color-dark-neutral-1200);
    --color-text-secondary: var(--color-dark-neutral-1100);
    --color-text-tertiary: var(--color-dark-neutral-900);
    --color-text-attention-primary: var(--color-dark-semantic-attention-1200);
    --color-text-attention-secondary: var(--color-text-inverse);
    --color-text-attention-tertiary: var(--color-dark-semantic-attention-1100);
    --color-text-brand-primary: var(--color-dark-brand-primary-1200);
    --color-text-brand-secondary: var(--color-text-inverse);
    --color-text-brand-tertiary: var(--color-dark-brand-primary-1100);
    --color-text-brand-accent-primary: var(--color-dark-brand-secondary-1200);
    --color-text-brand-accent-secondary: var(--color-text-inverse);
    --color-text-brand-accent-tertiary: var(--color-dark-brand-secondary-1100);
    --color-text-critical-primary: var(--color-dark-semantic-critical-1200);
    --color-text-critical-secondary: var(--color-text-inverse);
    --color-text-critical-tertiary: var(--color-dark-semantic-critical-1100);
    --color-text-critical-interactive-enabled: var(--color-dark-semantic-critical-1100);
    --color-text-critical-interactive-focused: var(--color-dark-semantic-critical-1100);
    --color-text-critical-interactive-hovered: var(--color-dark-semantic-critical-1100);
    --color-text-critical-interactive-pressed: var(--color-dark-semantic-critical-1100);
    --color-text-info-primary: var(--color-dark-semantic-info-1200);
    --color-text-info-secondary: var(--color-text-inverse);
    --color-text-info-tertiary: var(--color-dark-semantic-info-1100);
    --color-text-interactive-inverse-enabled: var(--color-dark-system-00);
    --color-text-interactive-inverse-focused: var(--color-dark-system-00);
    --color-text-interactive-inverse-hovered: var(--color-dark-system-00);
    --color-text-interactive-inverse-pressed: var(--color-dark-system-00);
    --color-text-interactive-primary-enabled: var(--color-dark-system-1200);
    --color-text-interactive-primary-focused: var(--color-dark-system-1200);
    --color-text-interactive-primary-hovered: var(--color-dark-system-1200);
    --color-text-interactive-primary-pressed: var(--color-dark-system-1200);
    --color-text-interactive-quaternary-enabled: var(--color-dark-brand-primary-1100);
    --color-text-interactive-quaternary-focused: var(--color-dark-brand-primary-1100);
    --color-text-interactive-quaternary-hovered: var(--color-dark-brand-primary-1100);
    --color-text-interactive-quaternary-pressed: var(--color-dark-brand-primary-1100);
    --color-text-interactive-secondary-enabled: var(--color-dark-system-1100);
    --color-text-interactive-secondary-focused: var(--color-dark-system-1100);
    --color-text-interactive-secondary-hovered: var(--color-dark-system-1100);
    --color-text-interactive-secondary-pressed: var(--color-dark-system-1100);
    --color-text-interactive-tertiary-enabled: var(--color-dark-brand-primary-1000);
    --color-text-interactive-tertiary-focused: var(--color-dark-brand-primary-1000);
    --color-text-interactive-tertiary-hovered: var(--color-dark-brand-primary-1000);
    --color-text-interactive-tertiary-pressed: var(--color-dark-brand-primary-1000);
    --color-text-magic-primary: var(--color-dark-extended-secondary-1200);
    --color-text-magic-secondary: var(--color-text-inverse);
    --color-text-magic-tertiary: var(--color-dark-extended-secondary-1100);
    --color-text-neutral-primary: var(--color-dark-neutral-1200);
    --color-text-neutral-secondary: var(--color-text-inverse);
    --color-text-neutral-tertiary: var(--color-dark-neutral-1100);
    --color-text-neutral-interactive-primary-enabled: var(--color-dark-neutral-1200);
    --color-text-neutral-interactive-primary-focused: var(--color-dark-neutral-1200);
    --color-text-neutral-interactive-primary-hovered: var(--color-dark-neutral-1200);
    --color-text-neutral-interactive-primary-pressed: var(--color-dark-neutral-1200);
    --color-text-neutral-interactive-secondary-enabled: var(--color-dark-neutral-1100);
    --color-text-neutral-interactive-secondary-focused: var(--color-dark-neutral-1100);
    --color-text-neutral-interactive-secondary-hovered: var(--color-dark-neutral-1100);
    --color-text-neutral-interactive-secondary-pressed: var(--color-dark-neutral-1100);
    --color-text-positive-primary: var(--color-dark-semantic-positive-1200);
    --color-text-positive-secondary: var(--color-text-inverse);
    --color-text-positive-tertiary: var(--color-dark-semantic-positive-1100);
    --color-text-selected-interactive-enabled: var(--color-dark-brand-primary-1100);
    --color-text-selected-interactive-focused: var(--color-dark-brand-primary-1000);
    --color-text-selected-interactive-hovered: var(--color-dark-brand-primary-1000);
    --color-text-selected-interactive-pressed: var(--color-dark-brand-primary-1000);
  }
}
@layer spotlight-ui.base, spotlight-ui.components;
@layer spotlight-ui.base {
  /* popover */
  :root {
    /* Mode 1 */
    /* number */
    --popover-arrow-size-height: var(--size-element-xs);
    --popover-arrow-size-width: var(--size-element-2xl);
    --popover-arrow-space-edge-to-element-horizontal-secondary: var(--space-none);
    --popover-arrow-space-edge-to-element-horizontal-primary: var(--space-xl);
    --popover-arrow-space-edge-to-element-vertical-secondary: var(--space-none);
    --popover-arrow-space-edge-to-element-vertical-primary: var(--space-xl);
    --popover-space-edge-to-content-horizontal-secondary: var(--space-lg);
    --popover-space-edge-to-content-horizontal-primary: var(--space-xl);
    --popover-space-edge-to-content-vertical-secondary: var(--space-lg);
    --popover-space-edge-to-content-vertical-primary: var(--space-xl);
  }
  /* semantic */
  :root {
    --color-background-semantic-primary: var(--color-background-info-primary);
    --color-background-semantic-secondary: var(--color-background-info-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-border-semantic-primary: var(--color-border-info-primary);
    --color-border-semantic-secondary: var(--color-border-info-secondary);
    --color-content-semantic-primary: var(--color-content-info-primary);
    --color-content-semantic-secondary: var(--color-content-info-secondary);
    --color-content-semantic-tertiary: var(--color-content-info-tertiary);
    --color-text-semantic-primary: var(--color-text-info-primary);
    --color-text-semantic-secondary: var(--color-text-info-secondary);
    --color-text-semantic-tertiary: var(--color-text-info-tertiary);
  }
  .spotlight_neutral {
    --color-background-semantic-primary: var(--color-background-neutral-primary);
    --color-background-semantic-secondary: var(--color-background-neutral-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-neutral-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-neutral-secondary);
    --color-border-semantic-primary: var(--color-border-neutral-primary);
    --color-border-semantic-secondary: var(--color-border-neutral-secondary);
    --color-content-semantic-primary: var(--color-content-neutral-primary);
    --color-content-semantic-secondary: var(--color-content-neutral-secondary);
    --color-content-semantic-tertiary: var(--color-content-neutral-tertiary);
    --color-text-semantic-primary: var(--color-text-neutral-primary);
    --color-text-semantic-secondary: var(--color-text-neutral-secondary);
    --color-text-semantic-tertiary: var(--color-text-neutral-tertiary);
  }
  .spotlight_positive {
    --color-background-semantic-primary: var(--color-background-positive-primary);
    --color-background-semantic-secondary: var(--color-background-positive-secondary);
    --color-background-semantic-interactive-primary: var(--color-content-interactive-positive-primary);
    --color-background-semantic-interactive-secondary: var(--color-content-interactive-positive-secondary);
    --color-border-semantic-primary: var(--color-border-positive-primary);
    --color-border-semantic-secondary: var(--color-border-positive-secondary);
    --color-content-semantic-primary: var(--color-content-positive-primary);
    --color-content-semantic-secondary: var(--color-content-positive-secondary);
    --color-content-semantic-tertiary: var(--color-content-positive-tertiary);
    --color-text-semantic-primary: var(--color-text-positive-primary);
    --color-text-semantic-secondary: var(--color-text-positive-secondary);
    --color-text-semantic-tertiary: var(--color-text-positive-tertiary);
  }
  .spotlight_critical {
    --color-background-semantic-primary: var(--color-background-critical-primary);
    --color-background-semantic-secondary: var(--color-background-critical-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-critical-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-critical-secondary);
    --color-border-semantic-primary: var(--color-border-critical-primary);
    --color-border-semantic-secondary: var(--color-border-critical-secondary);
    --color-content-semantic-primary: var(--color-content-critical-primary);
    --color-content-semantic-secondary: var(--color-content-critical-secondary);
    --color-content-semantic-tertiary: var(--color-content-critical-tertiary);
    --color-text-semantic-primary: var(--color-text-critical-primary);
    --color-text-semantic-secondary: var(--color-text-critical-secondary);
    --color-text-semantic-tertiary: var(--color-text-critical-tertiary);
  }
  .spotlight_attention {
    --color-background-semantic-primary: var(--color-background-attention-primary);
    --color-background-semantic-secondary: var(--color-background-attention-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-attention-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-attention-secondary);
    --color-border-semantic-primary: var(--color-border-attention-primary);
    --color-border-semantic-secondary: var(--color-border-attention-secondary);
    --color-content-semantic-primary: var(--color-content-attention-primary);
    --color-content-semantic-secondary: var(--color-content-attention-secondary);
    --color-content-semantic-tertiary: var(--color-content-attention-tertiary);
    --color-text-semantic-primary: var(--color-text-attention-primary);
    --color-text-semantic-secondary: var(--color-text-attention-secondary);
    --color-text-semantic-tertiary: var(--color-text-attention-tertiary);
  }
  .spotlight_info {
    --color-background-semantic-primary: var(--color-background-info-primary);
    --color-background-semantic-secondary: var(--color-background-info-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-info-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-info-secondary);
    --color-border-semantic-primary: var(--color-border-info-primary);
    --color-border-semantic-secondary: var(--color-border-info-secondary);
    --color-content-semantic-primary: var(--color-content-info-primary);
    --color-content-semantic-secondary: var(--color-content-info-secondary);
    --color-content-semantic-tertiary: var(--color-content-info-tertiary);
    --color-text-semantic-primary: var(--color-text-info-primary);
    --color-text-semantic-secondary: var(--color-text-info-secondary);
    --color-text-semantic-tertiary: var(--color-text-info-tertiary);
  }
  .spotlight_brand {
    --color-background-semantic-primary: var(--color-background-brand-primary);
    --color-background-semantic-secondary: var(--color-background-brand-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-brand-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-brand-secondary);
    --color-border-semantic-primary: var(--color-border-brand-primary);
    --color-border-semantic-secondary: var(--color-border-brand-secondary);
    --color-content-semantic-primary: var(--color-content-brand-primary);
    --color-content-semantic-secondary: var(--color-content-brand-secondary);
    --color-content-semantic-tertiary: var(--color-content-brand-tertiary);
    --color-text-semantic-primary: var(--color-text-brand-primary);
    --color-text-semantic-secondary: var(--color-text-brand-secondary);
    --color-text-semantic-tertiary: var(--color-text-brand-tertiary);
  }
  .spotlight_magic {
    --color-background-semantic-primary: var(--color-background-magic-primary);
    --color-background-semantic-secondary: var(--color-background-magic-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-magic-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-magic-secondary);
    --color-border-semantic-primary: var(--color-border-magic-primary);
    --color-border-semantic-secondary: var(--color-border-magic-secondary);
    --color-content-semantic-primary: var(--color-content-magic-primary);
    --color-content-semantic-secondary: var(--color-content-magic-secondary);
    --color-content-semantic-tertiary: var(--color-content-magic-tertiary);
    --color-text-semantic-primary: var(--color-text-magic-primary);
    --color-text-semantic-secondary: var(--color-text-magic-secondary);
    --color-text-semantic-tertiary: var(--color-text-magic-tertiary);
  }
  .spotlight_extended {
    /* extended */
    /* color */
    --color-background-semantic-primary: var(--color-background-primary);
    --color-background-semantic-secondary: var(--color-background-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-secondary);
    --color-border-primary-3: var(--color-border-primary);
    --color-border-secondary-3: var(--color-border-secondary);
    --color-content-primary-5: var(--color-content-primary);
    --color-content-secondary-5: var(--color-content-secondary);
    --color-content-tertiary-2: var(--color-content-tertiary);
    --color-text-primary: var(--color-text-primary);
    --color-text-secondary: var(--color-text-secondary);
    --color-text-tertiary: var(--color-text-tertiary);
  }
  .spotlight-accent {
    --color-background-semantic-primary: var(--color-background-brand-accent-primary);
    --color-background-semantic-secondary: var(--color-background-brand-accent-secondary);
    --color-background-semantic-interactive-primary: var(--color-background-interactive-brand-accent-primary);
    --color-background-semantic-interactive-secondary: var(--color-background-interactive-brand-accent-secondary);
    --color-border-semantic-primary: var(--color-border-brand-accent-primary);
    --color-border-semantic-secondary: var(--color-border-brand-accent-secondary);
    --color-content-semantic-primary: var(--color-content-brand-accent-primary);
    --color-content-semantic-secondary: var(--color-content-brand-accent-secondary);
    --color-content-semantic-tertiary: var(--color-content-brand-accent-tertiary);
    --color-text-semantic-primary: var(--color-text-brand-accent-primary);
    --color-text-semantic-secondary: var(--color-text-brand-accent-secondary);
    --color-text-semantic-tertiary: var(--color-text-brand-accent-tertiary);
  }
  /* spotlight_validation */
  :root {
    --validation-color-background-primary: var(--color-background-interactive-brand-primary);
    --validation-color-background-secondary: var(--color-background-interactive-brand-secondary);
    --validation-color-border-primary: var(--selected-color-border-primary);
    --validation-color-text-primary: var(--color-text-primary);
    --validation-color-text-secondary: var(--color-text-secondary);
    --validation-color-text-tertiary: var(--color-text-interactive-secondary);
  }
  .spotlight_validation {
    --validation-color-background-primary: var(--color-background-interactive-brand-primary);
    --validation-color-background-secondary: var(--color-background-interactive-brand-secondary);
    --validation-color-border-primary: var(--selected-color-border-primary);
    --validation-color-text-primary: var(--color-text-primary);
    --validation-color-text-secondary: var(--color-text-secondary);
    --validation-color-text-tertiary: var(--color-text-interactive-secondary);
  }
  .spotlight_validation-invalid {
    --validation-color-background-primary: var(--color-background-interactive-critical-primary);
    --validation-color-background-secondary: var(--color-background-interactive-critical-secondary);
    --validation-color-border-primary: var(--color-border-interactive-critical);
    --validation-color-text-primary: var(--color-text-critical-tertiary);
    --validation-color-text-secondary: var(--color-text-interactive-critical);
    --validation-color-text-tertiary: var(--color-text-interactive-critical);
  }
  /* spotlight_responsive */
  :root {
    --responsive-border-radius-primary: var(--border-radius-md);
    --responsive-space-edge-to-content-vertical-quinary: var(--space-md);
    --responsive-space-edge-to-content-vertical-quaternary: var(--space-lg);
    --responsive-space-edge-to-content-vertical-primary: var(--space-xl);
    --responsive-space-edge-to-content-vertical-secondary: var(--space-3xl);
    --responsive-space-edge-to-content-vertical-tertiary: var(--space-4xl);
  }
  .spotlight_responsive, .spotlight_responsive-desktop {
    --responsive-border-radius-primary: var(--border-radius-md);
    --responsive-space-edge-to-content-vertical-quinary: var(--space-md);
    --responsive-space-edge-to-content-vertical-quaternary: var(--space-lg);
    --responsive-space-edge-to-content-vertical-primary: var(--space-xl);
    --responsive-space-edge-to-content-vertical-secondary: var(--space-3xl);
    --responsive-space-edge-to-content-vertical-tertiary: var(--space-4xl);
  }
  .spotlight_responsive-mobile {
    --responsive-border-radius-primary: var(--border-radius-sm);
    --responsive-space-edge-to-content-vertical-primary: var(--space-lg);
    --responsive-space-edge-to-content-vertical-quaternary: var(--space-lg);
    --responsive-space-edge-to-content-vertical-quinary: var(--space-lg);
    --responsive-space-edge-to-content-vertical-secondary: var(--space-2xl);
    --responsive-space-edge-to-content-vertical-tertiary: var(--space-3xl);
  }
  /* spotlight_selected */
  .spotlight_selected {
    --selected-color-background-primary: var(--color-background-interactive-tertiary);
    --selected-color-background-quaternary: var(--color-background-interactive-quaternary);
    --selected-color-background-quinary: var(--color-background-interactive-tertiary);
    --selected-color-background-secondary: var(--color-background-interactive-secondary);
    --selected-color-background-senary: var(--color-background-interactive-secondary);
    --selected-color-background-septenary: var(--color-background-interactive-secondary);
    --selected-color-background-tertiary: var(--color-background-interactive-tertiary);
    --selected-color-background-badge-primary: var(--color-background-interactive-neutral-secondary);
    --selected-color-background-brand-primary: var(--color-background-interactive-secondary);
    --selected-color-background-brand-secondary: var(--color-background-interactive-secondary);
    --selected-color-background-read-only-primary: hsl(0 0% 100% / 0);
    --selected-color-background-validation-primary: var(--color-background-interactive-secondary);
    --selected-color-background-validation-secondary: var(--color-background-interactive-secondary);
    --selected-color-border-primary: var(--color-border-interactive-secondary);
    --selected-color-border-secondary: var(--color-border-interactive-tertiary);
    --selected-color-border-tertiary: var(--color-border-interactive-tertiary);
    --selected-color-border-positive-primary: var(--color-border-interactive-tertiary);
    --selected-color-content-primary: var(--color-content-interactive-primary);
    --selected-color-content-quaternary: var(--color-content-interactive-inverse);
    --selected-color-content-quinary: var(--color-content-interactive-secondary);
    --selected-color-content-secondary: hsl(0 0% 100% / 0);
    --selected-color-content-senary: var(--color-content-interactive-secondary);
    --selected-color-content-tertiary: hsl(0 0% 100% / 0);
    --selected-color-content-brand-primary: var(--color-content-interactive-brand);
    --selected-color-content-positive-positive: var(--color-content-interactive-positive-primary);
    --selected-color-content-positive-secondary: var(--color-content-interactive-positive-secondary);
    --selected-color-text-primary: var(--color-text-interactive-primary);
    --selected-color-text-quaternary: var(--color-text-interactive-neutral-primary);
    --selected-color-text-quinary: var(--color-text-interactive-secondary);
    --selected-color-text-secondary: var(--color-text-interactive-secondary);
    --selected-color-text-senary: var(--color-text-interactive-secondary);
    --selected-color-text-tertiary: var(--color-text-interactive-primary);
    --selected-color-text-brand-primary: var(--color-text-interactive-tertiary);
    --selected-color-text-validation-primary: var(--validation-color-text-secondary);
    /* number */
    --selected-border-weight-primary: var(--border-weight-default);
    --selected-border-weight-secondary: var(--border-weight-default);
    --selected-border-weight-tertiary: var(--border-weight-heavy);
    --selected-text-weight-primary: var(--text-weight-medium);
    --selected-text-weight-tertiary: var(--text-weight-medium);
    --selected-text-weight-secondary: var(--text-weight-semibold);
  }
  .spotlight_selected-selected {
    /* selected */
    /* color */
    --selected-color-background-primary: var(--color-background-interactive-selected-secondary);
    --selected-color-background-quaternary: var(--color-background-interactive-selected-tertiary);
    --selected-color-background-quinary: var(--color-background-interactive-selected-quaternary);
    --selected-color-background-secondary: var(--color-background-interactive-selected-primary);
    --selected-color-background-senary: var(--color-background-interactive-quinary);
    --selected-color-background-septenary: var(--color-text-brand-secondary);
    --selected-color-background-tertiary: var(--color-background-interactive-primary);
    --selected-color-background-badge-primary: var(--color-background-brand-primary);
    --selected-color-background-brand-primary: var(--color-background-interactive-brand-primary);
    --selected-color-background-brand-secondary: var(--color-background-interactive-brand-secondary);
    --selected-color-background-read-only-primary: var(--color-background-secondary);
    --selected-color-background-validation-primary: var(--validation-color-background-primary);
    --selected-color-background-validation-secondary: var(--validation-color-background-secondary);
    --selected-color-border-primary: var(--color-border-interactive-selected-secondary);
    --selected-color-border-secondary: var(--color-border-interactive-selected-primary);
    --selected-color-border-tertiary: var(--color-border-interactive-tertiary);
    --selected-color-border-positive-primary: var(--color-border-positive-secondary);
    --selected-color-content-primary: var(--color-content-interactive-selected-secondary);
    --selected-color-content-quaternary: var(--color-content-interactive-selected-primary);
    --selected-color-content-quinary: var(--color-content-interactive-selected-secondary);
    --selected-color-content-secondary: var(--color-content-interactive-inverse);
    --selected-color-content-senary: var(--color-content-interactive-primary);
    --selected-color-content-tertiary: var(--color-content-interactive-secondary);
    --selected-color-content-brand-primary: var(--color-content-interactive-inverse);
    --selected-color-content-positive-positive: var(--color-content-positive-secondary);
    --selected-color-content-positive-secondary: var(--color-content-positive-tertiary);
    --selected-color-text-primary: var(--color-text-interactive-primary);
    --selected-color-text-quaternary: var(--color-text-interactive-inverse);
    --selected-color-text-quinary: var(--color-text-interactive-selected-primary);
    --selected-color-text-secondary: var(--color-text-interactive-primary);
    --selected-color-text-senary: var(--color-text-interactive-inverse);
    --selected-color-text-tertiary: var(--color-text-interactive-selected-primary);
    --selected-color-text-brand-primary: var(--color-text-interactive-inverse);
    --selected-color-text-validation-primary: var(--color-text-interactive-inverse);
    /* number */
    --selected-border-weight-secondary: var(--border-weight-heavy);
    --selected-border-weight-primary: var(--border-weight-heaviest);
    --selected-border-weight-tertiary: var(--border-weight-heaviest);
    --selected-text-weight-tertiary: var(--text-weight-semibold);
    --selected-text-weight-primary: var(--text-weight-bold);
    --selected-text-weight-secondary: var(--text-weight-bold);
  }
  /* spotlight_action-menu */
  .spotlight_action-menu {
    --action-item-color-background-primary: var(--color-background-interactive-secondary); /* Used for action item default background */
    --action-item-color-background-destructive-primary: var(--color-background-interactive-critical-tertiary); /* Used for destructive action item background */
    --action-item-color-content-primary: var(--color-content-interactive-primary); /* Used for action item icon color */
    --action-item-color-content-destructive-primary: var(--color-content-interactive-tertiary); /* Used for destructive action item icon color */
    --action-item-color-text-primary: var(--color-text-interactive-primary); /* Used for action item label text */
    --action-item-color-text-destructive-primary: var(--color-text-interactive-critical); /* Used for destructive action item label text */
    --action-item-border-radius-border: var(--border-radius-sm); /* Used for action item corner rounding */
    --action-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for action item left/right padding */
    --action-item-space-edge-to-element-vertical-primary: var(--space-md); /* Used for action item top/bottom padding */
    --action-item-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between icon and text in action item */
    --action-item-text-line-height-primary: var(--text-line-height-label-base); /* Used for action item text line-height */
    --action-item-text-size-primary: var(--text-size-label-base); /* Used for action item text font-size */
    --action-item-text-weight-primary: var(--text-weight-medium); /* Used for action item text font-weight */
    --action-menu-edge-to-content-horizontal-primary: var(--space-xs); /* Used for menu container left/right padding */
    --action-menu-edge-to-content-vertical-primary: var(--space-xs); /* Used for menu container top/bottom padding */
    --action-menu-element-to-element-vertical-primary: var(--space-xs); /* Used for gap between action items */
  }
  /* spotlight_alert */
  .spotlight_alert {
    --alert-button-color-text-primary: var(--color-text-semantic-tertiary); /* Used for alert close button text color */
    --alert-color-background-primary: var(--color-background-semantic-secondary); /* Used for alert background */
    --alert-color-background-secondary: var(--color-background-primary); /* Used for alert secondary background variant */
    --alert-color-border-primary: var(--color-border-semantic-secondary); /* Used for alert border */
    --alert-color-border-secondary: var(--color-border-semantic-primary); /* Used for alert secondary border (left accent) */
    --alert-color-content-primary: var(--color-content-semantic-primary); /* Used for alert icon color */
    --alert-color-text-primary: var(--color-text-primary); /* Used for alert text content */
    --alert-featured-icon-color-background-primary: var(--color-background-semantic-secondary); /* Used for featured icon background */
    --alert-featured-icon-color-border-primary: var(--color-border-semantic-secondary); /* Used for featured icon border */
    --alert-featured-icon-color-content-color: var(--color-content-semantic-primary); /* Used for featured icon content color */
    /* number */
    --alert-border-radius-primary: var(--border-radius-sm); /* Used for alert corner rounding */
    --alert-border-weight-primary: var(--border-weight-default); /* Used for alert border thickness */
    --alert-border-weight-secondary: var(--border-weight-heavy); /* Used for alert left accent border thickness */
    --alert-space-edge-to-content-horizontal-primary: var(--space-sm); /* Used for alert left/right content padding */
    --alert-space-edge-to-content-vertical-primary: var(--space-sm); /* Used for alert top/bottom content padding */
    --alert-space-edge-to-element-horizontal-primary: var(--space-sm); /* Used for alert left/right element padding */
    --alert-space-edge-to-element-veritcal-primary: var(--space-sm); /* Used for alert top/bottom element padding */
    --alert-space-element-to-element-horizontal-secondary: var(--space-md); /* Used for gap between alert icon and content */
    --alert-space-element-to-element-horizontal-primary: var(--space-xl); /* Used for gap between alert content and close button */
    --alert-text-line-height-primary: var(--text-line-height-heading-xxs); /* Used for alert title line-height */
    --alert-text-line-height-secondary: var(--text-line-height-body-sm); /* Used for alert description line-height */
    --alert-text-size-secondary: var(--text-size-body-sm); /* Used for alert description font-size */
    --alert-text-size-primary: var(--text-size-heading-xxs); /* Used for alert title font-size */
    --alert-text-weight-secondary: var(--text-weight-regular); /* Used for alert description font-weight */
    --alert-text-weight-primary: var(--text-weight-bold); /* Used for alert title font-weight */
    --alert-icon-space-edge-to-element-vertical-primary: 3px; /* Used for alert icon top padding alignment */
    /* Snackbar tokens */
    --snackbar-size-width-primary: 605px; /* Used for snackbar maximum width */
    --snackbar-size-min-width-primary: 220px; /* Used for snackbar minimum width */
    --snackbar-z-index-primary: 9999; /* Used for snackbar stacking order */
    --snackbar-provider-space-element-to-element-vertical: 8px; /* Used for gap between stacked snackbars */
    --snackbar-wrapper-space-edge-vertical: 5px; /* Used for snackbar wrapper top/bottom margin */
    --snackbar-icon-wrapper-space-element-to-element-horizontal: 10px; /* Used for gap between snackbar icon and content */
    --snackbar-icon-wrapper-border-weight-primary: var(--border-weight-heavy); /* Used for snackbar left accent border thickness */
  }
  /* spotlight_avatar */
  .spotlight_avatar {
    --avatar-color-background-accent-primary: var(--color-background-brand-accent-primary); /* Used for primary accent avatar background */
    --avatar-color-background-accent-secondary: var(--color-background-brand-accent-secondary); /* Used for secondary accent avatar background */
    --avatar-color-background-brand-primary: var(--color-background-brand-primary); /* Used for primary brand avatar background */
    --avatar-color-background-brand-secondary: var(--color-background-brand-tertiary); /* Used for secondary brand avatar background */
    --avatar-color-background-neutral-primary: var(--color-background-neutral-primary); /* Used for primary neutral avatar background */
    --avatar-color-background-neutral-secondary: var(--color-background-neutral-secondary); /* Used for secondary neutral avatar background */
    --avatar-color-text-accent-primary: var(--color-text-brand-accent-secondary); /* Used for primary accent avatar text */
    --avatar-color-text-accent-secondary: var(--color-text-brand-accent-tertiary); /* Used for secondary accent avatar text */
    --avatar-color-text-brand-primary: var(--color-text-brand-secondary); /* Used for primary brand avatar text */
    --avatar-color-text-brand-secondary: var(--color-text-brand-tertiary); /* Used for secondary brand avatar text */
    --avatar-color-text-neutral-primary: var(--color-text-neutral-secondary); /* Used for primary neutral avatar text */
    --avatar-color-text-neutral-secondary: var(--color-text-neutral-tertiary); /* Used for secondary neutral avatar text */
    /* number */
    --avatar-size-primary: var(--size-element-xl); /* Used for extra small avatar size (32px) */
    --avatar-size-secondary: 40px; /* Used for small avatar size */
    --avatar-size-tertiary: 56px; /* Used for medium avatar size */
    --avatar-size-quaternary: 64px; /* Used for large avatar size */
    --avatar-text-line-height-primary: var(--text-line-height-label-xxs); /* Used for extra small avatar text line-height */
    --avatar-text-line-height-secondary: var(--text-line-height-label-sm); /* Used for small/medium avatar text line-height */
    --avatar-text-line-height-tertiary: var(--text-line-height-label-lg); /* Used for large avatar text line-height */
    --avatar-text-size-primary: var(--text-size-label-xxs); /* Used for extra small avatar font-size */
    --avatar-text-size-secondary: var(--text-size-label-sm); /* Used for small/medium avatar font-size */
    --avatar-text-size-tertiary: var(--text-size-label-lg); /* Used for large avatar font-size */
    --avatar-text-weight-primary: var(--text-weight-medium); /* Used for avatar text font-weight */
  }
  /* spotlight_badge */
  .spotlight_badge {
    /* spotlight_badge */
    --badge-color-background-disabled: var(--color-background-disabled); /* Used for disabled badge background */
    --badge-color-background-primary: var(--color-background-semantic-primary); /* Used for primary badge background */
    --badge-color-background-quaternary: hsl(0 0% 100% / 0); /* Used for transparent badge background */
    --badge-color-background-secondary: var(--color-background-semantic-secondary); /* Used for secondary badge background */
    --badge-color-background-tertiary: var(--color-background-primary); /* Used for tertiary badge background */
    --badge-color-border-disabled: var(--color-border-disabled); /* Used for disabled badge border */
    --badge-color-border-primary: var(--color-border-semantic-primary); /* Used for primary badge border */
    --badge-color-border-secondary: var(--color-border-semantic-secondary); /* Used for secondary badge border */
    --badge-color-border-tertiary: var(--color-border-primary); /* Used for tertiary badge border */
    --badge-color-text-alt: var(--color-text-secondary); /* Used for alternate badge text color */
    --badge-color-text-disabled: var(--color-text-disabled); /* Used for disabled badge text */
    --badge-color-text-primary: var(--color-text-semantic-secondary); /* Used for primary badge text */
    --badge-color-text-secondary: var(--color-text-semantic-primary); /* Used for secondary badge text */
    --badge-color-text-tertiary: var(--color-text-semantic-tertiary); /* Used for tertiary badge text */
    /* number */
    --badge-border-radius-primary: var(--border-radius-full); /* Used for badge corner rounding (full pill shape) */
    --badge-border-weight-primary: var(--border-weight-default); /* Used for badge border thickness */
    --badge-size-min-width-secondary: var(--size-element-xl); /* Used for small badge minimum width */
    --badge-size-min-width-primary: var(--size-element-3xl); /* Used for large badge minimum width */
    --badge-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for badge left/right padding (large) */
    --badge-space-edge-to-element-horizontal-secondary: var(--space-md); /* Used for badge left/right padding (small) */
    --badge-space-edge-to-element-vertical-secondary: var(--space-none); /* Used for badge top/bottom padding (small size) */
    --badge-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for badge top/bottom padding (large size) */
    --badge-text-line-height-primary: 14px; /* Used for small badge text line-height */
    --badge-text-line-height-secondary: 17px; /* Used for large badge text line-height */
    --badge-text-size-secondary: var(--text-size-label-xs); /* Used for small badge font-size */
    --badge-text-size-primary: var(--text-size-label-sm); /* Used for large badge font-size */
    --badge-text-weight-primary: var(--text-weight-semibold); /* Used for badge text font-weight */
  }
  /* spotlight_button */
  :root {
    /* mode */
    /* color */
    --button-color-background-primary: var(--color-background-brand-interactive-primary); /* Used for primary button background */
    --button-color-background-secondary: var(--color-background-brand-interactive-tertiary); /* Used for secondary button background */
    --button-color-background-destructive-primary: var(--color-background-critical-interactive-primary); /* Used for destructive primary button background */
    --button-color-background-destructive-secondary: var(--color-background-interactive-critical); /* Used for destructive secondary button background */
    --button-color-border-primary: var(--color-border-interactive-selected-primary); /* Used for button border */
    --button-color-border-destructive-primary: var(--color-border-interactive-critical); /* Used for destructive button border */
    --button-color-content-primary: var(--color-content-interactive-inverse); /* Used for primary button icon color */
    --button-color-content-secondary: var(--color-content-interactive-selected-secondary); /* Used for secondary button icon color */
    --button-color-content-destructive-primary: var(--color-content-interactive-inverse); /* Used for destructive primary button icon color */
    --button-color-content-destructive-secondary: var(--color-content-interactive-tertiary); /* Used for destructive secondary button icon color */
    --button-color-text-primary: var(--color-text-interactive-inverse); /* Used for primary button text */
    --button-color-text-secondary: var(--color-text-interactive-tertiary); /* Used for secondary button text */
    --button-color-text-destructive-primary: var(--color-text-interactive-inverse); /* Used for destructive primary button text */
    --button-color-text-destructive-secondary: var(--color-text-interactive-critical); /* Used for destructive secondary button text */
    /* number */
    --button-border-radius-tertiary: 6px; /* Used for extra small button corner rounding */
    --button-border-radius-secondary: var(--border-radius-sm); /* Used for small/medium button corner rounding */
    --button-border-radius-primary: 10px; /* Used for large button corner rounding */
    --button-border-weight-primary: var(--border-weight-default); /* Used for button border thickness */
    --button-icon-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for icon-only button left/right padding (small) */
    --button-icon-space-edge-to-element-horizontal-secondary: 10px; /* Used for icon-only button left/right padding (medium) */
    --button-icon-space-edge-to-element-horizontal-tertiary: var(--space-lg); /* Used for icon-only button left/right padding (large) */
    --button-icon-space-edge-to-element-vertical-primary: var(--space-md); /* Used for icon-only button top/bottom padding (small) */
    --button-icon-space-edge-to-element-vertical-secondary: 10px; /* Used for icon-only button top/bottom padding (medium) */
    --button-icon-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for icon-only button top/bottom padding (large) */
    --button-icon-space-edge-to-element-vertical-primary: var(--space-md); /* Used for icon-only button top/bottom padding (small) */
    --button-icon-space-edge-to-element-vertical-secondary: 10px; /* Used for icon-only button top/bottom padding (medium) */
    --button-icon-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for icon-only button top/bottom padding (large) */
    --button-size-icon-primary: var(--size-element-lg); /* Used for button icon size */
    --button-space-edge-to-element-horizontal-tertiary: var(--space-xs); /* Used for extra small button left/right padding */
    --button-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for small/medium button left/right padding */
    --button-space-edge-to-element-horizontal-secondary: var(--space-xl); /* Used for large button left/right padding */
    --button-space-edge-to-element-vertical-quaternary: var(--space-xs); /* Used for extra small button top/bottom padding */
    --button-space-edge-to-element-vertical-primary: var(--space-md); /* Used for small button top/bottom padding */
    --button-space-edge-to-element-vertical-secondary: 10px; /* Used for medium button top/bottom padding */
    --button-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for large button top/bottom padding */
    --button-space-element-to-element-horizontal-tertiary: var(--space-xxs); /* Used for gap between icon and text (extra small) */
    --button-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between icon and text (small) */
    --button-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for gap between icon and text (medium/large) */
    --button-text-line-height-tertiary: var(--text-line-height-label-xs); /* Used for extra small button text line-height */
    --button-text-line-height-primary: var(--text-line-height-label-sm); /* Used for small/medium button text line-height */
    --button-text-line-height-secondary: var(--text-line-height-label-base); /* Used for large button text line-height */
    --button-text-size-tertiary: var(--text-size-label-xs); /* Used for extra small button font-size */
    --button-text-size-primary: var(--text-size-label-sm); /* Used for small/medium button font-size */
    --button-text-size-secondary: var(--text-size-label-base); /* Used for large button font-size */
    --button-text-weight-primary: var(--text-weight-semibold); /* Used for button text font-weight */

    /* color */
    --splitbutton-color-background-primary: var(--color-background-brand-interactive-primary);
    --splitbutton-color-background-secondary: var(--color-background-brand-interactive-tertiary);
    --splitbutton-color-border-primary: var(--color-border-interactive-selected-primary);
    --splitbutton-color-content-primary: var(--color-content-interactive-inverse);
    --splitbutton-color-content-secondary: var(--color-content-interactive-selected-secondary);
    --splitbutton-color-text-primary: var(--color-text-interactive-inverse);
    --splitbutton-color-text-secondary: var(--color-text-interactive-tertiary);
    /* number */
    --splitbutton-border-radius-tertiary: 0.375rem;
    --splitbutton-border-radius-secondary: var(--border-radius-sm);
    --splitbutton-border-radius-primary: 0.625rem;
    --splitbutton-border-weight-primary: var(--border-weight-default);
    --splitbutton-icon-space-edge-to-element-horizontal-primary: var(--space-md);
    --splitbutton-icon-space-edge-to-element-horizontal-secondary: 0.625rem;
    --splitbutton-icon-space-edge-to-element-horizontal-tertiary: var(--space-lg);
    --splitbutton-select-option-space-element-to-element-vertical-primary: var(--space-xxs);
    --splitbutton-size-icon-primary: var(--size-element-lg);
    --splitbutton-space-edge-to-element-horizontal-primary: var(--space-sm);
    --splitbutton-space-edge-to-element-horizontal-secondary: var(--space-md);
    --splitbutton-space-edge-to-element-horizontal-tertiary: 0.625rem;
    --splitbutton-space-edge-to-element-horizontal-quartenary: var(--space-lg);
    --splitbutton-space-edge-to-element-horizontal-quintenary: var(--space-xl);
    --splitbutton-space-edge-to-element-vertical-primary: var(--space-xs);
    --splitbutton-space-edge-to-element-vertical-secondary: var(--space-sm);
    --splitbutton-space-edge-to-element-vertical-tertiary: var(--space-md);
    --splitbutton-space-edge-to-element-vertical-quartenary: 0.625rem;
    --splitbutton-space-edge-to-element-vertical-quintenary: var(--space-lg);
    --splitbutton-space-element-to-element-horizontal-tertiary: var(--space-xxs);
    --splitbutton-space-element-to-element-horizontal-primary: var(--space-xs);
    --splitbutton-space-element-to-element-horizontal-secondary: var(--space-sm);
    --splitbutton-text-line-height-tertiary: var(--text-line-height-label-xs);
    --splitbutton-text-line-height-primary: var(--text-line-height-label-sm);
    --splitbutton-text-line-height-secondary: var(--text-line-height-label-base);
    --splitbutton-text-size-tertiary: var(--text-size-label-xs);
    --splitbutton-text-size-primary: var(--text-size-label-sm);
    --splitbutton-text-size-secondary: var(--text-size-label-base);
    --splitbutton-text-weight-primary: var(--text-weight-semi-bold);
  }
  /* spotlight_button */
  .spotlight_button {
    /* mode */
    /* color */
    --button-color-background-primary: var(--color-background-brand-interactive-primary); /* Used for primary button background */
    --button-color-background-secondary: var(--color-background-brand-interactive-tertiary); /* Used for secondary button background */
    --button-color-background-destructive-primary: var(--color-background-critical-interactive-primary); /* Used for destructive primary button background */
    --button-color-background-destructive-secondary: var(--color-background-interactive-critical); /* Used for destructive secondary button background */
    --button-color-border-primary: var(--color-border-interactive-selected-primary); /* Used for button border */
    --button-color-border-destructive-primary: var(--color-border-interactive-critical); /* Used for destructive button border */
    --button-color-content-primary: var(--color-content-interactive-inverse); /* Used for primary button icon color */
    --button-color-content-secondary: var(--color-content-interactive-selected-secondary); /* Used for secondary button icon color */
    --button-color-content-destructive-primary: var(--color-content-interactive-inverse); /* Used for destructive primary button icon color */
    --button-color-content-destructive-secondary: var(--color-content-interactive-tertiary); /* Used for destructive secondary button icon color */
    --button-color-text-primary: var(--color-text-interactive-inverse); /* Used for primary button text */
    --button-color-text-secondary: var(--color-text-interactive-tertiary); /* Used for secondary button text */
    --button-color-text-destructive-primary: var(--color-text-interactive-inverse); /* Used for destructive primary button text */
    --button-color-text-destructive-secondary: var(--color-text-interactive-critical); /* Used for destructive secondary button text */
    /* number */
    --button-border-radius-tertiary: 6px; /* Used for extra small button corner rounding */
    --button-border-radius-secondary: var(--border-radius-sm); /* Used for small/medium button corner rounding */
    --button-border-radius-primary: 10px; /* Used for large button corner rounding */
    --button-border-weight-primary: var(--border-weight-heaviest); /* Used for button border thickness */
    --button-icon-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for icon-only button left/right padding (small) */
    --button-icon-space-edge-to-element-horizontal-secondary: 10px; /* Used for icon-only button left/right padding (medium) */
    --button-icon-space-edge-to-element-horizontal-tertiary: var(--space-lg); /* Used for icon-only button left/right padding (large) */
    --button-icon-space-edge-to-element-vertical-primary: var(--space-md); /* Used for icon-only button top/bottom padding (small) */
    --button-icon-space-edge-to-element-vertical-secondary: 10px; /* Used for icon-only button top/bottom padding (medium) */
    --button-icon-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for icon-only button top/bottom padding (large) */
    --button-icon-space-edge-to-element-vertical-primary: var(--space-md); /* Used for icon-only button top/bottom padding (small) */
    --button-icon-space-edge-to-element-vertical-secondary: 10px; /* Used for icon-only button top/bottom padding (medium) */
    --button-icon-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for icon-only button top/bottom padding (large) */
    --button-size-icon-primary: var(--size-element-lg); /* Used for button icon size */
    --button-space-edge-to-element-horizontal-tertiary: var(--space-xs); /* Used for extra small button left/right padding */
    --button-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for small/medium button left/right padding */
    --button-space-edge-to-element-horizontal-secondary: var(--space-xl); /* Used for large button left/right padding */
    --button-space-edge-to-element-vertical-quaternary: var(--space-xs); /* Used for extra small button top/bottom padding */
    --button-space-edge-to-element-vertical-primary: var(--space-md); /* Used for small button top/bottom padding */
    --button-space-edge-to-element-vertical-secondary: 10px; /* Used for medium button top/bottom padding */
    --button-space-edge-to-element-vertical-tertiary: var(--space-lg); /* Used for large button top/bottom padding */
    --button-space-element-to-element-horizontal-tertiary: var(--space-xxs); /* Used for gap between icon and text (extra small) */
    --button-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between icon and text (small) */
    --button-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for gap between icon and text (medium/large) */
    --button-text-line-height-tertiary: var(--text-line-height-label-xs); /* Used for extra small button text line-height */
    --button-text-line-height-primary: var(--text-line-height-label-sm); /* Used for small/medium button text line-height */
    --button-text-line-height-secondary: var(--text-line-height-label-base); /* Used for large button text line-height */
    --button-text-size-tertiary: var(--text-size-label-xs); /* Used for extra small button font-size */
    --button-text-size-primary: var(--text-size-label-sm); /* Used for small/medium button font-size */
    --button-text-size-secondary: var(--text-size-label-base); /* Used for large button font-size */
    --button-text-weight-primary: var(--text-weight-semibold); /* Used for button text font-weight */

    /* color */
    --splitbutton-color-background-primary: var(--color-background-brand-interactive-primary);
    --splitbutton-color-background-secondary: var(--color-background-brand-interactive-tertiary);
    --splitbutton-color-border-primary: var(--color-border-interactive-selected-primary);
    --splitbutton-color-content-primary: var(--color-content-interactive-inverse);
    --splitbutton-color-content-secondary: var(--color-content-interactive-selected-secondary);
    --splitbutton-color-text-primary: var(--color-text-interactive-inverse);
    --splitbutton-color-text-secondary: var(--color-text-interactive-tertiary);
    /* number */
    --splitbutton-border-radius-tertiary: 0.375rem;
    --splitbutton-border-radius-secondary: var(--border-radius-sm);
    --splitbutton-border-radius-primary: 0.625rem;
    --splitbutton-border-weight-primary: var(--border-weight-default);
    --splitbutton-icon-space-edge-to-element-horizontal-primary: var(--space-md);
    --splitbutton-icon-space-edge-to-element-horizontal-secondary: 0.625rem;
    --splitbutton-icon-space-edge-to-element-horizontal-tertiary: var(--space-lg);
    --splitbutton-select-option-space-element-to-element-vertical-primary: var(--space-xxs);
    --splitbutton-size-icon-primary: var(--size-element-lg);
    --splitbutton-space-edge-to-element-horizontal-primary: var(--space-sm);
    --splitbutton-space-edge-to-element-horizontal-secondary: var(--space-md);
    --splitbutton-space-edge-to-element-horizontal-tertiary: 0.625rem;
    --splitbutton-space-edge-to-element-horizontal-quartenary: var(--space-lg);
    --splitbutton-space-edge-to-element-horizontal-quintenary: var(--space-xl);
    --splitbutton-space-edge-to-element-vertical-primary: var(--space-xs);
    --splitbutton-space-edge-to-element-vertical-secondary: var(--space-sm);
    --splitbutton-space-edge-to-element-vertical-tertiary: var(--space-md);
    --splitbutton-space-edge-to-element-vertical-quartenary: 0.625rem;
    --splitbutton-space-edge-to-element-vertical-quintenary: var(--space-lg);
    --splitbutton-space-element-to-element-horizontal-tertiary: var(--space-xxs);
    --splitbutton-space-element-to-element-horizontal-primary: var(--space-xs);
    --splitbutton-space-element-to-element-horizontal-secondary: var(--space-sm);
    --splitbutton-text-line-height-tertiary: var(--text-line-height-label-xs);
    --splitbutton-text-line-height-primary: var(--text-line-height-label-sm);
    --splitbutton-text-line-height-secondary: var(--text-line-height-label-base);
    --splitbutton-text-size-tertiary: var(--text-size-label-xs);
    --splitbutton-text-size-primary: var(--text-size-label-sm);
    --splitbutton-text-size-secondary: var(--text-size-label-base);
    --splitbutton-text-weight-primary: var(--text-weight-semi-bold);
  }
  /* spotlight_chip */
  .spotlight_chip {
    /* spotlight_chip */
    --chip-badge-color-background-primary: var(--selected-color-background-badge-primary); /* Used for chip badge background */
    --chip-badge-color-text-primary: var(--selected-color-text-quaternary); /* Used for chip badge text */
    --chip-color-background-primary: var(--selected-color-background-secondary); /* Used for chip background */
    --chip-color-border-primary: var(--selected-color-border-secondary); /* Used for chip border */
    --chip-color-content-primary: var(--selected-color-content-primary); /* Used for chip icon color */
    --chip-color-text-primary: var(--selected-color-text-tertiary); /* Used for chip text */
    /* number */
    --chip-badge-size-height-secondary: var(--size-element-xs); /* Used for small chip badge height */
    --chip-badge-size-height-primary: var(--size-element-sm); /* Used for large chip badge height */
    --chip-badge-size-width-secondary: var(--size-element-xs); /* Used for small chip badge width */
    --chip-badge-size-width-primary: var(--size-element-sm); /* Used for large chip badge width */
    --chip-border-radius-primary: var(--border-radius-full); /* Used for chip corner rounding (full pill shape) */
    --chip-border-weight-primary: var(--border-weight-default); /* Used for chip border thickness */
    --chip-label-space-edge-to-element-horizontal-primary: var(--space-xs); /* Used for chip label left/right padding (small) */
    --chip-label-space-edge-to-element-horizontal-secondary: var(--space-sm); /* Used for chip label left/right padding (medium) */
    --chip-label-text-line-height-primary: 20px; /* Used for chip label text line-height */
    --chip-label-text-size-secondary: var(--text-size-label-xs); /* Used for small chip label font-size */
    --chip-label-text-size-primary: var(--text-size-label-sm); /* Used for medium chip label font-size */
    --chip-label-text-weight-primary: var(--selected-text-weight-primary); /* Used for selected chip label font-weight */
    --chip-label-text-weight-secondary: var(--text-weight-medium); /* Used for unselected chip label font-weight */
    --chip-space-edge-to-element-horizontal-tertiary: var(--space-xs); /* Used for extra small chip left/right padding */
    --chip-space-edge-to-element-horizontal-secondary: var(--space-sm); /* Used for small chip left/right padding */
    --chip-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for medium chip left/right padding */
    --chip-space-edge-to-element-vertical-secondary: var(--space-xxs); /* Used for small chip top/bottom padding */
    --chip-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for medium chip top/bottom padding */
    --chip-space-element-to-element-horizontal-primary: var(--space-none); /* Used for gap between chip elements */
    --chip-start-adornment-size-width-primary: 0px; /* Used for chip start adornment width */
    /* Chip dimensions and spacing */
    --chip-gap-sm: 5px; /* Used for small gap between chip elements */
    --chip-gap-md: 10px; /* Used for medium gap between chip elements */
    --chip-icon-size-sm: 8px; /* Used for small chip icon size */
    --chip-icon-size-md: 16px; /* Used for medium chip icon size */
    --chip-text-size-sm: 10px; /* Used for small chip text size */
    --chip-text-size-md: 16px; /* Used for medium chip text size */
    --chip-group-number: 0rem; /* Used for chip group numbering */
  }
  /* spotlight_container */
  .spotlight_container {
    /* spotlight_container */
    --container-color-background-primary: var(--color-background-primary); /* Used for primary container background */
    --container-color-background-secondary: var(--color-background-brand-secondary); /* Used for secondary brand container background */
    --container-color-background-tertiary: var(--color-background-secondary); /* Used for tertiary container background */
    --container-color-background-interactive-primary: var(--color-background-interactive-secondary); /* Used for interactive container background */
    --container-color-background-interactive-selectable-primary: var(--selected-color-background-secondary); /* Used for selectable interactive container background */
    --container-color-border-primary: var(--color-border-primary); /* Used for container border */
    --container-color-border-interactive-primary: var(--selected-color-border-secondary); /* Used for interactive container border */
    --container-color-background-scrim: rgba(0, 0, 0, 0.4); /* Used for container overlay scrim background */
    --container-header-color-text-primary: var(--color-text-primary); /* Used for container header text */
    --container-popover-color-background-primary: var(--color-background-primary); /* Used for popover container background */
    --container-popover-color-border-primary: var(--color-border-primary); /* Used for popover container border */
    /* number */
    --container-border-radius-secondary: var(--border-radius-sm); /* Used for small container corner rounding */
    --container-border-radius-primary: var(--border-radius-md); /* Used for medium container corner rounding */
    --container-border-radius-responsive-primary: var(--responsive-border-radius-primary); /* Used for responsive container corner rounding */
    --container-border-weight-primary: var(--border-weight-default); /* Used for container border thickness */
    --container-header-space-element-to-element-horizontal-secondary: var(--space-xs); /* Used for small gap between header elements */
    --container-header-space-element-to-element-horizontal-primary: var(--space-xl); /* Used for large gap between header elements */
    --container-header-text-line-height-primary: var(--text-line-height-heading-xxs); /* Used for container header title line-height */
    --container-header-text-line-height-secondary: var(--text-line-height-label-sm); /* Used for container header subtitle line-height */
    --container-header-text-size-secondary: var(--text-size-label-sm); /* Used for container header subtitle font-size */
    --container-header-text-size-primary: var(--text-size-heading-xxs); /* Used for container header title font-size */
    --container-header-text-weight-primary: var(--text-weight-medium); /* Used for container header text font-weight */
    --container-popover-arrow-size-height: var(--size-element-xs); /* Used for popover arrow height */
    --container-popover-arrow-size-width: var(--size-element-2xl); /* Used for popover arrow width */
    --container-popover-arrow-space-edge-to-element-horizontal-secondary: var(--space-none); /* Used for popover arrow horizontal offset (centered) */
    --container-popover-arrow-space-edge-to-element-horizontal-primary: var(--space-xl); /* Used for popover arrow horizontal offset */
    --container-popover-arrow-space-edge-to-element-vertical-secondary: var(--space-none); /* Used for popover arrow vertical offset (centered) */
    --container-popover-arrow-space-edge-to-element-vertical-primary: var(--space-xl); /* Used for popover arrow vertical offset */
    --container-popover-border-radius-primary: var(--border-radius-md); /* Used for popover corner rounding */
    --container-popover-border-weight-primary: var(--border-weight-default); /* Used for popover border thickness */
    --container-popover-space-edge-to-content-horizontal-secondary: var(--space-lg); /* Used for popover left/right content padding (small) */
    --container-popover-space-edge-to-content-horizontal-primary: var(--space-xl); /* Used for popover left/right content padding (large) */
    --container-popover-space-edge-to-content-vertical-secondary: var(--space-lg); /* Used for popover top/bottom content padding (small) */
    --container-popover-space-edge-to-content-vertical-primary: var(--space-xl); /* Used for popover top/bottom content padding (large) */
    --container-space-edge-to-content-horizontal-primary: var(--space-lg); /* Used for container left/right content padding (small) */
    --container-space-edge-to-content-horizontal-tertiary: var(--space-xl); /* Used for container left/right content padding (medium) */
    --container-space-edge-to-content-horizontal-secondary: var(--space-3xl); /* Used for container left/right content padding (large) */
    --container-space-edge-to-content-vertical-quinary: var(--responsive-space-edge-to-content-vertical-quinary); /* Used for responsive extra small container top/bottom padding */
    --container-space-edge-to-content-vertical-quaternary: var(--responsive-space-edge-to-content-vertical-quaternary); /* Used for responsive small container top/bottom padding */
    --container-space-edge-to-content-vertical-primary: var(--responsive-space-edge-to-content-vertical-primary); /* Used for responsive medium container top/bottom padding */
    --container-space-edge-to-content-vertical-secondary: var(--responsive-space-edge-to-content-vertical-secondary); /* Used for responsive large container top/bottom padding */
    --container-space-edge-to-content-vertical-tertiary: var(--responsive-space-edge-to-content-vertical-tertiary); /* Used for responsive extra large container top/bottom padding */
    --container-space-element-to-element-vertical-secondary: 10px; /* Used for small vertical gap between container elements */
    --container-space-element-to-element-vertical-primary: var(--space-xl); /* Used for large vertical gap between container elements */
    --scrim: rgba(13, 16, 20, 0.3);
    /* Drawer widths */
    --drawer-size-width-sm: 350px; /* Used for small drawer width */
    --drawer-size-width-md: 450px; /* Used for medium drawer width */
    --drawer-size-width-lg: 650px; /* Used for large drawer width */
    --drawer-border-radius-primary: var(--border-radius-md);
    /* Tile border widths */
    --tile-border-weight-primary: 1px; /* Used for primary tile border thickness */
    --tile-border-weight-secondary: 2px; /* Used for secondary tile border thickness */
    --tile-border-weight-tertiary: 3px; /* Used for tertiary tile border thickness */
    --tile-outline-width: 2px; /* Used for tile outline width */
    --tile-outline-offset: 2px; /* Used for tile outline offset */
  }
  /*---- Responsive container token definitions -----*/
  .spotlight_container-mobile {
    --container-header-space-element-to-element-horizontal-primary: var(--space-xl);
    --container-space-edge-to-content-horizontal-primary: var(--space-lg);
    --container-space-edge-to-content-horizontal-secondary: var(--space-3xl);
    --container-space-edge-to-content-vertical-primary: var(--space-lg);
    --container-space-edge-to-content-vertical-secondary: var(--space-2xl);
    --container-space-edge-to-content-vertical-tertiary: var(--space-3xl);
    --container-space-element-to-element-vertical-primary: var(--space-xl);
    --drawer-border-radius-primary: var(--border-radius-none);
  }
  /*------- HEADER STYLES ---------*/
  .spotlight_featured-section-title {
    display: flex;
    gap: var(--space-xl);
    color: var(--color-text-primary);
    align-items: center;
  }
  .spotlight_field-error-message {
    display: flex;
    align-self: stretch;
    align-items: center;
    gap: var(--space-xxs);
    color: var(--color-text-critical-tertiary);
    font-family: var(--text-font-san-serif, Inter);
    font-size: var(--field-error-message-text-size-primary);
    font-style: normal;
    font-weight: var(--field-error-message-text-weight-primary);
    line-height: var(--field-error-message-text-line-height-primary);
  }
  /* featured icon */
  .spotlight_featured-icon {
    /* Mode 1 */
    /* number */
    --featured-icon-space-edge-to-element-secondary: var(--space-sm); /* Used for small featured icon padding */
    --featured-icon-space-edge-to-element-tertiary: var(--space-md); /* Used for medium featured icon padding */
    --featured-icon-space-edge-to-element-primary: var(--space-lg); /* Used for large featured icon padding */
  }
  /* spotlioght_table */
  :root {
    /* color */
    --table-body-color-background-primary: var(--color-background-interactive-tertiary); /* Used for table body primary background */
    --table-body-color-background-secondary: var(--color-background-interactive-quinary); /* Used for table body secondary background */
    --table-header-color-background-primary: var(--color-background-secondary); /* Used for table header background */
    --table-header-color-background-hover: rgba(249, 249, 251, 0.8); /* Used for table header hover background */
    --table-row-color-background-hover: rgba(249, 249, 251, 0.5); /* Used for table row hover background */
    --table-row-color-background-striped-hover: rgba(249, 249, 251, 0.7); /* Used for striped table row hover background */
    --table-header-color-content-primary: var(--color-content-primary); /* Used for table header icon color */
    --table-header-color-text-primary: var(--color-text-primary); /* Used for table header text */
    --table-color-border-primary: var(--color-border-primary); /* Used for table border */
    --table-color-background-primary: var(--color-background-primary); /* Used for table background */
    --table-color-text-primary: var(--color-text-primary); /* Used for table body text */
    --table-color-text-secondary: var(--color-text-secondary); /* Used for table secondary text */
    --table-color-background-secondary: var(--color-background-secondary); /* Used for table secondary background */
    --table-color-border-brand-primary: var(--color-border-brand-primary); /* Used for table focus border */
    --table-color-background-interactive-quinary: var(--color-background-interactive-quinary); /* Used for table interactive background */
    --table-sorticon-color-background-hover: rgba(0, 0, 0, 0.04); /* Used for sort icon hover background */
    /* number */
    --table-body-space-edge-to-element-horizontal-secondary: var(--space-xl); /* Used for table body cell left/right padding (small) */
    --table-body-space-edge-to-element-horizontal-primary: var(--space-3xl); /* Used for table body cell left/right padding (large) */
    --table-body-space-edge-to-element-vertical-secondary: var(--space-sm); /* Used for table body cell top/bottom padding (small) */
    --table-body-space-edge-to-element-vertical-primary: var(--space-xl); /* Used for table body cell top/bottom padding (large) */
    --table-header-space-edge-to-element-horizontal-secondary: var(--space-lg); /* Used for table header cell left/right padding (small) */
    --table-header-space-edge-to-element-horizontal-primary: var(--space-3xl); /* Used for table header cell left/right padding (large) */
    --table-header-space-edge-to-element-vertical-secondary: var(--space-xs); /* Used for table header cell top/bottom padding (small) */
    --table-header-space-edge-to-element-vertical-primary: var(--space-md); /* Used for table header cell top/bottom padding (large) */
    --table-border-weight-primary: var(--border-weight-default); /* Used for table border thickness */
    --table-space-border-radius-primary: var(--border-radius-sm); /* Used for table corner rounding */
    /* dimensions */
    --table-header-row-height: 50px; /* Used for table header row height */
    --table-body-row-min-height: 88px; /* Used for table body row minimum height */
    --table-pagination-container-height: 48px; /* Used for table pagination container height */
    --table-text-line-height-primary: 20px; /* Used for table primary text line-height */
    --table-text-line-height-secondary: 24px; /* Used for table secondary text line-height */
    /* spacing */
    --table-container-gap: var(--space-lg); /* Used for gap between table container elements */
    --table-filter-margin-bottom: var(--space-xl); /* Used for table filter bottom margin */
    --table-header-content-gap: var(--space-xs); /* Used for gap between header content elements */
    --table-pagination-gap: var(--space-lg); /* Used for pagination element gap */
    --table-padding-xs: var(--space-xs); /* Used for extra small table padding */
    --table-padding-sm: var(--space-sm); /* Used for small table padding */
    --table-padding-md: var(--space-md); /* Used for medium table padding */
    --table-padding-lg: var(--space-lg); /* Used for large table padding */
    --table-padding-xl: var(--space-xl); /* Used for extra large table padding */
    --table-padding-2xl: var(--space-2xl); /* Used for 2x extra large table padding */
    --table-padding-3xl: var(--space-3xl); /* Used for 3x extra large table padding */
    /* filter/search input */
    --table-search-min-width-lg: 250px; /* Used for large table search input minimum width */
    --table-search-min-width-md: 200px; /* Used for medium table search input minimum width */
    --table-search-min-width-sm: 150px; /* Used for small table search input minimum width */
    /* scrollbar */
    --table-scrollbar-width: 8px; /* Used for table scrollbar width */
    --table-scrollbar-height: 8px; /* Used for table scrollbar height */
    /* opacity */
    --table-unsorted-icon-opacity: 0.3; /* Used for unsorted column icon opacity */
    /* transitions */
    --table-transition-all: all 0.2s ease-in-out; /* Used for table all-property transitions */
    --table-transition-background: background-color 0.2s ease-in-out; /* Used for table background transitions */
    /* shadows */
    --table-box-shadow: var(--shadow-sm); /* Used for table box shadow */
    --table-focus-box-shadow: 0 0 0 1px var(--color-border-brand-primary); /* Used for table focus outline shadow */
    /* z-index */
    --table-header-z-index: 1; /* Used for table header stacking order */
    /* border radius */
    --table-sort-icon-border-radius: 360px; /* Used for sort icon border radius (circular) */
  }
  /* spotlight_input */
  .spotlight_input {
    /* spotlight_input */
    /* spotlight_input */
    --control-color-background-primary: var(--selected-color-background-quaternary); /* Used for checkbox/radio/switch control background */
    --control-color-background-secondary: var(--selected-color-background-tertiary); /* Used for checkbox/radio/switch secondary background */
    --control-color-background-read-only-primary: var(--color-background-secondary); /* Used for read-only control background */
    --control-color-border-primary: var(--selected-color-border-primary); /* Used for checkbox/radio/switch border */
    --control-color-border-read-only-primary: var(--color-border-primary); /* Used for read-only control border */
    --control-color-content-primary: var(--selected-color-content-quaternary); /* Used for checkbox/radio/switch icon color */
    --control-color-content-secondary: var(--selected-color-content-secondary); /* Used for checkbox/radio/switch secondary icon color */
    --control-color-content-read-only-primary: var(--color-content-disabled); /* Used for read-only control icon color */
    --control-color-content-read-only-secondary: var(--selected-color-content-tertiary); /* Used for read-only control secondary icon color */
    --control-label-color-primary: var(--color-text-interactive-primary); /* Used for checkbox/radio/switch label text */
    --date-picker-control-color-background-primary: var(--selected-color-background-validation-primary); /* Used for date picker calendar cell background */
    --date-picker-control-color-background-secondary: var(--selected-color-background-validation-secondary); /* Used for date picker calendar cell secondary background */
    --date-picker-control-color-text-primary: var(--selected-color-text-validation-primary); /* Used for date picker calendar cell text */
    --date-picker-control-color-text-secondary: var(--validation-color-text-tertiary); /* Used for date picker calendar cell secondary text */
    --date-picker-drawer-pagination-control-color-border-primary: var(--color-border-interactive-tertiary); /* Used for date picker pagination control border */
    --field-error-message-color-content-primary: var(--color-content-interactive-tertiary); /* Used for field error message icon color */
    --field-error-message-color-text-primary: var(--color-text-critical-tertiary); /* Used for field error message text */
    --field-footnote-color-text-primary: var(--color-text-secondary); /* Used for field footnote text */
    --field-footnote-color-text-secondary: var(--validation-color-text-secondary); /* Used for field footnote secondary text */
    --field-label-color-text-primary: var(--color-text-secondary); /* Used for field label text */
    --field-tooltip-color-background-primary: var(--color-background-interactive-primary); /* Used for field tooltip background */
    --field-tooltip-color-border-primary: var(--color-border-interactive-primary); /* Used for field tooltip border */
    --field-tooltip-color-text-primary: var(--color-text-interactive-inverse); /* Used for field tooltip text */
    --field-tooltip-control-color-background-primary: var(--color-background-interactive-secondary); /* Used for field tooltip trigger background */
    --field-tooltip-control-color-content-primary: var(--color-content-semantic-primary); /* Used for field tooltip trigger icon color */
    --input-color-background-primary: var(--color-background-interactive-tertiary); /* Used for input field background */
    --input-color-background-quaternary: var(--selected-color-background-tertiary); /* Used for input field quaternary background */
    --input-color-background-secondary: var(--color-background-interactive-tertiary); /* Used for input field secondary background */
    --input-color-background-tertiary: var(--selected-color-background-secondary); /* Used for input field tertiary background */
    --input-color-background-read-only-primary: hsl(0 0% 100% / 0); /* Used for read-only input transparent background */
    --input-color-background-read-only-secondary: var(--color-background-secondary); /* Used for read-only input secondary background */
    --input-color-border-primary: var(--validation-color-border-primary); /* Used for input field border */
    --input-color-border-secondary: var(--color-border-primary); /* Used for input field secondary border */
    --input-color-border-read-only-primary: var(--color-border-primary); /* Used for read-only input border */
    --input-color-content-primary: var(--color-content-interactive-primary); /* Used for input field icon color */
    --input-color-content-read-only-primary: var(--color-content-primary); /* Used for read-only input icon color */
    --input-color-text-primary: var(--color-text-interactive-primary); /* Used for input field text */
    --input-color-text-read-only-primary: var(--color-text-primary); /* Used for read-only input text */
    --input-select-option-color-background-primary: var(--selected-color-background-secondary); /* Used for select option background */
    --input-select-option-color-background-secondary: var(--color-background-interactive-secondary); /* Used for select option hover background */
    --input-select-option-color-content-primary: var(--selected-color-content-tertiary); /* Used for select option icon color */
    --input-select-option-color-text-primary: var(--selected-color-text-primary); /* Used for select option text */
    /* number */
    --control-border-radius: var(--border-radius-xs); /* Used for checkbox/radio/switch corner rounding */
    --control-label-text-line-height-primary: var(--text-line-height-label-base); /* Used for control label line-height */
    --control-label-text-size-primary: var(--text-size-label-base); /* Used for control label font-size */
    --control-label-text-weight-primary: var(--text-weight-regular); /* Used for control label font-weight */
    --control-size-primary: var(--size-element-sm); /* Used for small checkbox/radio size (16px) */
    --control-size-secondary: var(--size-element-lg); /* Used for large checkbox/radio size (20px) */
    --control-space-edge-to-element-horizontal-primary: var(--space-xxs); /* Used for checkbox/radio inner horizontal padding */
    --control-space-edge-to-element-horizontal-secondary: 3px; /* Used for checkbox/radio inner horizontal padding (variant) */
    --control-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for checkbox/radio inner vertical padding */
    --control-space-edge-to-element-vertical-secondary: 3px; /* Used for checkbox/radio inner vertical padding (variant) */
    --control-space-edge-to-element-vertical-tertiary: var(--space-xs); /* Checkbox vertical margin for alignment */
    --control-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between control groups */
    --control-space-element-to-element-horizontal-secondary: var(--space-xl); /* Used for large gap between control groups */
    --control-space-element-to-element-primary: var(--space-md); /* Checkbox/Radio gap between control and label */
    --control-space-element-to-element-secondary: var(--space-sm); /* Switch gap between control and label */
    --control-transition-duration-primary: 200ms; /* Control state transition duration (checkbox, switch, radio) */
    --control-icon-size-primary: var(--size-element-xs); /* Checkbox/Radio icon size small (12px) */
    --control-icon-size-secondary: 14px; /* Checkbox icon size medium */
    --control-icon-stroke-width-primary: 3px; /* Checkbox checkmark stroke width */
    --control-focus-outline-offset-primary: var(--space-xxs); /* Focus outline offset for controls */
    --control-footnote-space-edge-to-element-horizontal-primary: var(--space-3xl); /* Checkbox footnote left indent */
    --control-opacity-disabled: 0.5; /* Disabled state opacity */
    /* Switch tokens */
    --switch-size-width-sm: 34px; /* Switch toggle width small */
    --switch-size-width-md: 44px; /* Switch toggle width medium */
    --switch-size-height-sm: var(--size-element-lg); /* Switch toggle height small (20px) */
    --switch-size-height-md: var(--space-3xl); /* Switch toggle height medium (24px) */
    --switch-thumb-size-sm: var(--control-size-primary); /* Switch thumb size small (16px) */
    --switch-thumb-size-md: var(--control-size-secondary); /* Switch thumb size medium (20px) */
    --switch-border-radius-md: var(--border-radius-md); /* Switch toggle border radius medium (12px) */
    --switch-border-radius-sm: var(--border-radius-circle); /* Switch toggle border radius small (fully rounded) */
    --switch-thumb-border-radius: var(--border-radius-full); /* Switch thumb border radius (fully circular) */
    --switch-space-edge-to-element-vertical-primary: 1px; /* Switch thumb vertical padding */
    --switch-space-edge-to-element-horizontal-primary: var(--space-xxs); /* Switch thumb right padding (2px) */
    --switch-space-edge-to-element-horizontal-secondary: var(--space-xs); /* Switch thumb left padding (4px) */
    --date-picker-control-border-radius-secondary: 0px; /* Used for date picker calendar cell border radius (none) */
    --date-picker-control-border-radius-primary: var(--border-radius-full); /* Used for date picker calendar cell border radius (full) */
    --date-picker-control-size-height-primary: 40px; /* Used for date picker calendar cell height */
    --date-picker-control-size-width-primary: 40px; /* Used for date picker calendar cell width */
    --date-picker-control-size-width-secondary: 40px; /* Used for date picker calendar cell secondary width */
    --date-picker-control-space-edge-to-element-horizontal-primary: 2px; /* Used for date picker calendar cell horizontal padding */
    --date-picker-control-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for date picker calendar cell vertical padding */
    --date-picker-control-text-line-height-primary: var(--text-size-body-sm); /* Used for date picker calendar cell text line-height */
    --date-picker-control-text-size-primary: 14px; /* Used for date picker calendar cell font-size */
    --date-picker-control-text-weight-primary: var(--selected-text-weight-tertiary); /* Used for date picker calendar cell font-weight */
    --date-picker-drawer-month-select-option-border-radius-primary: var(--border-radius-xs); /* Used for month picker option corner rounding */
    --date-picker-drawer-month-select-option-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for month picker option vertical padding */
    --date-picker-drawer-pagination-control-border-radius-primary: var(--border-radius-full); /* Used for date picker pagination button corner rounding */
    --date-picker-drawer-space-element-to-element-vertical-primary: var(--space-lg); /* Used for date picker drawer vertical gap */
    /* Calendar tokens */
    --calendar-cell-gap: 10px; /* Used for gap between calendar cells */
    --calendar-icon-size-sm: 18px; /* Used for small calendar icon size */
    --calendar-icon-size-md: 26px; /* Used for medium calendar icon size */
    /* Popover tokens */
    --date-picker-popover-width: 320px; /* Used for date picker popover width */
    --date-picker-control-background-color-primary: var(--selected-color-background-secondary); /* Used for date picker selected date background */
    /* Month/Year picker tokens */
    --month-year-picker-gap: 18px; /* Used for gap between month and year picker */
    --month-picker-height: 24px; /* Used for month picker height */
    --month-picker-gap-sm: 3px; /* Used for small month picker gap */
    --month-picker-padding-sm: 3px; /* Used for small month picker padding */
    --month-picker-border-weight: 1px; /* Used for month picker border thickness */
    --month-picker-width: 77px; /* Used for month picker width */
    --year-picker-height: 24px; /* Used for year picker height */
    --year-picker-icon-height: 18px; /* Used for year picker icon height */
    --year-picker-width: 42px; /* Used for year picker width */
    --year-picker-padding-horizontal: 3px; /* Used for year picker horizontal padding */
    --field-error-message-text-line-height-primary: 16px; /* Used for field error message line-height */
    --field-error-message-text-size-primary: var(--text-size-body-xs); /* Used for field error message font-size */
    --field-error-message-text-weight-primary: var(--text-weight-regular); /* Used for field error message font-weight */
    --field-footnote-space-element-to-element-horizontal-primary: var(--space-xxs); /* Used for gap between footnote icon and text */
    --field-footnote-text-line-height-primary: 16px; /* Used for field footnote line-height */
    --field-footnote-text-size-primary: var(--text-size-body-xs); /* Used for field footnote font-size */
    --field-footnote-text-weight-primary: var(--text-weight-medium); /* Used for field footnote font-weight */
    --field-label-space-element-to-element-primary: var(--space-xs); /* Used for gap between label and label icon */
    --field-label-text-line-height-primary: var(--text-size-label-sm); /* Used for field label line-height */
    --field-label-text-size-primary: var(--text-size-label-sm); /* Used for field label font-size */
    --field-label-text-weight-primary: var(--text-weight-medium); /* Used for field label font-weight */
    --field-space-element-to-element-horizontal-primary: var(--space-md); /* Used for horizontal gap between field elements */
    --field-space-element-to-element-horizontal-secondary: var(--space-xl); /* Used for large horizontal gap between field elements */
    --field-space-element-to-element-vertical-secondary: var(--space-xxs); /* Used for small vertical gap between field elements */
    --field-space-element-to-element-vertical-primary: var(--space-sm); /* Used for vertical gap between field elements */
    --field-tooltip-text-line-height-primary: var(--text-line-height-body-sm); /* Used for field tooltip line-height */
    --field-tooltip-text-size-primary: var(--text-size-body-sm); /* Used for field tooltip font-size */
    --field-tooltip-text-weight-primary: var(--text-weight-regular); /* Used for field tooltip font-weight */
    --form-size-width-max: 800px; /* Used for form maximum width */
    --form-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for small horizontal gap between form elements */
    --form-space-element-to-element-horizontal-primary: var(--space-xl); /* Used for horizontal gap between form elements */
    --form-space-element-to-element-vertical-primary: var(--space-xl); /* Used for vertical gap between form elements */
    --input-border-radius-secondary: var(--border-radius-xs); /* Used for small input corner rounding */
    --input-border-radius-primary: var(--border-radius-sm); /* Used for input corner rounding */
    --input-border-weight-primary: var(--selected-border-weight-primary); /* Used for input border thickness */
    --input-border-weight-secondary: var(--selected-border-weight-secondary); /* Used for input secondary border thickness */
    --input-select-option-border-radius-primary: var(--border-radius-sm); /* Used for select option corner rounding */
    --input-select-option-space-edge-to-element-horizontal-secondary: var(--space-md); /* Used for select option left/right padding (small) */
    --input-select-option-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for select option left/right padding (large) */
    --input-select-option-space-edge-to-element-vertical-secondary: var(--space-sm); /* Used for select option top/bottom padding (small) */
    --input-select-option-space-edge-to-element-vertical-primary: var(--space-md); /* Used for select option top/bottom padding (medium) */
    --input-select-option-space-edge-to-element-vertical-tertiary: var(--space-xl); /* Used for select option top/bottom padding (large) */
    --input-select-option-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for small gap between select option elements */
    --input-select-option-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between select option elements */
    --input-select-option-text-line-height-secondary: var(--text-line-height-label-sm); /* Used for small select option line-height */
    --input-select-option-text-line-height-primary: var(--text-line-height-label-base); /* Used for select option line-height */
    --input-select-option-text-size-secondary: var(--text-size-label-sm); /* Used for small select option font-size */
    --input-select-option-text-size-primary: var(--text-size-label-base); /* Used for select option font-size */
    --input-select-option-text-weight-primary: var(--selected-text-weight-tertiary); /* Used for select option font-weight */
    --input-size-primary: var(--size-element-sm); /* Used for input icon size */
    --input-size-height-primary: var(--space-3xl); /* Input field height (24px) */
    --input-space-edge-to-element-horizontal-secondary: var(--space-xs); /* Used for extra small input left/right padding */
    --input-space-edge-to-element-horizontal-tertiary: var(--space-sm); /* Used for small input left/right padding */
    --input-space-edge-to-element-horizontal-quaternary: var(--space-md); /* Used for medium input left/right padding */
    --input-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for large input left/right padding */
    --input-space-edge-to-element-vertical-tertiary: var(--space-none); /* Used for no input top/bottom padding */
    --input-space-edge-to-element-vertical-quaternary: var(--space-xs); /* Used for extra small input top/bottom padding */
    --input-space-edge-to-element-vertical-secondary: var(--space-sm); /* Used for small input top/bottom padding */
    --input-space-edge-to-element-vertical-primary: var(--space-md); /* Used for medium input top/bottom padding */
    --input-space-element-to-element-horizontal-secondary: var(--space-none); /* Used for no gap between input elements */
    --input-space-element-to-element-horizontal-quaternary: var(--space-xxs); /* Used for extra small gap between input elements */
    --input-space-element-to-element-horizontal-tertiary: var(--space-xs); /* Used for small gap between input elements */
    --input-space-element-to-element-horizontal-primary: var(--space-sm); /* Used for gap between input elements */
    --input-space-element-to-element-vertical-primary: var(--space-xs); /* Used for vertical gap between input elements */
    --input-text-line-height-secondary: var(--text-line-height-body-sm); /* Used for small input text line-height */
    --input-text-line-height-primary: var(--text-line-height-body-base); /* Used for input text line-height */
    --input-text-size-secondary: var(--text-size-body-sm); /* Used for small input font-size */
    --input-text-size-primary: var(--text-size-body-base); /* Used for input font-size */
    --input-text-weight-primary: var(--text-weight-medium); /* Used for input text font-weight */
  }
  a.spotlight_link {
    color: var(--color-text-interactive-tertiary);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: var(--border-weight-heavy);
    font-weight: var(--text-weight-medium);
    text-underline-offset: 3.3px;
    text-underline-position: from-font;
    font-family: var(--text-font-san-serif, Inter);
  }
  a.spotlight_link:hover {
    text-decoration-thickness: var(--border-weight-heaviest);
  }
  a.spotlight_link:active {
    text-decoration-thickness: var(--border-weight-heaviest);
  }
  a.spotlight_link:visited {
    color: var(--color-text-interactive-quaternary);
  }
  /* spotlight_list */
  :root {
    --list-item-color-background-primary: var(--color-background-primary); /* Used for list item background */
    --list-item-color-background-interactive-selectable-primary: var(--selected-color-background-primary); /* Used for selected list item primary background */
    --list-item-color-background-interactive-selectable-secondary: var(--selected-color-background-secondary); /* Used for selected list item secondary background */
    --list-item-color-border-primary: var(--selectable-color-border-secondary); /* Used for list item border */
    --list-item-color-border-secondary: var(--color-border-brand-primary); /* Used for list item secondary border */
    --list-item-color-text-primary: var(--color-text-primary); /* Used for list item primary text */
    --list-item-color-text-secondary: var(--color-text-secondary); /* Used for list item secondary text */
    --list-item-color-text-interactive-primary: var(--color-text-interactive-primary); /* Used for interactive list item primary text */
    --list-item-color-text-interactive-secondary: var(--color-text-interactive-secondary); /* Used for interactive list item secondary text */
    --list-item-color-text-interactive-selectable-primary: var(--selected-color-text-primary); /* Used for selected list item primary text */
    --list-item-color-text-interactive-selectable-secondary: var(--color-text-interactive-secondary); /* Used for selected list item secondary text */
    --list-item-drag-handle-color-background-primary: var(--color-background-interactive-secondary); /* Used for list item drag handle background */
    --list-item-drag-handle-color-background-secondary: var(--color-background-interactive-selected-primary); /* Used for list item drag handle hover background */
    --list-item-drag-handle-color-border-primary: var(--color-border-brand-primary); /* Used for list item drag handle border */
    /* number */
    --list-item-card-border-radius-primary: var(--border-radius-sm); /* Used for list item card corner rounding */
    --list-item-card-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for list item card left/right padding */
    --list-item-card-space-edge-to-element-vertical-primary: var(--space-lg); /* Used for list item card top/bottom padding */
    --list-item-drag-handle-border-radius-primary: var(--border-radius-none); /* Used for list item drag handle corner rounding (none) */
    --list-item-drag-handle-border-radius-secondary: var(--border-radius-sm); /* Used for list item drag handle corner rounding (small) */
    --list-item-space-edge-to-element-horizontal-secondary: var(--space-md); /* Used for list item left/right padding (medium) */
    --list-item-space-edge-to-element-vertical-secondary: var(--space-md); /* Used for list item top/bottom padding (medium) */
    --list-item-space-edge-to-element-vertical-primary: var(--space-xl); /* Used for list item top/bottom padding (large) */
    --list-item-space-element-to-element-horizontal-tertiary: var(--space-none); /* Used for no gap between list item elements */
    --list-item-space-element-to-element-horizontal-secondary: var(--space-xs); /* Used for small gap between list item elements */
    --list-item-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between list item elements */
    --list-space-edge-to-content-horizontal-primary: var(--space-xl); /* Used for list container left/right padding */
    --list-space-edge-to-content-vertical-primary: var(--space-xl); /* Used for list container top/bottom padding */
    /* List item borders */
    --list-item-border-weight-primary: 1px; /* Used for list item border thickness */
    /* Selectable list */
    --selectable-list-border-weight-primary: 6px; /* Used for selectable list item border thickness */
    --selectable-list-gap-md: 12px; /* Used for gap between selectable list items */
    --selectable-list-checkbox-size: 12px; /* Used for selectable list checkbox size */
    --selectable-list-checkbox-stroke-width: 3px; /* Used for selectable list checkbox stroke width */
    --selectable-list-checkbox-stroke-dasharray: 22px; /* Used for selectable list checkbox stroke dash array */
    --selectable-list-checkbox-size-lg: 22px; /* Used for large selectable list checkbox size */
  }
  /* Shared nav item styling to reduce redundant code */
  .spotlight_nav-item {
    --stepper-color-background-primary: var(--color-background-interactive-secondary); /* Used for stepper item background */
    --stepper-color-background-secondary: var(--color-background-brand-secondary); /* Used for stepper item secondary background */
    --stepper-color-border-primary: hsl(0 0% 100% / 0); /* Used for stepper item border (transparent) */
    --stepper-color-content-primary: var(--color-content-interactive-primary); /* Used for stepper icon color */
    --stepper-color-text-primary: var(--color-text-interactive-primary); /* Used for stepper primary text */
    --stepper-color-text-secondary: var(--color-text-interactive-secondary); /* Used for stepper secondary text */
    --stepper-connector-size-height-primary: var(--size-element-xl); /* Used for stepper connector line height */
    --stepper-connector-size-width-primary: 2.6875rem; /* Used for stepper connector line width */
    --stepper-graphic-size-horizontal-primary: 2.125rem; /* Used for stepper circle horizontal size */
    --stepper-graphic-size-width-primary: 2.125rem; /* Used for stepper circle width */
    /* default */
    /* color */
    --nav-item-color-background-primary: var(--color-background-interactive-secondary); /* Used for nav item background */
    --nav-item-color-background-secondary: var(--color-background-interactive-secondary); /* Used for nav item secondary background */
    --nav-item-color-content-primary: var(--color-content-interactive-primary); /* Used for nav item icon color */
    --nav-item-color-text-primary: var(--color-text-interactive-primary); /* Used for nav item text */
    --nav-item-color-text-secondary: var(--color-text-interactive-secondary); /* Used for nav item secondary text */
    --nav-item-border-radius-primary: var(--border-radius-sm); /* Used for nav item corner rounding */
    --nav-item-border-radius-secondary: var(--border-radius-sm); /* Used for nav item secondary corner rounding */
    --nav-item-label-space-edge-to-element-horizontal-primary: var(--space-xs); /* Used for nav item label left/right padding */
    --nav-item-label-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for nav item label top/bottom padding */
    --nav-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for nav item left/right padding */
    --nav-item-space-edge-to-element-horizontal-secondary: var(--space-4xl); /* Used for nav item large left/right padding */
    --nav-item-space-edge-to-element-horizontal-tertiary: 3.5rem; /* Used for nav item extra large left/right padding */
    --nav-item-space-edge-to-element-vertical-primary: var(--space-md); /* Used for nav item top/bottom padding */
    --nav-item-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between nav item elements */
    --nav-item-space-element-to-element-vertical-primary: var(--space-none); /* Used for vertical gap between nav item elements */
    --nav-item-start-adornment-new-group-number: 0rem; /* Used for nav item start adornment positioning */
    --nav-space-label-edge-to-text-horizontal-primary: var(--space-xs); /* Used for gap between nav label edge and text */
    --stepper-connector-size-height-primary: var(--size-element-xl); /* Used for stepper connector line height */
    --stepper-connector-size-width-primary: 2.6875rem; /* Used for stepper connector line width */
    --stepper-graphic-size-horizontal-primary: 2.125rem; /* Used for stepper circle horizontal size */
    --stepper-graphic-size-width-primary: 2.125rem; /* Used for stepper circle width */
  }
  .spotlight_nav-item-selected {
    /* selected */
    /* color */
    --stepper-color-background-primary: var(--color-background-interactive-selected-primary); /* Used for selected stepper item background */
    --stepper-color-background-secondary: var(--color-background-brand-secondary); /* Used for selected stepper item secondary background */
    --stepper-color-border-primary: var(--color-border-interactive-brand); /* Used for selected stepper item border */
    --stepper-color-content-primary: var(--color-content-interactive-selected-secondary); /* Used for selected stepper icon color */
    --stepper-color-text-primary: var(--color-text-interactive-primary); /* Used for selected stepper primary text */
    --stepper-color-text-secondary: var(--color-text-interactive-selected-primary); /* Used for selected stepper secondary text */
    /* selected */
    /* color */
    --nav-item-color-background-primary: var(--color-background-interactive-selected-primary); /* Used for selected nav item background */
    --nav-item-color-background-secondary: var(--color-background-interactive-secondary); /* Used for selected nav item secondary background */
    --nav-item-color-content-primary: var(--color-content-interactive-selected-secondary); /* Used for selected nav item icon color */
    --nav-item-color-text-primary: var(--color-text-interactive-selected-primary); /* Used for selected nav item text */
    --nav-item-color-text-secondary: var(--color-text-interactive-secondary); /* Used for selected nav item secondary text */
  }
  .spotlight_nav-item-completed {
    /* completed */
    /* color */
    --stepper-color-background-secondary: var(--color-background-brand-primary); /* Used for completed stepper item background */
    --stepper-color-border-primary: hsl(224 100% 44% / 0); /* Used for completed stepper item border (transparent) */
    --stepper-color-content-primary: var(--color-content-interactive-selected-primary); /* Used for completed stepper icon color */
  }
  /* spotlight_navigation */
  :root {
    /* spotlight_navigation */
    --nav-breadcrumb-color-content-primary: var(--color-content-primary); /* Used for breadcrumb icon color */
    --nav-breadcrumb-color-text-primary: var(--color-text-primary); /* Used for breadcrumb text */
    --nav-breadcrumb-link-color-text-primary: var(--color-text-interactive-primary); /* Used for breadcrumb link text */
    --nav-item-color-background-primary: var(--selected-color-background-secondary); /* Used for nav item background */
    --nav-item-color-background-secondary: var(--color-background-interactive-secondary); /* Used for nav item secondary background */
    --nav-item-color-content-primary: var(--selected-color-content-primary); /* Used for nav item icon color */
    --nav-item-color-text-primary: var(--selected-color-text-tertiary); /* Used for nav item text */
    --nav-item-color-text-secondary: var(--selected-color-text-secondary); /* Used for nav item secondary text */
    --nav-minified-item-color-background-primary: var(--selected-color-background-brand-primary); /* Used for minified nav item primary background */
    --nav-minified-item-color-background-secondary: var(--selected-color-background-brand-secondary); /* Used for minified nav item secondary background */
    --nav-minified-item-color-content-primary: var(--selected-color-content-brand-primary); /* Used for minified nav item primary icon color */
    --nav-minified-item-color-content-secondary: var(--color-content-interactive-brand); /* Used for minified nav item secondary icon color */
    --nav-minified-item-color-text-primary: var(--selected-color-text-brand-primary); /* Used for minified nav item primary text */
    --nav-minified-item-color-text-secondary: var(--color-text-interactive-tertiary); /* Used for minified nav item secondary text */
    --nav-minified-item-flyout-color-background-primary: var(--color-background-brand-tertiary); /* Used for minified nav item flyout background */
    --nav-minified-item-flyout-color-text-primary: var(--color-text-brand-tertiary); /* Used for minified nav item flyout text */
    --nav-minified-item-group-color-border-primary: var(--color-border-primary);
    --nav-minified-item-group-color-text-primary: var(--color-text-primary);
    --nav-pagination-count-color-text-primary: var(--color-text-secondary); /* Used for pagination count text */
    --nav-pagination-number-color-background-primary: var(--selected-color-background-secondary); /* Used for pagination number background */
    --nav-pagination-number-color-text-primary: var(--selected-color-text-tertiary); /* Used for pagination number text */
    --nav-stepper-color-background-primary: var(--selected-color-background-secondary); /* Used for stepper item background */
    --nav-stepper-color-text-primary: var(--color-text-interactive-primary); /* Used for stepper primary text */
    --nav-stepper-color-text-secondary: var(--color-text-interactive-secondary); /* Used for stepper secondary text */
    --nav-stepper-color-text-tertiary: var(--color-text-tertiary); /* Used for stepper tertiary text */
    --nav-stepper-connector-color-border-primary: var(--color-border-interactive-secondary); /* Used for stepper connector line border */
    --nav-stepper-graphic-color-border-primary: var(--selected-color-border-secondary); /* Used for stepper circle border */
    --nav-stepper-graphic-color-border-completed-primary: var(--color-border-positive-secondary); /* Used for completed stepper circle border */
    --nav-stepper-graphic-color-content-primary: var(--selected-color-content-primary); /* Used for stepper circle icon color */
    --nav-stepper-graphic-color-content-secondary: var(--selected-color-content-secondary); /* Used for stepper circle secondary icon color */
    --nav-stepper-graphic-color-content-completed-primary: var(--selected-color-content-positive-positive); /* Used for completed stepper circle primary icon color */
    --nav-stepper-graphic-color-content-completed-secondary: var(--selected-color-content-positive-secondary); /* Used for completed stepper circle secondary icon color */
    --nav-tree-item-color-content-primary: var(--color-content-interactive-primary); /* Used for tree nav item primary icon color */
    --nav-tree-item-color-content-secondary: var(--color-content-interactive-secondary); /* Used for tree nav item secondary icon color */
    --nav-tree-item-color-text-primary: var(--color-text-interactive-primary); /* Used for tree nav item primary text */
    --nav-tree-item-color-text-secondary: var(--color-text-interactive-secondary); /* Used for tree nav item secondary text */
    /* number */
    --nav-breadcrumb-link-text-line-height-primary: var(--text-line-height-body-sm); /* Used for breadcrumb link line-height */
    --nav-breadcrumb-link-text-size-primary: var(--text-size-body-sm); /* Used for breadcrumb link font-size */
    --nav-breadcrumb-link-text-weight-primary: var(--text-weight-semibold); /* Used for breadcrumb link font-weight */
    --nav-breadcrumb-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between breadcrumb items */
    --nav-breadcrumb-text-underline-offset-primary: var(--space-xs); /* Used in Breadcrumbs.module.css hover underline offset (5px -> 4px) */
    --nav-breadcrumb-text-line-height-primary: var(--text-line-height-body-sm); /* Used for breadcrumb text line-height */
    --nav-breadcrumb-text-size-primary: var(--text-size-body-sm); /* Used for breadcrumb text font-size */
    --nav-breadcrumb-text-weight-primary: var(--text-weight-regular); /* Used for breadcrumb text font-weight */
    --nav-item-border-radius-primary: var(--border-radius-sm); /* Used for nav item corner rounding */
    --nav-item-border-radius-secondary: var(--border-radius-sm); /* Used for nav item secondary corner rounding */
    --nav-item-label-space-edge-to-element-horizontal-primary: var(--space-xs); /* Used for nav item label left/right padding */
    --nav-item-label-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for nav item label top/bottom padding */
    --nav-minified-item-border-radius-primary: 0.625rem; /* Used for minified nav item corner rounding */
    --nav-minified-item-flyout-border-radius-primary: var(--border-radius-xs); /* Used for minified nav item flyout corner rounding */
    --nav-minified-item-flyout-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for minified nav item flyout left/right padding */
    --nav-minified-item-flyout-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for minified nav item flyout top/bottom padding */
    --nav-minified-item-group-border-weight-primary: var(--border-weight-defaultt);
    --nav-minified-item-group-space-edge-to-element-vertical-secondary: var(--space-md);
    --nav-minified-item-group-space-edge-to-element-vertical-primary: var(--space-4xl);
    --nav-minified-item-group-space-element-to-element-vertical-primary: var(--space-xl);
    --nav-minified-item-group-space-element-to-element-vertical-secondary: var(--space-2xl);
    --nav-minified-item-group-text-size-primary: var(--text-size-label-xs);
    --nav-minified-item-group-text-weight-primary: var(--text-weight-semibold);
    --nav-minified-item-space-edge-to-element-horizontal-primary: var(--space-sm); /* Used for minified nav item left/right padding */
    --nav-minified-item-space-edge-to-element-vertical-primary: var(--space-sm); /* Used for minified nav item top/bottom padding */
    --nav-minified-item-space-element-to-element-primary: var(--space-sm); /* Used for gap between minified nav items */
    --nav-minified-item-text-line-height-primary: var(--text-line-height-label-sm); /* Used for minified nav item text line-height */
    --nav-minified-item-text-size-primary: var(--text-size-label-sm); /* Used for minified nav item font-size */
    --nav-minified-item-text-weight-primary: var(--selected-text-weight-tertiary); /* Used for minified nav item font-weight */
    --nav-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for nav item left/right padding */
    --nav-item-space-edge-to-element-horizontal-secondary: var(--space-4xl); /* Used for nav item large left/right padding */
    --nav-item-space-edge-to-element-horizontal-tertiary: 56px; /* Used for nav item extra large left/right padding */
    --nav-item-space-edge-to-element-vertical-primary: var(--space-md); /* Used for nav item top/bottom padding */
    --nav-item-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between nav item elements */
    --nav-item-space-element-to-element-vertical-primary: var(--space-none); /* Used for vertical gap between nav item elements */
    --nav-item-text-line-height-secondary: var(--text-line-height-body-sm); /* Used for nav item secondary text line-height */
    --nav-item-text-line-height-primary: var(--text-line-height-label-base); /* Used for nav item text line-height */
    --nav-item-text-size-secondary: var(--text-size-body-sm); /* Used for nav item secondary font-size */
    --nav-item-text-size-primary: var(--text-size-label-base); /* Used for nav item font-size */
    --nav-item-text-weight-secondary: var(--text-weight-regular); /* Used for nav item secondary font-weight */
    --nav-item-text-weight-primary: var(--selected-text-weight-primary); /* Used for nav item font-weight */
    --nav-list-space-element-to-element-vertical-primary: var(--space-xs); /* Used for vertical gap between nav list items */
    --nav-list-space-element-to-element-vertical-secondary: var(--space-4xl); /* Used for large vertical gap between nav list items */
    --nav-pagination-control-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between pagination controls */
    --nav-pagination-count-space-element-to-element-horizontal-primary: var(--space-lg); /* Used for gap between pagination count elements */
    --nav-pagination-count-text-line-height-primary: var(--text-line-height-body-base); /* Used for pagination count text line-height */
    --nav-pagination-count-text-size-primary: var(--text-size-body-base); /* Used for pagination count font-size */
    --nav-pagination-count-text-weight-primary: var(--text-weight-regular); /* Used for pagination count font-weight */
    --nav-pagination-number-border-radius-primary: var(--border-radius-full); /* Used for pagination number corner rounding (circular) */
    --nav-pagination-number-size-height-primary: var(--size-element-3xl); /* Used for pagination number height */
    --nav-pagination-number-size-width-primary: var(--size-element-3xl); /* Used for pagination number width */
    --nav-pagination-number-text-line-height-primary: var(--text-line-height-body-sm); /* Used for pagination number text line-height */
    --nav-pagination-number-text-size-primary: var(--text-size-label-sm); /* Used for pagination number font-size */
    --nav-pagination-number-text-weight-primary: var(--selected-text-weight-primary); /* Used for pagination number font-weight */
    --nav-pagination-space-element-to-element-horizontal-primary: var(--space-3xl); /* Used for gap between pagination elements */
    --nav-stepper-border-radius-primary: var(--border-radius-sm); /* Used for stepper corner rounding */
    --nav-stepper-connector-border-weight-primary: 3px; /* Used for stepper connector line thickness */
    --nav-stepper-connector-size-height-primary: var(--size-element-xl); /* Used for stepper connector height */
    --nav-stepper-connector-size-width-primary: 48px; /* Used for stepper connector width */
    --nav-stepper-graphic-border-radius-primary: var(--border-radius-full); /* Used for stepper circle corner rounding (circular) */
    --nav-stepper-graphic-border-weight-primary: var(--selected-border-weight-tertiary); /* Used for stepper circle border thickness */
    --nav-stepper-graphic-size-horizontal-primary: 34px; /* Used for stepper circle horizontal size */
    --nav-stepper-graphic-size-width-primary: 34px; /* Used for stepper circle width */
    --nav-stepper-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for stepper left/right padding */
    --nav-stepper-space-edge-to-element-vertical-tertiary: var(--space-xxs); /* Used for stepper extra small top/bottom padding */
    --nav-stepper-space-edge-to-element-vertical-primary: var(--space-sm); /* Used for stepper top/bottom padding */
    --nav-stepper-space-edge-to-element-vertical-secondary: var(--space-sm); /* Used for stepper secondary top/bottom padding */
    --nav-stepper-space-element-to-element-vertical-primary: var(--space-xxs); /* Used for stepper vertical gap between elements */
    --nav-stepper-space-element-to-element-vertical-secondary: var(--space-xs); /* Used for stepper secondary vertical gap */
    --nav-stepper-text-line-height-secondary: var(--text-line-height-label-xxs); /* Used for stepper secondary text line-height */
    --nav-stepper-text-line-height-primary: 18px; /* Used for stepper text line-height */
    --nav-stepper-text-size-secondary: var(--text-size-label-xxs); /* Used for stepper secondary font-size */
    --nav-stepper-text-size-primary: var(--text-size-label-sm); /* Used for stepper font-size */
    --nav-stepper-text-weight-secondary: var(--text-weight-regular); /* Used for stepper secondary font-weight */
    --nav-stepper-text-weight-tertiary: var(--text-weight-semibold); /* Used for stepper tertiary font-weight */
    --nav-stepper-text-weight-primary: var(--text-weight-bold); /* Used for stepper primary font-weight */
    --nav-tree-item-branch-space-edge-to-element-horizontal-primary: 36px; /* Used for tree branch item left padding (level 1) */
    --nav-tree-item-branch-space-edge-to-element-horizontal-secondary: 64px; /* Used for tree branch item left padding (level 2) */
    --nav-tree-item-branch-space-edge-to-element-horizontal-tertiary: 92px; /* Used for tree branch item left padding (level 3) */
    --nav-tree-item-branch-space-edge-to-element-vertical-primary: var(--space-md); /* Used for tree branch item top/bottom padding */
    --nav-tree-item-branch-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between tree branch item elements */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-primary: 36px; /* Used for tree leaf item left padding (level 1) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-secondary: 64px; /* Used for tree leaf item left padding (level 2) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-tertiary: 92px; /* Used for tree leaf item left padding (level 3) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-quartnary: 120px; /* Used for tree leaf item left padding (level 4) */
    --nav-tree-item-leaf-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for tree leaf item top/bottom padding */
    --nav-tree-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for tree item left/right padding */
    --nav-tree-item-trunk-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for tree trunk item left padding */
    --nav-tree-item-trunk-space-edge-to-element-vertical-primary: var(--space-md); /* Used for tree trunk item top/bottom padding */
    --nav-tree-item-trunk-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between tree trunk item elements */
  }
  .spotlight_navigation {
    /* spotlight_navigation */
    --nav-breadcrumb-color-content-primary: var(--color-content-primary); /* Used for breadcrumb icon color */
    --nav-breadcrumb-color-text-primary: var(--color-text-primary); /* Used for breadcrumb text */
    --nav-breadcrumb-link-color-text-primary: var(--color-text-interactive-primary); /* Used for breadcrumb link text */
    --nav-item-color-background-primary: var(--selected-color-background-secondary); /* Used for nav item background */
    --nav-item-color-background-secondary: var(--color-background-interactive-secondary); /* Used for nav item secondary background */
    --nav-item-color-content-primary: var(--selected-color-content-primary); /* Used for nav item icon color */
    --nav-item-color-text-primary: var(--selected-color-text-tertiary); /* Used for nav item text */
    --nav-item-color-text-secondary: var(--selected-color-text-secondary); /* Used for nav item secondary text */
    --nav-minified-item-color-background-primary: var(--selected-color-background-brand-primary); /* Used for minified nav item primary background */
    --nav-minified-item-color-background-secondary: var(--selected-color-background-brand-secondary); /* Used for minified nav item secondary background */
    --nav-minified-item-color-content-primary: var(--selected-color-content-brand-primary); /* Used for minified nav item primary icon color */
    --nav-minified-item-color-content-secondary: var(--color-content-interactive-brand); /* Used for minified nav item secondary icon color */
    --nav-minified-item-color-text-primary: var(--selected-color-text-brand-primary); /* Used for minified nav item primary text */
    --nav-minified-item-color-text-secondary: var(--color-text-interactive-tertiary); /* Used for minified nav item secondary text */
    --nav-minified-item-flyout-color-background-primary: var(--color-background-brand-tertiary); /* Used for minified nav item flyout background */
    --nav-minified-item-flyout-color-text-primary: var(--color-text-brand-tertiary); /* Used for minified nav item flyout text */
    --nav-minified-item-group-color-border-primary: var(--color-border-primary);
    --nav-minified-item-group-color-text-primary: var(--color-text-primary);
    --nav-pagination-count-color-text-primary: var(--color-text-secondary); /* Used for pagination count text */
    --nav-pagination-number-color-background-primary: var(--selected-color-background-secondary); /* Used for pagination number background */
    --nav-pagination-number-color-text-primary: var(--selected-color-text-tertiary); /* Used for pagination number text */
    --nav-stepper-color-background-primary: var(--selected-color-background-secondary); /* Used for stepper item background */
    --nav-stepper-color-text-primary: var(--color-text-interactive-primary); /* Used for stepper primary text */
    --nav-stepper-color-text-secondary: var(--color-text-interactive-secondary); /* Used for stepper secondary text */
    --nav-stepper-color-text-tertiary: var(--color-text-tertiary); /* Used for stepper tertiary text */
    --nav-stepper-connector-color-border-primary: var(--color-border-interactive-secondary); /* Used for stepper connector line border */
    --nav-stepper-graphic-color-border-primary: var(--selected-color-border-secondary); /* Used for stepper circle border */
    --nav-stepper-graphic-color-border-completed-primary: var(--color-border-positive-secondary); /* Used for completed stepper circle border */
    --nav-stepper-graphic-color-content-primary: var(--selected-color-content-primary); /* Used for stepper circle icon color */
    --nav-stepper-graphic-color-content-secondary: var(--selected-color-content-secondary); /* Used for stepper circle secondary icon color */
    --nav-stepper-graphic-color-content-completed-primary: var(--selected-color-content-positive-positive); /* Used for completed stepper circle primary icon color */
    --nav-stepper-graphic-color-content-completed-secondary: var(--selected-color-content-positive-secondary); /* Used for completed stepper circle secondary icon color */
    --nav-tree-item-color-content-primary: var(--color-content-interactive-primary); /* Used for tree nav item primary icon color */
    --nav-tree-item-color-content-secondary: var(--color-content-interactive-secondary); /* Used for tree nav item secondary icon color */
    --nav-tree-item-color-text-primary: var(--color-text-interactive-primary); /* Used for tree nav item primary text */
    --nav-tree-item-color-text-secondary: var(--color-text-interactive-secondary); /* Used for tree nav item secondary text */
    --interactive-list-item-border-color-primary: var(--color-border-primary);
    --interactive-list-item-color-background-primary: var(--color-background-secondary);
    --interactive-list-item-color-background-quarternary: #ffffff;
    --interactive-list-item-color-background-secondary: var(--color-background-interactive-secondary);
    --interactive-list-item-color-background-tertiary: var(--color-background-interactive-secondary);
    --interactive-list-item-color-background-selected-primary: var(--color-background-interactive-selected-primary);
    --project-selector-color-background-primary: var(--color-background-primary);
    --project-selector-color-border-primary: var(--color-border-interactive-secondary);
    --project-selector-color-text-primary: var(--color-border-interactive-primary);
    --project-selector-color-text-secondary: var(--color-text-interactive-neutral-secondary);
    --project-selector-drawer-color-background-primary: var(--color-background-primary);
    --project-selector-drawer-color-border-primary: var(--color-border-interactive-tertiary);
    --project-selector-tag-color-background-primary: var(--color-background-primary);
    --project-selector-tag-color-border-primary: var(--color-border-interactive-secondary);
    --project-wrapper-breadcrumb-color-border-secondary: var(--color-border-brand-primary);
    --project-wrapper-breadcrumb-color-background-primary: var(--color-background-brand-interactive-secondary);
    --project-wrapper-breadcrumb-color-text-primary: var(--color-text-brand-primary);
    --project-wrapper-color-background-primary: var(--color-background-page);
    /* number */
    --nav-breadcrumb-link-text-line-height-primary: var(--text-line-height-body-sm); /* Used for breadcrumb link line-height */
    --nav-breadcrumb-link-text-size-primary: var(--text-size-body-sm); /* Used for breadcrumb link font-size */
    --nav-breadcrumb-link-text-weight-primary: var(--text-weight-semibold); /* Used for breadcrumb link font-weight */
    --nav-breadcrumb-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between breadcrumb items */
    --nav-breadcrumb-text-underline-offset-primary: var(--space-xs); /* Used in Breadcrumbs.module.css hover underline offset (5px -> 4px) */
    --nav-breadcrumb-text-line-height-primary: var(--text-line-height-body-sm); /* Used for breadcrumb text line-height */
    --nav-breadcrumb-text-size-primary: var(--text-size-body-sm); /* Used for breadcrumb text font-size */
    --nav-breadcrumb-text-weight-primary: var(--text-weight-regular); /* Used for breadcrumb text font-weight */
    --nav-item-border-radius-primary: var(--border-radius-sm); /* Used for nav item corner rounding */
    --nav-item-border-radius-secondary: var(--border-radius-sm); /* Used for nav item secondary corner rounding */
    --nav-item-label-space-edge-to-element-horizontal-primary: var(--space-xs); /* Used for nav item label left/right padding */
    --nav-item-label-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for nav item label top/bottom padding */
    --nav-minified-item-border-radius-primary: 0.625rem; /* Used for minified nav item corner rounding */
    --nav-minified-item-flyout-border-radius-primary: var(--border-radius-xs); /* Used for minified nav item flyout corner rounding */
    --nav-minified-item-flyout-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for minified nav item flyout left/right padding */
    --nav-minified-item-flyout-space-edge-to-element-vertical-primary: var(--space-xxs); /* Used for minified nav item flyout top/bottom padding */
    --nav-minified-item-group-border-weight-primary: var(--border-weight-defaultt);
    --nav-minified-item-group-space-edge-to-element-vertical-secondary: var(--space-md);
    --nav-minified-item-group-space-edge-to-element-vertical-primary: var(--space-4xl);
    --nav-minified-item-group-space-element-to-element-vertical-primary: var(--space-xl);
    --nav-minified-item-group-space-element-to-element-vertical-secondary: var(--space-2xl);
    --nav-minified-item-group-text-size-primary: var(--text-size-label-xs);
    --nav-minified-item-group-text-weight-primary: var(--text-weight-semibold);
    --nav-minified-item-space-edge-to-element-horizontal-primary: var(--space-sm); /* Used for minified nav item left/right padding */
    --nav-minified-item-space-edge-to-element-vertical-primary: var(--space-sm); /* Used for minified nav item top/bottom padding */
    --nav-minified-item-space-element-to-element-primary: var(--space-sm); /* Used for gap between minified nav items */
    --nav-minified-item-text-line-height-primary: var(--text-line-height-label-sm); /* Used for minified nav item text line-height */
    --nav-minified-item-text-size-primary: var(--text-size-label-sm); /* Used for minified nav item font-size */
    --nav-minified-item-text-weight-primary: var(--selected-text-weight-tertiary); /* Used for minified nav item font-weight */
    --nav-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for nav item left/right padding */
    --nav-item-space-edge-to-element-horizontal-secondary: var(--space-4xl); /* Used for nav item large left/right padding */
    --nav-item-space-edge-to-element-horizontal-tertiary: 56px; /* Used for nav item extra large left/right padding */
    --nav-item-space-edge-to-element-vertical-primary: var(--space-md); /* Used for nav item top/bottom padding */
    --nav-item-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between nav item elements */
    --nav-item-space-element-to-element-vertical-primary: var(--space-none); /* Used for vertical gap between nav item elements */
    --nav-item-text-line-height-secondary: var(--text-line-height-body-sm); /* Used for nav item secondary text line-height */
    --nav-item-text-line-height-primary: var(--text-line-height-label-base); /* Used for nav item text line-height */
    --nav-item-text-size-secondary: var(--text-size-body-sm); /* Used for nav item secondary font-size */
    --nav-item-text-size-primary: var(--text-size-label-base); /* Used for nav item font-size */
    --nav-item-text-weight-secondary: var(--text-weight-regular); /* Used for nav item secondary font-weight */
    --nav-item-text-weight-primary: var(--selected-text-weight-primary); /* Used for nav item font-weight */
    --nav-list-space-element-to-element-vertical-primary: var(--space-xs); /* Used for vertical gap between nav list items */
    --nav-list-space-element-to-element-vertical-secondary: var(--space-4xl); /* Used for large vertical gap between nav list items */
    --nav-pagination-control-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between pagination controls */
    --nav-pagination-count-space-element-to-element-horizontal-primary: var(--space-lg); /* Used for gap between pagination count elements */
    --nav-pagination-count-text-line-height-primary: var(--text-line-height-body-base); /* Used for pagination count text line-height */
    --nav-pagination-count-text-size-primary: var(--text-size-body-base); /* Used for pagination count font-size */
    --nav-pagination-count-text-weight-primary: var(--text-weight-regular); /* Used for pagination count font-weight */
    --nav-pagination-number-border-radius-primary: var(--border-radius-full); /* Used for pagination number corner rounding (circular) */
    --nav-pagination-number-size-height-primary: var(--size-element-3xl); /* Used for pagination number height */
    --nav-pagination-number-size-width-primary: var(--size-element-3xl); /* Used for pagination number width */
    --nav-pagination-number-text-line-height-primary: var(--text-line-height-body-sm); /* Used for pagination number text line-height */
    --nav-pagination-number-text-size-primary: var(--text-size-label-sm); /* Used for pagination number font-size */
    --nav-pagination-number-text-weight-primary: var(--selected-text-weight-primary); /* Used for pagination number font-weight */
    --nav-pagination-space-element-to-element-horizontal-primary: var(--space-3xl); /* Used for gap between pagination elements */
    --nav-stepper-border-radius-primary: var(--border-radius-sm); /* Used for stepper corner rounding */
    --nav-stepper-connector-border-weight-primary: 3px; /* Used for stepper connector line thickness */
    --nav-stepper-connector-size-height-primary: var(--size-element-xl); /* Used for stepper connector height */
    --nav-stepper-connector-size-width-primary: 48px; /* Used for stepper connector width */
    --nav-stepper-graphic-border-radius-primary: var(--border-radius-full); /* Used for stepper circle corner rounding (circular) */
    --nav-stepper-graphic-border-weight-primary: var(--selected-border-weight-tertiary); /* Used for stepper circle border thickness */
    --nav-stepper-graphic-size-horizontal-primary: 34px; /* Used for stepper circle horizontal size */
    --nav-stepper-graphic-size-width-primary: 34px; /* Used for stepper circle width */
    --nav-stepper-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for stepper left/right padding */
    --nav-stepper-space-edge-to-element-vertical-tertiary: var(--space-xxs); /* Used for stepper extra small top/bottom padding */
    --nav-stepper-space-edge-to-element-vertical-primary: var(--space-sm); /* Used for stepper top/bottom padding */
    --nav-stepper-space-edge-to-element-vertical-secondary: var(--space-sm); /* Used for stepper secondary top/bottom padding */
    --nav-stepper-space-element-to-element-vertical-primary: var(--space-xxs); /* Used for stepper vertical gap between elements */
    --nav-stepper-space-element-to-element-vertical-secondary: var(--space-xs); /* Used for stepper secondary vertical gap */
    --nav-stepper-text-line-height-secondary: var(--text-line-height-label-xxs); /* Used for stepper secondary text line-height */
    --nav-stepper-text-line-height-primary: 18px; /* Used for stepper text line-height */
    --nav-stepper-text-size-secondary: var(--text-size-label-xxs); /* Used for stepper secondary font-size */
    --nav-stepper-text-size-primary: var(--text-size-label-sm); /* Used for stepper font-size */
    --nav-stepper-text-weight-secondary: var(--text-weight-regular); /* Used for stepper secondary font-weight */
    --nav-stepper-text-weight-tertiary: var(--text-weight-semibold); /* Used for stepper tertiary font-weight */
    --nav-stepper-text-weight-primary: var(--text-weight-bold); /* Used for stepper primary font-weight */
    --nav-tree-item-branch-space-edge-to-element-horizontal-primary: 36px; /* Used for tree branch item left padding (level 1) */
    --nav-tree-item-branch-space-edge-to-element-horizontal-secondary: 64px; /* Used for tree branch item left padding (level 2) */
    --nav-tree-item-branch-space-edge-to-element-horizontal-tertiary: 92px; /* Used for tree branch item left padding (level 3) */
    --nav-tree-item-branch-space-edge-to-element-vertical-primary: var(--space-md); /* Used for tree branch item top/bottom padding */
    --nav-tree-item-branch-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between tree branch item elements */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-primary: 36px; /* Used for tree leaf item left padding (level 1) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-secondary: 64px; /* Used for tree leaf item left padding (level 2) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-tertiary: 92px; /* Used for tree leaf item left padding (level 3) */
    --nav-tree-item-leaf-space-edge-to-element-horizontal-quartnary: 120px; /* Used for tree leaf item left padding (level 4) */
    --nav-tree-item-leaf-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for tree leaf item top/bottom padding */
    --nav-tree-item-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for tree item left/right padding */
    --nav-tree-item-trunk-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for tree trunk item left padding */
    --nav-tree-item-trunk-space-edge-to-element-vertical-primary: var(--space-md); /* Used for tree trunk item top/bottom padding */
    --nav-tree-item-trunk-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between tree trunk item elements */
    --interactive-list-item-border-weight-primary: var(--border-weight-default);
    --interactive-list-item-space-edge-to-element-horizontal-primary: var(--space-3xl);
    --interactive-list-item-space-edge-to-element-vertical-primary: var(--space-xl);
    --interactive-list-item-space-element-to-element-vertical-primary: var(--space-none);
    --project-selector-space-edge-to-element-horizontal-primary: var(--space-xl);
    --project-selector-space-edge-to-element-vertical-primary: var(--space-xl);
    --project-selector-space-element-to-element-vertical-primary: var(--space-none);
    --project-wrapper-space-edge-to-element-horizontal-primary: var(--space-xl);
    --project-wrapper-space-edge-to-element-horizontal-secondary: var(--space-4xl);
    --project-wrapper-space-edge-to-element-vertical-secondary: var(--space-none);
    --project-wrapper-space-edge-to-element-vertical-primary: var(--space-xl);
    --project-wrapper-space-element-to-element-vertical-primary: var(--space-md);
    --project-wrapper-breadcrumb-space-edge-to-element-horizontal-secondary: var(--space-md);
  --project-wrapper-breadcrumb-space-edge-to-element-horizontal-primary: var(--space-lg);
  --project-wrapper-breadcrumb-space-edge-to-element-horizontal-tertiary: var(--space-lg);
  --project-wrapper-breadcrumb-space-edge-to-element-vertical-primary: var(--space-xs);
  --project-wrapper-breadcrumb-space-edge-to-element-vertical-secondary: var(--space-lg);
  --project-wrapper-breadcrumb-space-element-to-element-horizontal-primary: var(--space-md);
  }
  /* spotlight_pagination */
  .spotlight_pagination {
    --pagination-number-color-background-primary: var(--color-background-interactive-secondary);
    --pagination-number-color-text-primary: var(--color-text-interactive-primary);
    --pagination-control-space-element-to-element-horizontal-primary: var(--space-md);
    --pagination-space-element-to-element-primary: var(--space-3xl);
    /* Pagination transitions and effects */
    --pagination-transition-duration-primary: 200ms; /* Used in Pagination.module.css for button transitions */
    --pagination-opacity-disabled: var(--control-opacity-disabled); /* Used in Pagination.module.css disabled button opacity (0.5) */
    /* Pagination button sizing */
    --pagination-button-gap-primary: var(--space-sm); /* Used in Pagination.module.css expanded button gap (0.5rem -> 6px) */
    --pagination-page-size-height: var(--size-element-4xl); /* Used in Pagination.module.css page size section height (40px -> 48px) */
    --pagination-page-size-min-width: 8rem; /* Used in Pagination.module.css page size section min-width */
    --pagination-listbox-max-height: 240px; /* Used in Pagination.module.css page size listbox max-height */
    --pagination-ellipsis-popover-min-width: 60px; /* Used in Pagination.module.css ellipsis popover min-width */
    --pagination-ellipsis-popover-max-width: var(--tooltip-size-max-width); /* Used in Pagination.module.css ellipsis popover max-width (400px) */
    --pagination-ellipsis-popover-max-height: 200px; /* Used in Pagination.module.css ellipsis popover and listbox max-height */
    --pagination-ellipsis-listbox-line-height: 2; /* Used in Pagination.module.css ellipsis listbox line-height */
  }
  .spotlight_pagination-selected {
    --pagination-number-color-background-primary: var(--color-background-interactive-selected-primary);
    --pagination-number-color-text-primary: var(--color-text-interactive-selected-primary);
    --pagination-control-space-element-to-element-horizontal-primary: var(--space-md);
    --pagination-space-element-to-element-primary: var(--space-3xl);
  }
  /* popover */
  .spotlight_popover {
    --popover-arrow-size-height: var(--size-element-xs); /* Used for popover arrow height */
    --popover-arrow-size-width: var(--size-element-2xl); /* Used for popover arrow width */
    --popover-arrow-space-edge-to-element-horizontal-secondary: var(--space-none); /* Used for popover arrow horizontal offset (centered) */
    --popover-arrow-space-edge-to-element-horizontal-primary: var(--space-xl); /* Used for popover arrow horizontal offset */
    --popover-arrow-space-edge-to-element-vertical-secondary: var(--space-none); /* Used for popover arrow vertical offset (centered) */
    --popover-arrow-space-edge-to-element-vertical-primary: var(--space-xl); /* Used for popover arrow vertical offset */
    --popover-space-edge-to-content-horizontal-secondary: var(--space-lg); /* Used for popover left/right content padding (small) */
    --popover-space-edge-to-content-horizontal-primary: var(--space-xl); /* Used for popover left/right content padding (large) */
    --popover-space-edge-to-content-vertical-secondary: var(--space-lg); /* Used for popover top/bottom content padding (small) */
    --popover-space-edge-to-content-vertical-primary: var(--space-xl); /* Used for popover top/bottom content padding (large) */
  }
  /* spotlight_progress-bar */
  .spotlight_progress-bar {
    --progress-bar-color-background-primary: var(--color-background-semantic-primary); /* Used for progress bar background */
    --progress-bar-label-color-text-primary: var(--color-text-primary); /* Used for progress bar primary label text */
    --progress-bar-label-color-text-secondary: var(--color-text-secondary); /* Used for progress bar secondary label text */
    --progress-bar-status-color-background-complete: var(--color-background-brand-accent-primary); /* Used for completed progress bar fill background */
    --progress-bar-status-color-background-in-progress: var(--color-background-quaternary); /* Used for in-progress progress bar fill background */
    --progress-bar-status-color-background-not-started: var(--color-background-tertiary); /* Used for not-started progress bar fill background */
    --progress-bar-track-color-background-primary: var(--color-background-tertiary); /* Used for progress bar track background */
    --progress-bar-color-content-gradient: linear-gradient(90deg, #0000B3 10.76%, #1A55FD 46.17%, #0D44E2 87.06%, #001EB3 116.73%); /* Used for progress bar fill gradient */
    /* number */
    --progress-bar-border-radius-primary: var(--border-radius-full); /* Used for progress bar corner rounding (full pill) */
    --progress-bar-label-text-line-height: var(--text-line-height-label-xs); /* Used for progress bar label line-height */
    --progress-bar-label-text-size-primary: var(--text-size-label-xs); /* Used for progress bar label font-size */
    --progress-bar-label-text-weight-secondary: var(--text-weight-medium); /* Used for progress bar secondary label font-weight */
    --progress-bar-label-text-weight-primary: var(--text-weight-semibold); /* Used for progress bar primary label font-weight */
    --progress-bar-space-element-to-element-vertical-primary: var(--space-xs); /* Used for vertical gap between progress bar elements */
    /* Progress bar dimensions */
    --progress-bar-height-primary: 12px; /* Used for progress bar height */
    --progress-bar-border-radius-secondary: 6px; /* Used for progress bar secondary corner rounding */
    /* Progress dot */
    --progress-dot-size-primary: 8px; /* Used for progress dot size */
  }
  /* spotlight_radio */
  :root {
    /* color */
    --radio-color-background-primary: var(
      --color-background-interactive-tertiary
    ); /* Used for radio button background */
    --radio-color-background-read-only-primary: var(--color-background-secondary); /* Used for read-only radio button background */
    --radio-color-background-selected-primary: var(--color-background-primary); /* Used for selected radio button background */
    --radio-color-background-selected-read-only-primary: var(--color-system-1200); /* Used for selected read-only radio button background */
    /* custom disabled background color because default interactivity was too light*/
    --radio-color-background-disabled-primary: var(--color-background-quaternary); /* Used for disabled radio button background */
    --radio-color-background-disabled-secondary: var(--color-light-background-disabled); /* Used for disabled radio button secondary background */
    --radio-color-border-primary: var(--color-border-interactive-secondary); /* Used for radio button border */
    --radio-color-border-read-only-primary: var(--color-system-300); /* Used for read-only radio button border */
    --radio-color-border-selected-primary: var(--color-border-interactive-primary); /* Used for selected radio button border */
    --radio-color-border-selected-read-only-primary: var(--color-system-300); /* Used for selected read-only radio button border */
  }
  /* spotlight_side-panel */
  .spotlight_side-panel {
    --side-panel-size-width-horizontal-primary: 3.75rem; /* Used for side panel horizontal width */
  }
  /* spotlight_slider */
  .spotlight_slider {
    --slider-color-background-disabled: var(--color-background-quaternary); /* Used for disabled slider background */
    --slider-color-background-primary: var(--color-background-interactive-primary); /* Used for slider track background */
    --slider-color-background-secondary: var(--color-background-interactive-quinary); /* Used for slider secondary background */
    --slider-color-border-primary: var(--color-border-primary); /* Used for slider border */
    --slider-color-text-primary: var(--color-text-interactive-primary); /* Used for slider label text */
    --slider-dot-color-background-primary: hsl(219 19% 86%); /* Used for slider tick mark background */
    --slider-thumb-color-background-primary: var(--color-background-interactive-tertiary); /* Used for slider thumb background */
    --slider-thumb-color-background-secondary: var(--color-background-primary); /* Used for slider thumb secondary background */
    --slider-thumb-color-border-primary: var(--color-border-interactive-primary); /* Used for slider thumb border */
    /* number */
    --slider-border-radius-primary: var(--border-radius-xs); /* Used for slider track corner rounding */
    --slider-space-element-to-content-horizontal-primary: var(--space-xs); /* Used for slider horizontal spacing */
    --slider-space-element-to-content-vertical-primary: var(--space-xs); /* Used for slider vertical spacing */
    --slider-thumb-size-primary: var(--size-element-xl); /* Used for slider thumb size */
    --slider-thumb-space-element-to-element-horizontal-primary: var(--space-xxs); /* Used for slider thumb horizontal spacing */
    --slider-thumb-space-element-to-element-vertical-primary: var(--space-xxs); /* Used for slider thumb vertical spacing */
  }
  /* spotlight_tag */
  .spotlight_tag {
    --tag-color-background-primary: var(--color-background-semantic-secondary); /* Used for tag background */
    --tag-color-background-secondary: var(--color-background-primary); /* Used for tag secondary background */
    --tag-color-border-primary: var(--color-border-semantic-secondary); /* Used for tag border */
    --tag-color-border-secondary: var(--color-border-primary); /* Used for tag secondary border */
    --tag-color-content-primary: var(--color-content-semantic-primary); /* Used for tag icon color */
    --tag-color-text-color: var(--color-text-secondary); /* Used for tag secondary text color */
    --tag-color-text-primary: var(--color-text-semantic-primary); /* Used for tag text */
    /* number */
    --tag-border-radius-secondary: var(--border-radius-xs); /* Used for small tag corner rounding */
    --tag-border-radius-primary: 6px; /* Used for tag corner rounding */
    --tag-border-weight-primary: var(--border-weight-default); /* Used for tag border thickness */
    --tag-space-edge-to-element-horizontal-secondary: 5px; /* Used for small tag left/right padding */
    --tag-space-edge-to-element-horizontal-tertiary: var(--space-sm); /* Used for medium tag left/right padding */
    --tag-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for large tag left/right padding */
    --tag-space-edge-to-element-vertical-secondary: 3px; /* Used for small tag top/bottom padding */
    --tag-space-edge-to-element-vertical-primary: var(--space-xs); /* Used for tag top/bottom padding */
    --tag-space-edge-to-label-horizontal-secondary: 1px; /* Used for small gap between tag label and edge */
    --tag-space-edge-to-label-horizontal-primary: var(--space-xxs); /* Used for gap between tag label and edge */
    --tag-space-element-to-element-horizontal-secondary: var(--space-xxs); /* Used for small gap between tag elements */
    --tag-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for gap between tag elements */
    --tag-text-line-height-secondary: var(--text-line-height-label-xs); /* Used for small tag text line-height */
    --tag-text-line-height-primary: var(--text-line-height-label-sm); /* Used for tag text line-height */
    --tag-text-size-secondary: var(--text-size-label-xs); /* Used for small tag font-size */
    --tag-text-size-primary: var(--text-size-label-sm); /* Used for tag font-size */
    --tag-text-weight-primary: var(--text-weight-medium); /* Used for tag text font-weight */
    /* Status circle */
    --tag-status-circle-size: 6px; /* Used for tag status indicator circle size */
  }
  /* spotlight_tab */
  .spotlight_tab {
    /* spotlight_tab */
    --tab-bar-color-background-primary: var(--color-background-primary); /* Used for tab bar background */
    --tab-bar-color-border-primary: var(--color-border-primary); /* Used for tab bar border */
    --tab-color-background-primary: var(--selected-color-background-secondary); /* Used for selected tab background */
    --tab-color-border-primary: var(--selected-color-border-secondary); /* Used for selected tab border */
    --tab-color-content-primary: var(--selected-color-content-senary); /* Used for tab icon color */
    --tab-color-text-primary: var(--selected-color-text-secondary); /* Used for tab text */
    --tab-color-text-disabled: var(--color-text-disabled); /* Used in Tab.module.css disabled state */
    /* number */
    --tab-bar-border-radius-primary: var(--border-radius-md); /* Used for tab bar corner rounding */
    --tab-bar-border-weight-primary: var(--border-weight-default); /* Used for tab bar border thickness */
    --tab-bar-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for tab bar left/right padding */
    --tab-bar-space-edge-to-element-vertical-primary: var(--space-md); /* Used for tab bar top/bottom padding */
    --tab-bar-space-element-to-element-horizontal-primary: var(--space-2xl); /* Used for horizontal gap between tabs */
    --tab-bar-space-element-to-element-vertical-primary: var(--space-xl); /* Used for vertical gap between tabs */
    --tab-border-radius-primary: var(--border-radius-sm); /* Used for tab corner rounding */
    --tab-border-weight-secondary: var(--border-weight-default); /* Used for tab border thickness (default) */
    --tab-border-weight-primary: var(--border-weight-heaviest); /* Used for tab border thickness (selected) */
    --tab-space-edge-to-element-horizontal-tertiary: var(--space-md); /* Used for small tab left/right padding */
    --tab-space-edge-to-element-horizontal-primary: var(--space-lg); /* Used for medium tab left/right padding */
    --tab-space-edge-to-element-horizontal-secondary: var(--space-xl); /* Used for large tab left/right padding */
    --tab-space-edge-to-element-vertical-primary: var(--space-sm); /* Used for small tab top/bottom padding */
    --tab-space-edge-to-element-vertical-secondary: var(--space-lg); /* Used for large tab top/bottom padding */
    --tab-space-element-to-element-horizontal-primary: var(--space-md); /* Used for gap between tab elements */
    --tab-text-size-primary: var(--text-size-label-sm); /* Used for small tab font-size */
    --tab-text-size-secondary: var(--text-size-label-base); /* Used for medium tab font-size */
    --tab-text-size-tertiary: var(--text-size-label-lg); /* Used for large tab font-size */
    --tab-text-weight-primary: var(--text-weight-regular); /* Used for unselected tab font-weight */
    --tab-text-weight-secondary: var(--text-weight-bold); /* Used for selected tab font-weight */
    --tabs-space-element-to-element-vertical-primary: var(--space-md); /* Used for vertical gap between tab bar and content */
  }
  /* spotlight_toggle-button */
  .spotlight_toggle-button {
    /* default */
    /* color */
    --toggle-button-color-background-primary: var(--selected-color-background-secondary); /* Used for selected toggle button background */
    --toggle-button-color-background-secondary: var(--selected-color-background-senary); /* Used for toggle button secondary background */
    --toggle-button-color-background-tertiary: var(--color-background-interactive-secondary); /* Used for unselected toggle button background */
    --toggle-button-color-border-primary: var(--selected-color-border-secondary); /* Used for selected toggle button border */
    --toggle-button-color-border-secondary: var(--selected-color-border-tertiary); /* Used for toggle button secondary border */
    --toggle-button-color-content-primary: var(--selected-color-text-quinary); /* Used for toggle button icon color */
    --toggle-button-color-content-secondary: var(--selected-color-content-senary); /* Used for toggle button secondary icon color */
    --toggle-button-color-text-primary: var(--selected-color-text-quinary); /* Used for toggle button text */
    /* number */
    --toggle-button-group-space-edge-to-element-horizontal-primary: var(--space-md); /* Used for toggle button group left/right padding (medium) */
    --toggle-button-group-space-edge-to-element-horizontal-secondary: var(--space-lg); /* Used for toggle button group left/right padding (large) */
    --toggle-button-group-space-edge-to-element-vertical-primary: var(--space-md); /* Used for toggle button group top/bottom padding (medium) */
    --toggle-button-group-space-edge-to-element-vertical-secondary: var(--space-lg); /* Used for toggle button group top/bottom padding (large) */
    --toggle-button-group-space-element-to-element-primary: var(--space-xxs); /* Used for small gap between toggle buttons in group */
    --toggle-button-group-space-element-to-element-secondary: var(--space-xs); /* Used for gap between toggle buttons in group */
    --toggle-button-border-radius-tertiary: var(--button-border-radius-tertiary); /* Used for extra small toggle button corner rounding */
    --toggle-button-border-radius-secondary: var(--button-border-radius-secondary); /* Used for small/medium toggle button corner rounding */
    --toggle-button-border-radius-primary: var(--button-border-radius-primary); /* Used for large toggle button corner rounding */
    --toggle-button-border-weight-primary: var(--button-border-weight-primary); /* Used for toggle button border thickness */
    --toggle-button-icon-space-edge-to-element-horizontal-primary: var(--button-icon-space-edge-to-element-horizontal-primary); /* Used for icon-only toggle button left/right padding (small) */
    --toggle-button-icon-space-edge-to-element-horizontal-secondary: var(--button-icon-space-edge-to-element-horizontal-secondary); /* Used for icon-only toggle button left/right padding (medium) */
    --toggle-button-icon-space-edge-to-element-horizontal-tertiary: var(--button-icon-space-edge-to-element-horizontal-tertiary); /* Used for icon-only toggle button left/right padding (large) */
    --toggle-button-icon-space-edge-to-element-vertical-primary: var(--button-icon-space-edge-to-element-horizontal-primary); /* Used for icon-only toggle button top/bottom padding (small) */
    --toggle-button-icon-space-edge-to-element-vertical-secondary: var(--button-icon-space-edge-to-element-horizontal-secondary); /* Used for icon-only toggle button top/bottom padding (medium) */
    --toggle-button-icon-space-edge-to-element-vertical-tertiary: var(--button-icon-space-edge-to-element-horizontal-tertiary); /* Used for icon-only toggle button top/bottom padding (large) */
    --toggle-button-icon-space-element-to-element-horizontal-tertiary: var(--space-xxs); /* Used for extra small gap between toggle button icon and text */
    --toggle-button-icon-space-element-to-element-horizontal-primary: var(--space-xs); /* Used for small gap between toggle button icon and text */
    --toggle-button-icon-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for gap between toggle button icon and text */
    --toggle-button-space-element-to-element-horizontal-tertiary: var(--button-space-edge-to-element-horizontal-tertiary); /* Used for extra small toggle button left/right padding */
    --toggle-button-space-element-to-element-horizontal-primary: var(--button-space-edge-to-element-horizontal-primary); /* Used for small/medium toggle button left/right padding */
    --toggle-button-space-element-to-element-horizontal-secondary: var(--button-space-edge-to-element-horizontal-secondary); /* Used for large toggle button left/right padding */
    --toggle-button-space-element-to-element-vertical-quaternary: var(--button-space-edge-to-element-vertical-quaternary); /* Used for extra small toggle button top/bottom padding */
    --toggle-button-space-element-to-element-vertical-primary: var(--button-space-edge-to-element-vertical-primary); /* Used for small toggle button top/bottom padding */
    --toggle-button-space-element-to-element-vertical-secondary: var(--button-space-edge-to-element-vertical-secondary); /* Used for medium toggle button top/bottom padding */
    --toggle-button-space-element-to-element-vertical-tertiary: var(--button-space-edge-to-element-vertical-tertiary); /* Used for large toggle button top/bottom padding */
    --toggle-button-text-line-height-tertiary: var(--button-text-line-height-tertiary); /* Used for extra small toggle button text line-height */
    --toggle-button-text-line-height-primary: var(--button-text-line-height-primary); /* Used for small/medium toggle button text line-height */
    --toggle-button-text-line-height-secondary: var(--button-text-line-height-secondary); /* Used for large toggle button text line-height */
    --toggle-button-text-size-tertiary: var(--button-text-size-tertiary); /* Used for extra small toggle button font-size */
    --toggle-button-text-size-primary: var(--button-text-size-primary); /* Used for small/medium toggle button font-size */
    --toggle-button-text-size-secondary: var(--button-text-size-secondary); /* Used for large toggle button font-size */
    --toggle-button-text-weight-primary: var(--selected-text-weight-secondary); /* Used for toggle button text font-weight */
    /* Icon toggle button dimensions */
    --toggle-button-icon-size-sm: 24px; /* Used for small icon toggle button size */
    --toggle-button-icon-size-lg: 32px; /* Used for large icon toggle button size */
    --toggle-button-icon-padding-sm: 3px; /* Used for small icon toggle button padding */
    --toggle-button-icon-padding-lg: 4px; /* Used for large icon toggle button padding */
    /* Square icon toggle button dimensions */
    --toggle-button-square-icon-size-md: 24px; /* Used for medium square icon toggle button size */
    --toggle-button-square-icon-size-lg: 36px; /* Used for large square icon toggle button size */
  }
  /* spotlight_accordion */
  :root {
    --accordion-item-color-background-primary: var(--color-background-primary); /* Used for accordion item background */
    --accordion-item-color-border-primary: var(--color-border-primary); /* Used for accordion item border */
    --accordion-item-color-border-secondary: var(--color-border-primary); /* Used for accordion item secondary border */
    --accordion-item-border-radius-primary: var(--border-radius-none); /* Used for accordion item corner rounding (none) */
    --accordion-item-border-radius-secondary: var(--border-radius-sm); /* Used for accordion item secondary corner rounding */
    --accordion-item-border-weight-primary: var(--border-weight-default); /* Used for accordion item border thickness */
    --accordion-item-space-edge-to-element-horizontal-quintenary: var(--space-xs); /* Used for accordion item extra small horizontal padding */
    --accordion-item-space-edge-to-element-horizontal-primary: var(--space-sm); /* Used for accordion item small horizontal padding */
    --accordion-item-space-edge-to-element-horizontal-quarternary: var(--space-md); /* Used for accordion item medium horizontal padding */
    --accordion-item-space-edge-to-element-horizontal-secondary: var(--space-lg); /* Used for accordion item large horizontal padding */
    --accordion-item-space-edge-to-element-horizontal-tertiary: var(--space-xl); /* Used for accordion item extra large horizontal padding */
    --accordion-item-space-edge-to-element-vertical-quintanery: var(--space-xs); /* Used for accordion item extra small vertical padding */
    --accordion-item-space-edge-to-element-vertical-tertiary: var(--space-sm); /* Used for accordion item small vertical padding */
    --accordion-item-space-edge-to-element-vertical-quarternary: var(--space-md); /* Used for accordion item medium vertical padding */
    --accordion-item-space-edge-to-element-vertical-primary: var(--space-lg); /* Used for accordion item large vertical padding */
    --accordion-item-space-edge-to-element-vertical-secondary: var(--space-3xl); /* Used for accordion item extra large vertical padding */
    --accordion-item-space-element-to-element-horizontal-secondary: var(--space-sm); /* Used for gap between icon and text in accordion header */
    --accordion-item-space-element-to-element-horizontal-primary: var(--space-xl); /* Used for gap between accordion header elements */
    --accordion-item-space-element-to-element-vertical-primary: var(--space-none); /* Used for vertical gap between accordion items (none) */
  }
  /* spotlight_tooltip */
  .spotlight_tooltip {
    /* Tooltip dimensions */
    --tooltip-size-min-width: 80px;
    --tooltip-size-max-width: 400px;
    /* Tooltip margins for positioning */
    --tooltip-space-edge-to-trigger-sm: 3px;
    --tooltip-space-edge-to-trigger-md: var(--space-2xl); /* Used in Tooltip.module.css bottom/top placement margins (16px) */
    --tooltip-space-edge-to-trigger-lg: 20px;
    --tooltip-space-edge-to-trigger-xl: 36px;
    /* Tooltip arrow positioning */
    --tooltip-arrow-offset: var(--space-md); /* Used in Tooltip.module.css left/right placement arrow positioning (8px) */
    /* Tooltip transform offset */
    --tooltip-transform-offset-horizontal: calc(-1 * var(--space-2xl)); /* Used in Tooltip.module.css translateX positioning (-16px) */
    /* Tooltip transitions */
    --tooltip-transition-duration-primary: 200ms; /* Used in Tooltip.module.css fade in/out animation */
    /* Tooltip elevation */
    --tooltip-elevation-shadow: 0px 12px 20px -4px rgba(0, 0, 0, 0.04), 0px 24px 40px -8px rgba(0, 0, 0, 0.08); /* Used in Tooltip.module.css elevation-02 equivalent */
  }
}
.App {
  text-align: center;
}
.App-logo {
  height: 20vmin;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /*.App-logo {
    animation: App-logo-spin infinite 20s linear;
  }*/
}
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
.App-link {
  color: #61dafb;
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* overflow: hidden; */
}
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Global styles */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow: hidden; */
}
/* Loading spinner */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  color: #6c757d;
}
.app-footer {
  height: 30px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 12px;
  color: #6c757d;
}

.footer-left {
  display: flex;
  align-items: center;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-text {
  line-height: 1;
}

.footer-separator {
  color: #dee2e6;
}.app-header {
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
}

.app-logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-icon {
  position: relative;
  font-size: 20px;
  color: white;
  cursor: pointer;
  padding: 5px;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  cursor: pointer;
}

.user-email {
  font-size: 14px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.profile-container {
  position: relative;
  display: inline-block;
}

.profile-badge {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #eaecf0;  
  height: 40px;
}

.profile-badge:hover {
  background-color: transparent;
  color: #a5a6a8;
  transform: scale(1.05);
  font-weight: bold;
}

.profile-badge.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.profile-badge:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Panel Container */
.profile-panel-container {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive positioning */
@media (max-width: 768px) {
  .profile-panel-container {
    right: -100px;
    left: auto;
  }
}.left-menu {
  width: 250px;
  background: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  overflow: hidden;
}

.left-menu.collapsed {
  width: 60px;
}

.left-menu-header {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #34495e;
  border-bottom: 1px solid #3d566e;
}

.left-menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.left-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.left-menu-header-title {
  margin-left: 12px;
  font-weight: 600;
  font-size: 14px;
}

.left-menu-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.left-menu-item-container {
  margin-bottom: 2px;
}

.left-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.left-menu-item:hover {
  background: #34495e;
}

.left-menu-item.has-children {
  font-weight: 500;
}

.left-menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.left-menu-title {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left-menu-arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
  color: #bdc3c7;
}

.left-menu-arrow.expanded {
  transform: rotate(90deg);
}

.left-menu-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #233140;
}

.left-menu-children.expanded {
  max-height: 500px;
}

.left-menu-children .left-menu-item {
  font-size: 13px;
  color: #bdc3c7;
}

.left-menu-children .left-menu-item:hover {
  background: #2c3e50;
  color: white;
}

/* Collapsed state */
.left-menu.collapsed .menu-icon {
  margin-right: 0;
}

.left-menu.collapsed .menu-item {
  justify-content: center;
  padding: 12px 8px;
}

/* Scrollbar styling */
.left-menu-content::-webkit-scrollbar {
  width: 6px;
}

.left-menu-content::-webkit-scrollbar-track {
  background: #2c3e50;
}

.left-menu-content::-webkit-scrollbar-thumb {
  background: #34495e;
  border-radius: 3px;
}

.left-menu-content::-webkit-scrollbar-thumb:hover {
  background: #4a6274;
}.tab-panel {
  display: flex;
  flex-direction: column;
  height: 100%;  
}

.tab-header {
  display: flex;
  background: #34495e;
  border-bottom: 1px solid #dee2e6;
  min-height: 51px;
  align-items: center;
}

.tabs-container {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  margin-right: 2px;
  cursor: pointer;
  user-select: none;
  min-width: 150px;
  max-width: 200px;
  position: relative;
  transition: all 0.2s ease;
  border-radius: 3px;
}

.tab:hover {
  background: #022344;
  color: #1a242e;
}

.tab.active {
  background: #ffffff;
  border-bottom: 2px solid #667eea;
  z-index: 1;
}
.tab.active .tab-icon{
  color: #212529;
}
.tab.drag-over {
  border-left: 3px solid #667eea;
}

.tab-icon {
  margin-right: 8px;
  font-size: 14px;
  color: #eff2f5;
}

.tab-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: white;
}

.tab.active .tab-title {
  color: #212529;
  font-weight: 500;
}

.tab-close {
  background: none;
  border: none;
  font-size: 16px;
  color: #f8f8f8;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 8px;
  border-radius: 3px;
  line-height: 1;
}

.tab-close:hover {
  background: #dc3545;
  color: white;
}

.tab.active .tab-close {
  color: #212529;
  font-weight: 500;
}
.add-tab-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #6c757d;
  cursor: pointer;
  padding: 8px 12px;
  margin: 0 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.add-tab-btn:hover {
  background: #e9ecef;
  color: #495057;
}

.tab-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.tab-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  /*overflow: auto;*/
  padding: 0px;
}

.tab-pane.active {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media (max-width: 768px) {
  .tab {
    min-width: 120px;
    padding: 8px 12px;
  }
  
  .tab-title {
    font-size: 13px;
  }
  
  .tab-pane {
    padding: 15px;
  }
}.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

.loading-container {
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Animated Logo */
.loading-logo {
  position: relative;
  margin-bottom: 40px;
}

.logo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-text {
  font-size: 28px;
  font-weight: bold;
  color: white;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.loading-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.6);
  animation: spin 2s linear infinite;
}

.ring-1 {
  width: 140px;
  height: 140px;
  top: -70px;
  left: -70px;
  animation-duration: 2s;
}

.ring-2 {
  width: 160px;
  height: 160px;
  top: -80px;
  left: -80px;
  animation-duration: 3s;
  border-top-color: rgba(255, 255, 255, 0.4);
}

.ring-3 {
  width: 180px;
  height: 180px;
  top: -90px;
  left: -90px;
  animation-duration: 4s;
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Dot Spinner */
.loading-animation {
  margin-bottom: 40px;
}

.dot-spinner {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: dotBounce 1.4s ease-in-out infinite both;
}

.dot-1 { animation-delay: -0.32s; }
.dot-2 { animation-delay: -0.16s; }
.dot-3 { animation-delay: 0s; }
.dot-4 { animation-delay: 0.16s; }

/* Loading Message */
.loading-message h2 {
  color: white;
  font-size: 24px;
  font-weight: 300;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: textGlow 2s ease-in-out infinite alternate;
}

.loading-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  margin: 0;
  font-weight: 300;
}

/* Progress Bar */
.loading-progress {
  margin-top: 40px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.7));
  border-radius: 2px;
  animation: progressFill 2s ease-in-out infinite;
}

/* Background Animation */
.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 80px;
  height: 80px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 6s;
}

.shape-2 {
  width: 120px;
  height: 120px;
  top: 70%;
  right: 10%;
  animation-delay: -2s;
  animation-duration: 8s;
}

.shape-3 {
  width: 60px;
  height: 60px;
  top: 30%;
  right: 20%;
  animation-delay: -4s;
  animation-duration: 7s;
}

.shape-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 20%;
  animation-delay: -1s;
  animation-duration: 5s;
}

.shape-5 {
  width: 40px;
  height: 40px;
  top: 50%;
  left: 5%;
  animation-delay: -3s;
  animation-duration: 9s;
}

/* Animations */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dotBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes textGlow {
  0% {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  100% {
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5);
  }
}

@keyframes progressFill {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.5;
  }
  33% {
    transform: translateY(-30px) rotate(120deg);
    opacity: 0.8;
  }
  66% {
    transform: translateY(30px) rotate(240deg);
    opacity: 0.3;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .logo-circle {
    width: 100px;
    height: 100px;
  }
  
  .logo-text {
    font-size: 24px;
  }
  
  .loading-message h2 {
    font-size: 20px;
  }
  
  .loading-subtitle {
    font-size: 14px;
  }
  
  .progress-bar {
    width: 250px;
  }
  
  .ring-1 {
    width: 120px;
    height: 120px;
    top: -60px;
    left: -60px;
  }
  
  .ring-2 {
    width: 140px;
    height: 140px;
    top: -70px;
    left: -70px;
  }
  
  .ring-3 {
    width: 160px;
    height: 160px;
    top: -80px;
    left: -80px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .loading-screen {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-circle,
  .ring,
  .dot,
  .progress-fill,
  .floating-shape {
    animation-duration: 0.5s;
  }
  
  .loading-message h2 {
    animation: none;
  }
}.mf-error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
}

.mf-error-content {
  max-width: 500px;
  text-align: center;
}

.mf-error-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.mf-error-content h2 {
  color: #dc2626;
  margin-bottom: 10px;
}

.mf-error-content p {
  color: #6b7280;
  margin-bottom: 30px;
}

.mf-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.mf-retry-button,
.mf-back-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.mf-retry-button {
  background-color: #2563eb;
  color: white;
}

.mf-retry-button:hover {
  background-color: #1d4ed8;
}

.mf-back-button {
  background-color: #e5e7eb;
  color: #374151;
}

.mf-back-button:hover {
  background-color: #d1d5db;
}

.mf-error-details {
  margin-top: 20px;
  text-align: left;
  padding: 15px;
  background-color: #f9fafb;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.mf-error-details summary {
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  user-select: none;
}

.mf-error-details p {
  margin-top: 10px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: fadeIn 0.3s ease-out;
}

/* Modal Container */
.modal-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

/* Footer */
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  background: #f8f9fa;
  border-radius: 0 0 8px 8px;
  flex-shrink: 0;
}

.modal-footer button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Table Styles */
.modal-body {
  flex: 1; /* Take remaining space */
  padding: 0;
  overflow: hidden; /* Prevent body from scrolling */
  display: flex;
  flex-direction: column;
}
.modal-footer button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-width: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Content */
.modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/*Modal buttons*/
.link-new-btn {
  background: #0ea5e9;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.manage-favorites-button{
 height: 35px;
 min-width: 35px !important;
}
.link-new-btn:hover {
  background: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.link-new-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.3);
}

.btn-save {
  background: #17a2b8;
  color: white;
}

.btn-save:hover:not(:disabled) {
  background: #138496;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-save:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
}

.btn-save-close {
  background: #17a2b8;
  color: white;
}

.btn-save-close:hover:not(:disabled) {
  background: #138496;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-save-close:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
}

.btn-cancel {
  background: #6c757d;
  color: white;
}

.btn-cancel:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-cancel:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

.close-button {
  background: #6b7280;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 100px;
}

.close-button:hover {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.close-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(107, 114, 128, 0.3);
}
.close-button-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: #6b7280;
}
.close-button-x:hover {
  background-color: #f3f4f6;
  color: #1f2937;
}
.modal-footer button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Modal Loading Overlay */
.modal-loading-overlay {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 12px;
  animation: fadeIn 0.2s ease-in;
  height: 100%;
  align-items: center;
  justify-content: center;
}



.loading-spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
}
/* Loading Spinner in Button */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spinner-large {
  width: 56px;
  height: 56px;
  border: 5px solid #e5e7eb;
  border-top-color: #17a2b8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-text {
  margin: 0;
  color: #374151;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  animation: pulse 1.5s ease-in-out infinite;
}
/* Error State */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #ef4444;
  min-height: 300px;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.error-message-text {
  margin: 0;
  color: #dc3545;
  font-size: 16px;
  font-weight: 500;
}

.btn-retry {
  margin-top: 16px;
  padding: 10px 24px;
  background-color: #17a2b8;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-retry:hover {
  background-color: #138496;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-retry:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
}

/* Button Spinner */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
}
.retry-button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.2s ease;
}

.retry-button:hover {
  background: #2563eb;
}
/* Error State Container */
.error-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  text-align: center;
}

.error-icon {
  font-size: 56px;
  opacity: 0.7;
  animation: shake 0.5s ease-in-out;
}
/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #6b7280;
  min-height: 300px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) { 
  
  .modal-header,
  .modal-footer {
    background: #111827;
    border-color: #374151;
  }
  
  .modal-title {
    color: #f9fafb;
  } 
  
}

/* =========================
   RESPONSIVE STYLES
   ========================= */

/* Large Tablets (≤992px) */
@media (max-width: 992px) {
  .modal-footer {
    padding: 14px 18px;
    gap: 10px;
  }

  .modal-footer button,
  .close-button {
    padding: 9px 18px;
    font-size: 12px;
    min-width: 90px;
  }

  .modal-container {
    max-width: 95%;
  }
}

/* Tablets (≤768px) */
@media (max-width: 768px) {
  .modal-container {
    width: 95%;
    max-width: 95%;
  }

  .modal-header {
    padding: 16px 20px;
  }

  .modal-title {
    font-size: 18px;
  }

  .modal-footer {
    padding: 12px 16px;
    gap: 10px;
  }

  .modal-footer button,
  .close-button {
    padding: 9px 16px;
    font-size: 12px;
    min-width: 85px;
  }

  .link-new-btn {
    padding: 7px 14px;
    font-size: 11px;
  }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
  .modal-container {
    width: 95%;
    margin: 10px;
  }

  .modal-header {
    padding: 14px 16px;
  }

  .modal-title {
    font-size: 16px;
  }

  .modal-footer {
    flex-direction: column-reverse;
    padding: 12px 16px;
    gap: 10px;
    align-items: stretch;
  }

  .modal-footer button,
  .close-button {
    width: 100%;
    min-width: auto;
    padding: 12px 16px;
    font-size: 13px;
    justify-content: center;
  }

  .link-new-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 12px;
  }

  /* FIXED: Only hide btn-spacer, not all buttons */
  .btn-spacer {
    display: none;
  }

  /* Button order on mobile */
  .btn-save {
    order: 1;
  }

  .btn-save-close {
    order: 2;
  }

  .btn-cancel,
  .close-button {
    order: 3;
  }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
  .modal-header {
    padding: 12px 14px;
  }

  .modal-title {
    font-size: 15px;
  }

  .modal-footer {
    padding: 10px 12px;
  }

  .modal-footer button,
  .close-button {
    padding: 11px 14px;
    font-size: 12px;
    letter-spacing: 0.3px;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .modal-footer button,
  .close-button {
    width: auto;
    min-width: 80px;
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .modal-footer button,
  .close-button {
    min-height: 44px;
    padding: 12px 20px;
  }

  .close-button-x {
    min-width: 24px;
    min-height: 24px;
  }

  .link-new-btn {
    min-height: 44px;
    padding: 10px 18px;
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .modal-footer button,
  .close-button,
  .close-button-x,
  .link-new-btn,
  .modal-overlay,
  .modal-container {
    transition: none;
    animation: none;
  }

  .btn-spinner,
  .spinner-large {
    animation: none;
    border-color: currentColor;
  }
}.toast {
  min-width: 320px;
  max-width: 500px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: white;
  border-left: 4px solid;
  overflow: hidden;
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

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

/* Interactive toasts have stronger shadow and border */
.toast-interactive {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.toast-error {
  border-left-color: #f56565;
}

.toast-error.toast-interactive {
  border-left-color: #e53e3e;
  border-left-width: 6px;
}

.toast-success {
  border-left-color: #48bb78;
}

.toast-warning {
  border-left-color: #ed8936;
}

.toast-info {
  border-left-color: #4299e1;
}

.toast-header {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
}

.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.toast-error .toast-icon {
  font-size: 22px;
  animation: pulse-error 2s infinite;
}

@keyframes pulse-error {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.toast-content {
  flex: 1;
}

.toast-message {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: #2d3748;
  word-break: break-word;
  font-weight: 500;
}

.toast-error .toast-message {
  font-weight: 600;
  color: #1a202c;
}

.toast-error-subtitle {
  font-size: 12px;
  color: #718096;
  margin-top: 4px;
  font-style: italic;
}

.toast-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #a0aec0;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.toast-close:hover {
  color: #4a5568;
  background-color: #f7fafc;
}

.toast-details {
  border-top: 1px solid #e2e8f0;
  padding: 0 16px 16px 16px;
}

.toast-details-toggle {
  background: none;
  border: none;
  color: #4299e1;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
}

.toast-details-toggle:hover {
  color: #3182ce;
}

.toast-details-content {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.toast-details-content pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #4a5568;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Interactive footer with OK button */
.toast-footer {
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
  background-color: #f9fafb;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.toast-ok-button {
  background-color: #4299e1;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.toast-ok-button:hover {
  background-color: #3182ce;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(66, 153, 225, 0.3);
}

.toast-ok-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(66, 153, 225, 0.3);
}

/* Error-specific OK button styling */
.toast-error .toast-ok-button {
  background-color: #e53e3e;
}

.toast-error .toast-ok-button:hover {
  background-color: #c53030;
  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.3);
}

/* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: all;
}

/* Interactive toasts should have higher z-index */
.toast-container .toast-interactive {
  z-index: 10000;
}

/* Responsive */
@media (max-width: 768px) {
  .toast-container {
    top: 10px;
    right: 10px;
    left: 10px;
  }
  
  .toast {
    min-width: auto;
    max-width: none;
  }
  
  .toast-footer {
    padding: 10px 12px;
  }
  
  .toast-ok-button {
    padding: 10px 20px;
    font-size: 16px;
    min-width: 100px;
  }
}

/* Accessibility improvements */
.toast-ok-button:focus {
  outline: 2px solid #4299e1;
  outline-offset: 2px;
}

.toast-error .toast-ok-button:focus {
  outline-color: #e53e3e;
}

/* Animation for interactive toasts */
.toast-interactive.toast-visible {
  animation: shake-attention 0.5s ease-in-out;
}

@keyframes shake-attention {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}.notification-container {
  position: relative;
  display: inline-block;
}

.notification-badge {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #64748b;
  width: 40px;
  height: 40px;
}

.notification-badge:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #334155;
  transform: scale(1.05);
}

.notification-badge.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.notification-badge:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Bell Icon Styling */
.bell-icon {
  transition: all 0.2s ease;
  transform-origin: top center;
}

.notification-badge:hover .bell-icon {
  transform: rotate(15deg);
}

.notification-badge.active .bell-icon {
  transform: rotate(-10deg);
}

/* Bell Shake Animation */
.notification-badge.shake .bell-icon {
  animation: bellShake 0.8s ease-in-out;
}

@keyframes bellShake {
  0%, 100% { 
    transform: rotate(0deg); 
  }
  10%, 30%, 50%, 70%, 90% { 
    transform: rotate(-10deg); 
  }
  20%, 40%, 60%, 80% { 
    transform: rotate(10deg); 
  }
}

/* Notification Count Badge */
.notification-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Bell Ring Animation Effect */
.bell-ring-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid #3b82f6;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bellRing 1s ease-out;
  pointer-events: none;
}

@keyframes bellRing {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Panel Container */
.notification-panel-container {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive positioning */
@media (max-width: 768px) {
  .notification-panel-container {
    right: -100px;
    left: auto;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .notification-badge {
    color: #cbd5e1;
  }
  
  .notification-badge:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
  }
  
  .notification-count {
    border-color: #1e293b;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .notification-badge {
    border: 1px solid currentColor;
  }
  
  .notification-count {
    border: 1px solid;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .notification-badge,
  .bell-icon,
  .notification-count {
    animation: none;
    transition: none;
  }
  
  .notification-badge:hover {
    transform: none;
  }
  
  .notification-badge:hover .bell-icon {
    transform: none;
  }
}.profile-panel {
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
  overflow: visible; /* Changed from hidden to visible for submenu */
  position: relative;  
}

/* Header */
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
  color: white;
}

.profile-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 24px;
  font-weight: 600;
  border: 3px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
}

.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}

.profile-details {
  text-align: center;
}

.profile-display-name {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.profile-email {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* Menu Items */
.profile-menu {
  padding: 8px 0;
}

.menu-item {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #374151;
  font-size: 14px;
}

.menu-item:hover {
  background: #f8fafc;
  color: #1f2937;
}

.menu-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-item svg {
  flex-shrink: 0;
}

/* Submenu Container */
.menu-item-with-submenu {
  position: relative;
}

.submenu-arrow {
  color: #9ca3af;
  transition: transform 0.2s ease;
}

.menu-item-with-submenu:hover .submenu-arrow {
  transform: rotate(90deg);
  color: #374151;
}

/* Submenu - Fixed positioning and scrolling */
.submenu {
  position: absolute;
  right: 100%;
  top: 0;
  min-width: 250px; /* Increased min-width */
  max-width: 320px; /* Added max-width */
  max-height: 400px; /* Added max-height to prevent overflow */
  background: #374151;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #374151;
  padding: 4px 0;
  z-index: 1001;
  animation: submenuSlideInLeft 0.15s ease-out;
  overflow-y: auto; /* Changed from overflow: scroll to overflow-y: auto */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* Custom scrollbar styling */
.submenu::-webkit-scrollbar {
  width: 6px;
}

.submenu::-webkit-scrollbar-track {
  background: #374151;
  border-radius: 3px;
}

.submenu::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 3px;
}

.submenu::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Firefox scrollbar */
.submenu {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Updated animation for left slide */
@keyframes submenuSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.submenu-item {
  width: 100%;
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #374151;
  font-size: 13px;
  text-align: left;
  min-height: 36px; /* Added min-height for consistency */
  box-sizing: border-box; /* Ensure padding is included in height */
}

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

.submenu-item:hover:not(.disabled) {
  background: #374151;
  color: #1f2937;
}

.submenu-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Submenu content styling */
.submenu-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden; /* Prevent text overflow */
}

.submenu-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.submenu-subtitle {
  font-size: 11px;
  color: #6b7280;
  font-weight: 400;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Different styling for static vs tenant items */
.static-item {
  border-left: 3px solid transparent;
}

.tenant-item {
  border-left: 3px solid #374151;
  background: transparent;
}

.tenant-item:hover:not(.disabled) {
  background: #e0f2fe;
  border-left-color: #1976d2;
}

/* Submenu divider */
.submenu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
  flex-shrink: 0; /* Prevent divider from shrinking */
}

/* Loading state */
.submenu-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #6b7280;
  font-size: 13px;
  min-height: 36px;
}

.spinner-small {
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

/* Empty state */
.submenu-empty {
  padding: 12px 16px;
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
  font-style: italic;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Item counter for debugging */
.submenu-counter {
  padding: 4px 16px;
  font-size: 11px;
  color: #9ca3af;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  text-align: center;
}

/* Info Section */
.profile-info-section {
  padding: 16px 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.info-value {
  font-size: 13px;
  color: #1e293b;
  font-weight: 500;
}

.session-active {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Actions */
.profile-actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  color: #374151;
}

.action-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.profile-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #3b82f6;
}

.settings-btn:hover {
  background: #f3f4f6;
  border-color: #6b7280;
  color: #374151;
}

.help-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}

/* Divider */
.profile-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 8px 20px;
}

/* Footer */
.profile-footer {
  padding: 12px 20px;
}

.sign-out-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ef4444;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sign-out-btn:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.sign-out-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 480px) {
  .profile-panel {
    width: 280px;
  }
  
  .profile-header {
    padding: 16px;
  }
  
  .submenu {
    right: 100%;
    min-width: 200px;
    max-width: 250px;
    max-height: 300px; /* Reduced height on mobile */
  }
  
  .submenu-title {
    max-width: 150px; /* Limit text width on mobile */
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .profile-panel,
  .submenu {
    background: #1f2937;
    border-color: #374151;
  }
  
  .menu-item,
  .submenu-item {
    color: #d1d5db;
  }
  
  .menu-item:hover,
  .submenu-item:hover:not(.disabled) {
    background: #374151;
    color: #f9fafb;
  }
  
  .profile-divider,
  .submenu-divider {
    background: #374151;
  }
  
  .submenu-arrow {
    color: #6b7280;
  }
  
  .submenu::-webkit-scrollbar-track {
    background: #374151;
  }
  
  .submenu::-webkit-scrollbar-thumb {
    background: #6b7280;
  }
  
  .submenu-counter {
    background: #374151;
    border-color: #4b5563;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .menu-item,
  .submenu-item {
    border: 1px solid transparent;
  }
  
  .menu-item:hover,
  .submenu-item:hover:not(.disabled) {
    border-color: currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .submenu {
    animation: none;
  }
  
  .submenu-arrow,
  .menu-item,
  .submenu-item {
    transition: none;
  }
}.profile-container {
  position: relative;
  display: inline-block;
}

.profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  color: inherit;
}

.profile-badge:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.profile-badge.active {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.profile-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-name {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.profile-arrow {
  transition: transform 0.2s ease;
  color: #6b7280;
}

.profile-arrow.rotated {
  transform: rotate(180deg);
}

.profile-panel-container {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .profile-name {
    display: none;
  }
  
  .profile-panel-container {
    right: -50px;
  }
}

@media (max-width: 480px) {
  .profile-panel-container {
    right: -100px;
  }
}.notifications-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.notifications-page.in-tab {
  padding: 0;
  background: transparent;
  min-height: auto;
}

/* Header Actions Bar */
.notifications-actions-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #dee2e6;
  flex-shrink: 0;
}

.btn-notification-settings,
.btn-set-all-read {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-notification-settings {
  background: #17a2b8;
  color: white;
}

.btn-notification-settings:hover {
  background: #138496;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-set-all-read {
  background: #17a2b8;
  color: white;
}

.btn-set-all-read:hover {
  background: #138496;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Table Container - Fixed Height with Scroll */
.notifications-table-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: white;
  border-radius: 0;
  box-shadow: none;
}

.notifications-table-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

.notifications-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.notifications-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.notifications-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  background: #f8f9fa;
}

.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sort-indicator {
  color: #6c757d;
  font-size: 12px;
  margin-left: 4px;
}

.notifications-table tbody tr {
  border-bottom: 1px solid #dee2e6;
  transition: background-color 0.2s;
}

.notifications-table tbody tr:hover {
  background-color: #f8f9fa;
}

.notifications-table tbody tr.unread-row {
  background-color: #e7f3ff;
  font-weight: 500;
}

.notifications-table tbody tr.unread-row:hover {
  background-color: #d0e7ff;
}

.notifications-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #495057;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-title-cell {
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-message-cell {
  color: #495057;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.notification-message-cell strong {
  color: #212529;
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}

.notification-message-cell br {
  display: block;
  content: "";
  margin-top: 4px;
}

.no-data {
  padding: 60px 20px !important;
  text-align: center;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.no-data-icon {
  font-size: 48px;
  opacity: 0.5;
}

.no-data-content p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
}

/* Pagination - Fixed at Bottom */
.notifications-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  flex-wrap: wrap;
  gap: 16px;
  flex-shrink: 0;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  min-width: 36px;
}

.pagination-btn:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
}

.page-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #495057;
}

.page-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.page-input:focus {
  outline: none;
  border-color: #17a2b8;
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.1);
}

/* Remove spinner arrows from number input */
.page-input::-webkit-inner-spin-button,
.page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-input[type=number] {
  -moz-appearance: textfield;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.items-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #495057;
}

.page-size-select {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.page-size-select:focus {
  outline: none;
  border-color: #17a2b8;
  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.1);
}

.displaying-info {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.refresh-container {
  display: flex;
  align-items: center;
}

.refresh-btn {
  padding: 6px 12px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s;
  min-width: 36px;
}

.refresh-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: rotate(180deg);
}

/* Custom Scrollbar */
.notifications-table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.notifications-table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.notifications-table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.notifications-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Loading Overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.loading-spinner {
  font-size: 16px;
  color: #17a2b8;
  font-weight: 500;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .notifications-actions-bar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .notifications-actions-bar button {
    flex: 1;
    min-width: 150px;
  }

  .notifications-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .pagination-controls,
  .pagination-info {
    justify-content: center;
  }

  .displaying-info {
    text-align: center;
  }
}

/* Adjust for in-tab mode */
.notifications-page.in-tab .notifications-table-container {
  border-radius: 0;
  box-shadow: none;
  height: calc(100vh - 200px); /* Adjust based on your layout */
}.notification-panel {
  width: 380px;
  max-height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.notification-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.unread-badge {
  background: #ef4444;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  min-width: 20px;
  text-align: center;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #64748b;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

/* Filters */
.notification-filters {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  background: white;
}

.filter-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.filter-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.filter-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: #eff6ff;
}

/* Actions */
.notification-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.action-btn {  
  border: 1px solid #d1d5db;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.action-btn.mark-all {
  color: #3b82f6;
  border-color: #3b82f6;
}

.action-btn.mark-all:hover {
  background: #3b82f6;
  color: white;
}

.action-btn.clear-all {
  color: #ef4444;
  border-color: #ef4444;
}

.action-btn.clear-all:hover {
  background: #ef4444;
  color: white;
}

/* Notifications List */
.notification-list {
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s ease;
  position: relative;
}

.notification-item:hover {
  background: #f8fafc;
}

.notification-item.unread {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
}

.notification-item.priority-high {
  border-left: 4px solid #ef4444;
}

.notification-item.priority-high.unread {
  background: #fef2f2;
}

.notification-content {
  display: flex;
  gap: 12px;
  flex: 1;
}

.notification-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.notification-body {
  flex: 1;
  min-width: 0;
}

.notification-text h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
}

.notification-text p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  word-wrap: break-word;
}

.notification-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.notification-time {
  font-size: 12px;
  color: #94a3b8;
}

.priority-indicator {
  font-size: 11px;
  background: #fef2f2;
  color: #dc2626;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.notification-actions-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 8px;
}

.mark-read-btn,
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.mark-read-btn:hover {
  background: #dcfce7;
  opacity: 1;
}

.delete-btn:hover {
  background: #fef2f2;
  opacity: 1;
}

/* No notifications */
.no-notifications {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.no-notifications-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-notifications p {
  margin: 0;
  font-size: 14px;
}

/* Footer */
.notification-footer {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.view-all-btn {
  width: 100%;
  background: none;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  color: #3b82f6;
  font-size: 14px;
  transition: all 0.2s ease;
}

.view-all-btn:hover {
  background: #3b82f6;
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .notification-panel {
    width: 320px;
  }
  
  .notification-item {
    padding: 12px 16px;
  }
  
  .notification-header {
    padding: 12px 16px;
  }
  
  .notification-actions {
    padding: 8px 16px;
  }
}

/* Scrollbar styling */
.notification-list::-webkit-scrollbar {
  width: 6px;
}

.notification-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.notification-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* Attempts List */
.attempts-list {
  padding: 16px 0;
  max-height: 400px;
  overflow-y: auto;
}

/* Custom Scrollbar */
.attempts-list::-webkit-scrollbar {
  width: 6px;
}

.attempts-list::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.attempts-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.attempts-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Attempt Item */
.attempt-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.2s ease;
}

.attempt-item:hover {
  background: #f8fafc;
}

.attempt-item:last-child {
  border-bottom: none;
}

/* Avatar */
.attempt-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.avatar-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
  border: 2px solid;
}

.avatar-icon.success {
  background: #f0f9ff;
  border-color: #10b981;
  color: #10b981;
}

.avatar-icon.failed {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}

/* Status Badge */
.status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.success {
  background: #dcfce7;
  color: #16a34a;
}

.status-badge.failed {
  background: #fee2e2;
  color: #dc2626;
}

/* Details */
.attempt-details {
  flex: 1;
  min-width: 0;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-weight: 500;
  color: #6b7280;
  font-size: 13px;
  min-width: 70px;
  flex-shrink: 0;
}

.detail-value {
  color: #374151;
  font-size: 13px;
  word-break: break-word;
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .login-attempts-modal {
    width: 95%;
    max-height: 90vh;
  }
  .attempt-item {
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .attempt-avatar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  
  .avatar-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 0;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 4px;
  }
  
  .detail-label {
    min-width: auto;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) { 
    
  .attempt-item {
    border-color: #374151;
  }
  
  .attempt-item:hover {
    background: #374151;
  }
  
  .detail-label {
    color: #050505;
  }
  
  .detail-value {
    color: #151616;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 20px;
}

.accounts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.accounts-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.accounts-table tbody {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  max-height: calc(80vh - 280px); /* Adjust based on header + footer + pagination height */
}

.accounts-table tbody::-webkit-scrollbar {
  width: 8px;
}

.accounts-table tbody::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.accounts-table tbody::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.accounts-table tbody::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.accounts-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.accounts-table th,
.accounts-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.row-number-header,
.row-number {
  width: 60px;
  text-align: center;
}

.accounts-table th:nth-child(2),
.accounts-table td:nth-child(2) {
  width: 35%;
}

.accounts-table th:nth-child(3),
.accounts-table td:nth-child(3) {
  width: 25%;
}

.accounts-table th:nth-child(4),
.accounts-table td:nth-child(4) {
  width: 25%;
}

.accounts-table th:nth-child(5),
.accounts-table td:nth-child(5) {
  width: 15%;
  text-align: center;
}

/* Action Buttons */
.table-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-btn {
  background: #0ea5e9;
  color: white;
}

.login-btn:hover {
  background: #0284c7;
}

.delete-btn {
  background: transparent;
  color: #ef4444;
  padding: 6px;
}

.delete-btn:hover {
  background: #fee2e2;
}

/* Pagination */
.pagination-container {
  padding: 16px 0;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: white;
  flex-shrink: 0; /* Prevent shrinking */
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.pagination-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.page-input {
  width: 50px;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}

.page-input:focus {
  outline: none;
  border-color: #0ea5e9;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.items-per-page {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.page-size-select {
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: white;
}

.page-size-select:focus {
  outline: none;
  border-color: #0ea5e9;
}

.displaying-info {
  color: #64748b;
}

.refresh-container {
  display: flex;
  align-items: center;
}

.refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #64748b;
}

.refresh-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: rotate(180deg);
}

.refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

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

/* Ensure toast containers are above modals */
#toast-container {
  z-index: 99999 !important;
  pointer-events: none !important;
}

#toast-container > * {
  pointer-events: auto !important;
}

.error-detail-modal-overlay {
  z-index: 100000 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .accounts-table tbody {
    max-height: calc(85vh - 320px);
  }

  .pagination-container {
    flex-direction: column;
    gap: 12px;
  }

  .pagination-controls {
    width: 100%;
    justify-content: center;
  }

  .pagination-info {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .refresh-container {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .accounts-table th,
  .accounts-table td {
    padding: 8px 12px;
    font-size: 12px;
  }

  .accounts-table tbody {
    max-height: calc(85vh - 350px);
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Import common modal styles */

/* User Profile Modal Container */

.user-profile-modal-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;  
  height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  overflow: auto;
}

/* Profile Form */

.profile-form {
  display: flex;
  flex-direction: column;
  padding: 8px;
}

.enable-favorites-toggle{ 
  height: 5vh;
  padding: 5px;
  position: relative;
  display: inline-block;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}


@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.receive-notifications-toggle{ 
  height: 5vh;
  padding: 5px;
  position: relative;
  display: inline-block;
}

/* Checkbox styling */
.notification-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #17a2b8;
}

.notification-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.notification-checkbox:hover:not(:disabled) {
  transform: scale(1.1);
  transition: transform 0.2s;
}


.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 5px;
}

.settings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.settings-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-table tbody {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  max-height: calc(80vh - 280px); /* Adjust based on header + footer + pagination height */
}

.settings-table tbody::-webkit-scrollbar {
  width: 8px;
}

.settings-table tbody::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.settings-table tbody::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.settings-table tbody::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.settings-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.settings-table th,
.settings-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

.row-number-header,
.row-number {
  width: 60px;
  text-align: center;
}

.settings-table th:nth-child(2),
.settings-table td:nth-child(2) {
  width: 10%;
}

.settings-table th:nth-child(3),
.settings-table td:nth-child(3) {
  width: 80%;
}

.settings-table th:nth-child(4),
.settings-table td:nth-child(4) {
  width: 25%;
}

.settings-table th:nth-child(5),
.settings-table td:nth-child(5) {
  width: 15%;
  text-align: center;
}

/* Center align checkbox cell */
.settings-table td:first-child + td {
  text-align: center;
}

@media (max-width: 480px) {
  .settings-table th,
  .settings-table td {
    padding: 8px 12px;
    font-size: 12px;
  }

  .settings-table tbody {
    max-height: calc(85vh - 350px);
  }
}