:root {
  --app-text-input-font-family: var(--app-text-secondary-font);
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Inter", sans-serif;
  font-family: var(--app-text-main-font, "Inter"), sans-serif;
}

input, textarea, select {
  font-family: "Inter";
  font-family: "Inter", sans-serif;
  font-family: var(--app-text-secondary-font, "Inter"), sans-serif;
}

.__react_component_tooltip .multi-line {
  text-align: left !important;
}

.error-message {
  color: #eb5757;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  font-family: var(--app-text-secondary-font, "Inter"), sans-serif;
}

.carousel-root {
  height: -webkit-fill-available !important;
}

.carousel-slider {
  height: -webkit-fill-available !important;
}

.rmsc .gray {
  color: #0B0B28 !important;
  color: var(--alvanda-dark-purple) !important;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Inter", sans-serif;
  font-family: var(--app-text-main-font, "Inter"), sans-serif;
  color: #0B0B28;
  color: var(--alvanda-dark-purple);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F7F7FD;
  background-color: var(--alvanda-invisible-purple);
}

body > div {
  margin: 0;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-family: var(--app-text-main-font, "Inter"), sans-serif;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: #EBEBF9;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #AFAFE9;
  border-radius: 5px;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}
.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid #4a4a4a;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

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

input {
  outline: none;
}

.react-tel-input {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input[focus-within],
.react-tel-input.focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input:focus-within,
.react-tel-input.focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input[focus-within],
.react-tel-input.focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input:focus-within,
.react-tel-input.focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input[focus-within],
.react-tel-input.focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input[focus-within],
.react-tel-input:focus-visible {
  outline: none;
  border: none;
}

.react-tel-input:active,
.react-tel-input:focus,
.react-tel-input:focus-within,
.react-tel-input:focus-visible {
  outline: none;
  border: none;
}

.customMultiSelect .rmsc .dropdown-container {
  border: medium none currentColor !important;
  border: initial !important;
  border-radius: 4px !important;
}

.rmsc.custom {
  width: 100%;
  --rmsc-main: rgba(11, 11, 40, 0.2);
  --rmsc-hover: white;
  --rmsc-selected: white;
  --rmsc-border: rgba(11, 11, 40, 0.2);
  --rmsc-gray: rgb(133, 133, 147);
  --rmsc-bg: var(--alvanda-invisible-purple);
  --rmsc-p: 16px; /* Spacing */
  --rmsc-radius: 2px; /* Radius */
  --rmsc-h: 40px; /* Height */
  font-family: "Inter";
  font-family: var(--app-text-secondary-font);
}

.rmsc.custom input[type=checkbox] {
  accent-color: #3030AD;
  accent-color: var(--alvanda-branding-primary);
}

.rmsc .dropdown-content {
  padding-top: 4px !important;
  z-index: 1000 !important;
}

.rmsc .dropdown-container[focus-within] {
  box-shadow: none !important;
}

.rmsc .dropdown-container[focus-within] {
  border-color: var(--rmsc-main);
}

.rmsc .dropdown-container:focus-within {
  box-shadow: none !important;
}

.rmsc .dropdown-container:focus-within {
  border-color: var(--rmsc-main);
}

.dropdown-heading-value span {
  font-weight: 400 !important;
  font-family: "Inter" !important;
  font-family: var(--app-text-secondary-font) !important;
  font-size: 16px !important;
}

.react-tel-input .selected-flag .flag {
  transform: scale(1.5);
  margin-left: 10px;
}

.react-tel-input .selected-flag.open:before {
  content: normal;
  content: initial;
  display: none;
}

.react-tel-input .flag-dropdown {
  border: none !important;
}

.react-tel-input .flag-dropdown {
  background-color: transparent;
}

.react-tel-input .flag-dropdown :hover {
  background-color: #F7F7FD !important;
  background-color: var(--alvanda-invisible-purple) !important;
}

.react-toggle-track {
  width: 30px !important;
  height: 15px !important;
}

.react-toggle-thumb {
  height: 13px !important;
  width: 13px !important;
}

.react-toggle--checked .react-toggle-thumb {
  left: 16px !important;
}

.react-toggle-track-x {
  display: none !important;
}

.react-toggle-track-check {
  display: none !important;
}

.toggle.react-toggle--checked .react-toggle-track {
  background-color: #4D4DE6;
  background-color: var(--alvanda-highlight-purple);
}

.toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #4D4DE6;
  background-color: var(--alvanda-highlight-purple);
}

.toggle.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: #4D4DE6;
  background-color: var(--alvanda-highlight-purple);
}

.react-toggle-track {
  background-color: #4D4DE6;
  background-color: var(--alvanda-highlight-purple);
}

.toggle.react-toggle--checked .react-toggle-thumb {
  border-color: #4a4a4a;
  border-color: var(--app-color-gray-dark);
}

.toggle.react-toggle--focus .react-toggle-thumb {
  box-shadow: 0px 0px 1px 1px #4a4a4a;
  box-shadow: 0px 0px 1px 1px var(--app-color-gray-dark);
}

.toggle.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
  box-shadow: 0px 0px 2px 2px #4a4a4a;
  box-shadow: 0px 0px 2px 2px var(--app-color-gray-dark);
}

[data-reach-dialog-overlay] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 50;
  z-index: var(--app-modal-backdrop-zIndex);
}

[data-reach-dialog-content] {
  /* width: 20vw;*/
  margin: 10vh auto;
  background: #ffffff;
  background: var(--app-color-white-lightest);
  padding: 2rem;
  outline: none;
}

.blured {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

.safariBlured {
  background: rgba(109, 109, 109, 0.5960784314);
}

@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .safariBlured {
    background: rgba(109, 109, 109, 0.5960784314);
    animation: changeWidth 10s linear infinite;
  }
}
.customWeekCalender .react-datepicker__day-name, .customWeekCalender .react-datepicker__day {
  font-size: 12px !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
}

.customWeekCalender .react-datepicker__day {
  font-weight: 400 !important;
}

.customWeekCalender .react-datepicker__header {
  background-color: white !important;
  margin-top: 10px !important;
  font-weight: 600 !important;
}

.customWeekCalender .react-datepicker__header {
  font-size: 12px;
  font-family: "Inter";
  font-family: var(--app-font-inter);
}

.customWeekCalender .react-datepicker__current-month {
  margin-bottom: 10px !important;
}

.customWeekCalender .react-datepicker__navigation {
  position: absolute !important;
  top: 61px !important;
  height: 12px !important;
  width: 12px !important;
}

.customWeekCalender .react-datepicker__day--keyboard-selected {
  background: none !important;
  color: black !important;
}

.customWeekCalender .react-datepicker__day--in-range, .customWeekCalender .react-datepicker__day--in-selecting-range {
  background: #AFAFE9 !important;
  background: var(--alvanda-medium-purple) !important;
  color: white !important;
}

.customWeekCalender .react-datepicker__day--range-start, .customWeekCalender .react-datepicker__day--range-end, .customWeekCalender .react-datepicker__day--selecting-range-start, .customWeekCalender .react-datepicker__day--selecting-range-end {
  background: #3030AD !important;
  background: var(--alvanda-purple) !important;
  color: white !important;
}

.customWeekCalender .react-datepicker__navigation--previous {
  left: 196px !important;
}

.customWeekCalender .react-datepicker__navigation--next {
  right: 54px !important;
}

.react-datepicker__triangle {
  left: -24px !important;
}

.react-datepicker__year-option .react-datepicker__navigation--years-upcoming,
.react-datepicker__year-option .react-datepicker__navigation--years-previous {
  display: inline-block;
  height: 14px;
  margin-bottom: 4px;
  background: url("data:image/svg+xml,%3csvg%20width='14'%20height='8'%20viewBox='0%200%2014%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1%201L7%207L13%201'%20stroke='%23BDBDBD'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat center center;
}

.react-datepicker__year-option .react-datepicker__navigation--years-upcoming {
  transform: rotate(180deg);
  height: 10px;
  margin-top: 10px;
  margin-bottom: 0;
}

.basePhoneStyle {
  all: unset !important;
}

.basePhoneStyle .react-international-phone-input-container {
  height: 100% !important;
  width: 100% !important;
}

.basePhoneStyle .react-international-phone-input-container input {
  all: unset !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-dial-code-preview {
  background: none !important;
  border: none !important;
  font-size: 16px !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector {
  width: 30px !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector button {
  width: 100% !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector {
  width: 56px !important;
  height: 40px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector button {
  all: unset !important;
  height: 100% !important;
  width: 100% !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector button .react-international-phone-country-selector-button__button-content {
  gap: 5px !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector button .react-international-phone-country-selector-button__button-content img {
  all: unset !important;
  height: 26px !important;
  width: 26px !important;
}

.basePhoneStyle .react-international-phone-input-container .react-international-phone-country-selector .react-international-phone-flag-emoji {
  width: 24px !important;
  height: 24px !important;
}

.badgeCount {
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-hyphens: auto;
          hyphens: auto;
  position: absolute;
  border-radius: 50%;
  top: -8px;
  left: 150px;
  background-color: #3030AD;
  background-color: var(--alvanda-purple);
  height: 20px;
  min-width: 20px;
  max-width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.badgeCount p {
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  -webkit-hyphens: auto;
          hyphens: auto;
  padding: 0px 5px;
  margin: 0;
  font-family: "Inter";
  font-family: var(--app-text-secondary-font);
  font-size: 1em;
  color: #ffffff;
  color: var(--app-color-white-lightest);
  text-align: center;
}

/* Icon Branding Classes */
.icon-primary {
  color: #3030AD;
  color: var(--icon-primary);
}

.icon-secondary {
  color: #EBEBF9;
  color: var(--icon-secondary);
}

.icon-accent {
  color: #0B0B28;
  color: var(--icon-accent);
}

.icon-muted {
  color: rgba(107, 114, 128, 0.8);
  color: var(--icon-muted);
}

/* Semantic status icons (keep accessibility colors) */
.icon-success {
  color: #219653;
  color: var(--app-color-success-default);
}

.icon-error {
  color: #EB5757;
  color: var(--app-color-error);
}

.icon-warning {
  color: #ffa008;
  color: var(--app-color-warning-default);
}

.icon-info {
  color: #353440;
  color: var(--app-color-info-default);
}

:root {
  --reach-dialog: 1;
  /* fonts */
  /* Branding font override */
  --app-font-inter: "Inter";
  --app-branding-font-family: var(--app-font-inter);
  --app-text-input-font-family: var(--app-font-inter);
  --app-text-main-font: var(--app-font-inter);
  --app-text-secondary-font: var(--app-font-inter);
}

@font-face {
  font-family: "Inter";
  src: url("/static/Inter-VariableFont_opsz_wght-c8O0ljhh.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/Inter-Italic-VariableFont_opsz_wght-B-9PvMw6.ttf") format("truetype");
  font-style: italic;
}
/*
 * #VIEWPORT VARIABLES
 *
 * Only the custom-media actually referenced by the app are kept; the unused
 * viewport breakpoints were removed in the SCSS cleanup. Re-add here if needed.
 *  - --app-viewport-small      -> spacings.scss
 *  - --app-viewport-medium-lt  -> widths.scss
**********************************************************/
:root {
  --app-width-side-menu-short: 110px;
  --app-width-side-menu-wide: 230px;
  --app-pageheader-height: 120px;
  --app-teaser-search-height: 188px;
}

@media (max-width: 1023px) {
  :root {
    --app-pageheader-height: 97px ;
  }
}
/* #SPACINGS (Base is 8px) */
/**********************************************************/
:root {
  /* spacings */
  --app-spacing-00: 0;
  --app-spacing-01: 8px;
  --app-spacing-02: 16px;
  --app-spacing-03: 24px;
  --app-spacing-04: 32px;
  --app-spacing-05: 40px;
  --app-spacing-06: 48px;
  --app-spacing-07: 56px;
  --app-spacing-08: 64px;
  --app-spacing-10: 80px;
  --app-spacing-12: 96px;
  --app-spacing-16: 128px;
  --app-spacing-20: 160px;
  /*  General page spacing left and right */
  --app-page-spacing-x: var(--app-spacing-04);
  /* colors */
  /* Dynamic branding colors (change with user branding settings) */
  /* Icon branding colors (for SVG icons using currentColor) with fallbacks */ /* Fallback to Alvanda purple */ /* Fallback to light purple */ /* Fallback to dark purple */ /* Fixed muted color for hierarchy */
  /* Fixed UI colors (don't change with branding) */
  /* Derived colors (auto-generated from branding) */
}

@media (max-width: 768px) {
  :root {
    --app-page-spacing-x: var(--app-spacing-03) ;
  }
}
:root {
  --app-slider-gap-x: var(--app-spacing-04);
}

/* Components Spacings */
@media (max-width: 768px) {
  :root {
    --app-slider-gap-x: var(--app-spacing-02) ;
  }
}
:root {
  --app-color-gray-dark: #4a4a4a;
  --app-color-gray-light: #9b9b9b;
  --app-color-gray-light_nuance: #979797;
  --app-color-gray-light_nuance2: #828282;
  --app-color-gray-lighter: #d2d2d2;
  --app-color-gray-lighter_nuance: #e0e0e0;
  --app-color-gray-lighter_nuance1: #f1f1f1;
  --app-color-gray-lighter_nuance2: #f2f2f2;
  --app-color-gray-lighter_nuance3: #d8d8d8;
  --app-color-gray-lighter_nuance4: #d1d1d1;
  --app-color-gray-lighter_nuance5: #6e6b6b;
  --app-color-gray-unselected: #bdbdbd;
  --app-color-gray-selected: #333333;
  --app-color-white-lightest: #ffffff;
  --app-color-white-dark: #f1f1f1;
  --app-color-red-error: #EB5757;
  --app-color-warning-default: #ffa008;
  --app-color-danger-default: #dc3535;
  --app-color-success-default: #219653;
  --app-color-info-default: #353440;
  --app-color-error: #EB5757;
  --app-color-success: #30e04d;
  --app-color-attention: #d4e030;
  --app-color-notice: #3042e0;
  --app-color-bg-default: #f1f1f1;
  --app-color-bg-dark-transparent: rgba(53,52,64,0.8);
  --app-color-bg-dark: #353440;
  --app-color-bg-light: #ffffff;
  --app-color-bg-light-transparent: rgba(255,255,255,0.8);
  --app-color-text-default: #000;
  --app-color-text-dark: #353440;
  --app-color-text-darker: #4a4a4a;
  --app-color-text-light: #949494;
  --app-color-text-placeholder-light: #949494;
  --app-color-text-placeholder-dark: #949494;
  --alvanda-dark-purple: #0B0B28;
  --alvanda-dark-purple_50: #858593;
  --alvanda-branding-primary: var(--app-primary-color, #3030AD);
  --alvanda-branding-secondary: var(--app-secondary-color, #EBEBF9);
  --alvanda-branding-accent: var(--app-accent-color, #0B0B28);
  --icon-primary: var(--alvanda-branding-primary, #3030AD);
  --icon-secondary: var(--alvanda-branding-secondary, #EBEBF9);
  --icon-accent: var(--alvanda-branding-accent, #0B0B28);
  --icon-muted: rgba(107, 114, 128, 0.8);
  --alvanda-purple: var(--alvanda-branding-primary, #3030AD);
  --alvanda-light-purple: var(--alvanda-branding-secondary, #EBEBF9);
  --alvanda-warning-orange: #F2994A;
  --alvanda-highlight-purple: var(--app-derived-highlight-color, #4D4DE6);
  --alvanda-invisible-purple: #F7F7FD;
  --alvanda-medium-purple: var(--app-derived-medium-color, #AFAFE9);
  --app-color-warning-light: #FFF4E6;
  --app-color-danger-light: #e6b8af;
  --app-color-success-light: #d9ead3;
  --app-page-menu-user-zIndex: 100;
  --app-modal-backdrop-zIndex: 50;
  --app-menu-hoover-zIndex:150;
}/*
 * Tailwind entry + semantic design tokens (the theming/branding bridge).
 *
 * - HSL-channel tokens (e.g. --background: 0 0% 100%) are consumed via hsl(var(--x))
 *   in tailwind.config.js. They define the neutral surface/text system per theme.
 * - Brand tokens (--primary, --ring) are FULL colors and default to the white-label
 *   runtime variable --app-primary-color (set per-company by BrandingSetting). This is
 *   how custom branding keeps working: change --app-primary-color and every primary
 *   surface follows, in both light and dark.
 * - A "preset" = a named set of these variable values. Add new presets under
 *   [data-preset="..."] without touching components.
 *
 * preflight is disabled (see tailwind.config.js) so this file does NOT reset the
 * legacy app. It only declares variables + emits the utility/component layers.
 */

*, ::before, ::after {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
        --tw-ring-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}

::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
        --tw-ring-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}
    :root {
        /* Cool-neutral surface/text system — LIGHT (default).
           Background is a clearly off-white cool grey so white cards/sidebar
           read as distinct surfaces (not a flat sheet of white). */
        --background: 220 24% 96.5%;
        --foreground: 222 40% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 40% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 40% 11%;
        --secondary: 220 17% 93.5%;
        --secondary-foreground: 222 33% 18%;
        --muted: 220 17% 93.5%;
        --muted-foreground: 220 12% 42%;
        --accent: 220 18% 91%;
        --accent-foreground: 222 33% 18%;
        --destructive: 0 79% 63%;           /* #EB5757 */
        --destructive-foreground: 0 0% 100%;
        --success: 145 63% 42%;
        --success-foreground: 0 0% 100%;
        --warning: 28 87% 62%;              /* #F2994A */
        --warning-foreground: 28 90% 14%;
        --border: 220 17% 86%;
        --input: 220 16% 84%;

        /* sidebar (white rail on the cool-grey app bg; active = faint brand tint) */
        --sidebar: 0 0% 100%;
        --sidebar-foreground: 222 14% 36%;
        --sidebar-border: 220 17% 88%;
        --sidebar-accent: 240 60% 96.5%;

        /* brand — honors white-label injection (--app-primary-color); Alvanda purple #3030AD */
        --primary: var(--app-primary-color, #3030ad);
        --primary-foreground: var(--app-primary-foreground, #ffffff);
        --primary-hover: var(--app-derived-highlight-color, #28289a);
        --ring: var(--app-primary-color, #3030ad);

        --radius: 0.75rem;
    }

    [data-theme='dark'] {
        /* ZINC dark — soft near-black zinc */
        --background: 240 3% 5%;
        --foreground: 240 2% 97%;
        --card: 240 3% 8%;
        --card-foreground: 240 2% 97%;
        --popover: 240 3% 8%;
        --popover-foreground: 240 2% 97%;
        --secondary: 240 2% 13%;
        --secondary-foreground: 240 2% 96%;
        --muted: 240 2% 12%;
        --muted-foreground: 240 8% 66%;
        --accent: 240 2% 14%;
        --accent-foreground: 240 2% 96%;
        --destructive: 0 72% 60%;
        --destructive-foreground: 0 0% 100%;
        --success: 145 55% 50%;
        --success-foreground: 145 60% 8%;
        --warning: 28 87% 64%;
        --warning-foreground: 28 90% 12%;
        --border: 240 2% 14%;
        --input: 240 2% 16%;

        --sidebar: 240 3% 8%;
        --sidebar-foreground: 240 6% 66%;
        --sidebar-border: 240 2% 14%;
        --sidebar-accent: 240 22% 18%;

        /* Alvanda purple; on dark the fallback is the official Alvanda HIGHLIGHT purple
           (#4D4DE6) for legibility on near-black. White-label --app-primary-color still wins. */
        --primary: var(--app-primary-color, #4d4de6);
        --primary-foreground: var(--app-primary-foreground, #ffffff);
        --primary-hover: var(--app-derived-highlight-color, #6a6af0);
        --ring: var(--app-primary-color, #4d4de6);
    }

    /*
     * Preflight is disabled globally (so the legacy SCSS app isn't reset). That
     * means native form controls keep their user-agent border + background,
     * which leaks through as "thick" button borders/bevels in the new UI.
     *
     * Scope a minimal reset to the v2 shell (.v2-app). The universal selector
     * keeps specificity equal to a Tailwind utility (0,1,0), so `border`,
     * `bg-*`, etc. still win by source order — only the UA defaults are removed.
     */
    .v2-app *,
    .v2-app *::before,
    .v2-app *::after {
        border-width: 0;
        border-style: solid;
    }
    /* Remove the native form-control background (the UA default that leaked with
       preflight off) — scoped to FORM CONTROLS, not every element. The scope class
       sits in :where() so the selector stays at Tailwind-preflight specificity
       (0,0,1): strong enough to kill UA defaults (author styles always beat the
       user agent), weak enough to lose to ANY authored class regardless of bundle
       order. History: `.v2-app *` (0,1,0) tied with module CSS and won by prod
       chunk order (see-through modals); rescoping to `.v2-app button` (0,1,1)
       out-ranked bg-* utilities (0,1,0) and blanked shadcn buttons at rest. */
    :where(.v2-app) button,
    :where(.v2-app) input,
    :where(.v2-app) optgroup,
    :where(.v2-app) select,
    :where(.v2-app) textarea {
        background-color: transparent;
    }
    :where(.v2-app) button { cursor: pointer; }
.\!container {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
}
.container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
}
@media (min-width: 1400px) {

        .\!container {
                max-width: 1400px !important;
        }

        .container {
                max-width: 1400px;
        }
}
.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
}
.pointer-events-none {
        pointer-events: none;
}
.pointer-events-auto {
        pointer-events: auto;
}
.\!visible {
        visibility: visible !important;
}
.visible {
        visibility: visible;
}
.invisible {
        visibility: hidden;
}
.collapse {
        visibility: collapse;
}
.static {
        position: static;
}
.fixed {
        position: fixed;
}
.absolute {
        position: absolute;
}
.relative {
        position: relative;
}
.sticky {
        position: sticky;
}
.inset-0 {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
}
.inset-3 {
        top: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
}
.inset-x-0 {
        left: 0px;
        right: 0px;
}
.inset-y-0 {
        top: 0px;
        bottom: 0px;
}
.inset-y-1 {
        top: 0.25rem;
        bottom: 0.25rem;
}
.inset-y-3 {
        top: 0.75rem;
        bottom: 0.75rem;
}
.inset-y-\[6px\] {
        top: 6px;
        bottom: 6px;
}
.inset-y-\[9px\] {
        top: 9px;
        bottom: 9px;
}
.-bottom-0\.5 {
        bottom: -0.125rem;
}
.-bottom-1 {
        bottom: -0.25rem;
}
.-bottom-1\.5 {
        bottom: -0.375rem;
}
.-bottom-24 {
        bottom: -6rem;
}
.-left-16 {
        left: -4rem;
}
.-right-0\.5 {
        right: -0.125rem;
}
.-right-1 {
        right: -0.25rem;
}
.-right-1\.5 {
        right: -0.375rem;
}
.-right-16 {
        right: -4rem;
}
.-top-0\.5 {
        top: -0.125rem;
}
.-top-1 {
        top: -0.25rem;
}
.-top-1\.5 {
        top: -0.375rem;
}
.-top-24 {
        top: -6rem;
}
.-top-3 {
        top: -0.75rem;
}
.bottom-0 {
        bottom: 0px;
}
.bottom-1 {
        bottom: 0.25rem;
}
.bottom-2 {
        bottom: 0.5rem;
}
.bottom-20 {
        bottom: 5rem;
}
.bottom-3 {
        bottom: 0.75rem;
}
.bottom-4 {
        bottom: 1rem;
}
.bottom-5 {
        bottom: 1.25rem;
}
.bottom-6 {
        bottom: 1.5rem;
}
.bottom-\[3vh\] {
        bottom: 3vh;
}
.bottom-\[5\.25rem\] {
        bottom: 5.25rem;
}
.bottom-\[calc\(100\%\+8px\)\] {
        bottom: calc(100% + 8px);
}
.left-0 {
        left: 0px;
}
.left-1 {
        left: 0.25rem;
}
.left-1\/2 {
        left: 50%;
}
.left-2 {
        left: 0.5rem;
}
.left-3 {
        left: 0.75rem;
}
.left-4 {
        left: 1rem;
}
.left-\[11px\] {
        left: 11px;
}
.left-\[4\.5px\] {
        left: 4.5px;
}
.left-\[5px\] {
        left: 5px;
}
.left-\[8px\] {
        left: 8px;
}
.left-auto {
        left: auto;
}
.right-0 {
        right: 0px;
}
.right-1 {
        right: 0.25rem;
}
.right-1\.5 {
        right: 0.375rem;
}
.right-2 {
        right: 0.5rem;
}
.right-2\.5 {
        right: 0.625rem;
}
.right-3 {
        right: 0.75rem;
}
.right-4 {
        right: 1rem;
}
.right-6 {
        right: 1.5rem;
}
.right-9 {
        right: 2.25rem;
}
.top-0 {
        top: 0px;
}
.top-1 {
        top: 0.25rem;
}
.top-1\.5 {
        top: 0.375rem;
}
.top-1\/2 {
        top: 50%;
}
.top-2 {
        top: 0.5rem;
}
.top-20 {
        top: 5rem;
}
.top-4 {
        top: 1rem;
}
.top-6 {
        top: 1.5rem;
}
.top-7 {
        top: 1.75rem;
}
.top-\[10vh\] {
        top: 10vh;
}
.top-\[13vh\] {
        top: 13vh;
}
.top-\[15px\] {
        top: 15px;
}
.top-\[3vh\] {
        top: 3vh;
}
.top-\[64px\] {
        top: 64px;
}
.z-10 {
        z-index: 10;
}
.z-\[1000\] {
        z-index: 1000;
}
.z-\[1001\] {
        z-index: 1001;
}
.z-\[1100\] {
        z-index: 1100;
}
.z-\[1200\] {
        z-index: 1200;
}
.z-\[1\] {
        z-index: 1;
}
.z-\[2\] {
        z-index: 2;
}
.z-\[3\] {
        z-index: 3;
}
.z-\[5\] {
        z-index: 5;
}
.z-\[var\(--z-popover\)\] {
        z-index: var(--z-popover);
}
.z-\[var\(--z-sticky\)\] {
        z-index: var(--z-sticky);
}
.z-\[var\(--z-toast\)\] {
        z-index: var(--z-toast);
}
.order-1 {
        order: 1;
}
.order-2 {
        order: 2;
}
.order-3 {
        order: 3;
}
.order-last {
        order: 9999;
}
.-m-1 {
        margin: -0.25rem;
}
.m-0 {
        margin: 0px;
}
.m-5 {
        margin: 1.25rem;
}
.m-auto {
        margin: auto;
}
.-mx-1 {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
}
.-mx-1\.5 {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
}
.-mx-2 {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
}
.-mx-5 {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
}
.-my-1 {
        margin-top: -0.25rem;
        margin-bottom: -0.25rem;
}
.-my-2\.5 {
        margin-top: -0.625rem;
        margin-bottom: -0.625rem;
}
.mx-0\.5 {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
}
.mx-1 {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
}
.mx-1\.5 {
        margin-left: 0.375rem;
        margin-right: 0.375rem;
}
.mx-2 {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
}
.mx-3 {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
}
.mx-3\.5 {
        margin-left: 0.875rem;
        margin-right: 0.875rem;
}
.mx-4 {
        margin-left: 1rem;
        margin-right: 1rem;
}
.mx-5 {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
}
.mx-auto {
        margin-left: auto;
        margin-right: auto;
}
.my-0 {
        margin-top: 0px;
        margin-bottom: 0px;
}
.my-0\.5 {
        margin-top: 0.125rem;
        margin-bottom: 0.125rem;
}
.my-1 {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
}
.my-1\.5 {
        margin-top: 0.375rem;
        margin-bottom: 0.375rem;
}
.my-10 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
}
.my-2 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
}
.my-3 {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
}
.my-5 {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
}
.-ml-2\.5 {
        margin-left: -0.625rem;
}
.-ml-\[1\.45em\] {
        margin-left: -1.45em;
}
.-mr-1 {
        margin-right: -0.25rem;
}
.-mr-1\.5 {
        margin-right: -0.375rem;
}
.-mt-0\.5 {
        margin-top: -0.125rem;
}
.-mt-1 {
        margin-top: -0.25rem;
}
.-mt-2 {
        margin-top: -0.5rem;
}
.-mt-4 {
        margin-top: -1rem;
}
.mb-0 {
        margin-bottom: 0px;
}
.mb-0\.5 {
        margin-bottom: 0.125rem;
}
.mb-1 {
        margin-bottom: 0.25rem;
}
.mb-1\.5 {
        margin-bottom: 0.375rem;
}
.mb-2 {
        margin-bottom: 0.5rem;
}
.mb-2\.5 {
        margin-bottom: 0.625rem;
}
.mb-3 {
        margin-bottom: 0.75rem;
}
.mb-3\.5 {
        margin-bottom: 0.875rem;
}
.mb-4 {
        margin-bottom: 1rem;
}
.mb-5 {
        margin-bottom: 1.25rem;
}
.mb-6 {
        margin-bottom: 1.5rem;
}
.mb-7 {
        margin-bottom: 1.75rem;
}
.mb-8 {
        margin-bottom: 2rem;
}
.ml-0\.5 {
        margin-left: 0.125rem;
}
.ml-1 {
        margin-left: 0.25rem;
}
.ml-1\.5 {
        margin-left: 0.375rem;
}
.ml-2 {
        margin-left: 0.5rem;
}
.ml-3 {
        margin-left: 0.75rem;
}
.ml-4 {
        margin-left: 1rem;
}
.ml-5 {
        margin-left: 1.25rem;
}
.ml-\[14px\] {
        margin-left: 14px;
}
.ml-\[18px\] {
        margin-left: 18px;
}
.ml-\[5px\] {
        margin-left: 5px;
}
.ml-auto {
        margin-left: auto;
}
.mr-1 {
        margin-right: 0.25rem;
}
.mr-1\.5 {
        margin-right: 0.375rem;
}
.mr-2 {
        margin-right: 0.5rem;
}
.mr-auto {
        margin-right: auto;
}
.mt-0 {
        margin-top: 0px;
}
.mt-0\.5 {
        margin-top: 0.125rem;
}
.mt-1 {
        margin-top: 0.25rem;
}
.mt-1\.5 {
        margin-top: 0.375rem;
}
.mt-10 {
        margin-top: 2.5rem;
}
.mt-2 {
        margin-top: 0.5rem;
}
.mt-2\.5 {
        margin-top: 0.625rem;
}
.mt-3 {
        margin-top: 0.75rem;
}
.mt-3\.5 {
        margin-top: 0.875rem;
}
.mt-4 {
        margin-top: 1rem;
}
.mt-5 {
        margin-top: 1.25rem;
}
.mt-6 {
        margin-top: 1.5rem;
}
.mt-7 {
        margin-top: 1.75rem;
}
.mt-8 {
        margin-top: 2rem;
}
.mt-\[18px\] {
        margin-top: 18px;
}
.mt-\[1px\] {
        margin-top: 1px;
}
.mt-\[2px\] {
        margin-top: 2px;
}
.mt-\[30px\] {
        margin-top: 30px;
}
.mt-\[3px\] {
        margin-top: 3px;
}
.mt-auto {
        margin-top: auto;
}
.mt-px {
        margin-top: 1px;
}
.line-clamp-1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
}
.line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
}
.line-clamp-3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
}
.line-clamp-4 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
}
.line-clamp-6 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
}
.\!block {
        display: block !important;
}
.block {
        display: block;
}
.inline-block {
        display: inline-block;
}
.inline {
        display: inline;
}
.flex {
        display: flex;
}
.inline-flex {
        display: inline-flex;
}
.table {
        display: table;
}
.table-row {
        display: table-row;
}
.grid {
        display: grid;
}
.contents {
        display: contents;
}
.\!hidden {
        display: none !important;
}
.hidden {
        display: none;
}
.aspect-square {
        aspect-ratio: 1 / 1;
}
.aspect-video {
        aspect-ratio: 16 / 9;
}
.\!h-5 {
        height: 1.25rem !important;
}
.\!h-6 {
        height: 1.5rem !important;
}
.\!h-9 {
        height: 2.25rem !important;
}
.\!h-auto {
        height: auto !important;
}
.h-0\.5 {
        height: 0.125rem;
}
.h-1 {
        height: 0.25rem;
}
.h-1\.5 {
        height: 0.375rem;
}
.h-10 {
        height: 2.5rem;
}
.h-11 {
        height: 2.75rem;
}
.h-12 {
        height: 3rem;
}
.h-14 {
        height: 3.5rem;
}
.h-16 {
        height: 4rem;
}
.h-2 {
        height: 0.5rem;
}
.h-2\.5 {
        height: 0.625rem;
}
.h-20 {
        height: 5rem;
}
.h-24 {
        height: 6rem;
}
.h-3 {
        height: 0.75rem;
}
.h-3\.5 {
        height: 0.875rem;
}
.h-4 {
        height: 1rem;
}
.h-40 {
        height: 10rem;
}
.h-44 {
        height: 11rem;
}
.h-5 {
        height: 1.25rem;
}
.h-56 {
        height: 14rem;
}
.h-6 {
        height: 1.5rem;
}
.h-64 {
        height: 16rem;
}
.h-7 {
        height: 1.75rem;
}
.h-72 {
        height: 18rem;
}
.h-8 {
        height: 2rem;
}
.h-80 {
        height: 20rem;
}
.h-9 {
        height: 2.25rem;
}
.h-96 {
        height: 24rem;
}
.h-\[0\.95em\] {
        height: 0.95em;
}
.h-\[0\.95rem\] {
        height: 0.95rem;
}
.h-\[1\.15rem\] {
        height: 1.15rem;
}
.h-\[104px\] {
        height: 104px;
}
.h-\[11px\] {
        height: 11px;
}
.h-\[120px\] {
        height: 120px;
}
.h-\[12px\] {
        height: 12px;
}
.h-\[13px\] {
        height: 13px;
}
.h-\[140px\] {
        height: 140px;
}
.h-\[14px\] {
        height: 14px;
}
.h-\[15px\] {
        height: 15px;
}
.h-\[16px\] {
        height: 16px;
}
.h-\[17px\] {
        height: 17px;
}
.h-\[180px\] {
        height: 180px;
}
.h-\[18px\] {
        height: 18px;
}
.h-\[1px\] {
        height: 1px;
}
.h-\[200px\] {
        height: 200px;
}
.h-\[20px\] {
        height: 20px;
}
.h-\[220px\] {
        height: 220px;
}
.h-\[22px\] {
        height: 22px;
}
.h-\[2px\] {
        height: 2px;
}
.h-\[30px\] {
        height: 30px;
}
.h-\[38px\] {
        height: 38px;
}
.h-\[40px\] {
        height: 40px;
}
.h-\[42px\] {
        height: 42px;
}
.h-\[44px\] {
        height: 44px;
}
.h-\[58px\] {
        height: 58px;
}
.h-\[64px\] {
        height: 64px;
}
.h-\[68px\] {
        height: 68px;
}
.h-\[68vh\] {
        height: 68vh;
}
.h-\[70vh\] {
        height: 70vh;
}
.h-\[75vh\] {
        height: 75vh;
}
.h-\[7px\] {
        height: 7px;
}
.h-\[88dvh\] {
        height: 88dvh;
}
.h-\[min\(640px\2c calc\(100dvh-7rem\)\)\] {
        height: min(640px, calc(100dvh - 7rem));
}
.h-auto {
        height: auto;
}
.h-fit {
        height: fit-content;
}
.h-full {
        height: 100%;
}
.h-px {
        height: 1px;
}
.h-screen {
        height: 100vh;
}
.max-h-10 {
        max-height: 2.5rem;
}
.max-h-56 {
        max-height: 14rem;
}
.max-h-64 {
        max-height: 16rem;
}
.max-h-72 {
        max-height: 18rem;
}
.max-h-\[140px\] {
        max-height: 140px;
}
.max-h-\[160px\] {
        max-height: 160px;
}
.max-h-\[176px\] {
        max-height: 176px;
}
.max-h-\[180px\] {
        max-height: 180px;
}
.max-h-\[200px\] {
        max-height: 200px;
}
.max-h-\[220px\] {
        max-height: 220px;
}
.max-h-\[260px\] {
        max-height: 260px;
}
.max-h-\[280px\] {
        max-height: 280px;
}
.max-h-\[296px\] {
        max-height: 296px;
}
.max-h-\[320px\] {
        max-height: 320px;
}
.max-h-\[340px\] {
        max-height: 340px;
}
.max-h-\[40vh\] {
        max-height: 40vh;
}
.max-h-\[420px\] {
        max-height: 420px;
}
.max-h-\[46vh\] {
        max-height: 46vh;
}
.max-h-\[50vh\] {
        max-height: 50vh;
}
.max-h-\[52vh\] {
        max-height: 52vh;
}
.max-h-\[68vh\] {
        max-height: 68vh;
}
.max-h-\[70vh\] {
        max-height: 70vh;
}
.max-h-\[72vh\] {
        max-height: 72vh;
}
.max-h-\[80vh\] {
        max-height: 80vh;
}
.max-h-\[88dvh\] {
        max-height: 88dvh;
}
.max-h-\[90\%\] {
        max-height: 90%;
}
.max-h-\[90dvh\] {
        max-height: 90dvh;
}
.max-h-\[90vh\] {
        max-height: 90vh;
}
.max-h-\[calc\(100dvh-48px\)\] {
        max-height: calc(100dvh - 48px);
}
.max-h-\[calc\(100vh-6rem\)\] {
        max-height: calc(100vh - 6rem);
}
.max-h-\[min\(320px\2c 42vh\)\] {
        max-height: min(320px, 42vh);
}
.max-h-\[min\(420px\2c 52dvh\)\] {
        max-height: min(420px, 52dvh);
}
.max-h-full {
        max-height: 100%;
}
.max-h-none {
        max-height: none;
}
.min-h-0 {
        min-height: 0px;
}
.min-h-\[100dvh\] {
        min-height: 100dvh;
}
.min-h-\[120px\] {
        min-height: 120px;
}
.min-h-\[180px\] {
        min-height: 180px;
}
.min-h-\[200px\] {
        min-height: 200px;
}
.min-h-\[220px\] {
        min-height: 220px;
}
.min-h-\[260px\] {
        min-height: 260px;
}
.min-h-\[280px\] {
        min-height: 280px;
}
.min-h-\[300px\] {
        min-height: 300px;
}
.min-h-\[320px\] {
        min-height: 320px;
}
.min-h-\[340px\] {
        min-height: 340px;
}
.min-h-\[34px\] {
        min-height: 34px;
}
.min-h-\[360px\] {
        min-height: 360px;
}
.min-h-\[38px\] {
        min-height: 38px;
}
.min-h-\[40px\] {
        min-height: 40px;
}
.min-h-\[420px\] {
        min-height: 420px;
}
.min-h-\[44px\] {
        min-height: 44px;
}
.min-h-\[480px\] {
        min-height: 480px;
}
.min-h-\[500px\] {
        min-height: 500px;
}
.min-h-\[520px\] {
        min-height: 520px;
}
.min-h-\[60vh\] {
        min-height: 60vh;
}
.min-h-\[80px\] {
        min-height: 80px;
}
.min-h-\[88px\] {
        min-height: 88px;
}
.min-h-\[96px\] {
        min-height: 96px;
}
.min-h-full {
        min-height: 100%;
}
.min-h-screen {
        min-height: 100vh;
}
.\!w-5 {
        width: 1.25rem !important;
}
.\!w-6 {
        width: 1.5rem !important;
}
.\!w-full {
        width: 100% !important;
}
.w-1 {
        width: 0.25rem;
}
.w-1\.5 {
        width: 0.375rem;
}
.w-1\/2 {
        width: 50%;
}
.w-1\/3 {
        width: 33.333333%;
}
.w-1\/4 {
        width: 25%;
}
.w-1\/5 {
        width: 20%;
}
.w-1\/6 {
        width: 16.666667%;
}
.w-10 {
        width: 2.5rem;
}
.w-11 {
        width: 2.75rem;
}
.w-12 {
        width: 3rem;
}
.w-14 {
        width: 3.5rem;
}
.w-16 {
        width: 4rem;
}
.w-2 {
        width: 0.5rem;
}
.w-2\.5 {
        width: 0.625rem;
}
.w-2\/3 {
        width: 66.666667%;
}
.w-2\/5 {
        width: 40%;
}
.w-20 {
        width: 5rem;
}
.w-24 {
        width: 6rem;
}
.w-28 {
        width: 7rem;
}
.w-3 {
        width: 0.75rem;
}
.w-3\.5 {
        width: 0.875rem;
}
.w-3\/4 {
        width: 75%;
}
.w-32 {
        width: 8rem;
}
.w-36 {
        width: 9rem;
}
.w-4 {
        width: 1rem;
}
.w-4\/5 {
        width: 80%;
}
.w-40 {
        width: 10rem;
}
.w-44 {
        width: 11rem;
}
.w-48 {
        width: 12rem;
}
.w-5 {
        width: 1.25rem;
}
.w-5\/6 {
        width: 83.333333%;
}
.w-52 {
        width: 13rem;
}
.w-56 {
        width: 14rem;
}
.w-6 {
        width: 1.5rem;
}
.w-64 {
        width: 16rem;
}
.w-7 {
        width: 1.75rem;
}
.w-72 {
        width: 18rem;
}
.w-8 {
        width: 2rem;
}
.w-80 {
        width: 20rem;
}
.w-9 {
        width: 2.25rem;
}
.w-96 {
        width: 24rem;
}
.w-\[0\.95em\] {
        width: 0.95em;
}
.w-\[0\.95rem\] {
        width: 0.95rem;
}
.w-\[1\.15rem\] {
        width: 1.15rem;
}
.w-\[100px\] {
        width: 100px;
}
.w-\[104px\] {
        width: 104px;
}
.w-\[110px\] {
        width: 110px;
}
.w-\[118px\] {
        width: 118px;
}
.w-\[11px\] {
        width: 11px;
}
.w-\[120px\] {
        width: 120px;
}
.w-\[124px\] {
        width: 124px;
}
.w-\[12px\] {
        width: 12px;
}
.w-\[130px\] {
        width: 130px;
}
.w-\[132px\] {
        width: 132px;
}
.w-\[13px\] {
        width: 13px;
}
.w-\[140px\] {
        width: 140px;
}
.w-\[14px\] {
        width: 14px;
}
.w-\[150px\] {
        width: 150px;
}
.w-\[15px\] {
        width: 15px;
}
.w-\[160px\] {
        width: 160px;
}
.w-\[168px\] {
        width: 168px;
}
.w-\[16px\] {
        width: 16px;
}
.w-\[170px\] {
        width: 170px;
}
.w-\[176px\] {
        width: 176px;
}
.w-\[17px\] {
        width: 17px;
}
.w-\[180px\] {
        width: 180px;
}
.w-\[18px\] {
        width: 18px;
}
.w-\[190px\] {
        width: 190px;
}
.w-\[196px\] {
        width: 196px;
}
.w-\[1px\] {
        width: 1px;
}
.w-\[200px\] {
        width: 200px;
}
.w-\[204px\] {
        width: 204px;
}
.w-\[20px\] {
        width: 20px;
}
.w-\[210px\] {
        width: 210px;
}
.w-\[212px\] {
        width: 212px;
}
.w-\[220px\] {
        width: 220px;
}
.w-\[22px\] {
        width: 22px;
}
.w-\[236px\] {
        width: 236px;
}
.w-\[240px\] {
        width: 240px;
}
.w-\[248px\] {
        width: 248px;
}
.w-\[280px\] {
        width: 280px;
}
.w-\[2px\] {
        width: 2px;
}
.w-\[3\.25rem\] {
        width: 3.25rem;
}
.w-\[300px\] {
        width: 300px;
}
.w-\[30px\] {
        width: 30px;
}
.w-\[340px\] {
        width: 340px;
}
.w-\[38\%\] {
        width: 38%;
}
.w-\[38px\] {
        width: 38px;
}
.w-\[3px\] {
        width: 3px;
}
.w-\[42\%\] {
        width: 42%;
}
.w-\[44\%\] {
        width: 44%;
}
.w-\[45\%\] {
        width: 45%;
}
.w-\[52px\] {
        width: 52px;
}
.w-\[55\%\] {
        width: 55%;
}
.w-\[58\%\] {
        width: 58%;
}
.w-\[68px\] {
        width: 68px;
}
.w-\[70\%\] {
        width: 70%;
}
.w-\[72px\] {
        width: 72px;
}
.w-\[7px\] {
        width: 7px;
}
.w-\[80\%\] {
        width: 80%;
}
.w-\[85\%\] {
        width: 85%;
}
.w-\[88px\] {
        width: 88px;
}
.w-\[90px\] {
        width: 90px;
}
.w-\[92\%\] {
        width: 92%;
}
.w-\[calc\(100\%-0\.75rem\)\] {
        width: calc(100% - 0.75rem);
}
.w-\[calc\(100\%-1rem\)\] {
        width: calc(100% - 1rem);
}
.w-\[clamp\(300px\2c 24vw\2c 380px\)\] {
        width: max(300px, min(24vw, 380px));
}
.w-\[clamp\(340px\2c 30\%\2c 420px\)\] {
        width: max(340px, min(30%, 420px));
}
.w-\[clamp\(400px\2c 32vw\2c 480px\)\] {
        width: max(400px, min(32vw, 480px));
}
.w-\[min\(1200px\2c calc\(100vw-1\.5rem\)\)\] {
        width: min(1200px, calc(100vw - 1.5rem));
}
.w-\[min\(300px\2c calc\(100vw-16px\)\)\] {
        width: min(300px, calc(100vw - 16px));
}
.w-\[min\(320px\2c calc\(100vw-16px\)\)\] {
        width: min(320px, calc(100vw - 16px));
}
.w-\[min\(380px\2c calc\(100vw-3rem\)\)\] {
        width: min(380px, calc(100vw - 3rem));
}
.w-\[min\(420px\2c calc\(100\%-2\.5rem\)\)\] {
        width: min(420px, calc(100% - 2.5rem));
}
.w-\[min\(420px\2c calc\(100vw-2rem\)\)\] {
        width: min(420px, calc(100vw - 2rem));
}
.w-\[min\(480px\2c calc\(100vw-2rem\)\)\] {
        width: min(480px, calc(100vw - 2rem));
}
.w-\[min\(480px\2c calc\(100vw-4rem\)\)\] {
        width: min(480px, calc(100vw - 4rem));
}
.w-\[min\(520px\2c calc\(100vw-1\.5rem\)\)\] {
        width: min(520px, calc(100vw - 1.5rem));
}
.w-\[min\(520px\2c calc\(100vw-2rem\)\)\] {
        width: min(520px, calc(100vw - 2rem));
}
.w-\[min\(560px\2c calc\(100vw-2rem\)\)\] {
        width: min(560px, calc(100vw - 2rem));
}
.w-\[min\(640px\2c calc\(100vw-2rem\)\)\] {
        width: min(640px, calc(100vw - 2rem));
}
.w-\[min\(760px\2c calc\(100vw-1\.5rem\)\)\] {
        width: min(760px, calc(100vw - 1.5rem));
}
.w-\[min\(960px\2c calc\(100vw-1\.5rem\)\)\] {
        width: min(960px, calc(100vw - 1.5rem));
}
.w-auto {
        width: auto;
}
.w-fit {
        width: fit-content;
}
.w-full {
        width: 100%;
}
.w-max {
        width: max-content;
}
.w-px {
        width: 1px;
}
.min-w-0 {
        min-width: 0px;
}
.min-w-4 {
        min-width: 1rem;
}
.min-w-5 {
        min-width: 1.25rem;
}
.min-w-\[10rem\] {
        min-width: 10rem;
}
.min-w-\[120px\] {
        min-width: 120px;
}
.min-w-\[130px\] {
        min-width: 130px;
}
.min-w-\[140px\] {
        min-width: 140px;
}
.min-w-\[14px\] {
        min-width: 14px;
}
.min-w-\[150px\] {
        min-width: 150px;
}
.min-w-\[15px\] {
        min-width: 15px;
}
.min-w-\[160px\] {
        min-width: 160px;
}
.min-w-\[168px\] {
        min-width: 168px;
}
.min-w-\[16px\] {
        min-width: 16px;
}
.min-w-\[180px\] {
        min-width: 180px;
}
.min-w-\[18px\] {
        min-width: 18px;
}
.min-w-\[200px\] {
        min-width: 200px;
}
.min-w-\[20px\] {
        min-width: 20px;
}
.min-w-\[220px\] {
        min-width: 220px;
}
.min-w-\[240px\] {
        min-width: 240px;
}
.min-w-\[24px\] {
        min-width: 24px;
}
.min-w-\[260px\] {
        min-width: 260px;
}
.min-w-\[28px\] {
        min-width: 28px;
}
.min-w-\[44px\] {
        min-width: 44px;
}
.min-w-\[48px\] {
        min-width: 48px;
}
.min-w-\[56px\] {
        min-width: 56px;
}
.min-w-\[7\.5rem\] {
        min-width: 7.5rem;
}
.min-w-\[920px\] {
        min-width: 920px;
}
.min-w-fit {
        min-width: fit-content;
}
.min-w-full {
        min-width: 100%;
}
.min-w-max {
        min-width: max-content;
}
.max-w-2xl {
        max-width: 42rem;
}
.max-w-3xl {
        max-width: 48rem;
}
.max-w-5xl {
        max-width: 64rem;
}
.max-w-\[1000px\] {
        max-width: 1000px;
}
.max-w-\[104px\] {
        max-width: 104px;
}
.max-w-\[1080px\] {
        max-width: 1080px;
}
.max-w-\[10rem\] {
        max-width: 10rem;
}
.max-w-\[1100px\] {
        max-width: 1100px;
}
.max-w-\[1180px\] {
        max-width: 1180px;
}
.max-w-\[1200px\] {
        max-width: 1200px;
}
.max-w-\[1280px\] {
        max-width: 1280px;
}
.max-w-\[12rem\] {
        max-width: 12rem;
}
.max-w-\[140px\] {
        max-width: 140px;
}
.max-w-\[14rem\] {
        max-width: 14rem;
}
.max-w-\[160px\] {
        max-width: 160px;
}
.max-w-\[1680px\] {
        max-width: 1680px;
}
.max-w-\[180px\] {
        max-width: 180px;
}
.max-w-\[190px\] {
        max-width: 190px;
}
.max-w-\[200px\] {
        max-width: 200px;
}
.max-w-\[220px\] {
        max-width: 220px;
}
.max-w-\[240px\] {
        max-width: 240px;
}
.max-w-\[260px\] {
        max-width: 260px;
}
.max-w-\[280px\] {
        max-width: 280px;
}
.max-w-\[300px\] {
        max-width: 300px;
}
.max-w-\[320px\] {
        max-width: 320px;
}
.max-w-\[340px\] {
        max-width: 340px;
}
.max-w-\[360px\] {
        max-width: 360px;
}
.max-w-\[40\%\] {
        max-width: 40%;
}
.max-w-\[400px\] {
        max-width: 400px;
}
.max-w-\[40vw\] {
        max-width: 40vw;
}
.max-w-\[420px\] {
        max-width: 420px;
}
.max-w-\[42ch\] {
        max-width: 42ch;
}
.max-w-\[440px\] {
        max-width: 440px;
}
.max-w-\[45\%\] {
        max-width: 45%;
}
.max-w-\[460px\] {
        max-width: 460px;
}
.max-w-\[50\%\] {
        max-width: 50%;
}
.max-w-\[520px\] {
        max-width: 520px;
}
.max-w-\[52ch\] {
        max-width: 52ch;
}
.max-w-\[560px\] {
        max-width: 560px;
}
.max-w-\[60\%\] {
        max-width: 60%;
}
.max-w-\[640px\] {
        max-width: 640px;
}
.max-w-\[680px\] {
        max-width: 680px;
}
.max-w-\[70\%\] {
        max-width: 70%;
}
.max-w-\[75\%\] {
        max-width: 75%;
}
.max-w-\[760px\] {
        max-width: 760px;
}
.max-w-\[82vw\] {
        max-width: 82vw;
}
.max-w-\[85\%\] {
        max-width: 85%;
}
.max-w-\[860px\] {
        max-width: 860px;
}
.max-w-\[88\%\] {
        max-width: 88%;
}
.max-w-\[90\%\] {
        max-width: 90%;
}
.max-w-\[900px\] {
        max-width: 900px;
}
.max-w-\[90vw\] {
        max-width: 90vw;
}
.max-w-\[920px\] {
        max-width: 920px;
}
.max-w-\[960px\] {
        max-width: 960px;
}
.max-w-\[calc\(100vw-1\.5rem\)\] {
        max-width: calc(100vw - 1.5rem);
}
.max-w-\[calc\(100vw-1rem\)\] {
        max-width: calc(100vw - 1rem);
}
.max-w-\[min\(360px\2c calc\(100vw-2rem\)\)\] {
        max-width: min(360px, calc(100vw - 2rem));
}
.max-w-full {
        max-width: 100%;
}
.max-w-lg {
        max-width: 32rem;
}
.max-w-md {
        max-width: 28rem;
}
.max-w-sm {
        max-width: 24rem;
}
.max-w-xs {
        max-width: 20rem;
}
.flex-1 {
        flex: 1 1 0%;
}
.flex-\[1_1_0\] {
        flex: 1 1 0;
}
.flex-\[2\.2\] {
        flex: 2.2;
}
.flex-\[2\] {
        flex: 2;
}
.flex-\[2_1_0\] {
        flex: 2 1 0;
}
.flex-\[2_1_180px\] {
        flex: 2 1 180px;
}
.flex-\[2_2_0\%\] {
        flex: 2 2 0%;
}
.flex-none {
        flex: none;
}
.shrink {
        flex-shrink: 1;
}
.shrink-0 {
        flex-shrink: 0;
}
.grow {
        flex-grow: 1;
}
.basis-0 {
        flex-basis: 0px;
}
.basis-40 {
        flex-basis: 10rem;
}
.table-fixed {
        table-layout: fixed;
}
.border-collapse {
        border-collapse: collapse;
}
.border-separate {
        border-collapse: separate;
}
.-translate-x-1\/2 {
        --tw-translate-x: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
        --tw-translate-y: -50%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
        --tw-rotate: -90deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
        --tw-rotate: 180deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
        --tw-rotate: 90deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fade-in-up {

        from {
                opacity: 0;
                transform: translateY(8px);
        }

        to {
                opacity: 1;
                transform: translateY(0);
        }
}
.animate-fade-in-up {
        animation: fade-in-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pulse {

        50% {
                opacity: .5;
        }
}
.animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

        to {
                transform: rotate(360deg);
        }
}
.animate-spin {
        animation: spin 1s linear infinite;
}
.cursor-copy {
        cursor: copy;
}
.cursor-default {
        cursor: default;
}
.cursor-ew-resize {
        cursor: ew-resize;
}
.cursor-grab {
        cursor: grab;
}
.cursor-help {
        cursor: help;
}
.cursor-not-allowed {
        cursor: not-allowed;
}
.cursor-pointer {
        cursor: pointer;
}
.cursor-progress {
        cursor: progress;
}
.cursor-text {
        cursor: text;
}
.cursor-zoom-in {
        cursor: zoom-in;
}
.touch-none {
        touch-action: none;
}
.select-none {
        -webkit-user-select: none;
                user-select: none;
}
.select-text {
        -webkit-user-select: text;
                user-select: text;
}
.select-all {
        -webkit-user-select: all;
                user-select: all;
}
.resize-none {
        resize: none;
}
.resize-y {
        resize: vertical;
}
.resize {
        resize: both;
}
.list-disc {
        list-style-type: disc;
}
.list-none {
        list-style-type: none;
}
.appearance-none {
        appearance: none;
}
.grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[auto_1fr_auto\] {
        grid-template-columns: auto 1fr auto;
}
.grid-cols-\[auto_minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1\.4fr\)_auto\] {
        grid-template-columns: auto minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
        grid-template-columns: auto minmax(0,1fr);
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)_minmax\(0\2c 1\.2fr\)\] {
        grid-template-columns: auto minmax(0,1fr) minmax(0,1.2fr);
}
.grid-cols-\[minmax\(0\2c 1\.1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 0\.9fr\)\] {
        grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,0.9fr);
}
.grid-cols-\[minmax\(0\2c 1\.3fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 2fr\)\] {
        grid-template-columns: minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,2fr);
}
.grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr));
}
.flex-row {
        flex-direction: row;
}
.flex-col {
        flex-direction: column;
}
.flex-col-reverse {
        flex-direction: column-reverse;
}
.flex-wrap {
        flex-wrap: wrap;
}
.flex-nowrap {
        flex-wrap: nowrap;
}
.place-items-center {
        align-items: center;
        justify-items: center;
        place-items: center;
}
.items-start {
        align-items: flex-start;
}
.items-end {
        align-items: flex-end;
}
.items-center {
        align-items: center;
}
.items-baseline {
        align-items: baseline;
}
.items-stretch {
        align-items: stretch;
}
.justify-start {
        justify-content: flex-start;
}
.justify-end {
        justify-content: flex-end;
}
.justify-center {
        justify-content: center;
}
.justify-between {
        justify-content: space-between;
}
.justify-stretch {
        justify-content: stretch;
}
.gap-0 {
        gap: 0px;
}
.gap-0\.5 {
        gap: 0.125rem;
}
.gap-1 {
        gap: 0.25rem;
}
.gap-1\.5 {
        gap: 0.375rem;
}
.gap-2 {
        gap: 0.5rem;
}
.gap-2\.5 {
        gap: 0.625rem;
}
.gap-3 {
        gap: 0.75rem;
}
.gap-3\.5 {
        gap: 0.875rem;
}
.gap-4 {
        gap: 1rem;
}
.gap-5 {
        gap: 1.25rem;
}
.gap-6 {
        gap: 1.5rem;
}
.gap-7 {
        gap: 1.75rem;
}
.gap-8 {
        gap: 2rem;
}
.gap-px {
        gap: 1px;
}
.gap-x-1\.5 {
        column-gap: 0.375rem;
}
.gap-x-10 {
        column-gap: 2.5rem;
}
.gap-x-2 {
        column-gap: 0.5rem;
}
.gap-x-2\.5 {
        column-gap: 0.625rem;
}
.gap-x-3 {
        column-gap: 0.75rem;
}
.gap-x-3\.5 {
        column-gap: 0.875rem;
}
.gap-x-4 {
        column-gap: 1rem;
}
.gap-x-5 {
        column-gap: 1.25rem;
}
.gap-x-6 {
        column-gap: 1.5rem;
}
.gap-y-0\.5 {
        row-gap: 0.125rem;
}
.gap-y-1 {
        row-gap: 0.25rem;
}
.gap-y-1\.5 {
        row-gap: 0.375rem;
}
.gap-y-2 {
        row-gap: 0.5rem;
}
.gap-y-2\.5 {
        row-gap: 0.625rem;
}
.gap-y-5 {
        row-gap: 1.25rem;
}
.gap-y-6 {
        row-gap: 1.5rem;
}
.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
        margin-left: calc(-0.375rem * (1 - var(--tw-space-x-reverse)));
        margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.125rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.375rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.625rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
        margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0;
        border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
        border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
        border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
        align-self: flex-start;
}
.self-end {
        align-self: flex-end;
}
.self-center {
        align-self: center;
}
.self-stretch {
        align-self: stretch;
}
.justify-self-end {
        justify-self: end;
}
.overflow-auto {
        overflow: auto;
}
.overflow-hidden {
        overflow: hidden;
}
.overflow-visible {
        overflow: visible;
}
.overflow-x-auto {
        overflow-x: auto;
}
.overflow-y-auto {
        overflow-y: auto;
}
.overflow-x-hidden {
        overflow-x: hidden;
}
.overflow-y-hidden {
        overflow-y: hidden;
}
.overflow-x-clip {
        overflow-x: clip;
}
.overflow-y-visible {
        overflow-y: visible;
}
.overscroll-contain {
        overscroll-behavior: contain;
}
.overscroll-y-contain {
        overscroll-behavior-y: contain;
}
.truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
.text-ellipsis {
        text-overflow: ellipsis;
}
.whitespace-normal {
        white-space: normal;
}
.whitespace-nowrap {
        white-space: nowrap;
}
.whitespace-pre {
        white-space: pre;
}
.whitespace-pre-line {
        white-space: pre-line;
}
.whitespace-pre-wrap {
        white-space: pre-wrap;
}
.break-words {
        word-wrap: break-word;
}
.break-all {
        word-break: break-all;
}
.\!rounded-full {
        border-radius: 9999px !important;
}
.\!rounded-md {
        border-radius: calc(0.75rem - 2px) !important;
        border-radius: calc(var(--radius) - 2px) !important;
}
.rounded {
        border-radius: 0.25rem;
}
.rounded-2xl {
        border-radius: 1rem;
}
.rounded-3xl {
        border-radius: 1.5rem;
}
.rounded-\[12px\] {
        border-radius: 12px;
}
.rounded-\[18px\] {
        border-radius: 18px;
}
.rounded-\[2px\] {
        border-radius: 2px;
}
.rounded-\[3px\] {
        border-radius: 3px;
}
.rounded-\[4px\] {
        border-radius: 4px;
}
.rounded-\[5px\] {
        border-radius: 5px;
}
.rounded-\[6px\] {
        border-radius: 6px;
}
.rounded-\[7px\] {
        border-radius: 7px;
}
.rounded-\[8px\] {
        border-radius: 8px;
}
.rounded-\[inherit\] {
        border-radius: inherit;
}
.rounded-\[var\(--r-btn\)\] {
        border-radius: var(--r-btn);
}
.rounded-\[var\(--r-full\)\] {
        border-radius: var(--r-full);
}
.rounded-\[var\(--r-lg\)\] {
        border-radius: var(--r-lg);
}
.rounded-\[var\(--r-md\)\] {
        border-radius: var(--r-md);
}
.rounded-\[var\(--r-sm\)\] {
        border-radius: var(--r-sm);
}
.rounded-\[var\(--r-xl\)\] {
        border-radius: var(--r-xl);
}
.rounded-full {
        border-radius: 9999px;
}
.rounded-lg {
        border-radius: 0.75rem;
        border-radius: var(--radius);
}
.rounded-md {
        border-radius: calc(0.75rem - 2px);
        border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
        border-radius: calc(0.75rem - 4px);
        border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
        border-radius: calc(0.75rem + 4px);
        border-radius: calc(var(--radius) + 4px);
}
.rounded-b-none {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
}
.rounded-l-\[var\(--r-2xl\)\] {
        border-top-left-radius: var(--r-2xl);
        border-bottom-left-radius: var(--r-2xl);
}
.rounded-l-\[var\(--r-md\)\] {
        border-top-left-radius: var(--r-md);
        border-bottom-left-radius: var(--r-md);
}
.rounded-l-lg {
        border-top-left-radius: 0.75rem;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: 0.75rem;
        border-bottom-left-radius: var(--radius);
}
.rounded-r-\[26px\] {
        border-top-right-radius: 26px;
        border-bottom-right-radius: 26px;
}
.rounded-r-\[var\(--r-md\)\] {
        border-top-right-radius: var(--r-md);
        border-bottom-right-radius: var(--r-md);
}
.rounded-r-none {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
}
.rounded-t-\[var\(--r-2xl\)\] {
        border-top-left-radius: var(--r-2xl);
        border-top-right-radius: var(--r-2xl);
}
.border {
        border-width: 1px;
}
.border-0 {
        border-width: 0px;
}
.border-2 {
        border-width: 2px;
}
.border-b {
        border-bottom-width: 1px;
}
.border-l {
        border-left-width: 1px;
}
.border-l-2 {
        border-left-width: 2px;
}
.border-l-\[3px\] {
        border-left-width: 3px;
}
.border-r {
        border-right-width: 1px;
}
.border-t {
        border-top-width: 1px;
}
.border-dashed {
        border-style: dashed;
}
.border-\[color\:var\(--brand\)\] {
        border-color: var(--brand);
}
.border-\[color\:var\(--glass-border\)\] {
        border-color: var(--glass-border);
}
.border-\[var\(--glass-border\)\] {
        border-color: var(--glass-border);
}
.border-border {
        border-color: hsl(220, 17%, 86%);
        border-color: hsl(var(--border));
}
.border-input {
        border-color: hsl(220, 16%, 84%);
        border-color: hsl(var(--input));
}
.border-transparent {
        border-color: transparent;
}
.border-white\/25 {
        border-color: rgba(255, 255, 255, 0.25);
}
.border-white\/50 {
        border-color: rgba(255, 255, 255, 0.5);
}
.border-l-transparent {
        border-left-color: transparent;
}
.border-t-transparent {
        border-top-color: transparent;
}
.bg-\[color-mix\(in_srgb\2c var\(--glass-fill-strong\)_82\%\2c transparent\)\] {
        background-color: color-mix(in srgb,var(--glass-fill-strong) 82%,transparent);
}
.bg-\[color\:var\(--brand-tint\)\] {
        background-color: var(--brand-tint);
}
.bg-\[color\:var\(--field-fill\)\] {
        background-color: var(--field-fill);
}
.bg-\[var\(--brand-soft\)\] {
        background-color: var(--brand-soft);
}
.bg-\[var\(--glass-fill\)\] {
        background-color: var(--glass-fill);
}
.bg-\[var\(--glass-surface\)\] {
        background-color: var(--glass-surface);
}
.bg-accent {
        background-color: hsl(220, 18%, 91%);
        background-color: hsl(var(--accent));
}
.bg-background {
        background-color: hsl(220, 24%, 96.5%);
        background-color: hsl(var(--background));
}
.bg-border {
        background-color: hsl(220, 17%, 86%);
        background-color: hsl(var(--border));
}
.bg-card {
        background-color: hsl(0, 0%, 100%);
        background-color: hsl(var(--card));
}
.bg-destructive {
        background-color: hsl(0, 79%, 63%);
        background-color: hsl(var(--destructive));
}
.bg-destructive\/10 {
        background-color: hsla(0, 79%, 63%, 0.1);
        background-color: hsl(var(--destructive) / 0.1);
}
.bg-destructive\/15 {
        background-color: hsla(0, 79%, 63%, 0.15);
        background-color: hsl(var(--destructive) / 0.15);
}
.bg-foreground {
        background-color: hsl(222, 40%, 11%);
        background-color: hsl(var(--foreground));
}
.bg-foreground\/30 {
        background-color: hsla(222, 40%, 11%, 0.3);
        background-color: hsl(var(--foreground) / 0.3);
}
.bg-muted {
        background-color: hsl(220, 17%, 93.5%);
        background-color: hsl(var(--muted));
}
.bg-popover {
        background-color: hsl(0, 0%, 100%);
        background-color: hsl(var(--popover));
}
.bg-primary {
        background-color: #3030ad;
        background-color: var(--primary);
}
.bg-secondary {
        background-color: hsl(220, 17%, 93.5%);
        background-color: hsl(var(--secondary));
}
.bg-success\/10 {
        background-color: hsla(145, 63%, 42%, 0.1);
        background-color: hsl(var(--success) / 0.1);
}
.bg-success\/15 {
        background-color: hsla(145, 63%, 42%, 0.15);
        background-color: hsl(var(--success) / 0.15);
}
.bg-transparent {
        background-color: transparent;
}
.bg-warning\/15 {
        background-color: hsla(28, 87%, 62%, 0.15);
        background-color: hsl(var(--warning) / 0.15);
}
.bg-white {
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
        background-color: rgba(255, 255, 255, 0.1);
}
.bg-white\/15 {
        background-color: rgba(255, 255, 255, 0.15);
}
.bg-white\/20 {
        background-color: rgba(255, 255, 255, 0.2);
}
.fill-current {
        fill: currentColor;
}
.object-contain {
        object-fit: contain;
}
.object-cover {
        object-fit: cover;
}
.object-left {
        object-position: left;
}
.\!p-0 {
        padding: 0px !important;
}
.p-0 {
        padding: 0px;
}
.p-0\.5 {
        padding: 0.125rem;
}
.p-1 {
        padding: 0.25rem;
}
.p-1\.5 {
        padding: 0.375rem;
}
.p-2 {
        padding: 0.5rem;
}
.p-2\.5 {
        padding: 0.625rem;
}
.p-3 {
        padding: 0.75rem;
}
.p-3\.5 {
        padding: 0.875rem;
}
.p-4 {
        padding: 1rem;
}
.p-5 {
        padding: 1.25rem;
}
.p-6 {
        padding: 1.5rem;
}
.p-7 {
        padding: 1.75rem;
}
.p-8 {
        padding: 2rem;
}
.p-\[1px\] {
        padding: 1px;
}
.\!px-0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
}
.\!py-0 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
}
.px-0 {
        padding-left: 0px;
        padding-right: 0px;
}
.px-0\.5 {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
}
.px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
}
.px-1\.5 {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
}
.px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
}
.px-2\.5 {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
}
.px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
}
.px-3\.5 {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
}
.px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
}
.px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
}
.px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
}
.px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
}
.px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
}
.py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
}
.py-0\.5 {
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
}
.py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
}
.py-1\.5 {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
}
.py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
}
.py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
}
.py-14 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
}
.py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
}
.py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
}
.py-2\.5 {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
}
.py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
}
.py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
}
.py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
}
.py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
}
.py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
}
.py-7 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
}
.py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
}
.py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
}
.py-\[9px\] {
        padding-top: 9px;
        padding-bottom: 9px;
}
.py-px {
        padding-top: 1px;
        padding-bottom: 1px;
}
.\!pl-10 {
        padding-left: 2.5rem !important;
}
.\!pr-16 {
        padding-right: 4rem !important;
}
.pb-0\.5 {
        padding-bottom: 0.125rem;
}
.pb-1 {
        padding-bottom: 0.25rem;
}
.pb-10 {
        padding-bottom: 2.5rem;
}
.pb-2 {
        padding-bottom: 0.5rem;
}
.pb-2\.5 {
        padding-bottom: 0.625rem;
}
.pb-24 {
        padding-bottom: 6rem;
}
.pb-3 {
        padding-bottom: 0.75rem;
}
.pb-3\.5 {
        padding-bottom: 0.875rem;
}
.pb-4 {
        padding-bottom: 1rem;
}
.pb-5 {
        padding-bottom: 1.25rem;
}
.pb-6 {
        padding-bottom: 1.5rem;
}
.pb-8 {
        padding-bottom: 2rem;
}
.pb-\[10px\] {
        padding-bottom: 10px;
}
.pl-0\.5 {
        padding-left: 0.125rem;
}
.pl-1 {
        padding-left: 0.25rem;
}
.pl-1\.5 {
        padding-left: 0.375rem;
}
.pl-10 {
        padding-left: 2.5rem;
}
.pl-12 {
        padding-left: 3rem;
}
.pl-2 {
        padding-left: 0.5rem;
}
.pl-2\.5 {
        padding-left: 0.625rem;
}
.pl-3 {
        padding-left: 0.75rem;
}
.pl-3\.5 {
        padding-left: 0.875rem;
}
.pl-4 {
        padding-left: 1rem;
}
.pl-5 {
        padding-left: 1.25rem;
}
.pl-6 {
        padding-left: 1.5rem;
}
.pl-7 {
        padding-left: 1.75rem;
}
.pl-8 {
        padding-left: 2rem;
}
.pl-9 {
        padding-left: 2.25rem;
}
.pl-\[1\.45em\] {
        padding-left: 1.45em;
}
.pl-\[26px\] {
        padding-left: 26px;
}
.pl-\[50px\] {
        padding-left: 50px;
}
.pr-0\.5 {
        padding-right: 0.125rem;
}
.pr-1 {
        padding-right: 0.25rem;
}
.pr-1\.5 {
        padding-right: 0.375rem;
}
.pr-10 {
        padding-right: 2.5rem;
}
.pr-11 {
        padding-right: 2.75rem;
}
.pr-16 {
        padding-right: 4rem;
}
.pr-2 {
        padding-right: 0.5rem;
}
.pr-2\.5 {
        padding-right: 0.625rem;
}
.pr-28 {
        padding-right: 7rem;
}
.pr-3 {
        padding-right: 0.75rem;
}
.pr-4 {
        padding-right: 1rem;
}
.pr-8 {
        padding-right: 2rem;
}
.pr-9 {
        padding-right: 2.25rem;
}
.pt-0 {
        padding-top: 0px;
}
.pt-0\.5 {
        padding-top: 0.125rem;
}
.pt-1 {
        padding-top: 0.25rem;
}
.pt-1\.5 {
        padding-top: 0.375rem;
}
.pt-2 {
        padding-top: 0.5rem;
}
.pt-2\.5 {
        padding-top: 0.625rem;
}
.pt-3 {
        padding-top: 0.75rem;
}
.pt-3\.5 {
        padding-top: 0.875rem;
}
.pt-4 {
        padding-top: 1rem;
}
.pt-5 {
        padding-top: 1.25rem;
}
.pt-6 {
        padding-top: 1.5rem;
}
.pt-\[18px\] {
        padding-top: 18px;
}
.pt-px {
        padding-top: 1px;
}
.text-left {
        text-align: left;
}
.text-center {
        text-align: center;
}
.text-right {
        text-align: right;
}
.align-baseline {
        vertical-align: baseline;
}
.align-top {
        vertical-align: top;
}
.align-middle {
        vertical-align: middle;
}
.font-mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
        font-family: Inter, var(--app-text-main-font), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}
.text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
}
.text-\[0\.86em\] {
        font-size: 0.86em;
}
.text-\[0\.95em\] {
        font-size: 0.95em;
}
.text-\[10\.5px\] {
        font-size: 10.5px;
}
.text-\[10px\] {
        font-size: 10px;
}
.text-\[11\.5px\] {
        font-size: 11.5px;
}
.text-\[11px\] {
        font-size: 11px;
}
.text-\[12\.5px\] {
        font-size: 12.5px;
}
.text-\[12px\] {
        font-size: 12px;
}
.text-\[13\.5px\] {
        font-size: 13.5px;
}
.text-\[13px\] {
        font-size: 13px;
}
.text-\[14\.5px\] {
        font-size: 14.5px;
}
.text-\[14px\] {
        font-size: 14px;
}
.text-\[15\.5px\] {
        font-size: 15.5px;
}
.text-\[15px\] {
        font-size: 15px;
}
.text-\[16px\] {
        font-size: 16px;
}
.text-\[17px\] {
        font-size: 17px;
}
.text-\[18px\] {
        font-size: 18px;
}
.text-\[19px\] {
        font-size: 19px;
}
.text-\[20px\] {
        font-size: 20px;
}
.text-\[22px\] {
        font-size: 22px;
}
.text-\[24px\] {
        font-size: 24px;
}
.text-\[26px\] {
        font-size: 26px;
}
.text-\[28px\] {
        font-size: 28px;
}
.text-\[30px\] {
        font-size: 30px;
}
.text-\[40px\] {
        font-size: 40px;
}
.text-\[6\.5px\] {
        font-size: 6.5px;
}
.text-\[7px\] {
        font-size: 7px;
}
.text-\[8\.5px\] {
        font-size: 8.5px;
}
.text-\[88px\] {
        font-size: 88px;
}
.text-\[9\.5px\] {
        font-size: 9.5px;
}
.text-\[9px\] {
        font-size: 9px;
}
.text-base {
        font-size: 1rem;
        line-height: 1.5rem;
}
.text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
}
.text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
}
.text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
}
.text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
}
.font-450 {
        font-weight: 450;
}
.font-550 {
        font-weight: 550;
}
.font-600 {
        font-weight: 600;
}
.font-650 {
        font-weight: 650;
}
.font-700 {
        font-weight: 700;
}
.font-medium {
        font-weight: 500;
}
.font-normal {
        font-weight: 400;
}
.font-semibold {
        font-weight: 600;
}
.uppercase {
        text-transform: uppercase;
}
.lowercase {
        text-transform: lowercase;
}
.capitalize {
        text-transform: capitalize;
}
.normal-case {
        text-transform: none;
}
.italic {
        font-style: italic;
}
.not-italic {
        font-style: normal;
}
.ordinal {
        --tw-ordinal: ordinal;
        font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
        font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
        font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
        line-height: 1rem;
}
.leading-5 {
        line-height: 1.25rem;
}
.leading-7 {
        line-height: 1.75rem;
}
.leading-\[1\.1\] {
        line-height: 1.1;
}
.leading-\[1\.35\] {
        line-height: 1.35;
}
.leading-\[1\.45\] {
        line-height: 1.45;
}
.leading-\[1\.4\] {
        line-height: 1.4;
}
.leading-\[1\.55\] {
        line-height: 1.55;
}
.leading-\[1\.5\] {
        line-height: 1.5;
}
.leading-\[1\.6\] {
        line-height: 1.6;
}
.leading-\[14px\] {
        line-height: 14px;
}
.leading-none {
        line-height: 1;
}
.leading-normal {
        line-height: 1.5;
}
.leading-relaxed {
        line-height: 1.625;
}
.leading-snug {
        line-height: 1.375;
}
.leading-tight {
        line-height: 1.25;
}
.tracking-\[-0\.015em\] {
        letter-spacing: -0.015em;
}
.tracking-\[-0\.01em\] {
        letter-spacing: -0.01em;
}
.tracking-\[-0\.025em\] {
        letter-spacing: -0.025em;
}
.tracking-\[-0\.02em\] {
        letter-spacing: -0.02em;
}
.tracking-\[-0\.03em\] {
        letter-spacing: -0.03em;
}
.tracking-\[0\.01em\] {
        letter-spacing: 0.01em;
}
.tracking-\[0\.02em\] {
        letter-spacing: 0.02em;
}
.tracking-\[0\.03em\] {
        letter-spacing: 0.03em;
}
.tracking-\[0\.04em\] {
        letter-spacing: 0.04em;
}
.tracking-\[0\.05em\] {
        letter-spacing: 0.05em;
}
.tracking-\[0\.06em\] {
        letter-spacing: 0.06em;
}
.tracking-\[0\.08em\] {
        letter-spacing: 0.08em;
}
.tracking-\[0\.09em\] {
        letter-spacing: 0.09em;
}
.tracking-\[0\.12em\] {
        letter-spacing: 0.12em;
}
.tracking-\[0\.1em\] {
        letter-spacing: 0.1em;
}
.tracking-\[0\.5em\] {
        letter-spacing: 0.5em;
}
.tracking-normal {
        letter-spacing: 0em;
}
.tracking-tight {
        letter-spacing: -0.025em;
}
.tracking-wide {
        letter-spacing: 0.025em;
}
.tracking-widest {
        letter-spacing: 0.1em;
}
.text-\[color\:var\(--brand-text\)\] {
        color: var(--brand-text);
}
.text-\[color\:var\(--ink\)\] {
        color: var(--ink);
}
.text-\[color\:var\(--ink-faint\)\] {
        color: var(--ink-faint);
}
.text-\[color\:var\(--ink-soft\)\] {
        color: var(--ink-soft);
}
.text-\[var\(--brand\)\] {
        color: var(--brand);
}
.text-\[var\(--brand-text\)\] {
        color: var(--brand-text);
}
.text-\[var\(--danger\)\] {
        color: var(--danger);
}
.text-\[var\(--ink\)\] {
        color: var(--ink);
}
.text-\[var\(--ink-faint\)\] {
        color: var(--ink-faint);
}
.text-\[var\(--ink-soft\)\] {
        color: var(--ink-soft);
}
.text-\[var\(--ok\)\] {
        color: var(--ok);
}
.text-accent-foreground {
        color: hsl(222, 33%, 18%);
        color: hsl(var(--accent-foreground));
}
.text-amber-500 {
        --tw-text-opacity: 1;
        color: rgba(245, 158, 11, 1);
        color: rgba(245, 158, 11, var(--tw-text-opacity, 1));
}
.text-amber-500\/90 {
        color: rgba(245, 158, 11, 0.9);
}
.text-background {
        color: hsl(220, 24%, 96.5%);
        color: hsl(var(--background));
}
.text-card-foreground {
        color: hsl(222, 40%, 11%);
        color: hsl(var(--card-foreground));
}
.text-destructive {
        color: hsl(0, 79%, 63%);
        color: hsl(var(--destructive));
}
.text-destructive-foreground {
        color: hsl(0, 0%, 100%);
        color: hsl(var(--destructive-foreground));
}
.text-emerald-600 {
        --tw-text-opacity: 1;
        color: rgba(5, 150, 105, 1);
        color: rgba(5, 150, 105, var(--tw-text-opacity, 1));
}
.text-emerald-700\/90 {
        color: rgba(4, 120, 87, 0.9);
}
.text-foreground {
        color: hsl(222, 40%, 11%);
        color: hsl(var(--foreground));
}
.text-muted-foreground {
        color: hsl(220, 12%, 42%);
        color: hsl(var(--muted-foreground));
}
.text-popover-foreground {
        color: hsl(222, 40%, 11%);
        color: hsl(var(--popover-foreground));
}
.text-primary {
        color: #3030ad;
        color: var(--primary);
}
.text-primary-foreground {
        color: #ffffff;
        color: var(--primary-foreground);
}
.text-secondary-foreground {
        color: hsl(222, 33%, 18%);
        color: hsl(var(--secondary-foreground));
}
.text-slate-400 {
        --tw-text-opacity: 1;
        color: rgba(148, 163, 184, 1);
        color: rgba(148, 163, 184, var(--tw-text-opacity, 1));
}
.text-success {
        color: hsl(145, 63%, 42%);
        color: hsl(var(--success));
}
.text-warning-foreground {
        color: hsl(28, 90%, 14%);
        color: hsl(var(--warning-foreground));
}
.text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, 1);
        color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.text-white\/80 {
        color: rgba(255, 255, 255, 0.8);
}
.text-white\/85 {
        color: rgba(255, 255, 255, 0.85);
}
.underline {
        text-decoration-line: underline;
}
.line-through {
        text-decoration-line: line-through;
}
.no-underline {
        text-decoration-line: none;
}
.decoration-white\/50 {
        text-decoration-color: rgba(255, 255, 255, 0.5);
}
.decoration-dotted {
        text-decoration-style: dotted;
}
.underline-offset-2 {
        text-underline-offset: 2px;
}
.underline-offset-4 {
        text-underline-offset: 4px;
}
.accent-\[color\:var\(--brand\)\] {
        accent-color: var(--brand);
}
.accent-\[var\(--brand\)\] {
        accent-color: var(--brand);
}
.accent-white {
        accent-color: #fff;
}
.opacity-0 {
        opacity: 0;
}
.opacity-100 {
        opacity: 1;
}
.opacity-25 {
        opacity: 0.25;
}
.opacity-30 {
        opacity: 0.3;
}
.opacity-35 {
        opacity: 0.35;
}
.opacity-40 {
        opacity: 0.4;
}
.opacity-45 {
        opacity: 0.45;
}
.opacity-50 {
        opacity: 0.5;
}
.opacity-55 {
        opacity: 0.55;
}
.opacity-60 {
        opacity: 0.6;
}
.opacity-70 {
        opacity: 0.7;
}
.opacity-80 {
        opacity: 0.8;
}
.opacity-90 {
        opacity: 0.9;
}
.opacity-95 {
        opacity: 0.95;
}
.shadow {
        --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
        box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-md {
        --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
        box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-none {
        --tw-shadow: 0 0 rgba(0,0,0,0);
        --tw-shadow-colored: 0 0 rgba(0,0,0,0);
        box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-sm {
        --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-\[var\(--shadow\)\] {
        --tw-shadow-color: var(--shadow);
        --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[var\(--shadow-md\)\] {
        --tw-shadow-color: var(--shadow-md);
        --tw-shadow: var(--tw-shadow-colored);
}
.shadow-\[var\(--shadow-xs\)\] {
        --tw-shadow-color: var(--shadow-xs);
        --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
        outline: 2px solid transparent;
        outline-offset: 2px;
}
.outline {
        outline-style: solid;
}
.ring {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.ring-0 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.ring-1 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.ring-\[color-mix\(in_srgb\2c var\(--brand\)_35\%\2c transparent\)\] {
        --tw-ring-color: color-mix(in srgb,var(--brand) 35%,transparent);
}
.ring-\[color-mix\(in_srgb\2c var\(--glass-fill-strong\)_82\%\2c transparent\)\] {
        --tw-ring-color: color-mix(in srgb,var(--glass-fill-strong) 82%,transparent);
}
.ring-\[color\:var\(--danger\)\] {
        --tw-ring-color: var(--danger);
}
.ring-black\/5 {
        --tw-ring-color: rgba(0, 0, 0, 0.05);
}
.blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
        --tw-blur: blur(40px);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
        --tw-invert: invert(100%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.sepia {
        --tw-sepia: sepia(100%);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-none {
        --tw-backdrop-blur:  ;
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
        --tw-backdrop-blur: blur(4px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\] {
        transition-property: border-color,box-shadow;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-\[max-height\] {
        transition-property: max-height;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-\[stroke-dashoffset\] {
        transition-property: stroke-dashoffset;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-\[width\] {
        transition-property: width;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-colors {
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-opacity {
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-shadow {
        transition-property: box-shadow;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
.duration-200 {
        transition-duration: 200ms;
}
.duration-300 {
        transition-duration: 300ms;
}
.duration-500 {
        transition-duration: 500ms;
}
.ease-in-out {
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {

        from {
                opacity: 1;
                opacity: var(--tw-enter-opacity, 1);
                transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
                transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
        }
}
@keyframes exit {

        to {
                opacity: 1;
                opacity: var(--tw-exit-opacity, 1);
                transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
                transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
        }
}
.fade-in {
        --tw-enter-opacity: 0;
}
.zoom-out {
        --tw-exit-scale: 0;
}
.duration-200 {
        animation-duration: 200ms;
}
.duration-300 {
        animation-duration: 300ms;
}
.duration-500 {
        animation-duration: 500ms;
}
.ease-in-out {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
        animation-play-state: running;
}
.\!paused {
        animation-play-state: paused !important;
}
.paused {
        animation-play-state: paused;
}
.\[agent\:\<id\>\] {
        agent: <id>;
}
.\[agent\:\<uuid\>\] {
        agent: <uuid>;
}
.\[agent\:uuid\] {
        agent: uuid;
}
.\[entity\:\.\.\] {
        entity: ..;
}
.\[entity\:\2026\] {
        entity: …;
}
.\[grid-template-columns\:24px_minmax\(0\2c 1fr\)_100px\] {
        grid-template-columns: 24px minmax(0,1fr) 100px;
}
.\[list-style\:none\] {
        list-style: none;
}
.\[overflow-wrap\:anywhere\] {
        word-wrap: anywhere;
}
.\[writing-mode\:vertical-rl\] {
        writing-mode: vertical-rl;
}
.file\:border-0::file-selector-button {
        border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
        background-color: transparent;
}
.file\:text-sm::file-selector-button {
        font-size: 0.875rem;
        line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
        font-weight: 500;
}
.placeholder\:text-\[color\:var\(--ink-faint\)\]::placeholder {
        color: var(--ink-faint);
}
.placeholder\:text-muted-foreground::placeholder {
        color: hsl(220, 12%, 42%);
        color: hsl(var(--muted-foreground));
}
.last\:mb-0:last-child {
        margin-bottom: 0px;
}
.last\:border-0:last-child {
        border-width: 0px;
}
.last\:border-b-0:last-child {
        border-bottom-width: 0px;
}
.read-only\:opacity-70:read-only {
        opacity: 0.7;
}
.empty\:mt-0:empty {
        margin-top: 0px;
}
.focus-within\:border-\[color\:var\(--brand\)\][focus-within] {
        border-color: var(--brand);
}
.focus-within\:border-\[color\:var\(--brand\)\]:focus-within {
        border-color: var(--brand);
}
.focus-within\:opacity-100[focus-within] {
        opacity: 1;
}
.focus-within\:opacity-100:focus-within {
        opacity: 1;
}
.focus-within\:shadow-\[var\(--focus-ring\)\][focus-within] {
        --tw-shadow-color: var(--focus-ring);
        --tw-shadow: var(--tw-shadow-colored);
}
.focus-within\:shadow-\[var\(--focus-ring\)\]:focus-within {
        --tw-shadow-color: var(--focus-ring);
        --tw-shadow: var(--tw-shadow-colored);
}
.hover\:\!bg-transparent:hover {
        background-color: transparent !important;
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--danger\)_12\%\2c transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--danger) 12%,transparent);
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--glass-hair\)_40\%\2c transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--glass-hair) 40%,transparent);
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--glass-hair\)_70\%\2c transparent\)\]:hover {
        background-color: color-mix(in srgb,var(--glass-hair) 70%,transparent);
}
.hover\:bg-\[color\:var\(--glass-hair\)\]:hover {
        background-color: var(--glass-hair);
}
.hover\:bg-\[var\(--field-fill\)\]:hover {
        background-color: var(--field-fill);
}
.hover\:bg-\[var\(--glass-border\)\]:hover {
        background-color: var(--glass-border);
}
.hover\:bg-\[var\(--glass-fill\)\]:hover {
        background-color: var(--glass-fill);
}
.hover\:bg-\[var\(--glass-hair\)\]:hover {
        background-color: var(--glass-hair);
}
.hover\:bg-accent:hover {
        background-color: hsl(220, 18%, 91%);
        background-color: hsl(var(--accent));
}
.hover\:bg-destructive\/90:hover {
        background-color: hsla(0, 79%, 63%, 0.9);
        background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-primary-hover:hover {
        background-color: #28289a;
        background-color: var(--primary-hover);
}
.hover\:bg-secondary\/80:hover {
        background-color: hsla(220, 17%, 93.5%, 0.8);
        background-color: hsl(var(--secondary) / 0.8);
}
.hover\:text-\[color\:var\(--brand-text\)\]:hover {
        color: var(--brand-text);
}
.hover\:text-\[color\:var\(--danger\)\]:hover {
        color: var(--danger);
}
.hover\:text-\[color\:var\(--ink\)\]:hover {
        color: var(--ink);
}
.hover\:text-\[color\:var\(--ink-soft\)\]:hover {
        color: var(--ink-soft);
}
.hover\:text-\[var\(--danger\)\]:hover {
        color: var(--danger);
}
.hover\:text-accent-foreground:hover {
        color: hsl(222, 33%, 18%);
        color: hsl(var(--accent-foreground));
}
.hover\:underline:hover {
        text-decoration-line: underline;
}
.hover\:decoration-white:hover {
        text-decoration-color: #fff;
}
.hover\:decoration-solid:hover {
        text-decoration-style: solid;
}
.hover\:opacity-100:hover {
        opacity: 1;
}
.hover\:opacity-70:hover {
        opacity: 0.7;
}
.hover\:opacity-75:hover {
        opacity: 0.75;
}
.hover\:opacity-80:hover {
        opacity: 0.8;
}
.hover\:opacity-90:hover {
        opacity: 0.9;
}
.focus\:bg-accent:focus {
        background-color: hsl(220, 18%, 91%);
        background-color: hsl(var(--accent));
}
.focus\:text-accent-foreground:focus {
        color: hsl(222, 33%, 18%);
        color: hsl(var(--accent-foreground));
}
.focus\:opacity-100:focus {
        opacity: 1;
}
.focus\:outline-none:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
}
.focus\:ring-0:focus {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus\:ring-2:focus {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus\:ring-ring:focus {
        --tw-ring-color: var(--ring);
}
.focus-visible\:bg-\[var\(--field-fill\)\].focus-visible {
        background-color: var(--field-fill);
}
.focus-visible\:bg-\[var\(--field-fill\)\]:focus-visible {
        background-color: var(--field-fill);
}
.focus-visible\:opacity-100.focus-visible {
        opacity: 1;
}
.focus-visible\:opacity-100:focus-visible {
        opacity: 1;
}
.focus-visible\:shadow-\[var\(--focus-ring\)\].focus-visible {
        --tw-shadow-color: var(--focus-ring);
        --tw-shadow: var(--tw-shadow-colored);
}
.focus-visible\:shadow-\[var\(--focus-ring\)\]:focus-visible {
        --tw-shadow-color: var(--focus-ring);
        --tw-shadow: var(--tw-shadow-colored);
}
.focus-visible\:outline-none.focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
}
.focus-visible\:outline-none:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
}
.focus-visible\:ring-2.focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus-visible\:ring-2.focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus-visible\:ring-2.focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus-visible\:ring-2:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus-visible\:ring-\[color\:var\(--brand\)\].focus-visible {
        --tw-ring-color: var(--brand);
}
.focus-visible\:ring-\[color\:var\(--brand\)\]:focus-visible {
        --tw-ring-color: var(--brand);
}
.focus-visible\:ring-\[color\:var\(--brand-soft\)\].focus-visible {
        --tw-ring-color: var(--brand-soft);
}
.focus-visible\:ring-\[color\:var\(--brand-soft\)\]:focus-visible {
        --tw-ring-color: var(--brand-soft);
}
.focus-visible\:ring-ring.focus-visible {
        --tw-ring-color: var(--ring);
}
.focus-visible\:ring-ring:focus-visible {
        --tw-ring-color: var(--ring);
}
.focus-visible\:ring-offset-1.focus-visible {
        --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-1:focus-visible {
        --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2.focus-visible {
        --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-2:focus-visible {
        --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background.focus-visible {
        --tw-ring-offset-color: hsl(var(--background));
}
.focus-visible\:ring-offset-background:focus-visible {
        --tw-ring-offset-color: hsl(var(--background));
}
.focus-visible\:ring-offset-transparent.focus-visible {
        --tw-ring-offset-color: transparent;
}
.focus-visible\:ring-offset-transparent:focus-visible {
        --tw-ring-offset-color: transparent;
}
.focus-visible\:\[box-shadow\:var\(--focus-ring\)\].focus-visible {
        box-shadow: var(--focus-ring);
}
.focus-visible\:\[box-shadow\:var\(--focus-ring\)\]:focus-visible {
        box-shadow: var(--focus-ring);
}
.active\:cursor-grabbing:active {
        cursor: grabbing;
}
.disabled\:pointer-events-none:disabled {
        pointer-events: none;
}
.disabled\:cursor-default:disabled {
        cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
        opacity: 0.4;
}
.disabled\:opacity-50:disabled {
        opacity: 0.5;
}
.disabled\:opacity-60:disabled {
        opacity: 0.6;
}
.disabled\:opacity-70:disabled {
        opacity: 0.7;
}
.disabled\:hover\:bg-transparent:hover:disabled {
        background-color: transparent;
}
.group\/comment[focus-within] .group-focus-within\/comment\:inline {
        display: inline;
}
.group\/comment:focus-within .group-focus-within\/comment\:inline {
        display: inline;
}
.group\/comment[focus-within] .group-focus-within\/comment\:opacity-100 {
        opacity: 1;
}
.group\/comment:focus-within .group-focus-within\/comment\:opacity-100 {
        opacity: 1;
}
.group\/row[focus-within] .group-focus-within\/row\:opacity-100 {
        opacity: 1;
}
.group\/row:focus-within .group-focus-within\/row\:opacity-100 {
        opacity: 1;
}
.group[focus-within] .group-focus-within\:opacity-0 {
        opacity: 0;
}
.group:focus-within .group-focus-within\:opacity-0 {
        opacity: 0;
}
.group[focus-within] .group-focus-within\:opacity-100 {
        opacity: 1;
}
.group:focus-within .group-focus-within\:opacity-100 {
        opacity: 1;
}
.group\/comment:hover .group-hover\/comment\:inline {
        display: inline;
}
.group\/row:hover .group-hover\/row\:grid {
        display: grid;
}
.group\/row:hover .group-hover\/row\:hidden {
        display: none;
}
.group:hover .group-hover\:translate-x-0\.5 {
        --tw-translate-x: 0.125rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/title:hover .group-hover\/title\:text-\[color\:var\(--brand-text\)\] {
        color: var(--brand-text);
}
.group:hover .group-hover\:text-\[color\:var\(--brand-text\)\] {
        color: var(--brand-text);
}
.group\/bubble:hover .group-hover\/bubble\:opacity-100 {
        opacity: 1;
}
.group\/comment:hover .group-hover\/comment\:opacity-100 {
        opacity: 1;
}
.group\/row:hover .group-hover\/row\:opacity-100 {
        opacity: 1;
}
.group\/tile:hover .group-hover\/tile\:opacity-100 {
        opacity: 1;
}
.group\/title:hover .group-hover\/title\:opacity-100 {
        opacity: 1;
}
.group:hover .group-hover\:opacity-0 {
        opacity: 0;
}
.group:hover .group-hover\:opacity-100 {
        opacity: 1;
}
.peer:checked ~ .peer-checked\:border-\[color\:var\(--brand\)\] {
        border-color: var(--brand);
}
.peer:checked ~ .peer-checked\:bg-\[color\:var\(--brand\)\] {
        background-color: var(--brand);
}
.peer:checked ~ .peer-checked\:opacity-100 {
        opacity: 1;
}
.peer.focus-visible ~ .peer-focus-visible\:ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.peer.focus-visible ~ .peer-focus-visible\:ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.peer.focus-visible ~ .peer-focus-visible\:ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.peer:focus-visible ~ .peer-focus-visible\:ring-2 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.peer.focus-visible ~ .peer-focus-visible\:ring-\[color\:var\(--brand\)\] {
        --tw-ring-color: var(--brand);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-\[color\:var\(--brand\)\] {
        --tw-ring-color: var(--brand);
}
.peer.focus-visible ~ .peer-focus-visible\:ring-\[color\:var\(--brand-soft\)\] {
        --tw-ring-color: var(--brand-soft);
}
.peer:focus-visible ~ .peer-focus-visible\:ring-\[color\:var\(--brand-soft\)\] {
        --tw-ring-color: var(--brand-soft);
}
.peer.focus-visible ~ .peer-focus-visible\:ring-offset-1 {
        --tw-ring-offset-width: 1px;
}
.peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
        --tw-ring-offset-width: 1px;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
        cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
        opacity: 0.7;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
        pointer-events: none;
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
        --tw-translate-x: 1.25rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=closed\]\:-translate-x-full[data-state="closed"] {
        --tw-translate-x: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=closed\]\:-translate-y-full[data-state="closed"] {
        --tw-translate-y: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=closed\]\:translate-x-full[data-state="closed"] {
        --tw-translate-x: 100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=closed\]\:translate-y-full[data-state="closed"] {
        --tw-translate-y: 100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
        --tw-translate-x: 0px;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes fade-in {

        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}
.data-\[state\=delayed-open\]\:animate-fade-in[data-state="delayed-open"] {
        animation: fade-in 0.2s ease-out;
}
@keyframes content-in {

        from {
                opacity: 0;
                transform: translate(-50%, -48%) scale(0.97);
        }

        to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
        }
}
.data-\[state\=open\]\:animate-content-in[data-state="open"] {
        animation: content-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fade-in {

        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}
.data-\[state\=open\]\:animate-fade-in[data-state="open"] {
        animation: fade-in 0.2s ease-out;
}
@keyframes overlay-in {

        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}
.data-\[state\=open\]\:animate-overlay-in[data-state="open"] {
        animation: overlay-in 0.2s ease-out;
}
.data-\[state\=active\]\:border[data-state="active"] {
        border-width: 1px;
}
.data-\[state\=active\]\:border-border[data-state="active"] {
        border-color: hsl(220, 17%, 86%);
        border-color: hsl(var(--border));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
        background-color: hsl(220, 24%, 96.5%);
        background-color: hsl(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
        background-color: #3030ad;
        background-color: var(--primary);
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
        background-color: hsl(220, 16%, 84%);
        background-color: hsl(var(--input));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
        color: hsl(222, 40%, 11%);
        color: hsl(var(--foreground));
}
.data-\[disabled\]\:opacity-50[data-disabled] {
        opacity: 0.5;
}
.data-\[state\=closed\]\:opacity-0[data-state="closed"] {
        opacity: 0;
}
@media (prefers-reduced-motion: reduce) {

        .motion-reduce\:animate-none {
                animation: none;
        }

        .motion-reduce\:transition-none {
                transition-property: none;
        }
}
@media not all and (min-width: 1024px) {

        .max-lg\:hidden {
                display: none;
        }
}
@media (min-width: 640px) {

        .sm\:sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border-width: 0;
        }

        .sm\:bottom-6 {
                bottom: 1.5rem;
        }

        .sm\:left-auto {
                left: auto;
        }

        .sm\:right-6 {
                right: 1.5rem;
        }

        .sm\:order-none {
                order: 0;
        }

        .sm\:col-span-1 {
                grid-column: span 1 / span 1;
        }

        .sm\:col-span-2 {
                grid-column: span 2 / span 2;
        }

        .sm\:col-span-3 {
                grid-column: span 3 / span 3;
        }

        .sm\:col-span-4 {
                grid-column: span 4 / span 4;
        }

        .sm\:ml-auto {
                margin-left: auto;
        }

        .sm\:mt-\[26px\] {
                margin-top: 26px;
        }

        .sm\:block {
                display: block;
        }

        .sm\:inline {
                display: inline;
        }

        .sm\:flex {
                display: flex;
        }

        .sm\:inline-flex {
                display: inline-flex;
        }

        .sm\:grid {
                display: grid;
        }

        .sm\:hidden {
                display: none;
        }

        .sm\:h-9 {
                height: 2.25rem;
        }

        .sm\:min-h-0 {
                min-height: 0px;
        }

        .sm\:\!w-\[180px\] {
                width: 180px !important;
        }

        .sm\:\!w-\[230px\] {
                width: 230px !important;
        }

        .sm\:w-1\/4 {
                width: 25%;
        }

        .sm\:w-24 {
                width: 6rem;
        }

        .sm\:w-9 {
                width: 2.25rem;
        }

        .sm\:w-\[180px\] {
                width: 180px;
        }

        .sm\:w-\[260px\] {
                width: 260px;
        }

        .sm\:w-\[380px\] {
                width: 380px;
        }

        .sm\:w-\[40\%\] {
                width: 40%;
        }

        .sm\:w-\[460px\] {
                width: 460px;
        }

        .sm\:w-auto {
                width: auto;
        }

        .sm\:min-w-0 {
                min-width: 0px;
        }

        .sm\:min-w-\[260px\] {
                min-width: 260px;
        }

        .sm\:min-w-\[280px\] {
                min-width: 280px;
        }

        .sm\:min-w-\[9rem\] {
                min-width: 9rem;
        }

        .sm\:max-w-\[200px\] {
                max-width: 200px;
        }

        .sm\:max-w-\[220px\] {
                max-width: 220px;
        }

        .sm\:max-w-\[280px\] {
                max-width: 280px;
        }

        .sm\:max-w-\[360px\] {
                max-width: 360px;
        }

        .sm\:max-w-\[380px\] {
                max-width: 380px;
        }

        .sm\:max-w-\[420px\] {
                max-width: 420px;
        }

        .sm\:max-w-\[50\%\] {
                max-width: 50%;
        }

        .sm\:max-w-\[60\%\] {
                max-width: 60%;
        }

        .sm\:max-w-\[calc\(100vw-3rem\)\] {
                max-width: calc(100vw - 3rem);
        }

        .sm\:max-w-md {
                max-width: 28rem;
        }

        .sm\:flex-1 {
                flex: 1 1 0%;
        }

        .sm\:flex-\[2\] {
                flex: 2;
        }

        .sm\:flex-none {
                flex: none;
        }

        .sm\:grid-cols-12 {
                grid-template-columns: repeat(12, minmax(0, 1fr));
        }

        .sm\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .sm\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .sm\:grid-cols-8 {
                grid-template-columns: repeat(8, minmax(0, 1fr));
        }

        .sm\:grid-cols-\[auto_minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1\.4fr\)_auto\] {
                grid-template-columns: auto minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;
        }

        .sm\:grid-cols-\[minmax\(0\2c 0\.95fr\)_minmax\(0\2c 1\.15fr\)_minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1fr\)_auto\] {
                grid-template-columns: minmax(0,0.95fr) minmax(0,1.15fr) minmax(0,0.9fr) minmax(0,1fr) auto;
        }

        .sm\:grid-cols-\[minmax\(0\2c 1\.1fr\)_minmax\(0\2c 1fr\)\] {
                grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
        }

        .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
                grid-template-columns: minmax(0,1fr) auto;
        }

        .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)_auto\] {
                grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
        }

        .sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.4fr\)_auto\] {
                grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto;
        }

        .sm\:flex-row {
                flex-direction: row;
        }

        .sm\:flex-wrap {
                flex-wrap: wrap;
        }

        .sm\:flex-nowrap {
                flex-wrap: nowrap;
        }

        .sm\:items-start {
                align-items: flex-start;
        }

        .sm\:items-end {
                align-items: flex-end;
        }

        .sm\:items-center {
                align-items: center;
        }

        .sm\:justify-end {
                justify-content: flex-end;
        }

        .sm\:justify-center {
                justify-content: center;
        }

        .sm\:justify-between {
                justify-content: space-between;
        }

        .sm\:gap-2\.5 {
                gap: 0.625rem;
        }

        .sm\:gap-3 {
                gap: 0.75rem;
        }

        .sm\:gap-4 {
                gap: 1rem;
        }

        .sm\:gap-x-3 {
                column-gap: 0.75rem;
        }

        .sm\:gap-y-1 {
                row-gap: 0.25rem;
        }

        .sm\:self-auto {
                align-self: auto;
        }

        .sm\:self-start {
                align-self: flex-start;
        }

        .sm\:rounded-lg {
                border-radius: 0.75rem;
                border-radius: var(--radius);
        }

        .sm\:border-b-0 {
                border-bottom-width: 0px;
        }

        .sm\:border-r {
                border-right-width: 1px;
        }

        .sm\:p-4 {
                padding: 1rem;
        }

        .sm\:p-5 {
                padding: 1.25rem;
        }

        .sm\:p-6 {
                padding: 1.5rem;
        }

        .sm\:p-7 {
                padding: 1.75rem;
        }

        .sm\:p-8 {
                padding: 2rem;
        }

        .sm\:p-9 {
                padding: 2.25rem;
        }

        .sm\:px-1\.5 {
                padding-left: 0.375rem;
                padding-right: 0.375rem;
        }

        .sm\:px-2 {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
        }

        .sm\:px-5 {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
        }

        .sm\:px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
        }

        .sm\:px-7 {
                padding-left: 1.75rem;
                padding-right: 1.75rem;
        }

        .sm\:px-8 {
                padding-left: 2rem;
                padding-right: 2rem;
        }

        .sm\:py-5 {
                padding-top: 1.25rem;
                padding-bottom: 1.25rem;
        }

        .sm\:py-6 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
        }

        .sm\:py-8 {
                padding-top: 2rem;
                padding-bottom: 2rem;
        }

        .sm\:pb-2\.5 {
                padding-bottom: 0.625rem;
        }

        .sm\:pl-2 {
                padding-left: 0.5rem;
        }

        .sm\:pr-28 {
                padding-right: 7rem;
        }

        .sm\:text-left {
                text-align: left;
        }

        .sm\:text-\[17px\] {
                font-size: 17px;
        }

        .sm\:text-\[18px\] {
                font-size: 18px;
        }

        .sm\:text-\[20px\] {
                font-size: 20px;
        }

        .sm\:text-\[22px\] {
                font-size: 22px;
        }

        .sm\:text-\[23px\] {
                font-size: 23px;
        }

        .sm\:text-\[26px\] {
                font-size: 26px;
        }

        .sm\:text-\[32px\] {
                font-size: 32px;
        }

        .sm\:text-\[33px\] {
                font-size: 33px;
        }

        .sm\:\[grid-template-columns\:24px_minmax\(0\2c 1fr\)_130px_110px_100px\] {
                grid-template-columns: 24px minmax(0,1fr) 130px 110px 100px;
        }
}
@media (min-width: 768px) {

        .md\:col-span-2 {
                grid-column: span 2 / span 2;
        }

        .md\:block {
                display: block;
        }

        .md\:inline {
                display: inline;
        }

        .md\:flex {
                display: flex;
        }

        .md\:grid {
                display: grid;
        }

        .md\:hidden {
                display: none;
        }

        .md\:max-h-\[calc\(100dvh-220px\)\] {
                max-height: calc(100dvh - 220px);
        }

        .md\:\!w-\[230px\] {
                width: 230px !important;
        }

        .md\:\!w-\[260px\] {
                width: 260px !important;
        }

        .md\:w-52 {
                width: 13rem;
        }

        .md\:w-\[200px\] {
                width: 200px;
        }

        .md\:w-\[220px\] {
                width: 220px;
        }

        .md\:w-\[230px\] {
                width: 230px;
        }

        .md\:w-\[260px\] {
                width: 260px;
        }

        .md\:w-\[340px\] {
                width: 340px;
        }

        .md\:w-full {
                width: 100%;
        }

        .md\:flex-none {
                flex: none;
        }

        .md\:shrink-0 {
                flex-shrink: 0;
        }

        .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .md\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .md\:grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .md\:grid-cols-\[minmax\(0\2c 1\.3fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 1\.5fr\)_minmax\(0\2c 2fr\)\] {
                grid-template-columns: minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,2fr);
        }

        .md\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(280px\2c 320px\)\] {
                grid-template-columns: minmax(0,1fr) minmax(280px,320px);
        }

        .md\:flex-row {
                flex-direction: row;
        }

        .md\:items-start {
                align-items: flex-start;
        }

        .md\:items-center {
                align-items: center;
        }

        .md\:justify-between {
                justify-content: space-between;
        }

        .md\:gap-3 {
                gap: 0.75rem;
        }

        .md\:px-0 {
                padding-left: 0px;
                padding-right: 0px;
        }

        .md\:px-8 {
                padding-left: 2rem;
                padding-right: 2rem;
        }

        .md\:text-\[120px\] {
                font-size: 120px;
        }

        .md\:text-\[26px\] {
                font-size: 26px;
        }
}
@media (min-width: 1024px) {

        .lg\:sticky {
                position: sticky;
        }

        .lg\:top-0 {
                top: 0px;
        }

        .lg\:top-\[76px\] {
                top: 76px;
        }

        .lg\:order-1 {
                order: 1;
        }

        .lg\:order-2 {
                order: 2;
        }

        .lg\:col-span-2 {
                grid-column: span 2 / span 2;
        }

        .lg\:col-span-3 {
                grid-column: span 3 / span 3;
        }

        .lg\:block {
                display: block;
        }

        .lg\:inline {
                display: inline;
        }

        .lg\:flex {
                display: flex;
        }

        .lg\:grid {
                display: grid;
        }

        .lg\:hidden {
                display: none;
        }

        .lg\:max-h-\[55vh\] {
                max-height: 55vh;
        }

        .lg\:w-\[260px\] {
                width: 260px;
        }

        .lg\:w-\[272px\] {
                width: 272px;
        }

        .lg\:w-\[280px\] {
                width: 280px;
        }

        .lg\:flex-1 {
                flex: 1 1 0%;
        }

        .lg\:flex-\[1\.4\] {
                flex: 1.4;
        }

        .lg\:shrink-0 {
                flex-shrink: 0;
        }

        .lg\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .lg\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .lg\:grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .lg\:grid-cols-\[1\.05fr_0\.95fr\] {
                grid-template-columns: 1.05fr 0.95fr;
        }

        .lg\:grid-cols-\[1\.5fr_1fr\] {
                grid-template-columns: 1.5fr 1fr;
        }

        .lg\:grid-cols-\[1fr_280px\] {
                grid-template-columns: 1fr 280px;
        }

        .lg\:grid-cols-\[220px_minmax\(0\2c 1fr\)\] {
                grid-template-columns: 220px minmax(0,1fr);
        }

        .lg\:grid-cols-\[minmax\(0\2c 1fr\)_300px\] {
                grid-template-columns: minmax(0,1fr) 300px;
        }

        .lg\:grid-cols-\[minmax\(0\2c 1fr\)_44px\] {
                grid-template-columns: minmax(0,1fr) 44px;
        }

        .lg\:grid-cols-\[minmax\(0\2c 1fr\)_clamp\(320px\2c 34\%\2c 380px\)\] {
                grid-template-columns: minmax(0,1fr) max(320px, min(34%, 380px));
        }

        .lg\:flex-row {
                flex-direction: row;
        }

        .lg\:items-start {
                align-items: flex-start;
        }

        .lg\:items-center {
                align-items: center;
        }

        .lg\:justify-between {
                justify-content: space-between;
        }

        .lg\:gap-10 {
                gap: 2.5rem;
        }

        .lg\:gap-8 {
                gap: 2rem;
        }

        .lg\:overflow-y-auto {
                overflow-y: auto;
        }

        .lg\:border-l {
                border-left-width: 1px;
        }

        .lg\:border-t-0 {
                border-top-width: 0px;
        }

        .lg\:p-11 {
                padding: 2.75rem;
        }

        .lg\:\[grid-template-columns\:24px_minmax\(0\2c 1fr\)_130px_140px_150px_110px_100px\] {
                grid-template-columns: 24px minmax(0,1fr) 130px 140px 150px 110px 100px;
        }
}
@media (min-width: 1280px) {

        .xl\:sticky {
                position: sticky;
        }

        .xl\:top-0 {
                top: 0px;
        }

        .xl\:col-span-2 {
                grid-column: span 2 / span 2;
        }

        .xl\:inline {
                display: inline;
        }

        .xl\:flex {
                display: flex;
        }

        .xl\:inline-flex {
                display: inline-flex;
        }

        .xl\:hidden {
                display: none;
        }

        .xl\:w-\[296px\] {
                width: 296px;
        }

        .xl\:w-\[55\%\] {
                width: 55%;
        }

        .xl\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .xl\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .xl\:grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .xl\:grid-cols-\[340px_minmax\(0\2c 1fr\)\] {
                grid-template-columns: 340px minmax(0,1fr);
        }
}
@media (min-width: 1536px) {

        .\32xl\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .\32xl\:grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .\32xl\:grid-cols-5 {
                grid-template-columns: repeat(5, minmax(0, 1fr));
        }
}
.dark\:text-amber-400:where([data-theme="dark"], [data-theme="dark"] *) {
        --tw-text-opacity: 1;
        color: rgba(251, 191, 36, 1);
        color: rgba(251, 191, 36, var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:where([data-theme="dark"], [data-theme="dark"] *) {
        --tw-text-opacity: 1;
        color: rgba(52, 211, 153, 1);
        color: rgba(52, 211, 153, var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400\/90:where([data-theme="dark"], [data-theme="dark"] *) {
        color: rgba(52, 211, 153, 0.9);
}
.\[\&\>\*\:first-child\]\:mt-0>*:first-child {
        margin-top: 0px;
}
.\[\&\>\*\:last-child\]\:mb-0>*:last-child {
        margin-bottom: 0px;
}
.\[\&\>\*\]\:my-0>* {
        margin-top: 0px;
        margin-bottom: 0px;
}
.\[\&\>\*\]\:my-1>* {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
}
.\[\&\>\*\]\:my-1\.5>* {
        margin-top: 0.375rem;
        margin-bottom: 0.375rem;
}
.\[\&\>\*\]\:w-full>* {
        width: 100%;
}
@keyframes spin {

        to {
                transform: rotate(360deg);
        }
}
.\[\&\>svg\:first-child\]\:animate-spin>svg:first-child {
        animation: spin 1s linear infinite;
}
.\[\&_\*\]\:inline * {
        display: inline;
}
.\[\&_\[role\=combobox\]\>span\]\:min-w-0 [role=combobox]>span {
        min-width: 0px;
}
.\[\&_\[role\=combobox\]\>span\]\:overflow-hidden [role=combobox]>span {
        overflow: hidden;
}
.\[\&_\[role\=combobox\]\]\:w-full [role=combobox] {
        width: 100%;
}
.\[\&_\[role\=combobox\]\]\:min-w-0 [role=combobox] {
        min-width: 0px;
}
.\[\&_\[role\=combobox\]\]\:max-w-full [role=combobox] {
        max-width: 100%;
}
.\[\&_\[role\=combobox\]\]\:overflow-hidden [role=combobox] {
        overflow: hidden;
}
.\[\&_\[role\=combobox\]_\.truncate\]\:block [role=combobox] .truncate {
        display: block;
}
.\[\&_\[role\=combobox\]_\.truncate\]\:max-w-full [role=combobox] .truncate {
        max-width: 100%;
}
.\[\&_\[role\=combobox\]_span\]\:min-w-0 [role=combobox] span {
        min-width: 0px;
}
.\[\&_a\:hover\]\:underline a:hover {
        text-decoration-line: underline;
}
.\[\&_a\]\:cursor-pointer a {
        cursor: pointer;
}
.\[\&_a\]\:font-550 a {
        font-weight: 550;
}
.\[\&_a\]\:underline a {
        text-decoration-line: underline;
}
.\[\&_br\]\:hidden br {
        display: none;
}
.\[\&_p\]\:m-0 p {
        margin: 0px;
}
.\[\&_svg\]\:h-3\.5 svg {
        height: 0.875rem;
}
.\[\&_svg\]\:h-\[13px\] svg {
        height: 13px;
}
.\[\&_svg\]\:h-\[15px\] svg {
        height: 15px;
}
.\[\&_svg\]\:h-\[18px\] svg {
        height: 18px;
}
.\[\&_svg\]\:w-3\.5 svg {
        width: 0.875rem;
}
.\[\&_svg\]\:w-\[13px\] svg {
        width: 13px;
}
.\[\&_svg\]\:w-\[15px\] svg {
        width: 15px;
}
.\[\&_svg\]\:w-\[18px\] svg {
        width: 18px;
}
.\[\&_svg\]\:shrink-0 svg {
        flex-shrink: 0;
}
.\[\&_svg\]\:rotate-180 svg {
        --tw-rotate: 180deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {

        to {
                transform: rotate(360deg);
        }
}
.\[\&_svg\]\:animate-spin svg {
        animation: spin 1s linear infinite;
}
.\[\&_svg\]\:transition-transform svg {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
}
@media(hover:none) {

        .\[\@media\(hover\:none\)\]\:pr-20 {
                padding-right: 5rem;
        }

        .\[\@media\(hover\:none\)\]\:opacity-100 {
                opacity: 1;
        }
}
/* ============================================================================
   ALVANDA — "LIQUID GLASS" DESIGN LANGUAGE · tokens.css
   Single source of truth for the rebuild.

   ── HOW TO USE ──────────────────────────────────────────────────────────────
   Everything is SCOPED under `.lg-root`. Wrap the rebuilt UI in an element with
   that class (e.g. <body class="lg-root"> or a top-level <div class="lg-root">).
   Nothing here touches the global `:root` or bare element selectors, so it can
   live ALONGSIDE the current app / Material-UI / global SCSS WITHOUT CONFLICT.
   When the old dashboard is finally deleted, no cleanup of this file is needed.

   Dark mode: add `.theme-dark` to the same `.lg-root` element.

   ── PER-COMPANY THEMING (white-label) ────────────────────────────────────────
   Companies re-skin the product by overriding the BRAND LAYER variables below.
   Set them as an inline style on the .lg-root element (highest specificity),
   injected from company settings — e.g.:
       <body class="lg-root" style="--brand:#C81E1E; --font:'Soehne', Inter, sans-serif;">
   ...or inject a scoped block: `.lg-root{ --brand:#C81E1E; }`.
   Every brand-derived value (gradients, tints, focus ring, progress, active nav)
   recolours automatically via color-mix(), so one variable reskins the system.
   All other tokens are variables too and MAY be overridden the same way.

   Principles: glass not cards · 1px borders carry hierarchy, not shadows
   (--shadow-pop is allowed ONLY on floating overlays) · one accent used sparingly
   · calm canvas · light AND dark are equal · quiet, eased motion.
   ========================================================================== */

.lg-root {
  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  BRAND LAYER — the company-overridable surface. Override these.        ║
     ╚══════════════════════════════════════════════════════════════════════╝ */
  --brand: #3030AD;
  /* primary accent */
  --brand-soft: #5a5ad6;
  /* lighter accent (links in dark, secondary) */
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  /* product typeface */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Brand-derived (auto-recolour from --brand — usually no need to override) */
  --brand-grad: linear-gradient(145deg, color-mix(in srgb, var(--brand) 75%, #fff), var(--brand));
  --brand-orb: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--brand) 70%, #fff), var(--brand));
  --brand-tint: color-mix(in srgb, var(--brand) 12%, transparent);
  /* soft pill/active bg */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  /* Per-theme brand text tokens — set by applyBrandingGlobally via JS so any
     white-label colour stays WCAG AA in both light and dark. Each is chosen
     independently against the actual surface colour. Do NOT override these
     manually; let the contrast helper drive them. Use --brand-text for text
     foregrounds; use --on-brand for text placed directly on brand fills. */
  /* MUST be a concrete value, never `var(--brand-text)` — that plus the
     `--brand-text: var(--brand-text-light)` below forms a dependency cycle, and
     a cycle makes BOTH custom properties compute to guaranteed-invalid. Every
     `color: var(--brand-text)` then falls back to the INHERITED colour (--ink),
     so brand accents silently render as body text and a --brand-text foreground
     on a brand fill becomes unreadable. It only looked fine when
     applyBrandingGlobally happened to overwrite it on :root; clearBranding-
     Globally, or any company without full branding, restored the cycle.
     Brand-as-text on the LIGHT canvas is the brand hue itself. */
  --brand-text-light: var(--brand);
  --brand-text-dark: #FFFFFF;
  --brand-text: var(--brand-text-light);
  --on-brand: #FFFFFF;

  /* ── Canvas (ambient background behind all glass) ── */
  --bg-1: #eef1f6;
  --bg-2: #e7eaf2;

  /* ── Ink (text — three levels only) ── */
  --ink: #1c1f29;
  --ink-soft: #5b6072;
  --ink-faint: #8c91a3;

  /* ── Glass materials ── */
  --glass-fill: rgba(255, 255, 255, 0.62);
  /* .glass — panels & rails */
  --glass-fill-strong: rgba(255, 255, 255, 0.78);
  /* .glass-strong — raised/interactive */
  --glass-border: rgba(20, 24, 40, 0.10);
  /* the structural 1px hairline */
  --glass-hair: rgba(20, 24, 40, 0.08);
  /* fainter in-panel divider */
  /* How much of a user-chosen accent survives in a tinted LABEL, the rest being
     --ink (see lib/taskPriorityColor). It is per-theme because dark glass
     composites lighter the deeper a chip is nested, so the same blend that
     clears AA over the light canvas does not clear it on a stacked dark panel. */
  --priority-accent-share: 40%;
  --field-fill: rgba(255, 255, 255, 0.55);
  /* form field rest state */
  --popover-fill: rgba(252, 253, 255, 0.97);
  --sticky-fill: rgba(243, 245, 250, 0.94);
  /* sticky surfaces that OCCLUDE scrolling content (pinned headers, frozen
     columns). Must be near-opaque: a translucent fill lets scrolled content
     bleed through, which is invisible in light mode but obvious in dark. */
  /* floating menus/dropdowns — near-opaque so content reads clearly */

  /* ── Elevation — FLAT in-flow. Borders, not shadows. ── */
  --shadow: none;
  /* in-flow surfaces are FLAT — no shadow; the 1px hairline separates them. */
  --specular: none;
  --shadow-pop: 0 10px 30px -12px rgba(28, 32, 55, 0.22);
  /* the ONLY shadow in the system — floating overlays (popover/menu/modal/drawer/toast) */
  --scrim: rgba(20, 24, 40, 0.32);
  /* modal backdrop */
  --scrim-soft: rgba(20, 24, 40, 0.14);
  /* reduced backdrop — preview panels that keep the page readable behind them */

  /* ── Z-INDEX SCALE — the single source of truth for stacking. ──
     Glass panels use backdrop-filter (a stacking context + containing block),
     so in-flow layers (rails, sticky bar) live in the low band, and floating
     overlays MUST be portaled to #lg-overlay-root (outside the panels) where
     these high-band values resolve against the viewport. Never hardcode z. */
  --z-behind: -1;
  /* ambient canvas */
  --z-base: 0;
  /* page content */
  --z-rail: 10;
  /* sidebar / copilot / in-flow chrome */
  --z-sticky: 20;
  /* top bar (lifts its anchored menus above content) */
  --z-dropdown: 1000;
  /* anchored menus (notifications, profile) */
  --z-scrim: 1190;
  /* overlay backdrop */
  --z-modal: 1200;
  /* command palette, dialogs, drawers */
  --z-popover: 1250;
  /* select/menu popovers that may open INSIDE a modal — must float above it (below toast) */
  --z-toast: 1300;
  /* transient notifications */

  /* ── Status (the only non-brand colours) ── */
  --ok: #34a35a;
  --ok-pulse: rgba(52, 199, 89, 0.6);
  --warn: #cf9420;
  --warn-strong: #d99a2b;
  --danger: #e0524d;
  /* --danger is a FILL colour: as body text on glass it measures ~3.8:1 light and
     ~4.4:1 dark, both under AA 4.5:1. Use --danger-text for danger COPY, exactly
     as --brand-text exists for brand copy. (The .lg-btn-danger rule further down
     already works around the same shortfall by deepening its own hover fill.) */
  --danger-text: #b3352f;

  /* ── Radii ── */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-full: 9999px;
  /* --r-btn: the canonical button/link corner radius (≈ Tailwind rounded-lg, 8px).
     Kept separate from the surface scale so buttons/links can be retuned in one
     place without touching panels, fields, popovers, etc. */
  --r-btn: 8px;
  /* CARD CAP: in-flow cards / panels / tables / rows cap at 12px (Tailwind
     `rounded-lg` = --radius, == --r-md). Larger radii (--r-xl/2xl) are for the
     app-shell FRAME only; pills/avatars/orbs/dots use --r-full. NB the two scales
     differ — Tailwind `rounded-lg` is 12px, but the --r-lg token is 16px. */

  /* ── Motion ──
     Quiet and eased. Durations climb with the size of the thing that moves:
     state < control < element < panel < overlay. Respect reduced-motion (below). */
  --ease: cubic-bezier(.2, .7, .3, 1);
  /* standard ease-out */
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  /* gentle overshoot for press/pop */
  --t-fast: .14s;
  /* opacity / tiny state */
  --t-base: .18s;
  /* hover, colour */
  --t-move: .26s;
  /* element enter / reposition */
  --t-panel: .32s;
  /* sidebar / AI rail collapse, drawers */

  /* base */
  font-family: var(--font), "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01";
}

/* v2 base type size — restore the previous app's effective ~16px base for the
   v2 tree. Scoped to `.lg-root.v2-app` so it touches ONLY the rebuilt UI: it
   raises the inherited font-size for unsized text nodes and any em-based sizing,
   and is the rem base for any `rem` Tailwind utilities used inside v2. Legacy
   app is untouched (no `html`/`body` font-size is changed). Reversible by
   deleting this rule. */
.lg-root.v2-app {
  font-size: 16px;
}

/* Dark mode — toggle by adding `.theme-dark` to the .lg-root element */
.lg-root.theme-dark {
  --bg-1: #1b1d24;
  --bg-2: #20222b;
  --ink: #eef0f6;
  /* Dark fills sit at 6-14% white (vs 62-78% in light), so anything NESTED —
     a chip on a panel, a bubble in a pane — needs the extra few points of
     alpha below or it dissolves into its parent. Tuned against the components
     detail pane (3 glass layers deep); don't re-lower without checking it. */
  --ink-soft: #aeb4c6;
  --ink-faint: #9ea6bb;
  --glass-fill: rgba(255, 255, 255, 0.085);
  --glass-fill-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-hair: rgba(255, 255, 255, 0.14);
  --priority-accent-share: 13%;
  --field-fill: rgba(255, 255, 255, 0.07);
  --popover-fill: rgba(32, 34, 43, 0.975);
  --sticky-fill: rgba(27, 29, 36, 0.96);
  --shadow: none;
  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-pop: 0 16px 40px -16px rgba(0, 0, 0, 0.60);
  --scrim: rgba(0, 0, 0, 0.55);
  --scrim-soft: rgba(0, 0, 0, 0.30);
  /* Lighten brand-as-text so it reads on the dark canvas. Derived from --brand,
     so a white-label company that overrides only --brand gets a legible text
     accent automatically (≥4.5:1 AA across the tested brand range). */
  --brand-text: var(--brand-text-dark);
  /* Lighten danger-as-text for the dark canvas, same reasoning as --brand-text. */
  --danger-text: #ff9d97;
}

/* ── Platform Admin (super-admin) accent ────────────────────────────────────
   The super-admin area is platform-OWNED, not a customer business, so it ignores
   per-company white-label branding and uses a fixed slate "control" accent so it
   is unmistakably a different surface. V2AppShell adds `.su-area` to the
   `.lg-root` element only for superadmins. Only --brand/--brand-soft are set
   here; every derived token (--brand-grad/-orb/-tint, --focus-ring, and the
   dark-mode --brand-text lightening) recomputes from these via var(), so light
   and dark both keep working without any extra rules. The two-class selector
   outranks the base `.lg-root` defaults. */
.lg-root.su-area {
  --brand: #475569;
  /* slate-600 — cool steel, distinct from the indigo default */
  --brand-soft: #64748b;
  /* slate-500 */
}

/* ── Brand-logo dark whitening ──────────────────────────────────────────────
   The Alvanda wordmark (logo.svg) and small mark (smallLogoPurple.svg) are
   purple-on-transparent and go near-invisible on the dark canvas. The Liquid
   Glass system toggles dark via `.theme-dark` on `.lg-root` (NOT Tailwind's
   `data-theme="dark"` selector), so the old `dark:brightness-0 dark:invert`
   classes never fired here. Components opt in with
   `style={{ filter: 'var(--logo-filter, none)' }}` (or the `lg-logo` class) and
   get whitening only in dark — scoped per-component, no global token change. */
.lg-root {
  --logo-filter: none;
}

.lg-root.theme-dark {
  --logo-filter: brightness(0) invert(1);
}

.lg-root.theme-dark .lg-logo {
  filter: brightness(0) invert(1);
}

/* ── Tabular numerals (counts, %, times) ── */
.lg-root .tnum {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Guidance / rich-text prose (sanitized backend HTML: step guidance, etc.) ──
   Preflight is OFF, so give injected guidance HTML readable defaults that respect
   the token palette (brand links, list markers, heading/strong emphasis). Scoped
   to .lg-guidance so it never leaks to other dangerouslySetInnerHTML content. */
.lg-root .lg-guidance {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.lg-root .lg-guidance>*+* {
  margin-top: .7em;
}

.lg-root .lg-guidance a {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lg-root .lg-guidance a:hover {
  opacity: .85;
}

.lg-root .lg-guidance ul {
  list-style: disc;
  padding-left: 1.25em;
  margin: .3em 0;
}

.lg-root .lg-guidance ol {
  list-style: decimal;
  padding-left: 1.25em;
  margin: .3em 0;
}

.lg-root .lg-guidance li {
  margin: .15em 0;
}

.lg-root .lg-guidance p {
  margin: .4em 0;
}

.lg-root .lg-guidance p:first-child {
  margin-top: 0;
}

.lg-root .lg-guidance p:last-child {
  margin-bottom: 0;
}

.lg-root .lg-guidance strong,
.lg-root .lg-guidance b {
  font-weight: 650;
  color: var(--ink);
}

.lg-root .lg-guidance h1 {
  font-size: 1.55em;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: .5em 0 .25em;
  line-height: 1.3;
}

.lg-root .lg-guidance h2 {
  font-size: 1.28em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: .5em 0 .25em;
  line-height: 1.3;
}

.lg-root .lg-guidance h3 {
  font-size: 1.12em;
  font-weight: 600;
  color: var(--ink);
  margin: .5em 0 .25em;
  line-height: 1.3;
}

.lg-root .lg-guidance h4 {
  font-size: 1em;
  font-weight: 600;
  color: var(--ink);
  margin: .5em 0 .25em;
  line-height: 1.3;
}

.lg-root .lg-guidance blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 14px;
  margin-left: 0;
  color: var(--ink-soft);
  font-style: italic;
}

.lg-root .lg-guidance code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--glass-hair);
  padding: .12em .4em;
  border-radius: var(--r-sm);
}

.lg-root .lg-guidance pre {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--glass-hair);
  padding: 12px 14px;
  border-radius: var(--r-md);
  overflow-x: auto;
}

.lg-root .lg-guidance pre code {
  background: none;
  padding: 0;
}

.lg-root .lg-guidance hr {
  border: 0;
  border-top: 1px solid var(--glass-border);
  margin: 1em 0;
}

.lg-root .lg-guidance table {
  border-collapse: collapse;
  width: 100%;
  margin: .6em 0;
}

.lg-root .lg-guidance td,
.lg-root .lg-guidance th {
  border: 1px solid var(--glass-border);
  padding: 7px 10px;
  vertical-align: top;
}

.lg-root .lg-guidance th {
  background: var(--glass-hair);
  font-weight: 600;
  text-align: left;
}

.lg-root .lg-guidance img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* ── The ambient canvas (fixed, behind everything) ── */
.lg-root .canvas-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-behind);
  background:
    radial-gradient(900px 700px at 12% -5%, rgba(120, 130, 220, 0.10), transparent 60%),
    radial-gradient(800px 640px at 92% 8%, rgba(150, 140, 210, 0.09), transparent 60%),
    radial-gradient(1000px 800px at 78% 105%, rgba(110, 150, 200, 0.07), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
}

.lg-root.theme-dark .canvas-bg {
  background:
    radial-gradient(900px 700px at 12% -5%, rgba(90, 100, 190, 0.16), transparent 60%),
    radial-gradient(800px 640px at 92% 8%, rgba(120, 110, 180, 0.12), transparent 60%),
    radial-gradient(1000px 800px at 78% 105%, rgba(80, 110, 170, 0.10), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
}

/* ── Core glass materials ── */
.lg-root .glass {
  background: var(--glass-fill);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

.lg-root .glass-strong {
  background: var(--glass-fill-strong);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}

.lg-root .hair {
  border-color: var(--glass-hair);
}

/* ── Interactive states ── */
.lg-root .nav-item {
  color: var(--ink-soft);
  transition: color var(--t-base) ease, background var(--t-base) ease, border-color var(--t-base) ease;
  border: 1px solid transparent;
}

.lg-root .nav-item:hover {
  color: var(--ink);
  background: var(--glass-fill);
  border-color: var(--glass-border);
}

.lg-root .nav-active {
  color: var(--ink);
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  position: relative;
}

.lg-root .nav-active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand);
  transition: height var(--t-base) ease;
}

.lg-root .row-hover {
  border: 1px solid transparent;
  transition: background var(--t-base) ease, border-color var(--t-base) ease;
}

.lg-root .row-hover:hover {
  background: var(--glass-fill);
  border-color: var(--glass-border);
}

.lg-root .seg-active {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

.lg-root .chip {
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.lg-root .chip:hover {
  background: var(--glass-fill-strong);
  transform: translateY(-1px);
}

.lg-root .tile {
  border: 1px solid var(--glass-border);
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.lg-root .tile:hover {
  background: var(--glass-fill-strong);
  transform: translateY(-2px);
}

.lg-root .treebtn {
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.lg-root .treebtn:hover {
  background: var(--glass-fill);
  color: var(--ink);
  border-color: var(--glass-border);
}

.lg-root .treebtn.active {
  background: var(--glass-fill-strong);
  color: var(--ink);
  border-color: var(--glass-border);
}

.lg-root .treebtn.active .folderglyph {
  color: var(--brand-soft);
}

/* ── Form fields ── */
.lg-root .field {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--field-fill);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease, background var(--t-base) ease;
}

/* Placeholders are FUNCTIONAL text (a prompt the user must read) — they floor
   at the --ink-soft tier. --ink-faint is reserved for decoration/metadata. */
.lg-root .field::placeholder {
  color: var(--ink-soft);
}

.lg-root .field:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  background: var(--glass-fill-strong);
}

.lg-root .field.err {
  border-color: var(--danger);
}

/* ── Document canvas title ──
   The seamless title surface ON the paper for full-page document surfaces
   (guiding-document editor + viewers): an <input> while editing, an <h1> in
   read modes — same class so the two modes align to the pixel. The fixed page
   header must only ECHO this title while it is scrolled off-screen
   (useScrollAwareTitle), so the document's identity is always visible exactly
   once. Focus is a 2px inset brand underline, not --focus-ring: text inputs
   match :focus-visible on every focus, and a ring drawn around display-scale
   text reads as a box, not focus. box-shadow inset → zero layout shift. */
.lg-root .doc-canvas-title {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  outline: none;
  color: var(--ink);
  font-size: max(22px, min(5vw, 26px));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lg-root .doc-canvas-title::placeholder {
  color: var(--ink-soft);
}

.lg-root input.doc-canvas-title:focus {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--brand) 40%, transparent);
}

.lg-root input.doc-canvas-title.err {
  box-shadow: inset 0 -2px 0 var(--danger);
}

.lg-root .switch {
  width: 38px;
  height: 22px;
  border-radius: var(--r-full);
  /* Ink-mix, not glass-hair: the OFF track must read as a control body in both
     themes — glass-hair (8-14%) disappears against nested dark glass. */
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  border: 1px solid var(--glass-border);
  position: relative;
  cursor: pointer;
  transition: background var(--t-base) ease;
}

.lg-root .switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  /* Hairline keeps the white knob visible on the light-theme off track. */
  border: 1px solid var(--glass-border);
  transition: left var(--t-base) var(--ease-spring);
  box-shadow: var(--shadow);
}

.lg-root .switch.on {
  background: var(--brand);
}

.lg-root .switch.on .knob {
  left: 18px;
}

/* ── Floating overlays (popovers, menus, modals, drawers, tooltips) ── */
.lg-root .popover {
  background: var(--popover-fill);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-pop);
  border-radius: var(--r-lg);
}

.lg-root .scrim {
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lg-root .sticky-surface {
  background: var(--sticky-fill);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.lg-root .scrim-soft {
  background: var(--scrim-soft);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── Collapsible rails (sidebar + AI copilot) ── */
.lg-root .copilot {
  width: 340px;
  transition: width var(--t-panel) var(--ease);
}

.lg-root .copilot.collapsed {
  width: 56px;
}

.lg-root .copilot.collapsed .ai-expanded {
  display: none;
}

.lg-root .copilot .ai-collapsed {
  display: none;
}

.lg-root .copilot.collapsed .ai-collapsed {
  display: flex;
}

/* ── V2Table responsive columns — CONTAINER-relative, not viewport ──
   A table's `hideBelow` columns collapse based on the table's OWN available
   width (its container), never the viewport. The sidebar + copilot rail eat
   horizontal space, so the content column can be narrow while the viewport is
   still wide (both rails open on `/agents`, tasks, admin, …); viewport media
   queries would keep every column and force the row to overflow/clip its column.
   Keying off the container makes the columns reflow within the real space.
   `.v2-col-hide-sm/-md` default to hidden and reveal past the matching container
   width; the wrapper carries `.v2-table-cq` to be the query container. */
.lg-root .v2-table-cq {
  container-type: inline-size;
}

.lg-root .v2-col-hide-sm,
.lg-root .v2-col-hide-md,
.lg-root .v2-col-hide-lg {
  display: none;
}

@container (min-width: 640px) {
  .lg-root .v2-col-hide-sm {
    display: flex;
  }
}

@container (min-width: 768px) {
  .lg-root .v2-col-hide-md {
    display: flex;
  }
}

@container (min-width: 1024px) {
  .lg-root .v2-col-hide-lg {
    display: flex;
  }
}

/* Graceful degradation: where @container is unsupported, show the columns
   (the pre-fix always-visible behaviour) rather than hiding them forever. */
@supports not (container-type: inline-size) {
  .lg-root .v2-col-hide-sm,
  .lg-root .v2-col-hide-md,
  .lg-root .v2-col-hide-lg {
    display: flex;
  }
}

/* Badge labels yield to their icon below the NEAREST container's 640px tier
   (inside a table that's `.v2-table-cq` — the table's own width): on a
   phone-width column the row's NAME is the anchor, and a derived signal earns
   an icon, not words. Opt-in via `withLabel="auto"` on the badge components,
   which keep an sr-only label + title so nothing is lost to readers. Outside
   any width container the query never matches and the label stays. */
@container (max-width: 639.98px) {
  .lg-root .lg-badge-label-auto {
    display: none;
  }
}

/* ── Object tile grid — CONTAINER-relative, not viewport ──
   The grid of file / folder / object tiles in a library panel. Column count is
   a function of the PANEL's own width, never the viewport's: on a page with a
   folder rail and a detail pane, the panel can be 380px wide while the viewport
   is 1600, and `md:grid-cols-3 xl:grid-cols-4` would then stamp four columns
   into it and crush every tile to ~90px. Same failure (and the same fix) as the
   V2Table container-query columns above.

   `auto-fill` + `minmax()` reflows on the grid's own width with no query at
   all. The `max()` floor is the tile's minimum readable width; the calc() arm
   caps the grid at FOUR columns on a wide panel, so a roomy layout keeps the
   old xl density instead of shedding tiles into ever-narrower strips.
   36px = the three 12px gaps a four-column row carries. */
.lg-root .lg-tile-grid {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(max(180px, calc((100% - 36px) / 4)), 1fr));
}

/* ── Entity-card grid — CONTAINER-relative, not viewport ──
   The person / procedure / component card grids. Same failure (and same fix)
   as .lg-tile-grid, at card density: `sm:/xl:/2xl:grid-cols-*` stamp a column
   count from the VIEWPORT, but the rails + a page's own side panel can leave
   the grid a third of that width, crushing every card. auto-fill + minmax()
   reflows on the grid's own width instead; the max() floor is the card's
   minimum readable width (avatar + role pill + two meta lines — the ES pill,
   the longest, needs ~132px beside a 44px avatar in a p-4 card), and the
   calc() arm caps a roomy panel at FIVE columns so wide layouts stay compact
   without shedding cards into ever-wider slabs. 48px = the four 0.75rem gaps
   a five-column row carries. */
.lg-root .lg-card-grid {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 48px) / 5)), 1fr));
}

/* ── Status-board grid — CONTAINER-relative, not viewport ──
   The three-column task board (Overdue / Today / Later) hosted by the Task
   View widget. Same failure (and same fix) as .lg-tile-grid: a viewport
   `md:grid-cols-3` stamps three tracks into a panel the rails have narrowed.
   auto-fill + minmax() reflows on the grid's own width; the max() floor is a
   column's minimum readable width (a TaskCard row with its action buttons),
   and the calc() arm caps the grid at THREE tracks so a full-width host keeps
   one column per bucket. 24px = the two 0.75rem gaps a three-column row
   carries. */
.lg-root .lg-board-grid {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 24px) / 3)), 1fr));
}

/* ── Dashboard widget grid — CONTAINER-relative, not viewport ──
   Report-dashboard widgets (ALVN-2804) carry an explicit caller-set size
   (s/m/l) instead of a uniform tile, so auto-fill/minmax (the .lg-tile-grid/
   .lg-card-grid trick) doesn't apply — this needs an explicit track count +
   per-item `grid-column: span`. `container-type` sits on the grid itself
   (unnamed, like `.v2-table-cq`) so it degrades on its OWN box, whether that's
   the full dashboard page or the narrower app-dashboard band beside an open
   copilot rail. Three tiers: 1 track (stacked) below 480px, 2 tracks from
   480px (s=half, m/l=full row), 4 tracks from 860px — the contract's
   canonical s=1/m=2/l=4-of-4 ("s=1 col, m=2 cols, l=full row") mapping. */
.lg-root .lg-widget-grid {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  container-type: inline-size;
}

.lg-root .lg-widget-s,
.lg-root .lg-widget-m,
.lg-root .lg-widget-l {
  grid-column: 1 / -1;
  min-width: 0;
}

@container (min-width: 480px) {
  .lg-root .lg-widget-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg-root .lg-widget-s {
    grid-column: span 1;
  }

  .lg-root .lg-widget-m,
  .lg-root .lg-widget-l {
    grid-column: span 2;
  }
}

@container (min-width: 860px) {
  .lg-root .lg-widget-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .lg-root .lg-widget-s {
    grid-column: span 1;
  }

  .lg-root .lg-widget-m {
    grid-column: span 2;
  }

  .lg-root .lg-widget-l {
    grid-column: span 4;
  }
}

/* Graceful degradation: without container queries, settle on the 2-track
   tier (the common case: full page or band both usually clear 480px). */
@supports not (container-type: inline-size) {
  .lg-root .lg-widget-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg-root .lg-widget-s {
    grid-column: span 1;
  }

  .lg-root .lg-widget-m,
  .lg-root .lg-widget-l {
    grid-column: span 2;
  }
}

/* ── Dashboard widget drag & drop ──
   The grid reorders for real while you drag (no library transform predicts a
   1/2/4-track span correctly), so these styles carry the whole affordance:
   what you can grab, what is in hand, and where it will land. */

/* The grab affordance. `touch-action:none` is REQUIRED, not cosmetic — without
   it a touch drag is claimed by the scroller and the pointer sensor never
   activates, so the handle is dead on tablets. Kept quiet until the card is
   hovered so a read-heavy dashboard doesn't sprout grips everywhere. */
.lg-root .lg-drag-handle {
  color: var(--ink-faint);
  cursor: grab;
  touch-action: none;
  opacity: 0.55;
  border: 1px solid transparent;
  transition: opacity var(--t-base) var(--ease), color var(--t-base) var(--ease),
              background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.lg-root .lg-widget-s:hover .lg-drag-handle,
.lg-root .lg-widget-m:hover .lg-drag-handle,
.lg-root .lg-widget-l:hover .lg-drag-handle {
  opacity: 1;
}

.lg-root .lg-drag-handle:hover {
  color: var(--brand-text);
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand-text) 30%, transparent);
}

.lg-root .lg-drag-handle.focus-visible {
  outline: none;
  opacity: 1;
  color: var(--brand-text);
  box-shadow: var(--focus-ring);
}

.lg-root .lg-drag-handle:focus-visible {
  outline: none;
  opacity: 1;
  color: var(--brand-text);
  box-shadow: var(--focus-ring);
}

.lg-root .lg-drag-handle:active,
.lg-root .lg-drag-handle.is-held {
  cursor: grabbing;
  opacity: 1;
  color: var(--brand-text);
}

/* While a drag is live the whole grid commits to the gesture: no accidental
   text selection, and the grabbing cursor survives leaving the handle. */
.lg-root .lg-widget-grid.is-reordering {
  cursor: grabbing;
  -webkit-user-select: none;
          user-select: none;
}

/* Carries the FLIP transform so the grid ITEM (what @dnd-kit measures) keeps
   its true layout rect while its contents glide — see the note in
   DashboardWidgetCard. `will-change` is deliberately absent: it would promote
   every widget on the dashboard permanently; the hook animates transform only,
   which the compositor already handles. */
.lg-root .lg-widget-flip {
  height: 100%;
}

/* The vacated slot = the drop indicator. It keeps the card's exact footprint
   (contents merely go invisible, so the grid geometry is untouched) and marks
   it as the landing zone. Because the reorder is already committed in the DOM,
   this hole is genuinely where the card will end up — not a guess. */
.lg-root .lg-widget-ghost {
  position: relative;
}

.lg-root .lg-widget-ghost > * {
  opacity: 0;
}

.lg-root .lg-widget-ghost::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--r-md);
  border: 1.5px dashed color-mix(in srgb, var(--brand-text) 55%, transparent);
  background: color-mix(in srgb, var(--brand-text) 8%, transparent);
  animation: lg-drop-zone var(--t-move) var(--ease) both;
}

@keyframes lg-drop-zone {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The card in hand. --shadow-pop is design-system legal here and ONLY here:
   this is a true floating overlay, portaled to #lg-overlay-root, not an
   in-flow panel. The scale lives on this wrapper rather than the overlay
   itself so it composes with (instead of fighting) dnd-kit's own transform. */
.lg-root .lg-widget-lifted {
  transform: scale(1.03);
  transform-origin: center;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  cursor: grabbing;
  will-change: transform;
  animation: lg-pick-up var(--t-base) var(--ease) both;
}

.lg-root .lg-widget-lifted > * {
  border-radius: var(--r-md);
  outline: 1px solid color-mix(in srgb, var(--brand-text) 45%, transparent);
  outline-offset: -1px;
}

@keyframes lg-pick-up {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-root .lg-widget-lifted { transform: none; animation: none; }
}

/* ── Page content column = query container ──
   The shell's <main> carries .lg-page-cq so page-level layout can degrade on
   the column's REAL width: the sidebar (72–236px) and copilot rail (56–340px)
   shrink it by up to ~624px while the viewport stays wide, and `xl:` reveals
   the copilot rail in the same breath a viewport query would grant the page
   room (see "Multi-column pages degrade on the ROW's width" in the README).
   Named `lgpage` so page rules read explicitly; the UNNAMED .v2-col-hide-*
   queries keep matching their nearer .v2-table-cq wrapper, so tables are
   unaffected. inline-size containment is safe here: <main>'s width is imposed
   by the shell flex row (min-w-0 center column), never by its contents. */
.lg-root .lg-page-cq {
  container-type: inline-size;
  container-name: lgpage;
}

/* ── Page split — fixed aside + content, degrading on the COLUMN's width ──
   A library page with a fixed-width aside (company overview, folder rail…)
   goes side-by-side only when the content column actually affords it: a
   248px aside + 12px gap + ~460px of usable content ⇒ the 720px tier. Below
   it the aside stacks full-width above the content and collapses behind its
   disclosure toggle (.lg-page-aside-toggle / -body) — the phone presentation,
   because a rail-squeezed desktop column IS a phone-width column. Viewport
   `md:` used to drive this and handed out space the rails had already spent. */
.lg-root .lg-page-split { flex-direction: column; }
.lg-root .lg-page-aside { width: 100%; }
.lg-root .lg-page-aside-toggle { display: flex; }
.lg-root .lg-page-aside-body { display: none; }
.lg-root .lg-page-aside-body[data-expanded="true"] { display: flex; }

/* Detail-split companions: stacked ⇒ the split itself is the scroller and
   panes take their natural height; side-by-side ⇒ the split locks, each pane
   scrolls internally and the content pane takes the remaining row width.
   `.lg-page-aside-media` is the aside's identity block (avatar + name): a
   horizontal band while the aside is full-width, a vertical stack once the
   aside is the narrow side column. */
.lg-root .lg-page-split-scroll { overflow-y: auto; }

@container lgpage (min-width: 720px) {
  .lg-root .lg-page-split { flex-direction: row; }
  .lg-root .lg-page-aside { width: 248px; width: var(--lg-aside-w, 248px); }
  .lg-root .lg-page-aside-toggle { display: none; }
  .lg-root .lg-page-aside-body { display: flex; }
  .lg-root .lg-page-split-scroll { overflow-y: hidden; }
  .lg-root .lg-page-pane-scroll { overflow-y: auto; }
  .lg-root .lg-page-content { flex: 1 1 0%; min-width: 0; }
  .lg-root .lg-page-aside-media { flex-direction: column; align-items: flex-start; }
}

/* Graceful degradation: without container queries, fall back to the pre-fix
   viewport tier (md) rather than leaving the aside stacked/collapsed forever. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .lg-root .lg-page-split { flex-direction: row; }
    .lg-root .lg-page-aside { width: 248px; width: var(--lg-aside-w, 248px); }
    .lg-root .lg-page-aside-toggle { display: none; }
    .lg-root .lg-page-aside-body { display: flex; }
    .lg-root .lg-page-split-scroll { overflow-y: hidden; }
    .lg-root .lg-page-pane-scroll { overflow-y: auto; }
    .lg-root .lg-page-content { flex: 1 1 0%; min-width: 0; }
    .lg-root .lg-page-aside-media { flex-direction: column; align-items: flex-start; }
  }
}

/* ── Toolbar filters — collapse behind a disclosure on a narrow column ──
   Desktop presentation: `.lg-filters-body` is display:contents, so its filter
   controls sit inline in the toolbar's own wrap row — no extra box, no visual
   change. Below the 640px lgpage tier (a phone, or a rail-squeezed desktop
   column) the cluster becomes the aside-style disclosure: hidden until
   `.lg-filters-toggle` (which only exists on this tier) expands it, then a
   full-width stacked column where each `.lg-filter-item` control spans the
   row. On the same tier `.lg-cq-sm-hide` trims spelled-out button labels to
   their icons, `.lg-filter-search` lets the search pill take the free row
   width, and `.lg-seg-swipe` segments swipe within the column instead of
   pushing past the screen edge (their buttons must be shrink-0 or the pills
   squish before the scroll engages). Without @container support everything
   keeps the inline desktop presentation — the pre-fix behaviour. */
/* The toggle is a V2Button, whose `.lg-btn` base (display:flex) is defined
   LATER in this sheet at the same 0,2,0 specificity — the doubled class lifts
   these two rules to 0,3,0 so the tier, not source order, decides. */
.lg-root .lg-filters-toggle.lg-filters-toggle { display: none; }
.lg-root .lg-filters-body { display: contents; }

@container lgpage (max-width: 639.98px) {
  .lg-root .lg-filters-toggle.lg-filters-toggle { display: flex; }
  .lg-root .lg-filters-body { display: none; }
  .lg-root .lg-filters-body[data-expanded="true"] {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .lg-root .lg-filters-body[data-expanded="true"] .lg-filter-item {
    width: 100%;
    min-width: 0;
  }
  .lg-root .lg-cq-sm-hide { display: none; }
  .lg-root .lg-filter-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .lg-root .lg-seg-swipe {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lg-root .lg-seg-swipe::-webkit-scrollbar { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOTION LIBRARY — quiet, eased, purposeful. Apply utilities; never overdo it.
   ════════════════════════════════════════════════════════════════════════════ */

/* Interaction feedback — opt-in utilities */
.lg-root .lift {
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.lg-root .lift:hover {
  transform: translateY(-2px);
}

.lg-root .pcard {
  border: 1px solid var(--glass-border);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) ease;
}

.lg-root .pcard:hover {
  transform: translateY(-2px);
  border-color: var(--ink-faint);
}

/* The card's trailing call-to-action ("View", "Run", "Open"). ONE recipe, because
   this was previously copy-pasted as inline utilities across eight card
   components and each copy used --ink as a button's text colour.
   The hover foreground is --on-brand, NOT --brand-text: the label sits ON the
   brand fill, and --brand-text is the brand-as-text colour tuned against the
   CANVAS (it resolves to the brand hue in light mode — brand-on-brand, invisible).
   --on-brand is the per-company-computed opaque foreground for brand fills, so
   this stays white-label-correct without hard-coding #fff.
   Applied to a V2Button (variant="secondary"), which still owns the button's
   base shape and states. */
.lg-root .pcard-cta {
  color: var(--ink-soft);
  transition: background-color var(--t-base) ease, border-color var(--t-base) ease,
    color var(--t-base) ease;
}

.lg-root .group:hover .pcard-cta {
  background: var(--brand);
  border-color: transparent;
  color: var(--on-brand);
}

/* Selected-in-pane state (library split panes): ONE recipe for cards and table
   rows — brand tint mixed into the glass fill + brand border, flat. The
   [data-pane-selected] form is the V2Table hook: the primitive has no per-row
   class API, so a hidden marker in a cell opts the row in via :has(). Declared
   after .row-hover/.pcard so the selected tint outlives their hover states. */
.lg-root .pane-selected,
.lg-root .pane-selected:hover,
.lg-root .row-hover[\:has\(\[data-pane-selected\]\)],
.lg-root .row-hover[\:has\(\[data-pane-selected\]\)]:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--glass-fill));
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.lg-root .pane-selected,
.lg-root .pane-selected:hover,
.lg-root .row-hover:has([data-pane-selected]),
.lg-root .row-hover:has([data-pane-selected]):hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--glass-fill));
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.lg-root .press {
  transition: transform var(--t-fast) var(--ease-spring);
}

.lg-root .press:active {
  transform: scale(.97);
}

.lg-root .tap:active {
  transform: scale(.96);
  transition: transform .08s ease;
}

/* Focus ring for chrome-less interactive elements (V2Select `bare` triggers,
   disclosure headers) — the same --focus-ring the .lg-btn/.field families get,
   without their fill/border chrome. */
.lg-root .focus-ring.focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.lg-root .focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Checkbox — the canonical selection control (V2Table's select-row / select-all
   and any other multi-select list). A standard 16px tick box: hairline at rest,
   brand fill + an --on-brand glyph when checked or mixed. State keys off
   aria-checked so the control stays a real checkbox for AT. */
.lg-root .lg-check {
  box-sizing: border-box;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* Tailwind preflight is OFF (tailwind.config.js), so a <button> keeps the UA
     default `padding: 1px 6px`. Against a 16px border-box that leaves a 2px
     content column and shoves the tick 7px right — off-centre and overflowing.
     Zero it here; do not rely on a utility class to do it. */
  padding: 0;
  /* --ink-faint, not --glass-border: an empty box has no fill to give it a
     shape, so a 10%-alpha hairline reads as a smudge rather than a control. */
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  background: var(--glass-fill);
  /* --on-brand (opaque #FFF), NOT --brand-text: the tick sits ON the brand fill.
     --brand-text is the brand-as-TEXT colour for the canvas, and in light mode it
     is a JS-computed value that is self-referential until applyBrandingGlobally
     runs — until then the tick would inherit --ink and vanish into the fill. */
  color: var(--on-brand);
  cursor: pointer;
  transition:
    background-color var(--t-base) ease,
    border-color var(--t-base) ease,
    opacity var(--t-base) ease;
}

.lg-root .lg-check:hover:not(:disabled) {
  border-color: var(--brand);
}

/* Over imagery (file thumbnails), the translucent resting fill leaves the empty
   box unreadable against a busy photo — this variant swaps it for the opaque
   --sticky-fill. Checked state is unchanged (higher specificity below). */
.lg-root .lg-check-solid {
  background: var(--sticky-fill);
}

.lg-root .lg-check.focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lg-root .lg-check:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lg-root .lg-check[aria-checked="true"],
.lg-root .lg-check[aria-checked="mixed"] {
  background: var(--brand);
  border-color: var(--brand);
}

.lg-root .lg-check:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.lg-root .icon-spin:hover {
  animation: lg-spin .9s linear;
}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTON BASELINE — opt-in via the `.lg-btn` class (placed ONLY by V2Button).
   Bare `button` is deliberately NOT styled: the codebase uses <button> for drag
   handles, segmented-control slots (.seg-active), avatar triggers, tree nav
   (.treebtn), chip-toggles (.chip) and inline micro-buttons — a bare selector
   would require annotating every one of those as an opt-out. The additive
   `.lg-btn` class needs no opt-out audit and never touches legacy/icon/link
   buttons. All visual STATE lives here; V2Button only assembles class strings.
   ════════════════════════════════════════════════════════════════════════════ */
.lg-root .lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  outline-offset: 3px;
  /* Unified transition: the bg↔text colour-swap hover (background-color + color +
     border-color all animate so the swap reads as a smooth crossfade, not a snap)
     + press scale, in one declaration. The scale half uses ease-spring (gentle
     overshoot); the colour-swap uses t-base ease. */
  transition:
    background-color var(--t-base) ease,
    background-image var(--t-base) ease,
    color var(--t-base) ease,
    border-color var(--t-base) ease,
    filter var(--t-base) var(--ease),
    opacity var(--t-base) ease,
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) var(--ease);
}

.lg-root .lg-btn.focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lg-root .lg-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lg-root .lg-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
}

.lg-root .lg-btn:disabled,
.lg-root .lg-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Every variant below performs a smooth bg↔text COLOUR-SWAP on hover (the
   transition on `.lg-btn` animates background-color, background-image, color and
   border-color over --t-base). WCAG AA is held in BOTH rest and hover:
   white-on-brand = 9.8:1, white-on-brand-soft = 5.4:1, white-on-(deepened
   danger #b8433f) = 5.4:1, ink-on-glass and danger-on-glass both clear AA. */

/* ── Variant: primary — brand-grad fill, white ink. Hover: flip to the FLAT
     --brand (slight invert/settle of the gradient) + keep white ink, with a
     subtle brightness lift so the swap reads as a deliberate state change. ── */
.lg-root .lg-btn-primary {
  background-image: var(--brand-grad);
  background-color: var(--brand);
  color: var(--on-brand);
}

.lg-root .lg-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-image: none;
  /* drop the gradient → flat brand fill (settles/inverts the sheen) */
  background-color: var(--brand);
  color: var(--on-brand);
  /* 9.8:1 on --brand */
  filter: brightness(1.06);
}

/* ── Adaptive action bar ──────────────────────────────────────────────────────
   A page header's usable width is NOT a function of the viewport: the sidebar
   (lg+, 72–236px) and the copilot rail (xl+, 56–340px) both eat into it, and
   either can be collapsed at any time. A viewport media query is therefore
   blind to the only number that matters — at 1024px the sidebar appears in the
   same breath that `lg:` would reveal button labels, cancelling out the space
   it just gained. Container queries measure the bar itself, which is honest.

   Put `.adaptive-bar` on the header; its action row then degrades in tiers as
   the bar narrows:
     ≥1120px  buttons keep their text labels (.ab-label / .ab-label-group)
     ≥640px   icon-only buttons, every control still reachable in the bar
     <640px   everything collapses into a ⋯ menu (.ab-compact)

   Note `container-type: inline-size` applies inline-axis containment, so the
   bar can no longer be stretched wider by its own contents — which is exactly
   the failure mode being fixed. Descendants that position themselves against
   the viewport (menus, tooltips) must portal out; the v2 popovers already do. */
.lg-root .adaptive-bar {
  container-type: inline-size;
  container-name: adaptivebar;
}

.lg-root .ab-full,
.lg-root .ab-label,
.lg-root .ab-label-group {
  display: none;
}

.lg-root .ab-compact {
  display: flex;
}

@container adaptivebar (min-width: 640px) {
  .lg-root .ab-compact { display: none; }
  .lg-root .ab-full { display: flex; }
}

/* 1120, not ~1000: a fully-labelled editing bar (back + zoom + comments + export
   + preview + publish + share + delete + autosave + save status) measures close
   to 990px on its own, so triggering labels at 1000 would leave the title/folder
   chip zero width and push the row into overflow. The gap between the two tiers
   is the title's breathing room, not slack. */
@container adaptivebar (min-width: 1120px) {
  .lg-root .ab-label { display: inline; }
  .lg-root .ab-label-group { display: flex; }
}

/* ── Variant: secondary — glass-strong + hair at rest (material sets bg/border),
     --ink-soft text. Hover INVERTS: bg → solid --brand, text → #fff, border →
     brand. The glass material's background is overridden by background-color so
     the swap is a clean, fully-opaque colour flip. ── */
.lg-root .lg-btn-secondary {
  color: var(--ink-soft);
}

/* Active / "on" state for a LABELLED toggle (published, shared, comments-open…),
   mirroring .lg-btn-icon[data-active]. Sits above the :hover rule so hover still
   inverts to white-on-brand. Needed once a toggle carries a text label and can no
   longer use the icon variant. */
.lg-root .lg-btn-secondary[data-active="true"] {
  color: var(--brand-text);
}

.lg-root .lg-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--brand);
  background-image: none;
  color: var(--on-brand);
  /* inverts off the soft-ink glass → white on brand, 9.8:1 */
  border-color: var(--brand);
}

/* ── Variant: ghost — glass + hair at rest, --ink-soft text. Hover INVERTS to a
     softer brand-tone fill (--brand-soft) so the lighter ghost reads as a gentler
     swap than secondary, white ink, brand-soft border. ── */
.lg-root .lg-btn-ghost {
  color: var(--ink-soft);
}

.lg-root .lg-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--brand-soft);
  background-image: none;
  color: var(--on-brand);
  /* white on --brand-soft = 5.4:1, AA pass */
  border-color: var(--brand-soft);
}

/* ── Variant: danger — solid --danger fill, white ink at rest. Hover swaps the
     fill to a DEEPENED danger so white text clears AA on hover (plain --danger is
     only 3.8:1; #b8433f is 5.4:1) — the colour shift + slight brightness make the
     swap visible while improving contrast. ── */
.lg-root .lg-btn-danger {
  background-color: var(--danger);
  color: #fff;
}

.lg-root .lg-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--danger) 82%, #000);
  color: #fff;
  /* 5.4:1 on the deepened danger */
  filter: brightness(1.04);
}

/* ── Variant: ghost-danger — transparent + --danger ink at rest. Hover INVERTS:
     bg → deepened danger fill, text → #fff (full bg↔text swap), border → danger. ── */
.lg-root .lg-btn-ghost-danger {
  background-color: transparent;
  color: var(--danger);
  border: 1px solid transparent;
}

.lg-root .lg-btn-ghost-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--danger) 82%, #000);
  color: #fff;
  /* inverts danger-on-transparent → white on deepened danger, 5.4:1 */
  border-color: color-mix(in srgb, var(--danger) 82%, #000);
}

/* ── Variant: icon — square glass-strong + hair at rest, --ink-soft glyph.
     Hover INVERTS: bg → solid --brand, glyph → #fff, border → brand. ── */
.lg-root .lg-btn-icon {
  color: var(--ink-soft);
}

.lg-root .lg-btn-icon:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--brand);
  background-image: none;
  color: var(--on-brand);
  /* white on --brand = 9.8:1 */
  border-color: var(--brand);
}

/* Active / "on" state for an icon toggle (published, shared, comments-open, …).
   The selector sits ABOVE the resting default (.lg-btn-icon → --ink-soft) but
   BELOW the :hover rule, so at rest the glyph is --brand-text (brand in light,
   white in dark) and on hover it still inverts to white-on-brand. One rule that
   reads correctly across theme × hover — drive it with data-active="true"
   (forwarded by V2Button). Never set an inline color for the active state: an
   inline color also overrides :hover, which is what broke light-mode hover. */
.lg-root .lg-btn-icon[data-active="true"] {
  color: var(--brand-text);
}

/* ── Safety-net hover for unmigrated `.press` buttons (bridge until adoption) ──
   Gives non-V2Button CTAs the same smooth bg↔text colour-swap hover as the
   .lg-btn variants — without touching glass-material buttons (which carry their
   own texture/state) or anything already migrated to .lg-btn. Bare `.press`
   buttons don't inherit the .lg-btn transition, so the colour-swap transition is
   declared here on the rest state. Hover lands on a solid --brand fill + white
   text: white-on-brand is 9.8:1, so AA holds no matter what the (unknown) rest
   colours are. Scoped to `.v2-app` so it fires only in the rebuilt UI, and
   excludes the classes that already own a :hover rule above.

   The brand fill can only stay AA-safe if the element's text colour is
   CSS-settable — an inline `style={{ color }}` on the button or its children
   beats this rule and survives onto the brand fill. So anything that paints its
   own foreground (selected segment slots, tiles, chip-internal affordances) is
   opted out rather than half-swapped. `:not(.chip *)` covers the remove/detach ×
   nested inside a chip: a brand disc as tall as the chip itself reads as
   breaking out of the pill, and the chip already owns the hover. */
.lg-root.v2-app .press:not(.lg-btn):not(.nav-item):not(.chip):not(.chip *):not(.seg-active):not(.tile):not(.treebtn):not(.glass):not(.glass-strong) {
  transition:
    background-color var(--t-base) ease,
    background-image var(--t-base) ease,
    color var(--t-base) ease,
    border-color var(--t-base) ease,
    filter var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease-spring);
}

.lg-root.v2-app .press:not(.lg-btn):not(.nav-item):not(.chip):not(.chip *):not(.seg-active):not(.tile):not(.treebtn):not(.glass):not(.glass-strong):hover {
  background-color: var(--brand);
  background-image: none;
  color: var(--on-brand);
  /* 9.8:1 on --brand — AA-safe regardless of rest colour */
  border-color: var(--brand);
}

/* Entrance — content & lists */
.lg-root .fade-up {
  animation: lg-fadeUp var(--t-move) var(--ease) both;
}

.lg-root .fade-in {
  animation: lg-fadeIn var(--t-move) var(--ease) both;
}

.lg-root .pop-in {
  animation: lg-popIn var(--t-move) var(--ease-spring) both;
}

/* popovers, badges */
.lg-root .scale-in {
  animation: lg-scaleIn var(--t-move) var(--ease-spring) both;
}

/* modals */
.lg-root .slide-in-right {
  animation: lg-slideInRight var(--t-panel) var(--ease) both;
}

/* right drawers */
.lg-root .slide-in-left {
  animation: lg-slideInLeft var(--t-panel) var(--ease) both;
}

/* left drawers (mobile nav) */
.lg-root .scrim-in {
  animation: lg-fadeIn var(--t-base) var(--ease) both;
}

/* Stagger children: add .stagger to a parent; children enter in sequence */
.lg-root .stagger>* {
  animation: lg-fadeUp var(--t-move) var(--ease) both;
}

.lg-root .stagger>*:nth-child(1) {
  animation-delay: .02s
}

.lg-root .stagger>*:nth-child(2) {
  animation-delay: .06s
}

.lg-root .stagger>*:nth-child(3) {
  animation-delay: .10s
}

.lg-root .stagger>*:nth-child(4) {
  animation-delay: .14s
}

.lg-root .stagger>*:nth-child(5) {
  animation-delay: .18s
}

.lg-root .stagger>*:nth-child(6) {
  animation-delay: .22s
}

.lg-root .stagger>*:nth-child(7) {
  animation-delay: .26s
}

.lg-root .stagger>*:nth-child(8) {
  animation-delay: .30s
}

/* Ambient — use sparingly */
.lg-root .pulse-dot {
  box-shadow: 0 0 0 0 var(--ok-pulse);
  animation: lg-pulse 2.4s infinite;
}

.lg-root .float {
  animation: lg-float 6s var(--ease) infinite;
}

/* gentle AI-orb drift */
.lg-root .shimmer {
  background: linear-gradient(100deg, var(--glass-hair) 30%, var(--glass-fill-strong) 50%, var(--glass-hair) 70%);
  background-size: 200% 100%;
  animation: lg-shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}

/* skeleton loading */

@keyframes lg-fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes lg-fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes lg-popIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes lg-scaleIn {
  from {
    opacity: 0;
    transform: scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes lg-slideInRight {
  from {
    transform: translateX(16px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes lg-slideInLeft {
  from {
    transform: translateX(-16px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes lg-spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes lg-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--ok-pulse)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0)
  }
}

@keyframes lg-float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-5px)
  }
}

@keyframes lg-shimmer {
  from {
    background-position: 200% 0
  }

  to {
    background-position: -200% 0
  }
}

/* Attention flash — a momentary brand-tint pulse used to draw the eye to a
   comment that was jumped-to from elsewhere (Conversations focus / anchor
   deep-link). Transient + tokenised, never a resting shadow. Applied
   imperatively (el.classList.add('lg-flash')) then removed after ~1.3s. */
.lg-root .lg-flash {
  border-radius: var(--r-md);
  animation: lg-flash 1.3s var(--ease);
}

@keyframes lg-flash {
  0% {
    background: color-mix(in srgb, var(--brand) 30%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent);
  }

  100% {
    background: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}

/* Accessibility — honour the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {

  .lg-root *,
  .lg-root *::before,
  .lg-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Subtle scrollbar (scoped) ── */
.lg-root ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.lg-root ::-webkit-scrollbar-thumb {
  background: rgba(120, 125, 150, 0.3);
  border-radius: 8px;
}

.lg-root ::-webkit-scrollbar-track {
  background: transparent;
}/**
 * V2MeetingScheduler — liquid-glass chrome for public + in-app booking.
 * Scoped under `.v2-meeting-scheduler` (public shell + builder preview).
 */

.v2-meeting-scheduler.glass {
    box-shadow: var(--shadow);
}

.v2-meeting-scheduler__panel {
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
}

.v2-meeting-scheduler__timezone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--field-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
}

.v2-meeting-scheduler__slot {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--glass-border));
    background: var(--glass-fill);
}

.v2-meeting-scheduler__slot.is-selected {
    background: var(--brand);
    border-color: transparent;
    color: #fff;
}

.v2-meeting-scheduler__day.is-available:not(.is-selected) {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.v2-meeting-scheduler__day.is-selected {
    color: #fff !important;
}

.v2-meeting-scheduler__day.is-selected {
    background: var(--brand);
}

.v2-meeting-scheduler__nav-btn {
    border: 1px solid var(--glass-border);
    color: var(--brand);
    background: var(--glass-fill);
}

.v2-meeting-scheduler__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* ════════════════════════════════════════════════════════════════════════════
   V2PhoneField — glass theming for the shared editor's phone field.

   V2BlueprintFieldEditor renders react-international-phone's <PhoneInput> for the
   `phone` case. That library is driven ENTIRELY by its own CSS custom properties
   (`--react-international-phone-*`). Its country dropdown is an ABSOLUTELY-positioned
   child of the country selector (it does NOT portal to <body>), so it renders
   inside `.lg-root` and inherits the remapped vars set on the input-container.
   Rather than fight dozens of rules with inline styles, we remap the library's
   custom properties to the Liquid-Glass tokens. Because this is imported by the
   SHARED editor, every surface that fills a phone field (begin-task, the component
   view page, the standalone-create modal, the task modal) gets the identical glass
   treatment, dark mode included (the tokens already flip under .lg-root[data-theme]).

   Scoped under `.lg-root` so the legacy dashboard's own phone inputs are untouched.
   ════════════════════════════════════════════════════════════════════════════ */

.lg-root .v2-phone-field .react-international-phone-input-container {
    --react-international-phone-background-color: transparent;
    --react-international-phone-border-color: var(--glass-border);
    --react-international-phone-border-radius: var(--r-md);
    --react-international-phone-text-color: var(--ink);
    --react-international-phone-font-size: 13.5px;
    --react-international-phone-height: auto;
    --react-international-phone-country-selector-background-color: transparent;
    --react-international-phone-country-selector-background-color-hover: var(--glass-fill-strong);
    --react-international-phone-country-selector-border-color: var(--glass-hair);
    --react-international-phone-country-selector-arrow-color: var(--ink-soft);
    --react-international-phone-disabled-background-color: transparent;
    --react-international-phone-disabled-text-color: var(--ink-faint);
    --react-international-phone-dial-code-preview-background-color: transparent;
    --react-international-phone-dial-code-preview-border-color: var(--glass-hair);
    --react-international-phone-dial-code-preview-text-color: var(--ink-soft);
    --react-international-phone-dropdown-item-background-color: var(--popover-fill);
    --react-international-phone-dropdown-item-text-color: var(--ink);
    --react-international-phone-dropdown-item-dial-code-color: var(--ink-soft);
    --react-international-phone-selected-dropdown-item-background-color: var(--brand-tint);
    --react-international-phone-selected-dropdown-item-text-color: var(--brand-text);
    --react-international-phone-selected-dropdown-item-dial-code-color: var(--brand-text);
    --react-international-phone-dropdown-shadow: var(--shadow-pop);
}

/* The input-container is the flex row that holds the country-selector button +
   the phone <input>. It must STRETCH its children so the country button is the
   same height as the input (otherwise the flag sits short / un-centred). It must
   also NOT clip — the country dropdown is an absolutely-positioned child and any
   overflow:hidden here would cut it off. */
.lg-root .v2-phone-field .react-international-phone-input-container {
    align-items: stretch;
    overflow: visible;
}

/* The phone number <input> + the country-selector button sit flush inside the
   parent `.field` wrapper (which owns the border + focus ring). Make both
   transparent so the single glass surface reads as one control. */
.lg-root .v2-phone-field .react-international-phone-input,
.lg-root .v2-phone-field .react-international-phone-country-selector-button {
    background: transparent;
    border: none;
    color: var(--ink);
    height: auto;
}

/* Center the flag vertically: stretch the button to the container height and
   center its content along both axes. */
.lg-root .v2-phone-field .react-international-phone-country-selector,
.lg-root .v2-phone-field .react-international-phone-country-selector-button {
    display: flex;
    align-items: center;
    align-self: stretch;
}

.lg-root .v2-phone-field .react-international-phone-country-selector-button {
    border-right: 1px solid var(--glass-hair);
    border-radius: 0;
    justify-content: center;
    padding: 0 10px;
}

.lg-root .v2-phone-field .react-international-phone-country-selector-button__button-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.lg-root .v2-phone-field .react-international-phone-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: 13.5px;
}

.lg-root .v2-phone-field .react-international-phone-input::placeholder {
    color: var(--ink-faint);
}

/* Country dropdown surface. react-international-phone renders it as an
   ABSOLUTELY-positioned child of `.react-international-phone-country-selector`
   (which is `position: relative`) — NOT a body portal — so it must escape any
   clipping ancestor and stack above page chrome. We give it a high z-index and
   a fixed sensible width; being position:absolute it overlays WITHOUT resizing
   the field when open. Rendered inside `.lg-root`, so it inherits the tokens. */
.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown {
    position: absolute;
    z-index: calc(1250 + 2);
    z-index: calc(var(--z-popover, 1250) + 2);
    width: 280px;
    max-height: 220px;
    margin-top: 4px;
    padding: 4px;
    background: var(--popover-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
}

.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item {
    border-radius: var(--r-sm);
    padding: 7px 8px;
}

.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item:hover {
    background: var(--glass-fill-strong);
}

.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item--selected,
.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item--focused {
    background: var(--brand-tint);
    color: var(--brand-text);
}

.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item-country-name,
.lg-root .v2-phone-field .react-international-phone-country-selector-dropdown__list-item-dial-code {
    color: var(--ink);
}

/* Public scrollport + glass panels used to clip the non-portaled dropdown.
   Lift the open field above siblings so the list paints over following inputs.
   Later landing-page blocks (legal copy, footers) sit after the form in DOM
   order and would otherwise paint on top of the list — elevate the whole block
   wrapper while the country picker is open (aria-expanded on the selector btn). */
.v2-public-shell .v2-phone-field[focus-within],
.v2-public-shell .fade-up[focus-within],
.v2-public-shell section[focus-within] {
    position: relative;
    z-index: calc(1250 + 1);
    z-index: calc(var(--z-popover, 1250) + 1);
}
.v2-public-shell .v2-phone-field[focus-within],
.v2-public-shell .fade-up[focus-within],
.v2-public-shell section[focus-within] {
    position: relative;
    z-index: calc(1250 + 1);
    z-index: calc(var(--z-popover, 1250) + 1);
}
.v2-public-shell .v2-phone-field:focus-within,
.v2-public-shell .fade-up:focus-within,
.v2-public-shell section:focus-within {
    position: relative;
    z-index: calc(1250 + 1);
    z-index: calc(var(--z-popover, 1250) + 1);
}
/* Landing form consent copy — builder editor + public renderer */

.v2-landing-form-rich-text {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    background: var(--glass-fill-strong);
}

.v2-landing-form-rich-text__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--glass-hair);
    background: var(--glass-fill);
}

.v2-landing-form-rich-text__btn {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    height: 28px;
    min-width: 28px;
    padding: 0 8px;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}

.v2-landing-form-rich-text__btn:hover {
    background: var(--glass-fill-strong);
    color: var(--ink);
}

.v2-landing-form-rich-text__btn.is-active {
    background: var(--brand-tint);
    color: var(--brand-text);
}

.v2-landing-form-rich-text__link-popover {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.v2-landing-form-rich-text__body .ProseMirror {
    min-height: 88px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
    outline: none;
}

.v2-landing-form-rich-text__body .ProseMirror p {
    margin: 0 0 0.65em;
}

.v2-landing-form-rich-text__body .ProseMirror p:last-child {
    margin-bottom: 0;
}

.v2-landing-form-rich-text__body .ProseMirror a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v2-landing-form-rich-text__body .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
    color: var(--ink-faint);
}

/* Public page — consent / below-button copy */
.v2-landing-form-copy {
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--ink-faint);
    word-break: break-word;
}

.v2-landing-form-copy p {
    margin: 0 0 0.75em;
}

.v2-landing-form-copy p:last-child {
    margin-bottom: 0;
}

.v2-landing-form-copy a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.v2-landing-form-copy a:hover {
    color: var(--brand);
    color: var(--brand-text, var(--brand));
}

.v2-landing-form-copy.text-center {
    text-align: center;
}
/* Landing page Header block — centered logo above hero content. */
.v2-landing-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: max(16px, min(3vw, 28px)) 0 max(8px, min(2vw, 16px));
}

.v2-landing-header__img {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}

.v2-landing-header__name {
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* Columns block — proportional widths from `--landing-col-template` (e.g. 35fr 65fr). */
.v2-landing-columns-editor {
    grid-template-columns: var(--landing-col-template);
}

@media (min-width: 640px) {
    .v2-landing-columns {
        grid-template-columns: var(--landing-col-template);
    }
}
/* Landing page Text block — builder editor + public copy */

.v2-landing-rich-text-editor .shell {
    min-height: auto;
}

.v2-landing-rich-text-editor.is-compact .ProseMirror {
    min-height: 100px;
}

.v2-landing-rich-text-copy {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    word-break: break-word;
}

.v2-landing-rich-text-copy h1 {
    margin: 0 0 0.5em;
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.v2-landing-rich-text-copy h2 {
    margin: 0 0 0.5em;
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
}

.v2-landing-rich-text-copy ul,
.v2-landing-rich-text-copy ol {
    margin: 0 0 0.75em;
    padding-left: 1.35em;
}

.v2-landing-rich-text-copy blockquote {
    margin: 0 0 0.75em;
    padding-left: 0.85em;
    border-left: 3px solid var(--glass-border);
    color: var(--ink-faint);
}

.v2-landing-rich-text-copy img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

.v2-landing-rich-text-copy.text-center {
    text-align: center;
}

.v2-landing-rich-text-copy.text-right {
    text-align: right;
}

.v2-landing-hero-headline {
    font-size: max(1.75rem, min(4vw, 2.125rem));
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.v2-landing-hero-headline h1,
.v2-landing-hero-headline h2,
.v2-landing-hero-headline h3,
.v2-landing-hero-headline p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.v2-landing-hero-subheadline {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.v2-landing-form-title {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ink);
}

.v2-landing-form-title p,
.v2-landing-form-title h1,
.v2-landing-form-title h2,
.v2-landing-form-title h3 {
    margin: 0;
    font: inherit;
    color: inherit;
}

.v2-landing-legal-copy {
    color: var(--ink-faint);
}

.v2-landing-button-label {
    display: inline;
    font: inherit;
    color: inherit;
}

.v2-landing-button-label p {
    margin: 0;
    display: inline;
}
.landing-stream-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #0a0a0c;
    aspect-ratio: 16 / 9;
    user-select: none;
    -webkit-user-select: none;
}

.landing-stream-video--fullscreen {
    border-radius: 0;
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

.landing-stream-video__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.landing-stream-video__iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.landing-stream-video__poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.landing-stream-video__play-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    background: rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s ease;
}

.landing-stream-video__play-btn {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.landing-stream-video__play-btn:hover {
    transform: scale(1.05);
}

.landing-stream-video__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.landing-stream-video:hover .landing-stream-video__controls,
.landing-stream-video[focus-within] .landing-stream-video__controls,
.landing-stream-video--controls-visible .landing-stream-video__controls {
    opacity: 1;
}

.landing-stream-video:hover .landing-stream-video__controls,
.landing-stream-video:focus-within .landing-stream-video__controls,
.landing-stream-video--controls-visible .landing-stream-video__controls {
    opacity: 1;
}

.landing-stream-video__controls-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.landing-stream-video__controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.landing-stream-video__icon-btn {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    color: #fff;
    flex-shrink: 0;
}

.landing-stream-video__icon-btn--lg {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.landing-stream-video__icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.landing-stream-video__volume {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.landing-stream-video__volume input[type='range'] {
    width: 72px;
    accent-color: var(--brand);
    cursor: pointer;
}

.landing-stream-video__quality select {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.landing-stream-video__sound-hint {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.landing-stream-video__sound-hint:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

.landing-stream-video__time {
    font-size: 11px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.85);
}
/*
 * V2PublicStepPage.css — scoped layout + embed CSS for the v2 public form.
 *
 * Tokens only; no hardcoded colours. Everything is scoped under
 * `.v2-public-shell` (the self-rooted `.lg-root v2-app` wrapper the public page
 * mounts because it renders OUTSIDE the app shell). The `.is-embed` modifier
 * strips the page frame so a host can iframe `/pub/<token>?embed=1` and let the
 * frame auto-size to the content height.
 */

.v2-public-shell {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;
}

.v2-public-scroll {
    position: relative;
    z-index: 0;
    z-index: var(--z-base, 0);
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow-y: auto;
    padding: max(16px, min(4vw, 48px)) max(16px, min(4vw, 40px));
}

/* Centered max-width container. */
.v2-public-grid {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form-only — keep the card comfortably narrow & centered. */
.v2-public-grid.is-form-only {
    max-width: 640px;
}

/* Guidance-only — prose (and embedded video) reads best under ~760px. */
.v2-public-grid.is-guidance-only {
    max-width: 760px;
}

/* Landing page — max-width comes from inline style (page width setting). */
.v2-public-grid.is-landing-page {
    max-width: none;
}

/* Full-width company logo header (legacy auto-bar — prefer Header block). */
.v2-public-logo-bar {
    position: relative;
    z-index: calc(0 + 1);
    z-index: calc(var(--z-base, 0) + 1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: max(18px, min(3.5vw, 32px)) max(20px, min(4vw, 40px));
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.v2-public-logo-bar__img {
    display: block;
    max-height: 56px;
    max-width: min(360px, 88vw);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── Split-stage card ─────────────────────────────────────────────────────── */
/* Keep the guidance prose/video in view while a long form scrolls beside it
   (the card splits at Tailwind's lg breakpoint). */
@media (min-width: 1024px) {
    .v2-public-stage-body {
        position: sticky;
        top: 16px;
    }
}

/* ── Guidance prose (the dangerouslySetInnerHTML output) ──────────────────── */
.v2-public-prose {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.7;
    word-break: break-word;
}
.v2-public-prose h1,
.v2-public-prose h2,
.v2-public-prose h3,
.v2-public-prose h4 {
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 1.1em 0 0.5em;
    line-height: 1.3;
}
.v2-public-prose h1 { font-size: 18px; }
.v2-public-prose h2 { font-size: 16px; }
.v2-public-prose h3 { font-size: 14.5px; }
.v2-public-prose p { margin: 0 0 0.85em; }
.v2-public-prose ul,
.v2-public-prose ol { margin: 0 0 0.85em; padding-left: 1.25em; }
.v2-public-prose li { margin: 0.2em 0; }
.v2-public-prose a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.v2-public-prose a:hover { color: var(--brand); color: var(--brand-text, var(--brand)); }
.v2-public-prose img { max-width: 100%; height: auto; border-radius: 12px; border-radius: var(--r-md, 12px); }

/* Embedded media — guidance HTML carries YouTube iframes / <video> with fixed
   pixel attributes (e.g. 560×315); make them fill the column responsively. */
.v2-public-prose iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    border-radius: var(--r-md, 12px);
    margin: 0 0 0.85em;
    background: var(--glass-fill-strong);
}
.v2-public-prose video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border-radius: var(--r-md, 12px);
    margin: 0 0 0.85em;
    background: var(--glass-fill-strong);
}
.v2-public-prose figure {
    margin: 0 0 0.85em;
}
.v2-public-prose figure > iframe,
.v2-public-prose figure > video,
.v2-public-prose figure > img {
    margin-bottom: 0;
}
.v2-public-prose strong, .v2-public-prose b { color: var(--ink); font-weight: 650; }
.v2-public-prose blockquote {
    margin: 0 0 0.85em;
    padding-left: 0.9em;
    border-left: 2px solid var(--glass-hair);
    color: var(--ink-faint);
}
.v2-public-prose :first-child { margin-top: 0; }
.v2-public-prose :last-child { margin-bottom: 0; }

/* ── Embed mode ───────────────────────────────────────────────────────────── */
/* Strip the outer chrome so the host iframe can auto-size to content. */
.v2-public-shell.is-embed {
    min-height: 0;
    background: transparent;
}
.v2-public-shell.is-embed .canvas-bg {
    display: none;
}
.v2-public-shell.is-embed .v2-public-scroll {
    min-height: 0;
    overflow-y: visible;
    padding: max(8px, min(2.5vw, 20px));
}
.v2-public-shell.is-embed .v2-public-grid {
    max-width: none;
}