/* ==========================================================================
   TRIBUTE V3 - MAIN STYLESHEET
   Modern, theme-aware styling with CSS variables and component architecture
   ========================================================================== */

/* TODO: Refactor, organize, and leverage Tailwind CSS when able
   - Replace custom CSS with Tailwind utility classes where possible
   - Organize styles into logical sections with clear comments
   - Leverage Tailwind's responsive utilities and design tokens
   - Consider using @apply for repeated patterns
   ========================================================================== */

/* ==========================================================================
   IMPORTS & CONFIGURATION
   ========================================================================== */

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

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

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(45% 0.24 277.023);
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-base-100: oklch(25.33% 0.016 252.42);
    --color-base-200: oklch(23.26% 0.014 253.1);
    --color-base-300: oklch(21.15% 0.012 254.09);
    --color-base-content: oklch(97.807% 0.029 256.847);
    --color-primary: oklch(58% 0.233 277.117);
    --color-primary-content: oklch(96% 0.018 272.314);
    --color-secondary: oklch(65% 0.241 354.308);
    --color-secondary-content: oklch(94% 0.028 342.258);
    --color-accent: oklch(77% 0.152 181.912);
    --color-accent-content: oklch(38% 0.063 188.416);
    --color-neutral: oklch(14% 0.005 285.823);
    --color-neutral-content: oklch(92% 0.004 286.32);
    --color-info: oklch(74% 0.16 232.661);
    --color-info-content: oklch(29% 0.066 243.157);
    --color-success: oklch(76% 0.177 163.223);
    --color-success-content: oklch(37% 0.077 168.94);
    --color-warning: oklch(82% 0.189 84.429);
    --color-warning-content: oklch(41% 0.112 45.904);
    --color-error: oklch(71% 0.194 13.428);
    --color-error-content: oklch(27% 0.105 12.094);
    --radius-selector: 0.5rem;
    --radius-field: 0.25rem;
    --radius-box: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
  }
}

:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0 0);
  --color-base-300: oklch(95% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);
  --color-primary: oklch(45% 0.24 277.023);
  --color-primary-content: oklch(93% 0.034 272.788);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {
  color-scheme: dark;
  --color-base-100: oklch(25.33% 0.016 252.42);
  --color-base-200: oklch(23.26% 0.014 253.1);
  --color-base-300: oklch(21.15% 0.012 254.09);
  --color-base-content: oklch(97.807% 0.029 256.847);
  --color-primary: oklch(58% 0.233 277.117);
  --color-primary-content: oklch(96% 0.018 272.314);
  --color-secondary: oklch(65% 0.241 354.308);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(77% 0.152 181.912);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: oklch(74% 0.16 232.661);
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

:root {
  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
  scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
}

@property --radialprogress {
  syntax: "<percentage>";

  inherits: true;

  initial-value: 0%;
}

:root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
  overflow: hidden;
}

:root:has( .modal-open, .\!modal[open], .\!modal:target, .modal-toggle:checked, .drawer:not([class*="drawer-open"]) > .drawer-toggle:checked ) {
  overflow: hidden !important;
}

:where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
  scrollbar-gutter: stable;
  background-image: linear-gradient(var(--color-base-100), var(--color-base-100));
  --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);
}

:where( :root:has( .modal-open, .\!modal[open], .\!modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
  scrollbar-gutter: stable !important;
  background-image: linear-gradient(var(--color-base-100), var(--color-base-100)) !important;
  --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%) !important;
}

:where(.\!modal[open], .modal-open, .modal-toggle:checked + .\!modal):not(.modal-start, .modal-end) {
  scrollbar-gutter: stable !important;
}

:where(.modal[open], .modal-open, .modal-toggle:checked + .modal):not(.modal-start, .modal-end) {
  scrollbar-gutter: stable;
}

:where(.\!modal[open], .modal-open, .modal-toggle:checked + .\!modal):not(.modal-start, .modal-end) {
  scrollbar-gutter: stable !important;
}

:root, [data-theme] {
  background-color: var(--root-bg, var(--color-base-100));
  color: var(--color-base-content);
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.\!textarea {
  border: var(--border) solid #0000 !important;
  min-height: calc(0.25rem * 20) !important;
  flex-shrink: 1 !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  border-radius: var(--radius-field) !important;
  background-color: var(--color-base-100) !important;
  padding-block: calc(0.25rem * 2) !important;
  vertical-align: middle !important;
  width: clamp(3rem, 20rem, 100%) !important;
  padding-inline-start: 0.75rem !important;
  padding-inline-end: 0.75rem !important;
  font-size: 0.875rem !important;
  touch-action: manipulation !important;
  border-color: var(--input-color) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000) !important;
}

.textarea {
  border: var(--border) solid #0000;
  min-height: calc(0.25rem * 20);
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--radius-field);
  background-color: var(--color-base-100);
  padding-block: calc(0.25rem * 2);
  vertical-align: middle;
  width: clamp(3rem, 20rem, 100%);
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
  font-size: 0.875rem;
  touch-action: manipulation;
  border-color: var(--input-color);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}

.\!textarea textarea {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background-color: transparent !important;
  border: none !important;
}

.textarea textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
}

.\!textarea textarea:focus, .\!textarea textarea:focus-within {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

.textarea textarea:focus, .textarea textarea:focus-within {
  --tw-outline-style: none;
  outline-style: none;
}

.\!textarea textarea:focus, .\!textarea textarea:focus-within {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

@media (forced-colors: active) {
  .\!textarea textarea:focus, .\!textarea textarea:focus-within {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  .textarea textarea:focus, .textarea textarea:focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .\!textarea textarea:focus, .\!textarea textarea:focus-within {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }
}

.\!textarea:focus, .\!textarea:focus-within {
  --input-color: var(--color-base-content) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
  outline: 2px solid var(--input-color) !important;
  outline-offset: 2px !important;
  isolation: isolate !important;
}

.textarea:focus, .textarea:focus-within {
  --input-color: var(--color-base-content);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
  outline: 2px solid var(--input-color);
  outline-offset: 2px;
  isolation: isolate;
}

.\!textarea:focus, .\!textarea:focus-within {
  --input-color: var(--color-base-content) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
  outline: 2px solid var(--input-color) !important;
  outline-offset: 2px !important;
  isolation: isolate !important;
}

.\!textarea:has(> textarea[disabled]), .\!textarea:is(:disabled, [disabled]) {
  cursor: not-allowed !important;
  border-color: var(--color-base-200) !important;
  background-color: var(--color-base-200) !important;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
}

.textarea:has(> textarea[disabled]), .textarea:is(:disabled, [disabled]) {
  cursor: not-allowed;
  border-color: var(--color-base-200);
  background-color: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

.\!textarea:has(> textarea[disabled]), .\!textarea:is(:disabled, [disabled]) {
  cursor: not-allowed !important;
  border-color: var(--color-base-200) !important;
  background-color: var(--color-base-200) !important;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
}

.\!textarea:has(> textarea[disabled])::-moz-placeholder, .\!textarea:is(:disabled, [disabled])::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!textarea:has(> textarea[disabled])::placeholder, .\!textarea:is(:disabled, [disabled])::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.textarea:has(> textarea[disabled])::-moz-placeholder, .textarea:is(:disabled, [disabled])::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.textarea:has(> textarea[disabled])::placeholder, .textarea:is(:disabled, [disabled])::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.\!textarea:has(> textarea[disabled])::-moz-placeholder, .\!textarea:is(:disabled, [disabled])::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!textarea:has(> textarea[disabled])::placeholder, .\!textarea:is(:disabled, [disabled])::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!textarea:has(> textarea[disabled]), .\!textarea:is(:disabled, [disabled]) {
  box-shadow: none !important;
}

.textarea:has(> textarea[disabled]), .textarea:is(:disabled, [disabled]) {
  box-shadow: none;
}

.\!textarea:has(> textarea[disabled]), .\!textarea:is(:disabled, [disabled]) {
  box-shadow: none !important;
}

.\!textarea:has(> textarea[disabled]) > textarea[disabled] {
  cursor: not-allowed !important;
}

.textarea:has(> textarea[disabled]) > textarea[disabled] {
  cursor: not-allowed;
}

.textarea-ghost {
  background-color: transparent;
  box-shadow: none;
  border-color: #0000;
}

.textarea-ghost:focus, .textarea-ghost:focus-within {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: #0000;
  box-shadow: none;
}

.rating {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.rating input {
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.rating :where(*) {
  height: calc(0.25rem * 6);
  width: calc(0.25rem * 6);
  border-radius: 0;
  background-color: var(--color-base-content);
  opacity: 20%;
}

@media (prefers-reduced-motion: no-preference) {
  .rating :where(*) {
    animation: rating 0.25s ease-out;
  }
}

.rating :where(*):is(input) {
  cursor: pointer;
}

.rating .rating-hidden {
  width: calc(0.25rem * 2);
  background-color: transparent;
}

.rating input[type="radio"]:checked {
  background-image: none;
}

.rating *:checked, .rating *[aria-checked="true"], .rating *[aria-current="true"], .rating *:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
  opacity: 100%;
}

.rating *:focus-visible {
  scale: 1.1;
}

@media (prefers-reduced-motion: no-preference) {
  .rating *:focus-visible {
    transition: scale 0.2s ease-out;
  }
}

.rating *:active:focus {
  animation: none;
  scale: 1.1;
}

.rating.rating-xs :where(*:not(.rating-hidden)) {
  width: calc(0.25rem * 4);
  height: calc(0.25rem * 4);
}

.rating.rating-sm :where(*:not(.rating-hidden)) {
  width: calc(0.25rem * 5);
  height: calc(0.25rem * 5);
}

.rating.rating-md :where(*:not(.rating-hidden)) {
  width: calc(0.25rem * 6);
  height: calc(0.25rem * 6);
}

.rating.rating-lg :where(*:not(.rating-hidden)) {
  width: calc(0.25rem * 7);
  height: calc(0.25rem * 7);
}

.rating.rating-xl :where(*:not(.rating-hidden)) {
  width: calc(0.25rem * 8);
  height: calc(0.25rem * 8);
}

.rating-half.rating-xs *:not(.rating-hidden) {
  width: calc(0.25rem * 2);
}

@keyframes rating {
  0%, 40% {
    scale: 1.1;
    filter: brightness(1.05) contrast(1.05);
  }
}

.cally {
  font-size: 0.7rem;
}

.cally::part(container) {
  padding: 0.5rem 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cally ::part(th) {
  font-weight: normal;
  block-size: auto;
}

.cally::part(header) {
  direction: ltr;
}

.cally ::part(head) {
  opacity: 0.5;
  font-size: 0.7rem;
}

.cally::part(button) {
  border-radius: var(--radius-field);
  border: none;
  padding: 0.5rem;
  background: #0000;
}

.cally::part(button):hover {
  background: var(--color-base-200);
}

.cally ::part(day) {
  border-radius: var(--radius-field);
  font-size: 0.7rem;
}

.cally ::part(day):hover:not(selected, today) {
  background: var(--color-base-200);
}

.cally ::part(button day today) {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

.cally ::part(selected) {
  color: var(--color-base-100);
  background: var(--color-base-content);
  border-radius: var(--radius-field);
}

.cally ::part(range-inner) {
  border-radius: 0;
}

.cally ::part(range-start) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.cally ::part(range-end) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.cally ::part(range-start range-end) {
  border-radius: var(--radius-field);
}

.cally calendar-month {
  width: 100%;
}

.\!dropdown {
  position: relative !important;
  display: inline-block !important;
  position-area: var(--anchor-v, bottom) var(--anchor-h, span-right) !important;
}

.dropdown {
  position: relative;
  display: inline-block;
  position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
}

.\!dropdown > *:not(summary):focus {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

.dropdown > *:not(summary):focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .\!dropdown > *:not(summary):focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  .dropdown > *:not(summary):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.\!dropdown .dropdown-content {
  position: absolute !important;
}

.dropdown .dropdown-content {
  position: absolute;
}

.\!dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content {
  display: none !important;
  transform-origin: top !important;
  opacity: 0% !important;
  scale: 95% !important;
}

.dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content {
  display: none;
  transform-origin: top;
  opacity: 0%;
  scale: 95%;
}

.\!dropdown[popover], .\!dropdown .dropdown-content {
  z-index: 999 !important;
}

.dropdown[popover], .dropdown .dropdown-content {
  z-index: 999;
}

.\!dropdown[popover], .\!dropdown .dropdown-content {
  z-index: 999 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .\!dropdown[popover], .\!dropdown .dropdown-content {
    animation: dropdown 0.2s !important;
    transition-property: opacity, scale, display !important;
    transition-behavior: allow-discrete !important;
    transition-duration: 0.2s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .dropdown[popover], .dropdown .dropdown-content {
    animation: dropdown 0.2s;
    transition-property: opacity, scale, display;
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .\!dropdown[popover], .\!dropdown .dropdown-content {
    animation: dropdown 0.2s !important;
    transition-property: opacity, scale, display !important;
    transition-behavior: allow-discrete !important;
    transition-duration: 0.2s !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

@starting-style {
  .\!dropdown[popover], .\!dropdown .dropdown-content {
    scale: 95% !important;
    opacity: 0 !important;
  }

  .dropdown[popover], .dropdown .dropdown-content {
    scale: 95%;
    opacity: 0;
  }

  .\!dropdown[popover], .\!dropdown .dropdown-content {
    scale: 95% !important;
    opacity: 0 !important;
  }
}

.\!dropdown.dropdown-open > [tabindex]:first-child, .\!dropdown:not(.dropdown-hover):focus > [tabindex]:first-child, .\!dropdown:focus-within > [tabindex]:first-child {
  pointer-events: none !important;
}

.dropdown.dropdown-open > [tabindex]:first-child, .dropdown:not(.dropdown-hover):focus > [tabindex]:first-child, .dropdown:focus-within > [tabindex]:first-child {
  pointer-events: none;
}

.\!dropdown.dropdown-open > [tabindex]:first-child, .\!dropdown:not(.dropdown-hover):focus > [tabindex]:first-child, .\!dropdown:focus-within > [tabindex]:first-child {
  pointer-events: none !important;
}

.\!dropdown.dropdown-open .dropdown-content, .\!dropdown:not(.dropdown-hover):focus .dropdown-content, .\!dropdown:focus-within .dropdown-content {
  opacity: 100% !important;
}

.dropdown.dropdown-open .dropdown-content, .dropdown:not(.dropdown-hover):focus .dropdown-content, .dropdown:focus-within .dropdown-content {
  opacity: 100%;
}

.\!dropdown.dropdown-open .dropdown-content, .\!dropdown:not(.dropdown-hover):focus .dropdown-content, .\!dropdown:focus-within .dropdown-content {
  opacity: 100% !important;
}

.\!dropdown.dropdown-hover:hover .dropdown-content {
  opacity: 100% !important;
  scale: 100% !important;
}

.dropdown.dropdown-hover:hover .dropdown-content {
  opacity: 100%;
  scale: 100%;
}

.\!dropdown:is(details) summary::-webkit-details-marker {
  display: none !important;
}

.dropdown:is(details) summary::-webkit-details-marker {
  display: none;
}

.\!dropdown.dropdown-open .dropdown-content, .\!dropdown:focus .dropdown-content, .\!dropdown:focus-within .dropdown-content {
  scale: 100% !important;
}

.dropdown.dropdown-open .dropdown-content, .dropdown:focus .dropdown-content, .dropdown:focus-within .dropdown-content {
  scale: 100%;
}

.\!dropdown.dropdown-open .dropdown-content, .\!dropdown:focus .dropdown-content, .\!dropdown:focus-within .dropdown-content {
  scale: 100% !important;
}

.\!dropdown:where([popover]) {
  background: #0000 !important;
}

.dropdown:where([popover]) {
  background: #0000;
}

.\!dropdown[popover] {
  position: fixed !important;
  color: inherit !important;
}

.dropdown[popover] {
  position: fixed;
  color: inherit;
}

@supports not (position-area: bottom) {
  .\!dropdown[popover] {
    margin: auto !important;
  }

  .\!dropdown[popover].dropdown-open:not(:popover-open) {
    display: none !important;
    transform-origin: top !important;
    opacity: 0% !important;
    scale: 95% !important;
  }

  .\!dropdown[popover]::backdrop {
    background-color: color-mix(in oklab, #000 30%, #0000) !important;
  }

  .dropdown[popover] {
    margin: auto;
  }

  .dropdown[popover].dropdown-open:not(:popover-open) {
    display: none;
    transform-origin: top;
    opacity: 0%;
    scale: 95%;
  }

  .dropdown[popover]::backdrop {
    background-color: color-mix(in oklab, #000 30%, #0000);
  }

  .\!dropdown[popover] {
    margin: auto !important;
  }

  .\!dropdown[popover].dropdown-open:not(:popover-open) {
    display: none !important;
    transform-origin: top !important;
    opacity: 0% !important;
    scale: 95% !important;
  }

  .\!dropdown[popover]::backdrop {
    background-color: color-mix(in oklab, #000 30%, #0000) !important;
  }

  .\!dropdown[popover] {
    margin: auto !important;
  }

  .\!dropdown[popover].dropdown-open:not(:popover-open) {
    display: none !important;
    transform-origin: top !important;
    opacity: 0% !important;
    scale: 95% !important;
  }

  .\!dropdown[popover]::backdrop {
    background-color: color-mix(in oklab, #000 30%, #0000) !important;
  }
}

.\!dropdown[popover]:not(.dropdown-open, :popover-open) {
  display: none !important;
  transform-origin: top !important;
  opacity: 0% !important;
  scale: 95% !important;
}

.dropdown[popover]:not(.dropdown-open, :popover-open) {
  display: none;
  transform-origin: top;
  opacity: 0%;
  scale: 95%;
}

.dropdown-start :where(.dropdown-content) {
  inset-inline-end: auto;
  translate: 0 0;
}

[dir="rtl"] .dropdown-start :where(.dropdown-content) {
  translate: 0 0;
}

.dropdown-start.dropdown-left .dropdown-content {
  top: calc(0.25rem * 0);
  bottom: auto;
}

.dropdown-start.dropdown-right .dropdown-content {
  top: calc(0.25rem * 0);
  bottom: auto;
}

.dropdown-center :where(.dropdown-content) {
  inset-inline-end: calc(1/2 * 100%);
  translate: 50% 0;
}

[dir="rtl"] .dropdown-center :where(.dropdown-content) {
  translate: -50% 0;
}

.dropdown-center.dropdown-left .dropdown-content {
  top: auto;
  bottom: calc(1/2 * 100%);
  translate: 0 50%;
}

.dropdown-center.dropdown-right .dropdown-content {
  top: auto;
  bottom: calc(1/2 * 100%);
  translate: 0 50%;
}

.dropdown-end {
  --anchor-h: span-left;
}

.dropdown-end :where(.dropdown-content) {
  inset-inline-end: calc(0.25rem * 0);
  translate: 0 0;
}

[dir="rtl"] .dropdown-end :where(.dropdown-content) {
  translate: 0 0;
}

.dropdown-end.dropdown-left {
  --anchor-h: left;
  --anchor-v: span-top;
}

.dropdown-end.dropdown-left .dropdown-content {
  top: auto;
  bottom: calc(0.25rem * 0);
}

.dropdown-end.dropdown-right {
  --anchor-h: right;
  --anchor-v: span-top;
}

.dropdown-end.dropdown-right .dropdown-content {
  top: auto;
  bottom: calc(0.25rem * 0);
}

.dropdown-left .dropdown-content {
  inset-inline-end: 100%;
  top: calc(0.25rem * 0);
  bottom: auto;
  transform-origin: right;
}

.dropdown-right .dropdown-content {
  inset-inline-start: 100%;
  top: calc(0.25rem * 0);
  bottom: auto;
  transform-origin: left;
}

.dropdown-bottom .dropdown-content {
  top: 100%;
  bottom: auto;
  transform-origin: top;
}

.dropdown-top .dropdown-content {
  top: auto;
  bottom: 100%;
  transform-origin: bottom;
}

@keyframes dropdown {
  0% {
    opacity: 0;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  --tabs-height: auto;
  --tabs-direction: row;
  --tab-height: calc(var(--size-field, 0.25rem) * 10);
  height: var(--tabs-height);
  flex-direction: var(--tabs-direction);
}

.tab {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  webkit-user-select: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@media (hover: hover) {
  .tab:hover {
    color: var(--color-base-content);
  }
}

.tab {
  --tab-p: 1rem;
  --tab-bg: var(--color-base-100);
  --tab-border-color: var(--color-base-300);
  --tab-radius-ss: 0;
  --tab-radius-se: 0;
  --tab-radius-es: 0;
  --tab-radius-ee: 0;
  --tab-order: 0;
  --tab-radius-min: calc(0.75rem - var(--border));
  border-color: #0000;
  order: var(--tab-order);
  height: var(--tab-height);
  font-size: 0.875rem;
  padding-inline-start: var(--tab-p);
  padding-inline-end: var(--tab-p);
}

.tab:is(input[type="radio"]) {
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.tab:is(input[type="radio"]):after {
  content: attr(aria-label);
}

.tab:is(label) {
  position: relative;
}

.tab:is(label) input {
  position: absolute;
  inset: calc(0.25rem * 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0%;
}

.tab:checked + .tab-content, .tab:is(label:has(:checked)) + .tab-content, .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content {
  display: block;
  height: calc(100% - var(--tab-height) + var(--border));
}

.tab:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

.tab:not(input):empty {
  flex-grow: 1;
  cursor: default;
}

.tab:focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .tab:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.tab:focus-visible, .tab:is(label:has(:checked:focus-visible)) {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.tab[disabled] {
  pointer-events: none;
  opacity: 40%;
}

.tabs-border .tab {
  --tab-border-color: #0000 #0000 var(--tab-border-color) #0000;
  position: relative;
  border-radius: var(--radius-field);
}

.tabs-border .tab:before {
  --tw-content: "";
  content: var(--tw-content);
  background-color: var(--tab-border-color);
  transition: background-color 0.2s ease;
  width: 80%;
  height: 3px;
  border-radius: var(--radius-field);
  bottom: 0;
  left: 10%;
  position: absolute;
}

.tabs-border .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):before, .tabs-border .tab:is(input:checked):before, .tabs-border .tab:is(label:has(:checked)):before {
  --tab-border-color: currentColor;
  border-top: 3px solid;
}

.tabs-lift > .tab {
  --tab-border: 0 0 var(--border) 0;
  --tab-radius-ss: min(var(--radius-field), var(--tab-radius-min));
  --tab-radius-se: min(var(--radius-field), var(--tab-radius-min));
  --tab-radius-es: 0;
  --tab-radius-ee: 0;
  --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
  --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
  --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2);
  --tab-corner-height: min(var(--radius-field), var(--tab-radius-min));
  --tab-corner-position: top left, top right;
  border-width: var(--tab-border);
  border-start-start-radius: var(--tab-radius-ss);
  border-start-end-radius: var(--tab-radius-se);
  border-end-start-radius: var(--tab-radius-es);
  border-end-end-radius: var(--tab-radius-ee);
  padding: var(--tab-paddings);
  border-color: var(--tab-border-colors);
}

.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), .tabs-lift > .tab:is(input:checked, label:has(:checked)) {
  --tab-border: var(--border) var(--border) 0 var(--border);
  --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
        var(--tab-border-color);
  --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
        calc(var(--tab-p) - var(--border));
  --tab-inset: auto auto 0 auto;
  --tab-grad: calc(69% - var(--border));
  --radius-start: radial-gradient(
        circle at top left,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
  --radius-end: radial-gradient(
        circle at top right,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
  background-color: var(--tab-bg);
}

.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):before, .tabs-lift > .tab:is(input:checked, label:has(:checked)):before {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  width: var(--tab-corner-width);
  height: var(--tab-corner-height);
  background-position: var(--tab-corner-position);
  background-image: var(--radius-start), var(--radius-end);
  background-size: min(var(--radius-field), var(--tab-radius-min)) min(var(--radius-field), var(--tab-radius-min));
  background-repeat: no-repeat;
  inset: var(--tab-inset);
}

.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):first-child:before, .tabs-lift > .tab:is(input:checked, label:has(:checked)):first-child:before {
  --radius-start: none;
}

[dir="rtl"] .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):first-child:before, [dir="rtl"] .tabs-lift > .tab:is(input:checked, label:has(:checked)):first-child:before {
  transform: rotateY(180deg);
}

.tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):last-child:before, .tabs-lift > .tab:is(input:checked, label:has(:checked)):last-child:before {
  --radius-end: none;
}

[dir="rtl"] .tabs-lift > .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ):last-child:before, [dir="rtl"] .tabs-lift > .tab:is(input:checked, label:has(:checked)):last-child:before {
  transform: rotateY(180deg);
}

.tabs-lift:has(> .tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
          var(--tab-border-color);
}

.tabs-lift > .tab-content {
  --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
  --tabcontent-radius-ss: 0;
  --tabcontent-radius-se: var(--radius-box);
  --tabcontent-radius-es: var(--radius-box);
  --tabcontent-radius-ee: var(--radius-box);
}

.tabs-lift :checked + .tab-content:nth-child(1), .tabs-lift :checked + .tab-content:nth-child(n + 3), .tabs-lift label:has(:checked) + .tab-content:nth-child(1), .tabs-lift label:has(:checked) + .tab-content:nth-child(n + 3), .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(1), .tabs-lift :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(n + 3) {
  --tabcontent-radius-ss: var(--radius-box);
}

.tabs-top .tab {
  --tab-order: 0;
  --tab-border: 0 0 var(--border) 0;
  --tab-radius-ss: min(var(--radius-field), var(--tab-radius-min));
  --tab-radius-se: min(var(--radius-field), var(--tab-radius-min));
  --tab-radius-es: 0;
  --tab-radius-ee: 0;
  --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);
  --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;
  --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2);
  --tab-corner-height: min(var(--radius-field), var(--tab-radius-min));
  --tab-corner-position: top left, top right;
}

.tabs-top .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), .tabs-top .tab:is(input:checked), .tabs-top .tab:is(label:has(:checked)) {
  --tab-border: var(--border) var(--border) 0 var(--border);
  --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
        var(--tab-border-color);
  --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)
        calc(var(--tab-p) - var(--border));
  --tab-inset: auto auto 0 auto;
  --radius-start: radial-gradient(
        circle at top left,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
  --radius-end: radial-gradient(
        circle at top right,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
}

.tabs-top:has(.tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000
          var(--tab-border-color);
}

.tabs-top .tab-content {
  --tabcontent-order: 1;
  --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;
  --tabcontent-radius-ss: 0;
  --tabcontent-radius-se: var(--radius-box);
  --tabcontent-radius-es: var(--radius-box);
  --tabcontent-radius-ee: var(--radius-box);
}

.tabs-top :checked + .tab-content:nth-child(1), .tabs-top :checked + .tab-content:nth-child(n + 3), .tabs-top label:has(:checked) + .tab-content:nth-child(1), .tabs-top label:has(:checked) + .tab-content:nth-child(n + 3), .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(1), .tabs-top :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:nth-child(n + 3) {
  --tabcontent-radius-ss: var(--radius-box);
}

.tabs-bottom .tab {
  --tab-order: 1;
  --tab-border: var(--border) 0 0 0;
  --tab-radius-ss: 0;
  --tab-radius-se: 0;
  --tab-radius-es: min(var(--radius-field), var(--tab-radius-min));
  --tab-radius-ee: min(var(--radius-field), var(--tab-radius-min));
  --tab-border-colors: var(--tab-border-color) #0000 #0000 #0000;
  --tab-paddings: 0 var(--tab-p) var(--border) var(--tab-p);
  --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2);
  --tab-corner-height: min(var(--radius-field), var(--tab-radius-min));
  --tab-corner-position: top left, top right;
}

.tabs-bottom .tab:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), .tabs-bottom .tab:is(input:checked), .tabs-bottom .tab:is(label:has(:checked)) {
  --tab-border: 0 var(--border) var(--border) var(--border);
  --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color)
        var(--tab-border-color);
  --tab-paddings: var(--border) calc(var(--tab-p) - var(--border)) 0
        calc(var(--tab-p) - var(--border));
  --tab-inset: 0 auto auto auto;
  --radius-start: radial-gradient(
        circle at bottom left,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
  --radius-end: radial-gradient(
        circle at bottom right,
        #0000 var(--tab-grad),
        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),
        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)
      );
}

.tabs-bottom:has(.tab-content) > .tab:first-child:not(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
  --tab-border-colors: #0000 var(--tab-border-color) var(--tab-border-color)
          var(--tab-border-color);
}

.tabs-bottom .tab-content {
  --tabcontent-order: 0;
  --tabcontent-margin: 0 0 calc(-1 * var(--border)) 0;
  --tabcontent-radius-ss: var(--radius-box);
  --tabcontent-radius-se: var(--radius-box);
  --tabcontent-radius-es: 0;
  --tabcontent-radius-ee: var(--radius-box);
}

.tabs-bottom > :checked + .tab-content:not(:nth-child(2)), .tabs-bottom > :is(label:has(:checked)) + .tab-content:not(:nth-child(2)), .tabs-bottom > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) + .tab-content:not(:nth-child(2)) {
  --tabcontent-radius-es: var(--radius-box);
}

.tabs-box .tab {
  border-radius: var(--radius-field);
  border-style: none;
}

.tabs-box .tab:focus-visible, .tabs-box .tab:is(label:has(:checked:focus-visible)) {
  outline-offset: 2px;
}

.tabs-box > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), .tabs-box > :is(input:checked), .tabs-box > :is(label:has(:checked)) {
  background-color: var(--tab-bg, var(--color-base-100));
  box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
}

@media (forced-colors: active) {
  .tabs-box > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), .tabs-box > :is(input:checked), .tabs-box > :is(label:has(:checked)) {
    border: 1px solid;
  }
}

.tabs-box .tab-content {
  margin-top: calc(0.25rem * 1);
  border-radius: calc( min(calc(var(--tab-height) / 2), var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) - var(--border) );
}

.tab-content {
  order: 1;
  order: var(--tabcontent-order);
  display: none;
  border-color: transparent;
  --tabcontent-radius-ss: var(--radius-box);
  --tabcontent-radius-se: var(--radius-box);
  --tabcontent-radius-es: var(--radius-box);
  --tabcontent-radius-ee: var(--radius-box);
  --tabcontent-order: 1;
  width: 100%;
  margin: var(--tabcontent-margin);
  border-width: var(--border);
  border-start-start-radius: var(--tabcontent-radius-ss);
  border-start-end-radius: var(--tabcontent-radius-se);
  border-end-start-radius: var(--tabcontent-radius-es);
  border-end-end-radius: var(--tabcontent-radius-ee);
}

.tabs-xs :where(.tab) {
  font-size: 0.75rem;
  --tab-p: 0.375rem;
  --tab-radius-min: calc(0.5rem - var(--border));
}

.tabs-sm :where(.tab) {
  font-size: 0.875rem;
  --tab-p: 0.5rem;
  --tab-radius-min: calc(0.5rem - var(--border));
}

.tabs-md :where(.tab) {
  font-size: 0.875rem;
  --tab-p: 0.75rem;
  --tab-radius-min: calc(0.75rem - var(--border));
}

.tabs-lg :where(.tab) {
  font-size: 1.125rem;
  --tab-p: 1rem;
  --tab-radius-min: calc(1.5rem - var(--border));
}

.tabs-xl :where(.tab) {
  font-size: 1.125rem;
  --tab-p: 1.25rem;
  --tab-radius-min: calc(2rem - var(--border));
}

.\!modal {
  pointer-events: none !important;
  visibility: hidden !important;
  position: fixed !important;
  inset: calc(0.25rem * 0) !important;
  margin: calc(0.25rem * 0) !important;
  display: grid !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  align-items: center !important;
  justify-items: center !important;
  background-color: transparent !important;
  padding: calc(0.25rem * 0) !important;
  color: inherit !important;
  overflow-x: hidden !important;
  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain !important;
  z-index: 999 !important;
  scrollbar-gutter: auto !important;
}

.modal {
  pointer-events: none;
  visibility: hidden;
  position: fixed;
  inset: calc(0.25rem * 0);
  margin: calc(0.25rem * 0);
  display: grid;
  height: 100%;
  max-height: none;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-items: center;
  background-color: transparent;
  padding: calc(0.25rem * 0);
  color: inherit;
  overflow-x: hidden;
  transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
  overflow-y: hidden;
  overscroll-behavior: contain;
  z-index: 999;
  scrollbar-gutter: auto;
}

.\!modal::backdrop {
  display: none !important;
}

.modal::backdrop {
  display: none;
}

.\!modal.modal-open, .\!modal[open], .\!modal:target {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 100% !important;
  background-color: oklch(0% 0 0/ 0.4) !important;
}

.modal.modal-open, .modal[open], .modal:target {
  pointer-events: auto;
  visibility: visible;
  opacity: 100%;
  background-color: oklch(0% 0 0/ 0.4);
}

.\!modal.modal-open, .\!modal[open], .\!modal:target {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 100% !important;
  background-color: oklch(0% 0 0/ 0.4) !important;
}

.\!modal.modal-open .modal-box, .\!modal[open] .modal-box, .\!modal:target .modal-box {
  translate: 0 0 !important;
  scale: 1 !important;
  opacity: 1 !important;
}

.modal.modal-open .modal-box, .modal[open] .modal-box, .modal:target .modal-box {
  translate: 0 0;
  scale: 1;
  opacity: 1;
}

.\!modal.modal-open .modal-box, .\!modal[open] .modal-box, .\!modal:target .modal-box {
  translate: 0 0 !important;
  scale: 1 !important;
  opacity: 1 !important;
}

@starting-style {
  .\!modal.modal-open, .\!modal[open], .\!modal:target {
    visibility: hidden !important;
    opacity: 0% !important;
  }

  .modal.modal-open, .modal[open], .modal:target {
    visibility: hidden;
    opacity: 0%;
  }

  .\!modal.modal-open, .\!modal[open], .\!modal:target {
    visibility: hidden !important;
    opacity: 0% !important;
  }
}

.modal-action {
  margin-top: calc(0.25rem * 6);
  display: flex;
  justify-content: flex-end;
  gap: calc(0.25rem * 2);
}

.modal-toggle:checked + .\!modal {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 100% !important;
  background-color: oklch(0% 0 0/ 0.4) !important;
}

.modal-toggle:checked + .modal {
  pointer-events: auto;
  visibility: visible;
  opacity: 100%;
  background-color: oklch(0% 0 0/ 0.4);
}

.modal-toggle:checked + .\!modal .modal-box {
  translate: 0 0 !important;
  scale: 1 !important;
  opacity: 1 !important;
}

.modal-toggle:checked + .modal .modal-box {
  translate: 0 0;
  scale: 1;
  opacity: 1;
}

@starting-style {
  .modal-toggle:checked + .\!modal {
    visibility: hidden !important;
    opacity: 0% !important;
  }

  .modal-toggle:checked + .modal {
    visibility: hidden;
    opacity: 0%;
  }
}

.modal-backdrop {
  grid-column-start: 1;
  grid-row-start: 1;
  display: grid;
  align-self: stretch;
  justify-self: stretch;
  color: transparent;
  z-index: -1;
}

.modal-backdrop button {
  cursor: pointer;
}

.modal-box {
  grid-column-start: 1;
  grid-row-start: 1;
  max-height: 100vh;
  width: calc(11/12 * 100%);
  max-width: 32rem;
  background-color: var(--color-base-100);
  padding: calc(0.25rem * 6);
  transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;
  border-top-left-radius: var(--modal-tl, var(--radius-box));
  border-top-right-radius: var(--modal-tr, var(--radius-box));
  border-bottom-left-radius: var(--modal-bl, var(--radius-box));
  border-bottom-right-radius: var(--modal-br, var(--radius-box));
  scale: 95%;
  opacity: 0;
  box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-top :where(.modal-box) {
  height: auto;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 5em);
  translate: 0 -100%;
  scale: 1;
  --modal-tl: 0;
  --modal-tr: 0;
  --modal-bl: var(--radius-box);
  --modal-br: var(--radius-box);
}

.modal-middle :where(.modal-box) {
  height: auto;
  width: calc(11/12 * 100%);
  max-width: 32rem;
  max-height: calc(100vh - 5em);
  translate: 0 2%;
  scale: 98%;
  --modal-tl: var(--radius-box);
  --modal-tr: var(--radius-box);
  --modal-bl: var(--radius-box);
  --modal-br: var(--radius-box);
}

.modal-bottom :where(.modal-box) {
  height: auto;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 5em);
  translate: 0 100%;
  scale: 1;
  --modal-tl: var(--radius-box);
  --modal-tr: var(--radius-box);
  --modal-bl: 0;
  --modal-br: 0;
}

.modal-start :where(.modal-box) {
  height: 100vh;
  max-height: none;
  width: auto;
  max-width: none;
  translate: -100% 0;
  scale: 1;
  --modal-tl: 0;
  --modal-tr: var(--radius-box);
  --modal-bl: 0;
  --modal-br: var(--radius-box);
}

.modal-end :where(.modal-box) {
  height: 100vh;
  max-height: none;
  width: auto;
  max-width: none;
  translate: 100% 0;
  scale: 1;
  --modal-tl: var(--radius-box);
  --modal-tr: 0;
  --modal-bl: var(--radius-box);
  --modal-br: 0;
}

.radial-progress {
  position: relative;
  display: inline-grid;
  height: var(--size);
  width: var(--size);
  place-content: center;
  border-radius: calc(infinity * 1px);
  background-color: transparent;
  vertical-align: middle;
  box-sizing: content-box;
  --value: 0;
  --size: 5rem;
  --thickness: calc(var(--size) / 10);
  --radialprogress: calc(var(--value) * 1%);
  transition: --radialprogress 0.3s linear;
}

.radial-progress:before {
  position: absolute;
  inset: calc(0.25rem * 0);
  border-radius: calc(infinity * 1px);
  content: "";
  background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness) no-repeat, conic-gradient(currentColor var(--radialprogress), #0000 0);
  webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) );
  -webkit-mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) );
          mask: radial-gradient( farthest-side, #0000 calc(100% - var(--thickness)), #000 calc(100% + 0.5px - var(--thickness)) );
}

.radial-progress:after {
  position: absolute;
  border-radius: calc(infinity * 1px);
  background-color: currentcolor;
  transition: transform 0.3s linear;
  content: "";
  inset: calc(50% - var(--thickness) / 2);
  transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size) / 2 - 50%));
}

.\!checkbox {
  border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)) !important;
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  border-radius: var(--radius-selector) !important;
  padding: calc(0.25rem * 1) !important;
  vertical-align: middle !important;
  color: var(--color-base-content) !important;
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000 !important;
  transition: background-color 0.2s, box-shadow 0.2s !important;
  --size: calc(var(--size-selector, 0.25rem) * 6) !important;
  width: var(--size) !important;
  height: var(--size) !important;
  background-size: auto, calc(var(--noise) * 100%) !important;
  background-image: none, var(--fx-noise) !important;
}

.checkbox {
  border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--radius-selector);
  padding: calc(0.25rem * 1);
  vertical-align: middle;
  color: var(--color-base-content);
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;
  transition: background-color 0.2s, box-shadow 0.2s;
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: var(--size);
  height: var(--size);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
}

.\!checkbox:before {
  --tw-content: "" !important;
  content: var(--tw-content) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  rotate: 45deg !important;
  background-color: currentcolor !important;
  opacity: 0% !important;
  transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s !important;
  transition-delay: 0.1s !important;
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%) !important;
  box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
  font-size: 1rem !important;
  line-height: 0.75 !important;
}

.checkbox:before {
  --tw-content: "";
  content: var(--tw-content);
  display: block;
  width: 100%;
  height: 100%;
  rotate: 45deg;
  background-color: currentcolor;
  opacity: 0%;
  transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;
  transition-delay: 0.1s;
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
  box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  font-size: 1rem;
  line-height: 0.75;
}

.\!checkbox:focus-visible {
  outline: 2px solid var(--input-color, currentColor) !important;
  outline-offset: 2px !important;
}

.checkbox:focus-visible {
  outline: 2px solid var(--input-color, currentColor);
  outline-offset: 2px;
}

.\!checkbox:checked, .\!checkbox[aria-checked="true"] {
  background-color: var(--input-color, #0000) !important;
  box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) !important;
}

.checkbox:checked, .checkbox[aria-checked="true"] {
  background-color: var(--input-color, #0000);
  box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
}

.\!checkbox:checked, .\!checkbox[aria-checked="true"] {
  background-color: var(--input-color, #0000) !important;
  box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) !important;
}

.\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%) !important;
  opacity: 100% !important;
}

.checkbox:checked:before, .checkbox[aria-checked="true"]:before {
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
  opacity: 100%;
}

.\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%) !important;
  opacity: 100% !important;
}

@media (forced-colors: active) {
  .\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
    rotate: 0deg !important;
    background-color: transparent !important;
    --tw-content: "✔︎" !important;
    clip-path: none !important;
  }

  .checkbox:checked:before, .checkbox[aria-checked="true"]:before {
    rotate: 0deg;
    background-color: transparent;
    --tw-content: "✔︎";
    clip-path: none;
  }

  .\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
    rotate: 0deg !important;
    background-color: transparent !important;
    --tw-content: "✔︎" !important;
    clip-path: none !important;
  }
}

@media print {
  .\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
    rotate: 0deg !important;
    background-color: transparent !important;
    --tw-content: "✔︎" !important;
    clip-path: none !important;
  }

  .checkbox:checked:before, .checkbox[aria-checked="true"]:before {
    rotate: 0deg;
    background-color: transparent;
    --tw-content: "✔︎";
    clip-path: none;
  }

  .\!checkbox:checked:before, .\!checkbox[aria-checked="true"]:before {
    rotate: 0deg !important;
    background-color: transparent !important;
    --tw-content: "✔︎" !important;
    clip-path: none !important;
  }
}

.\!checkbox:indeterminate {
  background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)) !important;
}

.checkbox:indeterminate {
  background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
}

.\!checkbox:indeterminate:before {
  rotate: 0deg !important;
  opacity: 100% !important;
  translate: 0 -35% !important;
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%) !important;
}

.checkbox:indeterminate:before {
  rotate: 0deg;
  opacity: 100%;
  translate: 0 -35%;
  clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
}

.\!checkbox:disabled {
  cursor: not-allowed !important;
  opacity: 20% !important;
}

.checkbox:disabled {
  cursor: not-allowed;
  opacity: 20%;
}

.checkbox-sm {
  padding: 0.1875rem;
  --size: calc(var(--size-selector, 0.25rem) * 5);
}

.select {
  border: var(--border) solid #0000;
  position: relative;
  display: inline-flex;
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  align-items: center;
  gap: calc(0.25rem * 1.5);
  background-color: var(--color-base-100);
  padding-inline-start: calc(0.25rem * 3);
  padding-inline-end: calc(0.25rem * 7);
  vertical-align: middle;
  width: clamp(3rem, 20rem, 100%);
  height: var(--size);
  font-size: 0.875rem;
  touch-action: manipulation;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  border-color: var(--input-color);
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
  --size: calc(var(--size-field, 0.25rem) * 10);
}

[dir="rtl"] .select {
  background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
}

.select:where([multiple]) {
  height: auto;
  padding-block: calc(0.25rem * 3);
  padding-inline-end: calc(0.25rem * 3);
  background-image: none;
}

.select select {
  margin-inline-start: calc(0.25rem * -3);
  margin-inline-end: calc(0.25rem * -7);
  width: calc(100% + 2.75rem);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-inline-start: calc(0.25rem * 3);
  padding-inline-end: calc(0.25rem * 7);
  height: calc(100% - calc(var(--border) * 2));
  align-items: center;
  background: inherit;
  border-radius: inherit;
  border-style: none;
}

.select select:focus, .select select:focus-within {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .select select:focus, .select select:focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.select select:not(:last-child) {
  margin-inline-end: calc(0.25rem * -5.5);
  background-image: none;
}

.select:focus, .select:focus-within {
  --input-color: var(--color-base-content);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
  outline: 2px solid var(--input-color);
  outline-offset: 2px;
  isolation: isolate;
  z-index: 1;
}

.select:has(> select[disabled]), .select:is(:disabled, [disabled]), fieldset:disabled .select {
  cursor: not-allowed;
  border-color: var(--color-base-200);
  background-color: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

.select:has(> select[disabled])::-moz-placeholder, .select:is(:disabled, [disabled])::-moz-placeholder, fieldset:disabled .select::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.select:has(> select[disabled])::placeholder, .select:is(:disabled, [disabled])::placeholder, fieldset:disabled .select::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.select:has(> select[disabled]) > select[disabled] {
  cursor: not-allowed;
}

@supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)) {
  .select, .select select {
    -webkit-appearance: base-select;
       -moz-appearance: base-select;
            appearance: base-select;
  }

  .select::picker(select), .select select::picker(select) {
    -webkit-appearance: base-select;
       -moz-appearance: base-select;
            appearance: base-select;
  }
}

.select::picker(select), .select select::picker(select) {
  color: inherit;
  max-height: min(24rem, 70dvh);
  border: var(--border) solid var(--color-base-200);
  margin-block: calc(0.25rem * 2);
  border-radius: var(--radius-box);
  padding: calc(0.25rem * 2);
  background-color: inherit;
  box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
}

.select::picker-icon, .select select::picker-icon {
  display: none;
}

.select optgroup, .select select optgroup {
  padding-top: 0.5em;
}

.select optgroup option:nth-child(1), .select select optgroup option:nth-child(1) {
  margin-top: 0.5em;
}

.select option, .select select option {
  border-radius: var(--radius-field);
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 1.5);
  transition-property: color, background-color;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
  cursor: pointer;
  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .select option:not(:disabled):hover, .select option:not(:disabled):focus-visible, .select select option:not(:disabled):hover, .select select option:not(:disabled):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.select option:not(:disabled):active, .select select option:not(:disabled):active {
  background-color: var(--color-neutral);
  color: var(--color-neutral-content);
  box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
}

.select-sm {
  --size: calc(var(--size-field, 0.25rem) * 8);
  font-size: 0.75rem;
}

.select-sm option {
  padding-inline: calc(0.25rem * 2.5);
  padding-block: calc(0.25rem * 1);
}

.radio {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: calc(infinity * 1px);
  padding: calc(0.25rem * 1);
  vertical-align: middle;
  border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000));
  box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset;
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: var(--size);
  height: var(--size);
  color: var(--input-color, currentColor);
}

.radio:before {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(infinity * 1px);
  --tw-content: "";
  content: var(--tw-content);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
}

.radio:focus-visible {
  outline: 2px solid currentColor;
}

.radio:checked, .radio[aria-checked="true"] {
  border-color: currentcolor;
  background-color: var(--color-base-100);
}

@media (prefers-reduced-motion: no-preference) {
  .radio:checked, .radio[aria-checked="true"] {
    animation: radio 0.2s ease-out;
  }
}

.radio:checked:before, .radio[aria-checked="true"]:before {
  background-color: currentcolor;
  box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
}

@media (forced-colors: active) {
  .radio:checked:before, .radio[aria-checked="true"]:before {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: calc(1px * -1);
  }
}

@media print {
  .radio:checked:before, .radio[aria-checked="true"]:before {
    outline: 0.25rem solid;
    outline-offset: -1rem;
  }
}

.radio:disabled {
  cursor: not-allowed;
  opacity: 20%;
}

@keyframes radio {
  0% {
    padding: 5px;
  }

  50% {
    padding: 3px;
  }
}

.avatar-group :where(.avatar) {
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  border: 4px solid var(--color-base-100);
}

.avatar {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.avatar > div {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.toast {
  position: fixed;
  inset-inline-start: auto;
  inset-inline-end: calc(0.25rem * 4);
  top: auto;
  bottom: calc(0.25rem * 4);
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem * 2);
  background-color: transparent;
  translate: var(--toast-x, 0) var(--toast-y, 0);
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 2rem);
}

@media (prefers-reduced-motion: no-preference) {
  .toast > * {
    animation: toast 0.25s ease-out;
  }
}

.toast:where(.toast-start) {
  inset-inline-start: calc(0.25rem * 4);
  inset-inline-end: auto;
  --toast-x: 0;
}

.toast:where(.toast-center) {
  inset-inline-start: calc(1/2 * 100%);
  inset-inline-end: calc(1/2 * 100%);
  --toast-x: -50%;
}

.toast:where(.toast-end) {
  inset-inline-start: auto;
  inset-inline-end: calc(0.25rem * 4);
  --toast-x: 0;
}

.toast:where(.toast-bottom) {
  top: auto;
  bottom: calc(0.25rem * 4);
  --toast-y: 0;
}

.toast:where(.toast-middle) {
  top: calc(1/2 * 100%);
  bottom: auto;
  --toast-y: -50%;
}

.toast:where(.toast-top) {
  top: calc(0.25rem * 4);
  bottom: auto;
  --toast-y: 0;
}

@keyframes toast {
  0% {
    scale: 0.9;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

.mockup-browser .mockup-browser-toolbar .\!input {
  margin-inline: auto !important;
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
  gap: calc(0.25rem * 2) !important;
  overflow: hidden !important;
  background-color: var(--color-base-200) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  direction: ltr !important;
}

.mockup-browser .mockup-browser-toolbar .input {
  margin-inline: auto;
  display: flex;
  height: 100%;
  align-items: center;
  gap: calc(0.25rem * 2);
  overflow: hidden;
  background-color: var(--color-base-200);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  direction: ltr;
}

.mockup-browser .mockup-browser-toolbar .\!input:before {
  content: "" !important;
  width: calc(0.25rem * 4) !important;
  height: calc(0.25rem * 4) !important;
  opacity: 50% !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center !important;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
}

.mockup-browser .mockup-browser-toolbar .input:before {
  content: "";
  width: calc(0.25rem * 4);
  height: calc(0.25rem * 4);
  opacity: 50%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.divider {
  display: flex;
  height: calc(0.25rem * 4);
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  white-space: nowrap;
  margin: var(--divider-m, 1rem 0);
  --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

.divider:before, .divider:after {
  content: "";
  height: calc(0.25rem * 0.5);
  width: 100%;
  flex-grow: 1;
  background-color: var(--divider-color);
}

@media print {
  .divider:before, .divider:after {
    border: 0.5px solid;
  }
}

.divider:not(:empty) {
  gap: calc(0.25rem * 4);
}

.divider-horizontal.divider {
  height: auto;
  width: calc(0.25rem * 4);
  flex-direction: column;
}

.divider-horizontal.divider:before {
  height: 100%;
  width: calc(0.25rem * 0.5);
}

.divider-horizontal.divider:after {
  height: 100%;
  width: calc(0.25rem * 0.5);
}

.divider-vertical.divider {
  height: calc(0.25rem * 4);
  width: auto;
  flex-direction: row;
}

.divider-vertical.divider:before {
  height: calc(0.25rem * 0.5);
  width: 100%;
}

.divider-vertical.divider:after {
  height: calc(0.25rem * 0.5);
  width: 100%;
}

:where(.\!btn) {
  width: unset !important;
}

:where(.btn) {
  width: unset;
}

.\!btn {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(0.25rem * 1.5) !important;
  text-align: center !important;
  vertical-align: middle !important;
  outline-offset: 2px !important;
  webkit-user-select: none !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  padding-inline: var(--btn-p) !important;
  color: var(--btn-fg) !important;
  --tw-prose-links: var(--btn-fg) !important;
  height: var(--size) !important;
  font-size: var(--fontsize, 0.875rem) !important;
  font-weight: 600 !important;
  outline-color: var(--btn-color, var(--color-base-content)) !important;
  transition-property: color, background-color, border-color, box-shadow !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
  transition-duration: 0.2s !important;
  border-start-start-radius: var(--join-ss, var(--radius-field)) !important;
  border-start-end-radius: var(--join-se, var(--radius-field)) !important;
  border-end-start-radius: var(--join-es, var(--radius-field)) !important;
  border-end-end-radius: var(--join-ee, var(--radius-field)) !important;
  background-color: var(--btn-bg) !important;
  background-size: auto, calc(var(--noise) * 100%) !important;
  background-image: none, var(--btn-noise) !important;
  border-width: var(--border) !important;
  border-style: solid !important;
  border-color: var(--btn-border) !important;
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)) !important;
  touch-action: manipulation !important;
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow) !important;
  --size: calc(var(--size-field, 0.25rem) * 10) !important;
  --btn-bg: var(--btn-color, var(--color-base-200)) !important;
  --btn-fg: var(--color-base-content) !important;
  --btn-p: 1rem !important;
  --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)) !important;
  --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000) !important;
  --btn-noise: var(--fx-noise) !important;
}

.btn {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 1.5);
  text-align: center;
  vertical-align: middle;
  outline-offset: 2px;
  webkit-user-select: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-inline: var(--btn-p);
  color: var(--btn-fg);
  --tw-prose-links: var(--btn-fg);
  height: var(--size);
  font-size: var(--fontsize, 0.875rem);
  font-weight: 600;
  outline-color: var(--btn-color, var(--color-base-content));
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 0.2s;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  background-color: var(--btn-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--btn-noise);
  border-width: var(--border);
  border-style: solid;
  border-color: var(--btn-border);
  text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));
  touch-action: manipulation;
  box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);
  --size: calc(var(--size-field, 0.25rem) * 10);
  --btn-bg: var(--btn-color, var(--color-base-200));
  --btn-fg: var(--color-base-content);
  --btn-p: 1rem;
  --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
  --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
  --btn-noise: var(--fx-noise);
}

.prose .\!btn {
  text-decoration-line: none !important;
}

.prose .btn {
  text-decoration-line: none;
}

@media (hover: hover) {
  .\!btn:hover {
    --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%) !important;
  }

  .btn:hover {
    --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
  }
}

.\!btn:focus-visible, .\!btn:has(:focus-visible) {
  outline-width: 2px !important;
  outline-style: solid !important;
  isolation: isolate !important;
}

.btn:focus-visible, .btn:has(:focus-visible) {
  outline-width: 2px;
  outline-style: solid;
  isolation: isolate;
}

.\!btn:focus-visible, .\!btn:has(:focus-visible) {
  outline-width: 2px !important;
  outline-style: solid !important;
  isolation: isolate !important;
}

.\!btn:active:not(.btn-active) {
  translate: 0 0.5px !important;
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%) !important;
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%) !important;
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0) !important;
}

.btn:active:not(.btn-active) {
  translate: 0 0.5px;
  --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);
  --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
  --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
}

.\!btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
  box-shadow: none !important;
}

.btn:is(:disabled, [disabled], .btn-disabled):not(.btn-link, .btn-ghost) {
  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  box-shadow: none;
}

.\!btn:is(:disabled, [disabled], .btn-disabled) {
  pointer-events: none !important;
  --btn-border: #0000 !important;
  --btn-noise: none !important;
  --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000) !important;
}

.btn:is(:disabled, [disabled], .btn-disabled) {
  pointer-events: none;
  --btn-border: #0000;
  --btn-noise: none;
  --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
}

@media (hover: hover) {
  .\!btn:is(:disabled, [disabled], .btn-disabled):hover {
    pointer-events: none !important;
    background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent) !important;
    --btn-border: #0000 !important;
    --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000) !important;
  }

  .btn:is(:disabled, [disabled], .btn-disabled):hover {
    pointer-events: none;
    background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);
    --btn-border: #0000;
    --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);
  }
}

.\!btn:is(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
}

.btn:is(input[type="checkbox"], input[type="radio"]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.\!btn:is(input[type="checkbox"], input[type="radio"])::after {
  content: attr(aria-label) !important;
}

.btn:is(input[type="checkbox"], input[type="radio"])::after {
  content: attr(aria-label);
}

.\!btn:where(input:checked:not(.filter .\!btn)) {
  --btn-color: var(--color-primary) !important;
  --btn-fg: var(--color-primary-content) !important;
  isolation: isolate !important;
}

.btn:where(input:checked:not(.filter .btn)) {
  --btn-color: var(--color-primary);
  --btn-fg: var(--color-primary-content);
  isolation: isolate;
}

.btn-primary {
  --btn-color: var(--color-primary);
  --btn-fg: var(--color-primary-content);
}

.btn-error {
  --btn-color: var(--color-error);
  --btn-fg: var(--color-error-content);
}

.btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible) {
  --btn-shadow: "";
  --btn-bg: #0000;
  --btn-border: #0000;
  --btn-noise: none;
}

.btn-ghost:not(.btn-active, :hover, :active:focus, :focus-visible):not(:disabled, [disabled], .btn-disabled) {
  outline-color: currentcolor;
  --btn-fg: currentColor;
}

@media (hover: none) {
  .btn-ghost:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) {
    --btn-shadow: "";
    --btn-bg: #0000;
    --btn-border: #0000;
    --btn-noise: none;
    --btn-fg: currentColor;
  }
}

.btn-outline:not( .btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked ) {
  --btn-shadow: "";
  --btn-bg: #0000;
  --btn-fg: var(--btn-color);
  --btn-border: var(--btn-color);
  --btn-noise: none;
}

@media (hover: none) {
  .btn-outline:hover:not( .btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled, :checked ) {
    --btn-shadow: "";
    --btn-bg: #0000;
    --btn-fg: var(--btn-color);
    --btn-border: var(--btn-color);
    --btn-noise: none;
  }
}

.btn-sm {
  --fontsize: 0.75rem;
  --btn-p: 0.75rem;
  --size: calc(var(--size-field, 0.25rem) * 8);
}

.btn-lg {
  --fontsize: 1.125rem;
  --btn-p: 1.25rem;
  --size: calc(var(--size-field, 0.25rem) * 12);
}

.btn-square {
  padding-inline: calc(0.25rem * 0);
  width: var(--size);
  height: var(--size);
}

.btn-circle {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(0.25rem * 0);
  width: var(--size);
  height: var(--size);
}

.btn-block {
  width: 100%;
}

.fieldset {
  display: grid;
  gap: calc(0.25rem * 1.5);
  padding-block: calc(0.25rem * 1);
  font-size: 0.75rem;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
}

.fieldset-legend {
  margin-bottom: calc(0.25rem * -1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.25rem * 2);
  padding-block: calc(0.25rem * 2);
  color: var(--color-base-content);
  font-weight: 600;
}

.steps {
  display: inline-grid;
  grid-auto-flow: column;
  overflow: hidden;
  overflow-x: auto;
  counter-reset: step;
  grid-auto-columns: 1fr;
}

.steps .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-columns: auto;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px 1fr;
  place-items: center;
  text-align: center;
  min-width: 4rem;
  --step-bg: var(--color-base-300);
  --step-fg: var(--color-base-content);
}

.steps .\!step {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  grid-template-columns: auto !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 40px 1fr !important;
  place-items: center !important;
  text-align: center !important;
  min-width: 4rem !important;
  --step-bg: var(--color-base-300) !important;
  --step-fg: var(--color-base-content) !important;
}

.steps .step:before {
  top: calc(0.25rem * 0);
  grid-column-start: 1;
  grid-row-start: 1;
  height: calc(0.25rem * 2);
  width: 100%;
  border: 1px solid;
  color: var(--step-bg);
  background-color: var(--step-bg);
  --tw-content: "";
  content: var(--tw-content);
  margin-inline-start: -100%;
}

.steps .\!step:before {
  top: calc(0.25rem * 0) !important;
  grid-column-start: 1 !important;
  grid-row-start: 1 !important;
  height: calc(0.25rem * 2) !important;
  width: 100% !important;
  border: 1px solid !important;
  color: var(--step-bg) !important;
  background-color: var(--step-bg) !important;
  --tw-content: "" !important;
  content: var(--tw-content) !important;
  margin-inline-start: -100% !important;
}

.steps .step > .step-icon, .steps .step:not(:has(.step-icon)):after {
  content: counter(step);
  counter-increment: step;
  z-index: 1;
  color: var(--step-fg);
  background-color: var(--step-bg);
  border: 1px solid var(--step-bg);
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  display: grid;
  height: calc(0.25rem * 8);
  width: calc(0.25rem * 8);
  place-items: center;
  place-self: center;
  border-radius: calc(infinity * 1px);
}

.steps .\!step > .step-icon, .steps .\!step:not(:has(.step-icon)):after {
  content: counter(step) !important;
  counter-increment: step !important;
  z-index: 1 !important;
  color: var(--step-fg) !important;
  background-color: var(--step-bg) !important;
  border: 1px solid var(--step-bg) !important;
  position: relative !important;
  grid-column-start: 1 !important;
  grid-row-start: 1 !important;
  display: grid !important;
  height: calc(0.25rem * 8) !important;
  width: calc(0.25rem * 8) !important;
  place-items: center !important;
  place-self: center !important;
  border-radius: calc(infinity * 1px) !important;
}

.steps .step:first-child:before {
  content: none;
}

.steps .\!step:first-child:before {
  content: none !important;
}

.steps .step[data-content]:after {
  content: attr(data-content);
}

.steps .\!step[data-content]:after {
  content: attr(data-content) !important;
}

.steps .step-neutral + .step-neutral:before, .steps .step-neutral:after, .steps .step-neutral > .step-icon {
  --step-bg: var(--color-neutral);
  --step-fg: var(--color-neutral-content);
}

.steps .step-primary + .step-primary:before, .steps .step-primary:after, .steps .step-primary > .step-icon {
  --step-bg: var(--color-primary);
  --step-fg: var(--color-primary-content);
}

.steps .step-secondary + .step-secondary:before, .steps .step-secondary:after, .steps .step-secondary > .step-icon {
  --step-bg: var(--color-secondary);
  --step-fg: var(--color-secondary-content);
}

.steps .step-accent + .step-accent:before, .steps .step-accent:after, .steps .step-accent > .step-icon {
  --step-bg: var(--color-accent);
  --step-fg: var(--color-accent-content);
}

.steps .step-info + .step-info:before, .steps .step-info:after, .steps .step-info > .step-icon {
  --step-bg: var(--color-info);
  --step-fg: var(--color-info-content);
}

.steps .step-success + .step-success:before, .steps .step-success:after, .steps .step-success > .step-icon {
  --step-bg: var(--color-success);
  --step-fg: var(--color-success-content);
}

.steps .step-warning + .step-warning:before, .steps .step-warning:after, .steps .step-warning > .step-icon {
  --step-bg: var(--color-warning);
  --step-fg: var(--color-warning-content);
}

.steps .step-error + .step-error:before, .steps .step-error:after, .steps .step-error > .step-icon {
  --step-bg: var(--color-error);
  --step-fg: var(--color-error-content);
}

.steps-horizontal {
  grid-auto-columns: 1fr;
  display: inline-grid;
  grid-auto-flow: column;
  overflow: hidden;
  overflow-x: auto;
}

.steps-horizontal .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-columns: auto;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px 1fr;
  place-items: center;
  text-align: center;
  min-width: 4rem;
}

.steps-horizontal .\!step {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  grid-template-columns: auto !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 40px 1fr !important;
  place-items: center !important;
  text-align: center !important;
  min-width: 4rem !important;
}

.steps-horizontal .step:before {
  height: calc(0.25rem * 2);
  width: 100%;
  translate: 0;
  content: "";
  margin-inline-start: -100%;
}

.steps-horizontal .\!step:before {
  height: calc(0.25rem * 2) !important;
  width: 100% !important;
  translate: 0 !important;
  content: "" !important;
  margin-inline-start: -100% !important;
}

[dir="rtl"] .steps-horizontal .step:before {
  translate: 0;
}

[dir="rtl"] .steps-horizontal .\!step:before {
  translate: 0 !important;
}

.steps-vertical .\!step {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 0.5rem !important;
  min-height: 4rem !important;
  justify-items: start !important;
}

.steps-vertical .step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: 40px 1fr;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 0.5rem;
  min-height: 4rem;
  justify-items: start;
}

.steps-vertical .\!step:before {
  height: 100% !important;
  width: calc(0.25rem * 2) !important;
  translate: -50% -50% !important;
  margin-inline-start: 50% !important;
}

.steps-vertical .step:before {
  height: 100%;
  width: calc(0.25rem * 2);
  translate: -50% -50%;
  margin-inline-start: 50%;
}

[dir="rtl"] .steps-vertical .\!step:before {
  translate: 50% -50% !important;
}

[dir="rtl"] .steps-vertical .step:before {
  translate: 50% -50%;
}

.\!navbar {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  padding: 0.5rem !important;
  min-height: 4rem !important;
}

.navbar {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.5rem;
  min-height: 4rem;
}

:where(.\!navbar) {
  position: relative !important;
}

:where(.navbar) {
  position: relative;
}

.countdown {
  display: inline-flex;
}

.countdown.countdown {
  line-height: 1em;
}

.countdown > * {
  display: inline-block;
  overflow-y: hidden;
  height: 1em;
}

.countdown > *:before {
  position: relative;
  content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
  white-space: pre;
  top: calc(var(--value) * -1em);
  text-align: center;
  transition: all 1s cubic-bezier(1, 0, 0, 1);
}

.skeleton {
  border-radius: var(--radius-box);
  background-color: var(--color-base-300);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    transition-duration: 15s;
  }
}

.skeleton {
  will-change: background-position;
  background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: -50%;
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    animation: skeleton 1.8s ease-in-out infinite;
  }
}

@keyframes skeleton {
  0% {
    background-position: 150%;
  }

  100% {
    background-position: -50%;
  }
}

.\!card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--radius-box) !important;
  outline-width: 2px !important;
  transition: outline 0.2s ease-in-out !important;
  outline: 0 solid #0000 !important;
  outline-offset: 2px !important;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-box);
  outline-width: 2px;
  transition: outline 0.2s ease-in-out;
  outline: 0 solid #0000;
  outline-offset: 2px;
}

.\!card:focus {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

.card:focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .\!card:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  .card:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.\!card:focus-visible {
  outline-color: currentColor !important;
}

.card:focus-visible {
  outline-color: currentColor;
}

.\!card :where(figure:first-child) {
  overflow: hidden !important;
  border-start-start-radius: inherit !important;
  border-start-end-radius: inherit !important;
  border-end-start-radius: unset !important;
  border-end-end-radius: unset !important;
}

.card :where(figure:first-child) {
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: unset;
  border-end-end-radius: unset;
}

.\!card :where(figure:last-child) {
  overflow: hidden !important;
  border-start-start-radius: unset !important;
  border-start-end-radius: unset !important;
  border-end-start-radius: inherit !important;
  border-end-end-radius: inherit !important;
}

.card :where(figure:last-child) {
  overflow: hidden;
  border-start-start-radius: unset;
  border-start-end-radius: unset;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.\!card:where(.card-border) {
  border: var(--border) solid var(--color-base-200) !important;
}

.card:where(.card-border) {
  border: var(--border) solid var(--color-base-200);
}

.\!card:where(.card-dash) {
  border: var(--border) dashed var(--color-base-200) !important;
}

.card:where(.card-dash) {
  border: var(--border) dashed var(--color-base-200);
}

.\!card.image-full {
  display: grid !important;
}

.card.image-full {
  display: grid;
}

.\!card.image-full > * {
  grid-column-start: 1 !important;
  grid-row-start: 1 !important;
}

.card.image-full > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.\!card.image-full > .card-body {
  position: relative !important;
  color: var(--color-neutral-content) !important;
}

.card.image-full > .card-body {
  position: relative;
  color: var(--color-neutral-content);
}

.\!card.image-full :where(figure) {
  overflow: hidden !important;
  border-radius: inherit !important;
}

.card.image-full :where(figure) {
  overflow: hidden;
  border-radius: inherit;
}

.\!card.image-full > figure img {
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  filter: brightness(28%) !important;
}

.card.image-full > figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(28%);
}

.\!card figure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

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

.\!card:has(> input:is(input[type="checkbox"], input[type="radio"])) {
  cursor: pointer !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

.card:has(> input:is(input[type="checkbox"], input[type="radio"])) {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.\!card:has(> :checked) {
  outline: 2px solid currentColor !important;
}

.card:has(> :checked) {
  outline: 2px solid currentColor;
}

.card-title {
  display: flex;
  align-items: center;
  gap: calc(0.25rem * 2);
  font-size: var(--cardtitle-fs, 1.125rem);
  font-weight: 600;
}

.card-body {
  display: flex;
  flex: auto;
  flex-direction: column;
  gap: calc(0.25rem * 2);
  padding: var(--card-p, 1.5rem);
  font-size: var(--card-fs, 0.875rem);
}

.card-body :where(p) {
  flex-grow: 1;
}

.card-xs .card-body {
  --card-p: 0.5rem;
  --card-fs: 0.6875rem;
}

.card-xs .card-title {
  --cardtitle-fs: 0.875rem;
}

.card-sm .card-body {
  --card-p: 1rem;
  --card-fs: 0.75rem;
}

.card-sm .card-title {
  --cardtitle-fs: 1rem;
}

.card-md .card-body {
  --card-p: 1.5rem;
  --card-fs: 0.875rem;
}

.card-md .card-title {
  --cardtitle-fs: 1.125rem;
}

.card-lg .card-body {
  --card-p: 2rem;
  --card-fs: 1rem;
}

.card-lg .card-title {
  --cardtitle-fs: 1.25rem;
}

.card-xl .card-body {
  --card-p: 2.5rem;
  --card-fs: 1.125rem;
}

.card-xl .card-title {
  --cardtitle-fs: 1.375rem;
}

.indicator {
  position: relative;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
}

.indicator :where(.indicator-item) {
  z-index: 1;
  position: absolute;
  white-space: nowrap;
  top: var(--indicator-t, 0);
  bottom: var(--indicator-b, auto);
  left: var(--indicator-s, auto);
  right: var(--indicator-e, 0);
  translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
}

.indicator-end {
  --indicator-s: auto;
  --indicator-e: 0;
  --indicator-x: 50%;
}

[dir="rtl"] .indicator-end {
  --indicator-s: 0;
  --indicator-e: auto;
  --indicator-x: -50%;
}

.indicator-top {
  --indicator-t: 0;
  --indicator-b: auto;
  --indicator-y: -50%;
}

.footer {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  place-items: start;
  -moz-column-gap: calc(0.25rem * 4);
       column-gap: calc(0.25rem * 4);
  row-gap: calc(0.25rem * 10);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer > * {
  display: grid;
  place-items: start;
  gap: calc(0.25rem * 2);
}

.footer.footer-center {
  grid-auto-flow: column dense;
  place-items: center;
  text-align: center;
}

.footer.footer-center > * {
  place-items: center;
}

.loading {
  pointer-events: none;
  display: inline-block;
  aspect-ratio: 1 / 1;
  background-color: currentcolor;
  vertical-align: middle;
  width: calc(var(--size-selector, 0.25rem) * 6);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}

.loading-spinner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
}

.loading-xs {
  width: calc(var(--size-selector, 0.25rem) * 4);
}

.loading-sm {
  width: calc(var(--size-selector, 0.25rem) * 5);
}

.loading-md {
  width: calc(var(--size-selector, 0.25rem) * 6);
}

.loading-lg {
  width: calc(var(--size-selector, 0.25rem) * 7);
}

.menu {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  flex-wrap: wrap;
  padding: calc(0.25rem * 2);
  --menu-active-fg: var(--color-neutral-content);
  --menu-active-bg: var(--color-neutral);
  font-size: 0.875rem;
}

.menu :where(li ul) {
  position: relative;
  margin-inline-start: calc(0.25rem * 4);
  padding-inline-start: calc(0.25rem * 2);
  white-space: nowrap;
}

.menu :where(li ul):before {
  position: absolute;
  inset-inline-start: calc(0.25rem * 0);
  top: calc(0.25rem * 3);
  bottom: calc(0.25rem * 3);
  background-color: var(--color-base-content);
  opacity: 10%;
  width: var(--border);
  content: "";
}

.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
  display: none;
}

.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  display: grid;
  grid-auto-flow: column;
  align-content: flex-start;
  align-items: center;
  gap: calc(0.25rem * 2);
  border-radius: var(--radius-field);
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 1.5);
  text-align: start;
  transition-property: color, background-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  grid-auto-columns: minmax(auto, max-content) auto max-content;
  text-wrap: balance;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.menu :where(li > details > summary) {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .menu :where(li > details > summary) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.menu :where(li > details > summary)::-webkit-details-marker {
  display: none;
}

.menu :where(li > details > summary):after, .menu :where(li > .menu-dropdown-toggle):after {
  justify-self: flex-end;
  display: block;
  height: 0.375rem;
  width: 0.375rem;
  rotate: -135deg;
  translate: 0 -1px;
  transition-property: rotate, translate;
  transition-duration: 0.2s;
  content: "";
  transform-origin: 50% 50%;
  box-shadow: 2px 2px inset;
  pointer-events: none;
}

.menu :where(li > details[open] > summary):after, .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
  rotate: 45deg;
  translate: 0 1px;
}

.menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus, .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
  cursor: pointer;
  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  color: var(--color-base-content);
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus, .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
  cursor: pointer;
  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
  box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
}

.menu :where(li:empty) {
  background-color: var(--color-base-content);
  opacity: 10%;
  margin: 0.5rem 1rem;
  height: 1px;
}

.menu :where(li) {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}

.menu :where(li) .badge {
  justify-self: flex-end;
}

.menu :where(li) > *:not(ul, .menu-title, details, .btn):active, .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active, .menu :where(li) > details > summary:active {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .menu :where(li) > *:not(ul, .menu-title, details, .btn):active, .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active, .menu :where(li) > details > summary:active {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.menu :where(li) > *:not(ul, .menu-title, details, .btn):active, .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active, .menu :where(li) > details > summary:active {
  color: var(--menu-active-fg);
  background-color: var(--menu-active-bg);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
}

.menu :where(li) > *:not(ul, .menu-title, details, .btn):active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn):active:active), .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:active), .menu :where(li) > details > summary:active:not(.menu :where(li) > details > summary:active:active) {
  box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
}

.menu :where(li).menu-disabled {
  pointer-events: none;
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.menu .dropdown:focus-within .menu-dropdown-toggle:after {
  rotate: 45deg;
  translate: 0 1px;
}

.menu .\!dropdown:focus-within .menu-dropdown-toggle:after {
  rotate: 45deg !important;
  translate: 0 1px !important;
}

.menu .dropdown-content {
  margin-top: calc(0.25rem * 2);
  padding: calc(0.25rem * 2);
}

.menu .dropdown-content:before {
  display: none;
}

.menu-title {
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 2);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
}

.menu-xs .menu-title {
  padding-inline: calc(0.25rem * 2);
  padding-block: calc(0.25rem * 1);
}

.menu-sm :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  border-radius: var(--radius-field);
  padding-inline: calc(0.25rem * 2.5);
  padding-block: calc(0.25rem * 1);
  font-size: 0.75rem;
}

.menu-sm .menu-title {
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 2);
}

.menu-md .menu-title {
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 2);
}

.menu-lg .menu-title {
  padding-inline: calc(0.25rem * 6);
  padding-block: calc(0.25rem * 3);
}

.menu-xl .menu-title {
  padding-inline: calc(0.25rem * 6);
  padding-block: calc(0.25rem * 3);
}

.\!toggle {
  border: var(--border) solid currentColor !important;
  color: var(--input-color) !important;
  position: relative !important;
  display: inline-grid !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  place-content: center !important;
  vertical-align: middle !important;
  webkit-user-select: none !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  grid-template-columns: 0fr 1fr 1fr !important;
  --radius-selector-max: calc(
    var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
  ) !important;
  border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ) !important;
  padding: var(--toggle-p) !important;
  box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset !important;
  transition: color 0.3s, grid-template-columns 0.2s !important;
  --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000) !important;
  --toggle-p: calc(var(--size) * 0.125) !important;
  --size: calc(var(--size-selector, 0.25rem) * 6) !important;
  width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2) !important;
  height: var(--size) !important;
}

.toggle {
  border: var(--border) solid currentColor;
  color: var(--input-color);
  position: relative;
  display: inline-grid;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  place-content: center;
  vertical-align: middle;
  webkit-user-select: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-template-columns: 0fr 1fr 1fr;
  --radius-selector-max: calc(
    var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
  );
  border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) );
  padding: var(--toggle-p);
  box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
  transition: color 0.3s, grid-template-columns 0.2s;
  --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
  --toggle-p: calc(var(--size) * 0.125);
  --size: calc(var(--size-selector, 0.25rem) * 6);
  width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
  height: var(--size);
}

.\!toggle > * {
  z-index: 1 !important;
  grid-column: span 1 / span 1 !important;
  grid-column-start: 2 !important;
  grid-row-start: 1 !important;
  height: 100% !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background-color: transparent !important;
  padding: calc(0.25rem * 0.5) !important;
  transition: opacity 0.2s, rotate 0.4s !important;
  border: none !important;
}

.toggle > * {
  z-index: 1;
  grid-column: span 1 / span 1;
  grid-column-start: 2;
  grid-row-start: 1;
  height: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  padding: calc(0.25rem * 0.5);
  transition: opacity 0.2s, rotate 0.4s;
  border: none;
}

.\!toggle > *:focus {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

.toggle > *:focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .\!toggle > *:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  .toggle > *:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.\!toggle > *:nth-child(2) {
  color: var(--color-base-100) !important;
  rotate: 0deg !important;
}

.toggle > *:nth-child(2) {
  color: var(--color-base-100);
  rotate: 0deg;
}

.\!toggle > *:nth-child(3) {
  color: var(--color-base-100) !important;
  opacity: 0% !important;
  rotate: -15deg !important;
}

.toggle > *:nth-child(3) {
  color: var(--color-base-100);
  opacity: 0%;
  rotate: -15deg;
}

.\!toggle:has(:checked) > :nth-child(2) {
  opacity: 0% !important;
  rotate: 15deg !important;
}

.toggle:has(:checked) > :nth-child(2) {
  opacity: 0%;
  rotate: 15deg;
}

.\!toggle:has(:checked) > :nth-child(3) {
  opacity: 100% !important;
  rotate: 0deg !important;
}

.toggle:has(:checked) > :nth-child(3) {
  opacity: 100%;
  rotate: 0deg;
}

.\!toggle:before {
  position: relative !important;
  inset-inline-start: calc(0.25rem * 0) !important;
  grid-column-start: 2 !important;
  grid-row-start: 1 !important;
  aspect-ratio: 1 / 1 !important;
  height: 100% !important;
  border-radius: var(--radius-selector) !important;
  background-color: currentcolor !important;
  translate: 0 !important;
  --tw-content: "" !important;
  content: var(--tw-content) !important;
  transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s !important;
  box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) !important;
  background-size: auto, calc(var(--noise) * 100%) !important;
  background-image: none, var(--fx-noise) !important;
}

.toggle:before {
  position: relative;
  inset-inline-start: calc(0.25rem * 0);
  grid-column-start: 2;
  grid-row-start: 1;
  aspect-ratio: 1 / 1;
  height: 100%;
  border-radius: var(--radius-selector);
  background-color: currentcolor;
  translate: 0;
  --tw-content: "";
  content: var(--tw-content);
  transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s;
  box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
}

@media (forced-colors: active) {
  .\!toggle:before {
    outline-style: var(--tw-outline-style) !important;
    outline-width: 1px !important;
    outline-offset: calc(1px * -1) !important;
  }

  .toggle:before {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
    outline-offset: calc(1px * -1);
  }
}

@media print {
  .\!toggle:before {
    outline: 0.25rem solid !important;
    outline-offset: -1rem !important;
  }

  .toggle:before {
    outline: 0.25rem solid;
    outline-offset: -1rem;
  }
}

.\!toggle:focus-visible, .\!toggle:has(:focus-visible) {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

.toggle:focus-visible, .toggle:has(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.\!toggle:focus-visible, .\!toggle:has(:focus-visible) {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

.\!toggle:checked, .\!toggle[aria-checked="true"], .\!toggle:has(> input:checked) {
  grid-template-columns: 1fr 1fr 0fr !important;
  background-color: var(--color-base-100) !important;
  --input-color: var(--color-base-content) !important;
}

.toggle:checked, .toggle[aria-checked="true"], .toggle:has(> input:checked) {
  grid-template-columns: 1fr 1fr 0fr;
  background-color: var(--color-base-100);
  --input-color: var(--color-base-content);
}

.\!toggle:checked, .\!toggle[aria-checked="true"], .\!toggle:has(> input:checked) {
  grid-template-columns: 1fr 1fr 0fr !important;
  background-color: var(--color-base-100) !important;
  --input-color: var(--color-base-content) !important;
}

.\!toggle:checked:before, .\!toggle[aria-checked="true"]:before, .\!toggle:has(> input:checked):before {
  background-color: currentcolor !important;
}

.toggle:checked:before, .toggle[aria-checked="true"]:before, .toggle:has(> input:checked):before {
  background-color: currentcolor;
}

.\!toggle:checked:before, .\!toggle[aria-checked="true"]:before, .\!toggle:has(> input:checked):before {
  background-color: currentcolor !important;
}

@starting-style {
  .\!toggle:checked:before, .\!toggle[aria-checked="true"]:before, .\!toggle:has(> input:checked):before {
    opacity: 0 !important;
  }

  .toggle:checked:before, .toggle[aria-checked="true"]:before, .toggle:has(> input:checked):before {
    opacity: 0;
  }

  .\!toggle:checked:before, .\!toggle[aria-checked="true"]:before, .\!toggle:has(> input:checked):before {
    opacity: 0 !important;
  }
}

.\!toggle:indeterminate {
  grid-template-columns: 0.5fr 1fr 0.5fr !important;
}

.toggle:indeterminate {
  grid-template-columns: 0.5fr 1fr 0.5fr;
}

.\!toggle:disabled {
  cursor: not-allowed !important;
  opacity: 30% !important;
}

.toggle:disabled {
  cursor: not-allowed;
  opacity: 30%;
}

.\!toggle:disabled:before {
  background-color: transparent !important;
  border: var(--border) solid currentColor !important;
}

.toggle:disabled:before {
  background-color: transparent;
  border: var(--border) solid currentColor;
}

.toggle-sm:is([type="checkbox"]), .toggle-sm:has([type="checkbox"]) {
  --size: calc(var(--size-selector, 0.25rem) * 5);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 2);
  border-radius: var(--radius-selector);
  vertical-align: middle;
  color: var(--badge-fg);
  border: var(--border) solid var(--badge-color, var(--color-base-200));
  font-size: 0.875rem;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: calc(0.25rem * 3 - var(--border));
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
  background-color: var(--badge-bg);
  --badge-bg: var(--badge-color, var(--color-base-100));
  --badge-fg: var(--color-base-content);
  --size: calc(var(--size-selector, 0.25rem) * 6);
  height: var(--size);
}

.badge-soft {
  color: var(--badge-color, var(--color-base-content));
  background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
  border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
  background-image: none;
}

.badge-accent {
  --badge-color: var(--color-accent);
  --badge-fg: var(--color-accent-content);
}

.badge-info {
  --badge-color: var(--color-info);
  --badge-fg: var(--color-info-content);
}

.badge-success {
  --badge-color: var(--color-success);
  --badge-fg: var(--color-success-content);
}

.badge-warning {
  --badge-color: var(--color-warning);
  --badge-fg: var(--color-warning-content);
}

.badge-error {
  --badge-color: var(--color-error);
  --badge-fg: var(--color-error-content);
}

.badge-ghost {
  border-color: var(--color-base-200);
  background-color: var(--color-base-200);
  color: var(--color-base-content);
  background-image: none;
}

.badge-sm {
  --size: calc(var(--size-selector, 0.25rem) * 5);
  font-size: 0.75rem;
  padding-inline: calc(0.25rem * 2.5 - var(--border));
}

.link {
  cursor: pointer;
  text-decoration-line: underline;
}

.link:focus {
  --tw-outline-style: none;
  outline-style: none;
}

@media (forced-colors: active) {
  .link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.validator:user-valid, .validator:user-valid:focus, .validator:user-valid:checked, .validator:user-valid[aria-checked="true"], .validator:user-valid:focus-within, .validator:has(:user-valid), .validator:has(:user-valid):focus, .validator:has(:user-valid):checked, .validator:has(:user-valid)[aria-checked="true"], .validator:has(:user-valid):focus-within {
  --input-color: var(--color-success);
}

.validator:user-invalid, .validator:user-invalid:focus, .validator:user-invalid:checked, .validator:user-invalid[aria-checked="true"], .validator:user-invalid:focus-within, .validator:has(:user-invalid), .validator:has(:user-invalid):focus, .validator:has(:user-invalid):checked, .validator:has(:user-invalid)[aria-checked="true"], .validator:has(:user-invalid):focus-within, .validator[aria-invalid]:not([aria-invalid="false"]), .validator[aria-invalid]:not([aria-invalid="false"]):focus, .validator[aria-invalid]:not([aria-invalid="false"]):checked, .validator[aria-invalid]:not([aria-invalid="false"])[aria-checked="true"], .validator[aria-invalid]:not([aria-invalid="false"]):focus-within {
  --input-color: var(--color-error);
}

.validator:user-invalid ~ .validator-hint, .validator:has(:user-invalid) ~ .validator-hint, .validator[aria-invalid]:not([aria-invalid="false"]) ~ .validator-hint {
  visibility: visible;
  display: block;
  color: var(--color-error);
}

.list {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

.list :where(.list-row) {
  --list-grid-cols: minmax(0, auto) 1fr;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: calc(0.25rem * 4);
  border-radius: var(--radius-box);
  padding: calc(0.25rem * 4);
  word-break: break-word;
  grid-template-columns: var(--list-grid-cols);
}

.list :where(.list-row):has(.list-col-grow:nth-child(1)) {
  --list-grid-cols: 1fr;
}

.list :where(.list-row):has(.list-col-grow:nth-child(2)) {
  --list-grid-cols: minmax(0, auto) 1fr;
}

.list :where(.list-row):has(.list-col-grow:nth-child(3)) {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr;
}

.list :where(.list-row):has(.list-col-grow:nth-child(4)) {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
}

.list :where(.list-row):has(.list-col-grow:nth-child(5)) {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr;
}

.list :where(.list-row):has(.list-col-grow:nth-child(6)) {
  --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto)
        minmax(0, auto) 1fr;
}

.list :where(.list-row) :not(.list-col-wrap) {
  grid-row-start: 1;
}

.list > :not(:last-child).list-row:after, .list > :not(:last-child) .list-row:after {
  content: "";
  border-bottom: var(--border) solid;
  inset-inline: var(--radius-box);
  position: absolute;
  bottom: calc(0.25rem * 0);
  border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
}

.\!tooltip {
  position: relative !important;
  display: inline-block !important;
  --tt-bg: var(--color-neutral) !important;
  --tt-off: calc(100% + 0.5rem) !important;
  --tt-tail: calc(100% + 1px + 0.25rem) !important;
}

.tooltip {
  position: relative;
  display: inline-block;
  --tt-bg: var(--color-neutral);
  --tt-off: calc(100% + 0.5rem);
  --tt-tail: calc(100% + 1px + 0.25rem);
}

.\!tooltip > :where(.tooltip-content), .\!tooltip:where([data-tip]):before {
  position: absolute !important;
  max-width: 20rem !important;
  border-radius: var(--radius-field) !important;
  padding-inline: calc(0.25rem * 2) !important;
  padding-block: calc(0.25rem * 1) !important;
  text-align: center !important;
  white-space: normal !important;
  color: var(--color-neutral-content) !important;
  opacity: 0% !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  background-color: var(--tt-bg) !important;
  width: -moz-max-content !important;
  width: max-content !important;
  pointer-events: none !important;
  z-index: 2 !important;
  --tw-content: attr(data-tip) !important;
  content: var(--tw-content) !important;
}

.tooltip > :where(.tooltip-content), .tooltip:where([data-tip]):before {
  position: absolute;
  max-width: 20rem;
  border-radius: var(--radius-field);
  padding-inline: calc(0.25rem * 2);
  padding-block: calc(0.25rem * 1);
  text-align: center;
  white-space: normal;
  color: var(--color-neutral-content);
  opacity: 0%;
  font-size: 0.875rem;
  line-height: 1.25;
  background-color: var(--tt-bg);
  width: -moz-max-content;
  width: max-content;
  pointer-events: none;
  z-index: 2;
  --tw-content: attr(data-tip);
  content: var(--tw-content);
}

.\!tooltip > :where(.tooltip-content), .\!tooltip:where([data-tip]):before {
  position: absolute !important;
  max-width: 20rem !important;
  border-radius: var(--radius-field) !important;
  padding-inline: calc(0.25rem * 2) !important;
  padding-block: calc(0.25rem * 1) !important;
  text-align: center !important;
  white-space: normal !important;
  color: var(--color-neutral-content) !important;
  opacity: 0% !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  background-color: var(--tt-bg) !important;
  width: -moz-max-content !important;
  width: max-content !important;
  pointer-events: none !important;
  z-index: 2 !important;
  --tw-content: attr(data-tip) !important;
  content: var(--tw-content) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .\!tooltip > :where(.tooltip-content), .\!tooltip:where([data-tip]):before {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
  }

  .tooltip > :where(.tooltip-content), .tooltip:where([data-tip]):before {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
  }

  .\!tooltip > :where(.tooltip-content), .\!tooltip:where([data-tip]):before {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
  }

  .\!tooltip:after {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
  }

  .tooltip:after {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
  }
}

.\!tooltip:after {
  opacity: 0% !important;
  background-color: var(--tt-bg) !important;
  content: "" !important;
  pointer-events: none !important;
  width: 0.625rem !important;
  height: 0.25rem !important;
  display: block !important;
  position: absolute !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: -1px 0 !important;
          mask-position: -1px 0 !important;
  --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A") !important;
  -webkit-mask-image: var(--mask-tooltip) !important;
          mask-image: var(--mask-tooltip) !important;
}

.tooltip:after {
  opacity: 0%;
  background-color: var(--tt-bg);
  content: "";
  pointer-events: none;
  width: 0.625rem;
  height: 0.25rem;
  display: block;
  position: absolute;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: -1px 0;
          mask-position: -1px 0;
  --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
  -webkit-mask-image: var(--mask-tooltip);
          mask-image: var(--mask-tooltip);
}

.\!tooltip.tooltip-open > .tooltip-content, .\!tooltip.tooltip-open[data-tip]:before, .\!tooltip.tooltip-open:after, .\!tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .\!tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .\!tooltip[data-tip]:not([data-tip=""]):hover:after, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .\!tooltip:has(:focus-visible) > .tooltip-content, .\!tooltip:has(:focus-visible)[data-tip]:before, .\!tooltip:has(:focus-visible):after {
  opacity: 100% !important;
  --tt-pos: 0rem !important;
}

.tooltip.tooltip-open > .tooltip-content, .tooltip.tooltip-open[data-tip]:before, .tooltip.tooltip-open:after, .tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .tooltip[data-tip]:not([data-tip=""]):hover:after, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .tooltip:has(:focus-visible) > .tooltip-content, .tooltip:has(:focus-visible)[data-tip]:before, .tooltip:has(:focus-visible):after {
  opacity: 100%;
  --tt-pos: 0rem;
}

.\!tooltip.tooltip-open > .tooltip-content, .\!tooltip.tooltip-open[data-tip]:before, .\!tooltip.tooltip-open:after, .\!tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .\!tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .\!tooltip[data-tip]:not([data-tip=""]):hover:after, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .\!tooltip:has(:focus-visible) > .tooltip-content, .\!tooltip:has(:focus-visible)[data-tip]:before, .\!tooltip:has(:focus-visible):after {
  opacity: 100% !important;
  --tt-pos: 0rem !important;
}

@media (prefers-reduced-motion: no-preference) {
  .\!tooltip.tooltip-open > .tooltip-content, .\!tooltip.tooltip-open[data-tip]:before, .\!tooltip.tooltip-open:after, .\!tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .\!tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .\!tooltip[data-tip]:not([data-tip=""]):hover:after, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .\!tooltip:has(:focus-visible) > .tooltip-content, .\!tooltip:has(:focus-visible)[data-tip]:before, .\!tooltip:has(:focus-visible):after {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
  }

  .tooltip.tooltip-open > .tooltip-content, .tooltip.tooltip-open[data-tip]:before, .tooltip.tooltip-open:after, .tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .tooltip[data-tip]:not([data-tip=""]):hover:after, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .tooltip:has(:focus-visible) > .tooltip-content, .tooltip:has(:focus-visible)[data-tip]:before, .tooltip:has(:focus-visible):after {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  .\!tooltip.tooltip-open > .tooltip-content, .\!tooltip.tooltip-open[data-tip]:before, .\!tooltip.tooltip-open:after, .\!tooltip[data-tip]:not([data-tip=""]):hover > .tooltip-content, .\!tooltip[data-tip]:not([data-tip=""]):hover[data-tip]:before, .\!tooltip[data-tip]:not([data-tip=""]):hover:after, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover > .tooltip-content, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover[data-tip]:before, .\!tooltip:not(:has(.tooltip-content:empty)):has(.tooltip-content):hover:after, .\!tooltip:has(:focus-visible) > .tooltip-content, .\!tooltip:has(:focus-visible)[data-tip]:before, .\!tooltip:has(:focus-visible):after {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
  }
}

.\!tooltip > .tooltip-content, .\!tooltip[data-tip]:before {
  transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
  inset: auto auto var(--tt-off) 50% !important;
}

.tooltip > .tooltip-content, .tooltip[data-tip]:before, .tooltip-top > .tooltip-content, .tooltip-top[data-tip]:before {
  transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
  inset: auto auto var(--tt-off) 50%;
}

.\!tooltip > .tooltip-content, .\!tooltip[data-tip]:before {
  transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
  inset: auto auto var(--tt-off) 50% !important;
}

.\!tooltip:after {
  transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
  inset: auto auto var(--tt-tail) 50% !important;
}

.tooltip:after, .tooltip-top:after {
  transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
  inset: auto auto var(--tt-tail) 50%;
}

.tooltip-bottom > .tooltip-content, .tooltip-bottom[data-tip]:before {
  transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
  inset: var(--tt-off) auto auto 50%;
}

.tooltip-bottom:after {
  transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
  inset: var(--tt-tail) auto auto 50%;
}

.tooltip-left > .tooltip-content, .tooltip-left[data-tip]:before {
  transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
  inset: 50% var(--tt-off) auto auto;
}

.tooltip-left:after {
  transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
  inset: 50% calc(var(--tt-tail) + 1px) auto auto;
}

.tooltip-right > .tooltip-content, .tooltip-right[data-tip]:before {
  transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
  inset: 50% auto auto var(--tt-off);
}

.tooltip-right:after {
  transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
  inset: 50% auto auto calc(var(--tt-tail) + 1px);
}

.tooltip-primary > .tooltip-content, .tooltip-primary[data-tip]:before {
  color: var(--color-primary-content);
}

.tooltip-secondary > .tooltip-content, .tooltip-secondary[data-tip]:before {
  color: var(--color-secondary-content);
}

.tooltip-accent > .tooltip-content, .tooltip-accent[data-tip]:before {
  color: var(--color-accent-content);
}

.tooltip-info > .tooltip-content, .tooltip-info[data-tip]:before {
  color: var(--color-info-content);
}

.tooltip-success {
  --tt-bg: var(--color-success);
}

.tooltip-success > .tooltip-content, .tooltip-success[data-tip]:before {
  color: var(--color-success-content);
}

.tooltip-warning > .tooltip-content, .tooltip-warning[data-tip]:before {
  color: var(--color-warning-content);
}

.tooltip-error {
  --tt-bg: var(--color-error);
}

.tooltip-error > .tooltip-content, .tooltip-error[data-tip]:before {
  color: var(--color-error-content);
}

.table {
  font-size: 0.875rem;
  position: relative;
  width: 100%;
  border-radius: var(--radius-box);
  text-align: left;
}

.table:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

@media (hover: hover) {
  .table tr.row-hover:hover, .table tr.row-hover:nth-child(even):hover {
    background-color: var(--color-base-200);
  }
}

.table :where(th, td) {
  padding-inline: calc(0.25rem * 4);
  padding-block: calc(0.25rem * 3);
  vertical-align: middle;
}

.table :where(thead, tfoot) {
  white-space: nowrap;
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
}

.table :where(tfoot) {
  border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
}

.table :where(.table-pin-rows thead tr) {
  position: sticky;
  top: calc(0.25rem * 0);
  z-index: 1;
  background-color: var(--color-base-100);
}

.table :where(.table-pin-rows tfoot tr) {
  position: sticky;
  bottom: calc(0.25rem * 0);
  z-index: 1;
  background-color: var(--color-base-100);
}

.table :where(.table-pin-cols tr th) {
  position: sticky;
  right: calc(0.25rem * 0);
  left: calc(0.25rem * 0);
  background-color: var(--color-base-100);
}

.table :where(thead tr, tbody tr:not(:last-child)) {
  border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);
}

.table-zebra tbody tr:where(:nth-child(even)) {
  background-color: var(--color-base-200);
}

.table-zebra tbody tr:where(:nth-child(even)) :where(.table-pin-cols tr th) {
  background-color: var(--color-base-200);
}

@media (hover: hover) {
  .table-zebra tbody tr.row-hover:hover, .table-zebra tbody tr.row-hover:where(:nth-child(even)):hover {
    background-color: var(--color-base-300);
  }
}

.table-xs :not(thead, tfoot) tr {
  font-size: 0.6875rem;
}

.table-xs :where(th, td) {
  padding-inline: calc(0.25rem * 2);
  padding-block: calc(0.25rem * 1);
}

.table-sm :not(thead, tfoot) tr {
  font-size: 0.75rem;
}

.table-sm :where(th, td) {
  padding-inline: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 2);
}

.table-md :not(thead, tfoot) tr {
  font-size: 0.875rem;
}

.table-md :where(th, td) {
  padding-inline: calc(0.25rem * 4);
  padding-block: calc(0.25rem * 3);
}

.table-lg :not(thead, tfoot) tr {
  font-size: 1.125rem;
}

.table-lg :where(th, td) {
  padding-inline: calc(0.25rem * 5);
  padding-block: calc(0.25rem * 4);
}

.table-xl :not(thead, tfoot) tr {
  font-size: 1.375rem;
}

.table-xl :where(th, td) {
  padding-inline: calc(0.25rem * 6);
  padding-block: calc(0.25rem * 5);
}

.hero {
  display: grid;
  width: 100%;
  place-items: center;
  background-size: cover;
  background-position: center;
}

.hero > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

.collapse:not(td, tr, colgroup) {
  visibility: visible;
}

.collapse {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-box, 1rem);
  width: 100%;
  grid-template-rows: max-content 0fr;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  .collapse {
    transition: grid-template-rows 0.2s;
  }
}

.collapse > input:is([type="checkbox"], [type="radio"]) {
  grid-column-start: 1;
  grid-row-start: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
  z-index: 1;
  width: 100%;
  padding: 1rem;
  padding-inline-end: 3rem;
  min-height: 1lh;
  transition: background-color 0.2s ease-out;
}

.collapse:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
  grid-template-rows: max-content 1fr;
}

.collapse:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > .collapse-content, .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
  visibility: visible;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

.collapse:focus-visible, .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible), .collapse:has(summary:focus-visible) {
  outline-color: var(--color-base-content);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

.collapse:not(.collapse-close) > input[type="checkbox"], .collapse:not(.collapse-close) > input[type="radio"]:not(:checked), .collapse:not(.collapse-close) > .collapse-title {
  cursor: pointer;
}

.collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title, .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
  cursor: unset;
}

.collapse:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content), .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
  padding-bottom: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .collapse:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content), .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
  }

  .collapse:is([open]).collapse-arrow > .collapse-title:after {
    transform: translateY(-50%) rotate(225deg);
  }

  .collapse.collapse-open.collapse-arrow > .collapse-title:after {
    transform: translateY(-50%) rotate(225deg);
  }
}

.collapse.collapse-open.collapse-plus > .collapse-title:after {
  content: "−";
}

.collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
  transform: translateY(-50%) rotate(225deg);
}

.collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
  transform: translateY(-50%) rotate(225deg);
}

.collapse[open].collapse-plus > .collapse-title:after {
  content: "−";
}

.collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
  content: "−";
}

.collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
  content: "−";
}

.collapse-title, .collapse-content {
  grid-column-start: 1;
  grid-row-start: 1;
}

.collapse-content {
  visibility: hidden;
  grid-column-start: 1;
  grid-row-start: 2;
  min-height: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: unset;
}

@media (prefers-reduced-motion: no-preference) {
  .collapse-content {
    transition: visibility 0.2s, padding 0.2s ease-out, background-color 0.2s ease-out;
  }
}

.collapse:is(details) {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (transition: content-visibility allow-discrete) and (interpolate-size: allow-keywords) {
    .collapse:is(details)::details-content {
      transition: content-visibility 0.2s allow-discrete, height 0.2s;
      height: 0;
      interpolate-size: allow-keywords;
    }

    .collapse:is(details):where([open], .collapse-open)::details-content {
      height: auto;
    }
  }
}

.collapse:is(details) summary {
  position: relative;
  display: block;
}

.collapse:is(details) summary::-webkit-details-marker {
  display: none;
}

.collapse:is(details) summary {
  outline: none;
}

.collapse-arrow > .collapse-title:after {
  position: absolute;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  transform: translateY(-100%) rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .collapse-arrow > .collapse-title:after {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
  }
}

.collapse-arrow > .collapse-title:after {
  top: 50%;
  inset-inline-end: 1.4rem;
  content: "";
  transform-origin: 75% 75%;
  box-shadow: 2px 2px;
  pointer-events: none;
}

.collapse-plus > .collapse-title:after {
  position: absolute;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .collapse-plus > .collapse-title:after {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.collapse-plus > .collapse-title:after {
  top: 0.9rem;
  inset-inline-end: 1.4rem;
  content: "+";
  pointer-events: none;
}

.collapse-title {
  position: relative;
  width: 100%;
  padding: 1rem;
  padding-inline-end: 3rem;
  min-height: 1lh;
  transition: background-color 0.2s ease-out;
}

.collapse-open > .collapse-content {
  visibility: visible;
  min-height: -moz-fit-content;
  min-height: fit-content;
  padding-bottom: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .collapse-open > .collapse-content {
    transition: padding 0.2s ease-out, background-color 0.2s ease-out;
  }
}

.\!stack {
  display: inline-grid !important;
  grid-template-columns: 3px 4px 1fr 4px 3px !important;
  grid-template-rows: 3px 4px 1fr 4px 3px !important;
}

.stack {
  display: inline-grid;
  grid-template-columns: 3px 4px 1fr 4px 3px;
  grid-template-rows: 3px 4px 1fr 4px 3px;
}

.\!stack > * {
  height: 100% !important;
  width: 100% !important;
}

.stack > * {
  height: 100%;
  width: 100%;
}

.\!stack > *:nth-child(n + 2) {
  width: 100% !important;
  opacity: 70% !important;
}

.stack > *:nth-child(n + 2) {
  width: 100%;
  opacity: 70%;
}

.\!stack > *:nth-child(2) {
  z-index: 2 !important;
  opacity: 90% !important;
}

.stack > *:nth-child(2) {
  z-index: 2;
  opacity: 90%;
}

.\!stack > *:nth-child(1) {
  z-index: 3 !important;
  width: 100% !important;
}

.stack > *:nth-child(1) {
  z-index: 3;
  width: 100%;
}

.\!stack > *, .\!stack.stack-bottom > * {
  grid-column: 3 / 4 !important;
  grid-row: 3 / 6 !important;
}

.stack > *, .stack.stack-bottom > * {
  grid-column: 3 / 4;
  grid-row: 3 / 6;
}

.\!stack > *, .\!stack.stack-bottom > * {
  grid-column: 3 / 4 !important;
  grid-row: 3 / 6 !important;
}

.\!stack > *:nth-child(2), .\!stack.stack-bottom > *:nth-child(2) {
  grid-column: 2 / 5 !important;
  grid-row: 2 / 5 !important;
}

.stack > *:nth-child(2), .stack.stack-bottom > *:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

.\!stack > *:nth-child(2), .\!stack.stack-bottom > *:nth-child(2) {
  grid-column: 2 / 5 !important;
  grid-row: 2 / 5 !important;
}

.\!stack > *:nth-child(1), .\!stack.stack-bottom > *:nth-child(1) {
  grid-column: 1 / 6 !important;
  grid-row: 1 / 4 !important;
}

.stack > *:nth-child(1), .stack.stack-bottom > *:nth-child(1) {
  grid-column: 1 / 6;
  grid-row: 1 / 4;
}

.\!stack > *:nth-child(1), .\!stack.stack-bottom > *:nth-child(1) {
  grid-column: 1 / 6 !important;
  grid-row: 1 / 4 !important;
}

.\!stack.stack-top > * {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 4 !important;
}

.stack.stack-top > * {
  grid-column: 3 / 4;
  grid-row: 1 / 4;
}

.\!stack.stack-top > *:nth-child(2) {
  grid-column: 2 / 5 !important;
  grid-row: 2 / 5 !important;
}

.stack.stack-top > *:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

.\!stack.stack-top > *:nth-child(1) {
  grid-column: 1 / 6 !important;
  grid-row: 3 / 6 !important;
}

.stack.stack-top > *:nth-child(1) {
  grid-column: 1 / 6;
  grid-row: 3 / 6;
}

.\!stack.stack-start > * {
  grid-column: 1 / 4 !important;
  grid-row: 3 / 4 !important;
}

.stack.stack-start > * {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

.\!stack.stack-start > *:nth-child(2) {
  grid-column: 2 / 5 !important;
  grid-row: 2 / 5 !important;
}

.stack.stack-start > *:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

.\!stack.stack-start > *:nth-child(1) {
  grid-column: 3 / 6 !important;
  grid-row: 1 / 6 !important;
}

.stack.stack-start > *:nth-child(1) {
  grid-column: 3 / 6;
  grid-row: 1 / 6;
}

.\!stack.stack-end > * {
  grid-column: 3 / 6 !important;
  grid-row: 3 / 4 !important;
}

.stack.stack-end > * {
  grid-column: 3 / 6;
  grid-row: 3 / 4;
}

.\!stack.stack-end > *:nth-child(2) {
  grid-column: 2 / 5 !important;
  grid-row: 2 / 5 !important;
}

.stack.stack-end > *:nth-child(2) {
  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

.\!stack.stack-end > *:nth-child(1) {
  grid-column: 1 / 4 !important;
  grid-row: 1 / 6 !important;
}

.stack.stack-end > *:nth-child(1) {
  grid-column: 1 / 4;
  grid-row: 1 / 6;
}

.diff {
  position: relative;
  display: grid;
  width: 100%;
  overflow: hidden;
  webkit-user-select: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  grid-template-rows: 1fr 1.8rem 1fr;
  direction: ltr;
  container-type: inline-size;
  grid-template-columns: auto 1fr;
}

.diff:focus-visible, .diff:has(.diff-item-1:focus-visible) {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 1px;
  outline-color: var(--color-base-content);
}

.diff:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 1px;
  outline-color: var(--color-base-content);
}

.diff:focus-visible .diff-resizer {
  min-width: 95cqi;
  max-width: 95cqi;
}

.diff:has(.diff-item-1:focus-visible) {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
  outline-offset: 1px;
}

.diff:has(.diff-item-1:focus-visible) .diff-resizer {
  min-width: 5cqi;
  max-width: 5cqi;
}

@supports (-webkit-overflow-scrolling: touch) and (overflow: -webkit-paged-x) {
  .diff:focus .diff-resizer {
    min-width: 5cqi;
    max-width: 5cqi;
  }

  .diff:has(.diff-item-1:focus) .diff-resizer {
    min-width: 95cqi;
    max-width: 95cqi;
  }
}

.filter {
  display: flex;
  flex-wrap: wrap;
}

.filter input[type="radio"] {
  width: auto;
}

.filter input {
  overflow: hidden;
  opacity: 100%;
  scale: 1;
  transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s;
}

.filter input:not(:last-child) {
  margin-inline-end: calc(0.25rem * 1);
}

.filter input.filter-reset {
  aspect-ratio: 1 / 1;
}

.filter input.filter-reset::after {
  content: "×";
}

.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset, .filter:not(:has(input:checked:not(.filter-reset))) input[type="reset"] {
  scale: 0;
  border-width: 0;
  margin-inline: calc(0.25rem * 0);
  width: calc(0.25rem * 0);
  padding-inline: calc(0.25rem * 0);
  opacity: 0%;
}

.filter:has(input:checked:not(.filter-reset)) input:not(:checked, .filter-reset, input[type="reset"]) {
  scale: 0;
  border-width: 0;
  margin-inline: calc(0.25rem * 0);
  width: calc(0.25rem * 0);
  padding-inline: calc(0.25rem * 0);
  opacity: 0%;
}

.\!dock {
  position: fixed !important;
  right: calc(0.25rem * 0) !important;
  bottom: calc(0.25rem * 0) !important;
  left: calc(0.25rem * 0) !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  background-color: var(--color-base-100) !important;
  padding: calc(0.25rem * 2) !important;
  color: currentcolor !important;
  border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000) !important;
  height: 4rem !important;
  height: calc(4rem + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.dock {
  position: fixed;
  right: calc(0.25rem * 0);
  bottom: calc(0.25rem * 0);
  left: calc(0.25rem * 0);
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: var(--color-base-100);
  padding: calc(0.25rem * 2);
  color: currentcolor;
  border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);
  height: 4rem;
  height: calc(4rem + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

.\!dock > * {
  position: relative !important;
  margin-bottom: calc(0.25rem * 2) !important;
  display: flex !important;
  height: 100% !important;
  max-width: calc(0.25rem * 32) !important;
  flex-shrink: 1 !important;
  flex-basis: 100% !important;
  cursor: pointer !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  border-radius: var(--radius-box) !important;
  background-color: transparent !important;
  transition: opacity 0.2s ease-out !important;
}

.dock > * {
  position: relative;
  margin-bottom: calc(0.25rem * 2);
  display: flex;
  height: 100%;
  max-width: calc(0.25rem * 32);
  flex-shrink: 1;
  flex-basis: 100%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--radius-box);
  background-color: transparent;
  transition: opacity 0.2s ease-out;
}

@media (hover: hover) {
  .\!dock > *:hover {
    opacity: 80% !important;
  }

  .dock > *:hover {
    opacity: 80%;
  }
}

.\!dock > *[aria-disabled="true"], .\!dock > *[aria-disabled="true"]:hover, .\!dock > *[disabled], .\!dock > *[disabled]:hover {
  pointer-events: none !important;
  color: color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
  opacity: 100% !important;
}

.dock > *[aria-disabled="true"], .dock > *[aria-disabled="true"]:hover, .dock > *[disabled], .dock > *[disabled]:hover {
  pointer-events: none;
  color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  opacity: 100%;
}

.\!dock > *[aria-disabled="true"], .\!dock > *[aria-disabled="true"]:hover, .\!dock > *[disabled], .\!dock > *[disabled]:hover {
  pointer-events: none !important;
  color: color-mix(in oklab, var(--color-base-content) 10%, transparent) !important;
  opacity: 100% !important;
}

.\!dock > * .dock-label {
  font-size: 0.6875rem !important;
}

.dock > * .dock-label {
  font-size: 0.6875rem;
}

.\!dock > *:after {
  content: "" !important;
  position: absolute !important;
  height: calc(0.25rem * 1) !important;
  width: calc(0.25rem * 6) !important;
  border-radius: calc(infinity * 1px) !important;
  background-color: transparent !important;
  bottom: 0.2rem !important;
  border-top: 3px solid transparent !important;
  transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out !important;
}

.dock > *:after {
  content: "";
  position: absolute;
  height: calc(0.25rem * 1);
  width: calc(0.25rem * 6);
  border-radius: calc(infinity * 1px);
  background-color: transparent;
  bottom: 0.2rem;
  border-top: 3px solid transparent;
  transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out;
}

.mask {
  display: inline-block;
  vertical-align: middle;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.mask-star-2 {
  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");
}

.label {
  display: inline-flex;
  align-items: center;
  gap: calc(0.25rem * 1.5);
  white-space: nowrap;
  color: color-mix(in oklab, currentcolor 60%, transparent);
}

.label:has(input) {
  cursor: pointer;
}

.label:is(.input > *, .select > *) {
  display: flex;
  height: calc(100% - 0.5rem);
  align-items: center;
  padding-inline: calc(0.25rem * 3);
  white-space: nowrap;
  font-size: inherit;
}

.label:is(.\!input > *, .select > *) {
  display: flex !important;
  height: calc(100% - 0.5rem) !important;
  align-items: center !important;
  padding-inline: calc(0.25rem * 3) !important;
  white-space: nowrap !important;
  font-size: inherit !important;
}

.label:is(.input > *, .select > *):first-child {
  margin-inline-start: calc(0.25rem * -3);
  margin-inline-end: calc(0.25rem * 3);
  border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
}

.label:is(.\!input > *, .select > *):first-child {
  margin-inline-start: calc(0.25rem * -3) !important;
  margin-inline-end: calc(0.25rem * 3) !important;
  border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000) !important;
}

.label:is(.input > *, .select > *):last-child {
  margin-inline-start: calc(0.25rem * 3);
  margin-inline-end: calc(0.25rem * -3);
  border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);
}

.label:is(.\!input > *, .select > *):last-child {
  margin-inline-start: calc(0.25rem * 3) !important;
  margin-inline-end: calc(0.25rem * -3) !important;
  border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000) !important;
}

.floating-label:has(.input-sm, .select-sm, .textarea-sm) span {
  font-size: 0.75rem;
  top: calc(var(--size-field, 0.25rem) * 8 / 2);
}

.status {
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: calc(0.25rem * 2);
  height: calc(0.25rem * 2);
  border-radius: var(--radius-selector);
  background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: middle;
  color: color-mix(in oklab, var(--color-black) 30%, transparent);
  background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 );
  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
}

.status-neutral {
  background-color: var(--color-neutral);
  color: var(--color-neutral);
}

.status-success {
  background-color: var(--color-success);
  color: var(--color-success);
}

.status-warning {
  background-color: var(--color-warning);
  color: var(--color-warning);
}

.alert {
  display: grid;
  align-items: center;
  gap: calc(0.25rem * 4);
  border-radius: var(--radius-box);
  padding-inline: calc(0.25rem * 4);
  padding-block: calc(0.25rem * 3);
  color: var(--color-base-content);
  background-color: var(--alert-color, var(--color-base-200));
  justify-content: start;
  justify-items: start;
  grid-auto-flow: column;
  grid-template-columns: auto;
  text-align: start;
  border: var(--border) solid var(--color-base-200);
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
  box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
}

.alert:has(:nth-child(2)) {
  grid-template-columns: auto minmax(auto, 1fr);
}

.alert.alert-outline {
  background-color: transparent;
  color: var(--alert-color);
  box-shadow: none;
  background-image: none;
}

.alert.alert-dash {
  background-color: transparent;
  color: var(--alert-color);
  border-style: dashed;
  box-shadow: none;
  background-image: none;
}

.alert.alert-soft {
  color: var(--alert-color, var(--color-base-content));
  background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
  border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );
  box-shadow: none;
  background-image: none;
}

.alert-info {
  border-color: var(--color-info);
  color: var(--color-info-content);
  --alert-color: var(--color-info);
}

.alert-success {
  border-color: var(--color-success);
  color: var(--color-success-content);
  --alert-color: var(--color-success);
}

.alert-warning {
  border-color: var(--color-warning);
  color: var(--color-warning-content);
  --alert-color: var(--color-warning);
}

.alert-error {
  border-color: var(--color-error);
  color: var(--color-error-content);
  --alert-color: var(--color-error);
}

.\!input {
  cursor: text !important;
  border: var(--border) solid #0000 !important;
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 1 !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  align-items: center !important;
  gap: calc(0.25rem * 2) !important;
  background-color: var(--color-base-100) !important;
  padding-inline: calc(0.25rem * 3) !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  width: clamp(3rem, 20rem, 100%) !important;
  height: var(--size) !important;
  font-size: 0.875rem !important;
  touch-action: manipulation !important;
  border-start-start-radius: var(--join-ss, var(--radius-field)) !important;
  border-start-end-radius: var(--join-se, var(--radius-field)) !important;
  border-end-start-radius: var(--join-es, var(--radius-field)) !important;
  border-end-end-radius: var(--join-ee, var(--radius-field)) !important;
  border-color: var(--input-color) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
  --size: calc(var(--size-field, 0.25rem) * 10) !important;
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000) !important;
}

.input {
  cursor: text;
  border: var(--border) solid #0000;
  position: relative;
  display: inline-flex;
  flex-shrink: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  align-items: center;
  gap: calc(0.25rem * 2);
  background-color: var(--color-base-100);
  padding-inline: calc(0.25rem * 3);
  vertical-align: middle;
  white-space: nowrap;
  width: clamp(3rem, 20rem, 100%);
  height: var(--size);
  font-size: 0.875rem;
  touch-action: manipulation;
  border-start-start-radius: var(--join-ss, var(--radius-field));
  border-start-end-radius: var(--join-se, var(--radius-field));
  border-end-start-radius: var(--join-es, var(--radius-field));
  border-end-end-radius: var(--join-ee, var(--radius-field));
  border-color: var(--input-color);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
  --size: calc(var(--size-field, 0.25rem) * 10);
  --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
}

.\!input:where(input) {
  display: inline-flex !important;
}

.input:where(input) {
  display: inline-flex;
}

.\!input :where(input) {
  display: inline-flex !important;
  height: 100% !important;
  width: 100% !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background-color: transparent !important;
  border: none !important;
}

.input :where(input) {
  display: inline-flex;
  height: 100%;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
}

.\!input :where(input):focus, .\!input :where(input):focus-within {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

.input :where(input):focus, .input :where(input):focus-within {
  --tw-outline-style: none;
  outline-style: none;
}

.\!input :where(input):focus, .\!input :where(input):focus-within {
  --tw-outline-style: none !important;
  outline-style: none !important;
}

@media (forced-colors: active) {
  .\!input :where(input):focus, .\!input :where(input):focus-within {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  .input :where(input):focus, .input :where(input):focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .\!input :where(input):focus, .\!input :where(input):focus-within {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }
}

.\!input :where(input[type="url"]), .\!input :where(input[type="email"]) {
  direction: ltr !important;
}

.input :where(input[type="url"]), .input :where(input[type="email"]) {
  direction: ltr;
}

.\!input :where(input[type="url"]), .\!input :where(input[type="email"]) {
  direction: ltr !important;
}

.\!input :where(input[type="date"]) {
  display: inline-flex !important;
}

.input :where(input[type="date"]) {
  display: inline-flex;
}

.\!input:focus, .\!input:focus-within {
  --input-color: var(--color-base-content) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
  outline: 2px solid var(--input-color) !important;
  outline-offset: 2px !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.input:focus, .input:focus-within {
  --input-color: var(--color-base-content);
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
  outline: 2px solid var(--input-color);
  outline-offset: 2px;
  isolation: isolate;
  z-index: 1;
}

.\!input:focus, .\!input:focus-within {
  --input-color: var(--color-base-content) !important;
  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) !important;
  outline: 2px solid var(--input-color) !important;
  outline-offset: 2px !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.\!input:has(> input[disabled]), .\!input:is(:disabled, [disabled]), fieldset:disabled .\!input {
  cursor: not-allowed !important;
  border-color: var(--color-base-200) !important;
  background-color: var(--color-base-200) !important;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
}

.input:has(> input[disabled]), .input:is(:disabled, [disabled]), fieldset:disabled .input {
  cursor: not-allowed;
  border-color: var(--color-base-200);
  background-color: var(--color-base-200);
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

.\!input:has(> input[disabled]), .\!input:is(:disabled, [disabled]), fieldset:disabled .\!input {
  cursor: not-allowed !important;
  border-color: var(--color-base-200) !important;
  background-color: var(--color-base-200) !important;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important;
}

.\!input:has(> input[disabled])::-moz-placeholder, .\!input:is(:disabled, [disabled])::-moz-placeholder, fieldset:disabled .\!input::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!input:has(> input[disabled])::placeholder, .\!input:is(:disabled, [disabled])::placeholder, fieldset:disabled .\!input::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.input:has(> input[disabled])::-moz-placeholder, .input:is(:disabled, [disabled])::-moz-placeholder, fieldset:disabled .input::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.input:has(> input[disabled])::placeholder, .input:is(:disabled, [disabled])::placeholder, fieldset:disabled .input::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}

.\!input:has(> input[disabled])::-moz-placeholder, .\!input:is(:disabled, [disabled])::-moz-placeholder, fieldset:disabled .\!input::-moz-placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!input:has(> input[disabled])::placeholder, .\!input:is(:disabled, [disabled])::placeholder, fieldset:disabled .\!input::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 20%, transparent) !important;
}

.\!input:has(> input[disabled]), .\!input:is(:disabled, [disabled]), fieldset:disabled .\!input {
  box-shadow: none !important;
}

.input:has(> input[disabled]), .input:is(:disabled, [disabled]), fieldset:disabled .input {
  box-shadow: none;
}

.\!input:has(> input[disabled]), .\!input:is(:disabled, [disabled]), fieldset:disabled .\!input {
  box-shadow: none !important;
}

.\!input:has(> input[disabled]) > input[disabled] {
  cursor: not-allowed !important;
}

.input:has(> input[disabled]) > input[disabled] {
  cursor: not-allowed;
}

.\!input::-webkit-date-and-time-value {
  text-align: inherit !important;
}

.input::-webkit-date-and-time-value {
  text-align: inherit;
}

.\!input[type="number"]::-webkit-inner-spin-button {
  margin-block: calc(0.25rem * -3) !important;
  margin-inline-end: calc(0.25rem * -3) !important;
}

.input[type="number"]::-webkit-inner-spin-button {
  margin-block: calc(0.25rem * -3);
  margin-inline-end: calc(0.25rem * -3);
}

.\!input::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset-inline-end: 0.75em !important;
}

.input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset-inline-end: 0.75em;
}

.\!input:has(> input[type="date"]) :where(input[type="date"]) {
  display: inline-flex !important;
  webkit-appearance: none !important;
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
}

.input:has(> input[type="date"]) :where(input[type="date"]) {
  display: inline-flex;
  webkit-appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.\!input:has(> input[type="date"]) input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute !important;
  inset-inline-end: 0.75em !important;
  width: 1em !important;
  height: 1em !important;
  cursor: pointer !important;
}

.input:has(> input[type="date"]) input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset-inline-end: 0.75em;
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.input-ghost {
  background-color: transparent;
  box-shadow: none;
  border-color: #0000;
}

.input-ghost:focus, .input-ghost:focus-within {
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  border-color: #0000;
  box-shadow: none;
}

.input-success, .input-success:focus, .input-success:focus-within {
  --input-color: var(--color-success);
}

.input-error, .input-error:focus, .input-error:focus-within {
  --input-color: var(--color-error);
}

.input-sm {
  --size: calc(var(--size-field, 0.25rem) * 8);
  font-size: 0.75rem;
}

.input-sm[type="number"]::-webkit-inner-spin-button {
  margin-block: calc(0.25rem * -2);
  margin-inline-end: calc(0.25rem * -3);
}

.timeline {
  position: relative;
  display: flex;
}

.timeline > li {
  position: relative;
  display: grid;
  flex-shrink: 0;
  align-items: center;
  grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) );
  grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) );
}

.timeline > li > hr {
  border: none;
  width: 100%;
}

.timeline > li > hr:first-child {
  grid-column-start: 1;
  grid-row-start: 2;
}

.timeline > li > hr:last-child {
  grid-column-start: 3;
  grid-column-end: none;
  grid-row-start: 2;
  grid-row-end: auto;
}

@media print {
  .timeline > li > hr {
    border: 0.1px solid var(--color-base-300);
  }
}

.timeline :where(hr) {
  height: calc(0.25rem * 1);
  background-color: var(--color-base-300);
}

.timeline:has(.timeline-middle hr):first-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-selector);
  border-end-end-radius: var(--radius-selector);
}

.timeline:has(.timeline-middle hr):last-child {
  border-start-start-radius: var(--radius-selector);
  border-end-start-radius: var(--radius-selector);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.timeline:not(:has(.timeline-middle)) :first-child hr:last-child {
  border-start-start-radius: var(--radius-selector);
  border-end-start-radius: var(--radius-selector);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.timeline:not(:has(.timeline-middle)) :last-child hr:first-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-selector);
  border-end-end-radius: var(--radius-selector);
}

.chat {
  display: grid;
  -moz-column-gap: calc(0.25rem * 3);
       column-gap: calc(0.25rem * 3);
  padding-block: calc(0.25rem * 1);
  --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
}

.range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  webkit-appearance: none;
  --range-thumb: var(--color-base-100);
  --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6);
  --range-progress: currentColor;
  --range-fill: 1;
  --range-p: 0.25rem;
  --range-bg: color-mix(in oklab, currentColor 10%, #0000);
  cursor: pointer;
  overflow: hidden;
  background-color: transparent;
  vertical-align: middle;
  width: clamp(3rem, 20rem, 100%);
  --radius-selector-max: calc(
    var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
  );
  border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
  border: none;
  height: var(--range-thumb-size);
}

[dir="rtl"] .range {
  --range-dir: -1;
}

.range:focus {
  outline: none;
}

.range:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

.range::-webkit-slider-runnable-track {
  width: 100%;
  background-color: var(--range-bg);
  border-radius: var(--radius-selector);
  height: calc(var(--range-thumb-size) * 0.5);
}

@media (forced-colors: active) {
  .range::-webkit-slider-runnable-track {
    border: 1px solid;
  }

  .range::-moz-range-track {
    border: 1px solid;
  }
}

.range::-webkit-slider-thumb {
  position: relative;
  box-sizing: border-box;
  border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
  background-color: currentColor;
  height: var(--range-thumb-size);
  width: var(--range-thumb-size);
  border: var(--range-p) solid;
  -webkit-appearance: none;
          appearance: none;
  webkit-appearance: none;
  top: 50%;
  color: var(--range-progress);
  transform: translateY(-50%);
  box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
}

.range::-moz-range-track {
  width: 100%;
  background-color: var(--range-bg);
  border-radius: var(--radius-selector);
  height: calc(var(--range-thumb-size) * 0.5);
}

.range::-moz-range-thumb {
  position: relative;
  box-sizing: border-box;
  border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));
  background-color: currentColor;
  height: var(--range-thumb-size);
  width: var(--range-thumb-size);
  border: var(--range-p) solid;
  top: 50%;
  color: var(--range-progress);
  box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill));
}

.range:disabled {
  cursor: not-allowed;
  opacity: 30%;
}

.progress {
  position: relative;
  height: calc(0.25rem * 2);
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  border-radius: var(--radius-box);
  background-color: color-mix(in oklab, currentcolor 20%, transparent);
  color: var(--color-base-content);
}

.progress:indeterminate {
  background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
  background-size: 200%;
  background-position-x: 15%;
}

@media (prefers-reduced-motion: no-preference) {
  .progress:indeterminate {
    animation: progress 5s ease-in-out infinite;
  }
}

@supports (-moz-appearance: none) {
  .progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  @media (prefers-reduced-motion: no-preference) {
    .progress:indeterminate::-moz-progress-bar {
      animation: progress 5s ease-in-out infinite;
      background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
      background-size: 200%;
      background-position-x: 15%;
    }
  }

  .progress::-moz-progress-bar {
    border-radius: var(--radius-box);
    background-color: currentcolor;
  }
}

@supports (-webkit-appearance: none) {
  .progress::-webkit-progress-bar {
    border-radius: var(--radius-box);
    background-color: transparent;
  }

  .progress::-webkit-progress-value {
    border-radius: var(--radius-box);
    background-color: currentColor;
  }
}

.progress-success {
  color: var(--color-success);
}

@keyframes progress {
  50% {
    background-position-x: -115%;
  }
}

.swap {
  position: relative;
  display: inline-grid;
  cursor: pointer;
  place-content: center;
  vertical-align: middle;
  webkit-user-select: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.swap input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}

.swap > * {
  grid-column-start: 1;
  grid-row-start: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .swap > * {
    transition-property: transform, rotate, opacity;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.swap .swap-on, .swap .swap-indeterminate, .swap input:indeterminate ~ .swap-on {
  opacity: 0%;
}

.swap input:is(:checked, :indeterminate) ~ .swap-off {
  opacity: 0%;
}

.swap input:checked ~ .swap-on, .swap input:indeterminate ~ .swap-indeterminate {
  opacity: 100%;
  backface-visibility: visible;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.-bottom-10 {
  bottom: -2.5rem;
}

.-left-16 {
  left: -4rem;
}

.-right-2 {
  right: -0.5rem;
}

.-right-2\.5 {
  right: -0.625rem;
}

.-right-3 {
  right: -0.75rem;
}

.-top-14 {
  top: -3.5rem;
}

.-top-2 {
  top: -0.5rem;
}

.-top-2\.5 {
  top: -0.625rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-4 {
  top: -1rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-1 {
  bottom: 0.25rem;
}

.bottom-1\.5 {
  bottom: 0.375rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0px;
}

.left-1 {
  left: 0.25rem;
}

.left-1\.5 {
  left: 0.375rem;
}

.left-1\/2 {
  left: 50%;
}

.left-2 {
  left: 0.5rem;
}

.left-4 {
  left: 1rem;
}

.left-6 {
  left: 1.5rem;
}

.left-\[13\.5px\] {
  left: 13.5px;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-\[4px\] {
  right: 4px;
}

.right-auto {
  right: auto;
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.top-11 {
  top: 2.75rem;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-7 {
  top: 1.75rem;
}

.top-\[-2px\] {
  top: -2px;
}

.top-auto {
  top: auto;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-50 {
  z-index: 50;
}

.z-\[10000\] {
  z-index: 10000;
}

.z-\[1000\] {
  z-index: 1000;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[10\] {
  z-index: 10;
}

.z-\[11\] {
  z-index: 11;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[200\] {
  z-index: 200;
}

.z-\[20\] {
  z-index: 20;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[30\] {
  z-index: 30;
}

.z-\[3\] {
  z-index: 3;
}

.z-\[40\] {
  z-index: 40;
}

.z-\[48\] {
  z-index: 48;
}

.z-\[4\] {
  z-index: 4;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[997\] {
  z-index: 997;
}

.z-\[998\] {
  z-index: 998;
}

.z-\[99999\] {
  z-index: 99999;
}

.z-\[9999\] {
  z-index: 9999;
}

.z-\[999\] {
  z-index: 999;
}

.z-\[99\] {
  z-index: 99;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-first {
  order: -9999;
}

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

.m-0 {
  margin: 0px;
}

.\!my-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.\!-mt-2 {
  margin-top: -0.5rem !important;
}

.\!mb-2 {
  margin-bottom: 0.5rem !important;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.\!mt-1 {
  margin-top: 0.25rem !important;
}

.\!mt-2 {
  margin-top: 0.5rem !important;
}

.\!mt-2\.5 {
  margin-top: 0.625rem !important;
}

.\!mt-8 {
  margin-top: 2rem !important;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-3 {
  margin-left: -0.75rem;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mt-16 {
  margin-top: -4rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.-mt-px {
  margin-top: -1px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-8 {
  margin-left: 2rem;
}

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

.mr-0 {
  margin-right: 0px;
}

.mr-0\.5 {
  margin-right: 0.125rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.\!flex {
  display: flex !important;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.flow-root {
  display: flow-root;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-\[2\.25em\] {
  width: 2.25em;
  height: 2.25em;
}

.size-full {
  width: 100%;
  height: 100%;
}

.h-0 {
  height: 0px;
}

.h-1\/2 {
  height: 50%;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-28 {
  height: 7rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[50px\] {
  height: 50px;
}

.h-\[56px\] {
  height: 56px;
}

.h-\[75\%\] {
  height: 75%;
}

.h-\[75vh\] {
  height: 75vh;
}

.h-\[75vw\] {
  height: 75vw;
}

.h-\[80vh\] {
  height: 80vh;
}

.h-\[calc\(100\%-8px\)\] {
  height: calc(100% - 8px);
}

.h-\[calc\(100dvh-1\.5rem\)\] {
  height: calc(100dvh - 1.5rem);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[600px\] {
  max-height: 600px;
}

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

.max-h-\[90dvh\] {
  max-height: 90dvh;
}

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

.max-h-\[calc\(100dvh-1\.5rem\)\] {
  max-height: calc(100dvh - 1.5rem);
}

.max-h-\[calc\(100dvh-2rem\)\] {
  max-height: calc(100dvh - 2rem);
}

.max-h-full {
  max-height: 100%;
}

.max-h-none {
  max-height: none;
}

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

.min-h-8 {
  min-height: 2rem;
}

.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[280px\] {
  min-height: 280px;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[520px\] {
  min-height: 520px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-52 {
  width: 13rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-96 {
  width: 24rem;
}

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

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

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

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

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

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

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

.w-\[75vw\] {
  width: 75vw;
}

.w-\[calc\(100\%-8px\)\] {
  width: calc(100% - 8px);
}

.w-\[calc\(100vw-1\.5rem\)\] {
  width: calc(100vw - 1.5rem);
}

.w-\[min\(100\%\2c calc\(85vh\*16\/9\)\)\] {
  width: min(100%,calc(85vh * 16 / 9));
}

.w-\[min\(92vw\2c 40rem\)\] {
  width: min(92vw,40rem);
}

.w-auto {
  width: auto;
}

.w-dvw {
  width: 100dvw;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-px {
  width: 1px;
}

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

.min-w-5 {
  min-width: 1.25rem;
}

.min-w-8 {
  min-width: 2rem;
}

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

.min-w-full {
  min-width: 100%;
}

.max-w-0 {
  max-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

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

.max-w-\[19rem\] {
  max-width: 19rem;
}

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

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

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

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

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

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

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

.max-w-\[calc\(100\%-1rem\)\] {
  max-width: calc(100% - 1rem);
}

.max-w-\[min\(32rem\2c calc\(100vw-2rem\)\)\] {
  max-width: min(32rem,calc(100vw - 2rem));
}

.max-w-\[min\(90vw\2c 768px\)\] {
  max-width: min(90vw,768px);
}

.max-w-\[min\(92vw\2c 40rem\)\] {
  max-width: min(92vw,40rem);
}

.max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

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

.max-w-none {
  max-width: none;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

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

.flex-none {
  flex: none;
}

.flex-shrink {
  flex-shrink: 1;
}

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

.shrink {
  flex-shrink: 1;
}

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

.grow {
  flex-grow: 1;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-grab {
  cursor: grab;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

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

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

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

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

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

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

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

.\!flex-row {
  flex-direction: row !important;
}

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

.\!flex-col {
  flex-direction: column !important;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

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

.\!flex-nowrap {
  flex-wrap: nowrap !important;
}

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

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

.\!items-center {
  align-items: center !important;
}

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

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

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

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

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

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

.justify-evenly {
  justify-content: space-evenly;
}

.justify-items-center {
  justify-items: center;
}

.\!gap-0 {
  gap: 0px !important;
}

.gap-0 {
  gap: 0px;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

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

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

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

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

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

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

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

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

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

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hyphens-auto {
  -webkit-hyphens: auto;
          hyphens: auto;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.\!rounded-\[3px\] {
  border-radius: 3px !important;
}

.\!rounded-sm {
  border-radius: 0.125rem !important;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-box {
  border-radius: var(--radius-box);
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-b-xl {
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-t-md {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-\[3px\] {
  border-width: 3px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[var\(--ui-border-medium\)\] {
  border-color: var(--ui-border-medium);
}

.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-t-black {
  --tw-border-opacity: 1;
  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.bg-\[var\(--theme-input-bg\)\] {
  background-color: var(--theme-input-bg);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-base-100 {
  background-color: var(--color-base-100);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75);
}

.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}

.bg-black\/90 {
  background-color: rgb(0 0 0 / 0.9);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-info {
  background-color: var(--color-info);
}

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

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-transparent {
  background-color: transparent;
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-\[radial-gradient\(circle\2c _var\(--theme-secondary-color\2c _\#ffffff\)_0\%\2c _transparent_50\%\)\] {
  background-image: radial-gradient(circle, var(--theme-secondary-color, #ffffff) 0%, transparent 50%);
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.stroke-current {
  stroke: currentColor;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.\!p-0 {
  padding: 0px !important;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.p-px {
  padding: 1px;
}

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

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

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

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

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

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

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

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

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

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

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

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

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-9 {
  padding-bottom: 2.25rem;
}

.pl-0 {
  padding-left: 0px;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

.pr-14 {
  padding-right: 3.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.ps-5 {
  padding-inline-start: 1.25rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-8 {
  padding-top: 2rem;
}

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

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

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.\!text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

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

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

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

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

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

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

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.\!font-medium {
  font-weight: 500 !important;
}

.font-bold {
  font-weight: 700;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.\!leading-relaxed {
  line-height: 1.625 !important;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-\[26px\] {
  line-height: 26px;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-accent-content {
  color: var(--color-accent-content);
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-error {
  color: var(--color-error);
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-info-content {
  color: var(--color-info-content);
}

.text-primary-content {
  color: var(--color-primary-content);
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-success-content {
  color: var(--color-success-content);
}

.text-warning-content {
  color: var(--color-warning-content);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.decoration-solid {
  text-decoration-style: solid;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.underline-offset-\[3px\] {
  text-underline-offset: 3px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-gray-800 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity, 1));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-gray-900 {
  --tw-ring-offset-color: #111827;
}

.ring-offset-white {
  --tw-ring-offset-color: #fff;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[80px\] {
  --tw-blur: blur(80px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-0 {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-50 {
  --tw-brightness: brightness(.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[10px\] {
  --tw-backdrop-blur: blur(10px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.glass {
  border: none;
  -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
          backdrop-filter: blur(var(--glass-blur, 40px));
  background-color: #0000;
  background-image: linear-gradient( 135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0 / 0%) 100% ), linear-gradient( var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0 / 0%) 25% );
  box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0 / 5%);
  text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%));
}

.join {
  display: inline-flex;
  align-items: stretch;
  --join-ss: 0;
  --join-se: 0;
  --join-es: 0;
  --join-ee: 0;
}

.join :where(.join-item) {
  border-start-start-radius: var(--join-ss, 0);
  border-start-end-radius: var(--join-se, 0);
  border-end-start-radius: var(--join-es, 0);
  border-end-end-radius: var(--join-ee, 0);
}

.join :where(.join-item) * {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join > .join-item:where(:first-child) {
  --join-ss: var(--radius-field);
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: 0;
}

.join :first-child:not(:last-child) :where(.join-item) {
  --join-ss: var(--radius-field);
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: 0;
}

.join > .join-item:where(:last-child) {
  --join-ss: 0;
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: var(--radius-field);
}

.join :last-child:not(:first-child) :where(.join-item) {
  --join-ss: 0;
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: var(--radius-field);
}

.join > .join-item:where(:only-child) {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join :only-child :where(.join-item) {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-item:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
  margin-inline-start: calc(var(--border, 1px) * -1);
  margin-block-start: 0;
}

.join-item:where(*:is(:disabled, [disabled], .btn-disabled)) {
  border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
}

.join-vertical > .join-item:first-child {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: 0;
}

.join-vertical :first-child:not(:last-child) .join-item {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: 0;
}

.join-vertical > .join-item:last-child {
  --join-ss: 0;
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-vertical :last-child:not(:first-child) .join-item {
  --join-ss: 0;
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-vertical > .join-item:only-child {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-vertical :only-child .join-item {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-vertical .join-item:where(*:not(:first-child)) {
  margin-inline-start: 0;
  margin-block-start: calc(var(--border, 1px) * -1);
}

.join-horizontal > .join-item:first-child {
  --join-ss: var(--radius-field);
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: 0;
}

.join-horizontal :first-child:not(:last-child) .join-item {
  --join-ss: var(--radius-field);
  --join-se: 0;
  --join-es: var(--radius-field);
  --join-ee: 0;
}

.join-horizontal > .join-item:last-child {
  --join-ss: 0;
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: var(--radius-field);
}

.join-horizontal :last-child:not(:first-child) .join-item {
  --join-ss: 0;
  --join-se: var(--radius-field);
  --join-es: 0;
  --join-ee: var(--radius-field);
}

.join-horizontal > .join-item:only-child {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-horizontal :only-child .join-item {
  --join-ss: var(--radius-field);
  --join-se: var(--radius-field);
  --join-es: var(--radius-field);
  --join-ee: var(--radius-field);
}

.join-horizontal .join-item:where(*:not(:first-child)) {
  margin-inline-start: calc(var(--border, 1px) * -1);
  margin-block-start: 0;
}

.rounded-box {
  border-radius: var(--radius-box);
}

.\[--rounded-btn\:3px\] {
  --rounded-btn: 3px;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (THEME VARIABLES)
   Dynamic theme system - values set by ThemeManager.ts
   ========================================================================== */

:root {
  /* Core Theme Colors - Gray defaults for better fallback */
  --theme-bg-color: #29252A;
  --theme-text-color: #e7e8e8;
  --theme-heading-color: #ffffff;
  --theme-primary-color: #898a8b;
  --theme-secondary-color: #b8b9b9;
  --theme-accent-color: #898a8b;
  --theme-placeholder-color: #b8b9b9;
  --theme-is-dark: 1;
  /* Start as dark mode */
  /* DaisyUI Color Overrides */
  --color-error: #F17175;
  --color-success: #43AC6A;
  /* Cover image preview background */
  --preview-background-color: #374151;
  /* gray-700 */
  /* UI Variables */
  --ui-bg-subtle: rgba(255, 255, 255, 0.1);
  --ui-bg-subtle-hover: rgba(255, 255, 255, 0.2);
  --ui-text-primary: var(--theme-text-color);
  --ui-text-secondary: var(--theme-secondary-color);
  /* Theme Font Variables */
  --theme-font-family: var(--font-family, 'Montserrat, sans-serif');
}

/* ==========================================================================
   UI TEXT CLASSES
   Consistent text color classes for theme-aware components
   ========================================================================== */

.ui-text-primary {
  color: var(--ui-text-primary);
}

.ui-text-secondary {
  color: var(--ui-text-secondary);
}

/* ==========================================================================
   MOBILE DOCK VARIABLES
   ========================================================================== */

:root {
  /* Mobile Dock Variables */
  --mobile-dock-bg: rgba(255, 255, 255, 0.9);
  --mobile-dock-text: #000000;
  --mobile-dock-text-disabled: rgba(0, 0, 0, 0.3);
  /* Modal & Slideout */
  --modal-bg: rgba(30, 30, 30, 0.875);
  --modal-header-bg: rgba(0, 0, 0, 0.25);
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-overlay-bg: oklch(0% 0 0 / 0.5);
  /* Preview Component */
  --preview-background-color: #f8fafc;
  /* Theme Thumb Backgrounds */
  --theme-thumb-bg: #1f2937;
  /* Dark gray for dark theme */
  /* Theme Tray Variables */
  --theme-tray-button-bg: rgba(255, 255, 255, 0.1);
  --theme-tray-button-hover: rgba(255, 255, 255, 0.2);
  --theme-tray-border: rgba(255, 255, 255, 0.1);
  --theme-tray-dropdown-bg: rgba(0, 0, 0, 0.8);
  --theme-tray-dropdown-border: rgba(255, 255, 255, 0.1);
  --theme-tray-option-selected: rgba(255, 255, 255, 0.2);
  --theme-tray-option-hover: rgba(255, 255, 255, 0.1);
  /* UI variables are set dynamically by JavaScript based on theme */
  /* Gift CTA Backgrounds */
  --gift-cta-bg: rgba(0, 0, 0, 0.15);
  /* 15% black for dark mode */
  /* New Section Button */
  --new-section-bg: rgba(255, 255, 255, 0.5);
  /* 50% white for dark mode */
  --new-section-text: rgba(0, 0, 0, 0.5);
  /* 50% black for light mode */
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

body {
  color: var(--theme-text-color);
  min-height: 100vh;
  background-color: var(--theme-bg-color);
}

/* Mobile: match recording-flow — no primary/secondary radial orbs on page bg */

@media (max-width: 767px) {
  body {
    background: var(--theme-bg-gradient-no-orbs, var(--theme-bg-gradient)) !important;
    background-color: var(--theme-bg-color) !important;
    /* Reduce stray horizontal rubber-banding when pulse/shadow effects sit near edges */
    overscroll-behavior-x: none;
  }

  html {
    background: var(--theme-bg-gradient-no-orbs, var(--theme-bg-gradient)) !important;
    background-color: var(--theme-bg-color) !important;
  }
}

/* App is now visible immediately - theme loading is handled gracefully */

/* ==========================================================================
   ICON CONTAINERS
   ========================================================================== */

app-icon,
lottie-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lottie-icon-container,
.svg-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: 0;
}

.lottie-animation-container {
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Slide Up Animation */

.animate-slide-up {
  animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Slide Down Animation */

.animate-fade-slide-down {
  animation: fade-slide-down 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating Emoji Animation */

@keyframes float {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--move-x), var(--move-y));
    opacity: 0;
  }
}

.floating-emoji {
  --move-x: calc(cos(var(--direction)) * 200vh);
  --move-y: calc(sin(var(--direction)) * 200vh);
  will-change: transform;
  animation: float linear var(--duration) infinite;
  transition: opacity 0.3s ease;
}

/* Depth layers — some emojis are "further away" for parallax feel */

/* Opacity applied to inner .rotating span so it multiplies with the fade-in/out animation */

/* Midground — slight blur, slightly faded */

.floating-emoji:nth-child(3n) {
  filter: blur(2px);
}

.floating-emoji:nth-child(3n) .rotating {
  opacity: 0.55;
}

/* Background — more blur, more faded, feels distant */

.floating-emoji:nth-child(4n+1) {
  filter: blur(4.5px);
}

.floating-emoji:nth-child(4n+1) .rotating {
  opacity: 0.35;
}

/* Foreground (default) — sharp, full opacity, no extra rules needed */

/* Rotation Animation */

@keyframes rotate {
  from {
    transform: rotate(var(--rotation));
  }

  to {
    transform: rotate(calc(var(--rotation) + 360deg));
  }
}

.rotating {
  animation: rotate linear var(--rotation-duration) infinite;
}

/* Glow Button – Wave Effect */

@keyframes glowWipe {
  0% {
    -webkit-mask-position: 200% center;
            mask-position: 200% center;
  }

  100% {
    -webkit-mask-position: 0% center;
            mask-position: 0% center;
  }
}

.pulse-button {
  --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  );
  --spring-duration: 1.33s;
  position: relative;
  isolation: isolate;
  border: none !important;
  outline: none !important;
  overflow: visible;
  scale: 1;
  transition: all var(--spring-duration) var(--spring-easing);
}

.pulse-button .shimmer {
  position: absolute;
  inset: -40px;
  border-radius: inherit;
  mix-blend-mode: color-dodge;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    90deg, transparent 15%, black 45%, black 55%, transparent 85%
  );
          mask-image: linear-gradient(
    90deg, transparent 15%, black 45%, black 55%, transparent 85%
  );
  -webkit-mask-size: 200% 200%;
          mask-size: 200% 200%;
  -webkit-mask-position: center;
          mask-position: center;
  animation: glowWipe 3s linear infinite both -0.5s;
}

/* Navbar CTAs: static sheen only (no sweep). Inset 0 + normal blend — negative inset + plus-lighter drew a “ghost” on the navbar. */

.pulse-button--navbar .shimmer {
  inset: 0;
  z-index: 0;
  animation: none;
  -webkit-mask-image: none;
          mask-image: none;
  mix-blend-mode: normal;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(255, 255, 255, 0.12) 52%,
    rgba(255, 255, 255, 0) 72%
  );
}

.pulse-button .shimmer::before,
.pulse-button .shimmer::after {
  transition: all 0.5s ease;
  opacity: 1;
  content: "";
  border-radius: inherit;
  position: absolute;
  inset: 40px;
}

.pulse-button .shimmer::before {
  box-shadow:
    0 0 3px 2px hsla(0, 0%, 100%, 0.4),
    0 0 7px 4px hsla(0, 0%, 100%, 0.25),
    0 0 13px 8px hsla(0, 0%, 100%, 0.12),
    0 0 22px 6px hsla(0, 0%, 100%, 0.05);
  z-index: -1;
}

.pulse-button .shimmer::after {
  box-shadow:
    inset 0 0 0 1px hsla(0, 0%, 100%, 0.3),
    inset 0 0 3px 1px hsla(0, 0%, 100%, 0.2),
    inset 0 0 9px 1px hsla(0, 0%, 100%, 0.1);
  z-index: 2;
}

.pulse-button:hover:not(:active) {
  scale: 1.05;
  transition-duration: calc(var(--spring-duration) * 0.5);
}

.pulse-button:active {
  scale: 1.05;
  transition-duration: calc(var(--spring-duration) * 0.5);
}

.pulse-button:hover .shimmer,
.pulse-button:active .shimmer {
  animation-play-state: paused !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

.pulse-button:hover .shimmer::before,
.pulse-button:hover .shimmer::after {
  opacity: 1;
}

.pulse-button:focus {
  outline: none !important;
}

/* Navbar: no pulse halos — they extended past the tile and read as a smudge. Sheen is the .shimmer layer only. */

.pulse-button--navbar .shimmer::before,
.pulse-button--navbar .shimmer::after {
  display: none !important;
}

.pulse-button--navbar:hover:not(:active),
.pulse-button--navbar:active {
  scale: 1 !important;
}

/*
 * Creator navbar primary CTA — same face as desktop right panel (.right-panel-themed) & form primary CTAs:
 * --form-button-gradient (solid base + primary→secondary blush), not the public secondary row (.public-secondary-action-btn).
 */

.navbar-cta-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
  flex-shrink: 0;
  align-self: stretch;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 !important;
  border-bottom-left-radius: 0.75rem !important;
  border: 1px solid var(--form-button-border) !important;
  box-shadow: none !important;
  outline: none !important;
  scale: 1 !important;
  min-height: 3.5rem;
  height: auto;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  background: var(--form-button-gradient) !important;
  color: var(--form-button-text) !important;
  transition: filter 0.2s ease, opacity 0.15s ease;
}

.navbar-cta-btn > span:not(.shimmer) {
  position: relative;
  z-index: 1;
  line-height: 1.25;
}

.navbar-cta-btn:hover {
  filter: brightness(1.04);
  scale: 1 !important;
  box-shadow: none !important;
}

.navbar-cta-btn:active {
  scale: 1 !important;
}

.navbar-cta-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary-color) 55%, white);
  outline-offset: 2px;
}

/* Pre-deadline navbar CTA: muted like disabled right-rail items; still clickable for explanatory toast */

.navbar-cta-btn.navbar-cta-btn--predeadline {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.08) brightness(0.94);
}

.navbar-cta-btn.navbar-cta-btn--predeadline:hover {
  filter: grayscale(0.08) brightness(0.94);
}

.navbar-cta-btn.navbar-cta-btn--predeadline .shimmer {
  opacity: 0.25;
}

/* Desktop: only the primary CTA stays in view; pinned flush to viewport top-right (safe-area only). */

@media (min-width: 768px) {
  /* Daisy `.navbar` uses padding: 0.5rem; when fixed CTA loses the cascade it sits in-flow and looks inset. */

  tribute-navbar-creator .navbar {
    padding: 0;
  }

  tribute-navbar-creator .navbar-cta-btn {
    position: fixed !important;
    top: max(0px, env(safe-area-inset-top, 0px)) !important;
    right: max(0px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 46;
    align-self: center !important;
    /* Same band as Daisy `.navbar` (4rem + vertical center); avoids label sitting high when flush to top. */
    min-height: 4rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Reserve space for the fixed CTA: --creator-navbar-cta-reserve = ceil(width)+8px on the host (NavbarCreator). */

  tribute-navbar-creator #tribute-controls {
    padding-right: var(--creator-navbar-cta-reserve, 12.5rem);
    padding-left: 0.25rem;
  }

  tribute-navbar-creator .navbar-cta-fixed-slot {
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    flex-shrink: 0;
  }
}

.reveal-open tribute-navbar-creator .navbar-cta-btn,
body.video-player-open tribute-navbar-creator .navbar-cta-btn,
body.ios-fullscreen-body tribute-navbar-creator .navbar-cta-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  z-index: auto !important;
}

.reveal-open tribute-navbar-creator #tribute-controls,
body.video-player-open tribute-navbar-creator #tribute-controls,
body.ios-fullscreen-body tribute-navbar-creator #tribute-controls {
  padding-right: 0 !important;
}

.reveal-open tribute-navbar-creator .navbar-cta-fixed-slot,
body.video-player-open tribute-navbar-creator .navbar-cta-fixed-slot,
body.ios-fullscreen-body tribute-navbar-creator .navbar-cta-fixed-slot {
  width: auto !important;
  min-width: 12.5rem !important;
}

/*
 * Pulse CTA + horizontal overflow on narrow viewports:
 * - The shimmer layer uses inset: -40px, which extends far outside a full-width button
 *   and widens scrollable overflow past 100vw.
 * - scale: 1.05 on hover/active grows a w-full button past its column.
 * Tighten the glow + drop the scale bump on small screens instead of overflow:hidden
 * on a parent (which clips the button during press/hover).
 */

@media (max-width: 1023px) {
  .pulse-button .shimmer {
    inset: -12px;
  }

  .pulse-button .shimmer::before,
  .pulse-button .shimmer::after {
    inset: 12px;
  }

  .pulse-button--navbar .shimmer {
    inset: 0;
  }
}

@media (max-width: 767px) {
  .pulse-button:hover:not(:active),
  .pulse-button:active {
    scale: 1;
  }

  /* Navbar primary CTA: compact on mobile; subtler radius than desktop pill; desktop unchanged above md */

  .navbar-cta-btn {
    align-self: center !important;
    border-radius: 0.5rem !important;
    min-height: 0 !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    padding-left: 1.05rem !important;
    padding-right: 1.05rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
  }
}

/* Touch-first: no hover grow (avoids :active scale during vertical scroll on tap) */

@media (hover: none) {
  .pulse-button:hover:not(:active),
  .pulse-button:active {
    scale: 1;
  }
}

/* ==========================================================================
   PARTIFUL-STYLE GRADIENT BUTTONS
   Global override: any button using --theme-primary-color as background
   gets the white gradient with primary→secondary color blush at the bottom.
   ========================================================================== */

[style*="background-color: var(--theme-primary-color)"],
[style*="background-color:var(--theme-primary-color)"] {
  background: var(--form-button-gradient) !important;
  color: var(--form-button-text) !important;
  border-color: var(--form-button-border) !important;
}

/* Add-on product buttons - secondary styling so they don't compete with checkout CTA
   Dark: 75% white fill with white text; Light: inversed (75% black fill with white text) */

.addon-add-btn {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.addon-add-btn:hover:not(.btn-disabled):not(:disabled) {
  background: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .addon-add-btn {
  background: rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="light"] .addon-add-btn:hover:not(.btn-disabled):not(:disabled) {
  background: rgba(0, 0, 0, 0.9) !important;
}

/* Create Tribute Modal Styles */

#create-tribute-form input::-moz-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#create-tribute-form input::placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

/* Sparkles pulse animation */

@keyframes sparkle-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

#sparkles-image {
  animation: sparkle-pulse 3.5s ease-in-out infinite;
}

/* Remove diagonal clip-path on mobile for hero section */

@media (max-width: 767px) {
  .hero-section {
    clip-path: none !important;
  }
}

/* CreateTributeModal: Lock body scroll on mobile so modal content scrolls */

body.create-tribute-modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* CreateTributeModal: Mobile hero - shrink 8M graphic, center it + heading + text */

@media (max-width: 767px) {
  /* Clip hero video to modal's rounded top corners */

  .hero-section {
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0 !important;
  }

  .hero-content-overlay {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  .hero-content-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-8m-graphic {
    justify-content: center;
    margin-bottom: 0.75rem !important;
  }

  .hero-8m-flower {
    height: 2rem !important;
    width: 1.5rem !important;
  }

  .hero-8m-text span:first-child,
  .hero-8m-text span:last-child {
    font-size: 0.5625rem !important;
  }

  .hero-8m-text span:nth-child(2) {
    font-size: 0.875rem !important;
  }

  .hero-headline {
    text-align: center;
    margin-bottom: 0.5rem !important;
  }

  .hero-description {
    text-align: center;
    margin-top: 0;
  }

  /* Form section stays left-aligned */

  .create-tribute-form-section {
    text-align: left;
  }

  /* "Let's go! It only takes 1 minute!"*/

  .create-tribute-lets-go {
    font-size: 15px !important;
    font-weight: 500;
  }

  .create-tribute-3min {
    font-weight: 400 !important;
  }
}

/* Custom toggle colors using theme variables */

.toggle-theme {
  border-color: var(--theme-input-border) !important;
  background-color: var(--theme-input-bg) !important;
}

.toggle-theme:checked {
  background-color: var(--theme-secondary-color) !important;
  border-color: var(--theme-secondary-color) !important;
}

/* ==========================================================================
   AURORA BACKGROUND EFFECTS
   Vivid, defined, colorful blobs with dramatic movement (Partiful-inspired)
   ========================================================================== */

.aurora-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  opacity: 0.6;
  mix-blend-mode: screen;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  transform: translateZ(0);
}

/* Aurora Color Variations — saturated, dense cores, wide halos */

.aurora-blob.yellow {
  background: radial-gradient(circle, rgba(255, 210, 60, 0.85) 0%, rgba(255, 200, 50, 0.45) 30%, rgba(255, 190, 40, 0.12) 60%, transparent 80%);
}

.aurora-blob.green {
  background: radial-gradient(circle, rgba(50, 255, 130, 0.8) 0%, rgba(60, 230, 120, 0.4) 30%, rgba(70, 210, 110, 0.1) 60%, transparent 80%);
}

.aurora-blob.blue {
  background: radial-gradient(circle, rgba(80, 160, 255, 0.85) 0%, rgba(100, 170, 255, 0.45) 30%, rgba(120, 180, 255, 0.12) 60%, transparent 80%);
}

.aurora-blob.white {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.08) 60%, transparent 80%);
}

.aurora-blob.purple {
  background: radial-gradient(circle, rgba(180, 100, 255, 0.85) 0%, rgba(170, 90, 255, 0.45) 30%, rgba(160, 80, 255, 0.12) 60%, transparent 80%);
}

.aurora-blob.pink {
  background: radial-gradient(circle, rgba(255, 70, 180, 0.85) 0%, rgba(255, 80, 170, 0.45) 30%, rgba(255, 90, 160, 0.12) 60%, transparent 80%);
}

.aurora-blob.orange {
  background: radial-gradient(circle, rgba(255, 140, 50, 0.85) 0%, rgba(255, 130, 40, 0.45) 30%, rgba(255, 120, 30, 0.12) 60%, transparent 80%);
}

.aurora-blob.teal {
  background: radial-gradient(circle, rgba(0, 220, 210, 0.8) 0%, rgba(10, 200, 195, 0.4) 30%, rgba(20, 185, 180, 0.1) 60%, transparent 80%);
}

/* Aurora Blend Mode Variations — add depth & richness */

.aurora-blob:nth-child(3n) {
  mix-blend-mode: screen;
  filter: blur(50px) saturate(1.3);
}

.aurora-blob:nth-child(5n) {
  mix-blend-mode: screen;
  filter: blur(60px) brightness(1.15);
}

.aurora-blob:nth-child(2n) {
  filter: blur(45px) saturate(1.2) brightness(1.1);
}

.aurora-blob:nth-child(4n) {
  filter: blur(55px) brightness(1.1) contrast(1.1);
}

/* Aurora Movement Keyframes — wider sweeps, more drama */

@keyframes aurora-move-1 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  20%  {
    transform: translate(420px, 180px) scale(1.15);
  }

  45%  {
    transform: translate(120px, 500px) scale(0.88);
  }

  70%  {
    transform: translate(-300px, 280px) scale(1.1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-2 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  30%  {
    transform: translate(-380px, 220px) scale(1.12);
  }

  60%  {
    transform: translate(300px, -180px) scale(0.9);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-3 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  35%  {
    transform: translate(-450px, -200px) scale(0.85);
  }

  65%  {
    transform: translate(250px, 350px) scale(1.2);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-4 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  25%  {
    transform: translate(500px, -250px) scale(1.1);
  }

  55%  {
    transform: translate(-150px, 200px) scale(0.92);
  }

  80%  {
    transform: translate(250px, 100px) scale(1.08);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-5 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  25%  {
    transform: translate(-200px, 400px) scale(1.08);
  }

  50%  {
    transform: translate(350px, 150px) scale(0.88);
  }

  75%  {
    transform: translate(-100px, -200px) scale(1.15);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-6 {
  0%   {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  20%  {
    transform: translate(300px, -150px) scale(1.2) rotate(60deg);
  }

  45%  {
    transform: translate(-200px, 300px) scale(0.8) rotate(120deg);
  }

  70%  {
    transform: translate(200px, 200px) scale(1.15) rotate(200deg);
  }

  100% {
    transform: translate(0, 0) scale(1) rotate(360deg);
  }
}

@keyframes aurora-move-7 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  30%  {
    transform: translate(-400px, -250px) scale(1.25);
  }

  60%  {
    transform: translate(300px, -400px) scale(0.75);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes aurora-move-8 {
  0%   {
    transform: translate(0, 0) scale(1);
  }

  20%  {
    transform: translate(250px, 350px) scale(1.1);
  }

  50%  {
    transform: translate(-350px, 100px) scale(0.9);
  }

  75%  {
    transform: translate(100px, -300px) scale(1.18);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@media (max-width: 768px) {
  .aurora-blob {
    filter: blur(40px);
  }
}

/* ==========================================================================
   PATTERN BACKGROUND EFFECTS
   CSS-based pattern backgrounds for theme system
   ========================================================================== */

.pattern-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Full-size Pattern Implementations */

.pattern-container.pattern-zigzag {
  background: conic-gradient(from -45deg, #ffffff 90deg, transparent 90.5deg), conic-gradient(from 135deg, #ffffff 90deg, transparent 90.5deg) 42.5px 0, #000000 !important;
  background-size: 85px 85px !important;
}

.pattern-container.pattern-circles {
  --s: 150px;
  --c1: #ffffff;
  --c2: #000000;
  --_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%, var(--c1) 36% 45%, var(--c2) 46% 55%, var(--c1) 56% 65%, var(--c2) 66% 75%, var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;
  background:
    radial-gradient(50% 50% at 100% 0, var(--_g)),
    radial-gradient(50% 50% at 0 100%, var(--_g)),
    radial-gradient(50% 50%, var(--_g)),
    radial-gradient(50% 50%, var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--c1) !important;
  background-size: var(--s) var(--s) !important;
}

.pattern-container.pattern-equals {
  background: linear-gradient(135deg, transparent 20.5%, #ffffff 0 29.5%, transparent 0) 0 39.75px, linear-gradient(45deg, transparent 8%, #ffffff 0 17%, transparent 0 58%) 79.5px 0, linear-gradient(135deg, transparent 8%, #ffffff 0 17%, transparent 0 58%, #ffffff 0 67%, transparent 0), linear-gradient(45deg, transparent 8%, #ffffff 0 17%, transparent 0 58%, #ffffff 0 67%, transparent 0 83%, #ffffff 0 92%, transparent 0), #000000 !important;
  background-size: 159px 159px !important;
}

.pattern-container.pattern-parallelograms {
  background: linear-gradient(atan(-.5), #ffffff 33%, #000000 33.5% 66.5%, #ffffff 67%) !important;
  background-size: 159px 159px !important;
}

.pattern-container.pattern-triangles {
  background: conic-gradient(from 150deg at 50% 33%, transparent, #000000 .5deg 60deg, transparent 60.5deg) calc(60px) calc(84.85px), conic-gradient(from -30deg at 50% 66%, transparent, #808080 .5deg 60deg, #ffffff 60.5deg) !important;
  background-size: 120px calc(103.9px) !important;
}

.pattern-container.pattern-hearts {
  background: radial-gradient(at 80% 80%, #000000 25.4%, transparent 26%), radial-gradient(at 20% 80%, #000000 25.4%, transparent 26%), conic-gradient(from -45deg at 50% 41%, #000000 90deg, #ffffff 0) calc(60px) 0 !important;
  background-size: 120px 120px !important;
}

.pattern-container.pattern-stars {
  background: conic-gradient(from 162deg at calc(50px) calc(68px), #ffffff 36deg, transparent 0), conic-gradient(from 18deg at calc(19px) calc(59px), #ffffff 36deg, transparent 0), conic-gradient(from 306deg at calc(81px) calc(59px), #ffffff 36deg, transparent 0), #000000 !important;
  background-position: 0 calc(35px) !important;
  background-size: 110px 110px !important;
}

.pattern-container.pattern-rhombus {
  background: linear-gradient(45deg, transparent calc(25%/3), #000000 0 calc(50%/3), transparent 0 calc(250%/3), #000000 0 calc(275%/3), transparent 0), linear-gradient(45deg, #000000 calc(25%/3), transparent 0 calc(50%/3), #000000 0 25%, transparent 0 75%, #000000 0 calc(250%/3), transparent 0 calc(275%/3), #000000 0), linear-gradient(-45deg, transparent calc(25%/3), #000000 0 calc(50%/3), transparent 0 calc(250%/3), #000000 0 calc(275%/3), transparent 0), linear-gradient(-45deg, #000000 calc(25%/3), transparent 0 calc(50%/3), #000000 0 25%, transparent 0 75%, #000000 0 calc(250%/3), transparent 0 calc(275%/3), #000000 0) #ffffff !important;
  background-position: 0 0, 100px 100px, 0 0, 100px 100px !important;
  background-size: 200px 200px !important;
}

.pattern-container.pattern-quatrefoils {
  background: radial-gradient(27% 29% at right, transparent 83%, #ffffff 85% 99%, transparent 101%) calc(30px) 60px, radial-gradient(27% 29% at left, transparent 83%, #ffffff 85% 99%, transparent 101%) calc(-30px) 60px, radial-gradient(29% 27% at top, transparent 83%, #ffffff 85% 99%, transparent 101%) 0 calc(30px), radial-gradient(29% 27% at bottom, transparent 83%, #ffffff 85% 99%, transparent 101%) 0 calc(-30px) #000000 !important;
  background-size: 120px 120px !important;
}

.pattern-container.pattern-waves {
  background: radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #000000 34% 99%, transparent 101%), radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #000000 34% 99%, transparent 101%) 0 90px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #808080 34% 99%, transparent 101%) 30px 90px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #808080 34% 99%, transparent 101%) 30px 180px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #000000 34% 99%, transparent 101%) 60px 180px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #000000 34% 99%, transparent 101%) 60px 270px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #808080 34% 99%, transparent 101%) 90px 270px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #808080 34% 99%, transparent 101%) 90px 0, repeating-linear-gradient(#000000 0 25%, #808080 0 50%) !important;
  background-size: 120px 360px !important;
}

.pattern-container.pattern-bricks {
  background: linear-gradient(135deg, transparent 20%, #808080 20% 30%, transparent 0), repeating-linear-gradient(45deg, #808080 20% 30%, #000000 0 70%) !important;
  background-size: 100px 100px !important;
}

.pattern-container.pattern-flower-petals {
  background: radial-gradient(25% 25% at 25% 25%, #808080 99%, transparent 101%) 60px 60px/120px 120px, radial-gradient(25% 25% at 25% 25%, #808080 99%, transparent 101%) 0 0/120px 120px, radial-gradient(50% 50%, #000000 98%, transparent) 0 0/60px 60px, repeating-conic-gradient(#000000 0 25%, #808080 0 50%) 30px 0/120px 60px !important;
}

/* Pattern Preview Classes (for theme tray thumbnails) */

.pattern-preview.preview-circles {
  background: radial-gradient(50% 50% at 100% 0, #808080 0% 5%, #000000 6% 15%, #808080 16% 25%, #000000 26% 35%, #808080 36% 45%, #000000 46% 55%, #808080 56% 65%, #000000 66% 75%, #808080 76% 85%, #000000 86% 95%, transparent 96%), radial-gradient(50% 50% at 0 100%, #808080 0% 5%, #000000 6% 15%, #808080 16% 25%, #000000 26% 35%, #808080 36% 45%, #000000 46% 55%, #808080 56% 65%, #000000 66% 75%, #808080 76% 85%, #000000 86% 95%, transparent 96%), radial-gradient(50% 50%, #808080 0% 5%, #000000 6% 15%, #808080 16% 25%, #000000 26% 35%, #808080 36% 45%, #000000 46% 55%, #808080 56% 65%, #000000 66% 75%, #808080 76% 85%, #000000 86% 95%, transparent 96%), radial-gradient(50% 50%, #808080 0% 5%, #000000 6% 15%, #808080 16% 25%, #000000 26% 35%, #808080 36% 45%, #000000 46% 55%, #808080 56% 65%, #000000 66% 75%, #808080 76% 85%, #000000 86% 95%, transparent 96%) 88px 88px #808080;
  background-size: 16px 16px;
}

.pattern-preview.preview-triangles {
  background: conic-gradient(from 150deg at 50% 33%, transparent, #000000 .5deg 60deg, transparent 60.5deg) calc(6px) calc(8.485px), conic-gradient(from -30deg at 50% 66%, transparent, #808080 .5deg 60deg, #000000 60.5deg);
  background-size: 12px calc(10.39px);
}

.pattern-preview.preview-hearts {
  background: radial-gradient(at 80% 80%, #000000 25.4%, transparent 26%), radial-gradient(at 20% 80%, #000000 25.4%, transparent 26%), conic-gradient(from -45deg at 50% 41%, #000000 90deg, #808080 0) calc(6px) 0;
  background-size: 12px 12px;
}

.pattern-preview.preview-rhombus {
  background: linear-gradient(45deg, transparent calc(25%/3), #000000 0 calc(50%/3), transparent 0 calc(250%/3), #000000 0 calc(275%/3), transparent 0), linear-gradient(45deg, #000000 calc(25%/3), transparent 0 calc(50%/3), #000000 0 25%, transparent 0 75%, #000000 0 calc(250%/3), transparent 0 calc(275%/3), #000000 0), linear-gradient(-45deg, transparent calc(25%/3), #000000 0 calc(50%/3), transparent 0 calc(250%/3), #000000 0 calc(275%/3), transparent 0), linear-gradient(-45deg, #000000 calc(25%/3), transparent 0 calc(50%/3), #000000 0 25%, transparent 0 75%, #000000 0 calc(250%/3), transparent 0 calc(275%/3), #000000 0) #808080;
  background-position: 0 0, 10px 10px, 0 0, 10px 10px;
  background-size: 20px 20px;
}

.pattern-preview.preview-quatrefoils {
  background: radial-gradient(27% 29% at right, transparent 83%, #000000 85% 99%, transparent 101%) calc(3px) 6px, radial-gradient(27% 29% at left, transparent 83%, #000000 85% 99%, transparent 101%) calc(-3px) 6px, radial-gradient(29% 27% at top, transparent 83%, #000000 85% 99%, transparent 101%) 0 calc(3px), radial-gradient(29% 27% at bottom, transparent 83%, #000000 85% 99%, transparent 101%) 0 calc(-3px) #808080;
  background-size: 12px 12px;
}

.pattern-preview.preview-waves {
  background: radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #000000 34% 99%, transparent 101%), radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #000000 34% 99%, transparent 101%) 0 9px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #808080 34% 99%, transparent 101%) 3px 9px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #808080 34% 99%, transparent 101%) 3px 18px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #000000 34% 99%, transparent 101%) 6px 18px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #000000 34% 99%, transparent 101%) 6px 27px, radial-gradient(37.5% 12.5% at 62.5% 100%, transparent 32%, #808080 34% 99%, transparent 101%) 9px 27px, radial-gradient(37.5% 12.5% at 62.5% 0, transparent 32%, #808080 34% 99%, transparent 101%) 9px 0, repeating-linear-gradient(#000000 0 25%, #808080 0 50%);
  background-size: 12px 36px;
}

.pattern-preview.preview-bricks {
  background: linear-gradient(135deg, transparent 20%, #808080 20% 30%, transparent 0), repeating-linear-gradient(45deg, #808080 20% 30%, #000000 0 70%);
  background-size: 10px 10px;
}

.pattern-preview.preview-flower-petals {
  background: radial-gradient(25% 25% at 25% 25%, #808080 99%, transparent 101%) 6px 6px/12px 12px, radial-gradient(25% 25% at 25% 25%, #808080 99%, transparent 101%) 0 0/12px 12px, radial-gradient(50% 50%, #000000 98%, transparent) 0 0/6px 6px, repeating-conic-gradient(#000000 0 25%, #808080 0 50%) 3px 0/12px 6px;
}

.pattern-preview.preview-stars {
  background: conic-gradient(from 162deg at calc(5px) calc(6.8px), #000000 36deg, transparent 0), conic-gradient(from 18deg at calc(1.9px) calc(5.9px), #000000 36deg, transparent 0), conic-gradient(from 306deg at calc(8.1px) calc(5.9px), #000000 36deg, transparent 0), #808080;
  background-position: 0 calc(3.5px);
  background-size: 11px 11px;
}

.pattern-preview.preview-parallelograms {
  background: linear-gradient(atan(-.5), #808080 33%, #000000 33.5% 66.5%, #808080 67%) 0/16px 16px;
}

.pattern-preview.preview-zigzag {
  background: conic-gradient(from -45deg, #000000 90deg, transparent 90.5deg), conic-gradient(from 135deg, #000000 90deg, transparent 90.5deg) 8px 0, #808080;
  background-size: 16px 16px;
}

.pattern-preview.preview-equals {
  background: linear-gradient(135deg, transparent 20.5%, #000000 0 29.5%, transparent 0) 0 4px, linear-gradient(45deg, transparent 8%, #000000 0 17%, transparent 0 58%) 8px 0, linear-gradient(135deg, transparent 8%, #000000 0 17%, transparent 0 58%, #000000 0 67%, transparent 0), linear-gradient(45deg, transparent 8%, #000000 0 17%, transparent 0 58%, #000000 0 67%, transparent 0 83%, #000000 0 92%, transparent 0), #808080;
  background-size: 16px 16px;
}

/* ==========================================================================
   SCROLLBAR STYLING
   Custom scrollbars for better visual integration
   ========================================================================== */

/* Webkit browsers (Chrome, Safari, Edge) */

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

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

::-webkit-scrollbar-thumb {
  background: var(--ui-border-medium, rgba(255, 255, 255, 0.2));
  border-radius: 4px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ui-border-strong, rgba(255, 255, 255, 0.3));
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border-medium, rgba(255, 255, 255, 0.2)) transparent;
}

/* Slideout-specific scrollbars */

.slideout-content::-webkit-scrollbar {
  width: 6px;
}

.slideout-content::-webkit-scrollbar-track {
  background: transparent;
}

.slideout-content::-webkit-scrollbar-thumb {
  background: var(--ui-border-medium, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
}

.slideout-content::-webkit-scrollbar-thumb:hover {
  background: var(--ui-border-strong, rgba(255, 255, 255, 0.3));
}

/* ==========================================================================
   DAISYUI COMPONENT CUSTOMIZATIONS
   Overrides and enhancements for DaisyUI base components
   ========================================================================== */

/* Button Overrides */

.btn {
  border: none !important;
  font-weight: 500 !important;
}

.btn-lg {
  font-size: 1rem !important;
}

/* Input/Select/Textarea Ghost Variants */

.input-ghost,
.select-ghost,
.textarea-ghost {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--theme-input-bg, rgba(255, 255, 255, 0.05)) !important;
  color: var(--theme-text-color) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.input-ghost:hover,
.select-ghost:hover,
.textarea-ghost:hover {
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  background: var(--theme-input-bg-hover, rgba(255, 255, 255, 0.1)) !important;
}

.input-ghost:focus,
.select-ghost:focus,
.textarea-ghost:focus {
  border: none !important;
  outline: none !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
  background: var(--theme-input-bg-hover, rgba(255, 255, 255, 0.1)) !important;
}

.input-ghost::-moz-placeholder, .select-ghost::-moz-placeholder, .textarea-ghost::-moz-placeholder {
  color: var(--theme-placeholder-color) !important;
}

.input-ghost::placeholder,
.select-ghost::placeholder,
.textarea-ghost::placeholder {
  color: var(--theme-placeholder-color) !important;
}

/* Prompt input placeholder - more subtle */

.prompt-input-placeholder::-moz-placeholder {
  color: var(--theme-text-color) !important;
  opacity: 0.35 !important;
}

.prompt-input-placeholder::placeholder {
  color: var(--theme-text-color) !important;
  opacity: 0.35 !important;
}

.prompt-input-placeholder::-webkit-input-placeholder {
  color: var(--theme-text-color) !important;
  opacity: 0.35 !important;
}

.prompt-input-placeholder::-moz-placeholder {
  color: var(--theme-text-color) !important;
  opacity: 0.35 !important;
}

.prompt-input-placeholder:-ms-input-placeholder {
  color: var(--theme-text-color) !important;
  opacity: 0.35 !important;
}

/* Editable Form Elements - Gradient Effects */

.editable-element {
  transition: all 0.3s ease !important;
  position: relative !important;
}

/* Default state for dashed boxes (use class instead of inline so :hover can override) */

.editable-element.editable-element-dashed-default {
  background-color: var(--ui-bg-subtle);
  border-color: var(--ui-border-medium);
}

.editable-element:hover {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary-color) 40%, transparent) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 40%, transparent) 100%) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.editable-element:focus {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary-color) 40%, transparent) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 40%, transparent) 100%) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
}

.btn-ghost:hover,
.btn-ghost:active,
.btn-ghost:focus,
.btn-ghost:focus-visible {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Chat Component */

.chat {
  -moz-column-gap: normal !important;
       column-gap: normal !important;
}

/* Guest List table */

#guest-table-container .badge-ghost {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Guest List kebab dropdown — section headings (Filter / Export) pure white/black per theme. */

.gl-section-title {
  color: #000 !important;
}

[data-theme="dark"] .gl-section-title {
  color: #fff !important;
}

/* Guest List kebab menu uses the native popover API (renders in the browser's
   top layer) so it can overlap the slideout footer. Reset popover UA defaults
   that would otherwise center it / give it browser margins; our JS sets
   `top`/`right` from the trigger's bounding rect on the toggle event. */

.gl-kebab-menu[popover] {
  margin: 0;
  inset: unset;
  position: fixed;
  z-index: 100;
}

/* DaisyUI's `.menu { display: flex }` beats the popover UA `display: none`,
   so the menu would render visible at its in-flow position before we ever
   call showPopover(). Force it hidden until the popover's open state lands. */

.gl-kebab-menu[popover]:not(:popover-open) {
  display: none !important;
}

.gl-kebab-menu[popover]::backdrop {
  background: transparent;
}

/* Invitations tabs (Individual / Couple / CSV): kill DaisyUI's default rounded
   ends and 80%/10% inset on the active underline so the line sits flush under
   the tab content (icon + label). Tabs themselves use !px-0 + gap-x-6 in markup. */

.invitations-tabs-scroll .tabs-border .tab::before {
  width: 100% !important;
  left: 0 !important;
  border-radius: 0 !important;
}

/* Slideout primary CTA (Send Invitations, Save Settings, etc.): a touch bigger
   than the default DaisyUI btn so the footer feels like a clear next-step.
   Scoped to BaseSlideout's #slideout-footer + .btn.w-full pattern, so dynamic
   className="btn w-full" reassignments (loading / error states) keep the size.
   The InvitationsSlideout's inline sticky CTA (#invitations-cta-bar) shares the
   same sizing. */

#slideout-footer .btn.w-full,
#invitations-cta-bar .btn.w-full {
  font-size: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-height: 0;
  height: auto;
  /* Match the form input radius (rounded-lg = 0.5rem) so fields and buttons
     share the same corner scale. DaisyUI .btn defaults to a smaller radius
     (--radius-field), which made fields read as "rounder" than the CTA. */
  border-radius: 0.5rem;
}

/* Inline sticky CTA bar (InvitationsSlideout): renders under the form and
   stays pinned to the viewport bottom while scrolling through the Guest List.
   Negative side margins extend the opaque background full-width across the
   slideout's content padding so scrolling content doesn't peek through the
   side gutters when the bar is stuck. */

.invitations-cta-bar {
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .invitations-cta-bar {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* InvitationsSlideout: send-invitations loading state + post-success fly-down.
   Overlay scopes to #manual-form-section (which gets `relative`), so the form
   gets covered while the API call runs but the sticky CTA + Guest List below
   stay visible. Lottie loops while the request is in flight (min 2s for the
   "doing something" effect). After success, captured form-row rects animate
   down toward the Guest List section as floating cards (position: fixed so
   no ancestor `overflow: auto` clips them) before the list re-renders. */

.invitations-sending-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--modal-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.invitations-sending-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.invitations-sending-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  text-align: center;
}

.invitations-sending-lottie {
  width: 160px;
  height: 160px;
  /* Slight transparency keeps the Lottie from feeling like a billboard sitting
     on top of the form — lets the dimmed backdrop read as one cohesive layer. */
  opacity: 0.9;
}

.invitations-sending-label {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ui-text-primary);
  /* Subtle pulse so the label feels "alive" alongside the Lottie loop. */
  animation: invitations-sending-pulse 1.6s ease-in-out infinite;
}

@keyframes invitations-sending-pulse {
  0%, 100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

.invitations-fly-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* The fly card itself is a transparent flex container — chrome lives on the
   pill-shaped child fields below. This makes the card read as a clone of the
   form's "Name | Email" row gliding into the Guest List rather than as a
   generic floating tile. Gap matches the form row's gap-2 (mobile) /
   md:gap-4 (desktop). */

.invitations-fly-card {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  will-change: transform, opacity;
  /* Transform runs the full 1.1s for a clearly visible slide-down; opacity is
     delayed 0.75s and fades over the last 0.35s so cards stay solid for most
     of the journey (avoids the "subtle" feel of cards dissolving immediately).
     Eased with cubic-bezier(0.55, 0, 0.1, 1) — slow start, fast finish, like
     the cards are being pulled into the Guest List. */
  transition: transform 1.1s cubic-bezier(0.55, 0, 0.1, 1),
              opacity 0.35s ease-out 0.75s;
}

@media (min-width: 768px) {
  .invitations-fly-card {
    gap: 1rem;
  }
}

/* Each field mirrors the form's `<input class="w-full px-3 py-2 rounded-lg
   border" style="background:var(--ui-bg-subtle);border:1px solid
   var(--ui-border-medium);color:var(--ui-text-primary)">` styling. Subtle
   shadow per field gives a slight "lift" so the cards read as detached from
   the form even before they start moving. */

.invitations-fly-card .fly-card-field {
  flex: 1;
  min-width: 0;
  background-color: var(--ui-bg-subtle);
  border: 1px solid var(--ui-border-medium);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--ui-text-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5),
              0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.invitations-fly-card .fly-card-field[data-role="email"] {
  /* Match the secondary feel of an email field vs. a name field — same
     background but slightly muted text, consistent with the form's hierarchy. */
  color: var(--ui-text-secondary, var(--ui-text-primary));
}

@media (prefers-reduced-motion: reduce) {
  .invitations-fly-card {
    transition: opacity 0.3s ease;
  }

  .invitations-sending-label {
    animation: none;
  }
}

/* ==========================================================================
   FORM VALIDATION & INPUT STYLES
   ========================================================================== */

/* Validation Message Animation */

.validation-message {
  animation: slide-down 0.2s ease-out;
}

/* Modal text input hover/focus styles - more transparent base, 10% brighter on hover/focus */

.modal-text-input[data-is-dark="true"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.modal-text-input[data-is-dark="true"]:hover,
.modal-text-input[data-is-dark="true"]:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.modal-text-input[data-is-dark="false"] {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.modal-text-input[data-is-dark="false"]:hover,
.modal-text-input[data-is-dark="false"]:focus {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

/* Text selection styling for welcome message editor */

#welcome-message-editor::-moz-selection, #welcome-message-editor-settings::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  /* blue-500 with opacity */
  color: inherit !important;
}

#welcome-message-editor::selection,
#welcome-message-editor-settings::selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  /* blue-500 with opacity */
  color: inherit !important;
}

#welcome-message-editor::-moz-selection,
#welcome-message-editor-settings::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  /* blue-500 with opacity */
  color: inherit !important;
}

/* Selection for nested formatting elements (b, strong, i, em, u) */

#welcome-message-editor b::-moz-selection, #welcome-message-editor strong::-moz-selection, #welcome-message-editor i::-moz-selection, #welcome-message-editor em::-moz-selection, #welcome-message-editor u::-moz-selection, #welcome-message-editor-settings b::-moz-selection, #welcome-message-editor-settings strong::-moz-selection, #welcome-message-editor-settings i::-moz-selection, #welcome-message-editor-settings em::-moz-selection, #welcome-message-editor-settings u::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor b::selection,
#welcome-message-editor strong::selection,
#welcome-message-editor i::selection,
#welcome-message-editor em::selection,
#welcome-message-editor u::selection,
#welcome-message-editor-settings b::selection,
#welcome-message-editor-settings strong::selection,
#welcome-message-editor-settings i::selection,
#welcome-message-editor-settings em::selection,
#welcome-message-editor-settings u::selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor b::-moz-selection,
#welcome-message-editor strong::-moz-selection,
#welcome-message-editor i::-moz-selection,
#welcome-message-editor em::-moz-selection,
#welcome-message-editor u::-moz-selection,
#welcome-message-editor-settings b::-moz-selection,
#welcome-message-editor-settings strong::-moz-selection,
#welcome-message-editor-settings i::-moz-selection,
#welcome-message-editor-settings em::-moz-selection,
#welcome-message-editor-settings u::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

/* Selection for nested divs, paragraphs, and list elements */

#welcome-message-editor div::-moz-selection, #welcome-message-editor p::-moz-selection, #welcome-message-editor ul::-moz-selection, #welcome-message-editor ol::-moz-selection, #welcome-message-editor li::-moz-selection, #welcome-message-editor ul li::-moz-selection, #welcome-message-editor ol li::-moz-selection, #welcome-message-editor li *::-moz-selection, #welcome-message-editor p *::-moz-selection, #welcome-message-editor-settings div::-moz-selection, #welcome-message-editor-settings p::-moz-selection, #welcome-message-editor-settings ul::-moz-selection, #welcome-message-editor-settings ol::-moz-selection, #welcome-message-editor-settings li::-moz-selection, #welcome-message-editor-settings ul li::-moz-selection, #welcome-message-editor-settings ol li::-moz-selection, #welcome-message-editor-settings li *::-moz-selection, #welcome-message-editor-settings p *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor div::selection,
#welcome-message-editor p::selection,
#welcome-message-editor ul::selection,
#welcome-message-editor ol::selection,
#welcome-message-editor li::selection,
#welcome-message-editor ul li::selection,
#welcome-message-editor ol li::selection,
#welcome-message-editor li *::selection,
#welcome-message-editor p *::selection,
#welcome-message-editor-settings div::selection,
#welcome-message-editor-settings p::selection,
#welcome-message-editor-settings ul::selection,
#welcome-message-editor-settings ol::selection,
#welcome-message-editor-settings li::selection,
#welcome-message-editor-settings ul li::selection,
#welcome-message-editor-settings ol li::selection,
#welcome-message-editor-settings li *::selection,
#welcome-message-editor-settings p *::selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor div::-moz-selection,
#welcome-message-editor p::-moz-selection,
#welcome-message-editor ul::-moz-selection,
#welcome-message-editor ol::-moz-selection,
#welcome-message-editor li::-moz-selection,
#welcome-message-editor ul li::-moz-selection,
#welcome-message-editor ol li::-moz-selection,
#welcome-message-editor li *::-moz-selection,
#welcome-message-editor p *::-moz-selection,
#welcome-message-editor-settings div::-moz-selection,
#welcome-message-editor-settings p::-moz-selection,
#welcome-message-editor-settings ul::-moz-selection,
#welcome-message-editor-settings ol::-moz-selection,
#welcome-message-editor-settings li::-moz-selection,
#welcome-message-editor-settings ul li::-moz-selection,
#welcome-message-editor-settings ol li::-moz-selection,
#welcome-message-editor-settings li *::-moz-selection,
#welcome-message-editor-settings p *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.5) !important;
  color: inherit !important;
}

/* Ensure list items and paragraphs are selectable */

#welcome-message-editor li,
#welcome-message-editor p,
#welcome-message-editor-settings li,
#welcome-message-editor-settings p {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Settings slideout: password field (override kit-wide user-select: none on controls) */

tribute-settings-slideout #password-input {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* Dark mode selection */

#welcome-message-editor[data-is-dark="true"]::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"]::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  /* blue-400 with opacity for dark mode */
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"]::selection,
#welcome-message-editor-settings[data-is-dark="true"]::selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  /* blue-400 with opacity for dark mode */
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"]::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"]::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  /* blue-400 with opacity for dark mode */
  color: inherit !important;
}

/* Dark mode selection for nested formatting elements */

#welcome-message-editor[data-is-dark="true"] b::-moz-selection, #welcome-message-editor[data-is-dark="true"] strong::-moz-selection, #welcome-message-editor[data-is-dark="true"] i::-moz-selection, #welcome-message-editor[data-is-dark="true"] em::-moz-selection, #welcome-message-editor[data-is-dark="true"] u::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] b::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] strong::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] i::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] em::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] u::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"] b::selection,
#welcome-message-editor[data-is-dark="true"] strong::selection,
#welcome-message-editor[data-is-dark="true"] i::selection,
#welcome-message-editor[data-is-dark="true"] em::selection,
#welcome-message-editor[data-is-dark="true"] u::selection,
#welcome-message-editor-settings[data-is-dark="true"] b::selection,
#welcome-message-editor-settings[data-is-dark="true"] strong::selection,
#welcome-message-editor-settings[data-is-dark="true"] i::selection,
#welcome-message-editor-settings[data-is-dark="true"] em::selection,
#welcome-message-editor-settings[data-is-dark="true"] u::selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"] b::-moz-selection,
#welcome-message-editor[data-is-dark="true"] strong::-moz-selection,
#welcome-message-editor[data-is-dark="true"] i::-moz-selection,
#welcome-message-editor[data-is-dark="true"] em::-moz-selection,
#welcome-message-editor[data-is-dark="true"] u::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] b::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] strong::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] i::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] em::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] u::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

/* Dark mode selection for nested divs, paragraphs, and list elements */

#welcome-message-editor[data-is-dark="true"] div::-moz-selection, #welcome-message-editor[data-is-dark="true"] p::-moz-selection, #welcome-message-editor[data-is-dark="true"] ul::-moz-selection, #welcome-message-editor[data-is-dark="true"] ol::-moz-selection, #welcome-message-editor[data-is-dark="true"] li::-moz-selection, #welcome-message-editor[data-is-dark="true"] ul li::-moz-selection, #welcome-message-editor[data-is-dark="true"] ol li::-moz-selection, #welcome-message-editor[data-is-dark="true"] li *::-moz-selection, #welcome-message-editor[data-is-dark="true"] p *::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] div::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] p::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] ul::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] ol::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] li::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] ul li::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] ol li::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] li *::-moz-selection, #welcome-message-editor-settings[data-is-dark="true"] p *::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"] div::selection,
#welcome-message-editor[data-is-dark="true"] p::selection,
#welcome-message-editor[data-is-dark="true"] ul::selection,
#welcome-message-editor[data-is-dark="true"] ol::selection,
#welcome-message-editor[data-is-dark="true"] li::selection,
#welcome-message-editor[data-is-dark="true"] ul li::selection,
#welcome-message-editor[data-is-dark="true"] ol li::selection,
#welcome-message-editor[data-is-dark="true"] li *::selection,
#welcome-message-editor[data-is-dark="true"] p *::selection,
#welcome-message-editor-settings[data-is-dark="true"] div::selection,
#welcome-message-editor-settings[data-is-dark="true"] p::selection,
#welcome-message-editor-settings[data-is-dark="true"] ul::selection,
#welcome-message-editor-settings[data-is-dark="true"] ol::selection,
#welcome-message-editor-settings[data-is-dark="true"] li::selection,
#welcome-message-editor-settings[data-is-dark="true"] ul li::selection,
#welcome-message-editor-settings[data-is-dark="true"] ol li::selection,
#welcome-message-editor-settings[data-is-dark="true"] li *::selection,
#welcome-message-editor-settings[data-is-dark="true"] p *::selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

#welcome-message-editor[data-is-dark="true"] div::-moz-selection,
#welcome-message-editor[data-is-dark="true"] p::-moz-selection,
#welcome-message-editor[data-is-dark="true"] ul::-moz-selection,
#welcome-message-editor[data-is-dark="true"] ol::-moz-selection,
#welcome-message-editor[data-is-dark="true"] li::-moz-selection,
#welcome-message-editor[data-is-dark="true"] ul li::-moz-selection,
#welcome-message-editor[data-is-dark="true"] ol li::-moz-selection,
#welcome-message-editor[data-is-dark="true"] li *::-moz-selection,
#welcome-message-editor[data-is-dark="true"] p *::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] div::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] p::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] ul::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] ol::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] li::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] ul li::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] ol li::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] li *::-moz-selection,
#welcome-message-editor-settings[data-is-dark="true"] p *::-moz-selection {
  background-color: rgba(96, 165, 250, 0.5) !important;
  color: inherit !important;
}

/* Ensure all content in welcome message editor is selectable (override global user-select: none) */

#welcome-message-editor,
#welcome-message-editor-settings,
#welcome-message-editor *,
#welcome-message-editor-settings * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* List styling for welcome message editor */

#welcome-message-editor ul,
#welcome-message-editor ol,
#welcome-message-editor-settings ul,
#welcome-message-editor-settings ol {
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 !important;
}

#welcome-message-editor ul,
#welcome-message-editor-settings ul {
  list-style-type: disc !important;
}

#welcome-message-editor ol,
#welcome-message-editor-settings ol {
  list-style-type: decimal !important;
}

#welcome-message-editor li,
#welcome-message-editor-settings li {
  margin: 0.25rem 0 !important;
  padding-left: 0.25rem !important;
}

/* List styling for welcome message in CreateForm, PublishView, PublicView, and CompletedView */

#welcome-message-button ul,
#welcome-message-button ol,
#welcome-message-span ul,
#welcome-message-span ol,
#welcome-message-span .text-base ul,
#welcome-message-span .text-base ol,
#welcome-message-display ul,
#welcome-message-display ol,
#welcome-message-inner ul,
#welcome-message-inner ol,
[data-section="welcome"] ul,
[data-section="welcome"] ol,
[data-section="welcome"] .leading-relaxed ul,
[data-section="welcome"] .leading-relaxed ol {
  list-style-position: outside !important;
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 !important;
}

#welcome-message-button ul,
#welcome-message-span ul,
#welcome-message-span .text-base ul,
#welcome-message-display ul,
#welcome-message-inner ul,
[data-section="welcome"] ul,
[data-section="welcome"] .leading-relaxed ul {
  list-style-type: disc !important;
}

#welcome-message-button ol,
#welcome-message-span ol,
#welcome-message-span .text-base ol,
#welcome-message-display ol,
#welcome-message-inner ol,
[data-section="welcome"] ol,
[data-section="welcome"] .leading-relaxed ol {
  list-style-type: decimal !important;
}

#welcome-message-button li,
#welcome-message-span li,
#welcome-message-span .text-base li,
#welcome-message-display li,
#welcome-message-inner li,
[data-section="welcome"] li,
[data-section="welcome"] .leading-relaxed li {
  margin: 0.25rem 0 !important;
  padding-left: 0.25rem !important;
}

/* Paragraph styling for welcome message (p tags with mb-4) */

#welcome-message-button p.mb-4,
#welcome-message-span p.mb-4,
#welcome-message-span .text-base p.mb-4,
#welcome-message-display p.mb-4,
#welcome-message-inner p.mb-4,
[data-section="welcome"] p.mb-4,
[data-section="welcome"] .leading-relaxed p.mb-4 {
  margin-bottom: 1rem !important;
  /* mb-4 = 1rem */
}

/* Auth Modal Input Styles */

.auth-input {
  outline: none !important;
  box-shadow: none !important;
}

.auth-input:focus {
  border: 1px solid #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .auth-input:focus {
  border: 1px solid #000000 !important;
}

/* Specific Input Styling */

input#recipient-name::-moz-placeholder {
  color: var(--theme-placeholder-color) !important;
}

input#recipient-name::placeholder {
  color: var(--theme-placeholder-color) !important;
}

#promo-code-input::-moz-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#promo-code-input::placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#event-name::-moz-placeholder {
  color: var(--theme-placeholder-color) !important;
}

#event-name::placeholder {
  color: var(--theme-placeholder-color) !important;
}

#event-name:hover,
#event-name:focus {
  background: transparent !important;
}

/* Recipient name input - no gradient effects */

#recipient-name {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: opacity 0.3s ease !important;
}

#recipient-name:hover,
#recipient-name:focus,
#recipient-name:active,
#recipient-name:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   MODAL SYSTEM
   Base modal styling with theme integration
   ========================================================================== */

/* Modal Overlay */

.modal {
  background-color: var(--modal-overlay-bg) !important;
  overflow: visible !important;
}

.modal.modal-open,
.modal[open],
.modal:target {
  background-color: var(--modal-overlay-bg) !important;
}

/* Override for guest details modal overlay */

tribute-guest-details-modal .modal {
  background-color: oklch(0% 0 0/ 0.4) !important;
}

/* Start Concierge: no dimmed lightbox — page stays fully visible behind the dialog */

tribute-start-concierge-modal dialog.modal,
tribute-start-concierge-modal dialog.modal[open],
tribute-start-concierge-modal dialog.modal.modal-open {
  background-color: transparent !important;
}

tribute-start-concierge-modal dialog.modal::backdrop {
  background: transparent !important;
}

/* Modal Box */

.modal-box {
  background-color: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
}

/*
 * Daisy/component layers sometimes ship `select-none` on interactive shells; nested dialog content
 * must stay selectable for mailto addresses and longer legal/help copy.
 * Scope selection to `.modal-box` with exceptions so `.btn` / chrome buttons keep Daisy’s `select-none`.
 */

dialog.modal .modal-box {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

dialog.modal .modal-box button,
dialog.modal .modal-box .btn {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

dialog.modal .modal-box .modal-header h2 {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}

dialog.modal .modal-box .modal-content img {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

/*
 * Modal + slideout chrome footers (creator/product shell — not public tribute layout):
 * Global `.btn-ghost:hover` clears background; restore a subtle fill only (no extra border).
 * Solid primary CTAs: match navbar / form CTAs via `--form-button-gradient` (soft base + tinted
 * blush). Raw saturated primary→secondary reads neon vs `.navbar-cta-btn`. Hover reuses the same
 * gradient + slight brightness (touch above navbar’s ~1.04) + lift — no separate hover gradient.
 */

dialog.modal .modal-box .modal-footer .btn.btn-ghost:not(.btn-sm):not(:disabled):not(.btn-disabled),
#slideout-footer .btn.btn-ghost:not(.btn-sm):not(:disabled):not(.btn-disabled),
#invitations-cta-bar .btn.btn-ghost:not(.btn-sm):not(:disabled):not(.btn-disabled) {
  transition: background-color 0.18s ease, transform 0.18s ease !important;
}

dialog.modal .modal-box .modal-footer .btn.btn-ghost:not(.btn-sm):hover:not(:disabled):not(.btn-disabled),
dialog.modal .modal-box .modal-footer .btn.btn-ghost:not(.btn-sm):focus-visible:not(:disabled):not(.btn-disabled),
#slideout-footer .btn.btn-ghost:not(.btn-sm):hover:not(:disabled):not(.btn-disabled),
#slideout-footer .btn.btn-ghost:not(.btn-sm):focus-visible:not(:disabled):not(.btn-disabled),
#invitations-cta-bar .btn.btn-ghost:not(.btn-sm):hover:not(:disabled):not(.btn-disabled),
#invitations-cta-bar .btn.btn-ghost:not(.btn-sm):focus-visible:not(:disabled):not(.btn-disabled) {
  background-color: color-mix(in srgb, var(--theme-text-color) 11%, transparent) !important;
  box-shadow: none !important;
  outline: none !important;
}

dialog.modal .modal-box .modal-footer .btn.btn-ghost:not(.btn-sm):active:not(:disabled):not(.btn-disabled),
#slideout-footer .btn.btn-ghost:not(.btn-sm):active:not(:disabled):not(.btn-disabled),
#invitations-cta-bar .btn.btn-ghost:not(.btn-sm):active:not(:disabled):not(.btn-disabled) {
  background-color: color-mix(in srgb, var(--theme-text-color) 16%, transparent) !important;
}

dialog.modal .modal-box .modal-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):not(:disabled):not(
    .btn-disabled
  ),
#slideout-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):not(:disabled):not(
    .btn-disabled
  ),
#invitations-cta-bar
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):not(:disabled):not(
    .btn-disabled
  ) {
  transition: transform 0.18s ease, filter 0.18s ease !important;
  background: var(--form-button-gradient) !important;
  color: var(--form-button-text) !important;
  border-color: var(--form-button-border) !important;
  filter: none;
  box-shadow: none !important;
}

dialog.modal .modal-box .modal-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
    .btn-disabled
  ),
#slideout-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
    .btn-disabled
  ),
#invitations-cta-bar
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
    .btn-disabled
  ) {
  transform: translateY(-2px);
  box-shadow: none !important;
  background: var(--form-button-gradient) !important;
  filter: brightness(1.06);
}

dialog.modal .modal-box .modal-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
    .btn-disabled
  ),
#slideout-footer
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
    .btn-disabled
  ),
#invitations-cta-bar
  .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
    .btn-disabled
  ) {
  transform: translateY(0);
  box-shadow: none !important;
  background: var(--form-button-gradient) !important;
  filter: brightness(1.02);
}

@media (prefers-reduced-motion: reduce) {
  dialog.modal .modal-box .modal-footer
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
      .btn-disabled
    ),
  dialog.modal .modal-box .modal-footer
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
      .btn-disabled
    ),
  #slideout-footer
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
      .btn-disabled
    ),
  #slideout-footer
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
      .btn-disabled
    ),
  #invitations-cta-bar
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):hover:not(:disabled):not(
      .btn-disabled
    ),
  #invitations-cta-bar
    .btn:not(.btn-ghost):not(.btn-link):not(.btn-outline):not(.btn-error):not(.btn-warning):active:not(:disabled):not(
      .btn-disabled
    ) {
    transform: none;
  }
}

/* Override DaisyUI's max-height for mobile to allow vertical spacing */

/* Use dvh (dynamic viewport height) on mobile to account for browser UI */

/* Modals overlay everything including the footer, so we only need spacing for top/bottom */

@media (max-width: 767px) {
  .modal-box {
    max-width: calc(100dvh - 1.5rem) !important;
  }
}

/* Modal Header */

.modal-header {
  background-color: var(--modal-header-bg) !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Modal Close Button */

#close-modal:hover {
  box-shadow: none !important;
}

/* Modal Tooltip Support */

.modal-box .tooltip {
  overflow: visible !important;
  z-index: 9999 !important;
}

.modal-box .tooltip::before,
.modal-box .tooltip::after {
  z-index: 9999 !important;
}

.modal-box .tooltip::before {
  font-family: var(--app-font-family) !important;
}

.modal .tooltip {
  z-index: 9999 !important;
}

/* ==========================================================================
   SLIDEOUT SYSTEM
   Sidebar panels using modal variables for consistency
   ========================================================================== */

#slideout-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

#slideout-panel {
  background-color: var(--modal-bg) !important;
  border: 1px solid var(--modal-border) !important;
}

#slideout-panel>div:first-child {
  background-color: var(--modal-header-bg) !important;
}

/* Tooltips live in ::before/::after; keep wrapper from clipping (esp. beside overflow-x on body) */

#slideout-panel .tooltip {
  overflow: visible !important;
}

/* Invitations: tabs + share toolbar — tabs may shrink on sm+ so the row doesn’t exceed panel width */

tribute-invitations-slideout #manual-form-section [role='tablist'].tabs > a.tab {
  min-width: 0;
  flex-shrink: 1;
}

/* Daisy tabs-border draws inactive underlines via ::before; with flex-end + active border-top they stack
   and read as a second full-width grey line on mobile — only show the active indicator here. */

tribute-invitations-slideout #manual-form-section [role='tablist'].tabs.tabs-border > a.tab:not(.tab-active)::before {
  display: none !important;
}

/* Daisy tabs-border ::before defaults to width:80% / left:10%, so the bar sits under text only and skips the icon */

tribute-invitations-slideout #manual-form-section [role='tablist'].tabs.tabs-border > a.tab::before {
  left: 0 !important;
  width: 100% !important;
}

@media (max-width: 639px) {
  /* Horizontal tab strip: each tab keeps intrinsic width; parent .invitations-tabs-scroll scrolls */

  tribute-invitations-slideout #manual-form-section .invitations-tabs-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  tribute-invitations-slideout #manual-form-section [role='tablist'].tabs {
    flex-wrap: nowrap;
    align-items: flex-end;
    width: -moz-max-content;
    width: max-content;
  }

  tribute-invitations-slideout #manual-form-section [role='tablist'].tabs > a.tab {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: -moz-max-content;
    min-width: max-content;
    /* Tighter tab strip on small screens (Daisy default --tab-p is 1rem) */
    --tab-p: 0.5rem;
  }
}

/* ==========================================================================
   PROGRESS TRACKER COMPONENT
   Dynamic progress display with theme integration
   ========================================================================== */

/* Progress tracker — lightweight horizontal steps bar */

.progress-tracker-bar {
  transition: all 0.3s ease;
}

/* All steps same height so connector lines (::before top: 1rem) align with circle centers */

.progress-tracker-bar .steps {
  align-items: stretch;
}

/* Hard reset every DaisyUI step pseudo-element — lines */

.progress-tracker-bar .step::before {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: none !important;
  --tw-bg-opacity: 1 !important;
  background-image: none !important;
  transition: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Circle is a real element (.step-circle), not ::after — hide DaisyUI's circle */

.progress-tracker-bar .step::after {
  display: none !important;
}

/* Step: flex column so circle on top, label below; justify-start keeps circle at top so line stays aligned.
   Label style matches right panel: text-xs, font-medium, full theme text color. */

.progress-tracker-bar .step {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  min-height: 3rem;
  color: var(--progress-text-color, #ffffff);
  font-family: var(--font-family, 'Montserrat', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Completed/active steps: full text color */

.progress-tracker-bar .step-accent {
  color: var(--progress-text-color, #ffffff);
}

/* Inactive (next-up) steps: muted text; hover to full color. Light mode: semi-transparent black; dark: semi-transparent white. */

.progress-tracker-bar .step:not(.step-accent) {
  color: var(--progress-step-inactive-text-color, rgba(0,0,0,0.5));
  transition: color 0.2s ease;
}

.progress-tracker-bar .step:not(.step-accent):hover {
  color: var(--progress-text-color, #ffffff);
}

/* Active step text — bold */

.progress-tracker-bar .step.font-bold {
  font-weight: 700;
  color: var(--progress-text-color, #ffffff);
}

/* Connector line (::before): absolute; align to circle center (2.5rem circle = 1.25rem to center) */

.progress-tracker-bar .step::before {
  position: absolute !important;
  top: 1.25rem;
  margin-top: -1.5px;
  height: 3px !important;
  width: calc(100% - 2.5rem) !important;
}

/* ── Circle (real div): larger size + flex center so icon/number are always centered ── */

.progress-tracker-bar .step-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.progress-tracker-bar .step-circle-accent {
  background: var(--progress-step-accent-color, var(--theme-secondary-color)) !important;
}

/* Inactive track: use theme muted text (set per light/dark in ProductProgressTracker), not hardcoded white — light mode track is pale. */

.progress-tracker-bar .step:not(.step-accent) .step-circle {
  background: var(--progress-step-track-color, rgba(255,255,255,0.2)) !important;
  color: var(--progress-step-inactive-text-color, rgba(255,255,255,0.5));
  transition: background 0.2s ease, color 0.2s ease;
}

.progress-tracker-bar .step:not(.step-accent):hover .step-circle {
  background: var(--progress-step-track-color-hover, rgba(255,255,255,0.35)) !important;
  color: var(--progress-text-color, #111827);
}

.progress-tracker-bar .step-number {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
}

.progress-tracker-bar .step-circle app-icon {
  color: inherit;
}

/* ── Connector lines (::before only) ── */

.progress-tracker-bar .step-accent + .step-accent::before {
  background: var(--progress-step-accent-color, var(--theme-secondary-color)) !important;
  opacity: 1 !important;
}

.progress-tracker-bar .step:not(.step-accent)::before,
.progress-tracker-bar .step-accent + .step:not(.step-accent)::before {
  background: var(--progress-step-track-color, rgba(255,255,255,0.2)) !important;
}

/* Hide button: circle positioned over top-right corner of progress tracker */

.progress-tracker-hide-wrap {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
}

.progress-tracker-hide-btn:hover {
  background: var(--progress-tracker-bg) !important;
  opacity: 0.95;
}

/* ==========================================================================
   FUNDRAISING RADIAL PROGRESS
   Custom SVG-based radial progress for fundraising goal tracker
   ========================================================================== */

.fundraising-radial-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fundraising-progress-svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
}

.fundraising-progress-outer {
  fill: none;
  stroke-miterlimit: 10;
}

.fundraising-progress-inner {
  fill: none;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.fundraising-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.fundraising-progress-text span {
  transition: opacity 0.3s ease;
}

/* On small screens, make the steps bar scrollable */

@media (max-width: 640px) {
  .progress-tracker-bar {
    max-width: calc(100vw - 2rem);
    overflow-x: auto;
  }

  .progress-tracker-bar .steps {
    min-width: -moz-max-content;
    min-width: max-content;
  }
}

/* ==========================================================================
   CTA COMPONENT
   Simple transparency for gift CTA
   ========================================================================== */

/* ==========================================================================
   INTERACTIVE ELEMENTS
   Hover states, cursors, and interactive behaviors
   ========================================================================== */

/* Cursor States */

#theme-btn {
  transition: all 0.3s ease !important;
}

#theme-btn:hover {
  background-color: var(--theme-input-bg-hover, rgba(255, 255, 255, 0.1)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

#theme-btn,
#occasion {
  cursor: pointer !important;
}

/* Form Specific */

#prompts-btn:hover {
  background: none;
}

/* Button Effects */

.create-tribute-link {
  transition: all 0.2s ease;
  transform-origin: center bottom;
  text-rendering: geometricPrecision;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ==========================================================================
   IMAGE COMPONENTS
   Image selection and editing interfaces
   ========================================================================== */

.image-item {
  box-sizing: border-box !important;
}

.image-item-selected {
  border: 2px solid white !important;
}

.image-item-hover:hover {
  border: 2px solid white !important;
}

.image-item-inactive {
  border: 2px solid transparent !important;
}

/* ==========================================================================
   UPLOAD COMPONENTS
   File upload and category interfaces
   ========================================================================== */

.upload-area {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.upload-area:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.category-count-pill {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--theme-text-color) !important;
  border: none !important;
}

/* ==========================================================================
   CALENDAR COMPONENTS
   Date picker and calendar styling
   ========================================================================== */

/* Popover Styling */

#start-date-popover {
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  z-index: 1000;
  position: fixed !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#start-date-button {
  cursor: pointer;
  position: relative;
}

/* Cally Calendar Styles */

calendar-date::part(heading) {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

calendar-date::part(button) {
  border-radius: 0.125rem;
  border-style: none;
  background-color: transparent;
}

calendar-month::part(button) {
  cursor: pointer;
  border-radius: 0.25rem;
}

/* Combine month + year into a single header line ("May 2026" with prev/next
   arrows aligned to it). The text is slotted into calendar-date's `heading`
   slot via `bindCallyMonthYearHeading` — this rule hides the now-redundant
   standalone month label that calendar-month renders below.

   Scoped via `:has([data-cally-month-year])` so it only applies to calendars
   that have explicitly opted in by including the slot replacement element
   (which `bindCallyMonthYearHeading` keys on). Any other `<calendar-month>`
   used elsewhere on the site keeps its native heading. */

calendar-date:has([data-cally-month-year]) calendar-month::part(heading) {
  display: none;
}

/* ==========================================================================
   THEME UTILITIES
   Utility classes for theme system and special effects
   ========================================================================== */

/* Theme Cards */

.theme-cards-container>div>div:first-of-type {
  padding-left: 0.625rem;
}

.theme-cards-container>div>div:last-of-type {
  padding-right: 0.625rem;
}

/* Color Picker */

.color-option {
  cursor: pointer;
  filter: saturate(1.5) brightness(1.75);
}

/* Navigation */

.navbar-text {
  color: var(--navbar-text-color, #ffffff) !important;
}

/* Help (chat-support) Lottie: slight stroke so icon matches bell/cart weight */

.support-dropdown-trigger .lottie-animation-container svg path,
.support-dropdown-trigger .lottie-animation-container svg circle {
  stroke: currentColor;
  stroke-width: 0.35;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.navbar-text:hover {
  background-color: transparent !important;
}

/* Creator navbar — "What's next?" outlined pill (transparent fill; dark = soft light ring, light = progress-tracker border token) */

.navbar-whats-next-pill {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.navbar-whats-next-pill:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
}

html[data-theme="light"] .navbar-whats-next-pill {
  border-color: var(--ui-border-subtle) !important;
}

html[data-theme="light"] .navbar-whats-next-pill:hover {
  background-color: var(--ui-bg-subtle-hover) !important;
  border-color: var(--ui-border-medium) !important;
}

/* "What's next?" in PublishView above title (mobile); border uses page chrome tokens */

.mobile-whats-next-pill {
  background-color: transparent !important;
  border: 1px solid var(--ui-border-medium) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

.mobile-whats-next-pill:hover {
  background-color: var(--ui-bg-subtle-hover) !important;
  border-color: var(--ui-border-strong) !important;
}

/* User dropdown menu - active state should match hover state */

.dropdown-content.menu li > a:active,
.dropdown-content.menu li > a:focus,
.dropdown-content.menu li > a:focus-visible {
  background-color: var(--ui-bg-subtle-hover, rgba(255, 255, 255, 0.1)) !important;
  background: var(--ui-bg-subtle-hover, rgba(255, 255, 255, 0.1)) !important;
}

/* Account dropdown - match homepage/pricing exactly */

.account-dropdown-menu {
  padding: 0 !important;
  overflow: hidden;
  max-width: 13rem;
  /* w-52 - enforce width for truncation */
}

.account-dropdown-menu .menu-title {
  padding: 1.25rem !important;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
}

.account-dropdown-menu .menu-title > div {
  min-width: 0;
  overflow: hidden;
}

.account-dropdown-menu .menu-title .truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}

.account-dropdown-menu .divider {
  margin: 0 0.5rem 0.5rem !important;
}

.account-dropdown-menu > li:not(.menu-title):not(.divider) {
  margin: 0 !important;
  padding: 0 0.75rem !important;
}

.account-dropdown-menu > li:last-child:not(.menu-title):not(.divider) {
  margin-bottom: 0.75rem !important;
}

/* Navbar dropdowns: full-width centered on mobile */

@media (max-width: 767px) {
  .navbar .dropdown {
    position: static;
  }

  .navbar .dropdown > .dropdown-content {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--rounded-box, 0.75rem) !important;
  }
}

/* Left Panel Buttons */

.right-panel-btn {
  border-radius: 0.5rem !important;
  transition: background-color 0.2s ease !important;
}

.right-panel-btn:hover {
  transform: none !important;
}

/* Edit Media nav button: badge over the top-right corner of the icon showing
   media count. aspect-ratio:1 + matching min-width/min-height keeps the badge
   a true circle even at 2- or 3-digit counts ("94", "99+"); the daisyUI
   default lets the pill stretch horizontally for multi-digit content, which
   reads as a tag rather than a count chip. Transform is dialed back so the
   badge tucks INTO the icon corner instead of floating off to the right. */

.right-panel-media-badge {
  background-color: var(--progress-accent-color, #ef4444) !important;
  color: var(--progress-accent-text-color, #ffffff) !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  height: auto !important;
  min-height: 1.375rem !important;
  min-width: 1.375rem !important;
  aspect-ratio: 1 !important;
  padding: 0.25rem !important;
  line-height: 1 !important;
  transform: translate(15%, 15%);
}

/* Right Panel Background */

/* Desktop: Semi-transparent background */

.right-panel-container {
  background-color: var(--right-panel-bg) !important;
}

/* Themed right panel (desktop only) */

@media (min-width: 768px) {
  .right-panel-themed {
    background: var(--form-button-gradient) !important;
    border: 1px solid var(--form-button-border);
    border-right: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
  }

  .right-panel-themed:hover {
    opacity: 1;
  }

  .right-panel-container .tooltip:not(.hidden) {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .right-panel-nav-btn {
    color: var(--form-button-text) !important;
    padding: 6px 4px;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
    gap: 2px;
    width: 100%;
  }

  .right-panel-nav-btn span {
    line-height: 1;
  }

  .right-panel-nav-btn app-icon,
  .right-panel-nav-btn app-icon svg {
    color: var(--form-button-text) !important;
  }

  .right-panel-nav-btn app-icon svg path[stroke],
  .right-panel-nav-btn app-icon[name="send"] svg path[stroke] {
    stroke: var(--form-button-text) !important;
  }

  .right-panel-nav-btn app-icon svg path[fill]:not([fill="none"]):not([fill="transparent"]),
  .right-panel-nav-btn app-icon[name="send"] svg path[fill] {
    fill: var(--form-button-text) !important;
  }

  .right-panel-nav-btn app-icon[name="send"] svg path {
    stroke: var(--form-button-text) !important;
    fill: var(--form-button-text) !important;
  }

  .right-panel-nav-btn:not([style*="not-allowed"]):hover {
    opacity: 1;
  }
}

/* Mobile: Use mobile dock background */

@media (max-width: 767px) {
  .right-panel-container {
    background-color: var(--mobile-dock-bg) !important;
    overflow-x: hidden;
  }

  /* Reset themed styles on mobile — keep flat dock appearance */

  .right-panel-themed {
    background-color: var(--mobile-dock-bg) !important;
    background-image: none !important;
    border: none !important;
    opacity: 1 !important;
  }

  /* Mobile nav button text and icon colors */

  .right-panel-nav-btn {
    color: var(--mobile-dock-text) !important;
  }

  .right-panel-nav-btn span {
    color: var(--mobile-dock-text) !important;
  }

  .right-panel-nav-btn app-icon,
  .right-panel-nav-btn app-icon svg {
    color: var(--mobile-dock-text) !important;
  }

  .right-panel-nav-btn app-icon svg path[stroke] {
    stroke: var(--mobile-dock-text) !important;
  }

  .right-panel-nav-btn app-icon svg path[fill]:not([fill="none"]):not([fill="transparent"]) {
    fill: var(--mobile-dock-text) !important;
  }

  /* Mobile nav items fill available space evenly and center content */

  .right-panel-container .mobile-nav-item {
    flex: 1 1 0%;
    min-width: 0;
    display: flex !important;
    justify-content: center;
    align-items: stretch;
  }

  /* Respect hidden md:block — keep deliver hidden on mobile */

  .right-panel-container .mobile-nav-item.hidden {
    display: none !important;
  }

  .right-panel-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    padding-top: 0 !important;
    gap: 2px !important;
  }

  .right-panel-nav-btn app-icon {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right-panel-nav-btn span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* Disable tooltips on mobile - they don't work well with touch */

  .right-panel-container .tooltip::before,
  .right-panel-container .tooltip::after {
    display: none !important;
  }

  .view-draft tribute-footer {
    padding-bottom: 88px !important;
  }

  .view-published tribute-footer {
    padding-bottom: 88px !important;
  }
}

/* FilePond Font Override */

.filepond--browser,
.filepond--browser input,
.filepond--drop-label,
.filepond--panel,
.filepond--panel-root,
.filepond--root {
  font-family: var(--app-font-family) !important;
}

/* Create Button Theme Font Override */

/* Ensure create button uses theme font even when moved outside form context */

#create-tribute-btn {
  font-family: var(--theme-font-family) !important;
}

/* Motion.dev Compatibility */

.motion-enabled {
  transition: none !important;
}

/* Custom Background Colors */

.bg-luma-purple-dark {
  background-color: #1e1b4b;
}

/* ==========================================================================
   COMMON UI ELEMENTS
   Reusable UI component styling with direct values
   ========================================================================== */

/* Text Color Utilities */

.ui-text-primary {
  color: var(--ui-text-primary, #ffffff) !important;
}

.ui-text-secondary {
  color: var(--ui-text-secondary, rgba(255, 255, 255, 0.7)) !important;
}

.ui-text-tertiary {
  color: var(--ui-text-tertiary, rgba(255, 255, 255, 0.5)) !important;
}

.ui-text-quaternary {
  color: var(--ui-text-quaternary, rgba(255, 255, 255, 0.4)) !important;
}

/* Background Utilities */

.ui-bg-subtle {
  background-color: var(--ui-bg-subtle, rgba(255, 255, 255, 0.05)) !important;
}

.ui-bg-subtle-hover {
  background-color: var(--ui-bg-subtle-hover, rgba(255, 255, 255, 0.1)) !important;
}

.ui-bg-subtle-active {
  background-color: var(--ui-bg-subtle-active, rgba(255, 255, 255, 0.15)) !important;
}

/* Border Utilities */

.ui-border-subtle {
  border-color: var(--ui-border-subtle, rgba(255, 255, 255, 0.1)) !important;
}

.ui-border-medium {
  border-color: var(--ui-border-medium, rgba(255, 255, 255, 0.2)) !important;
}

.ui-border-strong {
  border-color: var(--ui-border-strong, rgba(255, 255, 255, 0.3)) !important;
}

/* ==========================================================================
   LOTTIE ICON THEMING
   CSS-based theming for Lottie animations
   ========================================================================== */

/* Right Panel App Icons (desktop only — mobile uses --mobile-dock-text) */

@media (min-width: 768px) {
  /* Dark mode: icons become black to contrast against themed button gradients */

  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="rgb(255,255,255)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="#ffffff"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="white"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="rgb(0,0,0)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="#000000"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[fill="black"] {
    fill: #000000 !important;
  }

  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="rgb(255,255,255)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="#ffffff"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="white"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="rgb(0,0,0)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="#000000"],
  html[data-theme="dark"] tribute-right-panel app-icon svg path[stroke="black"] {
    stroke: #000000 !important;
  }

  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="rgb(255,255,255)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="#ffffff"],
  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="white"],
  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="rgb(0,0,0)"],
  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="#000000"],
  html[data-theme="dark"] tribute-right-panel app-icon svg stroke[stroke="black"] {
    stroke: #000000 !important;
  }

  /* Light mode: icons become white to contrast against themed button gradients */

  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="rgb(255,255,255)"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="#ffffff"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="white"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="rgb(0,0,0)"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="#000000"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[fill="black"] {
    fill: #ffffff !important;
  }

  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="rgb(255,255,255)"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="#ffffff"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="white"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="rgb(0,0,0)"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="#000000"],
  html[data-theme="light"] tribute-right-panel app-icon svg path[stroke="black"] {
    stroke: #ffffff !important;
  }

  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="rgb(255,255,255)"],
  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="#ffffff"],
  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="white"],
  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="rgb(0,0,0)"],
  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="#000000"],
  html[data-theme="light"] tribute-right-panel app-icon svg stroke[stroke="black"] {
    stroke: #ffffff !important;
  }
}

/* Navbar App Icons */

/* Light mode: white paths/strokes become black */

html[data-theme="light"] .navbar app-icon svg path[fill="rgb(255,255,255)"],
html[data-theme="light"] .navbar app-icon svg path[fill="#ffffff"],
html[data-theme="light"] .navbar app-icon svg path[fill="white"] {
  fill: #000000 !important;
}

html[data-theme="light"] .navbar app-icon svg path[stroke="rgb(255,255,255)"],
html[data-theme="light"] .navbar app-icon svg path[stroke="#ffffff"],
html[data-theme="light"] .navbar app-icon svg path[stroke="white"] {
  stroke: #000000 !important;
}

html[data-theme="light"] .navbar app-icon svg stroke[stroke="rgb(255,255,255)"],
html[data-theme="light"] .navbar app-icon svg stroke[stroke="#ffffff"],
html[data-theme="light"] .navbar app-icon svg stroke[stroke="white"] {
  stroke: #000000 !important;
}

/* Dark mode: ensure white paths/strokes stay white */

html[data-theme="dark"] .navbar app-icon svg path[fill="rgb(255,255,255)"],
html[data-theme="dark"] .navbar app-icon svg path[fill="#ffffff"],
html[data-theme="dark"] .navbar app-icon svg path[fill="white"] {
  fill: #ffffff !important;
}

html[data-theme="dark"] .navbar app-icon svg path[stroke="rgb(255,255,255)"],
html[data-theme="dark"] .navbar app-icon svg path[stroke="#ffffff"],
html[data-theme="dark"] .navbar app-icon svg path[stroke="white"] {
  stroke: #ffffff !important;
}

html[data-theme="dark"] .navbar app-icon svg stroke[stroke="rgb(255,255,255)"],
html[data-theme="dark"] .navbar app-icon svg stroke[stroke="#ffffff"],
html[data-theme="dark"] .navbar app-icon svg stroke[stroke="white"] {
  stroke: #ffffff !important;
}

/* Dark mode: black paths/strokes become white (for icons authored in black) */

html[data-theme="dark"] .navbar app-icon svg path[fill="rgb(0,0,0)"],
html[data-theme="dark"] .navbar app-icon svg path[fill="#000000"],
html[data-theme="dark"] .navbar app-icon svg path[fill="black"] {
  fill: #ffffff !important;
}

html[data-theme="dark"] .navbar app-icon svg path[stroke="rgb(0,0,0)"],
html[data-theme="dark"] .navbar app-icon svg path[stroke="#000000"],
html[data-theme="dark"] .navbar app-icon svg path[stroke="black"] {
  stroke: #ffffff !important;
}

/* Light mode: black paths/strokes stay black (for icons authored in black) */

html[data-theme="light"] .navbar app-icon svg path[fill="rgb(0,0,0)"],
html[data-theme="light"] .navbar app-icon svg path[fill="#000000"],
html[data-theme="light"] .navbar app-icon svg path[fill="black"] {
  fill: #000000 !important;
}

html[data-theme="light"] .navbar app-icon svg path[stroke="rgb(0,0,0)"],
html[data-theme="light"] .navbar app-icon svg path[stroke="#000000"],
html[data-theme="light"] .navbar app-icon svg path[stroke="black"] {
  stroke: #000000 !important;
}

/* Settings Slideout App Icons */

/* Light mode: white paths/strokes become black */

html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="rgb(255,255,255)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="#ffffff"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="white"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="rgb(0,0,0)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="#000000"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[fill="black"] {
  fill: #000000 !important;
}

html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="rgb(255,255,255)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="#ffffff"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="white"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="rgb(0,0,0)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="#000000"],
html[data-theme="light"] tribute-settings-slideout app-icon svg path[stroke="black"] {
  stroke: #000000 !important;
}

html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="rgb(255,255,255)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="#ffffff"],
html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="white"],
html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="rgb(0,0,0)"],
html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="#000000"],
html[data-theme="light"] tribute-settings-slideout app-icon svg stroke[stroke="black"] {
  stroke: #000000 !important;
}

/* Dark mode: ensure white paths/strokes stay white */

html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="rgb(255,255,255)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="#ffffff"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="white"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="rgb(0,0,0)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="#000000"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[fill="black"] {
  fill: #ffffff !important;
}

html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="rgb(255,255,255)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="#ffffff"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="white"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="rgb(0,0,0)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="#000000"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg path[stroke="black"] {
  stroke: #ffffff !important;
}

html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="rgb(255,255,255)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="#ffffff"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="white"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="rgb(0,0,0)"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="#000000"],
html[data-theme="dark"] tribute-settings-slideout app-icon svg stroke[stroke="black"] {
  stroke: #ffffff !important;
}

/* Mobile cover image and title positioning */

@media (max-width: 767px) {
  .mobile-cover-image {
    width: 100% !important;
    max-width: none !important;
    padding: 0 1rem 0.5rem !important;
    order: unset !important;
  }

  /* Mobile textarea height adjustment */

  #description {
    min-height: 6rem !important;
    height: auto !important;
  }
}

/* Placeholder image Lottie theming */

/* Light mode: use theme's lighterBgColor for placeholder background */

html[data-theme="light"] .lottie-placeholder-container svg path[fill="rgb(0,0,0)"],
html[data-theme="light"] .lottie-placeholder-container svg path[fill="#000000"],
html[data-theme="light"] .lottie-placeholder-container svg path[fill="black"] {
  fill: var(--theme-lighter-bg-color) !important;
}

html[data-theme="light"] .lottie-placeholder-container svg path[stroke="rgb(0,0,0)"],
html[data-theme="light"] .lottie-placeholder-container svg path[stroke="#000000"],
html[data-theme="light"] .lottie-placeholder-container svg path[stroke="black"] {
  stroke: var(--theme-lighter-bg-color) !important;
}

/* Dark mode: use theme's backgroundColor for placeholder background */

html[data-theme="dark"] .lottie-placeholder-container svg path[fill="rgb(0,0,0)"],
html[data-theme="dark"] .lottie-placeholder-container svg path[fill="#000000"],
html[data-theme="dark"] .lottie-placeholder-container svg path[fill="black"] {
  fill: var(--theme-bg-color) !important;
}

html[data-theme="dark"] .lottie-placeholder-container svg path[stroke="rgb(0,0,0)"],
html[data-theme="dark"] .lottie-placeholder-container svg path[stroke="#000000"],
html[data-theme="dark"] .lottie-placeholder-container svg path[stroke="black"] {
  stroke: var(--theme-bg-color) !important;
}

/* 404 Animation theming - change black/dark gray to white */

#lottie-404-container svg path[fill="rgb(30,30,30)"],
#lottie-404-container svg path[fill="rgb(30, 30, 30)"],
#lottie-404-container svg path[fill="#1e1e1e"],
#lottie-404-container svg path[fill="#1E1E1E"] {
  fill: white !important;
}

#lottie-404-container svg path[stroke="rgb(30,30,30)"],
#lottie-404-container svg path[stroke="rgb(30, 30, 30)"],
#lottie-404-container svg path[stroke="#1e1e1e"],
#lottie-404-container svg path[stroke="#1E1E1E"] {
  stroke: white !important;
}

/* Also target any elements with dark gray colors */

#lottie-404-container svg path[fill*="30,30,30"],
#lottie-404-container svg path[stroke*="30,30,30"] {
  fill: white !important;
  stroke: white !important;
}

/* Concierge Review Modal Lottie theming - override specific fill colors */

#concierge-review-lottie svg path[fill="rgb(138,86,56)"],
#concierge-review-lottie svg path[fill="rgb(138, 86, 56)"] {
  fill: #474747 !important;
}

#concierge-review-lottie svg path[fill="rgb(204,133,82)"],
#concierge-review-lottie svg path[fill="rgb(204, 133, 82)"] {
  fill: #848585 !important;
}

/* ==========================================================================
   SUBMISSIONS AREA
   User-generated content display and interaction
   ========================================================================== */

.submissions-grid-item {
  background-color: var(--submissions-grid-bg, rgba(255, 255, 255, 0.05)) !important;
  border-color: var(--submissions-grid-border, rgba(255, 255, 255, 0.1)) !important;
}

.submissions-icon {
  color: var(--submissions-icon-color, rgba(255, 255, 255, 0.3)) !important;
}

/* User-alt silhouette in empty grid cells (75% height). Filled paths read heavier than the old
   stroke icon — use explicit rgba (avoid color-mix + alpha, which browsers often muddle to dull gray). */

.submissions-placeholder-silhouette {
  display: block;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.11);
}

html[data-theme="light"] .submissions-placeholder-silhouette {
  color: rgba(17, 24, 39, 0.14);
}

/* Hide unmute tooltip in submissions grid */

.unmute-tooltip {
  display: none !important;
}

/* ==========================================================================
   COMPONENT-SPECIFIC ADJUSTMENTS
   Fixes and adjustments for specific components
   ========================================================================== */

/* Tooltip Adjustments */

.tooltip-hidden:before,
.tooltip-hidden:after {
  display: none !important;
}

[style*="--tooltip-display: none"]:before,
[style*="--tooltip-display: none"]:after {
  display: none !important;
}

/* Left Panel Tooltips */

tribute-right-panel .tooltip:before,
tribute-right-panel .tooltip:after {
  margin-left: -10px;
}

/* Balloons Background */

balloons {
  z-index: 0 !important;
}

/* ==========================================================================
   FILEPOND CUSTOM STYLING
   Theme-aware FilePond styling to match Tribute design
   ========================================================================== */

/* FilePond CSS imports are now handled in the TypeScript file */

/* ==========================================================================
   FILEPOND THEME VARIABLES
   ========================================================================== */

:root {
  --filepond-primary-color: var(--theme-primary-color, #8B5CF6);
  --filepond-secondary-color: var(--theme-secondary-color, #A78BFA);
  --filepond-background-color: var(--modal-bg, #000000);
  --filepond-border-color: var(--modal-border, #ffffff);
  --filepond-text-color: var(--theme-text-color, #ffffff);
}

/* ==========================================================================
   FILEPOND ROOT ELEMENT STYLING
   ========================================================================== */

.filepond--root {
  background: transparent !important;
  padding: 0 !important;
}

/* Hide the default panel background */

.filepond--panel-root {
  background: transparent !important;
  border: none !important;
}

/* ==========================================================================
   FILEPOND DROP AREA STYLING
   ========================================================================== */

.filepond--drop-label {
  background: none !important;
  border: 2px dashed var(--filepond-border-color) !important;
  border-radius: 0.75rem !important;
  color: var(--theme-text-color, #ffffff) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.filepond--label-action {
  color: var(--theme-primary-color, #8B5CF6) !important;
  border: none !important;
  text-decoration: underline !important;
  text-decoration-color: var(--theme-primary-color, #8B5CF6) !important;
}

/* ==========================================================================
   FILEPOND FILE ITEM STYLING
   ========================================================================== */

.filepond--item {
  margin: 0 !important;
  transform: none !important;
}

.filepond--file-wrapper {
  transition: none !important;
}

/* ==========================================================================
   FILEPOND ACTION BUTTONS
   ========================================================================== */

.filepond--file-action-button {
  cursor: pointer !important;
}

.filepond--action-abort-item-processing:hover {
  box-shadow: none !important;
}

.filepond--action-remove-item {
  z-index: 9999;
}

/* Edit button styling */

.filepond--file-action-button.filepond--action-edit-item {
  background-color: var(--theme-primary-color, #8B5CF6) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.filepond--file-action-button.filepond--action-edit-item:hover {
  background-color: var(--theme-primary-color, #8B5CF6) !important;
  transform: scale(1.1) !important;
  transition: transform 0.2s ease !important;
}

/* Upload/Save button styling */

.filepond--file-action-button.filepond--action-process-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 0.5rem 1rem !important;
  background-color: var(--theme-primary-color, #8B5CF6) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.filepond--file-action-button.filepond--action-process-item:hover {
  background-color: var(--theme-primary-color, #8B5CF6) !important;
  transform: scale(1.1) !important;
  transition: transform 0.2s ease !important;
}

/* Hide the upload button icon and show text */

.filepond--file-action-button.filepond--action-process-item svg {
  display: none !important;
}

.filepond--file-action-button.filepond--action-process-item span {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  overflow: auto !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: 12px !important;
}

/* ==========================================================================
   FILEPOND LOADING & ANIMATIONS
   ========================================================================== */

.filepond--loading-indicator {
  background-color: var(--filepond-primary-color);
}

.filepond--drip-blob {
  background-color: var(--filepond-primary-color);
  opacity: 0.3;
}

/* Progress indicator styling */

.filepond--progress-indicator {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Loading spinner animation */

.filepond--loading-indicator svg {
  fill: var(--filepond-primary-color);
}

/* Progress indicator SVG styling */

.filepond--progress-indicator svg {
  fill: var(--filepond-primary-color) !important;
}

.filepond--progress-indicator svg path {
  stroke: var(--filepond-primary-color) !important;
  stroke-width: 2 !important;
}

/* Hide the credits */

.filepond--credits {
  display: none !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY VARIABLES
   ========================================================================== */

:root {
  /* Typography */
  --app-font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --theme-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size: 16px;
}

/* Ensure theme background color is applied to html element */

html {
  background-color: var(--theme-bg-color) !important;
}

/* Ensure theme font is applied to body */

body {
  background-color: var(--theme-bg-color) !important;
}

/* Apply app font to the app container */

#app {
  font-family: var(--app-font-family);
  position: relative;
  z-index: 1;
}

tribute-navbar-public,
tribute-navbar-creator,
tribute-right-panel,
tribute-theme-tray,
tribute-product-progress-tracker,
.modal,
.slideout,
.dropdown-menu,
.user-menu,
.tooltip,
[data-tip] {
  z-index: 30 !important;
}

tribute-navbar-public,
tribute-navbar-creator {
  display: block;
  width: 100%;
  align-self: flex-start;
  z-index: 40 !important;
}

/* Sticky + solid bar only on small screens (content was sliding over mobile CTAs). Desktop: normal flow, no full-bar tint. */

@media (max-width: 767px) {
  tribute-navbar-public,
  tribute-navbar-creator {
    position: sticky;
    top: 0;
    background-color: var(--theme-bg-color);
  }
}

/* Creator draft: fixed custom-music promo bar — offset shell, sticky navbar, and fixed publish CTA */

html[data-draft-custom-music-banner='visible'] #tribute-app-shell {
  padding-top: var(--draft-custom-music-banner-height, 36px);
}

@media (max-width: 767px) {
  html[data-draft-custom-music-banner='visible'] tribute-navbar-creator {
    top: var(--draft-custom-music-banner-height, 36px);
  }
}

@media (min-width: 768px) {
  html[data-draft-custom-music-banner='visible'] tribute-navbar-creator .navbar-cta-btn {
    top: calc(var(--draft-custom-music-banner-height, 36px) + env(safe-area-inset-top, 0px)) !important;
  }
}

tribute-draft-custom-music-banner {
  display: block;
}

/* Creator draft promo bar — primary-only dreamy gradients (light = deeper, dark = airy wash) */

.draft-custom-music-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--theme-text-color) 8%, transparent);
}

.draft-custom-music-banner::before {
  content: '';
  position: absolute;
  inset: -40% -15%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background: linear-gradient(
    115deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-primary-color) 22%, white 78%) 38%,
    transparent 62%,
    color-mix(in srgb, var(--theme-primary-color) 18%, white 82%) 82%,
    transparent 100%
  );
  filter: blur(10px);
  animation: draft-custom-music-banner-shimmer 14s ease-in-out infinite alternate;
}

.draft-custom-music-banner__inner {
  position: relative;
  z-index: 1;
}

.draft-custom-music-banner__dismiss {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.draft-custom-music-banner__note-icon {
  width: 1.375rem;
  height: 1.375rem;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

@media (min-width: 640px) {
  .draft-custom-music-banner__note-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Banner surface is always a light wash — never inherit page theme text (white on dark themes) */

.draft-custom-music-banner,
.draft-custom-music-banner p,
.draft-custom-music-banner .draft-custom-music-banner-cta,
.draft-custom-music-banner .draft-custom-music-banner-dismiss {
  color: #0f1419 !important;
}

.draft-custom-music-banner app-icon svg,
.draft-custom-music-banner app-icon svg path {
  stroke: #0f1419 !important;
  color: #0f1419 !important;
}

@keyframes draft-custom-music-banner-shimmer {
  0% {
    transform: translateX(-8%) skewX(-6deg);
    opacity: 0.35;
  }

  100% {
    transform: translateX(8%) skewX(6deg);
    opacity: 0.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draft-custom-music-banner::before {
    animation: none;
  }
}

html[data-theme='light'] .draft-custom-music-banner {
  background:
    radial-gradient(ellipse 130% 240% at 8% 120%, color-mix(in srgb, var(--theme-primary-color) 42%, white 58%) 0%, transparent 58%),
    radial-gradient(ellipse 110% 200% at 92% -20%, color-mix(in srgb, var(--theme-primary-color) 38%, white 62%) 0%, transparent 52%),
    radial-gradient(ellipse 90% 180% at 48% 50%, color-mix(in srgb, var(--theme-primary-color) 28%, black 72%) 0%, transparent 48%),
    linear-gradient(
      108deg,
      color-mix(in srgb, var(--theme-primary-color) 62%, black 38%) 0%,
      color-mix(in srgb, var(--theme-primary-color) 40%, white 60%) 22%,
      color-mix(in srgb, var(--theme-primary-color) 48%, white 52%) 48%,
      color-mix(in srgb, var(--theme-primary-color) 52%, black 48%) 72%,
      color-mix(in srgb, var(--theme-primary-color) 28%, black 72%) 100%
    );
}

html[data-theme='dark'] .draft-custom-music-banner {
  background:
    radial-gradient(ellipse 150% 260% at 4% 100%, color-mix(in srgb, var(--theme-primary-color) 48%, white 52%) 0%, transparent 62%),
    radial-gradient(ellipse 120% 220% at 96% 0%, color-mix(in srgb, var(--theme-primary-color) 22%, white 78%) 0%, transparent 55%),
    radial-gradient(ellipse 100% 200% at 50% 130%, color-mix(in srgb, var(--theme-primary-color) 35%, white 65%) 0%, transparent 50%),
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--theme-primary-color) 18%, white 82%) 0%,
      color-mix(in srgb, var(--theme-primary-color) 10%, white 90%) 20%,
      color-mix(in srgb, var(--theme-primary-color) 32%, white 68%) 45%,
      color-mix(in srgb, var(--theme-primary-color) 14%, white 86%) 68%,
      color-mix(in srgb, var(--theme-primary-color) 24%, white 76%) 100%
    );
}

html[data-theme='light'] .draft-custom-music-banner::before {
  opacity: 0.42;
  background: linear-gradient(
    115deg,
    transparent 0%,
    color-mix(in srgb, var(--theme-primary-color) 35%, white 65%) 40%,
    transparent 65%,
    color-mix(in srgb, var(--theme-primary-color) 25%, white 75%) 85%,
    transparent 100%
  );
}

.draft-custom-music-banner .draft-custom-music-banner-dismiss {
  color: color-mix(in srgb, #0f1419 55%, transparent) !important;
}

.draft-custom-music-banner-cta {
  color: #0f1419 !important;
}

/* Right dock is fixed to the viewport edge; keep above creator navbar CTAs where they overlap (navbar is 40). */

tribute-right-panel {
  z-index: 45 !important;
}

/* Theme font applied via CSS variable to tribute-view-renderer */

tribute-view-renderer {
  font-family: var(--theme-font-family);
  /* Default CE display is inline; block + min-width keeps grid/flex parents and sticky descendants sane */
  display: block;
  min-width: 0;
}

/* Specific fixes for common overlapping issues */

#djDebug {
  z-index: 1000 !important;
}

/* Ensure modals and slideouts are above everything */

.modal-overlay,
.slideout-overlay {
  z-index: 10000 !important;
}

/* Draft edit button styling - pencil icons with black background */

.draft-edit-button {
  background-color: var(--ui-bg-strong, #000000) !important;
  border: 1px solid var(--ui-border-medium, rgba(255, 255, 255, 0.2)) !important;
  color: var(--theme-text-color, #ffffff) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.draft-edit-button:hover {
  background-color: var(--ui-bg-strong-hover, #333333) !important;
  transform: scale(1.05) !important;
}

.draft-edit-button svg {
  stroke: var(--theme-text-color, #ffffff) !important;
}

/* ==========================================================================
   SETTINGS SLIDEOUT VALIDATION STYLES
   ========================================================================== */

/* Slug input styling */

#tribute-slug-input {
  border: 1px dashed rgba(255, 255, 255, 0.3) !important;
  border-radius: 0.5rem !important;
  transition: border-color 0.2s ease !important;
}

/* Shared glass treatment for hover tooltips (Daisy data-tip), concierge tips, etc. */

:root {
  --tooltip-glass-surface: rgba(6, 8, 12, 0.82);
  --tooltip-glass-border: rgba(255, 255, 255, 0.12);
  /* Opaque-ish wedge so the caret matches the panel edge (caret cannot backdrop-blur). */
  --tooltip-glass-arrow: rgb(18, 20, 26);
}

html[data-theme='light'] {
  --tooltip-glass-surface: rgba(255, 255, 255, 0.82);
  --tooltip-glass-border: rgba(0, 0, 0, 0.09);
  --tooltip-glass-arrow: rgb(248, 249, 252);
}

/* Tooltip styling - theme aware */

.tooltip[data-tip]:before {
  background-color: var(--tooltip-glass-surface) !important;
  color: var(--ui-text-primary, #ffffff) !important;
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  border: 1px solid var(--tooltip-glass-border) !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.28) !important;
  padding: 8px 12px !important;
  font-family: var(--app-font-family) !important;
}

html[data-theme='light'] .tooltip[data-tip]:before {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.1) !important;
}

.tooltip[data-tip]:after {
  background-color: transparent !important;
}

/* Override DaisyUI tooltip styles with higher specificity */

.tooltip.tooltip-bottom[data-tip]:after,
.tooltip.tooltip-top[data-tip]:after,
.tooltip.tooltip-left[data-tip]:after,
.tooltip.tooltip-right[data-tip]:after {
  border-top-color: var(--tooltip-glass-arrow) !important;
  border-bottom-color: var(--tooltip-glass-arrow) !important;
  border-left-color: var(--tooltip-glass-arrow) !important;
  border-right-color: var(--tooltip-glass-arrow) !important;
  z-index: 9 !important;
}

[data-theme='dark'] .tooltip[data-tip]:before {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Slug / settings — same glass as default (no solid black chip). */

#slug-tooltip[data-tip]:before {
  background-color: var(--tooltip-glass-surface) !important;
  color: var(--ui-text-primary, #ffffff) !important;
  font-family: var(--app-font-family) !important;
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  border: 1px solid var(--tooltip-glass-border) !important;
}

#slug-tooltip[data-tip]:after {
  border-top-color: var(--tooltip-glass-arrow) !important;
  border-bottom-color: var(--tooltip-glass-arrow) !important;
  border-left-color: var(--tooltip-glass-arrow) !important;
  border-right-color: var(--tooltip-glass-arrow) !important;
}

/* Tooltip validation states — tinted glass */

.tooltip-success[data-tip]:before {
  background-color: rgba(67, 172, 106, 0.88) !important;
  color: white !important;
  font-family: var(--app-font-family) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tooltip-success[data-tip]:after {
  border-top-color: rgb(52, 140, 88) !important;
  border-bottom-color: rgb(52, 140, 88) !important;
  border-left-color: rgb(52, 140, 88) !important;
  border-right-color: rgb(52, 140, 88) !important;
}

.tooltip-error[data-tip]:before {
  background-color: rgba(241, 113, 117, 0.9) !important;
  color: white !important;
  font-family: var(--app-font-family) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tooltip-error[data-tip]:after {
  border-top-color: rgb(200, 75, 80) !important;
  border-bottom-color: rgb(200, 75, 80) !important;
  border-left-color: rgb(200, 75, 80) !important;
  border-right-color: rgb(200, 75, 80) !important;
}

/* Override directional caret colors for success/error (same specificity as neutral tooltips). */

.tooltip.tooltip-bottom.tooltip-success[data-tip]:after,
.tooltip.tooltip-top.tooltip-success[data-tip]:after,
.tooltip.tooltip-left.tooltip-success[data-tip]:after,
.tooltip.tooltip-right.tooltip-success[data-tip]:after {
  border-top-color: rgb(52, 140, 88) !important;
  border-bottom-color: rgb(52, 140, 88) !important;
  border-left-color: rgb(52, 140, 88) !important;
  border-right-color: rgb(52, 140, 88) !important;
}

.tooltip.tooltip-bottom.tooltip-error[data-tip]:after,
.tooltip.tooltip-top.tooltip-error[data-tip]:after,
.tooltip.tooltip-left.tooltip-error[data-tip]:after,
.tooltip.tooltip-right.tooltip-error[data-tip]:after {
  border-top-color: rgb(200, 75, 80) !important;
  border-bottom-color: rgb(200, 75, 80) !important;
  border-left-color: rgb(200, 75, 80) !important;
  border-right-color: rgb(200, 75, 80) !important;
}

/* Inline / floating helpers (non–data-tip), e.g. concierge request limit popovers */

.app-tooltip-glass {
  background-color: var(--tooltip-glass-surface) !important;
  color: var(--ui-text-primary, #ffffff) !important;
  border: 1px solid var(--tooltip-glass-border) !important;
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme='light'] .app-tooltip-glass {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.1) !important;
}

[data-theme='dark'] .app-tooltip-glass {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Toast/Alert styling - use progress tracker background color */

.alert-success,
.alert-error,
.alert-warning,
.alert-info {
  background-color: var(--progress-bg-color, rgba(0, 0, 0, 0.6)) !important;
  border-color: var(--progress-border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--progress-text-color, #ffffff) !important;
  padding-inline: calc(0.25rem * 6) !important;
  /* 1.5rem / 24px */
  padding-block: calc(0.25rem * 5) !important;
  /* 1.25rem / 20px */
}

.alert-success *,
.alert-error *,
.alert-warning *,
.alert-info * {
  color: var(--progress-text-color, #ffffff) !important;
}

/* Toast progress bar styling */

.toast-progress-container {
  background-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

[data-theme="light"] .toast-progress-container {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.toast-progress-bar {
  background-color: var(--theme-secondary-color, #D27CFE) !important;
  transform-origin: left;
  will-change: transform;
}

/* Mobile: toasts sit above bottom dock — neutral black/white panel (not theme/slate tint) */

@media (max-width: 767px) {
  [data-theme="dark"] .toast .alert.alert-success,
  [data-theme="dark"] .toast .alert.alert-error,
  [data-theme="dark"] .toast .alert.alert-warning,
  [data-theme="dark"] .toast .alert.alert-info {
    background-color: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fafafa !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
  }

  [data-theme="light"] .toast .alert.alert-success,
  [data-theme="light"] .toast .alert.alert-error,
  [data-theme="light"] .toast .alert.alert-warning,
  [data-theme="light"] .toast .alert.alert-info {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #171717 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  }

  [data-theme="dark"] .toast .alert.alert-success *,
  [data-theme="dark"] .toast .alert.alert-error *,
  [data-theme="dark"] .toast .alert.alert-warning *,
  [data-theme="dark"] .toast .alert.alert-info * {
    color: inherit !important;
  }

  [data-theme="light"] .toast .alert.alert-success *,
  [data-theme="light"] .toast .alert.alert-error *,
  [data-theme="light"] .toast .alert.alert-warning *,
  [data-theme="light"] .toast .alert.alert-info * {
    color: inherit !important;
  }

  .toast .toast-progress-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] .toast .toast-progress-container {
    background-color: rgba(255, 255, 255, 0.18) !important;
  }

  [data-theme="light"] .toast .toast-progress-container {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }

  /* Countdown strip: neutral, not theme secondary (reads blue/purple on some themes) */

  [data-theme="dark"] .toast .toast-progress-bar {
    background-color: #f5f5f5 !important;
  }

  [data-theme="light"] .toast .toast-progress-bar {
    background-color: #404040 !important;
  }
}

/* Alert Info Soft - Theme-aware styling with secondary color */

.alert.alert-info.alert-soft {
  /* Dark mode: 20% transparent background, 30% transparent border with white text */
  background-color: color-mix(in srgb, var(--theme-secondary-color) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-secondary-color) 30%, transparent) !important;
  color: #ffffff !important;
}

.alert.alert-info.alert-soft * {
  color: #ffffff !important;
}

/* Partiful primary-gradient buttons (inline theme primary bg) inside soft info alerts: the rule above forces
   the same text color on all descendants, which overrides --form-button-text and yields white-on-white in
   dark mode (and dark-on-dark in light mode). Restore theme-matched label color on these CTAs. */

.alert.alert-info.alert-soft [style*="background-color: var(--theme-primary-color)"],
.alert.alert-info.alert-soft [style*="background-color:var(--theme-primary-color)"] {
  color: var(--form-button-text) !important;
}

/* Light mode: 10% transparent background, 20% transparent border with dark text */

[data-theme="light"] .alert.alert-info.alert-soft {
  background-color: color-mix(in srgb, var(--theme-secondary-color) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--theme-secondary-color) 20%, transparent) !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

[data-theme="light"] .alert.alert-info.alert-soft * {
  color: rgba(0, 0, 0, 0.75) !important;
}

[data-theme="light"] .alert.alert-info.alert-soft [style*="background-color: var(--theme-primary-color)"],
[data-theme="light"] .alert.alert-info.alert-soft [style*="background-color:var(--theme-primary-color)"] {
  color: var(--form-button-text) !important;
}

/* Soft error alert (settings validation, etc.) — not the solid toast-style .alert-error */

.alert.alert-error.alert-soft {
  background-color: color-mix(in srgb, var(--color-error) 22%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent) !important;
  color: var(--color-error) !important;
}

.alert.alert-error.alert-soft * {
  color: var(--color-error) !important;
}

[data-theme="light"] .alert.alert-error.alert-soft {
  background-color: color-mix(in srgb, var(--color-error) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-error) 28%, transparent) !important;
  color: color-mix(in srgb, var(--color-error) 55%, #1f2937) !important;
}

[data-theme="light"] .alert.alert-error.alert-soft * {
  color: color-mix(in srgb, var(--color-error) 55%, #1f2937) !important;
}

/* Timeline connector styling */

.timeline-connector {
  position: absolute;
  top: 2rem;
  /* Start from the bottom of the square icon */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 2rem;
  /* Height to reach the next square */
  background-color: rgba(255, 255, 255, 0.2);
}

/* Gift Lottie theming - dark mode */

app-icon[name="gift-lottie"] svg path[fill="rgb(34,31,31)"],
app-icon[name="gift-lottie"] svg path[stroke="rgb(34,31,31)"] {
  fill: white !important;
  stroke: white !important;
}

/* Gift Lottie theming - light mode (keep original color) */

html[data-theme="light"] app-icon[name="gift-lottie"] svg path[fill="rgb(34,31,31)"],
html[data-theme="light"] app-icon[name="gift-lottie"] svg path[stroke="rgb(34,31,31)"] {
  fill: rgb(34, 31, 31) !important;
  stroke: rgb(34, 31, 31) !important;
}

/* Cart Lottie theming - dark mode (change black to white) */

app-icon[name="cart"] svg path[fill="rgb(0,0,0)"],
app-icon[name="cart"] svg path[fill="#000000"],
app-icon[name="cart"] svg path[fill="black"],
app-icon[name="cart"] svg path[stroke="rgb(0,0,0)"],
app-icon[name="cart"] svg path[stroke="#000000"],
app-icon[name="cart"] svg path[stroke="black"],
app-icon[name="cart"] svg path[style*="rgb(0, 0, 0)"],
app-icon[name="cart"] svg path[style*="#000000"] {
  fill: white !important;
  stroke: white !important;
}

/* Cart Lottie theming - light mode (keep black) */

html[data-theme="light"] app-icon[name="cart"] svg path[fill="rgb(0,0,0)"],
html[data-theme="light"] app-icon[name="cart"] svg path[fill="#000000"],
html[data-theme="light"] app-icon[name="cart"] svg path[fill="black"],
html[data-theme="light"] app-icon[name="cart"] svg path[stroke="rgb(0,0,0)"],
html[data-theme="light"] app-icon[name="cart"] svg path[stroke="#000000"],
html[data-theme="light"] app-icon[name="cart"] svg path[stroke="black"] {
  fill: black !important;
  stroke: black !important;
}

/* Basket alias - same styling as cart */

app-icon[name="basket"] svg path[fill="rgb(0,0,0)"],
app-icon[name="basket"] svg path[fill="#000000"],
app-icon[name="basket"] svg path[fill="black"],
app-icon[name="basket"] svg path[stroke="rgb(0,0,0)"],
app-icon[name="basket"] svg path[stroke="#000000"],
app-icon[name="basket"] svg path[stroke="black"],
app-icon[name="basket"] svg path[style*="rgb(0, 0, 0)"],
app-icon[name="basket"] svg path[style*="#000000"] {
  fill: white !important;
  stroke: white !important;
}

html[data-theme="light"] app-icon[name="basket"] svg path[fill="rgb(0,0,0)"],
html[data-theme="light"] app-icon[name="basket"] svg path[fill="#000000"],
html[data-theme="light"] app-icon[name="basket"] svg path[fill="black"],
html[data-theme="light"] app-icon[name="basket"] svg path[stroke="rgb(0,0,0)"],
html[data-theme="light"] app-icon[name="basket"] svg path[stroke="#000000"],
html[data-theme="light"] app-icon[name="basket"] svg path[stroke="black"] {
  fill: black !important;
  stroke: black !important;
}

/* Support Lottie theming - dark mode (change dark gray to white) */

app-icon[name="support"] svg path[fill="rgb(54,54,54)"],
app-icon[name="support"] svg path[fill="#363636"],
app-icon[name="support"] svg path[fill="rgb(54, 54, 54)"],
app-icon[name="support"] svg path[stroke="rgb(54,54,54)"],
app-icon[name="support"] svg path[stroke="#363636"],
app-icon[name="support"] svg path[stroke="rgb(54, 54, 54)"],
app-icon[name="support"] svg path[style*="rgb(54, 54, 54)"],
app-icon[name="support"] svg path[style*="rgb(54,54,54)"],
app-icon[name="support"] svg path[style*="#363636"],
/* Target any path with fill/stroke containing the dark gray value */
app-icon[name="support"] svg path[fill*="54,54,54"],
app-icon[name="support"] svg path[stroke*="54,54,54"] {
  fill: white !important;
  stroke: white !important;
}

/* Support Lottie theming - light mode (keep dark gray) */

html[data-theme="light"] app-icon[name="support"] svg path[fill="rgb(54,54,54)"],
html[data-theme="light"] app-icon[name="support"] svg path[fill="#363636"],
html[data-theme="light"] app-icon[name="support"] svg path[fill="rgb(54, 54, 54)"],
html[data-theme="light"] app-icon[name="support"] svg path[stroke="rgb(54,54,54)"],
html[data-theme="light"] app-icon[name="support"] svg path[stroke="#363636"],
html[data-theme="light"] app-icon[name="support"] svg path[stroke="rgb(54, 54, 54)"] {
  fill: rgb(54, 54, 54) !important;
  stroke: rgb(54, 54, 54) !important;
}

/* Send Lottie theming - dark mode (change dark colors to white, make strokes thicker) */

app-icon[name="send"] svg path {
  stroke-width: 2.0 !important;
}

/* Target all paths in send icon and make them white in dark mode */

app-icon[name="send"] svg path[fill],
app-icon[name="send"] svg path[stroke] {
  fill: white !important;
  stroke: white !important;
}

/* Send Lottie theming - light mode (keep original dark color, make strokes thicker) */

html[data-theme="light"] app-icon[name="send"] svg path {
  stroke-width: 2.0 !important;
}

/* In light mode, keep the original dark color (don't override) */

html[data-theme="light"] app-icon[name="send"] svg path[fill],
html[data-theme="light"] app-icon[name="send"] svg path[stroke] {
  fill: rgb(19, 15, 38) !important;
  stroke: rgb(19, 15, 38) !important;
}

/* Right panel send icon override — must come AFTER global send rules to win by source order */

@media (min-width: 768px) {
  .right-panel-nav-btn app-icon[name="send"] svg path,
  .right-panel-nav-btn app-icon[name="send"] svg path[fill],
  .right-panel-nav-btn app-icon[name="send"] svg path[stroke],
  html[data-theme="light"] .right-panel-nav-btn app-icon[name="send"] svg path,
  html[data-theme="light"] .right-panel-nav-btn app-icon[name="send"] svg path[fill],
  html[data-theme="light"] .right-panel-nav-btn app-icon[name="send"] svg path[stroke],
  html[data-theme="dark"] .right-panel-nav-btn app-icon[name="send"] svg path,
  html[data-theme="dark"] .right-panel-nav-btn app-icon[name="send"] svg path[fill],
  html[data-theme="dark"] .right-panel-nav-btn app-icon[name="send"] svg path[stroke] {
    fill: var(--form-button-text) !important;
    stroke: var(--form-button-text) !important;
  }
}

/* Settings Lottie theming - light mode (make dark for contrast) */

html[data-theme="light"] #gift-settings-btn app-icon[name="settings"] svg path[fill],
html[data-theme="light"] #gift-settings-btn app-icon[name="settings"] svg path[stroke] {
  fill: #000000 !important;
  stroke: #000000 !important;
}

html[data-theme="light"] #gift-settings-btn app-icon[name="settings"] svg path[fill="none"] {
  fill: none !important;
}

/* Link Lottie theming - dark mode (keep white) */

app-icon[name="link"] svg path[fill],
app-icon[name="link"] svg path[stroke] {
  fill: white !important;
  stroke: white !important;
}

/* Link Lottie theming - light mode (change to black) */

html[data-theme="light"] app-icon[name="link"] svg path[fill],
html[data-theme="light"] app-icon[name="link"] svg path[stroke] {
  fill: #000000 !important;
  stroke: #000000 !important;
}

/* Gift CTA light mode - white background */

html[data-theme="light"] {
  --gift-cta-bg: #ffffff;
  /* White for light mode */
  --new-section-bg: rgba(0, 0, 0, 0.5);
  /* 50% black for light mode */
  --new-section-text: rgba(255, 255, 255, 0.5);
  /* 50% white for light mode */
}

/* Gift CTA hover scale effect */

button[style*="background-color: var(--gift-cta-bg)"] {
  transition: transform 0.2s ease !important;
}

button[style*="background-color: var(--gift-cta-bg)"]:hover {
  transform: scale(0.95) !important;
}

/* Skeleton loaders for theme tray and other components */

.skeleton {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.25) 25%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.25) 75%);
  background-image: linear-gradient(105deg, #0000 0% 40%, rgba(255, 255, 255, 0.5) 50%, #0000 60% 100%);
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  opacity: 0.8;
}

/* Light mode skeleton */

html[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.25) 25%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.25) 75%);
  background-image: linear-gradient(105deg, #0000 0% 40%, rgba(0, 0, 0, 0.5) 50%, #0000 60% 100%);
  background-color: rgba(0, 0, 0, 0.5);
}

/* Skeleton variants for different content types */

.skeleton-cover {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0.5rem;
}

#slideout-footer .btn.skeleton-cover,
#invitations-cta-bar .btn.skeleton-cover {
  /* Match the form input radius (rounded-lg = 0.5rem) so fields and buttons
     share the same corner scale. DaisyUI .btn defaults to a smaller radius
     (--radius-field), which made fields read as "rounder" than the CTA. */
  font-size: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-height: 0;
  height: auto;
  /* Match the form input radius (rounded-lg = 0.5rem) so fields and buttons
     share the same corner scale. DaisyUI .btn defaults to a smaller radius
     (--radius-field), which made fields read as "rounder" than the CTA. */
  border-radius: 0.5rem;
}

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

  100% {
    background-position: -200% 0;
  }
}

/* ==========================================================================
   PAGE LOADING STATES
   ========================================================================== */

/* Page loading state - hide components until fully loaded */

.page-loading .main-content,
.page-loading .submissions-section {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: none !important;
}

/* Section icon theming */

.icon-svg {
  filter: brightness(0) saturate(100%) invert(100%);
  transition: filter 0.2s ease;
}

/* Dark mode - white icons */

html[data-theme="dark"] .icon-svg {
  filter: brightness(0) saturate(100%) invert(100%);
}

/* Light mode - black icons */

html[data-theme="light"] .icon-svg {
  filter: brightness(0) saturate(100%) invert(0%);
}

/* Icon hover effects */

.icon-option:hover .icon-svg {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2000%) hue-rotate(200deg);
}

/* New Section Modal Dropdown Improvements */

.new-section-modal .dropdown {
  position: relative;
}

.new-section-modal .dropdown-content {
  z-index: 50 !important;
  max-height: 240px !important;
  overflow-y: auto !important;
}

.new-section-modal .dropdown-content::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--theme-input-border);
}

.new-section-modal .dropdown-content::after {
  content: '';
  position: absolute;
  top: -7px;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--theme-input-bg);
}

/* Emoji/Icon option hover states */

.emoji-option:hover,
.icon-option:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Scrollbar styling for dropdown */

.dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
  background: var(--theme-input-bg);
  border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb {
  background: var(--theme-input-border);
  border-radius: 3px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-color);
}

/* ==========================================================================
   STORY PLAYER THEME OVERRIDES
   Override story player styles to match modal theme
   ========================================================================== */

/* Moving controls behind the overlay */

.reveal-open tribute-navbar-public,
.reveal-open tribute-navbar-creator,
.reveal-open tribute-product-progress-tracker > div,
.reveal-open tribute-right-panel,
.reveal-open #cover-image-container {
  z-index: -1 !important;
}

/* Moving controls behind video player overlay */

body.video-player-open tribute-navbar-public,
body.video-player-open tribute-navbar-creator,
body.video-player-open tribute-product-progress-tracker > div,
body.video-player-open tribute-right-panel,
body.video-player-open tribute-theme-tray {
  z-index: -1 !important;
}

/* Story player iOS pseudo-fullscreen: navbar sits above #app content (stacking); send chrome behind player */

body.ios-fullscreen-body tribute-navbar-public,
body.ios-fullscreen-body tribute-navbar-creator,
body.ios-fullscreen-body tribute-product-progress-tracker > div,
body.ios-fullscreen-body tribute-right-panel,
body.ios-fullscreen-body #cover-image-container {
  z-index: -1 !important;
}

/* Story player container background and text */

#video-player {
  background-color: var(--modal-bg) !important;
}

#video-player .story-player-container {
  background-color: var(--modal-bg) !important;
  z-index: 50 !important;
  position: relative !important;
}

/* Story player content text color */

#video-player .text-white,
#video-player .text-center,
#video-player .story-player-container,
#video-player .story-player-container * {
  color: var(--theme-text-color) !important;
}

/* Story player preloader styling */

#video-player .preloader {
  background-color: var(--modal-bg) !important;
  color: var(--theme-text-color) !important;
}

#video-player .loader-text {
  color: var(--theme-text-color) !important;
}

/* Story player slides container */

#video-player .slides {
  background-color: var(--modal-bg) !important;
}

/* Hide story player UI elements in public view */

#video-player .fullscreen-button-container,
#video-player .overview-button-container,
#video-player .slide-progress-container,
#video-player .progress {
  display: none !important;
}

#video-player media-control-bar {
  margin-bottom: 0 !important;
}

/* Story player nav arrows: transforms / opacity come from tribute/static/story-player/css/style.css */

/* Override any story player specific classes that might have white backgrounds */

#video-player .story-player-container .reveal,
#video-player .story-player-container .slides,
#video-player .story-player-container .slide {
  background-color: var(--modal-bg) !important;
}

/* Ensure story player controls match theme */

#video-player media-chrome,
#video-player media-controller {
  background-color: var(--modal-bg) !important;
  color: var(--theme-text-color) !important;
}

/* Select box styling for settings slideout */

#tribute-mode-select,
#share-with-select {
  background-color: #161616 !important;
  outline: none !important;
  box-shadow: none !important;
}

#tribute-mode-select:focus,
#share-with-select:focus,
#tribute-mode-select:focus-visible,
#share-with-select:focus-visible,
#tribute-mode-select:active,
#share-with-select:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--ui-border-medium) !important;
}

/* Light mode select box styling */

:root:not(.dark) #tribute-mode-select,
:root:not(.dark) #share-with-select {
  background-color: #f8f9fa !important;
  color: #1a1a1a !important;
  outline: none !important;
  box-shadow: none !important;
}

:root:not(.dark) #tribute-mode-select:focus,
:root:not(.dark) #share-with-select:focus,
:root:not(.dark) #tribute-mode-select:focus-visible,
:root:not(.dark) #share-with-select:focus-visible,
:root:not(.dark) #tribute-mode-select:active,
:root:not(.dark) #share-with-select:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--ui-border-medium) !important;
}

/* Override browser default checkmark hiding for select options */

select option::checkmark {
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-right: 8px !important;
}

/* Toggle theme styling - uses CSS variables set by ThemeManager */

.toggle-theme {
  background-color: var(--toggle-bg, rgba(255, 255, 255, 0.2)) !important;
  border-color: var(--toggle-border, rgba(255, 255, 255, 0.3)) !important;
}

.toggle-theme:checked {
  background-color: var(--toggle-checked-bg, var(--theme-secondary-color)) !important;
  border-color: var(--toggle-checked-border, var(--theme-secondary-color)) !important;
  color: var(--toggle-checked-text, #ffffff) !important;
}

/* Status indicator styling */

.status {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}

.status-success {
  background-color: #43AC6A;
  /* green-500 */
}

.status-warning {
  background-color: #f59e0b;
  /* amber-500 */
}

.status-error {
  background-color: #F17175;
  /* red-500 */
}

/* ==========================================================================
   REUSABLE TOOLTIP STYLES
   ========================================================================== */

/* Product tooltip styles */

.product-tooltip {
  position: absolute;
  z-index: 50;
  /*
   * Body uses glass + backdrop-filter; arrows (::before) use a solid edge color that matches
   * the perceived rim of the blurred panel.
   */
  --product-tooltip-surface: var(--tooltip-glass-surface);
  --product-tooltip-border: var(--tooltip-glass-border);
}

.product-tooltip .tooltip-content {
  position: relative;
  background: var(--product-tooltip-surface);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  border: 1px solid var(--product-tooltip-border);
  border-radius: 0.5rem;
  width: 320px;
  color: var(--progress-text-color, #ffffff);
  padding: 1rem;
  font-family: var(--app-font-family) !important;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme='light'] .product-tooltip .tooltip-content {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Inline info bar — same glass tokens as .product-tooltip; radius matches .tooltip-content (0.5rem). */

.in-product-banner__inner {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.625rem 0.875rem 0.75rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--tooltip-glass-surface);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  border: 1px solid var(--tooltip-glass-border);
  color: var(--progress-text-color, #ffffff);
  font-family: var(--app-font-family);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.in-product-banner__inner--has-header {
  padding-top: 0;
}

.in-product-banner__inner--has-close {
  padding-right: 2.5rem;
}

html[data-theme='light'] .in-product-banner__inner {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.in-product-banner__close-tooltip {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 10;
}

.in-product-banner__main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.in-product-banner__header {
  display: flex;
  align-items: center;
  align-self: flex-start;
  box-sizing: border-box;
  /* Full-bleed border: 100% = main width; + horizontal padding of .in-product-banner__inner we cancel with margin-left */
  width: calc(100% + 1.75rem);
  max-width: none;
  margin-left: -0.875rem;
  margin-right: 0;
  margin-bottom: 0.5rem;
  min-width: 0;
  padding: 0.75rem 0.875rem 0.75rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Inner uses padding-right: 2.5rem for the close button — include that in full-bleed width */

.in-product-banner__inner--has-close .in-product-banner__header {
  width: calc(100% + 0.875rem + 2.5rem);
  padding-right: 2.5rem;
}

html[data-theme='light'] .in-product-banner__header {
  border-bottom-color: rgba(0, 0, 0, 0.09);
}

.in-product-banner__header-leading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.in-product-banner__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: currentColor;
}

.in-product-banner__header-icon :where(svg) {
  display: block;
  width: 100%;
  height: 100%;
}

.in-product-banner__header-title {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.125rem;
}

.in-product-banner__body {
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
}

.in-product-banner__body :where(strong, b) {
  font-weight: 600;
}

.in-product-banner__close:focus-visible {
  outline: 2px solid var(--ui-border-strong, rgba(255, 255, 255, 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Arrow styles — border fill must equal .tooltip-content background (no blur on pseudo-element). */

.product-tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  z-index: 10;
  filter: none;
}

/* Arrow pointing right (tooltip on left) */

.product-tooltip.tooltip-arrow-right::before {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--tooltip-glass-arrow);
}

/* Arrow pointing left (tooltip on right) */

.product-tooltip.tooltip-arrow-left::before {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--tooltip-glass-arrow);
}

/* Arrow pointing down (tooltip on top) */

.product-tooltip.tooltip-arrow-bottom::before {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--tooltip-glass-arrow);
}

/* Arrow pointing up (tooltip on bottom) */

.product-tooltip.tooltip-arrow-top::before {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--tooltip-glass-arrow);
}

/* Tooltip styles now use Tailwind classes - no custom CSS needed */

/* Occasion date modal — tight turnaround floater (no caret; avoids modal overflow quirks). */

.occasion-tight-turnaround-tip {
  overflow: visible;
}

/* ==========================================================================
   THIRD-PARTY WIDGET STYLES
   ========================================================================== */

/* Hide notification banner behind modals, slideouts, and theme tray */

body.theme-tray-open .notification-banner-container,
body.slideout-open .notification-banner-container,
body:has(dialog[open]) .notification-banner-container,
body.video-player-open .notification-banner-container,
body.ios-fullscreen-body .notification-banner-container {
  z-index: 0 !important;
}

/* ==========================================================================
   MODAL ANIMATIONS
   ========================================================================== */

/* Modal Box Animations */

.modal-box.modal-animate {
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease-out;
}

/* Open Animation */

.modal-box.modal-open-animate {
  animation: modalFadeInScale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Close Animation */

.modal-box.modal-close-animate {
  animation: modalFadeOutScale 0.2s ease-in forwards;
}

@keyframes modalFadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalFadeOutScale {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
}

/* Backdrop Animations */

.modal-backdrop {
  transition: opacity 0.2s ease-out;
}

.modal-backdrop.modal-backdrop-open {
  animation: backdropFadeIn 0.2s ease-out forwards;
}

.modal-backdrop.modal-backdrop-close {
  animation: backdropFadeOut 0.2s ease-in forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Prevent layout shift during close animation */

.modal-box.modal-close-animate {
  pointer-events: none;
}

/* Ensure modal content doesn't shift during animation */

.modal-box.modal-animate .modal-content {
  will-change: transform;
}

/* Timeline modal — reference layout: dates (left) | rail + dots (center) | cards (right) */

.timeline-modal__list {
  gap: 0.5rem;
}

.timeline-modal__intro {
  color: color-mix(in srgb, var(--theme-text-color) 72%, transparent);
}

html[data-theme="dark"] .timeline-modal__intro {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="light"] .timeline-modal__intro {
  color: rgba(0, 0, 0, 0.58);
}

.timeline-modal__row {
  display: grid;
  grid-template-columns: minmax(4.75rem, 7.75rem) 1.25rem minmax(0, 1fr);
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  align-items: stretch;
}

@media (max-width: 767px) {
  .timeline-modal__row {
    /* Narrower date column on small screens — more room for cards + line wraps less aggressively */
    grid-template-columns: minmax(4rem, 6.125rem) 1.25rem minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .timeline-modal__row {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
}

.timeline-modal__rail-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 1.25rem;
  min-height: 2.75rem;
}

.timeline-modal__rail-track {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  /* Opaque blend so the track doesn’t show through solid nodes */
  background-color: color-mix(in srgb, #ffffff 22%, #1e1e1e);
}

/* All step markers are circles (reference UI) */

.timeline-modal__node {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 9999px;
  box-sizing: border-box;
}

/* Fully opaque fills (no opacity) — avoids the rail bleeding through the dot */

.timeline-modal__node--complete {
  background-color: color-mix(in srgb, #ffffff 32%, #1e1e1e);
}

.timeline-modal__node--upcoming {
  background-color: #ffffff;
}

.timeline-modal__node--active {
  background-color: #ffffff;
}

/* Dates: flush toward rail, vertically centered in row */

.timeline-modal__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  padding: 0.125rem 0;
  min-width: 0;
}

.timeline-modal__meta-line {
  margin: 0;
  max-width: 100%;
  word-break: break-word;
}

.timeline-modal__card-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.timeline-modal__step-card {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border: none;
  background-color: transparent;
}

.timeline-modal__step-actions {
  margin-top: 0.375rem;
}

.timeline-modal__step-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  color: inherit;
  text-align: left;
}

.timeline-modal__step-link:hover {
  opacity: 0.88;
}

.timeline-modal__step-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary-color) 55%, white);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.timeline-modal__step-link-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .timeline-modal__step-card {
    padding: 1rem 1.1rem;
  }
}

.timeline-modal__step-card--complete {
  /* No whole-row opacity: it stacked with gray text and looked muddy. Fade = typography only. */
  opacity: 1;
  background-color: transparent;
}

.timeline-modal__step-card--complete .timeline-modal__step-title,
.timeline-modal__step-card--complete .timeline-modal__step-body {
  color: color-mix(in srgb, var(--theme-text-color) 72%, transparent) !important;
}

html[data-theme="dark"] .timeline-modal__step-card--complete .timeline-modal__step-title,
html[data-theme="dark"] .timeline-modal__step-card--complete .timeline-modal__step-body {
  color: rgba(255, 255, 255, 0.52) !important;
}

html[data-theme="light"] .timeline-modal__step-card--complete .timeline-modal__step-title,
html[data-theme="light"] .timeline-modal__step-card--complete .timeline-modal__step-body {
  color: rgba(0, 0, 0, 0.46) !important;
}

/* Same lightness as completed card copy (avoid stacking opacity on the column). */

.timeline-modal__row:has(.timeline-modal__step-card--complete) .timeline-modal__meta {
  opacity: 1;
}

html[data-theme="dark"] .timeline-modal__row:has(.timeline-modal__step-card--complete) .timeline-modal__meta {
  color: rgba(255, 255, 255, 0.52);
}

html[data-theme="light"] .timeline-modal__row:has(.timeline-modal__step-card--complete) .timeline-modal__meta {
  color: rgba(0, 0, 0, 0.46);
}

/* Active / upcoming rows: pure white (dark) or black (light) for date + duration labels */

html[data-theme="dark"] .timeline-modal__row:not(:has(.timeline-modal__step-card--complete)) .timeline-modal__meta {
  color: #ffffff;
}

html[data-theme="light"] .timeline-modal__row:not(:has(.timeline-modal__step-card--complete)) .timeline-modal__meta {
  color: #000000;
}

/* Upcoming / future: full-contrast text by theme */

.timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-title {
  color: var(--theme-text-color);
}

.timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-body {
  color: var(--theme-text-color);
}

html[data-theme="dark"] .timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-title,
html[data-theme="dark"] .timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-body {
  color: #ffffff !important;
}

html[data-theme="light"] .timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-title,
html[data-theme="light"] .timeline-modal__step-card:not(.timeline-modal__step-card--complete):not(.timeline-modal__step-card--active) .timeline-modal__step-body {
  color: #000000 !important;
}

.timeline-modal__step-card--active {
  border: none !important;
  opacity: 1 !important;
  box-shadow: none;
}

.timeline-modal__step-card--active .timeline-modal__step-title,
.timeline-modal__step-card--active .timeline-modal__step-body {
  opacity: 1;
}

html[data-theme="dark"] .timeline-modal__step-card--active {
  background-color: #ffffff !important;
}

html[data-theme="dark"] .timeline-modal__step-card--active .timeline-modal__step-title,
html[data-theme="dark"] .timeline-modal__step-card--active .timeline-modal__step-body {
  color: #1f2937 !important;
}

html[data-theme="dark"] .timeline-modal__step-card--active .timeline-modal__step-link {
  color: #1f2937 !important;
}

html[data-theme="light"] .timeline-modal__rail-track {
  background-color: color-mix(in srgb, var(--theme-text-color) 24%, #ffffff);
}

html[data-theme="light"] .timeline-modal__node--complete {
  background-color: color-mix(in srgb, var(--theme-text-color) 42%, #f9fafb);
}

html[data-theme="light"] .timeline-modal__node--upcoming {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-text-color) 28%, transparent);
}

html[data-theme="light"] .timeline-modal__node--active {
  /* Solid dot — inverse of dark mode’s white active node; matches active step card chrome */
  background-color: #111827;
  box-shadow: none;
}

html[data-theme="light"] .timeline-modal__step-card--active {
  background-color: #111827 !important;
  box-shadow: none;
}

html[data-theme="light"] .timeline-modal__step-card--active .timeline-modal__step-title,
html[data-theme="light"] .timeline-modal__step-card--active .timeline-modal__step-body {
  color: #f9fafb !important;
}

html[data-theme="light"] .timeline-modal__step-card--active .timeline-modal__step-link {
  color: #f9fafb !important;
}

/* ===== Reveal.js Overrides ===== */

/* Override Reveal.js styles that break our layout */

/* These classes are added by Reveal.js but shouldn't affect our main page layout */

/* The story player container (#video-player) handles its own overflow when visible */

html.reveal-full-page {
  overflow: visible !important;
  height: auto !important;
}

body.reveal-viewport {
  overflow: visible !important;
  height: auto !important;
  position: relative !important;
  color: inherit !important;
}

/* Lock body scroll when reveal player is open */

/* Note: top position is set via inline style to preserve scroll position */

body.reveal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure our app container isn't affected by Reveal.js viewport styles */

#app {
  overflow: visible !important;
}

/* ===== Submissions Grid Items ===== */

/**
 * Paginated public grid: fade thumbnails via mask so the page background shows through
 * (no solid overlay — avoids a mismatched “purple block” vs theme gradients).
 */

.submissions-pagination-fade-mask {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 45%,
    rgba(0, 0, 0, 0.92) 58%,
    rgba(0, 0, 0, 0.55) 74%,
    rgba(0, 0, 0, 0.18) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 45%,
    rgba(0, 0, 0, 0.92) 58%,
    rgba(0, 0, 0, 0.55) 74%,
    rgba(0, 0, 0, 0.18) 88%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.submissions-grid-item {
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
  /* Clip thumb, name strip, and slide animation to the tile (rounded-lg on the item in markup) */
  overflow: hidden;
}

/*
 * Submission name strip: hidden by default on hover-capable fine pointers; slides up with easing.
 * Touch / coarse pointer: always visible (same breakpoint idea as playlist drag handles — no hover reliance).
 * Reduced motion: no slide, name always shown.
 */

.submissions-grid-item .submission-name-badge,
.submissions-grid-item .submissions-grid-name-bar {
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.32, 1),
    opacity 0.32s ease;
}

.submissions-grid-item .submission-name-badge-pencil {
  transition: opacity 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .submissions-grid-item .submission-name-badge,
  .submissions-grid-item .submissions-grid-name-bar {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .submissions-grid-item .submission-name-badge-pencil {
    opacity: 0;
  }

  .submissions-grid-item:is(:hover, :focus-within) .submission-name-badge,
  .submissions-grid-item:is(:hover, :focus-within) .submissions-grid-name-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .submissions-grid-item:is(:hover, :focus-within) .submission-name-badge-pencil {
    opacity: 1;
  }
}

/* Same spirit as .submission-drag-handle: never require hover to see or tap name / edit on touch. */

@media (hover: none), (pointer: coarse) {
  .submissions-grid-item .submission-name-badge,
  .submissions-grid-item .submissions-grid-name-bar {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .submissions-grid-item .submission-name-badge-pencil {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submissions-grid-item .submission-name-badge,
  .submissions-grid-item .submissions-grid-name-bar {
    transition-duration: 0.01ms !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .submissions-grid-item .submission-name-badge-pencil {
    transition-duration: 0.01ms !important;
    opacity: 1 !important;
  }
}

/* SortableJS reorder (creator playlist): iOS must not hand touchmove to page scroll, or onMove never runs */

.submission-drag-handle {
  touch-action: none !important;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}

/*
 * During an active playlist sortable drag: lock pointer events on Sortable’s UI (iOS: fallback clone
 * on body; nested .submission-drag-handle can still win elementFromPoint unless descendants are off).
 * Scoped with body:has(…) + .tribute-submissions-sortable--active-drag so a stale .sortable-drag left
 * on a tile (MultiDrag / bail) does not permanently block clicks; SubmissionsGrid strips in onEnd +
 * 100ms mouseup recovery. Requires :has (Safari 15.4+).
 */

body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-fallback,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-fallback *,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-drag,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-drag *,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-ghost,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-ghost *,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-chosen,
body:has([data-submissions-sortable="true"].tribute-submissions-sortable--active-drag) .sortable-chosen * {
  pointer-events: none !important;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}

/* Class alone (higher than utilities without !important); pair with .touch-none on the tile in TS for belt-and-suspenders */

.submissions-grid-item--playlist {
  touch-action: none !important;
}

/* Creator playlist (reorder tools): full-opacity tiles — avoids “flashing” while thumbs decode
   (pairing item-level opacity/transform transitions with inner image paint). */

.submissions-grid-item.submissions-grid-item--playlist {
  opacity: 1 !important;
  /* iOS: whole tile, not just handle, so touchmove isn’t re-targeted to an ancestor scroller */
  touch-action: none !important;
}

/* Set on `data-submissions-sortable` root in onStart / cleared in onEnd — full-drag gesture lock for WebKit */

[data-submissions-sortable="true"].tribute-submissions-sortable--active-drag,
[data-submissions-sortable="true"].tribute-submissions-sortable--active-drag .submissions-grid-item--playlist,
[data-submissions-sortable="true"].tribute-submissions-sortable--active-drag .submission-drag-handle {
  touch-action: none !important;
}

/* Handle mousedown preselect for MultiDrag — hide checkbox/ring until drag ends or tap is undone */

.submissions-grid-item[data-implicit-selection="true"].submission-multi-selected::after {
  display: none !important;
}

.submissions-grid-item[data-implicit-selection="true"] .submission-select-face--selected::before {
  background-color: transparent !important;
}

.submissions-grid-item[data-implicit-selection="true"] .submission-select-check-wrap {
  display: none !important;
}

/* Playlist reorder save in flight (see SubmissionsGrid.showReorderSavingOverlay) */

.submissions-reorder-saving-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  border-radius: 0.5rem;
  pointer-events: auto;
}

.submissions-reorder-saving-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.submissions-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(90vw, 480px);
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-radius: 9999px;
  font-family: var(--theme-font-family);
  font-size: 0.875rem;
  font-weight: 500;
  /*
   * Readable “frosted” surface: theme-tinted fill + inset scrim so labels stay legible
   * when bright media sits directly under the bar (blur alone isn’t enough contrast).
   */
  background: var(
    --submissions-action-bar-bg,
    color-mix(in srgb, var(--theme-bg-color) 62%, transparent)
  );
  color: var(--submissions-action-bar-fg, var(--theme-text-color));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /*
   * Ring: real 1px border for even edges on the pill shape; primary at partial opacity.
   */
  border: 1px solid color-mix(in srgb, var(--theme-primary-color) 50%, transparent);
  box-shadow:
    inset 0 0 0 9999px rgba(0, 0, 0, 0.2),
    0 0 28px color-mix(in srgb, var(--theme-primary-color) 32%, transparent),
    0 8px 32px rgba(0, 0, 0, 0.24);
}

.submissions-action-bar.submissions-action-bar--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.submissions-action-bar.submissions-action-bar--dragging {
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}

html[data-theme="light"] .submissions-action-bar {
  background: var(--submissions-action-bar-bg, color-mix(in srgb, #ffffff 86%, transparent));
  border-color: color-mix(in srgb, var(--theme-primary-color) 50%, transparent);
  box-shadow:
    inset 0 0 0 9999px rgba(255, 255, 255, 0.35),
    0 0 24px color-mix(in srgb, var(--theme-primary-color) 24%, transparent),
    0 8px 32px rgba(0, 0, 0, 0.12);
}

.submissions-action-bar__count {
  padding: 0 0.5rem;
  white-space: nowrap;
}

.submissions-action-bar__hint {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
}

.submissions-action-bar__divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.2;
}

.submissions-action-bar__tooltip {
  display: inline-flex;
}

.submissions-action-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.submissions-action-bar__btn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.submissions-action-bar__btn--danger:hover {
  background: rgba(220, 38, 38, 0.2);
  color: rgb(239, 68, 68);
}

.submissions-action-bar__btn:focus-visible {
  outline: 2px solid var(--theme-primary-color);
  outline-offset: 2px;
}

.submissions-action-bar__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 640px) {
  .submissions-action-bar__hint {
    display: none;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .submissions-action-bar {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   GUEST LIST FLOATING ACTION BAR
   Frosted pill that appears at the bottom of the viewport when one or more
   guest rows are checked. Mounted to document.body (not inside the slideout)
   so the slideout's `transform` context doesn't trap `position: fixed`. Same
   visual language as .submissions-action-bar so multi-select feels consistent
   across the app, but lighter on actions (delete / clear) and uses text+icon
   buttons rather than icon-only since the action
   set is short enough that labels fit comfortably.
   ========================================================================== */

.gl-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 60;
  /* above .submissions-action-bar (40) so it wins if both ever coexist */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: min(92vw, 520px);
  padding: 0.4rem 0.75rem 0.4rem 1rem;
  border-radius: 9999px;
  font-family: var(--theme-font-family);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(
    --gl-action-bar-bg,
    color-mix(in srgb, var(--theme-bg-color) 62%, transparent)
  );
  color: var(--gl-action-bar-fg, var(--theme-text-color));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--theme-primary-color) 50%, transparent);
  box-shadow:
    inset 0 0 0 9999px rgba(0, 0, 0, 0.2),
    0 0 28px color-mix(in srgb, var(--theme-primary-color) 32%, transparent),
    0 8px 32px rgba(0, 0, 0, 0.24);
}

.gl-action-bar.gl-action-bar--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

html[data-theme="light"] .gl-action-bar {
  background: var(--gl-action-bar-bg, color-mix(in srgb, #ffffff 86%, transparent));
  border-color: color-mix(in srgb, var(--theme-primary-color) 50%, transparent);
  box-shadow:
    inset 0 0 0 9999px rgba(255, 255, 255, 0.35),
    0 0 24px color-mix(in srgb, var(--theme-primary-color) 24%, transparent),
    0 8px 32px rgba(0, 0, 0, 0.12);
}

.gl-action-bar__count {
  padding: 0 0.5rem 0 0.25rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* avoid jitter as count flips between widths */
}

.gl-action-bar__divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.2;
}

.gl-action-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}

.gl-action-bar__btn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.gl-action-bar__btn--danger:hover {
  background: rgba(220, 38, 38, 0.2);
  color: rgb(239, 68, 68);
}

.gl-action-bar__btn--icon {
  width: 2rem;
  padding: 0;
  justify-content: center;
}

.gl-action-bar__btn:focus-visible {
  outline: 2px solid var(--theme-primary-color);
  outline-offset: 2px;
}

.gl-action-bar__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* On phones, drop the inline labels and let the icons speak for themselves —
   keeps the pill from blowing past the viewport edge with 3 actions. */

@media (max-width: 480px) {
  .gl-action-bar__btn-text {
    display: none;
  }

  .gl-action-bar__btn:not(.gl-action-bar__btn--icon) {
    width: 2rem;
    padding: 0;
    justify-content: center;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .gl-action-bar {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* Allow initial animation to work by not applying opacity during animation */

.submissions-grid-item.opacity-0 {
  opacity: 0 !important;
}

.submissions-grid-item:hover {
  opacity: 1 !important;
}

/* Skeleton shown until submission thumb image loads */

.submission-thumb-skeleton {
  background-color: var(--submissions-grid-bg, rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(105deg, transparent 0% 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60% 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

html[data-theme="light"] .submission-thumb-skeleton {
  background-color: var(--submissions-grid-bg, rgba(0, 0, 0, 0.05));
  background-image: linear-gradient(105deg, transparent 0% 40%, rgba(0, 0, 0, 0.08) 50%, transparent 60% 100%);
}

/* Creator uploads: selection ring — full-bleed thumbs sit above normal inset/border paint, and
   overflow:hidden clips outer box-shadow. Draw an inset ring in ::after stacked above the thumb (solid primary). */

.submissions-grid-item.submission-multi-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Above thumb (z-0) and play/label (z-10), below drag + select (z-30) */
  z-index: 20;
  box-shadow: inset 0 0 0 2px var(--theme-primary-color);
}

.submission-select-face {
  position: relative;
  isolation: isolate;
  border-width: 0;
  transition: background-color 0.15s ease;
}

/* Unchecked: 50% white */

.submission-select-face:not(.submission-select-face--selected) {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Checked: solid theme primary behind icon */

.submission-select-face--selected {
  background-color: transparent !important;
}

.submission-select-face--selected::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--theme-primary-color);
  z-index: 0;
}

.submission-select-face--selected .submission-select-check-wrap {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

/* Slightly larger + heavier stroke than default `check` (path embeds stroke-width; override here). */

.submission-select-check-wrap .svg-icon path {
  stroke-width: 2.5;
}

/* Playlist tiles: hide drag + multiselect until hover/focus only on real pointing devices.
   (Avoid `md:` — wide touch tablets match that breakpoint but have no hover, which left controls
   permanently invisible.) */

@media (hover: hover) and (pointer: fine) {
  .submissions-grid-item--playlist .submission-drag-handle,
  .submissions-grid-item--playlist .submission-multi-select-checkbox {
    opacity: 0;
    pointer-events: none;
  }

  .submissions-grid-item--playlist:hover .submission-drag-handle,
  .submissions-grid-item--playlist:hover .submission-multi-select-checkbox,
  .submissions-grid-item--playlist:focus-within .submission-drag-handle,
  .submissions-grid-item--playlist:focus-within .submission-multi-select-checkbox {
    opacity: 1;
    pointer-events: auto;
  }

  .submissions-grid-item--playlist .submission-drag-handle:focus-visible,
  .submissions-grid-item--playlist .submission-multi-select-checkbox:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Multi-select: keep controls visible when selected (any viewport / pointer type). */

.submissions-grid-item.submission-multi-selected .submission-multi-select-checkbox,
.submissions-grid-item.submission-multi-selected .submission-drag-handle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Narrow viewports: drag-only reorder — hide multi-select (still in DOM for Sortable; no multi-move UI). */

@media (max-width: 767px) {
  .submissions-grid-item--playlist .submission-multi-select-checkbox,
  .submissions-grid-item.submission-multi-selected .submission-multi-select-checkbox {
    display: none !important;
  }
}

/* 16:9 stage inside square tile — text overlay x/y match story-player (slideBuilder.addTextOverlays) */

.submission-text-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ==========================================================================
   GIFT TIMELINE (Custom timeline for gift purchases in public preview)
   ========================================================================== */

/* Circle: semi-transparent white in dark mode, semi-transparent dark in light mode */

.gift-timeline-circle {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: var(--ui-border-medium);
}

[data-theme="dark"] .gift-timeline-circle {
  background-color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .gift-timeline-circle {
  background-color: rgba(31, 41, 55, 0.25);
}

/* Pattern image backgrounds: stronger timeline nodes for contrast */

html[data-theme-pattern="true"][data-theme="dark"] .gift-timeline-circle {
  background-color: rgba(255, 255, 255, 0.4);
}

html[data-theme-pattern="true"][data-theme="light"] .gift-timeline-circle {
  background-color: rgba(31, 41, 55, 0.4);
}

/* Gift icon: white in dark mode, dark in light mode */

.gift-timeline-icon {
  color: #ffffff;
}

[data-theme="dark"] .gift-timeline-icon {
  color: #ffffff;
}

[data-theme="light"] .gift-timeline-icon {
  color: #1f2937;
}

/* Hide toast containers when empty */

#individual-toast-container:empty,
#family-toast-container:empty {
  display: none;
}

/* ==========================================================================
   MANAGE VIEW
   Styles for the ManageView component (My Tributes page)
   ========================================================================== */

/* Theme Toggle Switch - Custom component that requires specific positioning */

.theme-toggle-wrapper {
  display: flex;
  align-items: center;
}

.theme-checkbox {
  position: absolute;
  opacity: 0;
}

.submissions-grid-item.theme-checkbox {
  opacity: 0;
}

.theme-label {
  position: relative;
  display: flex;
  height: 26px;
  width: 50px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-radius: 9999px;
  padding: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta .ip-cta-card-inner--media .ip-cta-card-media-row > .theme-label.flex-shrink-0 {
  align-self: center;
}

.theme-label {
  background-color: #1A1A1A;
}

.theme-checkbox:checked + .theme-label {
  background-color: #1A1A1A;
}

/* Dark mode: black track so it stands out against navy nav */

[data-theme="dark"] .theme-toggle-wrapper .theme-label {
  background-color: #000000 !important;
}

.theme-ball {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  z-index: 2;
  height: 22px;
  width: 22px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: translateX(0px);
}

.theme-checkbox:checked + .theme-label .theme-ball {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.theme-icon {
  position: absolute;
  z-index: 1;
  display: flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.theme-icon svg {
  height: 100%;
  width: 100%;
}

#slideout-footer .btn.theme-icon svg,
#invitations-cta-bar .btn.theme-icon svg {
  /* Match the form input radius (rounded-lg = 0.5rem) so fields and buttons
     share the same corner scale. DaisyUI .btn defaults to a smaller radius
     (--radius-field), which made fields read as "rounder" than the CTA. */
  font-size: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-height: 0;
  height: auto;
  /* Match the form input radius (rounded-lg = 0.5rem) so fields and buttons
     share the same corner scale. DaisyUI .btn defaults to a smaller radius
     (--radius-field), which made fields read as "rounder" than the CTA. */
  border-radius: 0.5rem;
}

.theme-icon-moon {
  left: 0.5rem;
  opacity: 0;
}

.submissions-grid-item.theme-icon-moon {
  opacity: 0;
}

.theme-icon-sun {
  right: 0.5rem;
  opacity: 1;
}

.theme-checkbox:checked + .theme-label .theme-icon-moon {
  opacity: 1;
}

.theme-checkbox:checked + .theme-label .theme-icon-sun {
  opacity: 0;
}

.submissions-grid-item.theme-checkbox:checked + .theme-label .theme-icon-sun {
  opacity: 0;
}

.theme-checkbox:not(:checked) + .theme-label .theme-icon-moon {
  opacity: 0;
}

.submissions-grid-item.theme-checkbox:not(:checked) + .theme-label .theme-icon-moon {
  opacity: 0;
}

.theme-checkbox:not(:checked) + .theme-label .theme-icon-sun {
  opacity: 1;
}

/* Manage View CSS Variables - Set dynamically by ManageView component */

:root {
  --manage-bg-color: #2b2c2e;
  --manage-text-color: #e7e8e8;
  --manage-heading-color: #ffffff;
  --manage-card-bg: rgba(255, 255, 255, 0.05);
  --manage-card-border: rgba(255, 255, 255, 0.1);
  --manage-card-body-bg: rgba(255, 255, 255, 0.02);
  --manage-tab-active-bg: rgba(255, 255, 255, 0.3);
  --manage-tab-inactive-bg: rgba(255, 255, 255, 0.15);
  --manage-tab-border: rgba(255, 255, 255, 0.15);
  --manage-tab-text: #ffffff;
  --manage-new-card-bg: #000000;
  --manage-new-card-border: rgba(255, 255, 255, 0.75);
  --manage-new-card-text: rgba(255, 255, 255, 0.75);
  --manage-placeholder-bg: rgba(255, 255, 255, 0.75);
  --manage-date-pill-bg: rgba(0, 0, 0, 0.5);
  --manage-date-pill-text: #ffffff;
  --manage-draft-badge-color: #F59E0B;
}

/* Manage View utility classes */

.manage-bg {
  background-color: var(--manage-bg-color);
}

.manage-text {
  color: var(--manage-text-color);
}

.manage-heading {
  color: var(--manage-heading-color);
}

.manage-card {
  background-color: var(--manage-card-bg);
  border-color: var(--manage-card-border);
}

.manage-card-body {
  background-color: var(--manage-card-body-bg);
}

.manage-tab-active {
  background-color: var(--manage-tab-active-bg);
  color: var(--manage-tab-text);
  border-color: var(--manage-tab-border);
}

.manage-tab-inactive {
  background-color: var(--manage-tab-inactive-bg);
  color: var(--manage-tab-text);
}

.manage-new-card {
  background-color: var(--manage-new-card-bg);
  border-color: var(--manage-new-card-border);
}

.manage-new-card-text {
  color: var(--manage-new-card-text);
}

.manage-placeholder {
  background-color: var(--manage-placeholder-bg);
}

.manage-date-pill {
  background-color: var(--manage-date-pill-bg);
  color: var(--manage-date-pill-text);
}

/* Manage View Typography */

.manage-heading {
  font-family: 'Newsreader', serif;
}

/* Settings Slideout - Mode Select Backdrop Blur */

.settings-mode-select:focus {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.settings-mode-select::picker(select) {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Button Hover Darken Effect */

.button-hover-darken {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button-hover-darken:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .button-hover-darken:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* Public / preview: calendar, RSVP, upload photos — and creator publish Media row (Record / Add Video / Add Photos) */

.public-secondary-action-btn {
  /* Match Daisy `.btn` corner radius (same as Record / Add Your Video primary CTA) */
  border-radius: var(--radius-field, 0.5rem);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-primary-color) 16%, transparent) 0%,
    color-mix(in srgb, var(--theme-secondary-color) 12%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--ui-border-medium) 70%, transparent) !important;
  color: var(--ui-text-primary) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: filter 0.2s ease, opacity 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.public-secondary-action-btn:hover:not(.cursor-not-allowed) {
  filter: brightness(1.07);
}

.public-secondary-action-btn:nth-child(2) {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--theme-secondary-color) 14%, transparent) 0%,
    color-mix(in srgb, var(--theme-primary-color) 11%, transparent) 100%) !important;
}

.public-secondary-action-btn:nth-child(3) {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--theme-primary-color) 16%, transparent) 0%,
    color-mix(in srgb, var(--theme-secondary-color) 12%, transparent) 100%) !important;
}

/* Creator publish: Record / Add Video / Add Photos — progress-tracker-style glass (not full navbar CTA) */

.creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ui-border-subtle) !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(2),
.creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(3) {
  background: rgba(0, 0, 0, 0.48) !important;
}

.creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:hover:not(.cursor-not-allowed) {
  filter: none;
  background: rgba(0, 0, 0, 0.58) !important;
  border-color: color-mix(in srgb, var(--ui-border-subtle) 65%, rgba(255, 255, 255, 0.35)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 6px 20px rgba(0, 0, 0, 0.28);
}

.creator-publish-media-actions .creator-publish-media-action app-icon,
.creator-publish-media-actions .creator-publish-media-action app-icon svg {
  color: inherit !important;
}

.creator-publish-media-actions .creator-publish-media-action app-icon svg path[stroke] {
  stroke: currentColor !important;
}

.creator-publish-media-actions .creator-publish-media-action app-icon svg path[fill]:not([fill="none"]):not([fill="transparent"]) {
  fill: currentColor !important;
}

.creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn.cursor-not-allowed {
  opacity: 0.55 !important;
  filter: none;
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(0, 0, 0, 0.38) !important;
  text-shadow: none;
}

html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn,
html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(2),
html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(3) {
  color: #111827 !important;
  text-shadow: none;
  border: 1px solid var(--ui-border-subtle) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 14px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:hover:not(.cursor-not-allowed) {
  filter: none;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: color-mix(in srgb, var(--ui-border-subtle) 55%, rgba(0, 0, 0, 0.12)) !important;
}

html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn.cursor-not-allowed {
  color: rgba(17, 24, 39, 0.55) !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Creator publish: dashed “Add Media” grid tile + popover menu (neutral chrome; not sortable). */

.creator-media-grid-add-tile {
  box-sizing: border-box;
  border: 2px dashed var(--ui-border-medium);
  background: var(--ui-bg-subtle);
}

.creator-media-grid-add-tile__open {
  color: var(--theme-text-color);
  cursor: pointer;
}

.creator-media-grid-add-tile__open:focus-visible {
  outline: 2px solid var(--ui-border-strong);
  outline-offset: 2px;
}

.creator-media-grid-add-tile__glyph {
  color: var(--theme-text-color);
}

.creator-media-grid-add-tile__caption {
  color: var(--theme-text-color);
}

.creator-media-add-menu-item:hover {
  background: var(--theme-hover-bg);
}

/* Public page mobile: slightly larger “Add Your Video” + padding; secondary row = no pill chrome */

@media (max-width: 767px) {
  #participate-btn {
    font-size: 1.125rem !important;
    padding-top: 1.05rem !important;
    padding-bottom: 1.05rem !important;
    min-height: 3.5rem;
  }

  .public-secondary-action-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .public-secondary-action-btn:nth-child(2),
  .public-secondary-action-btn:nth-child(3) {
    background: transparent !important;
  }

  .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn,
  .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(2),
  .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(3) {
    border-radius: var(--radius-field, 0.5rem) !important;
    border: 1px solid var(--ui-border-subtle) !important;
  }

  html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn,
  html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(2),
  html[data-theme="light"] .creator-publish-media-actions .creator-publish-media-action.public-secondary-action-btn:nth-child(3) {
    border-radius: var(--radius-field, 0.5rem) !important;
    border: 1px solid var(--ui-border-subtle) !important;
  }
}

/* Section heading text - pure white/black by mode */

.section-heading-text {
  color: #ffffff;
}

html[data-theme="light"] .section-heading-text {
  color: #000000;
}

/*
 * Gift Purchases "Allow Gifts?" toggle — checked color from app theme primary.
 * Daisy `toggle-secondary` uses --color-secondary (Tribute’s secondary accent is often pink #D27CFE).
 */

input.gift-marketplace-toggle.toggle.toggle-sm:checked {
  background-color: var(--theme-primary-color) !important;
  border-color: var(--theme-primary-color) !important;
  color: #ffffff !important;
  --input-color: #ffffff !important;
}

/* Gift Purchases: View Transitions (fade + slide) when toggling marketplace / loading data */

@supports (view-transition-name: none) {
  .gift-purchases-section--vt {
    view-transition-name: gift-section;
  }
}

::view-transition-old(gift-section),
::view-transition-new(gift-section) {
  animation-duration: 0.38s;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

::view-transition-old(gift-section) {
  animation-name: gift-section-fade-slide-out;
}

::view-transition-new(gift-section) {
  animation-name: gift-section-fade-slide-in;
}

@keyframes gift-section-fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes gift-section-fade-slide-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(gift-section),
  ::view-transition-new(gift-section) {
    animation: none !important;
  }
}

/* ==========================================================================
   NAVBAR CREATOR - View mode tabs (Create/Preview)
   ========================================================================== */

/* Daisy `.tabs-box .tab-content` border-radius uses `var(--tabs-box-radius)`; keep defined if base `.tabs-box` is absent from bundle. */

.tabs-box {
  --tabs-box-radius: calc(var(--radius-field) + var(--radius-field) + var(--radius-field));
}

#navbar-view-mode-tabs.tabs.tabs-box {
  background-color: var(--toggle-bg) !important;
  border: 1px solid var(--toggle-border) !important;
  border-radius: var(--rounded-box, 0.5rem);
  --tab-height: auto !important;
  flex-wrap: nowrap;
  padding: 2px;
}

#navbar-view-mode-tabs .tab {
  color: var(--ui-text-tertiary);
  border: none;
  padding: 0.125rem 0.5rem;
  min-height: 1.5rem;
  font-size: 0.8125rem;
}

#navbar-view-mode-tabs .tab:checked {
  background-color: var(--ui-text-primary) !important;
  color: var(--ui-bg-strong) !important;
  border: none;
}

/* Mobile Create/Preview toggle - in-page below gift purchases; radius matches Gift Purchases section (rounded = 0.25rem) */

.mobile-view-toggle.tabs.tabs-box {
  background-color: var(--toggle-bg, rgba(255,255,255,0.12)) !important;
  border: 1px solid var(--toggle-border, rgba(255,255,255,0.2)) !important;
  border-radius: 0.25rem;
  --tab-height: auto !important;
  flex-wrap: nowrap;
  padding: 3px;
}

.mobile-view-toggle .tab {
  color: var(--ui-text-tertiary);
  border: none;
  padding: 0.5rem 1rem;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.mobile-view-toggle .tab:checked {
  background-color: var(--ui-text-primary) !important;
  color: var(--ui-bg-strong) !important;
  border: none;
}

/* ==========================================================================
   NAVBAR CREATOR - Shopping cart dropdown
   ========================================================================== */

#shopping-cart-dropdown input::-moz-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#shopping-cart-dropdown input::placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#shopping-cart-dropdown input::-moz-selection {
  background: var(--theme-primary-color);
  color: var(--btn-primary-text);
}

#shopping-cart-dropdown input::selection {
  background: var(--theme-primary-color);
  color: var(--btn-primary-text);
}

#shopping-cart-dropdown input::-moz-selection {
  background: var(--theme-primary-color);
  color: var(--btn-primary-text);
}

/* ==========================================================================
   SETTINGS SLIDEOUT - Placeholder color
   ========================================================================== */

#slideout-panel input::-moz-placeholder, #slideout-panel textarea::-moz-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

#slideout-panel input::placeholder,
#slideout-panel textarea::placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   COMPLETE MODAL - Cancel button hover
   ========================================================================== */

#cancel-complete-btn:hover,
#completion-modal-cancel:hover {
  background-color: color-mix(in srgb, var(--theme-text-color) 12%, transparent) !important;
}

/* ==========================================================================
   DELIVERY PREFERENCES FORM - Placeholder color & active icon stroke
   ========================================================================== */

.delivery-preferences-form input::-moz-placeholder, .delivery-preferences-form textarea::-moz-placeholder, .delivery-preferences-form select::-moz-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

.delivery-preferences-form input::placeholder,
.delivery-preferences-form textarea::placeholder,
.delivery-preferences-form select::placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

/* Active icons on primary bg: white in light mode, black in dark mode */

html[data-theme="light"] .delivery-preferences-form #share-with-concierge-card.active app-icon svg path[fill],
html[data-theme="light"] .delivery-preferences-form #share-with-concierge-card.active app-icon svg path[stroke],
html[data-theme="light"] .delivery-preferences-form #dont-share-card.active app-icon svg path[fill],
html[data-theme="light"] .delivery-preferences-form #dont-share-card.active app-icon svg path[stroke] {
  fill: white !important;
  stroke: white !important;
}

html[data-theme="dark"] .delivery-preferences-form #share-with-concierge-card.active app-icon svg path[fill],
html[data-theme="dark"] .delivery-preferences-form #share-with-concierge-card.active app-icon svg path[stroke],
html[data-theme="dark"] .delivery-preferences-form #dont-share-card.active app-icon svg path[fill],
html[data-theme="dark"] .delivery-preferences-form #dont-share-card.active app-icon svg path[stroke] {
  fill: black !important;
  stroke: black !important;
}

/* Inactive icons in light mode: semi-transparent black */

html[data-theme="light"] .delivery-preferences-form #share-with-concierge-card:not(.active) app-icon svg path[fill],
html[data-theme="light"] .delivery-preferences-form #share-with-concierge-card:not(.active) app-icon svg path[stroke],
html[data-theme="light"] .delivery-preferences-form #dont-share-card:not(.active) app-icon svg path[fill],
html[data-theme="light"] .delivery-preferences-form #dont-share-card:not(.active) app-icon svg path[stroke] {
  fill: rgba(0, 0, 0, 0.4) !important;
  stroke: rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   INVITATIONS SLIDEOUT - CSV loading spinner
   ========================================================================== */

@keyframes csv-import-spin {
  to {
    transform: rotate(360deg);
  }
}

.csv-import-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: csv-import-spin 0.8s linear infinite;
}

/* ==========================================================================
   MANAGE VIEW - Navbar and CTA (supplement existing .manage-heading)
   ========================================================================== */

@media (min-width: 768px) {
  .manage-navbar {
    padding: 1.5rem 3rem !important;
  }

  .manage-nav-logo {
    height: 2.5rem !important;
  }
}

.manage-new-tribute-btn {
  background: linear-gradient(135deg, #f02311 0%, #ff4d3d 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(240, 35, 17, 0.3) !important;
  transition: all 0.3s ease !important;
}

.manage-new-tribute-btn:hover {
  background: linear-gradient(135deg, #d41c0c 0%, #f02311 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 35, 17, 0.4) !important;
}

/* ==========================================================================
   SUBMISSIONS GRID - Video player responsive width
   ========================================================================== */

@media (min-width: 768px) {
  #video-player {
    width: 50vw !important;
  }
}

/* ==========================================================================
   PROMPTS MODAL - Custom prompt input placeholder
   ========================================================================== */

#custom-prompt-input::placeholder,
#custom-prompt-input::-webkit-input-placeholder,
#custom-prompt-input::-moz-placeholder,
#custom-prompt-input:-ms-input-placeholder {
  color: var(--ui-text-tertiary) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   CONCIERGE REVIEW - Embedded Story Player Overrides
   ========================================================================== */

/* Lock player to 16:9 on all viewports (fixes mobile letterboxing) */

.concierge-player-aspect#concierge-player-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.concierge-player-aspect .story-player-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.concierge-player-aspect .reveal,
.concierge-player-aspect .reveal .slides,
.concierge-player-aspect .reveal .slides .slide {
  width: 100% !important;
}

.concierge-player-aspect .reveal .slides .slide video,
.concierge-player-aspect .reveal .slides .slide iframe {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Hide fullscreen button in embedded player */

#concierge-player-container .fullscreen-button-container {
  display: none !important;
}

/* Concierge embed: desktop — hide overview + mute (minimal chrome) */

@media (min-width: 768px) {
  #concierge-player-container .top-right-controls {
    display: none !important;
  }
}

/* Concierge embed: mobile — mute only; keep overview hidden */

@media (max-width: 767px) {
  #concierge-player-container .overview-button-container {
    display: none !important;
  }
}

/* “PREVIEW” label above embedded player */

#concierge-player-container .concierge-story-player-preview-watermark {
  font-family: var(--app-font-family);
  font-size: clamp(1.25rem, 2.6vmin, 1.625rem);
  font-weight: 600;
  letter-spacing: normal;
  top: 1.5rem;
}

/* Scale down play/pause buttons */

#concierge-player-container .play-button,
#concierge-player-container .pause-button {
  width: 56px !important;
  height: 56px !important;
}

#concierge-player-container .play-button svg,
#concierge-player-container .pause-button svg {
  width: 28px !important;
  height: 28px !important;
}

/* Placeholder text styling */

.concierge-review-section textarea::-moz-placeholder, .concierge-review-section input::-moz-placeholder {
  color: var(--ui-text-primary) !important;
  opacity: 0.4 !important;
}

.concierge-review-section textarea::placeholder,
.concierge-review-section input::placeholder {
  color: var(--ui-text-primary) !important;
  opacity: 0.4 !important;
}

/* Soften focus ring on concierge inputs */

.concierge-review-section textarea:focus,
.concierge-review-section input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--ui-border-strong) !important;
}

/* “Add request” / limit popovers above textarea — position + subtle zoom/slide-in (transform not used for layout) */

.concierge-review-section .concierge-inline-tooltip {
  bottom: calc(100% + 0.45rem);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.97);
  transition:
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.concierge-review-section .concierge-inline-tooltip.concierge-inline-tooltip--open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.concierge-review-section .concierge-inline-tooltip-dismiss {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

.concierge-review-section .concierge-inline-tooltip-dismiss:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary-color, #8b5cf6) 65%, white);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .concierge-review-section .concierge-inline-tooltip {
    transition-duration: 0.01ms;
    transition-delay: 0s;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .concierge-review-section .concierge-inline-tooltip:not(.concierge-inline-tooltip--open) {
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(1);
  }
}

/* Preloader spinner keyframe */

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

/* Overview mode: full width slides, smaller grid, tighter gap */

#concierge-player-container .overview .slides {
  width: 100% !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  padding: 0.5rem !important;
}

@media (min-width: 768px) {
  #concierge-player-container .overview .slides {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  #concierge-player-container .overview .slides {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* Mobile concierge heading row: scale status dot up next to text-base section title */

.concierge-review-section .concierge-review-heading-status-dot-wrap .status {
  width: 0.75rem;
  height: 0.75rem;
}

/* Concierge publish media strip: 5 tiles per row on mobile (grid is authored as grid-cols-6 for pagination math) */

@media (max-width: 767px) {
  #concierge-submissions-section .grid.grid-cols-6 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Extra breathing room above “Show less” when concierge grid is expanded */

#concierge-submissions-section button.submissions-show-less[data-submissions-show-less-publish='true'] {
  margin-top: 1.75rem;
}

/* Concierge column: Media grid → in-product CTAs (publish page stacks CTAs above grid instead) */

.concierge-below-player .ip-cta-stack {
  margin-top: 1.25rem;
}

/* Comment bubbles — slightly darkened in dark mode, slightly lightened in light mode */

.concierge-comment-bubble {
  background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .concierge-comment-bubble {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Icon-only controls: `app-icon` is pointer-events: none globally, but inner SVG/div still
   defaults to `auto`, so the deepest hit target had no `title` and native tooltips never fired. */

.concierge-review-section button.concierge-toggle-complete-btn *,
.concierge-review-section button.concierge-toggle-feedback-required-btn *,
.concierge-review-section button#concierge-tasks-sort-trigger *,
.concierge-review-section button.concierge-completed-toggle-header * {
  pointer-events: none;
}

/* Appended to `document.body` — styled like Daisy `.tooltip[data-tip]` (theme vars + arrow); no `title` on buttons so native OS tooltip doesn’t stack. */

.app-floating-action-tip,
.concierge-floating-action-tip {
  position: fixed;
  z-index: 99999;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 8px 12px;
  border-radius: var(--radius-field, 0.25rem);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.28);
  background-color: var(--tooltip-glass-surface);
  border: 1px solid var(--tooltip-glass-border);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  color: var(--ui-text-primary, #ffffff);
  font-family: var(--app-font-family);
  opacity: 1;
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme='light'] .app-floating-action-tip,
html[data-theme='light'] .concierge-floating-action-tip {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] .app-floating-action-tip,
[data-theme='dark'] .concierge-floating-action-tip {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .app-floating-action-tip,
  .concierge-floating-action-tip {
    transition-duration: 0.01ms;
  }
}

/* Arrow — same role as `.tooltip.tooltip-top[data-tip]:after` */

.app-floating-action-tip::after,
.concierge-floating-action-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--tooltip-glass-arrow);
}

.app-floating-action-tip.app-floating-action-tip--flip-below::after,
.concierge-floating-action-tip.concierge-floating-action-tip--flip-below::after {
  bottom: auto;
  top: -6px;
  border-top: none;
  border-bottom: 6px solid var(--tooltip-glass-arrow);
}

.app-floating-action-tip.hidden,
.concierge-floating-action-tip.hidden {
  display: none;
}

/* Inside showModal() dialog top layer — above .modal-box / backdrop siblings */

dialog.modal > .app-floating-action-tip {
  z-index: 200;
}

#slideout-panel > .app-floating-action-tip {
  z-index: 200;
}

/*
 * Task cards: default browser behavior selects any text on drag. Disable selection on chrome
 * (headers, badges, Reply) so clicks don’t highlight UI labels; keep request body + comments copyable.
 */

.concierge-review-section .concierge-task {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.concierge-review-section .concierge-task-request,
.concierge-review-section .concierge-task-request *,
.concierge-review-section .concierge-comment-bubble,
.concierge-review-section .concierge-comment-bubble * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
       user-select: text !important;
}

/* Explicit highlight: ancestor `.concierge-task { user-select: none }` can suppress default selection painting in WebKit */

.concierge-review-section .concierge-task-request ::-moz-selection, .concierge-review-section .concierge-task-request *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-task-request ::selection,
.concierge-review-section .concierge-task-request *::selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-task-request::-moz-selection,
.concierge-review-section .concierge-task-request *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-comment-bubble ::-moz-selection, .concierge-review-section .concierge-comment-bubble *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-comment-bubble ::selection,
.concierge-review-section .concierge-comment-bubble *::selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-comment-bubble::-moz-selection,
.concierge-review-section .concierge-comment-bubble *::-moz-selection {
  background-color: rgba(59, 130, 246, 0.45) !important;
  color: inherit !important;
}

.concierge-review-section .concierge-task textarea,
.concierge-review-section .concierge-task input {
  -webkit-user-select: text;
  -moz-user-select: text;
       user-select: text;
}

/* Hide uploader label in overview mode */

#concierge-player-container .uploader-label {
  display: none !important;
}

/* Concierge status badges — softened, muted variants */

.concierge-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.5rem;
  /* matches Tailwind w-6/h-6 concierge icon buttons */
  padding: 1px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.concierge-badge-info {
  background-color: rgba(96, 165, 250, 0.15);
  color: rgb(147, 197, 253);
}

.concierge-badge-warning {
  background-color: rgba(251, 191, 36, 0.15);
  color: rgb(252, 211, 77);
}

.concierge-badge-success {
  background-color: rgba(74, 222, 128, 0.15);
  color: rgb(134, 239, 172);
}

.concierge-badge-error {
  background-color: rgba(248, 113, 113, 0.15);
  color: rgb(252, 165, 165);
}

.concierge-badge-accent {
  background-color: rgba(192, 132, 252, 0.15);
  color: rgb(216, 180, 254);
}

.concierge-badge-ghost {
  background-color: rgba(156, 163, 175, 0.15);
  color: rgb(209, 213, 219);
}

/* Light mode overrides */

[data-theme="light"] .concierge-badge-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(37, 99, 235);
}

[data-theme="light"] .concierge-badge-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: rgb(180, 83, 9);
}

[data-theme="light"] .concierge-badge-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}

[data-theme="light"] .concierge-badge-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(220, 38, 38);
}

[data-theme="light"] .concierge-badge-accent {
  background-color: rgba(168, 85, 247, 0.1);
  color: rgb(147, 51, 234);
}

[data-theme="light"] .concierge-badge-ghost {
  background-color: rgba(107, 114, 128, 0.1);
  color: rgb(75, 85, 99);
}

/* Tasks header: show/hide completed (eye icon, Vimeo-style) */

.concierge-completed-toggle-header {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.55rem;
  margin: 0;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-family: var(--app-font-family);
  background: transparent;
  color: inherit;
  transition: background-color 0.15s ease;
}

.concierge-completed-toggle-header:hover {
  background-color: var(--ui-bg-subtle-hover);
}

.concierge-completed-toggle-header-icon {
  display: inline-flex;
  color: var(--ui-text-secondary);
}

.concierge-completed-toggle-header:hover .concierge-completed-toggle-header-icon {
  color: var(--ui-text-primary);
}

/* Separator between "Hide completed" and task sort control */

.concierge-tasks-header-sep {
  width: 1px;
  height: 1rem;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--ui-text-secondary) 40%, transparent);
}

/* Concierge compact header cover — edit chip matches CoverImage (#edit-image-btn); light theme needs clearer edge on pale photos */

#concierge-cover-image .concierge-cover-edit-chip-inner {
  border-color: rgba(0, 0, 0, 0.2);
}

html[data-theme='light'] #concierge-cover-image .concierge-cover-edit-chip {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme='light'] #concierge-cover-image .concierge-cover-edit-chip-inner {
  border-color: rgba(0, 0, 0, 0.3);
}

/* Concierge task sidebar: layout + cards (tasks scroll vs composer split) */

.concierge-task-panel-layout {
  min-height: 0;
  box-sizing: border-box;
}

.concierge-task-panel-list-shell {
  min-height: 0;
  box-sizing: border-box;
}

.concierge-task-panel-composer-shell {
  box-sizing: border-box;
}

/* Add request — no text: native disabled + muted (gradient btn stays non-interactive) */

.concierge-review-section #concierge-add-task-btn:disabled {
  opacity: 0.42 !important;
  /* Daisy `.btn:disabled` sets pointer-events: none, which prevents cursor: not-allowed from applying */
  pointer-events: auto !important;
  cursor: not-allowed !important;
  filter: grayscale(0.2) brightness(0.9);
  box-shadow: none !important;
}

/* Orientation copy under concierge heading — full width; letter-spacing reads as subtitle */

.concierge-review-section .concierge-review-orientation-subtitle {
  max-width: none;
  width: 100%;
  letter-spacing: 0.0175em;
}

.concierge-review-section .concierge-feedback-needed-banner {
  background-color: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.concierge-review-section .concierge-task.concierge-task--blocked {
  margin-left: -0.125rem;
  padding-left: calc(1rem - 3px);
  border-left: 3px solid rgb(234 179 8);
  border-radius: 4px;
}

.concierge-review-section .concierge-task.concierge-task--completed {
  margin-left: -0.125rem;
  padding-left: calc(1rem - 3px);
  border-left: 3px solid rgb(74 222 128);
  border-radius: 4px;
}

.concierge-review-section .concierge-task-request,
.concierge-review-section .concierge-task-request p,
.concierge-review-section .concierge-task-request li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.concierge-review-section .concierge-task-request ul {
  max-width: 100%;
}

.concierge-review-section .concierge-request-input-wrap {
  max-width: 100%;
}

/* Task Reply — same Daisy btn-sm radius as Add; solid outline (global .btn strips borders) */

.concierge-review-section button.concierge-comment-reply-btn.btn.btn-sm {
  border: 1px solid var(--ui-border-medium) !important;
  background-color: var(--ui-bg-subtle-hover) !important;
  color: var(--ui-text-secondary) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   NON-CREATOR CTA BANNER: glows, bokeh, hearts, sparkles
   ========================================================================== */

.cta-banner-decor {
  position: relative;
}

.cta-banner-decor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3333);
  pointer-events: none;
  z-index: 1;
}

/* Glow layers */

.cta-banner-glow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.cta-banner-glow-main {
  position: absolute;
  top: 45%;
  right: 8%;
  transform: translate(10%, -50%);
  width: 560px;
  height: 560px;
  background: radial-gradient(ellipse, rgba(240,199,94,0.28) 0%, rgba(220,170,60,0.14) 25%, rgba(200,140,40,0.06) 45%, transparent 70%);
  border-radius: 50%;
}

.cta-banner-glow-hot {
  position: absolute;
  top: 38%;
  right: 4%;
  transform: translate(5%, -40%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255,230,150,0.18) 0%, rgba(255,210,100,0.06) 40%, transparent 65%);
  border-radius: 50%;
}

.cta-banner-glow-rim {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translate(15%, -55%);
  width: 440px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(255,200,80,0.1) 0%, transparent 60%);
  border-radius: 50%;
}

.cta-banner-glow-purple {
  position: absolute;
  bottom: -20%;
  left: 15%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(120,60,200,0.06) 0%, transparent 60%);
  border-radius: 50%;
}

/* Bokeh blobs */

.cta-banner-bokeh {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  filter: blur(8px);
}

.cta-banner-bk-gold {
  background: radial-gradient(ellipse, rgba(240,200,90,0.2) 0%, rgba(240,200,90,0.06) 40%, rgba(240,200,90,0) 70%);
}

.cta-banner-bk-warm {
  background: radial-gradient(ellipse, rgba(255,180,100,0.15) 0%, rgba(255,180,100,0.04) 40%, rgba(255,180,100,0) 70%);
}

.cta-banner-bk-soft {
  background: radial-gradient(ellipse, rgba(255,240,200,0.1) 0%, rgba(255,240,200,0.03) 40%, rgba(255,240,200,0) 70%);
}

.cta-banner-bk1 {
  width: 140px;
  height: 110px;
  border-radius: 55% 45% 50% 50%;
  top: 12%;
  right: 22%;
  animation: cta-banner-drift 6s ease-in-out infinite;
}

.cta-banner-bk2 {
  width: 100px;
  height: 75px;
  border-radius: 45% 55% 48% 52%;
  top: 22%;
  right: 0%;
  animation: cta-banner-drift 7s ease-in-out infinite 1s;
}

.cta-banner-bk3 {
  width: 160px;
  height: 120px;
  border-radius: 50% 50% 42% 58%;
  top: 50%;
  right: -4%;
  animation: cta-banner-drift 8s ease-in-out infinite 2s;
}

.cta-banner-bk4 {
  width: 80px;
  height: 60px;
  border-radius: 48% 52% 55% 45%;
  top: 32%;
  right: 24%;
  animation: cta-banner-drift 5s ease-in-out infinite 0.5s;
}

.cta-banner-bk5 {
  width: 120px;
  height: 90px;
  border-radius: 52% 48% 45% 55%;
  bottom: 14%;
  right: 4%;
  animation: cta-banner-drift 7s ease-in-out infinite 3s;
}

.cta-banner-bk6 {
  width: 70px;
  height: 90px;
  border-radius: 45% 55% 52% 48%;
  top: 14%;
  right: 6%;
  animation: cta-banner-drift 5.5s ease-in-out infinite 1.5s;
}

.cta-banner-bk7 {
  width: 110px;
  height: 80px;
  border-radius: 55% 45% 48% 52%;
  bottom: 10%;
  right: 2%;
  animation: cta-banner-drift 6.5s ease-in-out infinite 0.8s;
}

.cta-banner-bk8 {
  width: 90px;
  height: 120px;
  border-radius: 48% 52% 55% 45%;
  top: 62%;
  right: 20%;
  animation: cta-banner-drift 7.5s ease-in-out infinite 2.5s;
}

@keyframes cta-banner-drift {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-8px) scale(1.06) rotate(5deg);
    opacity: 0.9;
  }
}

/* Ongoing/public CTA: hearts + sparkles scaled ~8% smaller (wrapper avoids fighting keyframe transforms) */

.cta-banner-floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.cta-banner-floating-icons--public {
  transform: scale(0.92);
  transform-origin: center center;
}

/* Ongoing/public: nudge decorative icons ~2% right (toward the book) — wrapper is only used for this variant */

.cta-banner-floating-icons--public .cta-banner-h1 {
  right: 26%;
}

.cta-banner-floating-icons--public .cta-banner-h2 {
  right: 2%;
}

.cta-banner-floating-icons--public .cta-banner-h3 {
  right: 6%;
}

.cta-banner-floating-icons--public .cta-banner-h4 {
  right: 30%;
}

.cta-banner-floating-icons--public .cta-banner-h5 {
  right: 10%;
}

.cta-banner-floating-icons--public .cta-banner-h6 {
  right: 0%;
}

.cta-banner-floating-icons--public .cta-banner-h7 {
  right: 26%;
  bottom: 10%;
}

.cta-banner-floating-icons--public .cta-banner-s1 {
  right: 2%;
}

.cta-banner-floating-icons--public .cta-banner-s2 {
  right: 4%;
}

.cta-banner-floating-icons--public .cta-banner-s3 {
  right: 6%;
}

.cta-banner-floating-icons--public .cta-banner-s4 {
  right: 32%;
}

.cta-banner-floating-icons--public .cta-banner-s5 {
  right: 34%;
  bottom: 40%;
}

.cta-banner-floating-icons--public .cta-banner-s7 {
  right: 24%;
}

/* Hearts */

.cta-banner-heart {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.cta-banner-h1 {
  top: 10%;
  right: 28%;
  z-index: 99;
  width: 42px;
  filter: drop-shadow(0 4px 12px rgba(217,58,40,0.5));
  animation: cta-banner-fh1-opaque 4.2s ease-in-out infinite;
}

.cta-banner-h2 {
  bottom: 24%;
  right: 10%;
  width: 18px;
  filter: drop-shadow(0 2px 6px rgba(217,58,40,0.4));
  animation: cta-banner-fh2 5.8s ease-in-out infinite 0.6s;
}

.cta-banner-h3 {
  top: 14%;
  right: 8%;
  width: 32px;
  filter: drop-shadow(0 3px 10px rgba(217,58,40,0.45));
  animation: cta-banner-fh3 3.8s ease-in-out infinite 1.2s;
}

.cta-banner-h4 {
  top: 46%;
  right: 36%;
  width: 20px;
  filter: drop-shadow(0 2px 5px rgba(217,58,40,0.35));
  animation: cta-banner-fh4 6s ease-in-out infinite 0.3s;
}

.cta-banner-h5 {
  bottom: 20%;
  right: 12%;
  width: 12px;
  filter: drop-shadow(0 1px 4px rgba(217,58,40,0.35));
  animation: cta-banner-fh5 5s ease-in-out infinite 2s;
}

.cta-banner-h6 {
  top: 48%;
  right: 6%;
  width: 20px;
  z-index: 99;
  filter: drop-shadow(0 1px 4px rgba(217,58,40,0.3));
  animation: cta-banner-fh6-opaque 7s ease-in-out infinite 1.8s;
}

.cta-banner-h7 {
  bottom: 20%;
  right: 28%;
  width: 30px;
  filter: drop-shadow(0 4px 11px rgba(217,58,40,0.45));
  animation: cta-banner-fh7 4.5s ease-in-out infinite 0.9s;
}

@keyframes cta-banner-fh1 {
  0%,100% {
    transform: translateY(0) rotate(-8deg) scale(1);
    opacity:0.9;
  }

  50% {
    transform: translateY(-10px) rotate(4deg) scale(1.06);
    opacity:1;
  }
}

@keyframes cta-banner-fh1-opaque {
  0%,100% {
    transform: translateY(0) rotate(-8deg) scale(1);
    opacity:1;
  }

  50% {
    transform: translateY(-10px) rotate(4deg) scale(1.06);
    opacity:1;
  }
}

@keyframes cta-banner-fh2 {
  0%,100% {
    transform: translateY(0) rotate(5deg) scale(1);
    opacity:0.8;
  }

  50% {
    transform: translateY(-7px) rotate(-3deg) scale(1.1);
    opacity:1;
  }
}

@keyframes cta-banner-fh3 {
  0%,100% {
    transform: translateY(0) rotate(-4deg) scale(1);
    opacity:0.85;
  }

  50% {
    transform: translateY(-12px) rotate(6deg) scale(1.05);
    opacity:1;
  }
}

@keyframes cta-banner-fh4 {
  0%,100% {
    transform: translateY(0) rotate(10deg) scale(1);
    opacity:0.75;
  }

  50% {
    transform: translateY(-5px) rotate(-2deg) scale(1.12);
    opacity:0.95;
  }
}

@keyframes cta-banner-fh5 {
  0%,100% {
    transform: translateY(0) rotate(-6deg) scale(1);
    opacity:0.8;
  }

  50% {
    transform: translateY(-9px) rotate(8deg) scale(1.08);
    opacity:1;
  }
}

@keyframes cta-banner-fh6 {
  0%,100% {
    transform: translateY(0) rotate(3deg) scale(1);
    opacity:0.7;
  }

  50% {
    transform: translateY(-6px) rotate(-5deg) scale(1.15);
    opacity:0.9;
  }
}

@keyframes cta-banner-fh6-opaque {
  0%, 100% {
    transform: translateY(0) rotate(3deg) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-6px) rotate(-5deg) scale(1.15);
    opacity: 1;
  }
}

@keyframes cta-banner-fh7 {
  0%, 100% {
    transform: translateY(0) rotate(-10deg) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translateY(-8px) rotate(2deg) scale(1.04);
    opacity: 1;
  }
}

/* Sparkle stars */

.cta-banner-star {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}

.cta-banner-s1 {
  top: 20%;
  right: 4%;
  width: 16px;
  animation: cta-banner-twinkle 2.5s ease-in-out infinite;
}

.cta-banner-s2 {
  top: 40%;
  right: 6%;
  width: 14px;
  animation: cta-banner-twinkle 3s ease-in-out infinite 0.8s;
}

.cta-banner-s3 {
  bottom: 20%;
  right: 8%;
  width: 12px;
  animation: cta-banner-twinkle 2s ease-in-out infinite 1.5s;
}

.cta-banner-s4 {
  top: 14%;
  right: 34%;
  width: 10px;
  animation: cta-banner-twinkle 3.5s ease-in-out infinite 0.4s;
}

.cta-banner-s5 {
  bottom: 44%;
  right: 34%;
  width: 16px;
  z-index: 99;
  animation: cta-banner-twinkle-opaque 2.8s ease-in-out infinite 2s;
}

.cta-banner-s7 {
  bottom: 18%;
  right: 26%;
  width: 10px;
  animation: cta-banner-twinkle 3.2s ease-in-out infinite 0.6s;
}

@keyframes cta-banner-twinkle {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.5) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(25deg);
  }
}

@keyframes cta-banner-twinkle-opaque {
  0%, 100% {
    opacity: 1;
    transform: scale(0.5) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(25deg);
  }
}

/* --------------------------------------------------------------------------
   QVC video book upsell modal — aurora on the panel (backdrop sat above a dialog
   child ambient layer, so glow is painted as background-image on .modal-box)
   -------------------------------------------------------------------------- */

#modal-qvcvideobookupsellmodal.modal {
  overflow: visible;
}

#modal-qvcvideobookupsellmodal > .modal-box {
  position: relative;
  z-index: 1;
  overflow: visible;
  background-color: var(--modal-bg) !important;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(
      ellipse 118% 110% at 50% 4%,
      rgba(240, 199, 94, 0.32) 0%,
      rgba(220, 170, 60, 0.14) 36%,
      rgba(200, 140, 40, 0.05) 52%,
      transparent 70%
    ),
    radial-gradient(
      circle 58% at 78% 6%,
      rgba(255, 230, 150, 0.18) 0%,
      rgba(255, 210, 100, 0.06) 44%,
      transparent 64%
    ),
    radial-gradient(
      circle 56% at 18% 8%,
      rgba(120, 60, 200, 0.12) 0%,
      rgba(100, 50, 180, 0.04) 44%,
      transparent 62%
    );
}

#modal-qvcvideobookupsellmodal .qvc-vb-modal-content > :not(.qvc-vb-modal-confetti) {
  position: relative;
  z-index: 1;
}

#modal-qvcvideobookupsellmodal .qvc-vb-modal-content {
  --qvc-confetti-inset: 0.75rem;
}

html[data-theme='light'] #modal-qvcvideobookupsellmodal > .modal-box {
  background-image:
    radial-gradient(
      ellipse 118% 110% at 50% 4%,
      color-mix(in srgb, var(--theme-primary-color) 28%, transparent) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 12%, transparent) 40%,
      transparent 70%
    ),
    radial-gradient(
      circle 58% at 78% 6%,
      color-mix(in srgb, var(--theme-secondary-color) 20%, transparent) 0%,
      transparent 64%
    ),
    radial-gradient(
      circle 56% at 18% 8%,
      color-mix(in srgb, var(--theme-primary-color) 14%, transparent) 0%,
      transparent 62%
    );
}

/* --------------------------------------------------------------------------
   QVC video book upsell (modal): hearts + stars frame the art; no panel fill
   (avoids wide-banner `right: %` stacking; blends with modal, no hard crop)
   -------------------------------------------------------------------------- */

.qvc-vb-upsell-visual {
  background: transparent;
  box-shadow: none;
}

.qvc-vb-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qvc-vb-modal-title__logo {
  width: 60px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

.qvc-vb-modal-title__logo--light {
  display: none;
}

html[data-theme='light'] .qvc-vb-modal-title__logo--dark {
  display: none;
}

html[data-theme='light'] .qvc-vb-modal-title__logo--light {
  display: inline-block;
}

/* Post-publish QVC video book reminder (creator published, declined pre-checkout upsell) */

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-confetti {
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

html[data-theme='light'] .tribute-qvc-post-publish-video-book-nudge.qvc-post-nudge-root {
  box-shadow:
    0 14px 36px color-mix(in srgb, black 10%, transparent),
    0 0 0 1px color-mix(in srgb, var(--theme-bg-color) 85%, black);
}

html[data-theme='dark'] .tribute-qvc-post-publish-video-book-nudge.qvc-post-nudge-root {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Compact video book art + 50% burst overlapping bottom-left of graphic (clears device screen) */

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot {
  width: 5.5rem;
}

@media (min-width: 640px) {
  .tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot {
    width: 6.25rem;
  }
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-vb-upsell-visual {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-vb-upsell-visual__frame {
  padding: 0;
  margin: 0;
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-vb-upsell-visual__img {
  width: 100%;
  max-width: none;
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-post-nudge-badge {
  position: absolute;
  bottom: -0.35rem;
  left: -0.45rem;
  z-index: 3;
  width: 3.35rem;
  height: 3.35rem;
  margin: 0;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 0 0 1.5px color-mix(in srgb, var(--theme-secondary-color) 35%, white))
    drop-shadow(0 2px 0 color-mix(in srgb, var(--theme-secondary-color) 72%, black))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--theme-secondary-color) 82%, white) 0%,
    var(--theme-secondary-color) 48%,
    color-mix(in srgb, var(--theme-secondary-color) 58%, black) 100%
  );
  clip-path: polygon(
    50% 0%,
    61% 18%,
    82% 12%,
    76% 33%,
    94% 50%,
    76% 67%,
    82% 88%,
    61% 82%,
    50% 100%,
    39% 82%,
    18% 88%,
    24% 67%,
    6% 50%,
    24% 33%,
    18% 12%,
    39% 18%
  );
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-post-nudge-badge__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.tribute-qvc-post-publish-video-book-nudge .qvc-post-nudge-visual-slot .qvc-post-nudge-badge__off {
  display: block;
  margin-top: 2px;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
}

/* Light mode CTA: pure white + gradient accent */

.cta-banner-decor.cta-banner-light {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.cta-banner-decor.cta-banner-light::before {
  display: none;
}

.cta-banner-decor.cta-banner-light .cta-banner-glow-main {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--theme-primary-color) 12%, transparent) 0%, color-mix(in srgb, var(--theme-secondary-color) 6%, transparent) 40%, transparent 70%);
}

.cta-banner-decor.cta-banner-light .cta-banner-glow-hot,
.cta-banner-decor.cta-banner-light .cta-banner-glow-rim,
.cta-banner-decor.cta-banner-light .cta-banner-glow-purple {
  opacity: 0.5;
}

.cta-banner-decor.cta-banner-light .cta-banner-bokeh {
  opacity: 0.6;
}

/* Match recording-flow nonCreatorStartTributeCta.css — phone: hide glow + bokeh orbs */

@media (max-width: 767px) {
  .cta-banner-glow-layer,
  .cta-banner-bokeh {
    display: none !important;
  }
}

/* P2C CTA: subtle corners (matches rf-btn-primary / homepage buttons, not pill) */

.cta-banner-btn {
  border-radius: 0.5rem;
}

/* CTA button: theme-aware hover (primary + secondary blend) */

.cta-banner-btn:hover {
  background-color: color-mix(in srgb, var(--theme-primary-color) 85%, var(--theme-secondary-color) 15%) !important;
  box-shadow: 0 8px 36px color-mix(in srgb, var(--theme-primary-color) 40%, transparent) !important;
}

/* --------------------------------------------------------------------------
   PublishView in-product CTA — centered pile: progressive scaleX + translateY by depth;
   back faces use ::after black mix (25 / 50 / 75%) on .ip-cta-card-inner.
   -------------------------------------------------------------------------- */

.ip-cta-stack {
  display: grid;
  grid-template-areas: "pile";
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  overflow: visible;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) {
  /* Extra headroom so lifted back cards + shadows read clearly */
  padding-top: 0.85rem;
}

/* Light: barely darker than page (mint + a few % black), not a bright wash */

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(2)) {
  background: radial-gradient(
    ellipse 130% 95% at 50% -8%,
    color-mix(in srgb, color-mix(in srgb, var(--theme-bg-color) 94%, black) 18%, transparent) 0%,
    transparent 58%
  );
}

.ip-cta-stack > .in-product-cta {
  grid-area: pile;
  width: 100%;
  max-width: 100%;
  justify-self: center;
  position: relative;
  opacity: 1 !important;
  transition: transform 0.2s ease;
  transform-origin: center bottom;
}

/* Back-of-stack cards: separation shadow (front card stays unshadowed so it “floats” forward) */

.ip-cta-stack > .in-product-cta:not(:last-child) {
  border-radius: 0.75rem;
  box-shadow:
    0 12px 28px -6px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.22);
}

html[data-theme='light'] .ip-cta-stack > .in-product-cta:not(:last-child) {
  box-shadow:
    0 10px 24px -4px color-mix(in srgb, black 10%, transparent),
    0 4px 10px color-mix(in srgb, black 5%, transparent),
    0 0 0 1px color-mix(in srgb, var(--theme-bg-color) 88%, black);
}

.ip-cta-stack > .in-product-cta:nth-last-child(4) {
  z-index: 1;
}

.ip-cta-stack > .in-product-cta:nth-last-child(3) {
  z-index: 2;
}

.ip-cta-stack > .in-product-cta:nth-last-child(2) {
  z-index: 3;
}

.ip-cta-stack > .in-product-cta:nth-last-child(1) {
  z-index: 5;
}

/* 2 CTAs — gentler back shrink */

.ip-cta-stack:has(> .in-product-cta:nth-child(2)):not(:has(> .in-product-cta:nth-child(3)))
  > .in-product-cta:nth-child(1) {
  transform: translateY(-0.65rem) scaleX(0.965);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)):not(:has(> .in-product-cta:nth-child(3)))
  > .in-product-cta:nth-child(2) {
  transform: translateY(0) scaleX(1);
}

/* 3 CTAs — progressive */

.ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(1) {
  transform: translateY(-0.82rem) scaleX(0.94);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(2) {
  transform: translateY(-0.46rem) scaleX(0.972);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(3) {
  transform: translateY(0) scaleX(1);
}

/* 4 CTAs — progressive */

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(1) {
  transform: translateY(-0.95rem) scaleX(0.925);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(2) {
  transform: translateY(-0.62rem) scaleX(0.955);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(3) {
  transform: translateY(-0.34rem) scaleX(0.98);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(4) {
  transform: translateY(0) scaleX(1);
}

/* Depth overlay on card inner (above tint, below copy): stronger toward back of stack */

.ip-cta-stack > .in-product-cta:not(:last-child) .ip-cta-card-inner {
  position: relative;
}

.ip-cta-stack > .in-product-cta:not(:last-child) .ip-cta-card-inner::after {
  content: '';
  position: absolute;
  /* Inset so the depth veil doesn’t paint over the 1px face border */
  inset: 1px;
  border-radius: calc(0.75rem - 1px);
  pointer-events: none;
  z-index: 2;
}

/* Copy / media above depth veil (z-2 when present). Exclude .ip-cta-pill so Tailwind
   `absolute` isn’t overridden — otherwise the label joins the flex row as a column. */

.ip-cta-card-inner > *:not(.ip-cta-card-face-tint):not(.ip-cta-pill) {
  position: relative;
  z-index: 3;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)):not(:has(> .in-product-cta:nth-child(3)))
  > .in-product-cta:nth-child(1)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 28%, transparent);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(1)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 48%, transparent);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(2)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 28%, transparent);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(1) .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 62%, transparent);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(2) .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 48%, transparent);
}

.ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(3) .ip-cta-card-inner::after {
  background: color-mix(in srgb, black 28%, transparent);
}

/* Light stack depth: darken page mint with black (~6% / ~10% / ~15%) — reads as “sheet behind”, not brighter green */

html[data-theme='light'] .ip-cta-card-inner {
  --ip-cta-light-stack-tint: color-mix(in srgb, var(--theme-bg-color) 94%, black);
  --ip-cta-light-stack-tint-mid: color-mix(in srgb, var(--theme-bg-color) 90%, black);
  --ip-cta-light-stack-tint-deep: color-mix(in srgb, var(--theme-bg-color) 85%, black);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(2)):not(:has(> .in-product-cta:nth-child(3)))
  > .in-product-cta:nth-child(1)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint) 14%, transparent);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(1)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint-deep) 22%, transparent);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(3)):not(:has(> .in-product-cta:nth-child(4)))
  > .in-product-cta:nth-child(2)
  .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint-mid) 16%, transparent);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(1) .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint-deep) 28%, transparent);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(2) .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint-mid) 20%, transparent);
}

html[data-theme='light'] .ip-cta-stack:has(> .in-product-cta:nth-child(4)) > .in-product-cta:nth-child(3) .ip-cta-card-inner::after {
  background: color-mix(in srgb, var(--ip-cta-light-stack-tint) 12%, transparent);
}

/* 2+ CTAs: grid cell height = tallest card; stretch every card + inner to match */

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta {
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta .ip-cta-card-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Media row: center book + copy as a block; avoid stretch so the pair stays vertically centered in equalized stacks */

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta .ip-cta-card-inner--media {
  flex-direction: row;
  align-items: center;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta .ip-cta-card-inner--media .ip-cta-card-media-row > .relative.flex-shrink-0 {
  align-self: center;
}

.ip-cta-stack:has(> .in-product-cta:nth-child(2)) > .in-product-cta .ip-cta-card-media-copy {
  min-height: 0;
}

/* Text CTAs: center title + body in the card (especially when stack equalizes height) */

.ip-cta-card-inner--text .ip-cta-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* In-product CTA: dark base + static soft orbs (layered radials), no animation */

.ip-cta-card-face-tint {
  /* Mostly theme page bg — reads as a tinted panel, not a black card */
  --ip-cta-face-base: color-mix(in srgb, var(--theme-bg-color) 78%, black);
  background-color: var(--ip-cta-face-base);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, transparent 30%),
    radial-gradient(
      ellipse 100% 85% at 88% 6%,
      color-mix(in srgb, var(--theme-primary-color) 22%, var(--ip-cta-face-base)) 0%,
      color-mix(in srgb, var(--theme-primary-color) 10%, var(--ip-cta-face-base)) 38%,
      var(--ip-cta-face-base) 72%
    ),
    /* Mid wash: secondary (pair with primary top glow) */
    radial-gradient(
      ellipse 52% 44% at 72% 30%,
      color-mix(in srgb, var(--theme-secondary-color) 17%, var(--ip-cta-face-base)) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 8%, var(--ip-cta-face-base)) 46%,
      var(--ip-cta-face-base) 70%
    ),
    radial-gradient(
      ellipse 95% 80% at 6% 96%,
      color-mix(in srgb, var(--theme-secondary-color) 20%, var(--ip-cta-face-base)) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 9%, var(--ip-cta-face-base)) 44%,
      var(--ip-cta-face-base) 68%
    ),
    linear-gradient(
      168deg,
      color-mix(in srgb, var(--ip-cta-face-base) 96%, black) 0%,
      color-mix(in srgb, var(--ip-cta-face-base) 95%, var(--theme-primary-color) 5%) 24%,
      var(--ip-cta-face-base) 46%,
      color-mix(in srgb, var(--ip-cta-face-base) 94%, var(--theme-secondary-color) 6%) 66%,
      color-mix(in srgb, var(--ip-cta-face-base) 93%, black) 100%
    );
  border: none;
  box-shadow: none;
  isolation: isolate;
}

/* Light mode: tie card to page bg + theme (warmer base than flat white; layered washes read on peach/cream) */

html[data-theme='light'] .ip-cta-card-face-tint {
  --ip-cta-face-base: color-mix(in srgb, white 72%, var(--theme-bg-color));
  background-color: var(--ip-cta-face-base);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 42%),
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--ip-cta-face-base) 78%, var(--theme-secondary-color)) 0%,
      var(--ip-cta-face-base) 38%,
      color-mix(in srgb, var(--ip-cta-face-base) 82%, var(--theme-bg-color)) 72%,
      color-mix(in srgb, var(--ip-cta-face-base) 76%, var(--theme-primary-color)) 100%
    ),
    linear-gradient(
      92deg,
      color-mix(in srgb, var(--theme-bg-color) 72%, var(--theme-secondary-color) 28%) 0%,
      transparent 40%,
      color-mix(in srgb, var(--theme-bg-color) 78%, var(--theme-primary-color) 22%) 100%
    ),
    radial-gradient(
      ellipse 92% 72% at 92% 4%,
      color-mix(in srgb, var(--theme-primary-color) 14%, transparent) 0%,
      color-mix(in srgb, var(--theme-secondary-color) 10%, transparent) 38%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 64% 52% at 8% 96%,
      color-mix(in srgb, var(--theme-secondary-color) 16%, transparent) 0%,
      transparent 58%
    );
}

/* Phone: dark cards — base tint only (no stacked radials). Light: one diagonal + one radial so panels aren’t flat white. */

@media (max-width: 767px) {
  .ip-cta-card-face-tint {
    background-image: none !important;
  }

  html[data-theme='light'] .ip-cta-card-face-tint {
    --ip-cta-face-base: color-mix(in srgb, white 70%, var(--theme-bg-color));
    background-color: var(--ip-cta-face-base);
    background-image:
      linear-gradient(
        152deg,
        color-mix(in srgb, var(--theme-bg-color) 28%, white) 0%,
        var(--ip-cta-face-base) 45%,
        color-mix(in srgb, var(--ip-cta-face-base) 80%, var(--theme-primary-color)) 100%
      ),
      radial-gradient(
        ellipse 110% 85% at 100% 0%,
        color-mix(in srgb, var(--theme-secondary-color) 18%, transparent) 0%,
        transparent 52%
      ) !important;
  }
}

/* Theme-primary border as a vertical gradient (lighter top → darker bottom), pre–white-border style */

.ip-cta-card-face-tint::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-primary-color) 38%, var(--ip-cta-face-base)) 0%,
    color-mix(in srgb, var(--theme-secondary-color) 22%, var(--ip-cta-face-base)) 46%,
    color-mix(in srgb, var(--theme-primary-color) 24%, var(--ip-cta-face-base)) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

html[data-theme='light'] .ip-cta-card-face-tint::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-primary-color) 10%, color-mix(in srgb, var(--theme-secondary-color) 18%, white)) 0%,
    color-mix(in srgb, var(--theme-secondary-color) 14%, white) 48%,
    color-mix(in srgb, var(--theme-primary-color) 8%, color-mix(in srgb, var(--theme-secondary-color) 12%, color-mix(in srgb, white 92%, var(--theme-bg-color)))) 100%
  );
}

/* Stacked back cards: softer edge ring so the front card reads as the “top” sheet */

.ip-cta-stack > .in-product-cta:not(:last-child) .ip-cta-card-face-tint::after {
  opacity: 0.82;
}

html[data-theme='light'] .ip-cta-stack > .in-product-cta:not(:last-child) .ip-cta-card-face-tint::after {
  opacity: 0.92;
}

/* Plain label — no chip background (matches “text top left” treatment) */

.ip-cta-pill {
  font-family: var(--app-font-family);
  background: none !important;
  color: var(--theme-primary-color) !important;
  border: none !important;
  padding-left: 0;
  padding-right: 0;
  z-index: 3;
}

/* Daisy btn + custom classes: optically center label in the upsell button */

.ip-cta-card-inner .cta-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .md\:btn-md {
    --fontsize: 0.875rem;
    --btn-p: 1rem;
    --size: calc(var(--size-field, 0.25rem) * 10);
  }
}

.selection\:bg-\[var\(--theme-primary-color\)\] *::-moz-selection {
  background-color: var(--theme-primary-color);
}

.selection\:bg-\[var\(--theme-primary-color\)\] *::selection {
  background-color: var(--theme-primary-color);
}

.selection\:text-\[var\(--btn-primary-text\)\] *::-moz-selection {
  color: var(--btn-primary-text);
}

.selection\:text-\[var\(--btn-primary-text\)\] *::selection {
  color: var(--btn-primary-text);
}

.selection\:bg-\[var\(--theme-primary-color\)\]::-moz-selection {
  background-color: var(--theme-primary-color);
}

.selection\:bg-\[var\(--theme-primary-color\)\]::selection {
  background-color: var(--theme-primary-color);
}

.selection\:text-\[var\(--btn-primary-text\)\]::-moz-selection {
  color: var(--btn-primary-text);
}

.selection\:text-\[var\(--btn-primary-text\)\]::selection {
  color: var(--btn-primary-text);
}

.placeholder\:text-\[var\(--ui-text-tertiary\)\]::-moz-placeholder {
  color: var(--ui-text-tertiary);
}

.placeholder\:text-\[var\(--ui-text-tertiary\)\]::placeholder {
  color: var(--ui-text-tertiary);
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-current:hover {
  border-color: currentColor;
}

.hover\:bg-black\/50:hover {
  background-color: rgb(0 0 0 / 0.5);
}

.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:opacity-95:hover {
  opacity: 0.95;
}

.hover\:shadow-none:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-1:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-gray-400:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.hover\:ring-gray-600:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1));
}

.focus\:border-none:focus {
  border-style: none;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus\:ring-offset-\[var\(--theme-bg-color\)\]:focus {
  --tw-ring-offset-color: var(--theme-bg-color);
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:\!opacity-40:disabled {
  opacity: 0.4 !important;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:saturate-\[0\.75\]:disabled {
  --tw-saturate: saturate(0.75);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group:hover .group-hover\:-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group\/date:hover .group-hover\/date\:opacity-100 {
  opacity: 1;
}

.group\/email:hover .group-hover\/email\:opacity-100 {
  opacity: 1;
}

.group\/name:hover .group-hover\/name\:opacity-100 {
  opacity: 1;
}

.group\/occasion:hover .group-hover\/occasion\:opacity-100 {
  opacity: 1;
}

.group\/recipient:hover .group-hover\/recipient\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-75 {
  opacity: 0.75;
}

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

@media not all and (min-width: 768px) {
  .max-md\:\!bottom-\[6px\] {
    bottom: 6px !important;
  }

  .max-md\:\!left-\[6px\] {
    left: 6px !important;
  }

  .max-md\:\!right-\[6px\] {
    right: 6px !important;
  }

  .max-md\:h-3 {
    height: 0.75rem;
  }

  .max-md\:min-h-8 {
    min-height: 2rem;
  }

  .max-md\:\!w-\[calc\(100\%-12px\)\] {
    width: calc(100% - 12px) !important;
  }

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

  .max-md\:w-3 {
    width: 0.75rem;
  }

  .max-md\:\!max-w-none {
    max-width: none !important;
  }

  .max-md\:origin-center {
    transform-origin: center;
  }

  .max-md\:scale-\[0\.8\] {
    --tw-scale-x: 0.8;
    --tw-scale-y: 0.8;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .max-md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:touch-pan-x {
    --tw-pan-x: pan-x;
    touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
  }

  .max-sm\:overflow-x-auto {
    overflow-x: auto;
  }

  .max-sm\:overflow-y-visible {
    overflow-y: visible;
  }

  .max-sm\:pb-2 {
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 640px) {
  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:max-h-\[240px\] {
    max-height: 240px;
  }

  .sm\:min-h-\[240px\] {
    min-height: 240px;
  }

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-2 {
    gap: 0.5rem;
  }

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

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

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

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

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

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

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

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

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

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

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

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

  .sm\:pr-12 {
    padding-right: 3rem;
  }

  .sm\:pr-16 {
    padding-right: 4rem;
  }

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

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

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

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

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

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:bottom-auto {
    bottom: auto;
  }

  .md\:left-1\/2 {
    left: 50%;
  }

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

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

  .md\:right-2 {
    right: 0.5rem;
  }

  .md\:right-2\.5 {
    right: 0.625rem;
  }

  .md\:right-4 {
    right: 1rem;
  }

  .md\:top-1\/2 {
    top: 50%;
  }

  .md\:top-2 {
    top: 0.5rem;
  }

  .md\:top-2\.5 {
    top: 0.625rem;
  }

  .md\:top-4 {
    top: 1rem;
  }

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

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

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

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

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

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

  .md\:m-2\.5 {
    margin: 0.625rem;
  }

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

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

  .md\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .md\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md\:-ml-12 {
    margin-left: -3rem;
  }

  .md\:-mt-8 {
    margin-top: -2rem;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:ml-0 {
    margin-left: 0px;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-4 {
    margin-top: 1rem;
  }

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-48 {
    height: 12rem;
  }

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

  .md\:h-\[75vh\] {
    height: 75vh;
  }

  .md\:h-\[90vh\] {
    height: 90vh;
  }

  .md\:h-\[calc\(100\%-1\.25rem\)\] {
    height: calc(100% - 1.25rem);
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:max-h-\[75vh\] {
    max-height: 75vh;
  }

  .md\:max-h-\[80vh\] {
    max-height: 80vh;
  }

  .md\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .md\:max-h-\[96vh\] {
    max-height: 96vh;
  }

  .md\:max-h-none {
    max-height: none;
  }

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

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

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-32 {
    width: 8rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-8 {
    width: 2rem;
  }

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

  .md\:w-\[48\%\] {
    width: 48%;
  }

  .md\:w-\[52\%\] {
    width: 52%;
  }

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

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

  .md\:w-\[95\%\] {
    width: 95%;
  }

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

  .md\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

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

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

  .md\:max-w-none {
    max-width: none;
  }

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

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

  .md\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

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

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

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

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

  .md\:grid-cols-\[1\.15fr_0\.85fr\] {
    grid-template-columns: 1.15fr 0.85fr;
  }

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

  .md\:flex-col {
    flex-direction: column;
  }

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

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

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

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

  .md\:justify-start {
    justify-content: flex-start;
  }

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

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

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

  .md\:gap-0 {
    gap: 0px;
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

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

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

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-7 {
    gap: 1.75rem;
  }

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

  .md\:gap-x-0 {
    -moz-column-gap: 0px;
         column-gap: 0px;
  }

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

  .md\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .md\:gap-x-\[11px\] {
    -moz-column-gap: 11px;
         column-gap: 11px;
  }

  .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .md\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:overflow-visible {
    overflow: visible;
  }

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

  .md\:overscroll-contain {
    overscroll-behavior: contain;
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-xl {
    border-radius: 0.75rem;
  }

  .md\:rounded-b-xl {
    border-bottom-right-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }

  .md\:rounded-l-xl {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
  }

  .md\:rounded-r-none {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .md\:rounded-t-xl {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
  }

  .md\:rounded-bl-lg {
    border-bottom-left-radius: 0.5rem;
  }

  .md\:bg-transparent {
    background-color: transparent;
  }

  .md\:p-0 {
    padding: 0px;
  }

  .md\:p-12 {
    padding: 3rem;
  }

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

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

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

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

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

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

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

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

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

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

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

  .md\:pb-5 {
    padding-bottom: 1.25rem;
  }

  .md\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .md\:pb-8 {
    padding-bottom: 2rem;
  }

  .md\:pl-12 {
    padding-left: 3rem;
  }

  .md\:pl-4 {
    padding-left: 1rem;
  }

  .md\:pl-5 {
    padding-left: 1.25rem;
  }

  .md\:pl-6 {
    padding-left: 1.5rem;
  }

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

  .md\:pr-12 {
    padding-right: 3rem;
  }

  .md\:pr-16 {
    padding-right: 4rem;
  }

  .md\:pr-2 {
    padding-right: 0.5rem;
  }

  .md\:pr-6 {
    padding-right: 1.5rem;
  }

  .md\:pt-1 {
    padding-top: 0.25rem;
  }

  .md\:pt-10 {
    padding-top: 2.5rem;
  }

  .md\:pt-5 {
    padding-top: 1.25rem;
  }

  .md\:pt-8 {
    padding-top: 2rem;
  }

  .md\:pt-\[60px\] {
    padding-top: 60px;
  }

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

  .md\:text-right {
    text-align: right;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-\[0\.9375rem\] {
    font-size: 0.9375rem;
  }

  .md\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .md\:shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .md\:hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1024px) {
  .lg\:z-20 {
    z-index: 20;
  }

  .lg\:\!order-none {
    order: 0 !important;
  }

  .lg\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .lg\:block {
    display: block;
  }

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

  .lg\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

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

  .lg\:rounded-3xl {
    border-radius: 1.5rem;
  }

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

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

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

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

  .lg\:pb-12 {
    padding-bottom: 3rem;
  }

  .lg\:pl-10 {
    padding-left: 2.5rem;
  }

  .lg\:pr-10 {
    padding-right: 2.5rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-\[1\.875rem\] {
    font-size: 1.875rem;
  }

  .lg\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:border-t-white {
    --tw-border-opacity: 1;
    border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}