@lumiastream/ui 0.8.4 → 0.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ChatMessageItem.js +1 -1
- package/dist/ChatboxPanel.js +1 -1
- package/dist/EventList.d.ts +1 -4
- package/dist/EventList.js +35 -84
- package/dist/EventListItem.d.ts +1 -2
- package/dist/EventListItem.js +1 -10
- package/dist/GoalsList.js +1 -1
- package/dist/LSButton.js +1 -1
- package/dist/LSCheckbox.js +1 -1
- package/dist/LSColorPicker.js +1 -1
- package/dist/LSDatePicker.js +1 -1
- package/dist/LSFontPicker.js +1 -1
- package/dist/LSInput.js +1 -1
- package/dist/LSMultiSelect.js +1 -1
- package/dist/LSRadio.js +1 -1
- package/dist/LSSelect.js +1 -1
- package/dist/LSSliderInput.js +1 -1
- package/dist/LSSwitch.js +1 -1
- package/dist/LSTextField.js +1 -1
- package/dist/LSVariableInputField.js +4 -15
- package/dist/ModActivityLog.js +1 -1
- package/dist/ModQueueItem.js +1 -1
- package/dist/ModQueueList.js +1 -1
- package/dist/ModalChrome.js +1 -1
- package/dist/PlatformIcon.js +1 -1
- package/dist/ShortcutDockGrid.js +1 -1
- package/dist/SongRequestList.js +1 -1
- package/dist/StreamStatusPanel.d.ts +1 -4
- package/dist/StreamStatusPanel.js +28 -41
- package/dist/ViewersList.js +1 -1
- package/dist/WidgetChrome.js +1 -1
- package/dist/components.js +81 -154
- package/dist/index.d.ts +1 -1
- package/dist/index.js +222 -201
- package/dist/se-import.js +127 -200
- package/dist/utils/chatMedia.js +4 -0
- package/dist/utils.d.ts +10 -1
- package/dist/utils.js +94 -0
- package/package.json +3 -4
package/dist/SongRequestList.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/lumia-ui.css
|
|
24
|
-
styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n font: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n}\n.ls-color-picker__preview {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.45;\n background-color: var(--separator, #0a0821);\n cursor: not-allowed;\n}\n.mui-ls-button {\n border-radius: var(--radius, 1rem);\n padding: 0.375rem 1.5rem;\n text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n background: var(--primary, #ff4076);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n color: var(--primary, #ff4076);\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n border-color: var(--primary, #ff4076);\n background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n border-color: var(--secondary, #535395);\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n color: var(--error, #fd5454);\n border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n border-color: var(--error, #fd5454);\n background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n background-color: var(--neutralDark4, var(--cardborder, #393853));\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n border-color: var(--neutralLight3, var(--grey, #9392a1));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n max-height: 24px;\n max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n cursor: pointer;\n opacity: 0.9;\n filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n display: flex;\n min-height: calc(var(--ls-control-height) - 2px);\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n min-width: 0;\n}\n.MuiSvgIcon-root svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n fill: currentcolor;\n stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n display: block;\n flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n color: var(--neutralLight3, var(--grey, #9392a1));\n opacity: 0.55;\n font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n color: var(--neutralLight1, var(--white, #fff));\n opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n border-radius: var(--radius, 1rem) !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n padding: 0.25rem 0 !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n position: sticky;\n top: 0;\n z-index: 1;\n min-height: 32px;\n padding: 0.45rem 1rem 0.25rem !important;\n background: var(--neutralDark1, var(--background, #18162f)) !important;\n color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n font-size: 0.75rem !important;\n font-weight: 700 !important;\n letter-spacing: 0 !important;\n line-height: 1.2 !important;\n text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n display: flex !important;\n min-height: 44px !important;\n align-items: center !important;\n padding: 0.625rem 1rem !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n font-size: 1rem !important;\n line-height: 1.35 !important;\n cursor: pointer !important;\n transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border-radius: var(--radius, 1rem);\n object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n min-width: 0;\n}\n.ls-variable-option__label {\n color: var(--neutralLight1, var(--white, #fff));\n font-weight: 500;\n line-height: 1.25;\n}\n.ls-variable-option__helper {\n margin-top: 0.125rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.875rem;\n line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n max-height: none !important;\n}\n.ls-color-picker__gradient {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n min-width: 24px;\n margin-left: 0.35rem;\n border-radius: var(--radius, 1rem);\n background: var(--primary, #ff4076) !important;\n color: var(--alwayswhite, var(--white, #fff)) !important;\n font-weight: 800;\n line-height: 1;\n letter-spacing: 0;\n cursor: pointer;\n user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n color: currentcolor !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n position: relative;\n min-width: 0;\n width: 100%;\n min-height: var(--ls-control-height);\n margin: 0;\n border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0 0.875rem 0.5rem 0.875rem;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n display: block;\n width: auto;\n max-width: calc(100% - 1rem);\n margin: 0;\n padding: 0 0.25rem;\n color: var(--neutralLight1, var(--white, #fff));\n font-size: 0.875rem;\n line-height: 1.1;\n white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n display: flex;\n min-width: 0;\n min-height: calc(var(--ls-control-height) - 14px);\n align-items: center;\n gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n display: block;\n margin-top: 0.25rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.75rem;\n line-height: 1.25;\n}\n.ls-multi-select-value {\n display: flex;\n width: 100%;\n min-width: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n white-space: nowrap;\n}\n.ls-multi-select-value__label {\n min-width: 0;\n flex: 1 1 0%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-multi-select-value__count {\n flex-shrink: 0;\n white-space: nowrap;\n}\n.ls-color-picker__preview {\n position: relative;\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n border-radius: var(--radius, 1rem);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n color: transparent;\n line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n box-shadow:\n 0 0 0 2px var(--primary, #ff4076),\n 0 0 0 4px var(--neutralDark1, #1b1a28),\n 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n stroke: #fff !important;\n}\n.ls-variable-picker {\n --variable-custom-color: var(--customVariables, #69ffd2);\n --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n display: flex;\n width: 92vw;\n max-width: 1100px;\n min-height: 50vh;\n max-height: 55vh;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\n}\n.ls-variable-picker__field {\n margin: 0 0 0.75rem;\n border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n padding-inline: 0.375rem;\n color: var(--primary, #ff4076);\n font-size: 0.75rem;\n font-weight: 700;\n}\n.ls-variable-picker__intro {\n margin-bottom: 1rem;\n color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n display: grid;\n grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n gap: 2rem;\n}\n.ls-variable-picker__header {\n margin-bottom: 0.25rem;\n padding-inline: 0.25rem;\n padding-right: 1.7rem;\n color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n height: 100%;\n overflow: auto;\n padding-right: 1rem;\n}\n.ls-variable-picker__row {\n cursor: pointer;\n align-items: start;\n border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n border-radius: var(--radius, 1rem);\n padding: 0;\n background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n color: var(--neutralLight2, #cac9d5);\n transition:\n background-color 140ms ease,\n border-color 140ms ease,\n color 140ms ease,\n transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n border-color: var(--primary, #ff4076);\n background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n transform: rotate(-90deg);\n transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n opacity: 0.8;\n}\n.ls-variable-picker__description {\n max-width: 600px;\n overflow-wrap: break-word;\n line-height: 1.25;\n word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n display: block;\n cursor: default;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n color: var(--neutralLight2, #cac9d5);\n overflow-wrap: break-word;\n line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n opacity: 1;\n}\n.ls-variable-picker__value {\n min-width: 0;\n}\n.ls-variable-picker__value-input {\n width: 100%;\n min-width: 0;\n cursor: text;\n overflow: hidden;\n border: 0;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n caret-color: transparent;\n font: inherit;\n font-size: 1rem;\n line-height: 1.25;\n outline: 0;\n padding: 0;\n text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n display: flex;\n min-width: 0;\n align-items: center;\n}\n.ls-variable-token--suggested {\n color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n position: absolute;\n margin: 0;\n border: 0;\n box-sizing: border-box;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n color: inherit;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n z-index: 0;\n}\n.ls-variable-highlight__token {\n border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n color: var(--customVariables, #69ffd2);\n background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n color: var(--suggestedVariables, #ffb469);\n background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n position: fixed;\n z-index: 2000;\n transform: translate(-50%, -100%);\n margin-top: -8px;\n max-width: 320px;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--neutralDark1, #171628);\n border: 1px solid var(--neutralDark4, #393853);\n color: var(--neutralLight2, #cac9d5);\n font-size: 0.75rem;\n line-height: 1.3;\n pointer-events: none;\n box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n min-width: 0;\n word-break: break-all;\n}\n.ls-variable-token__badge {\n display: inline-flex;\n margin-left: 0.5rem;\n flex-shrink: 0;\n align-items: center;\n border: 1px solid currentcolor;\n border-radius: var(--radius, 1rem);\n padding-inline: 0.25rem;\n padding-block: 0;\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n}\n.ls-chat-message {\n position: relative;\n font-size: 0.95em;\n line-height: 1.4;\n color: var(--white, var(--neutralLight1, #fff));\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ls-chat-message img {\n display: inline-block;\n}\n.ls-chat-message__reply {\n display: block;\n margin-bottom: 0.15em;\n font-size: 0.82em;\n color: var(--white2, var(--neutralLight3, #9392a1));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n vertical-align: middle;\n}\n.ls-chat-message__avatar {\n width: 1.3em;\n height: 1.3em;\n border-radius: 9999px;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle;\n}\n.ls-chat-message__time {\n margin-right: 0.35em;\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__badges {\n vertical-align: middle;\n}\n.ls-chat-message__badges img {\n height: 1.05em;\n vertical-align: middle;\n margin-right: 0.25em;\n}\n.ls-chat-message__username {\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-chat-message__text {\n vertical-align: middle;\n}\n.ls-chat-message__text img {\n vertical-align: middle;\n}\n.ls-chat-message__actions {\n position: absolute;\n top: 0;\n right: 0;\n}\n.ls-chat-message__modbar {\n display: flex;\n overflow: hidden;\n border-radius: 0.75rem;\n background-color: var(--separator, #0a0821);\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n display: flex;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 1em;\n border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n border-left: 4px solid var(--primary, #ff4076);\n border-radius: 1em;\n background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n color: var(--white, var(--neutralLight1, #fff));\n padding: 1em;\n line-height: 1.35;\n}\n.ls-eventlist-item__main {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n min-width: 0;\n}\n.ls-eventlist-item__identity {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n border-radius: 1em;\n background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.ls-eventlist-item__username {\n min-width: 0;\n font-weight: 700;\n font-size: 0.875em;\n word-break: break-all;\n}\n.ls-eventlist-item__body {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__message {\n min-width: 0;\n word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n min-width: 0;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-eventlist-item__time {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.875em;\n white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n align-self: center;\n gap: 0.5em;\n flex-shrink: 0;\n}\n.ls-eventlist-item__amount-badge {\n flex-shrink: 0;\n padding: 0.1em 0.5em;\n border-radius: 0.4em;\n border: 1px solid var(--primary, #ff4076);\n background-color: color-mix(in srgb, var(--primary, #ff4076) 18%, transparent);\n color: var(--primary, #ff4076);\n font-size: 0.75em;\n font-weight: 600;\n white-space: nowrap;\n}\n.ls-modqueue-item {\n display: flex;\n align-items: stretch;\n gap: 0.5rem;\n border-radius: 1rem;\n background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n display: flex;\n height: 4rem;\n width: 4rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n color: var(--primary, #ff4076);\n font-size: 1.75rem;\n line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n display: flex;\n max-height: 100%;\n max-width: 100%;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.ls-modqueue-item__body {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n justify-content: flex-start;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n font-weight: 700;\n color: var(--white, var(--neutralLight1, #fff));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 12rem;\n}\n.ls-modqueue-item__command {\n display: inline-flex;\n align-items: center;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n padding: 0.05rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n font-size: 0.875rem;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-modqueue-item__actions {\n display: flex;\n flex-shrink: 0;\n align-items: flex-start;\n gap: 0.5rem;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n padding: 0;\n border-radius: 0.5rem;\n transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n background-color: transparent;\n opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n}\n.ls-modlog {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n display: flex;\n justify-content: flex-end;\n}\n.ls-modlog__clear {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n border: 0;\n border-radius: 0.75rem;\n background: transparent;\n padding: 0.25rem 0.625rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n color: var(--white, #fff);\n}\n.ls-modlog__empty {\n display: flex;\n height: 100%;\n flex: 1;\n align-items: center;\n justify-content: center;\n border-radius: 1rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.375rem;\n overflow: auto;\n}\n.ls-modlog__row {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n padding: 0.5rem 0.625rem;\n font-size: 0.8125rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-modlog__avatar {\n height: 1.25rem;\n width: 1.25rem;\n border-radius: 9999px;\n}\n.ls-modlog__title {\n display: inline-flex;\n align-items: center;\n border-radius: 0.375rem;\n padding: 0.05rem 0.4rem;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--ls-modlog-accent, var(--primary, #ff4076));\n background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n margin-left: auto;\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.6875rem;\n font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n word-break: break-word;\n overflow-wrap: anywhere;\n line-height: 1.35;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n flex: 1;\n}\n.ls-songreq__empty {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.75rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n height: 3.5rem;\n width: 3.5rem;\n flex-shrink: 0;\n border-radius: 0.75rem;\n object-fit: cover;\n}\n.ls-songreq__nowbody {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.1rem;\n}\n.ls-songreq__title {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__artist {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n overflow: hidden;\n font-size: 0.6875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n margin-top: 0.375rem;\n height: 0.375rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n height: 100%;\n border-radius: 9999px;\n background-color: var(--success, #1db954);\n transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-songreq__btn {\n display: inline-flex;\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.625rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background: transparent;\n font-size: 0.875rem;\n line-height: 1;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-songreq__queue {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n}\n.ls-songreq__queuehead {\n margin-bottom: 0.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n overflow: auto;\n}\n.ls-songreq__queueempty {\n padding: 0.5rem 0.25rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.75rem;\n padding: 0.375rem 0.5rem;\n transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n border-radius: 0.5rem;\n object-fit: cover;\n}\n.ls-songreq__itembody {\n min-width: 0;\n flex: 1;\n}\n.ls-songreq__itemtitle {\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n flex-shrink: 0;\n cursor: pointer;\n border: 0;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n color: var(--error, #fd5454);\n}\n.ls-modqueue {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-modqueue__search-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.5rem;\n border: 1px solid currentcolor;\n background: transparent;\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n}\n.ls-modqueue__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-modqueue__readonly {\n font-size: 0.625rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n flex-shrink: 0;\n}\n.ls-chatbox {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.ls-chatbox__list {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow-y: auto;\n padding: 0.75rem;\n}\n.ls-chatbox__jump {\n position: absolute;\n bottom: 0.75rem;\n right: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n border-radius: 9999px;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n padding: 0.5rem 0.75rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n backdrop-filter: blur(4px);\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n margin-left: 0.25rem;\n border-radius: 9999px;\n background-color: var(--primary, #ff4076);\n padding: 0.125rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 600;\n color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n flex: 1 1 auto;\n min-width: 100px;\n width: auto;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n flex: 0 0 auto;\n width: 9rem;\n min-width: 0;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n flex: 0 0 auto;\n width: 7.5rem;\n min-width: 0;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n height: 55px;\n flex-shrink: 0;\n}\n.ls-panel {\n --ls-panel-padding: 0.75rem;\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: var(--ls-panel-bg, #1b1834);\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n position: fixed;\n inset: 0;\n z-index: 20;\n}\n.ls-panel__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n min-width: 0;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-panel__title--label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-panel__close {\n display: flex;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.5rem;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-panel__body {\n min-height: 0;\n flex: 1;\n overflow: auto;\n padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n flex-shrink: 0;\n padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n}\n.ls-modal--absolute {\n position: absolute;\n}\n.ls-modal__backdrop {\n position: absolute;\n inset: 0;\n background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n position: relative;\n width: 100%;\n max-width: var(--ls-modal-max-width, min(560px, 92vw));\n max-height: 85vh;\n}\n.ls-modal__card--fit {\n width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog {\n margin-top: 0.5rem;\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog__card {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n border-radius: 1rem;\n outline: none;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n padding: 1rem;\n}\n.ls-dialog__card--full {\n border-radius: 0;\n}\n.ls-dialog__top {\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n}\n.ls-dialog__top--full {\n margin-top: 2rem;\n}\n.ls-dialog__top-side {\n flex: 1;\n}\n.ls-dialog__title {\n font-size: 1.25rem;\n color: var(--white, #fff);\n}\n.ls-dialog__close {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n user-select: none;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n display: flex;\n cursor: pointer;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-dialog__close-label {\n cursor: pointer;\n font-size: 1rem;\n font-weight: 700;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n display: flex;\n width: 100%;\n flex: 1;\n min-height: 0;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n overflow: auto;\n}\n.ls-dialog__bottom {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding-bottom: 1rem;\n}\n.ls-eventlist {\n position: relative;\n display: flex;\n height: 100%;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n line-height: 1.35;\n}\n.ls-eventlist__new-pill {\n position: absolute;\n top: 0.5em;\n left: 50%;\n z-index: 10;\n transform: translateX(-50%);\n display: inline-flex;\n align-items: center;\n gap: 0.4em;\n padding: 0.35em 0.85em;\n border: none;\n border-radius: 999px;\n background-color: var(--primary, #ff4076);\n color: #fff;\n font-size: 0.8em;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 12px rgb(0 0 0 / 25%);\n transition: opacity 200ms ease;\n}\n.ls-eventlist__new-pill:hover {\n opacity: 0.9;\n}\n.ls-eventlist__new-pill--bottom {\n top: auto;\n bottom: 0.5em;\n}\n.ls-eventlist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5em;\n overflow-y: auto;\n}\n.ls-eventlist__row {\n flex-shrink: 0;\n animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75em;\n border-radius: 1em;\n padding: 1em;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n width: 1.6em;\n height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n from {\n opacity: 0;\n transform: translateX(-1.5em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ls-streamstatus {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: auto;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.625rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n position: relative;\n display: inline-flex;\n height: 0.75rem;\n width: 0.75rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ls-streamstatus__indicator-dot {\n position: relative;\n height: 0.75rem;\n width: 0.75rem;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n display: flex;\n min-width: 0;\n flex-direction: column;\n}\n.ls-streamstatus__status-label {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n display: flex;\n flex-shrink: 0;\n align-items: stretch;\n gap: 0.5rem;\n}\n.ls-streamstatus__total {\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n font-size: 1.875rem;\n font-weight: 700;\n line-height: 1;\n color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n margin-top: 0.25rem;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 0.25rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n height: 0.5rem;\n width: 0.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n flex-shrink: 0;\n font-size: 0.75rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n display: grid;\n flex-shrink: 0;\n grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n display: inline-flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n overflow: hidden;\n font-size: 1.125rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n width: 10px;\n flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n min-width: 0;\n overflow: hidden;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-viewerslist__head {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-viewerslist__count {\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n min-width: 0;\n flex: 1;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n padding: 0.375rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--white, #fff);\n outline: none;\n}\n.ls-viewerslist__search:focus {\n border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n min-width: 0;\n flex: 1;\n}\n.ls-viewerslist__hint {\n flex-shrink: 0;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.125rem;\n overflow: auto;\n}\n.ls-viewerslist__group {\n margin-top: 0.375rem;\n flex-shrink: 0;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n margin-top: 0;\n}\n.ls-viewerslist__viewer {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.25rem 0.375rem;\n transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n object-fit: cover;\n}\n.ls-viewerslist__platform {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-viewerslist__username {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n box-sizing: border-box;\n}\n.ls-shortcutdock {\n display: grid;\n width: 100%;\n align-content: start;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-shortcutdock--disabled {\n opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n position: relative;\n min-width: 0;\n}\n.ls-shortcutdock__btn {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n background-color: transparent;\n padding: 0.25rem;\n font: inherit;\n color: var(--white, #fff);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.15rem;\n line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n border-radius: 0.375rem;\n object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n width: 2rem;\n height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n width: 60%;\n height: 60%;\n border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n padding-inline: 0.125rem;\n text-align: center;\n font-size: 0.625rem;\n font-weight: 600;\n line-height: 1.2;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n font-size: clamp(1rem, 1.4vw, 1.5rem);\n font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n width: 100%;\n height: 100%;\n font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n width: 60%;\n height: 60%;\n}\n.ls-shortcutdock__remove {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n z-index: 1;\n display: flex;\n height: 1.25rem;\n width: 1.25rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 9999px;\n background-color: var(--error, #fd5454);\n padding: 0;\n font: inherit;\n font-size: 0.75rem;\n line-height: 1;\n color: var(--white, #fff);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n opacity: 0.8;\n}\n.ls-shortcutdock__add {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background: transparent;\n padding: 0.25rem;\n font: inherit;\n font-size: 1.5rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n box-sizing: border-box;\n}\n.ls-goals {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n}\n.ls-goals__empty {\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n font-size: 0.875rem;\n}\n.ls-goals__icon {\n display: flex;\n align-self: center;\n align-items: center;\n line-height: 1;\n}\n.ls-goals__label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 600;\n color: var(--white, #fff);\n}\n.ls-goals__value {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n opacity: 0.6;\n}\n.ls-goals__bar {\n margin-top: 0.375rem;\n height: 0.625rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n height: 100%;\n border-radius: 9999px;\n background-image:\n linear-gradient(\n 90deg,\n color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n var(--ls-goals-accent, var(--primary, #ff4076)));\n transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n flex-shrink: 0;\n min-width: 2.75rem;\n text-align: right;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n display: inline-block;\n height: 1.15em;\n width: auto;\n max-width: 1.5em;\n vertical-align: middle;\n object-fit: contain;\n}\n.ls-chatbox__platform-option {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n position: relative;\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--radius, 1rem);\n border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n background-color: var(--background, #151230);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n position: relative;\n display: flex;\n min-height: 2.75rem;\n width: 100%;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n padding-inline: 0.5rem;\n}\n.ls-widget__side {\n display: flex;\n z-index: 10;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-widget__side--right {\n margin-left: auto;\n}\n.ls-widget__title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n white-space: nowrap;\n}\n.ls-widget__btn {\n display: flex;\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n font: inherit;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-widget__body {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n overflow: auto;\n}\n");
|
|
24
|
+
styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n font: inherit;\n letter-spacing: inherit;\n color: inherit;\n margin: 0;\n}\n.ls-color-picker__preview {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n text-transform: uppercase;\n user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.45;\n background-color: var(--separator, #0a0821);\n cursor: not-allowed;\n}\n.mui-ls-button {\n border-radius: var(--radius, 1rem);\n padding: 0.375rem 1.5rem;\n text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n background: var(--primary, #ff4076);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n background-color: var(--secondary, #535395);\n color: var(--neutralLight2, var(--white2, #cac9d5));\n opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n color: var(--primary, #ff4076);\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n border-color: var(--primary, #ff4076);\n background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n color: var(--neutralLight2, var(--white2, #cac9d5));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n border-color: var(--secondary, #535395);\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n color: var(--error, #fd5454);\n border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n border-color: var(--error, #fd5454);\n background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n background-color: var(--neutralDark4, var(--cardborder, #393853));\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n color: var(--neutralLight1, var(--white, #fff));\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n border-color: var(--neutralLight3, var(--grey, #9392a1));\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n max-height: 24px;\n max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n cursor: pointer;\n opacity: 0.9;\n filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n display: flex;\n min-height: calc(var(--ls-control-height) - 2px);\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n min-width: 0;\n}\n.MuiSvgIcon-root svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n fill: currentcolor;\n stroke: currentcolor;\n}\n.mui-ls-input .MuiInputLabel-root,\n.mui-ls-select-form-control .MuiInputLabel-root {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n line-height: 1;\n}\n.mui-ls-input .MuiInputLabel-root svg,\n.mui-ls-select-form-control .MuiInputLabel-root svg {\n display: block;\n flex: 0 0 auto;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n color: var(--neutralLight3, var(--grey, #9392a1));\n opacity: 0.55;\n font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n color: var(--neutralLight1, var(--white, #fff));\n opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n border-radius: var(--radius, 1rem) !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n padding: 0.25rem 0 !important;\n background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupLabel,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupLabel {\n position: sticky;\n top: 0;\n z-index: 1;\n min-height: 32px;\n padding: 0.45rem 1rem 0.25rem !important;\n background: var(--neutralDark1, var(--background, #18162f)) !important;\n color: var(--neutralLight3, var(--grey, #9392a1)) !important;\n font-size: 0.75rem !important;\n font-weight: 700 !important;\n letter-spacing: 0 !important;\n line-height: 1.2 !important;\n text-transform: uppercase;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-groupUl,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-groupUl {\n padding: 0 !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n display: flex !important;\n min-height: 44px !important;\n align-items: center !important;\n padding: 0.625rem 1rem !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n font-size: 1rem !important;\n line-height: 1.35 !important;\n cursor: pointer !important;\n transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border-radius: var(--radius, 1rem);\n object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n min-width: 0;\n}\n.ls-variable-option__label {\n color: var(--neutralLight1, var(--white, #fff));\n font-weight: 500;\n line-height: 1.25;\n}\n.ls-variable-option__helper {\n margin-top: 0.125rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.875rem;\n line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker .MuiInputLabel-root .MuiSvgIcon-root,\n.ls-color-picker .MuiInputLabel-root svg,\n.ls-color-picker .MuiInputLabel-root svg path,\n.ls-color-picker__gradient button,\n.ls-color-picker__gradient button svg,\n.ls-color-picker__gradient button svg path,\n.ls-color-picker__gradient button svg line,\n.ls-color-picker__gradient button svg polyline,\n.ls-color-picker__gradient button svg polygon,\n.ls-color-picker__gradient button svg circle,\n.ls-color-picker__gradient button svg rect {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__gradient button[aria-pressed=true] svg,\n.ls-color-picker__gradient button[aria-selected=true] svg,\n.ls-color-picker__gradient button[data-active=true] svg,\n.ls-color-picker__gradient button[aria-pressed=true] svg *,\n.ls-color-picker__gradient button[aria-selected=true] svg *,\n.ls-color-picker__gradient button[data-active=true] svg * {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-color-picker__picker--inline {\n max-height: none !important;\n}\n.ls-color-picker__gradient {\n color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n min-width: 24px;\n margin-left: 0.35rem;\n border-radius: var(--radius, 1rem);\n background: var(--primary, #ff4076) !important;\n color: var(--alwayswhite, var(--white, #fff)) !important;\n font-weight: 800;\n line-height: 1;\n letter-spacing: 0;\n cursor: pointer;\n user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n color: currentcolor !important;\n fill: currentcolor !important;\n stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n position: relative;\n min-width: 0;\n width: 100%;\n min-height: var(--ls-control-height);\n margin: 0;\n border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0 0.875rem 0.5rem 0.875rem;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n display: block;\n width: auto;\n max-width: calc(100% - 1rem);\n margin: 0;\n padding: 0 0.25rem;\n color: var(--neutralLight1, var(--white, #fff));\n font-size: 0.875rem;\n line-height: 1.1;\n white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n display: flex;\n min-width: 0;\n min-height: calc(var(--ls-control-height) - 14px);\n align-items: center;\n gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n display: block;\n margin-top: 0.25rem;\n color: var(--neutralLight3, var(--grey, #9392a1));\n font-size: 0.75rem;\n line-height: 1.25;\n}\n.ls-multi-select-value {\n display: flex;\n width: 100%;\n min-width: 0;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n white-space: nowrap;\n}\n.ls-multi-select-value__label {\n min-width: 0;\n flex: 1 1 0%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-multi-select-value__count {\n flex-shrink: 0;\n white-space: nowrap;\n}\n.ls-color-picker__preview {\n position: relative;\n display: inline-block;\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n border-radius: var(--radius, 1rem);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n color: transparent;\n line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n box-shadow:\n 0 0 0 2px var(--primary, #ff4076),\n 0 0 0 4px var(--neutralDark1, #1b1a28),\n 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n stroke: #fff !important;\n}\n.ls-variable-picker {\n --variable-custom-color: var(--customVariables, #69ffd2);\n --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n display: flex;\n width: 92vw;\n max-width: 1100px;\n min-height: 50vh;\n max-height: 55vh;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\n}\n.ls-variable-picker__field {\n margin: 0 0 0.75rem;\n border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n border-radius: var(--radius, 1rem);\n padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n padding-inline: 0.375rem;\n color: var(--primary, #ff4076);\n font-size: 0.75rem;\n font-weight: 700;\n}\n.ls-variable-picker__intro {\n margin-bottom: 1rem;\n color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n display: grid;\n grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n gap: 2rem;\n}\n.ls-variable-picker__header {\n margin-bottom: 0.25rem;\n padding-inline: 0.25rem;\n padding-right: 1.7rem;\n color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n height: 100%;\n overflow: auto;\n padding-right: 1rem;\n}\n.ls-variable-picker__row {\n cursor: pointer;\n align-items: start;\n border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n width: 24px;\n height: 24px;\n flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n border-radius: var(--radius, 1rem);\n padding: 0;\n background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n color: var(--neutralLight2, #cac9d5);\n transition:\n background-color 140ms ease,\n border-color 140ms ease,\n color 140ms ease,\n transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n border-color: var(--primary, #ff4076);\n background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n transform: rotate(-90deg);\n transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n opacity: 0.8;\n}\n.ls-variable-picker__description {\n max-width: 600px;\n overflow-wrap: break-word;\n line-height: 1.25;\n word-break: break-all;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description {\n display: block;\n cursor: default;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n color: var(--neutralLight2, #cac9d5);\n overflow-wrap: break-word;\n line-height: 1.35;\n}\n.ls-variable-picker__row.ls-variable-picker__example-description:active {\n opacity: 1;\n}\n.ls-variable-picker__value {\n min-width: 0;\n}\n.ls-variable-picker__value-input {\n width: 100%;\n min-width: 0;\n cursor: text;\n overflow: hidden;\n border: 0;\n background: transparent;\n color: var(--neutralLight1, var(--white, #fff));\n caret-color: transparent;\n font: inherit;\n font-size: 1rem;\n line-height: 1.25;\n outline: 0;\n padding: 0;\n text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n display: flex;\n min-width: 0;\n align-items: center;\n}\n.ls-variable-token--suggested {\n color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-highlight__layer {\n position: absolute;\n margin: 0;\n border: 0;\n box-sizing: border-box;\n overflow: hidden;\n pointer-events: none;\n background: transparent;\n color: inherit;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n z-index: 0;\n}\n.ls-variable-highlight__token {\n border-radius: 4px;\n}\n.ls-variable-highlight__token--custom {\n color: var(--customVariables, #69ffd2);\n background: color-mix(in srgb, var(--customVariables, #69ffd2) 16%, transparent);\n}\n.ls-variable-highlight__token--suggested {\n color: var(--suggestedVariables, #ffb469);\n background: color-mix(in srgb, var(--suggestedVariables, #ffb469) 16%, transparent);\n}\n.ls-variable-highlight__token--function {\n color: var(--functionVariables, var(--semanticPurple, #b489ff));\n background: color-mix(in srgb, var(--functionVariables, var(--semanticPurple, #b489ff)) 16%, transparent);\n}\n.ls-variable-highlight__token--system {\n color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n background: color-mix(in srgb, var(--normalVariables, var(--semanticBlue, #65b8ff)) 16%, transparent);\n}\n.ls-variable-highlight__tooltip {\n position: fixed;\n z-index: 2000;\n transform: translate(-50%, -100%);\n margin-top: -8px;\n max-width: 320px;\n padding: 6px 10px;\n border-radius: 8px;\n background: var(--neutralDark1, #171628);\n border: 1px solid var(--neutralDark4, #393853);\n color: var(--neutralLight2, #cac9d5);\n font-size: 0.75rem;\n line-height: 1.3;\n pointer-events: none;\n box-shadow: 0 4px 14px rgb(0 0 0 / 40%);\n}\n.ls-variable-token__name {\n min-width: 0;\n word-break: break-all;\n}\n.ls-variable-token__badge {\n display: inline-flex;\n margin-left: 0.5rem;\n flex-shrink: 0;\n align-items: center;\n border: 1px solid currentcolor;\n border-radius: var(--radius, 1rem);\n padding-inline: 0.25rem;\n padding-block: 0;\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n text-transform: uppercase;\n}\n.ls-chat-message {\n position: relative;\n font-size: 0.95em;\n line-height: 1.4;\n color: var(--white, var(--neutralLight1, #fff));\n overflow-wrap: break-word;\n word-break: break-word;\n}\n.ls-chat-message img {\n display: inline-block;\n}\n.ls-chat-message__reply {\n display: block;\n margin-bottom: 0.15em;\n font-size: 0.82em;\n color: var(--white2, var(--neutralLight3, #9392a1));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-chat-message__avatar-prefix {\n vertical-align: middle;\n}\n.ls-chat-message__avatar {\n width: 1.3em;\n height: 1.3em;\n border-radius: 9999px;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.35em;\n}\n.ls-chat-message__site img,\n.ls-chat-message__site svg {\n width: 1.2em;\n height: 1.2em;\n vertical-align: middle;\n}\n.ls-chat-message__time {\n margin-right: 0.35em;\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__badges {\n vertical-align: middle;\n}\n.ls-chat-message__badges img {\n height: 1.05em;\n vertical-align: middle;\n margin-right: 0.25em;\n}\n.ls-chat-message__username {\n font-weight: 700;\n vertical-align: middle;\n}\n.ls-chat-message__username--clickable {\n cursor: pointer;\n background: none;\n border: 0;\n padding: 0;\n font: inherit;\n}\n.ls-chat-message__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-viewerslist__username--clickable,\n.ls-eventlist-item__username--clickable {\n cursor: pointer;\n}\n.ls-viewerslist__username--clickable:hover,\n.ls-eventlist-item__username--clickable:hover {\n text-decoration: underline;\n}\n.ls-chat-message__text {\n vertical-align: middle;\n}\n.ls-chat-message__text img {\n vertical-align: middle;\n}\n.ls-chat-message__actions {\n position: absolute;\n top: 0;\n right: 0;\n}\n.ls-chat-message__modbar {\n display: flex;\n overflow: hidden;\n border-radius: 0.75rem;\n background-color: var(--separator, #0a0821);\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem;\n cursor: pointer;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition-duration: 300ms;\n}\n.ls-chat-message__modbtn:hover {\n background-color: var(--cardborder, var(--neutralDark4, #393853));\n}\n.ls-chat-message__modbtn--danger:hover {\n color: var(--error, #fd5454);\n}\n.ls-chat-message__menu-icon {\n display: flex;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-eventlist-item {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 1em;\n border: 1px solid var(--cardborder, var(--neutralDark4, #393853));\n border-left: 4px solid var(--primary, #ff4076);\n border-radius: 1em;\n background-color: var(--cardbackground, var(--neutralDark2, #211d3e));\n color: var(--white, var(--neutralLight1, #fff));\n padding: 1em;\n line-height: 1.35;\n}\n.ls-eventlist-item__main {\n display: flex;\n flex-direction: column;\n gap: 0.2em;\n min-width: 0;\n}\n.ls-eventlist-item__identity {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__avatar,\n.ls-eventlist-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.5em;\n min-width: 1.5em;\n height: 1.5em;\n overflow: hidden;\n}\n.ls-eventlist-item__avatar {\n border-radius: 1em;\n background-color: var(--background, transparent);\n}\n.ls-eventlist-item__avatar img,\n.ls-eventlist-item__icon img,\n.ls-eventlist-item__icon svg {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.ls-eventlist-item__username {\n min-width: 0;\n font-weight: 700;\n font-size: 0.875em;\n word-break: break-all;\n}\n.ls-eventlist-item__body {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n column-gap: 0.75em;\n row-gap: 0.35em;\n min-width: 0;\n}\n.ls-eventlist-item__message {\n min-width: 0;\n word-break: break-all;\n}\n.ls-eventlist-item__usermessage {\n min-width: 0;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-eventlist-item__time {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.875em;\n white-space: nowrap;\n}\n.ls-eventlist-item__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n align-self: center;\n gap: 0.5em;\n flex-shrink: 0;\n}\n.ls-modqueue-item {\n display: flex;\n align-items: stretch;\n gap: 0.5rem;\n border-radius: 1rem;\n background-color: color-mix(in srgb, var(--secondary, #535395) 20%, transparent);\n padding: 0.5rem;\n}\n.ls-modqueue-item__preview {\n display: flex;\n height: 4rem;\n width: 4rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n color: var(--primary, #ff4076);\n font-size: 1.75rem;\n line-height: 1;\n}\n.ls-modqueue-item__preview > * {\n display: flex;\n max-height: 100%;\n max-width: 100%;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n.ls-modqueue-item__preview img,\n.ls-modqueue-item__preview svg {\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n}\n.ls-modqueue-item__body {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n justify-content: flex-start;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item__head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n flex-wrap: wrap;\n}\n.ls-modqueue-item__avatar {\n height: 1.5rem;\n width: 1.5rem;\n border-radius: 9999px;\n border: 1px solid var(--separator, #322c52);\n}\n.ls-modqueue-item__username {\n font-weight: 700;\n color: var(--white, var(--neutralLight1, #fff));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 12rem;\n}\n.ls-modqueue-item__command {\n display: inline-flex;\n align-items: center;\n border-radius: 1rem;\n background-color: var(--separator, #0a0821);\n padding: 0.05rem 0.5rem;\n font-size: 0.8125rem;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modqueue-item__message {\n font-size: 0.875rem;\n font-style: italic;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n word-break: break-all;\n}\n.ls-modqueue-item__actions {\n display: flex;\n flex-shrink: 0;\n align-items: flex-start;\n gap: 0.5rem;\n padding-top: 0.25rem;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn {\n padding: 0;\n border-radius: 0.5rem;\n transition: opacity 300ms ease;\n}\n.ls-modqueue-item .ls-modqueue-item__iconbtn:hover {\n background-color: transparent;\n opacity: 0.7;\n}\n.ls-modqueue-item__action-icon {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n}\n.ls-modlog {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-modlog__toolbar {\n display: flex;\n justify-content: flex-end;\n}\n.ls-modlog__clear {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n border: 0;\n border-radius: 0.75rem;\n background: transparent;\n padding: 0.25rem 0.625rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-modlog__clear:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 8%, transparent);\n color: var(--white, #fff);\n}\n.ls-modlog__empty {\n display: flex;\n height: 100%;\n flex: 1;\n align-items: center;\n justify-content: center;\n border-radius: 1rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modlog__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.375rem;\n overflow: auto;\n}\n.ls-modlog__row {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n border-radius: 0.625rem;\n border-left: 3px solid var(--ls-modlog-accent, var(--primary, #ff4076));\n padding: 0.5rem 0.625rem;\n font-size: 0.8125rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n background-image: linear-gradient(var(--ls-modlog-bar, transparent), var(--ls-modlog-bar, transparent));\n}\n.ls-modlog__head {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-modlog__avatar {\n height: 1.25rem;\n width: 1.25rem;\n border-radius: 9999px;\n}\n.ls-modlog__title {\n display: inline-flex;\n align-items: center;\n border-radius: 0.375rem;\n padding: 0.05rem 0.4rem;\n font-size: 0.625rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--ls-modlog-accent, var(--primary, #ff4076));\n background-color: color-mix(in srgb, var(--ls-modlog-accent, #ff4076) 18%, transparent);\n}\n.ls-modlog__time {\n margin-left: auto;\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n font-size: 0.6875rem;\n font-variant-numeric: tabular-nums;\n}\n.ls-modlog__message {\n word-break: break-word;\n overflow-wrap: anywhere;\n line-height: 1.35;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-songreq--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__addbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-songreq__addbar .ls-songreq__addinput {\n flex: 1;\n}\n.ls-songreq__empty {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__now {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.75rem;\n background-color: var(--separator, var(--neutralDark2, #1b1834));\n}\n.ls-songreq__art {\n height: 3.5rem;\n width: 3.5rem;\n flex-shrink: 0;\n border-radius: 0.75rem;\n object-fit: cover;\n}\n.ls-songreq__nowbody {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.1rem;\n}\n.ls-songreq__title {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__artist {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__requester {\n overflow: hidden;\n font-size: 0.6875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__progress {\n margin-top: 0.375rem;\n height: 0.375rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-songreq__progressbar {\n height: 100%;\n border-radius: 9999px;\n background-color: var(--success, #1db954);\n transition: width 1000ms linear;\n}\n.ls-songreq__controls {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-songreq__btn {\n display: inline-flex;\n height: 2rem;\n width: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: 0.625rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background: transparent;\n font-size: 0.875rem;\n line-height: 1;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 120ms ease, color 120ms ease;\n}\n.ls-songreq__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-songreq__queue {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n}\n.ls-songreq__queuehead {\n margin-bottom: 0.25rem;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__queuelist {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.25rem;\n overflow: auto;\n}\n.ls-songreq__queueempty {\n padding: 0.5rem 0.25rem;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.75rem;\n padding: 0.375rem 0.5rem;\n transition: background-color 120ms ease;\n}\n.ls-songreq__item:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-songreq__itemart {\n height: 2.25rem;\n width: 2.25rem;\n flex-shrink: 0;\n border-radius: 0.5rem;\n object-fit: cover;\n}\n.ls-songreq__itembody {\n min-width: 0;\n flex: 1;\n}\n.ls-songreq__itemtitle {\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-songreq__itemmeta {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-songreq__remove {\n flex-shrink: 0;\n cursor: pointer;\n border: 0;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: color 120ms ease;\n}\n.ls-songreq__remove:hover {\n color: var(--error, #fd5454);\n}\n.ls-modqueue {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-modqueue__search-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: var(--white2, var(--neutralLight2, #cac9d5));\n}\n.ls-modqueue__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__empty-icon {\n font-size: 1.875rem;\n}\n.ls-modqueue__bulk {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n.ls-modqueue .ls-modqueue__bulk-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.5rem;\n border: 1px solid currentcolor;\n background: transparent;\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n transition: opacity 120ms ease;\n}\n.ls-modqueue .ls-modqueue__bulk-btn:hover {\n opacity: 0.7;\n}\n.ls-modqueue .ls-modqueue__bulk-btn--deny {\n color: var(--error, #fd5454);\n}\n.ls-modqueue .ls-modqueue__bulk-btn--approve {\n color: var(--success, #7ed187);\n}\n.ls-modqueue__bulk-icon {\n height: 1rem;\n width: 1rem;\n flex-shrink: 0;\n}\n.ls-modqueue__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-modqueue__readonly {\n font-size: 0.625rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-modqueue__search-slot {\n flex-shrink: 0;\n}\n.ls-chatbox {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-chatbox__viewport {\n position: relative;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.ls-chatbox__list {\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow-y: auto;\n padding: 0.75rem;\n}\n.ls-chatbox__jump {\n position: absolute;\n bottom: 0.75rem;\n right: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n border-radius: 9999px;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n padding: 0.5rem 0.75rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n backdrop-filter: blur(4px);\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-chatbox__jump:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-chatbox__jump-arrow {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-chatbox__jump-arrow--up {\n transform: rotate(180deg);\n}\n.ls-chatbox__jump-badge {\n margin-left: 0.25rem;\n border-radius: 9999px;\n background-color: var(--primary, #ff4076);\n padding: 0.125rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 600;\n color: var(--alwayswhite, #fff);\n}\n.ls-chatbox__sendbar {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n padding: 0 0.75rem 0.75rem;\n}\n.ls-chatbox__sendbar .ls-chatbox__input {\n flex: 2 1 0%;\n min-width: 100px;\n width: 100%;\n}\n.ls-chatbox__sendbar .ls-chatbox__platform {\n flex: 1 1 0%;\n min-width: 7.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__chatas {\n flex: 0 1 auto;\n min-width: 5.5rem;\n height: 55px;\n}\n.ls-chatbox__sendbar .ls-chatbox__send {\n height: 55px;\n flex-shrink: 0;\n}\n.ls-panel {\n --ls-panel-padding: 0.75rem;\n display: flex;\n flex-direction: column;\n border-radius: 1rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: var(--ls-panel-bg, #1b1834);\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.55);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-panel__clickaway {\n position: fixed;\n inset: 0;\n z-index: 20;\n}\n.ls-panel__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: var(--ls-panel-padding) var(--ls-panel-padding) 0.5rem;\n}\n.ls-panel__title {\n min-width: 0;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-panel__title--label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-panel__header-actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-panel__close {\n display: flex;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.5rem;\n background: transparent;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-panel__close:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-panel__body {\n min-height: 0;\n flex: 1;\n overflow: auto;\n padding: 0 var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-panel--no-header .ls-panel__body {\n padding-top: var(--ls-panel-padding);\n}\n.ls-panel__footer {\n flex-shrink: 0;\n padding: 0.5rem var(--ls-panel-padding) var(--ls-panel-padding);\n}\n.ls-modal {\n position: fixed;\n inset: 0;\n z-index: 2000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n}\n.ls-modal--absolute {\n position: absolute;\n}\n.ls-modal__backdrop {\n position: absolute;\n inset: 0;\n background-color: color-mix(in srgb, var(--ls-modal-backdrop, var(--separator, #0a0821)) 75%, transparent);\n backdrop-filter: blur(4px);\n}\n.ls-modal__card {\n position: relative;\n width: 100%;\n max-width: var(--ls-modal-max-width, min(560px, 92vw));\n max-height: 85vh;\n}\n.ls-modal__card--fit {\n width: auto;\n}\n.ls-modal__card--center .ls-panel__body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog {\n margin-top: 0.5rem;\n display: flex;\n height: 100%;\n width: 100%;\n align-items: center;\n justify-content: center;\n}\n.ls-dialog__card {\n position: relative;\n z-index: 10;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n overflow: hidden;\n border-radius: 1rem;\n outline: none;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-dialog__card--pad {\n padding: 1rem;\n}\n.ls-dialog__card--full {\n border-radius: 0;\n}\n.ls-dialog__top {\n display: flex;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n}\n.ls-dialog__top--full {\n margin-top: 2rem;\n}\n.ls-dialog__top-side {\n flex: 1;\n}\n.ls-dialog__title {\n font-size: 1.25rem;\n color: var(--white, #fff);\n}\n.ls-dialog__close {\n display: flex;\n flex: 1;\n justify-content: flex-end;\n user-select: none;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-dialog__close-btn {\n display: flex;\n cursor: pointer;\n align-items: center;\n gap: 0.5rem;\n}\n.ls-dialog__close-label {\n cursor: pointer;\n font-size: 1rem;\n font-weight: 700;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-dialog__body {\n display: flex;\n width: 100%;\n flex: 1;\n min-height: 0;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n overflow: auto;\n}\n.ls-dialog__bottom {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 1rem;\n padding-bottom: 1rem;\n}\n.ls-eventlist {\n display: flex;\n height: 100%;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n color: var(--white, var(--neutralLight1, #fff));\n line-height: 1.35;\n}\n.ls-eventlist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.5em;\n overflow-y: auto;\n}\n.ls-eventlist__row {\n flex-shrink: 0;\n animation: ls-eventlist-enter 250ms ease;\n}\n.ls-eventlist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75em;\n border-radius: 1em;\n padding: 1em;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-eventlist__empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 1.875em;\n}\n.ls-eventlist__empty-icon img,\n.ls-eventlist__empty-icon svg {\n width: 1.6em;\n height: 1.6em;\n}\n@keyframes ls-eventlist-enter {\n from {\n opacity: 0;\n transform: translateX(-1.5em);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ls-streamstatus {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.75rem;\n overflow: auto;\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-streamstatus--empty {\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__status {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.625rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__indicator {\n position: relative;\n display: inline-flex;\n height: 0.75rem;\n width: 0.75rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__indicator-ping {\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--success, #7ed187) 60%, transparent);\n animation: ls-streamstatus-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ls-streamstatus-ping {\n 75%, 100% {\n transform: scale(2);\n opacity: 0;\n }\n}\n.ls-streamstatus__indicator-dot {\n position: relative;\n height: 0.75rem;\n width: 0.75rem;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__indicator-dot--online {\n background-color: var(--success, #7ed187);\n}\n.ls-streamstatus__status-body {\n display: flex;\n min-width: 0;\n flex-direction: column;\n}\n.ls-streamstatus__status-label {\n overflow: hidden;\n font-size: 0.875rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__status-sublabel {\n overflow: hidden;\n font-size: 0.75rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__overview {\n display: flex;\n flex-shrink: 0;\n align-items: stretch;\n gap: 0.5rem;\n}\n.ls-streamstatus__total {\n display: flex;\n flex-shrink: 0;\n flex-direction: column;\n justify-content: center;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__total-value {\n font-size: 1.875rem;\n font-weight: 700;\n line-height: 1;\n color: var(--primary, #ff4076);\n}\n.ls-streamstatus__total-label {\n margin-top: 0.25rem;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platforms {\n display: flex;\n min-width: 0;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 0.25rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__platforms-empty {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-streamstatus__platform-info {\n display: inline-flex;\n min-width: 0;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: color-mix(in srgb, var(--white, #fff) 80%, transparent);\n}\n.ls-streamstatus__platform-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__platform-icon img,\n.ls-streamstatus__platform-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-streamstatus__platform-dot {\n height: 0.5rem;\n width: 0.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n background-color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__platform-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ls-streamstatus__platform-value {\n flex-shrink: 0;\n font-size: 0.75rem;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stats {\n display: grid;\n flex-shrink: 0;\n grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));\n gap: 0.5rem;\n}\n.ls-streamstatus__stat {\n display: flex;\n min-width: 0;\n flex-direction: column;\n gap: 0.125rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 5%, transparent);\n border-radius: 1rem;\n padding: 0.5rem 0.75rem;\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-streamstatus__stat-head {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n}\n.ls-streamstatus__stat-icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n.ls-streamstatus__stat-icon img,\n.ls-streamstatus__stat-icon svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-streamstatus__stat-actions {\n display: inline-flex;\n margin-left: auto;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-value {\n overflow: hidden;\n font-size: 1.125rem;\n font-weight: 700;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--white, #fff);\n}\n.ls-streamstatus__stat-trendrow {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-streamstatus__stat-trendrow svg {\n width: 10px;\n flex-shrink: 0;\n}\n.ls-streamstatus__stat-label {\n min-width: 0;\n overflow: hidden;\n font-size: 0.6875rem;\n letter-spacing: 0.05em;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-streamstatus__stat-sub {\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n overflow: hidden;\n}\n.ls-viewerslist__head {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.ls-viewerslist__count {\n flex-shrink: 0;\n font-size: 0.875rem;\n font-weight: 700;\n color: var(--white, #fff);\n}\n.ls-viewerslist__search {\n min-width: 0;\n flex: 1;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--black, #000) 20%, transparent);\n padding: 0.375rem 0.75rem;\n font-size: 0.8125rem;\n color: var(--white, #fff);\n outline: none;\n}\n.ls-viewerslist__search:focus {\n border-color: var(--primary, #ff4076);\n}\n.ls-viewerslist__search::placeholder {\n color: color-mix(in srgb, var(--grey, var(--neutralLight3, #9392a1)) 60%, transparent);\n}\n.ls-viewerslist__search-slot {\n min-width: 0;\n flex: 1;\n}\n.ls-viewerslist__hint {\n flex-shrink: 0;\n font-size: 0.75rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty {\n display: flex;\n height: 100%;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n text-align: center;\n color: var(--white2, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__empty-icon {\n font-size: 1.875rem;\n}\n.ls-viewerslist__list {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n gap: 0.125rem;\n overflow: auto;\n}\n.ls-viewerslist__group {\n margin-top: 0.375rem;\n flex-shrink: 0;\n padding: 0 0.25rem;\n font-size: 0.6875rem;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__group:first-child {\n margin-top: 0;\n}\n.ls-viewerslist__viewer {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.25rem 0.375rem;\n transition: background-color 120ms ease;\n}\n.ls-viewerslist__viewer:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 4%, transparent);\n}\n.ls-viewerslist__avatar {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n border-radius: 9999px;\n object-fit: cover;\n}\n.ls-viewerslist__platform {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-viewerslist__platform img,\n.ls-viewerslist__platform svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n.ls-viewerslist__username {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n font-size: 0.875rem;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-viewerslist__badges {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-viewerslist__actions {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-shortcutdock,\n.ls-shortcutdock * {\n box-sizing: border-box;\n}\n.ls-shortcutdock {\n display: grid;\n width: 100%;\n align-content: start;\n gap: 0.5rem;\n overflow: auto;\n}\n.ls-shortcutdock--disabled {\n opacity: 0.55;\n}\n.ls-shortcutdock__empty {\n grid-column: 1 / -1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n text-align: center;\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-shortcutdock__cell {\n position: relative;\n min-width: 0;\n}\n.ls-shortcutdock__btn {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px solid color-mix(in srgb, var(--white, #fff) 12%, transparent);\n background-color: transparent;\n padding: 0.25rem;\n font: inherit;\n color: var(--white, #fff);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent) !important;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n opacity 150ms ease;\n}\n.ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 7%, transparent);\n}\n.ls-shortcutdock__btn--selected,\n.ls-shortcutdock__btn--selected:hover {\n border-color: var(--primary, #ff4076);\n}\n.ls-shortcutdock__btn:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn {\n cursor: default;\n}\n.ls-shortcutdock--readonly .ls-shortcutdock__btn:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n background-color: color-mix(in srgb, var(--white, #fff) 3%, transparent);\n}\n.ls-shortcutdock__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.15rem;\n line-height: 1;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__icon {\n font-size: 1.5rem;\n}\n.ls-shortcutdock__btn-image {\n width: 1.5rem;\n height: 1.5rem;\n flex-shrink: 0;\n border-radius: 0.375rem;\n object-fit: cover;\n}\n.ls-shortcutdock__btn--lg .ls-shortcutdock__btn-image {\n width: 2rem;\n height: 2rem;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__btn-image {\n width: 60%;\n height: 60%;\n border-radius: 0.5rem;\n}\n.ls-shortcutdock__label {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n padding-inline: 0.125rem;\n text-align: center;\n font-size: 0.625rem;\n font-weight: 600;\n line-height: 1.2;\n color: color-mix(in srgb, var(--white, #fff) 90%, transparent);\n}\n.ls-shortcutdock__btn--icon-only {\n font-size: clamp(1rem, 1.4vw, 1.5rem);\n font-weight: 700;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon {\n width: 100%;\n height: 100%;\n font-size: inherit;\n}\n.ls-shortcutdock__btn--icon-only .ls-shortcutdock__icon svg {\n width: 60%;\n height: 60%;\n}\n.ls-shortcutdock__remove {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n z-index: 1;\n display: flex;\n height: 1.25rem;\n width: 1.25rem;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 9999px;\n background-color: var(--error, #fd5454);\n padding: 0;\n font: inherit;\n font-size: 0.75rem;\n line-height: 1;\n color: var(--white, #fff);\n box-shadow: 0 1px 3px color-mix(in srgb, var(--black, #000) 30%, transparent);\n transition: opacity 120ms ease;\n}\n.ls-shortcutdock__remove:hover {\n opacity: 0.8;\n}\n.ls-shortcutdock__add {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 0.75rem;\n border: 1px dashed color-mix(in srgb, var(--white, #fff) 20%, transparent);\n background: transparent;\n padding: 0.25rem;\n font: inherit;\n font-size: 1.5rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n transition: border-color 150ms ease, color 150ms ease;\n}\n.ls-shortcutdock__add:hover {\n border-color: color-mix(in srgb, var(--white, #fff) 40%, transparent);\n color: var(--white, #fff);\n}\n.ls-goals,\n.ls-goals * {\n box-sizing: border-box;\n}\n.ls-goals {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 1rem;\n}\n.ls-goals__empty {\n font-size: 0.875rem;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__head {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n font-size: 0.875rem;\n}\n.ls-goals__icon {\n display: flex;\n align-self: center;\n align-items: center;\n line-height: 1;\n}\n.ls-goals__label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 600;\n color: var(--white, #fff);\n}\n.ls-goals__value {\n flex-shrink: 0;\n color: var(--grey, var(--neutralLight3, #9392a1));\n}\n.ls-goals__target {\n opacity: 0.6;\n}\n.ls-goals__bar {\n margin-top: 0.375rem;\n height: 0.625rem;\n width: 100%;\n overflow: hidden;\n border-radius: 9999px;\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n}\n.ls-goals__fill {\n height: 100%;\n border-radius: 9999px;\n background-image:\n linear-gradient(\n 90deg,\n color-mix(in srgb, var(--ls-goals-accent, var(--primary, #ff4076)) 80%, transparent),\n var(--ls-goals-accent, var(--primary, #ff4076)));\n transition: width 700ms ease-out;\n}\n.ls-goals__percent {\n flex-shrink: 0;\n min-width: 2.75rem;\n text-align: right;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n color: var(--ls-goals-accent, var(--primary, #ff4076));\n}\n.ls-platform-icon {\n display: inline-block;\n height: 1.15em;\n width: auto;\n max-width: 1.5em;\n vertical-align: middle;\n object-fit: contain;\n}\n.ls-chatbox__platform-option {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-width: 0;\n}\n.ls-shortcutdock__btn--colored {\n border-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 70%, transparent);\n box-shadow: inset 0 -2px 0 var(--ls-shortcutdock-accent-soft, transparent);\n}\n.ls-shortcutdock__btn--colored:hover {\n border-color: var(--ls-shortcutdock-accent, var(--white, #fff));\n background-color: color-mix(in srgb, var(--ls-shortcutdock-accent, var(--white, #fff)) 12%, transparent);\n}\n.ls-widget {\n position: relative;\n display: flex;\n height: 100%;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--radius, 1rem);\n border: 1px solid color-mix(in srgb, var(--cardborder, #393853) 50%, transparent);\n background-image: var(--gradientBg, linear-gradient(180deg, #1b1834 0%, #151230 100%));\n background-color: var(--background, #151230);\n color: var(--white, var(--neutralLight1, #fff));\n}\n.ls-widget__header {\n position: relative;\n display: flex;\n min-height: 2.75rem;\n width: 100%;\n flex-shrink: 0;\n align-items: center;\n gap: 0.5rem;\n border-bottom: 1px solid color-mix(in srgb, var(--white, #fff) 10%, transparent);\n padding-inline: 0.5rem;\n}\n.ls-widget__side {\n display: flex;\n z-index: 10;\n align-items: center;\n gap: 0.25rem;\n}\n.ls-widget__side--right {\n margin-left: auto;\n}\n.ls-widget__title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n white-space: nowrap;\n}\n.ls-widget__btn {\n display: flex;\n height: 2rem;\n width: 2rem;\n flex-shrink: 0;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background-color: color-mix(in srgb, var(--white, #fff) 5%, transparent);\n color: color-mix(in srgb, var(--white, #fff) 70%, transparent);\n font: inherit;\n transition: background-color 150ms ease, color 150ms ease;\n}\n.ls-widget__btn:hover {\n background-color: color-mix(in srgb, var(--white, #fff) 10%, transparent);\n color: var(--white, #fff);\n}\n.ls-widget__btn--active {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 20%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn--active:hover {\n background-color: color-mix(in srgb, var(--primary, #ff4076) 30%, transparent);\n color: var(--primary, #ff4076);\n}\n.ls-widget__btn svg {\n height: 1rem;\n width: 1rem;\n}\n.ls-widget__body {\n display: flex;\n min-height: 0;\n flex: 1;\n flex-direction: column;\n overflow: auto;\n}\n");
|
|
25
25
|
|
|
26
26
|
// src/components/SongRequestList/SongRequestList.tsx
|
|
27
27
|
import { useState } from "react";
|
|
@@ -7,7 +7,6 @@ interface StreamStatusPlatform {
|
|
|
7
7
|
value: React.ReactNode;
|
|
8
8
|
icon?: React.ReactNode;
|
|
9
9
|
accentColor?: string;
|
|
10
|
-
tooltip?: React.ReactNode;
|
|
11
10
|
}
|
|
12
11
|
interface StreamStatusStat {
|
|
13
12
|
id: string | number;
|
|
@@ -26,11 +25,9 @@ interface StreamStatusPanelProps {
|
|
|
26
25
|
statusLabel?: React.ReactNode;
|
|
27
26
|
statusSublabel?: React.ReactNode;
|
|
28
27
|
statusSlot?: React.ReactNode;
|
|
29
|
-
statusTooltip?: React.ReactNode;
|
|
30
28
|
totalLabel?: React.ReactNode;
|
|
31
29
|
totalValue?: React.ReactNode;
|
|
32
30
|
totalAccentColor?: string;
|
|
33
|
-
totalTooltip?: React.ReactNode;
|
|
34
31
|
platforms?: StreamStatusPlatform[];
|
|
35
32
|
platformsEmptyText?: React.ReactNode;
|
|
36
33
|
stats?: StreamStatusStat[];
|
|
@@ -40,7 +37,7 @@ interface StreamStatusPanelProps {
|
|
|
40
37
|
id?: string;
|
|
41
38
|
className?: string;
|
|
42
39
|
}
|
|
43
|
-
declare function StreamStatusPanel({ online, statusLabel, statusSublabel, statusSlot,
|
|
40
|
+
declare function StreamStatusPanel({ online, statusLabel, statusSublabel, statusSlot, totalLabel, totalValue, totalAccentColor, platforms, platformsEmptyText, stats, statsLabelPosition, statsColumns, emptyText, id, className, }: StreamStatusPanelProps): react_jsx_runtime.JSX.Element;
|
|
44
41
|
declare namespace StreamStatusPanel {
|
|
45
42
|
var displayName: string;
|
|
46
43
|
}
|