@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
*, ::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.18 | 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 */ /* 3 */
  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::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;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
  border-color: #2563eb;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: none;
  background-image: initial;
  background-position: 0 0;
  background-position: initial;
  background-repeat: repeat;
  background-repeat: initial;
  background-size: auto auto;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: inherit;
          print-color-adjust: inherit;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --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);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='checkbox']:checked {
    -webkit-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%278%27 cy=%278%27 r=%273%27/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {

  [type='radio']:checked {
    -webkit-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 16 16%27%3e%3cpath stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M4 8h8%27/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {

  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.-inset-1 {
  inset: -0.25rem;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-left-1 {
  left: -0.25rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-12 {
  top: -3rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\/4 {
  bottom: 25%;
}
.bottom-16 {
  bottom: 4rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[16px\] {
  bottom: 16px;
}
.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-1\/4 {
  left: 25%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-1\/4 {
  right: 25%;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-8 {
  right: 2rem;
}
.right-\[16px\] {
  right: 16px;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-8 {
  top: 2rem;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1000000\] {
  z-index: 1000000;
}
.z-\[1000002\] {
  z-index: 1000002;
}
.z-\[100000\] {
  z-index: 100000;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[999999\] {
  z-index: 999999;
}
.z-\[9999\] {
  z-index: 9999;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.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-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.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;
}
.-mb-2 {
  margin-bottom: -0.5rem;
}
.-mb-8 {
  margin-bottom: -2rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-5 {
  margin-left: -1.25rem;
}
.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-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0 {
  margin-left: 0px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-9 {
  margin-left: 2.25rem;
}
.ml-\[50px\] {
  margin-left: 50px;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.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;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.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-96 {
  height: 24rem;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[240px\] {
  height: 240px;
}
.h-\[90vh\] {
  height: 90vh;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-80 {
  max-height: 20rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[2000px\] {
  max-height: 2000px;
}
.max-h-\[3000px\] {
  max-height: 3000px;
}
.max-h-\[400px\] {
  max-height: 400px;
}
.max-h-\[600px\] {
  max-height: 600px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[95vh\] {
  max-height: 95vh;
}
.max-h-\[calc\(80vh-150px\)\] {
  max-height: calc(80vh - 150px);
}
.max-h-\[calc\(85vh-180px\)\] {
  max-height: calc(85vh - 180px);
}
.max-h-\[calc\(90vh-280px\)\] {
  max-height: calc(90vh - 280px);
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-20 {
  min-height: 5rem;
}
.min-h-9 {
  min-height: 2.25rem;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[150px\] {
  min-height: 150px;
}
.min-h-\[160px\] {
  min-height: 160px;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[2rem\] {
  min-height: 2rem;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[500px\] {
  min-height: 500px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-96 {
  width: 24rem;
}
.w-\[230px\] {
  width: 230px;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-\[calc\(100\%\+2\.5rem\)\] {
  width: calc(100% + 2.5rem);
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[320px\] {
  min-width: 320px;
}
.min-w-\[400px\] {
  min-width: 400px;
}
.min-w-\[44px\] {
  min-width: 44px;
}
.min-w-\[45px\] {
  min-width: 45px;
}
.min-w-\[80px\] {
  min-width: 80px;
}
.min-w-max {
  min-width: -webkit-max-content;
  min-width: max-content;
}
.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-\[200px\] {
  max-width: 200px;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[85vw\] {
  max-width: 85vw;
}
.max-w-\[90\%\] {
  max-width: 90%;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[95vw\] {
  max-width: 95vw;
}
.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;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-bottom-right {
  transform-origin: bottom right;
}
.origin-top-right {
  transform-origin: top right;
}
.-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-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-100\%\] {
  --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));
}
.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));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  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-8 {
  --tw-translate-y: 2rem;
  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-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-12 {
  --tw-rotate: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 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));
}
.scale-105 {
  --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));
}
.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));
}
.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  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));
}
.scale-95 {
  --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));
}
.scale-\[0\.6\] {
  --tw-scale-x: 0.6;
  --tw-scale-y: 0.6;
  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 bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s 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-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.touch-manipulation {
  touch-action: manipulation;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.125rem * var(--tw-space-x-reverse));
  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
}
.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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * 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-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.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)));
}
.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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * 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-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));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / 1);
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(55 65 81 / 0.5);
}
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(31 41 55 / 1);
  border-color: rgb(31 41 55 / var(--tw-divide-opacity, 1));
}
.divide-purple-500\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(168 85 247 / 0.1);
}
.divide-slate-700\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(51 65 85 / 0.3);
}
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.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-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-3xl {
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.rounded-bl-2xl {
  border-bottom-left-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-\[4px\] {
  border-bottom-width: 4px;
}
.border-b-\[8px\] {
  border-bottom-width: 8px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[14px\] {
  border-left-width: 14px;
}
.border-l-\[7px\] {
  border-left-width: 7px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-t-\[4px\] {
  border-top-width: 4px;
}
.border-t-\[8px\] {
  border-top-width: 8px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-600\/50 {
  border-color: rgb(217 119 6 / 0.5);
}
.border-black\/20 {
  border-color: rgb(0 0 0 / 0.2);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / 1);
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-400\/30 {
  border-color: rgb(96 165 250 / 0.3);
}
.border-blue-400\/40 {
  border-color: rgb(96 165 250 / 0.4);
}
.border-blue-500\/20 {
  border-color: rgb(59 130 246 / 0.2);
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-500\/50 {
  border-color: rgb(59 130 246 / 0.5);
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / 1);
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-cyan-400 {
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / 1);
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.border-cyan-400\/50 {
  border-color: rgb(34 211 238 / 0.5);
}
.border-cyan-500\/20 {
  border-color: rgb(6 182 212 / 0.2);
}
.border-cyan-500\/30 {
  border-color: rgb(6 182 212 / 0.3);
}
.border-cyan-500\/40 {
  border-color: rgb(6 182 212 / 0.4);
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / 1);
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-300\/50 {
  border-color: rgb(209 213 219 / 0.5);
}
.border-gray-400\/30 {
  border-color: rgb(156 163 175 / 0.3);
}
.border-gray-400\/40 {
  border-color: rgb(156 163 175 / 0.4);
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / 1);
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}
.border-gray-500\/20 {
  border-color: rgb(107 114 128 / 0.2);
}
.border-gray-500\/30 {
  border-color: rgb(107 114 128 / 0.3);
}
.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / 1);
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}
.border-gray-600\/30 {
  border-color: rgb(75 85 99 / 0.3);
}
.border-gray-600\/50 {
  border-color: rgb(75 85 99 / 0.5);
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / 1);
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-gray-700\/30 {
  border-color: rgb(55 65 81 / 0.3);
}
.border-gray-700\/40 {
  border-color: rgb(55 65 81 / 0.4);
}
.border-gray-700\/50 {
  border-color: rgb(55 65 81 / 0.5);
}
.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / 1);
  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}
.border-gray-800\/50 {
  border-color: rgb(31 41 55 / 0.5);
}
.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / 1);
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / 1);
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-400\/30 {
  border-color: rgb(74 222 128 / 0.3);
}
.border-green-400\/40 {
  border-color: rgb(74 222 128 / 0.4);
}
.border-green-500\/20 {
  border-color: rgb(34 197 94 / 0.2);
}
.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-green-500\/50 {
  border-color: rgb(34 197 94 / 0.5);
}
.border-indigo-500\/30 {
  border-color: rgb(99 102 241 / 0.3);
}
.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / 1);
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-orange-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / 1);
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.border-orange-400\/30 {
  border-color: rgb(251 146 60 / 0.3);
}
.border-orange-500 {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}
.border-orange-500\/20 {
  border-color: rgb(249 115 22 / 0.2);
}
.border-orange-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-orange-500\/40 {
  border-color: rgb(249 115 22 / 0.4);
}
.border-orange-500\/50 {
  border-color: rgb(249 115 22 / 0.5);
}
.border-pink-400\/30 {
  border-color: rgb(244 114 182 / 0.3);
}
.border-pink-400\/40 {
  border-color: rgb(244 114 182 / 0.4);
}
.border-pink-400\/50 {
  border-color: rgb(244 114 182 / 0.5);
}
.border-pink-500 {
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / 1);
  border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
}
.border-pink-500\/20 {
  border-color: rgb(236 72 153 / 0.2);
}
.border-pink-500\/30 {
  border-color: rgb(236 72 153 / 0.3);
}
.border-pink-500\/40 {
  border-color: rgb(236 72 153 / 0.4);
}
.border-pink-500\/50 {
  border-color: rgb(236 72 153 / 0.5);
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / 1);
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / 1);
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}
.border-purple-300\/40 {
  border-color: rgb(216 180 254 / 0.4);
}
.border-purple-400 {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 1);
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}
.border-purple-400\/25 {
  border-color: rgb(192 132 252 / 0.25);
}
.border-purple-400\/30 {
  border-color: rgb(192 132 252 / 0.3);
}
.border-purple-400\/40 {
  border-color: rgb(192 132 252 / 0.4);
}
.border-purple-400\/50 {
  border-color: rgb(192 132 252 / 0.5);
}
.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / 1);
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}
.border-purple-500\/10 {
  border-color: rgb(168 85 247 / 0.1);
}
.border-purple-500\/20 {
  border-color: rgb(168 85 247 / 0.2);
}
.border-purple-500\/30 {
  border-color: rgb(168 85 247 / 0.3);
}
.border-purple-500\/40 {
  border-color: rgb(168 85 247 / 0.4);
}
.border-purple-500\/50 {
  border-color: rgb(168 85 247 / 0.5);
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5);
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / 1);
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-red-700 {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / 1);
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.border-slate-300\/50 {
  border-color: rgb(203 213 225 / 0.5);
}
.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / 1);
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.border-slate-600\/50 {
  border-color: rgb(71 85 105 / 0.5);
}
.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / 1);
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-700\/30 {
  border-color: rgb(51 65 85 / 0.3);
}
.border-slate-700\/50 {
  border-color: rgb(51 65 85 / 0.5);
}
.border-transparent {
  border-color: transparent;
}
.border-violet-400\/50 {
  border-color: rgb(167 139 250 / 0.5);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-yellow-300\/70 {
  border-color: rgb(253 224 71 / 0.7);
}
.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / 1);
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}
.border-yellow-400\/30 {
  border-color: rgb(250 204 21 / 0.3);
}
.border-yellow-400\/50 {
  border-color: rgb(250 204 21 / 0.5);
}
.border-yellow-400\/60 {
  border-color: rgb(250 204 21 / 0.6);
}
.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}
.border-yellow-500\/20 {
  border-color: rgb(234 179 8 / 0.2);
}
.border-yellow-500\/30 {
  border-color: rgb(234 179 8 / 0.3);
}
.border-yellow-500\/50 {
  border-color: rgb(234 179 8 / 0.5);
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-l-white {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / 1);
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / 1);
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-600\/20 {
  background-color: rgb(217 119 6 / 0.2);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/0 {
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.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\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/95 {
  background-color: rgb(0 0 0 / 0.95);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / 1);
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-400\/20 {
  background-color: rgb(96 165 250 / 0.2);
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-500\/15 {
  background-color: rgb(59 130 246 / 0.15);
}
.bg-blue-500\/20 {
  background-color: rgb(59 130 246 / 0.2);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-600\/20 {
  background-color: rgb(37 99 235 / 0.2);
}
.bg-blue-900\/20 {
  background-color: rgb(30 58 138 / 0.2);
}
.bg-blue-900\/30 {
  background-color: rgb(30 58 138 / 0.3);
}
.bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / 1);
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
.bg-cyan-500\/10 {
  background-color: rgb(6 182 212 / 0.1);
}
.bg-cyan-500\/20 {
  background-color: rgb(6 182 212 / 0.2);
}
.bg-cyan-500\/40 {
  background-color: rgb(6 182 212 / 0.4);
}
.bg-cyan-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / 1);
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.bg-cyan-600\/20 {
  background-color: rgb(8 145 178 / 0.2);
}
.bg-cyan-900\/30 {
  background-color: rgb(22 78 99 / 0.3);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/95 {
  background-color: rgb(16 185 129 / 0.95);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / 1);
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / 1);
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-400\/10 {
  background-color: rgb(156 163 175 / 0.1);
}
.bg-gray-400\/20 {
  background-color: rgb(156 163 175 / 0.2);
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / 1);
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/10 {
  background-color: rgb(107 114 128 / 0.1);
}
.bg-gray-500\/15 {
  background-color: rgb(107 114 128 / 0.15);
}
.bg-gray-500\/20 {
  background-color: rgb(107 114 128 / 0.2);
}
.bg-gray-500\/50 {
  background-color: rgb(107 114 128 / 0.5);
}
.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / 1);
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}
.bg-gray-600\/20 {
  background-color: rgb(75 85 99 / 0.2);
}
.bg-gray-600\/50 {
  background-color: rgb(75 85 99 / 0.5);
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-700\/30 {
  background-color: rgb(55 65 81 / 0.3);
}
.bg-gray-700\/50 {
  background-color: rgb(55 65 81 / 0.5);
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/30 {
  background-color: rgb(31 41 55 / 0.3);
}
.bg-gray-800\/40 {
  background-color: rgb(31 41 55 / 0.4);
}
.bg-gray-800\/50 {
  background-color: rgb(31 41 55 / 0.5);
}
.bg-gray-800\/60 {
  background-color: rgb(31 41 55 / 0.6);
}
.bg-gray-800\/70 {
  background-color: rgb(31 41 55 / 0.7);
}
.bg-gray-800\/80 {
  background-color: rgb(31 41 55 / 0.8);
}
.bg-gray-800\/95 {
  background-color: rgb(31 41 55 / 0.95);
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 1);
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/30 {
  background-color: rgb(17 24 39 / 0.3);
}
.bg-gray-900\/40 {
  background-color: rgb(17 24 39 / 0.4);
}
.bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
}
.bg-gray-900\/60 {
  background-color: rgb(17 24 39 / 0.6);
}
.bg-gray-900\/70 {
  background-color: rgb(17 24 39 / 0.7);
}
.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}
.bg-gray-900\/95 {
  background-color: rgb(17 24 39 / 0.95);
}
.bg-gray-950\/30 {
  background-color: rgb(3 7 18 / 0.3);
}
.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / 1);
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / 1);
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / 1);
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/15 {
  background-color: rgb(34 197 94 / 0.15);
}
.bg-green-500\/20 {
  background-color: rgb(34 197 94 / 0.2);
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-green-600\/20 {
  background-color: rgb(22 163 74 / 0.2);
}
.bg-green-600\/95 {
  background-color: rgb(22 163 74 / 0.95);
}
.bg-indigo-600\/20 {
  background-color: rgb(79 70 229 / 0.2);
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / 1);
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / 1);
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-400\/10 {
  background-color: rgb(251 146 60 / 0.1);
}
.bg-orange-400\/20 {
  background-color: rgb(251 146 60 / 0.2);
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / 1);
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / 1);
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-orange-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-orange-500\/20 {
  background-color: rgb(249 115 22 / 0.2);
}
.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / 1);
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-orange-600\/20 {
  background-color: rgb(234 88 12 / 0.2);
}
.bg-orange-600\/30 {
  background-color: rgb(234 88 12 / 0.3);
}
.bg-orange-900\/20 {
  background-color: rgb(124 45 18 / 0.2);
}
.bg-orange-900\/30 {
  background-color: rgb(124 45 18 / 0.3);
}
.bg-orange-900\/40 {
  background-color: rgb(124 45 18 / 0.4);
}
.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / 1);
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-pink-500\/20 {
  background-color: rgb(236 72 153 / 0.2);
}
.bg-pink-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 39 119 / 1);
  background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / 1);
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / 1);
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10 {
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/15 {
  background-color: rgb(168 85 247 / 0.15);
}
.bg-purple-500\/20 {
  background-color: rgb(168 85 247 / 0.2);
}
.bg-purple-500\/30 {
  background-color: rgb(168 85 247 / 0.3);
}
.bg-purple-500\/5 {
  background-color: rgb(168 85 247 / 0.05);
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / 1);
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-purple-600\/20 {
  background-color: rgb(147 51 234 / 0.2);
}
.bg-purple-600\/30 {
  background-color: rgb(147 51 234 / 0.3);
}
.bg-purple-600\/40 {
  background-color: rgb(147 51 234 / 0.4);
}
.bg-purple-900\/20 {
  background-color: rgb(88 28 135 / 0.2);
}
.bg-purple-900\/30 {
  background-color: rgb(88 28 135 / 0.3);
}
.bg-purple-900\/40 {
  background-color: rgb(88 28 135 / 0.4);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / 1);
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1);
}
.bg-red-400\/20 {
  background-color: rgb(248 113 113 / 0.2);
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/30 {
  background-color: rgb(239 68 68 / 0.3);
}
.bg-red-500\/80 {
  background-color: rgb(239 68 68 / 0.8);
}
.bg-red-500\/95 {
  background-color: rgb(239 68 68 / 0.95);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-600\/20 {
  background-color: rgb(220 38 38 / 0.2);
}
.bg-red-600\/90 {
  background-color: rgb(220 38 38 / 0.9);
}
.bg-red-600\/95 {
  background-color: rgb(220 38 38 / 0.95);
}
.bg-red-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / 1);
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.bg-red-900\/10 {
  background-color: rgb(127 29 29 / 0.1);
}
.bg-red-900\/20 {
  background-color: rgb(127 29 29 / 0.2);
}
.bg-red-900\/30 {
  background-color: rgb(127 29 29 / 0.3);
}
.bg-red-900\/40 {
  background-color: rgb(127 29 29 / 0.4);
}
.bg-red-950\/40 {
  background-color: rgb(69 10 10 / 0.4);
}
.bg-slate-400\/20 {
  background-color: rgb(148 163 184 / 0.2);
}
.bg-slate-600\/40 {
  background-color: rgb(71 85 105 / 0.4);
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-700\/30 {
  background-color: rgb(51 65 85 / 0.3);
}
.bg-slate-700\/50 {
  background-color: rgb(51 65 85 / 0.5);
}
.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-800\/20 {
  background-color: rgb(30 41 59 / 0.2);
}
.bg-slate-800\/30 {
  background-color: rgb(30 41 59 / 0.3);
}
.bg-slate-800\/40 {
  background-color: rgb(30 41 59 / 0.4);
}
.bg-slate-800\/50 {
  background-color: rgb(30 41 59 / 0.5);
}
.bg-slate-800\/95 {
  background-color: rgb(30 41 59 / 0.95);
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / 1);
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/50 {
  background-color: rgb(15 23 42 / 0.5);
}
.bg-slate-900\/95 {
  background-color: rgb(15 23 42 / 0.95);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-500\/20 {
  background-color: rgb(139 92 246 / 0.2);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.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\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / 1);
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-400\/20 {
  background-color: rgb(250 204 21 / 0.2);
}
.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / 1);
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/10 {
  background-color: rgb(234 179 8 / 0.1);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / 1);
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}
.bg-yellow-600\/20 {
  background-color: rgb(202 138 4 / 0.2);
}
.bg-yellow-900\/20 {
  background-color: rgb(113 63 18 / 0.2);
}
.bg-yellow-900\/30 {
  background-color: rgb(113 63 18 / 0.3);
}
.bg-yellow-900\/40 {
  background-color: rgb(113 63 18 / 0.4);
}
.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-opacity-60 {
  --tw-bg-opacity: 0.6;
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#0f0f23\] {
  --tw-gradient-from: #0f0f23 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 15 35 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-300 {
  --tw-gradient-from: #fcd34d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-600 {
  --tw-gradient-from: #d97706 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(217 119 6 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/50 {
  --tw-gradient-from: rgb(0 0 0 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/60 {
  --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-100 {
  --tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-300 {
  --tw-gradient-from: #93c5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 197 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-400 {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-50\/60 {
  --tw-gradient-from: rgb(239 246 255 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/10 {
  --tw-gradient-from: rgb(59 130 246 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/15 {
  --tw-gradient-from: rgb(59 130 246 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500\/20 {
  --tw-gradient-from: rgb(59 130 246 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600 {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-600\/20 {
  --tw-gradient-from: rgb(37 99 235 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-900\/20 {
  --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-400 {
  --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500 {
  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/10 {
  --tw-gradient-from: rgb(6 182 212 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-500\/20 {
  --tw-gradient-from: rgb(6 182 212 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-600 {
  --tw-gradient-from: #0891b2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(8 145 178 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-900\/30 {
  --tw-gradient-from: rgb(22 78 99 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 78 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-600 {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-500 {
  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-fuchsia-600 {
  --tw-gradient-from: #c026d3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 38 211 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-300 {
  --tw-gradient-from: #d1d5db var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(209 213 219 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-400 {
  --tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-500 {
  --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-600 {
  --tw-gradient-from: #4b5563 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-800\/50 {
  --tw-gradient-from: rgb(31 41 55 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900\/80 {
  --tw-gradient-from: rgb(17 24 39 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-900\/95 {
  --tw-gradient-from: rgb(17 24 39 / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-300 {
  --tw-gradient-from: #86efac var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-400 {
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500\/10 {
  --tw-gradient-from: rgb(34 197 94 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500\/15 {
  --tw-gradient-from: rgb(34 197 94 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500\/20 {
  --tw-gradient-from: rgb(34 197 94 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500\/90 {
  --tw-gradient-from: rgb(34 197 94 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-600 {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-lime-600 {
  --tw-gradient-from: #65a30d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(101 163 13 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-400 {
  --tw-gradient-from: #fb923c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/10 {
  --tw-gradient-from: rgb(249 115 22 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500\/20 {
  --tw-gradient-from: rgb(249 115 22 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-600 {
  --tw-gradient-from: #ea580c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-700 {
  --tw-gradient-from: #c2410c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(194 65 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-300 {
  --tw-gradient-from: #f9a8d4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 168 212 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-400 {
  --tw-gradient-from: #f472b6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-500 {
  --tw-gradient-from: #ec4899 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-500\/10 {
  --tw-gradient-from: rgb(236 72 153 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-500\/20 {
  --tw-gradient-from: rgb(236 72 153 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-500\/30 {
  --tw-gradient-from: rgb(236 72 153 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-pink-600 {
  --tw-gradient-from: #db2777 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-400 {
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50 {
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500 {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/10 {
  --tw-gradient-from: rgb(168 85 247 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/15 {
  --tw-gradient-from: rgb(168 85 247 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/20 {
  --tw-gradient-from: rgb(168 85 247 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500\/5 {
  --tw-gradient-from: rgb(168 85 247 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600 {
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-600\/20 {
  --tw-gradient-from: rgb(147 51 234 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/20 {
  --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/30 {
  --tw-gradient-from: rgb(88 28 135 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/40 {
  --tw-gradient-from: rgb(88 28 135 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-900\/50 {
  --tw-gradient-from: rgb(88 28 135 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/10 {
  --tw-gradient-from: rgb(239 68 68 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/20 {
  --tw-gradient-from: rgb(239 68 68 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600 {
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-900\/40 {
  --tw-gradient-from: rgb(127 29 29 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(127 29 29 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-950 {
  --tw-gradient-from: #450a0a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(69 10 10 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-500 {
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-600 {
  --tw-gradient-from: #0284c7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 132 199 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-300 {
  --tw-gradient-from: #cbd5e1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(203 213 225 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-600 {
  --tw-gradient-from: #475569 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-teal-500 {
  --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-teal-600 {
  --tw-gradient-from: #0d9488 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-400 {
  --tw-gradient-from: #a78bfa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500 {
  --tw-gradient-from: #8b5cf6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/15 {
  --tw-gradient-from: rgb(255 255 255 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/5 {
  --tw-gradient-from: rgb(255 255 255 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-300 {
  --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-400 {
  --tw-gradient-from: #facc15 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500 {
  --tw-gradient-from: #eab308 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-500\/20 {
  --tw-gradient-from: rgb(234 179 8 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-yellow-600 {
  --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-amber-400 {
  --tw-gradient-to: rgb(251 191 36 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fbbf24 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-400 {
  --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-emerald-500\/20 {
  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(16 185 129 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-800 {
  --tw-gradient-to: rgb(31 41 55 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-500 {
  --tw-gradient-to: rgb(249 115 22 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-orange-500\/20 {
  --tw-gradient-to: rgb(249 115 22 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(249 115 22 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-pink-400 {
  --tw-gradient-to: rgb(244 114 182 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f472b6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-pink-500 {
  --tw-gradient-to: rgb(236 72 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-400\/40 {
  --tw-gradient-to: rgb(192 132 252 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(192 132 252 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-50\/60 {
  --tw-gradient-to: rgb(250 245 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(250 245 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-500 {
  --tw-gradient-to: rgb(168 85 247 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-500\/10 {
  --tw-gradient-to: rgb(168 85 247 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(168 85 247 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-900 {
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #581c87 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-900\/20 {
  --tw-gradient-to: rgb(88 28 135 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(88 28 135 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-rose-500 {
  --tw-gradient-to: rgb(244 63 94 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f43f5e var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-rose-500\/20 {
  --tw-gradient-to: rgb(244 63 94 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(244 63 94 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-900 {
  --tw-gradient-to: rgb(15 23 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-yellow-500 {
  --tw-gradient-to: rgb(234 179 8 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eab308 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#1a1a2e\] {
  --tw-gradient-to: #1a1a2e var(--tw-gradient-to-position);
}
.to-amber-200 {
  --tw-gradient-to: #fde68a var(--tw-gradient-to-position);
}
.to-amber-400 {
  --tw-gradient-to: #fbbf24 var(--tw-gradient-to-position);
}
.to-amber-500 {
  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}
.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}
.to-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-blue-200 {
  --tw-gradient-to: #bfdbfe var(--tw-gradient-to-position);
}
.to-blue-400 {
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}
.to-blue-50\/60 {
  --tw-gradient-to: rgb(239 246 255 / 0.6) var(--tw-gradient-to-position);
}
.to-blue-500 {
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-blue-500\/10 {
  --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position);
}
.to-blue-500\/15 {
  --tw-gradient-to: rgb(59 130 246 / 0.15) var(--tw-gradient-to-position);
}
.to-blue-500\/20 {
  --tw-gradient-to: rgb(59 130 246 / 0.2) var(--tw-gradient-to-position);
}
.to-blue-500\/5 {
  --tw-gradient-to: rgb(59 130 246 / 0.05) var(--tw-gradient-to-position);
}
.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-blue-600\/20 {
  --tw-gradient-to: rgb(37 99 235 / 0.2) var(--tw-gradient-to-position);
}
.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.to-blue-800 {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}
.to-blue-900\/30 {
  --tw-gradient-to: rgb(30 58 138 / 0.3) var(--tw-gradient-to-position);
}
.to-cyan-400 {
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}
.to-cyan-500 {
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}
.to-cyan-500\/10 {
  --tw-gradient-to: rgb(6 182 212 / 0.1) var(--tw-gradient-to-position);
}
.to-cyan-500\/15 {
  --tw-gradient-to: rgb(6 182 212 / 0.15) var(--tw-gradient-to-position);
}
.to-cyan-500\/20 {
  --tw-gradient-to: rgb(6 182 212 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}
.to-cyan-600\/20 {
  --tw-gradient-to: rgb(8 145 178 / 0.2) var(--tw-gradient-to-position);
}
.to-cyan-900\/20 {
  --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position);
}
.to-emerald-400 {
  --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
}
.to-emerald-500 {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}
.to-emerald-500\/10 {
  --tw-gradient-to: rgb(16 185 129 / 0.1) var(--tw-gradient-to-position);
}
.to-emerald-500\/15 {
  --tw-gradient-to: rgb(16 185 129 / 0.15) var(--tw-gradient-to-position);
}
.to-emerald-500\/90 {
  --tw-gradient-to: rgb(16 185 129 / 0.9) var(--tw-gradient-to-position);
}
.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}
.to-fuchsia-400 {
  --tw-gradient-to: #e879f9 var(--tw-gradient-to-position);
}
.to-gray-400 {
  --tw-gradient-to: #9ca3af var(--tw-gradient-to-position);
}
.to-gray-500 {
  --tw-gradient-to: #6b7280 var(--tw-gradient-to-position);
}
.to-gray-600 {
  --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);
}
.to-gray-700 {
  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}
.to-gray-900 {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}
.to-gray-950 {
  --tw-gradient-to: #030712 var(--tw-gradient-to-position);
}
.to-gray-950\/95 {
  --tw-gradient-to: rgb(3 7 18 / 0.95) var(--tw-gradient-to-position);
}
.to-green-200 {
  --tw-gradient-to: #bbf7d0 var(--tw-gradient-to-position);
}
.to-green-400 {
  --tw-gradient-to: #4ade80 var(--tw-gradient-to-position);
}
.to-green-600 {
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}
.to-green-600\/20 {
  --tw-gradient-to: rgb(22 163 74 / 0.2) var(--tw-gradient-to-position);
}
.to-indigo-400 {
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
}
.to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}
.to-indigo-500\/10 {
  --tw-gradient-to: rgb(99 102 241 / 0.1) var(--tw-gradient-to-position);
}
.to-indigo-500\/20 {
  --tw-gradient-to: rgb(99 102 241 / 0.2) var(--tw-gradient-to-position);
}
.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-lime-400 {
  --tw-gradient-to: #a3e635 var(--tw-gradient-to-position);
}
.to-orange-400 {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}
.to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}
.to-orange-500\/10 {
  --tw-gradient-to: rgb(249 115 22 / 0.1) var(--tw-gradient-to-position);
}
.to-orange-500\/20 {
  --tw-gradient-to: rgb(249 115 22 / 0.2) var(--tw-gradient-to-position);
}
.to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}
.to-orange-700 {
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}
.to-pink-400 {
  --tw-gradient-to: #f472b6 var(--tw-gradient-to-position);
}
.to-pink-50 {
  --tw-gradient-to: #fdf2f8 var(--tw-gradient-to-position);
}
.to-pink-500 {
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}
.to-pink-500\/10 {
  --tw-gradient-to: rgb(236 72 153 / 0.1) var(--tw-gradient-to-position);
}
.to-pink-500\/20 {
  --tw-gradient-to: rgb(236 72 153 / 0.2) var(--tw-gradient-to-position);
}
.to-pink-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}
.to-pink-600\/20 {
  --tw-gradient-to: rgb(219 39 119 / 0.2) var(--tw-gradient-to-position);
}
.to-pink-900\/20 {
  --tw-gradient-to: rgb(131 24 67 / 0.2) var(--tw-gradient-to-position);
}
.to-pink-900\/30 {
  --tw-gradient-to: rgb(131 24 67 / 0.3) var(--tw-gradient-to-position);
}
.to-pink-900\/40 {
  --tw-gradient-to: rgb(131 24 67 / 0.4) var(--tw-gradient-to-position);
}
.to-pink-900\/50 {
  --tw-gradient-to: rgb(131 24 67 / 0.5) var(--tw-gradient-to-position);
}
.to-purple-300 {
  --tw-gradient-to: #d8b4fe var(--tw-gradient-to-position);
}
.to-purple-400 {
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}
.to-purple-500 {
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}
.to-purple-500\/10 {
  --tw-gradient-to: rgb(168 85 247 / 0.1) var(--tw-gradient-to-position);
}
.to-purple-500\/20 {
  --tw-gradient-to: rgb(168 85 247 / 0.2) var(--tw-gradient-to-position);
}
.to-purple-500\/30 {
  --tw-gradient-to: rgb(168 85 247 / 0.3) var(--tw-gradient-to-position);
}
.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}
.to-purple-900 {
  --tw-gradient-to: #581c87 var(--tw-gradient-to-position);
}
.to-purple-900\/30 {
  --tw-gradient-to: rgb(88 28 135 / 0.3) var(--tw-gradient-to-position);
}
.to-purple-900\/40 {
  --tw-gradient-to: rgb(88 28 135 / 0.4) var(--tw-gradient-to-position);
}
.to-red-400 {
  --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}
.to-red-500 {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}
.to-red-500\/10 {
  --tw-gradient-to: rgb(239 68 68 / 0.1) var(--tw-gradient-to-position);
}
.to-red-500\/20 {
  --tw-gradient-to: rgb(239 68 68 / 0.2) var(--tw-gradient-to-position);
}
.to-red-500\/30 {
  --tw-gradient-to: rgb(239 68 68 / 0.3) var(--tw-gradient-to-position);
}
.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}
.to-red-700 {
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}
.to-rose-300 {
  --tw-gradient-to: #fda4af var(--tw-gradient-to-position);
}
.to-rose-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}
.to-sky-400 {
  --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position);
}
.to-slate-400 {
  --tw-gradient-to: #94a3b8 var(--tw-gradient-to-position);
}
.to-slate-500 {
  --tw-gradient-to: #64748b var(--tw-gradient-to-position);
}
.to-teal-400 {
  --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position);
}
.to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-violet-500 {
  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
}
.to-yellow-400 {
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.to-yellow-600\/20 {
  --tw-gradient-to: rgb(202 138 4 / 0.2) var(--tw-gradient-to-position);
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.fill-current {
  fill: currentColor;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-12 {
  padding: 3rem;
}
.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-8 {
  padding: 2rem;
}
.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-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-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.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-12 {
  padding-bottom: 3rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-\[56\.25\%\] {
  padding-bottom: 56.25%;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.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-audiowide {
  font-family: Audiowide, cursive;
}
.font-bangers {
  font-family: Bangers, cursive;
}
.font-bebas {
  font-family: "Bebas Neue", cursive;
}
.font-bungee-shade {
  font-family: "Bungee Shade", cursive;
}
.font-cinzel {
  font-family: Cinzel, serif;
}
.font-creepster {
  font-family: Creepster, cursive;
}
.font-faster-one {
  font-family: "Faster One", cursive;
}
.font-fredoka {
  font-family: "Fredoka One", cursive;
}
.font-kaushan {
  font-family: "Kaushan Script", cursive;
}
.font-lobster {
  font-family: Lobster, cursive;
}
.font-luckiest-guy {
  font-family: "Luckiest Guy", cursive;
}
.font-metal-mania {
  font-family: "Metal Mania", cursive;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-monoton {
  font-family: Monoton, cursive;
}
.font-nosifer {
  font-family: Nosifer, cursive;
}
.font-orbitron {
  font-family: Orbitron, sans-serif;
}
.font-pacifico {
  font-family: Pacifico, cursive;
}
.font-permanent-marker {
  font-family: "Permanent Marker", cursive;
}
.font-press-start {
  font-family: "Press Start 2P", cursive;
}
.font-righteous {
  font-family: Righteous, cursive;
}
.font-russo-one {
  font-family: "Russo One", sans-serif;
}
.font-sacramento {
  font-family: Sacramento, cursive;
}
.font-vt323 {
  font-family: VT323, monospace;
}
.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-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[18px\] {
  font-size: 18px;
}
.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-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / 1);
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/70 {
  color: rgb(0 0 0 / 0.7);
}
.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / 1);
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / 1);
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-300\/70 {
  color: rgb(147 197 253 / 0.7);
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 1);
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / 1);
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cyan-200\/80 {
  color: rgb(165 243 252 / 0.8);
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / 1);
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / 1);
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / 1);
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / 1);
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / 1);
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / 1);
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / 1);
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / 1);
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / 1);
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / 1);
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / 1);
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-indigo-300 {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / 1);
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}
.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / 1);
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.text-orange-200\/70 {
  color: rgb(254 215 170 / 0.7);
}
.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / 1);
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-400\/60 {
  color: rgb(251 146 60 / 0.6);
}
.text-orange-400\/80 {
  color: rgb(251 146 60 / 0.8);
}
.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / 1);
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / 1);
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / 1);
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / 1);
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-pink-300\/70 {
  color: rgb(249 168 212 / 0.7);
}
.text-pink-400 {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / 1);
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}
.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / 1);
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}
.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / 1);
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / 1);
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / 1);
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-300\/80 {
  color: rgb(216 180 254 / 0.8);
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / 1);
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-400\/60 {
  color: rgb(192 132 252 / 0.6);
}
.text-purple-400\/70 {
  color: rgb(192 132 252 / 0.7);
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / 1);
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / 1);
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / 1);
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / 1);
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / 1);
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/60 {
  color: rgb(248 113 113 / 0.6);
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / 1);
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / 1);
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / 1);
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / 1);
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}
.text-yellow-400\/60 {
  color: rgb(250 204 21 / 0.6);
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / 1);
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-600::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white\/50::placeholder {
  color: rgb(255 255 255 / 0.5);
}
.accent-purple-500 {
  accent-color: #a855f7;
}
.accent-purple-600 {
  accent-color: #9333ea;
}
.accent-red-500 {
  accent-color: #ef4444;
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_rgba\(17\2c 24\2c 39\2c 0\.9\)\] {
  --tw-shadow: 0 0 0 2px rgba(17,24,39,0.9);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-amber-600\/20 {
  --tw-shadow-color: rgb(217 119 6 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-black\/50 {
  --tw-shadow-color: rgb(0 0 0 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-400\/20 {
  --tw-shadow-color: rgb(96 165 250 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-500\/20 {
  --tw-shadow-color: rgb(59 130 246 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-blue-500\/30 {
  --tw-shadow-color: rgb(59 130 246 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-400\/30 {
  --tw-shadow-color: rgb(34 211 238 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/20 {
  --tw-shadow-color: rgb(6 182 212 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-cyan-500\/30 {
  --tw-shadow-color: rgb(6 182 212 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-emerald-500\/20 {
  --tw-shadow-color: rgb(16 185 129 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-300\/20 {
  --tw-shadow-color: rgb(209 213 219 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-400\/10 {
  --tw-shadow-color: rgb(156 163 175 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-500\/30 {
  --tw-shadow-color: rgb(107 114 128 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-green-400\/20 {
  --tw-shadow-color: rgb(74 222 128 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-green-500\/30 {
  --tw-shadow-color: rgb(34 197 94 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-indigo-500\/30 {
  --tw-shadow-color: rgb(99 102 241 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/30 {
  --tw-shadow-color: rgb(249 115 22 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-orange-500\/50 {
  --tw-shadow-color: rgb(249 115 22 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-pink-500\/20 {
  --tw-shadow-color: rgb(236 72 153 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-pink-500\/30 {
  --tw-shadow-color: rgb(236 72 153 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/10 {
  --tw-shadow-color: rgb(168 85 247 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/20 {
  --tw-shadow-color: rgb(168 85 247 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-purple-500\/30 {
  --tw-shadow-color: rgb(168 85 247 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/20 {
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/30 {
  --tw-shadow-color: rgb(239 68 68 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-slate-300\/20 {
  --tw-shadow-color: rgb(203 213 225 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-violet-400\/30 {
  --tw-shadow-color: rgb(167 139 250 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-yellow-400\/20 {
  --tw-shadow-color: rgb(250 204 21 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-yellow-400\/30 {
  --tw-shadow-color: rgb(250 204 21 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.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), 0 0 #0000;
  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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-cyan-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity, 1));
}
.ring-purple-400\/30 {
  --tw-ring-color: rgb(192 132 252 / 0.3);
}
.ring-purple-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}
.ring-purple-500\/30 {
  --tw-ring-color: rgb(168 85 247 / 0.3);
}
.ring-purple-500\/50 {
  --tw-ring-color: rgb(168 85 247 / 0.5);
}
.ring-red-500\/50 {
  --tw-ring-color: rgb(239 68 68 / 0.5);
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/50 {
  --tw-ring-color: rgb(255 255 255 / 0.5);
}
.ring-yellow-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity, 1));
}
.ring-opacity-75 {
  --tw-ring-opacity: 0.75;
}
.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;
}
.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-3xl {
  --tw-blur: blur(64px);
  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-sm {
  --tw-blur: blur(4px);
  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-xl {
  --tw-blur: blur(24px);
  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);
}
.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 {
  --tw-backdrop-blur: blur(8px);
  -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-none {
  --tw-backdrop-blur:  ;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-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, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -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-text-decoration-color, -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, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.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-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.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);
}

/* Styles globaux avec glassmorphism */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Glassmorphism utilities */
.glass {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animation pour le sélecteur de couleurs de bulles */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-15px) scaleY(0.7);
    padding: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    padding: 0.5rem;
  }
}

@keyframes slideUpClose {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    padding: 0.5rem;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scaleY(0.7);
    padding: 0;
  }
}

.animate-slideDown {
  animation: slideDown 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-slideUpClose {
  animation: slideUpClose 0.35s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

/* Scrollbar personnalisée - Style ChatGPT dark */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 10px;
  margin: 4px 0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(140, 140, 160, 0.8), rgba(110, 110, 140, 0.9));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(120, 80, 200, 0.95));
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 140, 160, 0.8) rgba(0, 0, 0, 0.3);
}

/* Masquer la scrollbar pour les menus défilables horizontaux */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* Améliorer le scroll tactile sur mobile */
.scrollbar-hide {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* --- Quote bubble integration --- */
.quote-bubble {
  /* Fond plus contrasté pour rester visible sur bulles blanches */
  background: rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0,0,0,0.06),
    0 0 0 1px rgba(0,0,0,0.04);
}

/* Corrige le badge "Citation" trop haut: le placer dans le flux */
.quote-bubble > div:first-child {
  position: static !important;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

.quote-bubble .text-sm.italic {
  color: rgba(55, 65, 81, 0.85) !important; /* gray-700 */
}

.quote-bubble .text-xs.font-medium {
  color: rgba(31, 41, 55, 0.9) !important; /* gray-800 */
}

.file\:mr-4::-webkit-file-upload-button {
  margin-right: 1rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 1rem;
}

.file\:cursor-pointer::-webkit-file-upload-button {
  cursor: pointer;
}

.file\:cursor-pointer::file-selector-button {
  cursor: pointer;
}

.file\:rounded-lg::-webkit-file-upload-button {
  border-radius: 0.5rem;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

.file\:border-0::-webkit-file-upload-button {
  border-width: 0px;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-cyan-500\/20::-webkit-file-upload-button {
  background-color: rgb(6 182 212 / 0.2);
}

.file\:bg-cyan-500\/20::file-selector-button {
  background-color: rgb(6 182 212 / 0.2);
}

.file\:px-4::-webkit-file-upload-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-2::-webkit-file-upload-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.file\:text-cyan-400::-webkit-file-upload-button {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / 1);
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.file\:text-cyan-400::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / 1);
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:left-\[2px\]::after {
  content: var(--tw-content);
  left: 2px;
}

.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:border-gray-300::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / 1);
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

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

.empty\:before\:text-gray-400:empty::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / 1);
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.empty\:before\:content-\[attr\(data-placeholder\)\]:empty::before {
  --tw-content: attr(data-placeholder);
  content: var(--tw-content);
}

.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\:rotate-90:hover {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.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\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  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-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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\:transform:hover {
  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-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / 1);
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.hover\:border-blue-500\/50:hover {
  border-color: rgb(59 130 246 / 0.5);
}

.hover\:border-blue-500\/60:hover {
  border-color: rgb(59 130 246 / 0.6);
}

.hover\:border-cyan-400\/50:hover {
  border-color: rgb(34 211 238 / 0.5);
}

.hover\:border-cyan-500\/30:hover {
  border-color: rgb(6 182 212 / 0.3);
}

.hover\:border-cyan-500\/50:hover {
  border-color: rgb(6 182 212 / 0.5);
}

.hover\:border-gray-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / 1);
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-500\/40:hover {
  border-color: rgb(107 114 128 / 0.4);
}

.hover\:border-gray-600:hover {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / 1);
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.hover\:border-green-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / 1);
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-500\/50:hover {
  border-color: rgb(249 115 22 / 0.5);
}

.hover\:border-pink-500\/40:hover {
  border-color: rgb(236 72 153 / 0.4);
}

.hover\:border-purple-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 1);
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.hover\:border-purple-400\/50:hover {
  border-color: rgb(192 132 252 / 0.5);
}

.hover\:border-purple-400\/60:hover {
  border-color: rgb(192 132 252 / 0.6);
}

.hover\:border-purple-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / 1);
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.hover\:border-purple-500\/30:hover {
  border-color: rgb(168 85 247 / 0.3);
}

.hover\:border-purple-500\/40:hover {
  border-color: rgb(168 85 247 / 0.4);
}

.hover\:border-purple-500\/50:hover {
  border-color: rgb(168 85 247 / 0.5);
}

.hover\:border-purple-500\/60:hover {
  border-color: rgb(168 85 247 / 0.6);
}

.hover\:border-red-500\/20:hover {
  border-color: rgb(239 68 68 / 0.2);
}

.hover\:border-red-500\/50:hover {
  border-color: rgb(239 68 68 / 0.5);
}

.hover\:border-red-500\/60:hover {
  border-color: rgb(239 68 68 / 0.6);
}

.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}

.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}

.hover\:border-white\/40:hover {
  border-color: rgb(255 255 255 / 0.4);
}

.hover\:border-white\/50:hover {
  border-color: rgb(255 255 255 / 0.5);
}

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / 1);
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.hover\:bg-black\/10:hover {
  background-color: rgb(0 0 0 / 0.1);
}

.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8);
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-500\/20:hover {
  background-color: rgb(59 130 246 / 0.2);
}

.hover\:bg-blue-500\/25:hover {
  background-color: rgb(59 130 246 / 0.25);
}

.hover\:bg-blue-500\/30:hover {
  background-color: rgb(59 130 246 / 0.3);
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600\/20:hover {
  background-color: rgb(37 99 235 / 0.2);
}

.hover\:bg-blue-600\/30:hover {
  background-color: rgb(37 99 235 / 0.3);
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-800\/30:hover {
  background-color: rgb(30 64 175 / 0.3);
}

.hover\:bg-blue-900\/30:hover {
  background-color: rgb(30 58 138 / 0.3);
}

.hover\:bg-blue-900\/40:hover {
  background-color: rgb(30 58 138 / 0.4);
}

.hover\:bg-cyan-500\/10:hover {
  background-color: rgb(6 182 212 / 0.1);
}

.hover\:bg-cyan-500\/30:hover {
  background-color: rgb(6 182 212 / 0.3);
}

.hover\:bg-cyan-500\/40:hover {
  background-color: rgb(6 182 212 / 0.4);
}

.hover\:bg-cyan-600\/30:hover {
  background-color: rgb(8 145 178 / 0.3);
}

.hover\:bg-cyan-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(14 116 144 / 1);
  background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
}

.hover\:bg-cyan-800\/40:hover {
  background-color: rgb(21 94 117 / 0.4);
}

.hover\:bg-emerald-500\/10:hover {
  background-color: rgb(16 185 129 / 0.1);
}

.hover\:bg-emerald-500\/25:hover {
  background-color: rgb(16 185 129 / 0.25);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / 1);
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / 1);
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / 1);
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-500\/30:hover {
  background-color: rgb(107 114 128 / 0.3);
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / 1);
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-600\/20:hover {
  background-color: rgb(75 85 99 / 0.2);
}

.hover\:bg-gray-600\/30:hover {
  background-color: rgb(75 85 99 / 0.3);
}

.hover\:bg-gray-600\/50:hover {
  background-color: rgb(75 85 99 / 0.5);
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700\/40:hover {
  background-color: rgb(55 65 81 / 0.4);
}

.hover\:bg-gray-700\/50:hover {
  background-color: rgb(55 65 81 / 0.5);
}

.hover\:bg-gray-700\/70:hover {
  background-color: rgb(55 65 81 / 0.7);
}

.hover\:bg-gray-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-800\/30:hover {
  background-color: rgb(31 41 55 / 0.3);
}

.hover\:bg-gray-800\/50:hover {
  background-color: rgb(31 41 55 / 0.5);
}

.hover\:bg-gray-800\/60:hover {
  background-color: rgb(31 41 55 / 0.6);
}

.hover\:bg-gray-800\/80:hover {
  background-color: rgb(31 41 55 / 0.8);
}

.hover\:bg-green-500\/20:hover {
  background-color: rgb(34 197 94 / 0.2);
}

.hover\:bg-green-500\/30:hover {
  background-color: rgb(34 197 94 / 0.3);
}

.hover\:bg-green-600\/20:hover {
  background-color: rgb(22 163 74 / 0.2);
}

.hover\:bg-green-600\/30:hover {
  background-color: rgb(22 163 74 / 0.3);
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / 1);
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-600\/30:hover {
  background-color: rgb(79 70 229 / 0.3);
}

.hover\:bg-orange-500\/20:hover {
  background-color: rgb(249 115 22 / 0.2);
}

.hover\:bg-orange-600\/30:hover {
  background-color: rgb(234 88 12 / 0.3);
}

.hover\:bg-orange-600\/40:hover {
  background-color: rgb(234 88 12 / 0.4);
}

.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / 1);
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-500\/30:hover {
  background-color: rgb(236 72 153 / 0.3);
}

.hover\:bg-pink-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 24 93 / 1);
  background-color: rgb(190 24 93 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / 1);
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-500\/10:hover {
  background-color: rgb(168 85 247 / 0.1);
}

.hover\:bg-purple-500\/20:hover {
  background-color: rgb(168 85 247 / 0.2);
}

.hover\:bg-purple-500\/30:hover {
  background-color: rgb(168 85 247 / 0.3);
}

.hover\:bg-purple-500\/40:hover {
  background-color: rgb(168 85 247 / 0.4);
}

.hover\:bg-purple-600\/20:hover {
  background-color: rgb(147 51 234 / 0.2);
}

.hover\:bg-purple-600\/30:hover {
  background-color: rgb(147 51 234 / 0.3);
}

.hover\:bg-purple-600\/40:hover {
  background-color: rgb(147 51 234 / 0.4);
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / 1);
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-800\/40:hover {
  background-color: rgb(107 33 168 / 0.4);
}

.hover\:bg-purple-800\/60:hover {
  background-color: rgb(107 33 168 / 0.6);
}

.hover\:bg-purple-900\/40:hover {
  background-color: rgb(88 28 135 / 0.4);
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / 1);
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}

.hover\:bg-red-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2);
}

.hover\:bg-red-500\/30:hover {
  background-color: rgb(239 68 68 / 0.3);
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600\/20:hover {
  background-color: rgb(220 38 38 / 0.2);
}

.hover\:bg-red-600\/30:hover {
  background-color: rgb(220 38 38 / 0.3);
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / 1);
  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-500\/20:hover {
  background-color: rgb(100 116 139 / 0.2);
}

.hover\:bg-slate-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / 1);
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700\/40:hover {
  background-color: rgb(51 65 85 / 0.4);
}

.hover\:bg-slate-700\/50:hover {
  background-color: rgb(51 65 85 / 0.5);
}

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / 1);
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-800\/50:hover {
  background-color: rgb(30 41 59 / 0.5);
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}

.hover\:bg-white\/30:hover {
  background-color: rgb(255 255 255 / 0.3);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/75:hover {
  background-color: rgb(255 255 255 / 0.75);
}

.hover\:bg-yellow-500\/20:hover {
  background-color: rgb(234 179 8 / 0.2);
}

.hover\:bg-yellow-600\/30:hover {
  background-color: rgb(202 138 4 / 0.3);
}

.hover\:bg-yellow-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(161 98 7 / 1);
  background-color: rgb(161 98 7 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-20:hover {
  --tw-bg-opacity: 0.2;
}

.hover\:bg-gradient-to-br:hover {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.hover\:bg-gradient-to-r:hover {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.hover\:from-blue-600:hover {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-blue-700:hover {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-cyan-700:hover {
  --tw-gradient-from: #0e7490 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 116 144 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-gray-700:hover {
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-green-500:hover {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-indigo-700:hover {
  --tw-gradient-from: #4338ca var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-pink-500\/10:hover {
  --tw-gradient-from: rgb(236 72 153 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-pink-700:hover {
  --tw-gradient-from: #be185d var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(190 24 93 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-500:hover {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-500\/20:hover {
  --tw-gradient-from: rgb(168 85 247 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-500\/30:hover {
  --tw-gradient-from: rgb(168 85 247 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-600:hover {
  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-600\/30:hover {
  --tw-gradient-from: rgb(147 51 234 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-600\/40:hover {
  --tw-gradient-from: rgb(147 51 234 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-700:hover {
  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-red-700:hover {
  --tw-gradient-from: #b91c1c var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(185 28 28 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-yellow-700:hover {
  --tw-gradient-from: #a16207 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(161 98 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:via-purple-500\/10:hover {
  --tw-gradient-to: rgb(168 85 247 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(168 85 247 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.hover\:to-blue-600:hover {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.hover\:to-blue-700:hover {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.hover\:to-cyan-500\/10:hover {
  --tw-gradient-to: rgb(6 182 212 / 0.1) var(--tw-gradient-to-position);
}

.hover\:to-cyan-700:hover {
  --tw-gradient-to: #0e7490 var(--tw-gradient-to-position);
}

.hover\:to-emerald-500:hover {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}

.hover\:to-gray-800:hover {
  --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
}

.hover\:to-orange-700:hover {
  --tw-gradient-to: #c2410c var(--tw-gradient-to-position);
}

.hover\:to-pink-500:hover {
  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
}

.hover\:to-pink-500\/20:hover {
  --tw-gradient-to: rgb(236 72 153 / 0.2) var(--tw-gradient-to-position);
}

.hover\:to-pink-500\/30:hover {
  --tw-gradient-to: rgb(236 72 153 / 0.3) var(--tw-gradient-to-position);
}

.hover\:to-pink-600:hover {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.hover\:to-pink-600\/30:hover {
  --tw-gradient-to: rgb(219 39 119 / 0.3) var(--tw-gradient-to-position);
}

.hover\:to-pink-600\/40:hover {
  --tw-gradient-to: rgb(219 39 119 / 0.4) var(--tw-gradient-to-position);
}

.hover\:to-pink-700:hover {
  --tw-gradient-to: #be185d var(--tw-gradient-to-position);
}

.hover\:to-purple-600:hover {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.hover\:to-purple-700:hover {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.hover\:to-red-800:hover {
  --tw-gradient-to: #991b1b var(--tw-gradient-to-position);
}

.hover\:text-blue-200:hover {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / 1);
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / 1);
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-cyan-200:hover {
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / 1);
  color: rgb(165 243 252 / var(--tw-text-opacity, 1));
}

.hover\:text-cyan-300:hover {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / 1);
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.hover\:text-emerald-300:hover {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / 1);
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / 1);
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / 1);
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / 1);
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / 1);
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-200:hover {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / 1);
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-300:hover {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / 1);
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-400:hover {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / 1);
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-600:hover {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / 1);
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / 1);
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 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 / 1);
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-300:hover {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white\/90:hover {
  color: rgb(255 255 255 / 0.9);
}

.hover\:text-yellow-400:hover {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / 1);
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:opacity-95:hover {
  opacity: 0.95;
}

.hover\:shadow-lg:hover {
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-purple-500\/25:hover {
  --tw-shadow-color: rgb(168 85 247 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-purple-500\/40:hover {
  --tw-shadow-color: rgb(168 85 247 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:ring-2: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(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-4: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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-purple-500:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.hover\:ring-purple-500\/50:hover {
  --tw-ring-color: rgb(168 85 247 / 0.5);
}

.hover\:file\:bg-cyan-500\/30::-webkit-file-upload-button:hover {
  background-color: rgb(6 182 212 / 0.3);
}

.hover\:file\:bg-cyan-500\/30::file-selector-button:hover {
  background-color: rgb(6 182 212 / 0.3);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / 1);
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-cyan-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 211 238 / 1);
  border-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.focus\:border-orange-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(249 115 22 / 1);
  border-color: rgb(249 115 22 / var(--tw-border-opacity, 1));
}

.focus\:border-pink-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(236 72 153 / 1);
  border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / 1);
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / 1);
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-500\/50:focus {
  border-color: rgb(168 85 247 / 0.5);
}

.focus\:border-red-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / 1);
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / 1);
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:border-yellow-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / 1);
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}

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

.focus\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  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), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4: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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500\/20:focus {
  --tw-ring-color: rgb(59 130 246 / 0.2);
}

.focus\:ring-cyan-400\/30:focus {
  --tw-ring-color: rgb(34 211 238 / 0.3);
}

.focus\:ring-cyan-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-200\/20:focus {
  --tw-ring-color: rgb(233 213 255 / 0.2);
}

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-500\/20:focus {
  --tw-ring-color: rgb(168 85 247 / 0.2);
}

.focus\:ring-purple-500\/50:focus {
  --tw-ring-color: rgb(168 85 247 / 0.5);
}

.focus\:ring-red-500\/50:focus {
  --tw-ring-color: rgb(239 68 68 / 0.5);
}

.focus\:ring-white\/20:focus {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}

.focus\:ring-yellow-200\/20:focus {
  --tw-ring-color: rgb(254 240 138 / 0.2);
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:ring-offset-gray-900:focus {
  --tw-ring-offset-color: #111827;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-blue-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-purple-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.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\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  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\:bg-white\/30:active {
  background-color: rgb(255 255 255 / 0.3);
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:border-gray-600\/30:disabled {
  border-color: rgb(75 85 99 / 0.3);
}

.disabled\:border-gray-700\/30:disabled {
  border-color: rgb(55 65 81 / 0.3);
}

.disabled\:bg-gray-600:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / 1);
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-700:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / 1);
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-800:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / 1);
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-900:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / 1);
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-600:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / 1);
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-700:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.disabled\:from-gray-600:disabled {
  --tw-gradient-from: #4b5563 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(75 85 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.disabled\:from-gray-700:disabled {
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.disabled\:to-gray-600:disabled {
  --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);
}

.disabled\:to-gray-700:disabled {
  --tw-gradient-to: #374151 var(--tw-gradient-to-position);
}

.disabled\:text-gray-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / 1);
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:hover\:scale-100:hover:disabled {
  --tw-scale-x: 1;
  --tw-scale-y: 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));
}

.disabled\:hover\:border-white\/10:hover:disabled {
  border-color: rgb(255 255 255 / 0.1);
}

.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.disabled\:hover\:bg-white\/5:hover:disabled {
  background-color: rgb(255 255 255 / 0.05);
}

.group:hover .group-hover\:-translate-x-1 {
  --tw-translate-x: -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-1 {
  --tw-translate-x: 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-\[100\%\] {
  --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));
}

.group:hover .group-hover\:scale-105 {
  --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));
}

.group:hover .group-hover\: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));
}

.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.group:hover .group-hover\:from-blue-200 {
  --tw-gradient-from: #bfdbfe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(191 219 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group:hover .group-hover\:to-purple-200 {
  --tw-gradient-to: #e9d5ff var(--tw-gradient-to-position);
}

.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / 1);
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / 1);
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / 1);
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-pink-200 {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / 1);
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / 1);
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / 1);
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / 1);
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}

.peer:checked ~ .peer-checked\:bg-cyan-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / 1);
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.peer:focus ~ .peer-focus\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus ~ .peer-focus\:ring-cyan-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {

  .sm\:absolute {
    position: absolute;
  }

  .sm\:bottom-0 {
    bottom: 0px;
  }

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

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

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

  .sm\:right-0 {
    right: 0px;
  }

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

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

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

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

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

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

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

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

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

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .sm\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .sm\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

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

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:mr-2 {
    margin-right: 0.5rem;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-10 {
    margin-top: 2.5rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:block {
    display: block;
  }

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

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:\!h-7 {
    height: 1.75rem !important;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

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

  .sm\:h-3 {
    height: 0.75rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-\[320px\] {
    height: 320px;
  }

  .sm\:h-\[340px\] {
    height: 340px;
  }

  .sm\:h-\[380px\] {
    height: 380px;
  }

  .sm\:max-h-\[85vh\] {
    max-height: 85vh;
  }

  .sm\:max-h-\[90vh\] {
    max-height: 90vh;
  }

  .sm\:\!w-7 {
    width: 1.75rem !important;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-3 {
    width: 0.75rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

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

  .sm\:w-8 {
    width: 2rem;
  }

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

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

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

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

  .sm\:max-w-lg {
    max-width: 32rem;
  }

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

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

  .sm\:flex-initial {
    flex: 0 1 auto;
  }

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

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

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

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

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

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

  .sm\:flex-col {
    flex-direction: column;
  }

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

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

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

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

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

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

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

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

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

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

  .sm\: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)));
  }

  .sm\: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)));
  }

  .sm\: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)));
  }

  .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\: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));
  }

  .sm\: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));
  }

  .sm\: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));
  }

  .sm\: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));
  }

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

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

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

  .sm\:p-3 {
    padding: 0.75rem;
  }

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

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

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

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

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

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

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

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

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

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

  .sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

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

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

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

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

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

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

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

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

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

  .sm\:pt-2 {
    padding-top: 0.5rem;
  }

  .sm\:pt-3 {
    padding-top: 0.75rem;
  }

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

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

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:opacity-0 {
    opacity: 0;
  }

  .sm\:ring-4 {
    --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(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  .sm\: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));
  }

  .group:hover .sm\:group-hover\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 768px) {

  .md\:-top-4 {
    top: -1rem;
  }

  .md\:bottom-2 {
    bottom: 0.5rem;
  }

  .md\:left-6 {
    left: 1.5rem;
  }

  .md\:right-2 {
    right: 0.5rem;
  }

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

  .md\:top-2 {
    top: 0.5rem;
  }

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

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

  .md\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .md\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .md\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .md\:mb-16 {
    margin-bottom: 4rem;
  }

  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .md\:mb-4 {
    margin-bottom: 1rem;
  }

  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .md\:mb-8 {
    margin-bottom: 2rem;
  }

  .md\:ml-3 {
    margin-left: 0.75rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-1 {
    margin-top: 0.25rem;
  }

  .md\:mt-12 {
    margin-top: 3rem;
  }

  .md\:mt-3 {
    margin-top: 0.75rem;
  }

  .md\:mt-4 {
    margin-top: 1rem;
  }

  .md\:mt-6 {
    margin-top: 1.5rem;
  }

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:\!h-8 {
    height: 2rem !important;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-32 {
    height: 8rem;
  }

  .md\:h-4 {
    height: 1rem;
  }

  .md\:h-48 {
    height: 12rem;
  }

  .md\:h-5 {
    height: 1.25rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-8 {
    height: 2rem;
  }

  .md\:h-80 {
    height: 20rem;
  }

  .md\:h-\[320px\] {
    height: 320px;
  }

  .md\:h-\[450px\] {
    height: 450px;
  }

  .md\:min-h-10 {
    min-height: 2.5rem;
  }

  .md\:min-h-\[2\.5rem\] {
    min-height: 2.5rem;
  }

  .md\:min-h-\[300px\] {
    min-height: 300px;
  }

  .md\:\!w-8 {
    width: 2rem !important;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-12 {
    width: 3rem;
  }

  .md\:w-16 {
    width: 4rem;
  }

  .md\:w-2\/5 {
    width: 40%;
  }

  .md\:w-3\/5 {
    width: 60%;
  }

  .md\:w-4 {
    width: 1rem;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-5 {
    width: 1.25rem;
  }

  .md\:w-6 {
    width: 1.5rem;
  }

  .md\:w-64 {
    width: 16rem;
  }

  .md\:w-8 {
    width: 2rem;
  }

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

  .md\:max-w-2xl {
    max-width: 42rem;
  }

  .md\:max-w-3xl {
    max-width: 48rem;
  }

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

  .md\:max-w-none {
    max-width: none;
  }

  .md\:max-w-xl {
    max-width: 36rem;
  }

  .md\:scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    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-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-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

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

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

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

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

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

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

  .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-3 {
    gap: 0.75rem;
  }

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

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\: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)));
  }

  .md\: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)));
  }

  .md\: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)));
  }

  .md\: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));
  }

  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .md\:rounded-2xl {
    border-radius: 1rem;
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-xl {
    border-radius: 0.75rem;
  }

  .md\:border-4 {
    border-width: 4px;
  }

  .md\:border-l-4 {
    border-left-width: 4px;
  }

  .md\:p-2 {
    padding: 0.5rem;
  }

  .md\:p-3 {
    padding: 0.75rem;
  }

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

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

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

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

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

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

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

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

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

  .md\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .md\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .md\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .md\:pt-6 {
    padding-top: 1.5rem;
  }

  .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-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .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\:leading-relaxed {
    line-height: 1.625;
  }
}

@media (min-width: 1024px) {

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

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-1 {
    height: 0.25rem;
  }

  .lg\:h-20 {
    height: 5rem;
  }

  .lg\:h-4 {
    height: 1rem;
  }

  .lg\:h-5 {
    height: 1.25rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:w-20 {
    width: 5rem;
  }

  .lg\:w-4 {
    width: 1rem;
  }

  .lg\:w-5 {
    width: 1.25rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:max-w-2xl {
    max-width: 42rem;
  }

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

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

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

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

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

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

  .lg\:flex-col {
    flex-direction: column;
  }

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

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

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

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

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

  .lg\:gap-6 {
    gap: 1.5rem;
  }

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

  .lg\: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)));
  }

  .lg\: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)));
  }

  .lg\: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));
  }

  .lg\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .lg\:rounded-2xl {
    border-radius: 1rem;
  }

  .lg\:rounded-xl {
    border-radius: 0.75rem;
  }

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

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

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

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

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

  .lg\:text-right {
    text-align: right;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.\[\&\>p\:first-child\]\:mt-0>p:first-child {
  margin-top: 0px;
}

/**
 * Avatar Frames Styles - Enhanced Edition
 * ~90 frames: 30 free, 30 premium static, 30 premium animated
 * Dark theme compatible with glassmorphism purple/pink/cyan gradients
 */

/* ===== BASE AVATAR FRAME CONTAINER ===== */
.avatar-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  isolation: isolate;
  z-index: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Pseudo-elements for glow effects go behind the frame */
.avatar-frame::before,
.avatar-frame::after {
  z-index: -1;
}

/* Inner container fills available space after frame padding */
.avatar-frame > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Image fills inner container and is always round */
.avatar-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ===== ROLE FRAMES (Forced - Super Premium Look) ===== */

/* Admin - Golden Crown with Rotating Glow */
.frame-role-admin {
  background: conic-gradient(from 0deg, #ffd700, #ffb347, #ff8c00, #ffd700);
  padding: 4px;
  animation: role-rotate 8s linear infinite;
}

.frame-role-admin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 215, 0, 0.8) 0%,
    rgba(255, 179, 71, 0.4) 25%,
    rgba(255, 140, 0, 0.8) 50%,
    rgba(255, 215, 0, 0.4) 75%,
    rgba(255, 215, 0, 0.8) 100%
  );
  filter: blur(8px);
  animation: role-rotate 8s linear infinite reverse;
  z-index: -1;
}

.frame-role-admin::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  animation: role-pulse 2s ease-in-out infinite;
  z-index: -2;
}

/* Manager - Royal Purple with Elegant Glow */
.frame-role-manager {
  background: conic-gradient(from 45deg, #8b5cf6, #a855f7, #d946ef, #8b5cf6);
  padding: 4px;
  animation: role-rotate 10s linear infinite;
}

.frame-role-manager::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    rgba(139, 92, 246, 0.7) 0%,
    rgba(168, 85, 247, 0.3) 50%,
    rgba(217, 70, 239, 0.7) 100%
  );
  filter: blur(6px);
  animation: role-rotate 10s linear infinite reverse;
  z-index: -1;
}

.frame-role-manager::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  animation: role-breathe 3s ease-in-out infinite;
  z-index: -2;
}

/* Moderator - Blue Shield with Subtle Shimmer */
.frame-role-moderator {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%);
  padding: 3px;
  box-shadow:
    0 0 10px rgba(59, 130, 246, 0.5),
    0 0 20px rgba(59, 130, 246, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.frame-role-moderator::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  animation: mod-shimmer 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes role-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes role-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes role-breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes mod-shimmer {
  0%, 100% { transform: rotate(0deg); opacity: 0.5; }
  50% { transform: rotate(180deg); opacity: 1; }
}

/* ===== FREE FRAMES - Simple Colors (10) ===== */

.frame-none { padding: 0; }

.frame-simple-white {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(220, 220, 220, 0.9) 100%);
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.frame-simple-gray {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #9ca3af 100%);
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.frame-simple-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);
}

.frame-simple-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}

.frame-simple-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4);
}

.frame-simple-pink {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4);
}

.frame-simple-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.frame-simple-red {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

.frame-simple-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
}

.frame-simple-yellow {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  padding: 2px;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.4);
}

/* ===== FREE FRAMES - Double (5) ===== */

.frame-double-white {
  background: transparent;
  padding: 6px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}

.frame-double-purple {
  background: transparent;
  padding: 6px;
  border: 2px solid rgba(139, 92, 246, 0.9);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px rgba(139, 92, 246, 0.5);
}

.frame-double-blue {
  background: transparent;
  padding: 6px;
  border: 2px solid rgba(59, 130, 246, 0.9);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px rgba(59, 130, 246, 0.5);
}

.frame-double-pink {
  background: transparent;
  padding: 6px;
  border: 2px solid rgba(236, 72, 153, 0.9);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px rgba(236, 72, 153, 0.5);
}

.frame-double-cyan {
  background: transparent;
  padding: 6px;
  border: 2px solid rgba(6, 182, 212, 0.9);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px rgba(6, 182, 212, 0.5);
}

/* ===== FREE FRAMES - Dotted (5) ===== */

.frame-dotted-purple {
  background: transparent;
  padding: 0;
  border: 3px dotted rgba(139, 92, 246, 0.9);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

.frame-dotted-white {
  background: transparent;
  padding: 0;
  border: 3px dotted rgba(255, 255, 255, 0.9);
}

.frame-dotted-cyan {
  background: transparent;
  padding: 0;
  border: 3px dotted rgba(6, 182, 212, 0.9);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

.frame-dotted-pink {
  background: transparent;
  padding: 0;
  border: 3px dotted rgba(236, 72, 153, 0.9);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
}

.frame-dotted-blue {
  background: transparent;
  padding: 0;
  border: 3px dotted rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

/* ===== FREE FRAMES - Dashed (5) ===== */

.frame-dashed-white {
  background: transparent;
  padding: 0;
  border: 3px dashed rgba(255, 255, 255, 0.9);
}

.frame-dashed-purple {
  background: transparent;
  padding: 0;
  border: 3px dashed rgba(139, 92, 246, 0.9);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.frame-dashed-cyan {
  background: transparent;
  padding: 0;
  border: 3px dashed rgba(6, 182, 212, 0.9);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}

.frame-dashed-pink {
  background: transparent;
  padding: 0;
  border: 3px dashed rgba(236, 72, 153, 0.9);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.2);
}

.frame-dashed-blue {
  background: transparent;
  padding: 0;
  border: 3px dashed rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* ===== FREE FRAMES - Thick (5) ===== */

.frame-thick-white {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(200, 200, 200, 0.9) 100%);
  padding: 4px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.frame-thick-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  padding: 4px;
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.5);
}

.frame-thick-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  padding: 4px;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.5);
}

.frame-thick-pink {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  padding: 4px;
  box-shadow: 0 3px 12px rgba(236, 72, 153, 0.5);
}

.frame-thick-gray {
  background: linear-gradient(135deg, #6b7280 0%, #374151 100%);
  padding: 4px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* ===== PREMIUM STATIC - Glow (8) ===== */

.frame-glow-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(139, 92, 246, 0.8),
    0 0 15px rgba(139, 92, 246, 0.6),
    0 0 30px rgba(139, 92, 246, 0.4),
    0 0 45px rgba(139, 92, 246, 0.2);
}

.frame-glow-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(6, 182, 212, 0.9),
    0 0 15px rgba(6, 182, 212, 0.7),
    0 0 30px rgba(6, 182, 212, 0.5),
    0 0 50px rgba(6, 182, 212, 0.3);
}

.frame-glow-pink {
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(236, 72, 153, 0.8),
    0 0 15px rgba(244, 114, 182, 0.6),
    0 0 30px rgba(236, 72, 153, 0.4),
    0 0 45px rgba(244, 114, 182, 0.2);
}

.frame-glow-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(251, 191, 36, 0.9),
    0 0 15px rgba(245, 158, 11, 0.7),
    0 0 30px rgba(251, 191, 36, 0.5),
    0 0 50px rgba(251, 191, 36, 0.3);
}

.frame-glow-green {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(16, 185, 129, 0.8),
    0 0 15px rgba(52, 211, 153, 0.6),
    0 0 30px rgba(16, 185, 129, 0.4),
    0 0 45px rgba(52, 211, 153, 0.2);
}

.frame-glow-red {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(239, 68, 68, 0.8),
    0 0 15px rgba(248, 113, 113, 0.6),
    0 0 30px rgba(239, 68, 68, 0.4),
    0 0 45px rgba(248, 113, 113, 0.2);
}

.frame-glow-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(59, 130, 246, 0.8),
    0 0 15px rgba(96, 165, 250, 0.6),
    0 0 30px rgba(59, 130, 246, 0.4),
    0 0 45px rgba(96, 165, 250, 0.2);
}

.frame-glow-white {
  background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
  padding: 3px;
  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 15px rgba(255, 255, 255, 0.7),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 50px rgba(255, 255, 255, 0.2);
}

/* ===== PREMIUM STATIC - Gradients (10) ===== */

.frame-gradient-sunset {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #f43f5e 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4), 0 0 20px rgba(236, 72, 153, 0.3);
}

.frame-gradient-ocean {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.4), 0 0 20px rgba(6, 182, 212, 0.3);
}

.frame-gradient-galaxy {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 30%, #3b82f6 60%, #06b6d4 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(76, 29, 149, 0.5), 0 0 30px rgba(124, 58, 237, 0.3);
}

.frame-gradient-forest {
  background: linear-gradient(135deg, #065f46 0%, #10b981 50%, #34d399 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), 0 0 20px rgba(6, 95, 70, 0.3);
}

.frame-gradient-candy {
  background: linear-gradient(135deg, #f472b6 0%, #c084fc 50%, #a78bfa 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(192, 132, 252, 0.3);
}

.frame-gradient-fire {
  background: linear-gradient(135deg, #dc2626 0%, #f97316 50%, #fbbf24 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.4), 0 0 20px rgba(249, 115, 22, 0.3);
}

.frame-gradient-ice {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 50%, #60a5fa 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.4), 0 0 20px rgba(191, 219, 254, 0.3);
}

.frame-gradient-midnight {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(49, 46, 129, 0.5), 0 0 20px rgba(76, 29, 149, 0.3);
}

.frame-gradient-tropical {
  background: linear-gradient(135deg, #14b8a6 0%, #22d3ee 50%, #a3e635 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(20, 184, 166, 0.4), 0 0 20px rgba(34, 211, 238, 0.3);
}

.frame-gradient-lavender {
  background: linear-gradient(135deg, #c4b5fd 0%, #ddd6fe 50%, #f5d0fe 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(196, 181, 253, 0.4), 0 0 20px rgba(245, 208, 254, 0.3);
}

/* ===== PREMIUM STATIC - Glass/Metallic (6) ===== */

.frame-glass-frost {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 3px;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.2);
}

.frame-glass-dark {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 3px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.frame-glass-purple {
  background: rgba(139, 92, 246, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(139, 92, 246, 0.4);
  padding: 3px;
  box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.1), 0 4px 15px rgba(139, 92, 246, 0.2);
}

.frame-metallic-silver {
  background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 25%, #d1d5db 50%, #9ca3af 75%, #e5e7eb 100%);
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.frame-metallic-gold {
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 25%, #f59e0b 50%, #fbbf24 75%, #fef3c7 100%);
  padding: 3px;
  box-shadow: 0 2px 10px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.frame-metallic-bronze {
  background: linear-gradient(135deg, #d97706 0%, #b45309 25%, #92400e 50%, #b45309 75%, #d97706 100%);
  padding: 3px;
  box-shadow: 0 2px 10px rgba(180, 83, 9, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== PREMIUM STATIC - Neon (6) ===== */

.frame-neon-blue {
  background: transparent;
  border: 3px solid #00d4ff;
  padding: 2px;
  box-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px rgba(0, 212, 255, 0.5), inset 0 0 10px rgba(0, 212, 255, 0.3);
}

.frame-neon-pink {
  background: transparent;
  border: 3px solid #ff00ff;
  padding: 2px;
  box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px rgba(255, 0, 255, 0.5), inset 0 0 10px rgba(255, 0, 255, 0.3);
}

.frame-neon-green {
  background: transparent;
  border: 3px solid #00ff00;
  padding: 2px;
  box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
}

.frame-neon-purple {
  background: transparent;
  border: 3px solid #bf00ff;
  padding: 2px;
  box-shadow: 0 0 5px #bf00ff, 0 0 10px #bf00ff, 0 0 20px #bf00ff, 0 0 40px rgba(191, 0, 255, 0.5), inset 0 0 10px rgba(191, 0, 255, 0.3);
}

.frame-neon-orange {
  background: transparent;
  border: 3px solid #ff6600;
  padding: 2px;
  box-shadow: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 40px rgba(255, 102, 0, 0.5), inset 0 0 10px rgba(255, 102, 0, 0.3);
}

.frame-neon-red {
  background: transparent;
  border: 3px solid #ff0033;
  padding: 2px;
  box-shadow: 0 0 5px #ff0033, 0 0 10px #ff0033, 0 0 20px #ff0033, 0 0 40px rgba(255, 0, 51, 0.5), inset 0 0 10px rgba(255, 0, 51, 0.3);
}

/* ===== PREMIUM ANIMATED - Pulse (6) ===== */

.frame-pulse-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  padding: 3px;
  animation: pulse-glow-purple 2s ease-in-out infinite;
}

.frame-pulse-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  padding: 3px;
  animation: pulse-glow-cyan 2s ease-in-out infinite;
}

.frame-pulse-pink {
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  padding: 3px;
  animation: pulse-glow-pink 2s ease-in-out infinite;
}

.frame-pulse-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  padding: 3px;
  animation: pulse-glow-gold 2s ease-in-out infinite;
}

.frame-pulse-green {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  padding: 3px;
  animation: pulse-glow-green 2s ease-in-out infinite;
}

.frame-pulse-red {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  padding: 3px;
  animation: pulse-glow-red 2s ease-in-out infinite;
}

@keyframes pulse-glow-purple {
  0%, 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 15px rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 0 10px rgba(139, 92, 246, 1), 0 0 25px rgba(139, 92, 246, 0.8), 0 0 50px rgba(139, 92, 246, 0.5), 0 0 80px rgba(139, 92, 246, 0.3); }
}

@keyframes pulse-glow-cyan {
  0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.5), 0 0 15px rgba(6, 182, 212, 0.3); }
  50% { box-shadow: 0 0 10px rgba(6, 182, 212, 1), 0 0 25px rgba(6, 182, 212, 0.8), 0 0 50px rgba(6, 182, 212, 0.5), 0 0 80px rgba(6, 182, 212, 0.3); }
}

@keyframes pulse-glow-pink {
  0%, 100% { box-shadow: 0 0 5px rgba(236, 72, 153, 0.5), 0 0 15px rgba(236, 72, 153, 0.3); }
  50% { box-shadow: 0 0 10px rgba(236, 72, 153, 1), 0 0 25px rgba(236, 72, 153, 0.8), 0 0 50px rgba(236, 72, 153, 0.5), 0 0 80px rgba(236, 72, 153, 0.3); }
}

@keyframes pulse-glow-gold {
  0%, 100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.5), 0 0 15px rgba(251, 191, 36, 0.3); }
  50% { box-shadow: 0 0 10px rgba(251, 191, 36, 1), 0 0 25px rgba(251, 191, 36, 0.8), 0 0 50px rgba(251, 191, 36, 0.5), 0 0 80px rgba(251, 191, 36, 0.3); }
}

@keyframes pulse-glow-green {
  0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.5), 0 0 15px rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 10px rgba(16, 185, 129, 1), 0 0 25px rgba(16, 185, 129, 0.8), 0 0 50px rgba(16, 185, 129, 0.5), 0 0 80px rgba(16, 185, 129, 0.3); }
}

@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 10px rgba(239, 68, 68, 1), 0 0 25px rgba(239, 68, 68, 0.8), 0 0 50px rgba(239, 68, 68, 0.5), 0 0 80px rgba(239, 68, 68, 0.3); }
}

/* ===== PREMIUM ANIMATED - Rainbow/Spin (4) ===== */

.frame-pulse-rainbow {
  padding: 4px;
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #40e0d0, #8b5cf6, #ff0080);
  animation: spin-anim 4s linear infinite;
}

.frame-pulse-rainbow::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(255, 0, 128, 0.5), rgba(255, 140, 0, 0.5), rgba(64, 224, 208, 0.5), rgba(139, 92, 246, 0.5), rgba(255, 0, 128, 0.5));
  filter: blur(8px);
  animation: spin-anim 4s linear infinite reverse;
  z-index: -1;
}

.frame-spin-rainbow {
  padding: 4px;
  background: conic-gradient(from 0deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
  animation: spin-anim 3s linear infinite;
}

.frame-spin-rainbow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(239, 68, 68, 0.4), rgba(249, 115, 22, 0.4), rgba(234, 179, 8, 0.4), rgba(34, 197, 94, 0.4), rgba(6, 182, 212, 0.4), rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4), rgba(239, 68, 68, 0.4));
  filter: blur(10px);
  animation: spin-anim 3s linear infinite reverse;
  z-index: -1;
}

.frame-spin-gradient {
  padding: 4px;
  background: conic-gradient(from 0deg, #8b5cf6, #ec4899, #06b6d4, #10b981, #fbbf24, #8b5cf6);
  animation: spin-anim 4s linear infinite;
}

.frame-spin-gradient::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4), rgba(6, 182, 212, 0.4), rgba(16, 185, 129, 0.4), rgba(251, 191, 36, 0.4), rgba(139, 92, 246, 0.4));
  filter: blur(6px);
  animation: spin-anim 4s linear infinite reverse;
  z-index: -1;
}

.frame-spin-dual {
  padding: 4px;
  background: conic-gradient(from 0deg, #8b5cf6 0deg, #8b5cf6 180deg, #06b6d4 180deg, #06b6d4 360deg);
  animation: spin-anim 3s linear infinite;
}

.frame-spin-dual::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(139, 92, 246, 0.5), rgba(6, 182, 212, 0.5));
  filter: blur(8px);
  animation: spin-anim 3s linear infinite reverse;
  z-index: -1;
}

@keyframes spin-anim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Counter-rotation for spin frames */
.frame-spin-rainbow > .avatar-inner,
.frame-spin-gradient > .avatar-inner,
.frame-spin-dual > .avatar-inner,
.frame-pulse-rainbow > .avatar-inner {
  animation: spin-counter-anim 4s linear infinite;
}

@keyframes spin-counter-anim {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* ===== PREMIUM ANIMATED - Breathe (4) ===== */

.frame-breathe-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  padding: 3px;
  animation: breathe-anim 3s ease-in-out infinite;
}

.frame-breathe-gold::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
  animation: breathe-glow 3s ease-in-out infinite;
  z-index: -1;
}

.frame-breathe-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #7c3aed 100%);
  padding: 3px;
  animation: breathe-anim 3s ease-in-out infinite;
}

.frame-breathe-purple::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  animation: breathe-glow 3s ease-in-out infinite;
  z-index: -1;
}

.frame-breathe-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #0891b2 100%);
  padding: 3px;
  animation: breathe-anim 3s ease-in-out infinite;
}

.frame-breathe-cyan::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%);
  animation: breathe-glow 3s ease-in-out infinite;
  z-index: -1;
}

.frame-breathe-pink {
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #db2777 100%);
  padding: 3px;
  animation: breathe-anim 3s ease-in-out infinite;
}

.frame-breathe-pink::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
  animation: breathe-glow 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes breathe-anim {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px currentColor; }
  50% { transform: scale(1.02); box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
}

@keyframes breathe-glow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* ===== PREMIUM ANIMATED - Shimmer (4) ===== */

.frame-shimmer-diamond {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(200, 200, 220, 0.9) 50%, rgba(255, 255, 255, 0.95) 100%);
  padding: 3px;
}

.frame-shimmer-diamond::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.8) 10deg, transparent 20deg, transparent 90deg, rgba(255, 255, 255, 0.6) 100deg, transparent 110deg, transparent 180deg, rgba(255, 255, 255, 0.9) 190deg, transparent 200deg, transparent 270deg, rgba(255, 255, 255, 0.5) 280deg, transparent 290deg);
  animation: shimmer-spin 3s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.frame-shimmer-gold {
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 50%, #fef3c7 100%);
  padding: 3px;
}

.frame-shimmer-gold::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.9) 15deg, transparent 30deg, transparent 120deg, rgba(255, 255, 255, 0.7) 135deg, transparent 150deg, transparent 240deg, rgba(255, 255, 255, 0.8) 255deg, transparent 270deg);
  animation: shimmer-spin 2.5s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.frame-shimmer-silver {
  background: linear-gradient(135deg, #f3f4f6 0%, #9ca3af 50%, #f3f4f6 100%);
  padding: 3px;
}

.frame-shimmer-silver::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.9) 15deg, transparent 30deg, transparent 120deg, rgba(255, 255, 255, 0.7) 135deg, transparent 150deg, transparent 240deg, rgba(255, 255, 255, 0.8) 255deg, transparent 270deg);
  animation: shimmer-spin 2.5s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.frame-shimmer-crystal {
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.8) 0%, rgba(196, 181, 253, 0.8) 50%, rgba(244, 114, 182, 0.8) 100%);
  padding: 3px;
}

.frame-shimmer-crystal::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.9) 10deg, transparent 20deg, transparent 60deg, rgba(255, 255, 255, 0.7) 70deg, transparent 80deg, transparent 120deg, rgba(255, 255, 255, 0.8) 130deg, transparent 140deg, transparent 180deg, rgba(255, 255, 255, 0.9) 190deg, transparent 200deg, transparent 240deg, rgba(255, 255, 255, 0.6) 250deg, transparent 260deg, transparent 300deg, rgba(255, 255, 255, 0.7) 310deg, transparent 320deg);
  animation: shimmer-spin 4s linear infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes shimmer-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== PREMIUM ANIMATED - Special Effects (8) ===== */

/* Aurora */
.frame-aurora {
  padding: 4px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.9) 0%, rgba(139, 92, 246, 0.9) 25%, rgba(236, 72, 153, 0.9) 50%, rgba(16, 185, 129, 0.9) 75%, rgba(6, 182, 212, 0.9) 100%);
  background-size: 300% 300%;
  animation: aurora-flow 6s ease infinite;
}

.frame-aurora::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(139, 92, 246, 0.5) 25%, rgba(236, 72, 153, 0.5) 50%, rgba(16, 185, 129, 0.5) 75%, rgba(6, 182, 212, 0.5) 100%);
  background-size: 300% 300%;
  filter: blur(8px);
  animation: aurora-flow 6s ease infinite;
  animation-delay: -3s;
  z-index: -1;
}

@keyframes aurora-flow {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
}

/* Static aurora borealis */
.frame-aurora-borealis-static {
  padding: 4px;
  background:
    linear-gradient(135deg, rgba(6, 182, 212, 0.8) 0%, rgba(139, 92, 246, 0.8) 25%, rgba(236, 72, 153, 0.8) 50%, rgba(16, 185, 129, 0.8) 75%, rgba(6, 182, 212, 0.8) 100%);
  background-size: 300% 300%;
  animation: aurora-static-glow 6s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.6);
  position: relative;
}

.frame-aurora-borealis-static::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid rgba(6, 182, 212, 0.8);
  box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.4);
}

@keyframes aurora-static-glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Static thunder storm */
.frame-thunder-storm-static {
  padding: 4px;
  background: radial-gradient(circle, #1a1a2e 0%, #000 100%);
  position: relative;
  animation: thunder-static-flash 0.3s infinite;
}

.frame-thunder-storm-static::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 100, 0.7);
  box-shadow:
    0 0 20px rgba(255, 255, 100, 0.8),
    inset 0 0 20px rgba(255, 255, 100, 0.3);
  z-index: -1;
}

.frame-thunder-storm-static::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 100, 0.5);
  animation: static-lightning 2s ease-in-out infinite;
  z-index: -2;
}

@keyframes thunder-static-flash {
 0%, 80%, 100% { opacity: 1; }
85%, 95% { opacity: 0.7; }
}

@keyframes static-lightning {
  0%, 90%, 100% { opacity: 0.3; }
  92%, 94% { opacity: 1; }
}

/* Static black hole */
.frame-black-hole {
  padding: 4px;
  background: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%, transparent 41%);
  position: relative;
}

.frame-black-hole::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(100, 50, 150, 0.8);
  box-shadow:
    0 0 30px rgba(100, 50, 150, 0.9),
    inset 0 0 30px rgba(100, 50, 150, 0.3);
  z-index: -1;
}

/* Flames */
.frame-flames {
  padding: 4px;
  background: linear-gradient(to top, #ff4500 0%, #ff6347 30%, #ffa500 60%, #ffcc00 100%);
  animation: flames-flicker 0.15s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.8), 0 0 25px rgba(255, 99, 71, 0.6), 0 0 40px rgba(255, 165, 0, 0.4);
}

.frame-flames::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 69, 0, 0.4) 0%, rgba(255, 165, 0, 0.2) 50%, transparent 70%);
  animation: flames-outer 0.3s ease-in-out infinite alternate;
  z-index: -1;
}

.frame-flames-blue {
  padding: 4px;
  background: linear-gradient(to top, #1e3a8a 0%, #3b82f6 30%, #60a5fa 60%, #93c5fd 100%);
  animation: flames-flicker 0.15s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 25px rgba(96, 165, 250, 0.6), 0 0 40px rgba(147, 197, 253, 0.4);
}

.frame-flames-blue::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(96, 165, 250, 0.2) 50%, transparent 70%);
  animation: flames-outer 0.3s ease-in-out infinite alternate;
  z-index: -1;
}

.frame-flames-purple {
  padding: 4px;
  background: linear-gradient(to top, #4c1d95 0%, #7c3aed 30%, #a78bfa 60%, #c4b5fd 100%);
  animation: flames-flicker 0.15s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.8), 0 0 25px rgba(167, 139, 250, 0.6), 0 0 40px rgba(196, 181, 253, 0.4);
}

.frame-flames-purple::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, rgba(167, 139, 250, 0.2) 50%, transparent 70%);
  animation: flames-outer 0.3s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes flames-flicker {
  0% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; filter: brightness(1); }
  100% { box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor; filter: brightness(1.1); }
}

@keyframes flames-outer {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 1; }
}

/* Electric */
.frame-electric {
  background: transparent;
  border: 3px solid #00d4ff;
  padding: 2px;
  animation: electric-spark 0.1s ease-in-out infinite;
}

.frame-electric::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
  animation: electric-pulse 0.5s ease-in-out infinite;
  z-index: -1;
}

.frame-electric::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(0, 212, 255, 0.8) 5deg, transparent 10deg, transparent 60deg, rgba(0, 212, 255, 0.6) 65deg, transparent 70deg, transparent 120deg, rgba(0, 212, 255, 0.9) 125deg, transparent 130deg, transparent 180deg, rgba(0, 212, 255, 0.7) 185deg, transparent 190deg, transparent 240deg, rgba(0, 212, 255, 0.5) 245deg, transparent 250deg, transparent 300deg, rgba(0, 212, 255, 0.8) 305deg, transparent 310deg);
  animation: electric-rotate 0.3s linear infinite;
  z-index: -1;
}

.frame-electric-purple {
  background: transparent;
  border: 3px solid #a855f7;
  padding: 2px;
  animation: electric-spark-purple 0.1s ease-in-out infinite;
}

.frame-electric-purple::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
  animation: electric-pulse 0.5s ease-in-out infinite;
  z-index: -1;
}

.frame-electric-purple::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(168, 85, 247, 0.8) 5deg, transparent 10deg, transparent 60deg, rgba(168, 85, 247, 0.6) 65deg, transparent 70deg, transparent 120deg, rgba(168, 85, 247, 0.9) 125deg, transparent 130deg, transparent 180deg, rgba(168, 85, 247, 0.7) 185deg, transparent 190deg, transparent 240deg, rgba(168, 85, 247, 0.5) 245deg, transparent 250deg, transparent 300deg, rgba(168, 85, 247, 0.8) 305deg, transparent 310deg);
  animation: electric-rotate 0.3s linear infinite;
  z-index: -1;
}

@keyframes electric-spark {
  0%, 100% { box-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff; }
  25% { box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 35px rgba(0, 212, 255, 0.6); }
  50% { box-shadow: 0 0 5px #00d4ff, 0 0 8px #00d4ff; }
  75% { box-shadow: 0 0 15px #00d4ff, 0 0 30px #00d4ff, 0 0 50px rgba(0, 212, 255, 0.7); }
}

@keyframes electric-spark-purple {
  0%, 100% { box-shadow: 0 0 5px #a855f7, 0 0 10px #a855f7; }
  25% { box-shadow: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 35px rgba(168, 85, 247, 0.6); }
  50% { box-shadow: 0 0 5px #a855f7, 0 0 8px #a855f7; }
  75% { box-shadow: 0 0 15px #a855f7, 0 0 30px #a855f7, 0 0 50px rgba(168, 85, 247, 0.7); }
}

@keyframes electric-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes electric-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Sakura */
.frame-sakura {
  background: linear-gradient(135deg, #ffc0cb 0%, #ffb6c1 50%, #ff69b4 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(255, 182, 193, 0.6), 0 0 30px rgba(255, 105, 180, 0.4);
  animation: sakura-glow 3s ease-in-out infinite;
}

.frame-sakura::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 182, 193, 0.4) 0%, transparent 70%);
  animation: sakura-pulse 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes sakura-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 182, 193, 0.5), 0 0 20px rgba(255, 105, 180, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 182, 193, 0.8), 0 0 40px rgba(255, 105, 180, 0.5), 0 0 60px rgba(255, 192, 203, 0.3); }
}

@keyframes sakura-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Snow */
.frame-snow {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(186, 230, 253, 0.6), 0 0 30px rgba(125, 211, 252, 0.4);
  animation: snow-glow 3s ease-in-out infinite;
}

.frame-snow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 242, 254, 0.4) 0%, transparent 70%);
  animation: snow-pulse 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes snow-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(186, 230, 253, 0.5), 0 0 20px rgba(125, 211, 252, 0.3); }
  50% { box-shadow: 0 0 20px rgba(186, 230, 253, 0.8), 0 0 40px rgba(125, 211, 252, 0.5), 0 0 60px rgba(224, 242, 254, 0.3); }
}

@keyframes snow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ===== PREMIUM ANIMATED - Neon Animated (4) ===== */

.frame-neon-pulse-blue {
  background: transparent;
  border: 3px solid #00d4ff;
  padding: 2px;
  animation: neon-pulse-blue 1.5s ease-in-out infinite;
}

@keyframes neon-pulse-blue {
  0%, 100% { box-shadow: 0 0 5px #00d4ff, 0 0 10px #00d4ff, 0 0 20px rgba(0, 212, 255, 0.5); }
  50% { box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff, 0 0 60px rgba(0, 212, 255, 0.5); }
}

.frame-neon-pulse-pink {
  background: transparent;
  border: 3px solid #ff00ff;
  padding: 2px;
  animation: neon-pulse-pink 1.5s ease-in-out infinite;
}

@keyframes neon-pulse-pink {
  0%, 100% { box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px rgba(255, 0, 255, 0.5); }
  50% { box-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.5); }
}

.frame-neon-pulse-green {
  background: transparent;
  border: 3px solid #00ff00;
  padding: 2px;
  animation: neon-pulse-green 1.5s ease-in-out infinite;
}

@keyframes neon-pulse-green {
  0%, 100% { box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 20px rgba(0, 255, 0, 0.5); }
  50% { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 60px rgba(0, 255, 0, 0.5); }
}

.frame-neon-flicker {
  background: transparent;
  border: 3px solid #ff00ff;
  padding: 2px;
  animation: neon-flicker 0.1s ease-in-out infinite;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px rgba(255, 0, 255, 0.5);
    opacity: 1;
  }
  20%, 24%, 55% {
    box-shadow: none;
    opacity: 0.8;
  }
}

/* ===== NEW FREE FRAMES (10) ===== */

.frame-outline-thin-white {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 0;
}

.frame-outline-thin-purple {
  background: transparent;
  border: 1px solid rgba(139, 92, 246, 0.8);
  padding: 0;
}

.frame-outline-thin-cyan {
  background: transparent;
  border: 1px solid rgba(6, 182, 212, 0.8);
  padding: 0;
}

.frame-shadow-soft {
  background: transparent;
  padding: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.frame-shadow-dark {
  background: transparent;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 3px 10px rgba(0, 0, 0, 0.4);
}

.frame-ring-white {
  background: transparent;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.frame-ring-purple {
  background: transparent;
  padding: 4px;
  border: 2px solid rgba(139, 92, 246, 0.6);
}

.frame-minimal-gray {
  background: rgba(107, 114, 128, 0.3);
  padding: 1px;
}

.frame-minimal-dark {
  background: rgba(0, 0, 0, 0.5);
  padding: 1px;
}

.frame-subtle-glow {
  background: transparent;
  padding: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
}

/* ===== NEW PREMIUM STATIC FRAMES (10) ===== */

.frame-royal-purple {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 30%, #a855f7 50%, #7c3aed 70%, #4c1d95 100%);
  padding: 4px;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6), 0 0 30px rgba(76, 29, 149, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.frame-royal-gold {
  background: linear-gradient(135deg, #92400e 0%, #d97706 20%, #fbbf24 40%, #fef3c7 50%, #fbbf24 60%, #d97706 80%, #92400e 100%);
  padding: 4px;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.frame-chrome {
  background: linear-gradient(135deg, #e5e7eb 0%, #f9fafb 20%, #9ca3af 40%, #f9fafb 50%, #9ca3af 60%, #f9fafb 80%, #e5e7eb 100%);
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.frame-holographic {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 20%, #06b6d4 40%, #10b981 60%, #eab308 80%, #ec4899 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4), 0 0 25px rgba(6, 182, 212, 0.3);
}

.frame-obsidian {
  background: linear-gradient(135deg, #0f0f0f 0%, #1f1f1f 30%, #3f3f3f 50%, #1f1f1f 70%, #0f0f0f 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.frame-emerald {
  background: linear-gradient(135deg, #064e3b 0%, #059669 25%, #34d399 50%, #059669 75%, #064e3b 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5), 0 0 25px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.frame-ruby {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 25%, #f87171 50%, #dc2626 75%, #7f1d1d 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.5), 0 0 25px rgba(127, 29, 29, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.frame-sapphire {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 25%, #60a5fa 50%, #2563eb 75%, #1e3a8a 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.5), 0 0 25px rgba(30, 58, 138, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.frame-platinum {
  background: linear-gradient(135deg, #d1d5db 0%, #f3f4f6 20%, #e5e7eb 35%, #ffffff 50%, #e5e7eb 65%, #f3f4f6 80%, #d1d5db 100%);
  padding: 3px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.frame-cosmic {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 25%, #2d2d5a 50%, #1a1a3e 75%, #0f0f23 100%);
  padding: 3px;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
}

.frame-cosmic::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 2%),
              radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 1.5%),
              radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.7) 0%, transparent 1%),
              radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 1.5%),
              radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.4) 0%, transparent 1%);
  pointer-events: none;
  z-index: 2;
}

/* ===== NEW PREMIUM ANIMATED FRAMES (10) ===== */

/* Orbit */
.frame-orbit {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  padding: 3px;
}

.frame-orbit::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(139, 92, 246, 0.8);
  border-right-color: rgba(6, 182, 212, 0.6);
  animation: orbit-spin 2s linear infinite;
  z-index: -1;
}

.frame-orbit::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: rgba(236, 72, 153, 0.6);
  border-left-color: rgba(251, 191, 36, 0.4);
  animation: orbit-spin 3s linear infinite reverse;
  z-index: -1;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Wave Cyan */
.frame-wave-cyan {
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 50%, #22d3ee 100%);
  padding: 3px;
  animation: wave-flow 3s ease-in-out infinite;
}

@keyframes wave-flow {
  0%, 100% { box-shadow: 0 0 10px rgba(6, 182, 212, 0.5), 0 0 20px rgba(6, 182, 212, 0.3); }
  50% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.8), 0 0 40px rgba(6, 182, 212, 0.5), 0 0 60px rgba(6, 182, 212, 0.3); }
}

/* Wave Purple */
.frame-wave-purple {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
  padding: 3px;
  animation: wave-flow-purple 3s ease-in-out infinite;
}

@keyframes wave-flow-purple {
  0%, 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.5), 0 0 60px rgba(139, 92, 246, 0.3); }
}

/* Glitch */
.frame-glitch {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);
  padding: 3px;
  animation: glitch-effect 0.5s ease-in-out infinite;
}

@keyframes glitch-effect {
  0%, 100% { transform: translate(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-1px, 1px); filter: hue-rotate(20deg); }
  40% { transform: translate(1px, -1px); filter: hue-rotate(-20deg); }
  60% { transform: translate(-1px, -1px); filter: hue-rotate(10deg); }
  80% { transform: translate(1px, 1px); filter: hue-rotate(-10deg); }
}

/* Matrix */
.frame-matrix {
  background: linear-gradient(180deg, #0f0f0f 0%, #003300 50%, #00ff00 100%);
  padding: 3px;
  animation: matrix-glow 1s ease-in-out infinite;
}

@keyframes matrix-glow {
  0%, 100% { box-shadow: 0 0 5px #00ff00, 0 0 10px rgba(0, 255, 0, 0.5); }
  50% { box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px rgba(0, 255, 0, 0.5); }
}

/* Heartbeat */
.frame-heartbeat {
  background: linear-gradient(135deg, #be123c 0%, #f43f5e 50%, #fb7185 100%);
  padding: 3px;
  animation: heartbeat 1.2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(244, 63, 94, 0.5); }
  14% { transform: scale(1.05); box-shadow: 0 0 20px rgba(244, 63, 94, 0.8); }
  28% { transform: scale(1); }
  42% { transform: scale(1.03); box-shadow: 0 0 15px rgba(244, 63, 94, 0.6); }
  56% { transform: scale(1); }
}

/* Rainbow Wave */
.frame-rainbow-wave {
  padding: 4px;
  background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899);
  background-size: 200% 100%;
  animation: rainbow-wave-flow 3s linear infinite;
}

@keyframes rainbow-wave-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Plasma */
.frame-plasma {
  padding: 4px;
  background: linear-gradient(45deg, #8b5cf6, #ec4899, #06b6d4, #10b981);
  background-size: 400% 400%;
  animation: plasma-flow 4s ease infinite;
}

.frame-plasma::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4), rgba(6, 182, 212, 0.4), rgba(16, 185, 129, 0.4));
  background-size: 400% 400%;
  filter: blur(8px);
  animation: plasma-flow 4s ease infinite reverse;
  z-index: -1;
}

@keyframes plasma-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Starfield */
.frame-starfield {
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 100%);
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.frame-starfield::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 1) 0%, transparent 3%),
              radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.9) 0%, transparent 2%),
              radial-gradient(circle at 35% 75%, rgba(255, 255, 255, 0.95) 0%, transparent 2.5%),
              radial-gradient(circle at 75% 55%, rgba(255, 255, 255, 0.85) 0%, transparent 3%),
              radial-gradient(circle at 5% 85%, rgba(255, 255, 255, 0.8) 0%, transparent 2%),
              radial-gradient(circle at 55% 35%, rgba(255, 255, 255, 0.9) 0%, transparent 2.5%),
              radial-gradient(circle at 45% 15%, rgba(200, 220, 255, 0.7) 0%, transparent 4%),
              radial-gradient(circle at 65% 85%, rgba(200, 220, 255, 0.6) 0%, transparent 3%);
  animation: starfield-twinkle 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.frame-starfield::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.1) 90deg, transparent 180deg, rgba(200, 220, 255, 0.1) 270deg, transparent 360deg);
  animation: starfield-rotate 10s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes starfield-twinkle {
  0%, 100% { opacity: 0.4; }
  25% { opacity: 0.8; }
  50% { opacity: 0.5; }
  75% { opacity: 1; }
}

@keyframes starfield-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Portal */
.frame-portal {
  padding: 4px;
  background: conic-gradient(from 0deg, #8b5cf6, #3b82f6, #06b6d4, #10b981, #8b5cf6);
  animation: portal-spin 2s linear infinite;
}

.frame-portal::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(139, 92, 246, 0.5), rgba(59, 130, 246, 0.5), rgba(6, 182, 212, 0.5), rgba(16, 185, 129, 0.5), rgba(139, 92, 246, 0.5));
  filter: blur(10px);
  animation: portal-spin 2s linear infinite reverse;
  z-index: -1;
}

.frame-portal::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
  animation: portal-pulse 1s ease-in-out infinite;
  z-index: -2;
}

@keyframes portal-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes portal-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ===== SIZE VARIANTS ===== */
/* Image fills 100% of the inner container - frame padding creates the border */

.avatar-frame.size-xs { width: 28px; height: 28px; }
.avatar-frame.size-sm { width: 36px; height: 36px; }
.avatar-frame.size-md { width: 48px; height: 48px; }
.avatar-frame.size-lg { width: 56px; height: 56px; }
.avatar-frame.size-xl { width: 80px; height: 80px; }
.avatar-frame.size-2xl { width: 120px; height: 120px; }
.avatar-frame.size-profile { width: 150px; height: 150px; }

/* ===== PROPORTIONAL PADDING FOR SMALL SIZES ===== */
/* Reduce frame thickness on small avatars to match visual proportions of larger sizes */
/* Target: ~97% avatar ratio like profile size */

/* xs (24px) - ultra thin */
.avatar-frame.size-xs[class*="frame-simple-"],
.avatar-frame.size-xs[class*="frame-thick-"],
.avatar-frame.size-xs[class*="frame-glow-"],
.avatar-frame.size-xs[class*="frame-gradient-"],
.avatar-frame.size-xs[class*="frame-glass-"],
.avatar-frame.size-xs[class*="frame-metallic-"],
.avatar-frame.size-xs[class*="frame-pulse-"],
.avatar-frame.size-xs[class*="frame-breathe-"],
.avatar-frame.size-xs[class*="frame-shimmer-"],
.avatar-frame.size-xs[class*="frame-aurora"],
.avatar-frame.size-xs[class*="frame-flames"],
.avatar-frame.size-xs[class*="frame-sakura"],
.avatar-frame.size-xs[class*="frame-snow"],
.avatar-frame.size-xs[class*="frame-spin-"],
.avatar-frame.size-xs[class*="frame-zigzag-"],
.avatar-frame.size-xs[class*="frame-crosshair"],
.avatar-frame.size-xs[class*="frame-brackets"],
.avatar-frame.size-xs[class*="frame-barcode-"],
.avatar-frame.size-xs[class*="frame-scanlines"],
.avatar-frame.size-xs[class*="frame-pixel-"],
.avatar-frame.size-xs[class*="frame-tech-"],
.avatar-frame.size-xs[class*="frame-circuit-"],
.avatar-frame.size-xs[class*="frame-hex-"],
.avatar-frame.size-xs[class*="frame-woven"],
.avatar-frame.size-xs[class*="frame-chevron"],
.avatar-frame.size-xs[class*="frame-dragon-"],
.avatar-frame.size-xs[class*="frame-phoenix-"],
.avatar-frame.size-xs[class*="frame-celestial"],
.avatar-frame.size-xs[class*="frame-abyss"],
.avatar-frame.size-xs[class*="frame-inferno"],
.avatar-frame.size-xs[class*="frame-crystalline"],
.avatar-frame.size-xs[class*="frame-lunar"],
.avatar-frame.size-xs[class*="frame-solar"],
.avatar-frame.size-xs[class*="frame-void"],
.avatar-frame.size-xs[class*="frame-ethereal"],
.avatar-frame.size-xs[class*="frame-titan"],
.avatar-frame.size-xs[class*="frame-atlantis"],
.avatar-frame.size-xs[class*="frame-vortex"],
.avatar-frame.size-xs[class*="frame-ripple"],
.avatar-frame.size-xs[class*="frame-spark-"],
.avatar-frame.size-xs[class*="frame-energy-"],
.avatar-frame.size-xs[class*="frame-data-"],
.avatar-frame.size-xs[class*="frame-ember-"],
.avatar-frame.size-xs[class*="frame-frost-"],
.avatar-frame.size-xs[class*="frame-lightning-"],
.avatar-frame.size-xs[class*="frame-gravity-"],
.avatar-frame.size-xs[class*="frame-quantum-"],
.avatar-frame.size-xs[class*="frame-prism-"],
.avatar-frame.size-xs[class*="frame-nebula-"],
.avatar-frame.size-xs.frame-role-admin,
.avatar-frame.size-xs.frame-role-manager,
.avatar-frame.size-xs.frame-role-moderator { padding: 0.5px !important; }

.avatar-frame.size-xs[class*="frame-double-"] { padding: 1px !important; }
.avatar-frame.size-xs[class*="frame-dotted-"],
.avatar-frame.size-xs[class*="frame-dashed-"] { border-width: 0.5px !important; }
.avatar-frame.size-xs[class*="frame-neon-"],
.avatar-frame.size-xs[class*="frame-electric"] { border-width: 0.5px !important; padding: 0.5px !important; }

/* Override for 36 new frames - slightly thicker */
.avatar-frame.size-xs[class*="frame-zigzag-"],
.avatar-frame.size-xs[class*="frame-crosshair"],
.avatar-frame.size-xs[class*="frame-brackets"],
.avatar-frame.size-xs[class*="frame-barcode-"],
.avatar-frame.size-xs[class*="frame-scanlines"],
.avatar-frame.size-xs[class*="frame-pixel-"],
.avatar-frame.size-xs[class*="frame-tech-"],
.avatar-frame.size-xs[class*="frame-circuit-"],
.avatar-frame.size-xs[class*="frame-hex-"],
.avatar-frame.size-xs[class*="frame-woven"],
.avatar-frame.size-xs[class*="frame-chevron"],
.avatar-frame.size-xs[class*="frame-dragon-"],
.avatar-frame.size-xs[class*="frame-phoenix-"],
.avatar-frame.size-xs[class*="frame-celestial"],
.avatar-frame.size-xs[class*="frame-abyss"],
.avatar-frame.size-xs[class*="frame-inferno"],
.avatar-frame.size-xs[class*="frame-crystalline"],
.avatar-frame.size-xs[class*="frame-lunar"],
.avatar-frame.size-xs[class*="frame-solar"],
.avatar-frame.size-xs[class*="frame-void"],
.avatar-frame.size-xs[class*="frame-ethereal"],
.avatar-frame.size-xs[class*="frame-titan"],
.avatar-frame.size-xs[class*="frame-atlantis"],
.avatar-frame.size-xs[class*="frame-vortex"],
.avatar-frame.size-xs[class*="frame-ripple"],
.avatar-frame.size-xs[class*="frame-spark-"],
.avatar-frame.size-xs[class*="frame-energy-"],
.avatar-frame.size-xs[class*="frame-data-"],
.avatar-frame.size-xs[class*="frame-ember-"],
.avatar-frame.size-xs[class*="frame-frost-"],
.avatar-frame.size-xs[class*="frame-lightning-"],
.avatar-frame.size-xs[class*="frame-gravity-"],
.avatar-frame.size-xs[class*="frame-quantum-"],
.avatar-frame.size-xs[class*="frame-prism-"],
.avatar-frame.size-xs[class*="frame-nebula-"] { padding: 1.5px !important; }

/* sm (32px) - very thin */
.avatar-frame.size-sm[class*="frame-simple-"],
.avatar-frame.size-sm[class*="frame-thick-"],
.avatar-frame.size-sm[class*="frame-glow-"],
.avatar-frame.size-sm[class*="frame-gradient-"],
.avatar-frame.size-sm[class*="frame-glass-"],
.avatar-frame.size-sm[class*="frame-metallic-"],
.avatar-frame.size-sm[class*="frame-pulse-"],
.avatar-frame.size-sm[class*="frame-breathe-"],
.avatar-frame.size-sm[class*="frame-shimmer-"],
.avatar-frame.size-sm[class*="frame-aurora"],
.avatar-frame.size-sm[class*="frame-flames"],
.avatar-frame.size-sm[class*="frame-sakura"],
.avatar-frame.size-sm[class*="frame-snow"],
.avatar-frame.size-sm[class*="frame-spin-"],
.avatar-frame.size-sm[class*="frame-zigzag-"],
.avatar-frame.size-sm[class*="frame-crosshair"],
.avatar-frame.size-sm[class*="frame-brackets"],
.avatar-frame.size-sm[class*="frame-barcode-"],
.avatar-frame.size-sm[class*="frame-scanlines"],
.avatar-frame.size-sm[class*="frame-pixel-"],
.avatar-frame.size-sm[class*="frame-tech-"],
.avatar-frame.size-sm[class*="frame-circuit-"],
.avatar-frame.size-sm[class*="frame-hex-"],
.avatar-frame.size-sm[class*="frame-woven"],
.avatar-frame.size-sm[class*="frame-chevron"],
.avatar-frame.size-sm[class*="frame-dragon-"],
.avatar-frame.size-sm[class*="frame-phoenix-"],
.avatar-frame.size-sm[class*="frame-celestial"],
.avatar-frame.size-sm[class*="frame-abyss"],
.avatar-frame.size-sm[class*="frame-inferno"],
.avatar-frame.size-sm[class*="frame-crystalline"],
.avatar-frame.size-sm[class*="frame-lunar"],
.avatar-frame.size-sm[class*="frame-solar"],
.avatar-frame.size-sm[class*="frame-void"],
.avatar-frame.size-sm[class*="frame-ethereal"],
.avatar-frame.size-sm[class*="frame-titan"],
.avatar-frame.size-sm[class*="frame-atlantis"],
.avatar-frame.size-sm[class*="frame-vortex"],
.avatar-frame.size-sm[class*="frame-ripple"],
.avatar-frame.size-sm[class*="frame-spark-"],
.avatar-frame.size-sm[class*="frame-energy-"],
.avatar-frame.size-sm[class*="frame-data-"],
.avatar-frame.size-sm[class*="frame-ember-"],
.avatar-frame.size-sm[class*="frame-frost-"],
.avatar-frame.size-sm[class*="frame-lightning-"],
.avatar-frame.size-sm[class*="frame-gravity-"],
.avatar-frame.size-sm[class*="frame-quantum-"],
.avatar-frame.size-sm[class*="frame-prism-"],
.avatar-frame.size-sm[class*="frame-nebula-"],
.avatar-frame.size-sm.frame-role-admin,
.avatar-frame.size-sm.frame-role-manager,
.avatar-frame.size-sm.frame-role-moderator { padding: 1px !important; }

.avatar-frame.size-sm[class*="frame-double-"] { padding: 1.5px !important; }
.avatar-frame.size-sm[class*="frame-dotted-"],
.avatar-frame.size-sm[class*="frame-dashed-"] { border-width: 1px !important; }
.avatar-frame.size-sm[class*="frame-neon-"],
.avatar-frame.size-sm[class*="frame-electric"] { border-width: 1px !important; padding: 0.5px !important; }

/* Override for 36 new frames - slightly thicker */
.avatar-frame.size-sm[class*="frame-zigzag-"],
.avatar-frame.size-sm[class*="frame-crosshair"],
.avatar-frame.size-sm[class*="frame-brackets"],
.avatar-frame.size-sm[class*="frame-barcode-"],
.avatar-frame.size-sm[class*="frame-scanlines"],
.avatar-frame.size-sm[class*="frame-pixel-"],
.avatar-frame.size-sm[class*="frame-tech-"],
.avatar-frame.size-sm[class*="frame-circuit-"],
.avatar-frame.size-sm[class*="frame-hex-"],
.avatar-frame.size-sm[class*="frame-woven"],
.avatar-frame.size-sm[class*="frame-chevron"],
.avatar-frame.size-sm[class*="frame-dragon-"],
.avatar-frame.size-sm[class*="frame-phoenix-"],
.avatar-frame.size-sm[class*="frame-celestial"],
.avatar-frame.size-sm[class*="frame-abyss"],
.avatar-frame.size-sm[class*="frame-inferno"],
.avatar-frame.size-sm[class*="frame-crystalline"],
.avatar-frame.size-sm[class*="frame-lunar"],
.avatar-frame.size-sm[class*="frame-solar"],
.avatar-frame.size-sm[class*="frame-void"],
.avatar-frame.size-sm[class*="frame-ethereal"],
.avatar-frame.size-sm[class*="frame-titan"],
.avatar-frame.size-sm[class*="frame-atlantis"],
.avatar-frame.size-sm[class*="frame-vortex"],
.avatar-frame.size-sm[class*="frame-ripple"],
.avatar-frame.size-sm[class*="frame-spark-"],
.avatar-frame.size-sm[class*="frame-energy-"],
.avatar-frame.size-sm[class*="frame-data-"],
.avatar-frame.size-sm[class*="frame-ember-"],
.avatar-frame.size-sm[class*="frame-frost-"],
.avatar-frame.size-sm[class*="frame-lightning-"],
.avatar-frame.size-sm[class*="frame-gravity-"],
.avatar-frame.size-sm[class*="frame-quantum-"],
.avatar-frame.size-sm[class*="frame-prism-"],
.avatar-frame.size-sm[class*="frame-nebula-"] { padding: 1.5px !important; }

/* md (40px) - thin */
.avatar-frame.size-md[class*="frame-simple-"],
.avatar-frame.size-md[class*="frame-thick-"],
.avatar-frame.size-md[class*="frame-glow-"],
.avatar-frame.size-md[class*="frame-gradient-"],
.avatar-frame.size-md[class*="frame-glass-"],
.avatar-frame.size-md[class*="frame-metallic-"],
.avatar-frame.size-md[class*="frame-pulse-"],
.avatar-frame.size-md[class*="frame-breathe-"],
.avatar-frame.size-md[class*="frame-shimmer-"],
.avatar-frame.size-md[class*="frame-aurora"],
.avatar-frame.size-md[class*="frame-flames"],
.avatar-frame.size-md[class*="frame-sakura"],
.avatar-frame.size-md[class*="frame-snow"],
.avatar-frame.size-md[class*="frame-spin-"],
.avatar-frame.size-md[class*="frame-zigzag-"],
.avatar-frame.size-md[class*="frame-crosshair"],
.avatar-frame.size-md[class*="frame-brackets"],
.avatar-frame.size-md[class*="frame-barcode-"],
.avatar-frame.size-md[class*="frame-scanlines"],
.avatar-frame.size-md[class*="frame-pixel-"],
.avatar-frame.size-md[class*="frame-tech-"],
.avatar-frame.size-md[class*="frame-circuit-"],
.avatar-frame.size-md[class*="frame-hex-"],
.avatar-frame.size-md[class*="frame-woven"],
.avatar-frame.size-md[class*="frame-chevron"],
.avatar-frame.size-md[class*="frame-dragon-"],
.avatar-frame.size-md[class*="frame-phoenix-"],
.avatar-frame.size-md[class*="frame-celestial"],
.avatar-frame.size-md[class*="frame-abyss"],
.avatar-frame.size-md[class*="frame-inferno"],
.avatar-frame.size-md[class*="frame-crystalline"],
.avatar-frame.size-md[class*="frame-lunar"],
.avatar-frame.size-md[class*="frame-solar"],
.avatar-frame.size-md[class*="frame-void"],
.avatar-frame.size-md[class*="frame-ethereal"],
.avatar-frame.size-md[class*="frame-titan"],
.avatar-frame.size-md[class*="frame-atlantis"],
.avatar-frame.size-md[class*="frame-vortex"],
.avatar-frame.size-md[class*="frame-ripple"],
.avatar-frame.size-md[class*="frame-spark-"],
.avatar-frame.size-md[class*="frame-energy-"],
.avatar-frame.size-md[class*="frame-data-"],
.avatar-frame.size-md[class*="frame-ember-"],
.avatar-frame.size-md[class*="frame-frost-"],
.avatar-frame.size-md[class*="frame-lightning-"],
.avatar-frame.size-md[class*="frame-gravity-"],
.avatar-frame.size-md[class*="frame-quantum-"],
.avatar-frame.size-md[class*="frame-prism-"],
.avatar-frame.size-md[class*="frame-nebula-"],
.avatar-frame.size-md.frame-role-admin,
.avatar-frame.size-md.frame-role-manager,
.avatar-frame.size-md.frame-role-moderator { padding: 1px !important; }

.avatar-frame.size-md[class*="frame-double-"] { padding: 2px !important; }
.avatar-frame.size-md[class*="frame-dotted-"],
.avatar-frame.size-md[class*="frame-dashed-"] { border-width: 1px !important; }
.avatar-frame.size-md[class*="frame-neon-"],
.avatar-frame.size-md[class*="frame-electric"] { border-width: 1px !important; padding: 0.5px !important; }

/* Override for 36 new frames - slightly thicker */
.avatar-frame.size-md[class*="frame-zigzag-"],
.avatar-frame.size-md[class*="frame-crosshair"],
.avatar-frame.size-md[class*="frame-brackets"],
.avatar-frame.size-md[class*="frame-barcode-"],
.avatar-frame.size-md[class*="frame-scanlines"],
.avatar-frame.size-md[class*="frame-pixel-"],
.avatar-frame.size-md[class*="frame-tech-"],
.avatar-frame.size-md[class*="frame-circuit-"],
.avatar-frame.size-md[class*="frame-hex-"],
.avatar-frame.size-md[class*="frame-woven"],
.avatar-frame.size-md[class*="frame-chevron"],
.avatar-frame.size-md[class*="frame-dragon-"],
.avatar-frame.size-md[class*="frame-phoenix-"],
.avatar-frame.size-md[class*="frame-celestial"],
.avatar-frame.size-md[class*="frame-abyss"],
.avatar-frame.size-md[class*="frame-inferno"],
.avatar-frame.size-md[class*="frame-crystalline"],
.avatar-frame.size-md[class*="frame-lunar"],
.avatar-frame.size-md[class*="frame-solar"],
.avatar-frame.size-md[class*="frame-void"],
.avatar-frame.size-md[class*="frame-ethereal"],
.avatar-frame.size-md[class*="frame-titan"],
.avatar-frame.size-md[class*="frame-atlantis"],
.avatar-frame.size-md[class*="frame-vortex"],
.avatar-frame.size-md[class*="frame-ripple"],
.avatar-frame.size-md[class*="frame-spark-"],
.avatar-frame.size-md[class*="frame-energy-"],
.avatar-frame.size-md[class*="frame-data-"],
.avatar-frame.size-md[class*="frame-ember-"],
.avatar-frame.size-md[class*="frame-frost-"],
.avatar-frame.size-md[class*="frame-lightning-"],
.avatar-frame.size-md[class*="frame-gravity-"],
.avatar-frame.size-md[class*="frame-quantum-"],
.avatar-frame.size-md[class*="frame-prism-"],
.avatar-frame.size-md[class*="frame-nebula-"] { padding: 2px !important; }

/* lg (56px) - slightly thin */
.avatar-frame.size-lg[class*="frame-simple-"],
.avatar-frame.size-lg[class*="frame-thick-"],
.avatar-frame.size-lg[class*="frame-glow-"],
.avatar-frame.size-lg[class*="frame-gradient-"],
.avatar-frame.size-lg[class*="frame-glass-"],
.avatar-frame.size-lg[class*="frame-metallic-"],
.avatar-frame.size-lg[class*="frame-pulse-"],
.avatar-frame.size-lg[class*="frame-breathe-"],
.avatar-frame.size-lg[class*="frame-shimmer-"],
.avatar-frame.size-lg[class*="frame-aurora"],
.avatar-frame.size-lg[class*="frame-flames"],
.avatar-frame.size-lg[class*="frame-sakura"],
.avatar-frame.size-lg[class*="frame-snow"],
.avatar-frame.size-lg[class*="frame-spin-"],
.avatar-frame.size-lg[class*="frame-zigzag-"],
.avatar-frame.size-lg[class*="frame-crosshair"],
.avatar-frame.size-lg[class*="frame-brackets"],
.avatar-frame.size-lg[class*="frame-barcode-"],
.avatar-frame.size-lg[class*="frame-scanlines"],
.avatar-frame.size-lg[class*="frame-pixel-"],
.avatar-frame.size-lg[class*="frame-tech-"],
.avatar-frame.size-lg[class*="frame-circuit-"],
.avatar-frame.size-lg[class*="frame-hex-"],
.avatar-frame.size-lg[class*="frame-woven"],
.avatar-frame.size-lg[class*="frame-chevron"],
.avatar-frame.size-lg[class*="frame-dragon-"],
.avatar-frame.size-lg[class*="frame-phoenix-"],
.avatar-frame.size-lg[class*="frame-celestial"],
.avatar-frame.size-lg[class*="frame-abyss"],
.avatar-frame.size-lg[class*="frame-inferno"],
.avatar-frame.size-lg[class*="frame-crystalline"],
.avatar-frame.size-lg[class*="frame-lunar"],
.avatar-frame.size-lg[class*="frame-solar"],
.avatar-frame.size-lg[class*="frame-void"],
.avatar-frame.size-lg[class*="frame-ethereal"],
.avatar-frame.size-lg[class*="frame-titan"],
.avatar-frame.size-lg[class*="frame-atlantis"],
.avatar-frame.size-lg[class*="frame-vortex"],
.avatar-frame.size-lg[class*="frame-ripple"],
.avatar-frame.size-lg[class*="frame-spark-"],
.avatar-frame.size-lg[class*="frame-energy-"],
.avatar-frame.size-lg[class*="frame-data-"],
.avatar-frame.size-lg[class*="frame-ember-"],
.avatar-frame.size-lg[class*="frame-frost-"],
.avatar-frame.size-lg[class*="frame-lightning-"],
.avatar-frame.size-lg[class*="frame-gravity-"],
.avatar-frame.size-lg[class*="frame-quantum-"],
.avatar-frame.size-lg[class*="frame-prism-"],
.avatar-frame.size-lg[class*="frame-nebula-"],
.avatar-frame.size-lg.frame-role-admin,
.avatar-frame.size-lg.frame-role-manager,
.avatar-frame.size-lg.frame-role-moderator { padding: 1.5px !important; }

.avatar-frame.size-lg[class*="frame-double-"] { padding: 2.5px !important; }
.avatar-frame.size-lg[class*="frame-dotted-"],
.avatar-frame.size-lg[class*="frame-dashed-"] { border-width: 1.5px !important; }
.avatar-frame.size-lg[class*="frame-neon-"],
.avatar-frame.size-lg[class*="frame-electric"] { border-width: 1.5px !important; padding: 1px !important; }

/* Override for 36 new frames - slightly thicker */
.avatar-frame.size-lg[class*="frame-zigzag-"],
.avatar-frame.size-lg[class*="frame-crosshair"],
.avatar-frame.size-lg[class*="frame-brackets"],
.avatar-frame.size-lg[class*="frame-barcode-"],
.avatar-frame.size-lg[class*="frame-scanlines"],
.avatar-frame.size-lg[class*="frame-pixel-"],
.avatar-frame.size-lg[class*="frame-tech-"],
.avatar-frame.size-lg[class*="frame-circuit-"],
.avatar-frame.size-lg[class*="frame-hex-"],
.avatar-frame.size-lg[class*="frame-woven"],
.avatar-frame.size-lg[class*="frame-chevron"],
.avatar-frame.size-lg[class*="frame-dragon-"],
.avatar-frame.size-lg[class*="frame-phoenix-"],
.avatar-frame.size-lg[class*="frame-celestial"],
.avatar-frame.size-lg[class*="frame-abyss"],
.avatar-frame.size-lg[class*="frame-inferno"],
.avatar-frame.size-lg[class*="frame-crystalline"],
.avatar-frame.size-lg[class*="frame-lunar"],
.avatar-frame.size-lg[class*="frame-solar"],
.avatar-frame.size-lg[class*="frame-void"],
.avatar-frame.size-lg[class*="frame-ethereal"],
.avatar-frame.size-lg[class*="frame-titan"],
.avatar-frame.size-lg[class*="frame-atlantis"],
.avatar-frame.size-lg[class*="frame-vortex"],
.avatar-frame.size-lg[class*="frame-ripple"],
.avatar-frame.size-lg[class*="frame-spark-"],
.avatar-frame.size-lg[class*="frame-energy-"],
.avatar-frame.size-lg[class*="frame-data-"],
.avatar-frame.size-lg[class*="frame-ember-"],
.avatar-frame.size-lg[class*="frame-frost-"],
.avatar-frame.size-lg[class*="frame-lightning-"],
.avatar-frame.size-lg[class*="frame-gravity-"],
.avatar-frame.size-lg[class*="frame-quantum-"],
.avatar-frame.size-lg[class*="frame-prism-"],
.avatar-frame.size-lg[class*="frame-nebula-"] { padding: 2.5px !important; }

/* xl (80px) - moderate reduction */
.avatar-frame.size-xl[class*="frame-thick-"],
.avatar-frame.size-xl.frame-role-admin,
.avatar-frame.size-xl.frame-role-manager { padding: 2.5px !important; }

/* ===== HOVER EFFECTS ===== */

.avatar-frame-hoverable {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.avatar-frame-hoverable:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

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

@media (max-width: 768px) {
  .avatar-frame.size-profile { width: 100px; height: 100px; }
  .avatar-frame.size-2xl { width: 80px; height: 80px; }
}

/* ===== NOUVEAUX GRATUITS - Statiques (12) ===== */

/* Zigzag White */
.frame-zigzag-white {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 2px;
  position: relative;
}

.frame-zigzag-white::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 10deg,
    rgba(255, 255, 255, 0.8) 10deg 12deg,
    transparent 12deg 22deg
  );
  pointer-events: none;
}

/* Zigzag Gray */
.frame-zigzag-gray {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 2px;
  position: relative;
}

.frame-zigzag-gray::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 10deg,
    rgba(156, 163, 175, 0.6) 10deg 12deg,
    transparent 12deg 22deg
  );
  pointer-events: none;
}

/* Crosshair */
.frame-crosshair {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 3px;
  position: relative;
}

.frame-crosshair::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(34, 197, 94, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

.frame-crosshair::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(34, 197, 94, 0.8);
  border-radius: 50%;
  pointer-events: none;
}

/* Brackets */
.frame-brackets {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  padding: 3px;
  position: relative;
}

.frame-brackets::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  -webkit-clip-path: polygon(
    0 0, 30% 0, 30% 5px, 70% 5px, 70% 0, 100% 0,
    100% 30%, calc(100% - 5px) 30%, calc(100% - 5px) 70%, 100% 70%,
    100% 100%, 70% 100%, 70% calc(100% - 5px), 30% calc(100% - 5px), 30% 100%, 0 100%,
    0 70%, 5px 70%, 5px 30%, 0 30%
  );
          clip-path: polygon(
    0 0, 30% 0, 30% 5px, 70% 5px, 70% 0, 100% 0,
    100% 30%, calc(100% - 5px) 30%, calc(100% - 5px) 70%, 100% 70%,
    100% 100%, 70% 100%, 70% calc(100% - 5px), 30% calc(100% - 5px), 30% 100%, 0 100%,
    0 70%, 5px 70%, 5px 30%, 0 30%
  );
  pointer-events: none;
}

/* Barcode White */
.frame-barcode-white {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.frame-barcode-white::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 1px,
    rgba(255, 255, 255, 0.9) 1px,
    rgba(255, 255, 255, 0.9) 2px,
    transparent 2px,
    transparent 3px,
    rgba(255, 255, 255, 0.5) 3px,
    rgba(255, 255, 255, 0.5) 4px,
    transparent 4px,
    transparent 5px
  );
  pointer-events: none;
}

/* Scanlines */
.frame-scanlines {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 3px;
  position: relative;
  overflow: hidden;
}

.frame-scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(0, 255, 0, 0.1) 1px,
    rgba(0, 255, 0, 0.1) 2px
  );
  pointer-events: none;
}

/* Pixel Corners */
.frame-pixel-corners {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  padding: 3px;
  position: relative;
}

.frame-pixel-corners::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #8b5cf6 4px, transparent 4px) top left,
    linear-gradient(180deg, #8b5cf6 4px, transparent 4px) top left,
    linear-gradient(90deg, #8b5cf6 4px, transparent 4px) top right,
    linear-gradient(180deg, #8b5cf6 4px, transparent 4px) top right,
    linear-gradient(90deg, #8b5cf6 4px, transparent 4px) bottom left,
    linear-gradient(180deg, #8b5cf6 4px, transparent 4px) bottom left,
    linear-gradient(90deg, #8b5cf6 4px, transparent 4px) bottom right,
    linear-gradient(180deg, #8b5cf6 4px, transparent 4px) bottom right;
  background-size: 8px 8px;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Tech Border */
.frame-tech-border {
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
  padding: 4px;
  position: relative;
}

.frame-tech-border::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(135deg, #00ff88, #00d4ff) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.frame-tech-border::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  background: #00ff88;
  border-radius: 50%;
  pointer-events: none;
}

/* Circuit Board */
.frame-circuit-board {
  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-circuit-board::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 20%, #00d4ff 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #00d4ff 2px, transparent 2px),
    radial-gradient(circle at 30% 80%, #00d4ff 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, #00d4ff 2px, transparent 2px),
    linear-gradient(45deg, transparent 48%, rgba(0, 212, 255, 0.4) 48%, rgba(0, 212, 255, 0.4) 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(0, 212, 255, 0.4) 48%, rgba(0, 212, 255, 0.4) 52%, transparent 52%);
  pointer-events: none;
}

/* Hex Outline */
.frame-hex-outline {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 4px;
  position: relative;
}

.frame-hex-outline::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #a855f7;
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
          clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
}

/* Woven */
.frame-woven {
  background: linear-gradient(135deg, #2d1f1f 0%, #4a3728 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-woven::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 6px, rgba(212, 165, 116, 0.4) 6px, rgba(212, 165, 116, 0.4) 8px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 6px, rgba(139, 90, 60, 0.4) 6px, rgba(139, 90, 60, 0.4) 8px);
  pointer-events: none;
}

/* Chevrons */
.frame-chevrons {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-chevrons::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 8px,
    rgba(96, 165, 250, 0.6) 8px,
    rgba(96, 165, 250, 0.6) 10px,
    transparent 10px,
    transparent 18px
  );
  pointer-events: none;
}

/* ===== NOUVEAUX PREMIUM - Statiques (12) ===== */

/* Dragon Scale */
.frame-dragon-scale {
  background: linear-gradient(135deg, #3d0a0a 0%, #5c1a1a 50%, #8b2500 100%);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 0 10px rgba(255, 100, 0, 0.5);
}

.frame-dragon-scale::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 150, 0, 0.8) 0%, transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255, 100, 0, 0.7) 0%, transparent 25%),
    radial-gradient(circle at 40% 70%, rgba(255, 130, 0, 0.75) 0%, transparent 28%),
    radial-gradient(circle at 70% 80%, rgba(255, 110, 0, 0.7) 0%, transparent 26%),
    radial-gradient(circle at 30% 40%, rgba(255, 140, 0, 0.6) 0%, transparent 24%),
    radial-gradient(circle at 60% 50%, rgba(255, 120, 0, 0.65) 0%, transparent 27%);
  pointer-events: none;
}

/* Phoenix Feather */
.frame-phoenix-feather {
  background: linear-gradient(135deg, #1a0a00 0%, #4a2000 50%, #ff6b00 100%);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 0 15px rgba(255, 150, 50, 0.6);
}

.frame-phoenix-feather::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(255, 200, 100, 0.5) 8deg 10deg),
    repeating-conic-gradient(from 5deg, transparent 0deg 8deg, rgba(255, 150, 50, 0.4) 8deg 10deg);
  pointer-events: none;
}

/* Celestial */
.frame-celestial {
  background: linear-gradient(135deg, #1a1a00 0%, #4a4a00 50%, #ffd700 100%);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.4);
}

.frame-celestial::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 200, 0.9) 0%, transparent 50%);
  pointer-events: none;
}

.frame-celestial::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

/* Abyss */
.frame-abyss {
  background: linear-gradient(180deg, #0a1628 0%, #000510 50%, #020813 100%);
  padding: 5px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 100, 150, 0.4);
}

.frame-abyss::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0, 150, 200, 0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 100, 180, 0.2) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(0, 80, 150, 0.4) 0%, transparent 60%);
  pointer-events: none;
}

/* Inferno */
.frame-inferno {
  background: conic-gradient(from 0deg, #ff0000, #ff4500, #ff6600, #ff0000);
  padding: 4px;
  position: relative;
  filter: blur(0.5px);
}

.frame-inferno::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #ff3300, #ff0000, #ff4400, #ff3300);
  filter: blur(2px);
  opacity: 0.7;
  pointer-events: none;
}

/* Crystalline */
.frame-crystalline {
  background: linear-gradient(135deg, #e0f7ff 0%, #b8d4e3 50%, #a0c4d9 100%);
  padding: 4px;
  position: relative;
}

.frame-crystalline::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
    linear-gradient(225deg, rgba(200, 230, 255, 0.7) 0%, transparent 50%),
    linear-gradient(45deg, rgba(180, 220, 255, 0.6) 0%, transparent 50%);
  pointer-events: none;
}

.frame-crystalline::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

/* Lunar */
.frame-lunar {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #c0c0c0 100%);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 0 15px rgba(192, 192, 192, 0.5);
}

.frame-lunar::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(220, 220, 220, 0.4) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(180, 180, 180, 0.3) 0%, transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(200, 200, 200, 0.35) 0%, transparent 22%);
  pointer-events: none;
}

/* Solar */
.frame-solar {
  background: radial-gradient(circle, #ffd700 0%, #ff8c00 50%, #ff4500 100%);
  padding: 4px;
  position: relative;
  box-shadow: 0 0 20px rgba(255, 200, 0, 0.8), inset 0 0 10px rgba(255, 255, 200, 0.5);
}

.frame-solar::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 100, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

.frame-solar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 200, 0, 0.3), transparent, rgba(255, 150, 0, 0.3), transparent);
  pointer-events: none;
}

/* Void */
.frame-void {
  background: radial-gradient(circle, #1a0a2e 0%, #0d0515 50%, #000 100%);
  padding: 5px;
  position: relative;
  box-shadow: inset 0 0 30px rgba(138, 43, 226, 0.5);
}

.frame-void::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(138, 43, 226, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(75, 0, 130, 0.2) 0%, transparent 35%);
  pointer-events: none;
}

/* Ethereal */
.frame-ethereal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
  padding: 4px;
  position: relative;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.frame-ethereal::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 60%);
  pointer-events: none;
}

.frame-ethereal::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 80%);
  pointer-events: none;
}

/* Titan */
.frame-titan {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 30%, #a0a0a0 60%, #d0d0d0 100%);
  padding: 3px;
  position: relative;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.frame-titan::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
    linear-gradient(225deg, rgba(200, 200, 200, 0.6) 0%, transparent 40%);
  pointer-events: none;
}

/* Atlantis */
.frame-atlantis {
  background: linear-gradient(180deg, #001a33 0%, #003366 30%, #006699 60%, #00cccc 100%);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 200, 200, 0.6);
}

.frame-atlantis::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 30%, rgba(100, 220, 255, 0.4) 0%, transparent 35%),
    radial-gradient(ellipse at 60% 70%, rgba(0, 180, 200, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(50, 200, 220, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

/* ===== NOUVEAUX PREMIUM - Animés (12) ===== */

/* Vortex */
.frame-vortex {
  background: radial-gradient(circle, #1a0a2e 0%, #0d0515 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-vortex::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #6366f1, #8b5cf6, #a855f7, #8b5cf6);
  animation: vortex-spin 2s linear infinite;
  pointer-events: none;
}

.frame-vortex::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #8b5cf6, #6366f1, #8b5cf6, #a855f7, #8b5cf6);
  animation: vortex-spin 1.5s linear infinite reverse;
  pointer-events: none;
}

@keyframes vortex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ripple */
.frame-ripple {
  background: linear-gradient(135deg, #0a1929 0%, #1a3a52 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-ripple::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.6);
  animation: ripple-expand 2s ease-out infinite;
  pointer-events: none;
}

.frame-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.4);
  animation: ripple-expand 2s ease-out infinite 1s;
  pointer-events: none;
}

@keyframes ripple-expand {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Spark Trail */
.frame-spark-trail {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-spark-trail::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 200, 0, 0.8) 0%, transparent 20%),
    radial-gradient(circle at 0% 50%, rgba(255, 180, 0, 0.6) 0%, transparent 18%),
    radial-gradient(circle at 100% 50%, rgba(255, 220, 0, 0.7) 0%, transparent 19%);
  animation: spark-move 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes spark-move {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Energy Flow */
.frame-energy-flow {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-energy-flow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, #00ff88, transparent, #00ff88, transparent);
  animation: energy-flow 3s linear infinite;
  pointer-events: none;
}

@keyframes energy-flow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Data Stream */
.frame-data-stream {
  background: linear-gradient(135deg, #000a14 0%, #001428 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-data-stream::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 255, 136, 0.6) 3px,
    rgba(0, 255, 136, 0.6) 5px
  );
  animation: data-stream-scroll 1s linear infinite;
  pointer-events: none;
}

@keyframes data-stream-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 8px; }
}

/* Ember Burst */
.frame-ember-burst {
  background: radial-gradient(circle, #1a0500 0%, #0a0200 100%);
  padding: 5px;
  position: relative;
  overflow: hidden;
}

.frame-ember-burst::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 120, 0, 1) 0%, transparent 12%),
    radial-gradient(circle at 65% 45%, rgba(255, 70, 0, 0.9) 0%, transparent 10%),
    radial-gradient(circle at 45% 75%, rgba(255, 100, 0, 0.95) 0%, transparent 11%),
    radial-gradient(circle at 75% 65%, rgba(255, 50, 0, 0.85) 0%, transparent 9%),
    radial-gradient(circle at 25% 55%, rgba(255, 140, 0, 0.9) 0%, transparent 13%);
  animation: ember-flicker 0.6s ease-in-out infinite alternate;
  pointer-events: none;
}

.frame-ember-burst::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 55% 25%, rgba(255, 150, 50, 1) 0%, transparent 10%),
    radial-gradient(circle at 25% 35%, rgba(255, 90, 0, 0.9) 0%, transparent 11%),
    radial-gradient(circle at 85% 75%, rgba(255, 110, 0, 0.95) 0%, transparent 12%);
  animation: ember-flicker-alt 0.7s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

@keyframes ember-flicker {
  0% { opacity: 0.3; transform: scale(0.92) translate(-2px, -2px); }
  50% { opacity: 0.9; }
  100% { opacity: 1; transform: scale(1.08) translate(2px, 2px); }
}

@keyframes ember-flicker-alt {
  0% { opacity: 0.4; transform: scale(0.95); }
  100% { opacity: 0.95; transform: scale(1.05); }
}

/* Frost Spread */
.frame-frost-spread {
  background: linear-gradient(135deg, #0a1a2a 0%, #1a3a4a 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-frost-spread::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(150, 220, 255, 0.4) 0%, transparent 30%),
    repeating-conic-gradient(from 0deg, transparent 0deg 15deg, rgba(200, 240, 255, 0.2) 15deg 30deg);
  animation: frost-grow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes frost-grow {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* Lightning Storm */
.frame-lightning-storm {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2a 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-lightning-storm::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 40%, rgba(200, 200, 255, 0.8) 50%, transparent 60%);
  animation: lightning-flash 2s ease-in-out infinite;
  pointer-events: none;
}

.frame-lightning-storm::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, rgba(150, 180, 255, 0.6) 0%, transparent 20%);
  animation: lightning-flash 2s ease-in-out infinite 0.5s;
  pointer-events: none;
}

@keyframes lightning-flash {
  0%, 90%, 100% { opacity: 0; }
  92%, 94% { opacity: 1; }
  93%, 95% { opacity: 0.3; }
}

/* Gravity Well */
.frame-gravity-well {
  background: radial-gradient(circle, #000 0%, #0a0a1a 100%);
  padding: 5px;
  position: relative;
  overflow: hidden;
}

.frame-gravity-well::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(138, 43, 226, 0.6);
  animation: gravity-pull 3s ease-in-out infinite;
  pointer-events: none;
}

.frame-gravity-well::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(138, 43, 226, 0.3), transparent);
  animation: gravity-spin 4s linear infinite;
  pointer-events: none;
}

@keyframes gravity-pull {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(0.85); opacity: 1; }
}

@keyframes gravity-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Quantum Flux */
.frame-quantum-flux {
  background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-quantum-flux::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(100, 100, 255, 0.7) 0%, transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(150, 100, 255, 0.6) 0%, transparent 22%);
  animation: quantum-shift 1s ease-in-out infinite alternate;
  pointer-events: none;
}

.frame-quantum-flux::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 30%, rgba(150, 150, 255, 0.5) 0%, transparent 20%),
    radial-gradient(circle at 30% 70%, rgba(100, 150, 255, 0.6) 0%, transparent 23%);
  animation: quantum-shift 1.2s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

@keyframes quantum-shift {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.1); }
}

/* Prism Refract */
.frame-prism-refract {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  padding: 4px;
  position: relative;
  overflow: hidden;
}

.frame-prism-refract::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
  animation: prism-rotate 4s linear infinite;
  filter: blur(3px);
  opacity: 0.7;
  pointer-events: none;
}

.frame-prism-refract::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 0, 0, 0.3), rgba(255, 127, 0, 0.3), rgba(255, 255, 0, 0.3), rgba(0, 255, 0, 0.3), rgba(0, 0, 255, 0.3), rgba(139, 0, 255, 0.3), rgba(255, 0, 0, 0.3));
  animation: prism-rotate 3s linear infinite reverse;
  pointer-events: none;
}

@keyframes prism-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Nebula Swirl */
.frame-nebula-swirl {
  background: linear-gradient(135deg, #0a0015 0%, #150030 50%, #0a0020 100%);
  padding: 5px;
  position: relative;
  overflow: hidden;
}

.frame-nebula-swirl::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 40%, rgba(138, 43, 226, 0.6) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 60%, rgba(186, 85, 211, 0.5) 0%, transparent 35%),
    radial-gradient(ellipse at 30% 70%, rgba(109, 40, 217, 0.4) 0%, transparent 30%);
  animation: nebula-swirl 8s ease-in-out infinite;
  pointer-events: none;
}

.frame-nebula-swirl::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(216, 180, 254, 0.5) 0%, transparent 35%),
    radial-gradient(ellipse at 20% 50%, rgba(167, 139, 250, 0.4) 0%, transparent 30%);
  animation: nebula-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nebula-swirl {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

@keyframes nebula-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ===== @property DEFINITIONS FOR ANIMATED GRADIENTS ===== */
/* Support: Chrome 85+, Edge 85+, Safari 16.1+ */
@property --gradient-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: '<angle>';
}

@property --neon-intensity {
  inherits: false;
  initial-value: 0.5;
  syntax: '<number>';
}

@property --glow-size {
  inherits: false;
  initial-value: 20px;
  syntax: '<length>';
}

@property --hue-shift {
  inherits: false;
  initial-value: 0;
  syntax: '<number>';
}

/* ===== ULTRA PREMIUM ANIMATED FRAMES ===== */

/* ===== RAINBOW AURORA SERIES ===== */

/* Rainbow Aurora Spin - Uses @property for smooth angle animation */
.frame-rainbow-aurora-spin {
  background:
    linear-gradient(to bottom, oklch(0.1 0.2 240 / 0.98), oklch(0.1 0.2 240 / 0.98)) padding-box,
    conic-gradient(
      from 0deg in oklch longer hue,
      oklch(0.8 0.37 0) 0%,
      oklch(0.8 0.3 180) 25%,
      oklch(0.8 0.25 280) 50%,
      oklch(0.8 0.3 330) 75%,
      oklch(0.8 0.37 0) 100%
    ) border-box;
  background:
    linear-gradient(to bottom, oklch(0.1 0.2 240 / 0.98), oklch(0.1 0.2 240 / 0.98)) padding-box,
    conic-gradient(
      from var(--gradient-angle, 0deg) in oklch longer hue,
      oklch(0.8 0.37 0) 0%,
      oklch(0.8 0.3 180) 25%,
      oklch(0.8 0.25 280) 50%,
      oklch(0.8 0.3 330) 75%,
      oklch(0.8 0.37 0) 100%
    ) border-box;
  border: 5px solid transparent;
  padding: 0;
  animation: rainbow-spin 4s linear infinite;
  box-shadow:
    0 0 20px oklch(from 0.5 0.37 0 / 0.6),
    0 0 calc(20px * 1.5) oklch(from 0.5 0.3 calc(0 + 60) / 0.4);
  box-shadow:
    0 0 var(--glow-size, 20px) oklch(from var(--neon-intensity, 0.5) 0.37 var(--hue-shift, 0) / 0.6),
    0 0 calc(var(--glow-size, 20px) * 1.5) oklch(from var(--neon-intensity, 0.5) 0.3 calc(var(--hue-shift, 0) + 60) / 0.4);
}

@keyframes rainbow-spin {
  0% { --gradient-angle: 0deg; --hue-shift: 0; }
  25% { --hue-shift: 90; }
  50% { --gradient-angle: 180deg; --hue-shift: 180; }
  75% { --hue-shift: 270; }
  100% { --gradient-angle: 360deg; --hue-shift: 360; }
}

/* Rainbow Morph - Morphs between colors smoothly */
.frame-rainbow-morph {
  position: relative;
  padding: 4px;
  background: oklch(0.1 0.2 240);
}

.frame-rainbow-morph::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg in oklch longer hue,
    oklch(0.9 0.4 0),
    oklch(0.9 0.4 120),
    oklch(0.9 0.4 240)
  );
  background: conic-gradient(
    from var(--gradient-angle, 0deg) in oklch longer hue,
    oklch(0.9 0.4 0),
    oklch(0.9 0.4 120),
    oklch(0.9 0.4 240)
  );
  animation: rainbow-morph 8s ease-in-out infinite;
  filter: blur(6px);
  z-index: -1;
}

.frame-rainbow-morph::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from calc(0deg + 180deg) in oklch longer hue,
    oklch(0.7 0.3 60),
    oklch(0.7 0.3 180),
    oklch(0.7 0.3 300)
  );
  background: conic-gradient(
    from calc(var(--gradient-angle, 0deg) + 180deg) in oklch longer hue,
    oklch(0.7 0.3 60),
    oklch(0.7 0.3 180),
    oklch(0.7 0.3 300)
  );
  animation: rainbow-morph 6s ease-in-out infinite reverse;
  filter: blur(3px);
  z-index: -1;
}

@keyframes rainbow-morph {
  0%, 100% { --gradient-angle: 0deg; }
  33% { --gradient-angle: 120deg; }
  66% { --gradient-angle: 240deg; }
}

/* Rainbow Pulse Wave - Waves of rainbow color */
.frame-rainbow-pulse-wave {
  padding: 4px;
  background:
    linear-gradient(to bottom, oklch(0.1 0.2 240 / 0.95), oklch(0.1 0.2 240 / 0.95)) padding-box,
    conic-gradient(
      from 0deg in oklch longer hue,
      oklch(1 0.37 0) 0%,
      oklch(1 0.37 60) 12.5%,
      oklch(1 0.37 120) 25%,
      oklch(1 0.37 180) 37.5%,
      oklch(1 0.37 240) 50%,
      oklch(1 0.37 300) 62.5%,
      oklch(1 0.37 0) 75%,
      oklch(1 0.37 60) 87.5%,
      oklch(1 0.37 0) 100%
    ) border-box;
  background:
    linear-gradient(to bottom, oklch(0.1 0.2 240 / 0.95), oklch(0.1 0.2 240 / 0.95)) padding-box,
    conic-gradient(
      from var(--gradient-angle, 0deg) in oklch longer hue,
      oklch(1 0.37 0) 0%,
      oklch(1 0.37 60) 12.5%,
      oklch(1 0.37 120) 25%,
      oklch(1 0.37 180) 37.5%,
      oklch(1 0.37 240) 50%,
      oklch(1 0.37 300) 62.5%,
      oklch(1 0.37 0) 75%,
      oklch(1 0.37 60) 87.5%,
      oklch(1 0.37 0) 100%
    ) border-box;
  border: 4px solid transparent;
  animation: rainbow-pulse 3s ease-in-out infinite;
}

.frame-rainbow-pulse-wave::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid oklch(0.8 0.37 0 / 0.6);
  border: 2px solid oklch(0.8 0.37 var(--hue-shift, 0) / 0.6);
  animation: pulse-wave-expand 3s ease-out infinite;
  z-index: -1;
}

.frame-rainbow-pulse-wave::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid oklch(0.8 0.37 calc(0 + 180) / 0.4);
  border: 2px solid oklch(0.8 0.37 calc(var(--hue-shift, 0) + 180) / 0.4);
  animation: pulse-wave-expand 3s ease-out infinite 1.5s;
  z-index: -1;
}

@keyframes rainbow-pulse {
  0%, 100% { --gradient-angle: 0deg; --hue-shift: 0; }
  50% { --gradient-angle: 360deg; --hue-shift: 180; }
}

@keyframes pulse-wave-expand {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ===== CYBERPUNK SERIES ===== */

/* Cyberpunk Glitch - Complex glitch with RGB split */
.frame-cyberpunk-glitch {
  padding: 4px;
  background: #0a0a0a;
  position: relative;
  animation: cyber-glitch 0.3s infinite;
}

.frame-cyberpunk-glitch::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 2px,
      rgba(255, 0, 85, 0.8) 2px, rgba(255, 0, 85, 0.8) 4px
    );
  animation: glitch-scan 2s linear infinite;
  z-index: -2;
}

.frame-cyberpunk-glitch::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid #00ffff;
  box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    inset 0 0 10px rgba(0, 255, 255, 0.2);
  animation: glitch-flicker 0.1s infinite;
  z-index: -1;
}

@keyframes cyber-glitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-2px, 1px); }
  94% { transform: translate(2px, -1px); }
  96% { transform: translate(-1px, 2px); }
  98% { transform: translate(1px, -2px); }
}

@keyframes glitch-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 20px; }
}

@keyframes glitch-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.8; }
}

/* Cyberpunk Neon Rain */
.frame-cyberpunk-neon-rain {
  padding: 4px;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a0a2e 100%);
  position: relative;
  overflow: hidden;
}

.frame-cyberpunk-neon-rain::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 0, 128, 0.3) 100%),
    repeating-linear-gradient(180deg,
      transparent 0px,
      transparent 8px,
      rgba(0, 255, 255, 0.1) 8px,
      rgba(0, 255, 255, 0.1) 10px
    );
  animation: neon-rain 1s linear infinite;
  z-index: -1;
}

.frame-cyberpunk-neon-rain::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-image: linear-gradient(180deg, #ff0080, #00ffff, #ff0080) 1;
  animation: rainbow-border-flow 3s linear infinite;
  filter: blur(1px);
  z-index: -1;
}

@keyframes neon-rain {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 20px, 0 40px; }
}

@keyframes rainbow-border-flow {
  0% { filter: hue-rotate(0deg) blur(1px); }
  100% { filter: hue-rotate(360deg) blur(1px); }
}

/* Cyberpunk Scanline */
.frame-cyberpunk-scanline {
  padding: 4px;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}

.frame-cyberpunk-scanline::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 255, 128, 0.1) 2px,
      rgba(0, 255, 128, 0.1) 4px
    );
  animation: scanline-move 0.1s linear infinite;
  z-index: -1;
}

.frame-cyberpunk-scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #00ff88;
  box-shadow:
    0 0 15px #00ff88,
    0 0 30px rgba(0, 255, 128, 0.5),
    inset 0 0 15px rgba(0, 255, 128, 0.2);
  z-index: -1;
}

@keyframes scanline-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}

/* Cyberpunk Data Stream */
.frame-cyberpunk-data-stream {
  padding: 4px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.frame-cyberpunk-data-stream::before {
  content: '010010010101';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  font-family: monospace;
  font-size: 8px;
  color: rgba(0, 255, 128, 0.3);
  line-height: 1;
  word-break: break-all;
  animation: data-scroll 10s linear infinite;
  z-index: -1;
}

.frame-cyberpunk-data-stream::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #00ff88;
  box-shadow: 0 0 10px #00ff88, inset 0 0 10px rgba(0, 255, 128, 0.2);
  z-index: -1;
}

@keyframes data-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

/* Cyberpunk Electric */
.frame-cyberpunk-electric {
  padding: 4px;
  background: #0a0a0a;
  position: relative;
}

.frame-cyberpunk-electric::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, #00ffff, transparent, #ff00ff, transparent);
  animation: electric-spin 0.5s linear infinite;
  filter: blur(4px);
  z-index: -2;
}

.frame-cyberpunk-electric::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid #00ffff;
  box-shadow:
    0 0 10px #00ffff,
    0 0 20px rgba(0, 255, 255, 0.5),
    inset 0 0 10px rgba(0, 255, 255, 0.3);
  animation: electric-spark 0.2s ease-in-out infinite;
  z-index: -1;
}

@keyframes electric-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes electric-spark {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cyberpunk Hologram */
.frame-cyberpunk-hologram {
  padding: 4px;
  background: rgba(10, 10, 20, 0.8);
  position: relative;
  animation: hologram-flicker 0.15s infinite;
}

.frame-cyberpunk-hologram::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.2) 0%,
      rgba(255, 0, 128, 0.2) 50%,
      rgba(0, 255, 255, 0.2) 100%
    );
  animation: hologram-distort 2s ease-in-out infinite;
  z-index: -1;
}

.frame-cyberpunk-hologram::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 255, 0.6);
  box-shadow:
    0 0 15px rgba(0, 255, 255, 0.5),
    inset 0 0 15px rgba(0, 255, 255, 0.2);
  z-index: -1;
}

@keyframes hologram-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

@keyframes hologram-distort {
  0%, 100% { transform: scale(1) skew(0deg); }
  25% { transform: scale(1.02) skew(0.5deg); }
  50% { transform: scale(0.98) skew(-0.5deg); }
  75% { transform: scale(1.01) skew(0.3deg); }
}

/* Cyberpunk Grid */
.frame-cyberpunk-grid {
  padding: 4px;
  background:
    linear-gradient(rgba(0, 20, 40, 0.9), rgba(0, 20, 40, 0.9)),
    linear-gradient(90deg, rgba(0, 255, 128, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 128, 0.1) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  perspective: 200px;
  position: relative;
}

.frame-cyberpunk-grid::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #00ff88;
  box-shadow:
    0 0 20px rgba(0, 255, 128, 0.6),
    inset 0 0 20px rgba(0, 255, 128, 0.2);
  animation: grid-pulse 2s ease-in-out infinite;
  z-index: -1;
}

.frame-cyberpunk-grid::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 128, 0.3);
  animation: grid-rotate 10s linear infinite;
  z-index: -2;
}

@keyframes grid-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes grid-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cyberpunk Pulse */
.frame-cyberpunk-pulse {
  padding: 4px;
  background: #0a0a0a;
  position: relative;
}

.frame-cyberpunk-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #ff0080;
  box-shadow: 0 0 10px #ff0080;
  animation: cyber-pulse-sync 1s ease-in-out infinite;
  z-index: -1;
}

.frame-cyberpunk-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #00ffff;
  box-shadow: 0 0 10px #00ffff;
  animation: cyber-pulse-sync 1s ease-in-out infinite 0.5s;
  z-index: -2;
}

@keyframes cyber-pulse-sync {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ===== QUANTUM SERIES ===== */

/* Quantum Flux - Superposition effect */
.frame-quantum-flux {
  padding: 4px;
  background: radial-gradient(circle, #1a0a2e 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-quantum-flux::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.8) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.7) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.6) 0%, transparent 25%);
  animation: quantum-shift 1.5s ease-in-out infinite;
  filter: blur(3px);
  z-index: -2;
}

.frame-quantum-flux::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(90deg, #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
  background-size: 300% 100%;
  animation: quantum-flow 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

@keyframes quantum-shift {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes quantum-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Quantum Entanglement - Spins in opposite directions */
.frame-quantum-entanglement {
  padding: 4px;
  background: radial-gradient(circle, #0f0f23 0%, #000 100%);
  position: relative;
}

.frame-quantum-entanglement::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(139, 92, 246, 0.8);
  border-right-color: rgba(6, 182, 212, 0.6);
  animation: quantum-spin-clock 2s linear infinite;
  z-index: -2;
}

.frame-quantum-entanglement::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: rgba(236, 72, 153, 0.6);
  border-left-color: rgba(251, 191, 36, 0.4);
  animation: quantum-spin-counter 2s linear infinite;
  z-index: -1;
}

@keyframes quantum-spin-clock {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes quantum-spin-counter {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Quantum Tunnel - Spatial distortion */
.frame-quantum-tunnel {
  padding: 4px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.frame-quantum-tunnel::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
  animation: tunnel-expand 2s ease-in-out infinite;
  filter: blur(4px);
  opacity: 0.5;
  z-index: -2;
}

.frame-quantum-tunnel::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.8);
  box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.4);
  animation: tunnel-pulse 1s ease-in-out infinite;
  z-index: -1;
}

@keyframes tunnel-expand {
  0%, 100% { transform: scale(0.9); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.7; }
}

@keyframes tunnel-pulse {
  0%, 100% { box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.4); }
  50% { box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.6); }
}

/* Quantum Superposition */
.frame-quantum-superposition {
  padding: 4px;
  background: radial-gradient(circle, #0a0a2e 0%, #000 100%);
  position: relative;
  animation: quantum-phase 0.5s ease-in-out infinite;
}

.frame-quantum-superposition::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.6);
  box-shadow:
    0 0 15px rgba(139, 92, 246, 0.8),
    inset 0 0 15px rgba(139, 92, 246, 0.3);
  animation: quantum-state-a 1s ease-in-out infinite;
  z-index: -2;
}

.frame-quantum-superposition::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.6);
  box-shadow:
    0 0 15px rgba(6, 182, 212, 0.8),
    inset 0 0 15px rgba(6, 182, 212, 0.3);
  animation: quantum-state-b 1s ease-in-out infinite;
  z-index: -1;
}

@keyframes quantum-phase {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

@keyframes quantum-state-a {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
}

@keyframes quantum-state-b {
  0%, 100% { transform: scale(1) rotate(180deg); opacity: 0.6; }
  50% { transform: scale(1.1) rotate(360deg); opacity: 1; }
}

/* Quantum Decoherence */
.frame-quantum-decoherence {
  padding: 4px;
  background: radial-gradient(circle, #1a0a2e 0%, #000 100%);
  position: relative;
}

.frame-quantum-decoherence::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
  background: conic-gradient(from var(--gradient-angle, 0deg), #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
  animation: decoherence-spin 3s linear infinite;
  filter: blur(3px);
  opacity: 0.6;
  z-index: -2;
}

.frame-quantum-decoherence::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.8);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
  animation: decoherence-fade 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes decoherence-spin {
  0% { --gradient-angle: 0deg; transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { --gradient-angle: 360deg; transform: rotate(360deg) scale(1); }
}

@keyframes decoherence-fade {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

/* Quantum Entangle Spin */
.frame-quantum-entangle-spin {
  padding: 4px;
  background: #000;
  position: relative;
}

.frame-quantum-entangle-spin::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.7);
  border-left-color: transparent;
  border-right-color: transparent;
  animation: entangle-spin-cw 1s linear infinite;
  z-index: -2;
}

.frame-quantum-entangle-spin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid rgba(6, 182, 212, 0.7);
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: entangle-spin-ccw 1.5s linear infinite;
  z-index: -1;
}

@keyframes entangle-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes entangle-spin-ccw {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Quantum Wave Collapse */
.frame-quantum-wave-collapse {
  padding: 4px;
  background: radial-gradient(circle, #0f0f23 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-quantum-wave-collapse::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.8);
  animation: wave-collapse 1.5s ease-in-out infinite;
  z-index: -2;
}

.frame-quantum-wave-collapse::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.6);
  animation: wave-collapse 1.5s ease-in-out infinite 0.3s;
  z-index: -1;
}

@keyframes wave-collapse {
  0% { transform: scale(1.3); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

/* Quantum String Vibrate */
.frame-quantum-string-vibrate {
  padding: 4px;
  background: #0a0a0a;
  position: relative;
}

.frame-quantum-string-vibrate::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(139, 92, 246, 0.3) 3px, rgba(139, 92, 246, 0.3) 6px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(6, 182, 212, 0.3) 3px, rgba(6, 182, 212, 0.3) 6px);
  animation: string-vibrate 0.1s linear infinite;
  z-index: -1;
}

.frame-quantum-string-vibrate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #8b5cf6;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
  animation: string-glow 0.2s ease-in-out infinite;
  z-index: -1;
}

@keyframes string-vibrate {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

@keyframes string-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== COSMIC SERIES ===== */

/* Supernova Explosion */
.frame-supernova-explosion {
  padding: 5px;
  background: radial-gradient(circle, #2d0a00 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-supernova-explosion::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 1) 0%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255, 100, 0, 0.8) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 50, 0, 0.6) 0%, transparent 40%);
  animation: supernova-explode 2s ease-out infinite;
  z-index: -2;
}

.frame-supernova-explosion::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff6b00, #ffcc00, #ff6b00, #ff4500, #ff6b00);
  animation: supernova-spin 3s linear infinite;
  filter: blur(2px);
  z-index: -1;
}

@keyframes supernova-explode {
  0% { transform: scale(0.8); opacity: 0.3; }
  20% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.3; }
}

@keyframes supernova-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pulsar Beam */
.frame-pulsar-beam {
  padding: 4px;
  background: radial-gradient(circle, #0f0f23 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-pulsar-beam::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.8) 0%, transparent 50%);
  animation: pulsar-beam 1.5s ease-in-out infinite;
  z-index: -2;
}

.frame-pulsar-beam::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 200%;
  background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.9) 50%, transparent 100%);
  animation: pulsar-rotate 3s linear infinite;
  transform-origin: center center;
  z-index: -1;
}

@keyframes pulsar-beam {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}

@keyframes pulsar-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Nebula Swirl */
.frame-nebula-swirl {
  padding: 4px;
  background: radial-gradient(circle, #1a0a2e 0%, #000 100%);
  position: relative;
}

.frame-nebula-swirl::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #f59e0b, #8b5cf6);
  animation: nebula-swirl 8s linear infinite;
  filter: blur(3px);
  opacity: 0.7;
  z-index: -2;
}

.frame-nebula-swirl::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139, 92, 246, 0.4) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 50%, rgba(6, 182, 212, 0.3) 0%, transparent 30%);
  animation: nebula-pulse 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes nebula-swirl {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes nebula-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Nebula Swirl Classic */
.frame-nebula-swirl-classic {
  padding: 4px;
  background: radial-gradient(circle, #1a0a2e 0%, #000 100%);
  position: relative;
}

.frame-nebula-swirl-classic::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #f59e0b, #8b5cf6);
  animation: nebula-swirl-classic 8s linear infinite;
  filter: blur(3px);
  opacity: 0.7;
  z-index: -2;
}

.frame-nebula-swirl-classic::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139, 92, 246, 0.4) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 50%, rgba(6, 182, 212, 0.3) 0%, transparent 30%);
  animation: nebula-pulse 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes nebula-swirl-classic {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

/* Black Hole Accretion */
.frame-black-hole-accretion {
  padding: 4px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.frame-black-hole-accretion::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #000 30%, transparent 31%),
    conic-gradient(from 0deg, #ff6b00, #ffcc00, #ff6b00, #ff4500, #ff6b00);
  animation: accretion-spin 2s linear infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-black-hole-accretion::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 100, 0, 0.8);
  box-shadow: inset 0 0 30px rgba(255, 100, 0, 0.5);
  z-index: -1;
}

@keyframes accretion-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cosmic Rays */
.frame-cosmic-rays {
  padding: 4px;
  background: radial-gradient(circle, #050510 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-cosmic-rays::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 40%, rgba(200, 200, 255, 0.9) 50%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, rgba(200, 200, 255, 0.7) 50%, transparent 60%);
  animation: cosmic-flash 4s ease-in-out infinite;
  z-index: -2;
}

.frame-cosmic-rays::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(150, 180, 255, 0.6) 0%, transparent 15%),
    radial-gradient(circle at 70% 80%, rgba(180, 200, 255, 0.5) 0%, transparent 20%);
  animation: cosmic-drift 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes cosmic-flash {
  0%, 85%, 100% { opacity: 0.2; }
  90%, 95% { opacity: 1; }
}

@keyframes cosmic-drift {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Solar Flare */
.frame-solar-flare {
  padding: 5px;
  background: radial-gradient(circle, #3d1a00 0%, #000 100%);
  position: relative;
}

.frame-solar-flare::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 1) 0%, transparent 25%);
  animation: solar-pulse 2s ease-in-out infinite;
  z-index: -2;
}

.frame-solar-flare::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    conic-gradient(from 0deg, #ffcc00, #ff6b00, #ffcc00);
  animation: solar-flare-spin 4s linear infinite;
  -webkit-mask: radial-gradient(closest-side, transparent 70%, black 71%);
  mask: radial-gradient(closest-side, transparent 70%, black 71%);
  z-index: -1;
}

@keyframes solar-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes solar-flare-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Asteroid Belt */
.frame-asteroid-belt {
  padding: 4px;
  background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
  position: relative;
}

.frame-asteroid-belt::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(139, 92, 246, 0.4) 45%, transparent 50%);
  animation: asteroid-orbit 5s linear infinite;
  z-index: -2;
}

.frame-asteroid-belt::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(139, 92, 246, 0.6);
  animation: asteroid-spin 8s linear infinite reverse;
  z-index: -1;
}

@keyframes asteroid-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes asteroid-spin {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Comet Tail */
.frame-comet-tail {
  padding: 4px;
  background: radial-gradient(circle, #0a0510 0%, #000 100%);
  position: relative;
}

.frame-comet-tail::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.8) 0%, transparent 30%),
    radial-gradient(ellipse at 20% 20%, rgba(200, 200, 255, 0.6) 0%, transparent 25%);
  animation: comet-move 4s linear infinite;
  z-index: -2;
}

.frame-comet-tail::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 15px rgba(139, 92, 246, 0.6),
    inset 0 0 15px rgba(139, 92, 246, 0.2);
  z-index: -1;
}

@keyframes comet-move {
  0% { transform: rotate(0deg) translate(2px); }
  25% { transform: rotate(90deg) translate(2px); }
  50% { transform: rotate(180deg) translate(2px); }
  75% { transform: rotate(270deg) translate(2px); }
  100% { transform: rotate(360deg) translate(2px); }
}

/* Warp Drive */
.frame-warp-drive {
  padding: 4px;
  background: radial-gradient(circle, #000 0%, #0a0520 100%);
  position: relative;
  overflow: hidden;
}

.frame-warp-drive::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(139, 92, 246, 0.3) 10deg 20deg);
  animation: warp-stretch 1s linear infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-warp-drive::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.8),
    inset 0 0 30px rgba(139, 92, 246, 0.3);
  animation: warp-pulse 0.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes warp-stretch {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes warp-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Event Horizon */
.frame-event-horizon {
  padding: 4px;
  background: #000;
  position: relative;
}

.frame-event-horizon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #000 35%, transparent 36%),
    conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #8b5cf6);
  animation: horizon-lensing 3s linear infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-event-horizon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.6);
  box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.4);
  z-index: -1;
}

@keyframes horizon-lensing {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.02); }
  to { transform: rotate(360deg) scale(1); }
}

/* ===== ELEMENTAL SERIES ===== */

/* Inferno Core */
.frame-inferno-core {
  padding: 4px;
  background: radial-gradient(circle, #3d0a00 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-inferno-core::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 1) 0%, transparent 30%),
    conic-gradient(from 0deg, #ff6b00, #ffcc00, #ff4500, #ff6b00);
  animation: inferno-burn 1s ease-in-out infinite;
  filter: blur(3px);
  z-index: -2;
}

.frame-inferno-core::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 100, 0, 0.8) 0%, transparent 30%);
  animation: inferno-rise 2s ease-out infinite;
  z-index: -1;
}

@keyframes inferno-burn {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(180deg); }
}

@keyframes inferno-rise {
  0% { transform: translateY(10px); opacity: 0.8; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* Frost Fortress */
.frame-frost-fortress {
  padding: 4px;
  background: radial-gradient(circle, #0a1a2e 0%, #000 100%);
  position: relative;
}

.frame-frost-fortress::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(200, 230, 255, 0.6), rgba(150, 200, 255, 0.4), rgba(200, 230, 255, 0.6));
  animation: frost-crystal 4s linear infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-frost-fortress::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(200, 230, 255, 0.8);
  box-shadow:
    0 0 20px rgba(200, 230, 255, 0.6),
    inset 0 0 20px rgba(200, 230, 255, 0.2);
  z-index: -1;
}

@keyframes frost-crystal {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Thunder Strike */
.frame-thunder-strike {
  padding: 4px;
  background: radial-gradient(circle, #1a1a2e 0%, #000 100%);
  position: relative;
  animation: thunder-flash 0.3s infinite;
}

.frame-thunder-strike::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255, 255, 100, 0.8) 50%, transparent 60%),
    linear-gradient(45deg, transparent 40%, rgba(255, 255, 150, 0.6) 50%, transparent 60%);
  animation: lightning-strike 2s ease-in-out infinite;
  z-index: -2;
}

.frame-thunder-strike::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 100, 0.7);
  box-shadow:
    0 0 25px rgba(255, 255, 100, 0.8),
    inset 0 0 25px rgba(255, 255, 100, 0.3);
  z-index: -1;
}

@keyframes thunder-flash {
  0%, 80%, 100% { opacity: 1; }
  85%, 95% { opacity: 0.7; }
}

@keyframes lightning-strike {
  0%, 90%, 100% { opacity: 0.3; }
  92%, 94% { opacity: 1; }
}

/* Tidal Wave */
.frame-tidal-wave {
  padding: 4px;
  background: linear-gradient(180deg, #001a33 0%, #003366 50%, #001a33 100%);
  position: relative;
  overflow: hidden;
}

.frame-tidal-wave::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(0, 200, 255, 0.6) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 70%, rgba(0, 150, 200, 0.5) 0%, transparent 35%);
  animation: tidal-surge 3s ease-in-out infinite;
  z-index: -2;
}

.frame-tidal-wave::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(0, 220, 255, 0.8);
  box-shadow:
    0 0 20px rgba(0, 220, 255, 0.6),
    inset 0 0 20px rgba(0, 220, 255, 0.2);
  animation: tidal-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes tidal-surge {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-1px, 3px); }
  75% { transform: translate(-2px, -1px); }
}

@keyframes tidal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Magma Flow */
.frame-magma-flow {
  padding: 4px;
  background: radial-gradient(circle, #2d0a00 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-magma-flow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 60%, rgba(255, 150, 50, 0.9) 0%, transparent 20%),
    radial-gradient(circle at 60% 40%, rgba(255, 100, 0, 0.7) 0%, transparent 25%);
  animation: magma-bubble 2s ease-in-out infinite;
  z-index: -2;
}

.frame-magma-flow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(255, 150, 50, 0.8);
  box-shadow: 0 0 20px rgba(255, 100, 0, 0.7);
  animation: magma-glow 1.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes magma-bubble {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes magma-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Whirlwind */
.frame-whirlwind {
  padding: 4px;
  background: radial-gradient(circle, #1a1a1a 0%, #000 100%);
  position: relative;
}

.frame-whirlwind::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(200, 200, 200, 0.4);
  animation: whirlwind-spin 0.8s linear infinite;
  z-index: -2;
}

.frame-whirlwind::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(200, 200, 200, 0.3), transparent, rgba(200, 200, 200, 0.3), transparent);
  animation: whirlwind-spin-reverse 1s linear infinite;
  z-index: -1;
}

@keyframes whirlwind-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes whirlwind-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Crystal Growth */
.frame-crystal-growth {
  padding: 4px;
  background: radial-gradient(circle, #0a1a2e 0%, #000 100%);
  position: relative;
}

.frame-crystal-growth::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(200, 230, 255, 0.4), rgba(150, 200, 255, 0.6), rgba(200, 230, 255, 0.4));
  animation: crystal-grow 3s ease-in-out infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-crystal-growth::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 230, 255, 0.8) 0%, transparent 20%),
    radial-gradient(circle at 70% 70%, rgba(150, 200, 255, 0.6) 0%, transparent 25%);
  animation: crystal-shimmer 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes crystal-grow {
  0%, 100% { transform: scale(0.95); opacity: 0.4; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes crystal-shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Plasma Storm */
.frame-plasma-storm {
  padding: 4px;
  background: radial-gradient(circle, #1a0520 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-plasma-storm::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #ec4899, #06b6d4, #8b5cf6);
  animation: plasma-storm 1s linear infinite;
  filter: blur(3px);
  opacity: 0.7;
  z-index: -2;
}

.frame-plasma-storm::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 25px rgba(139, 92, 246, 0.8),
    0 0 50px rgba(236, 72, 153, 0.5);
  animation: plasma-flash 0.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes plasma-storm {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes plasma-flash {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Void Collapse */
.frame-void-collapse {
  padding: 4px;
  background: #000;
  position: relative;
}

.frame-void-collapse::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #000 40%, transparent 41%),
    conic-gradient(from 0deg, rgba(100, 50, 150, 0.6), rgba(50, 0, 80, 0.8), rgba(100, 50, 150, 0.6));
  animation: void-collapse 2s ease-in-out infinite;
  z-index: -2;
}

.frame-void-collapse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(100, 50, 150, 0.6);
  box-shadow:
    0 0 30px rgba(100, 50, 150, 0.8),
    inset 0 0 30px rgba(100, 50, 150, 0.3);
  animation: void-pulse 1s ease-in-out infinite;
  z-index: -1;
}

@keyframes void-collapse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(0.9); opacity: 1; }
}

@keyframes void-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Life Bloom */
.frame-life-bloom {
  padding: 4px;
  background: radial-gradient(circle, #0a2e1a 0%, #000 100%);
  position: relative;
}

.frame-life-bloom::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 100, 150, 0.8) 0%, transparent 30%);
  animation: bloom-expand 3s ease-out infinite;
  z-index: -2;
}

.frame-life-bloom::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255, 150, 200, 0.6), rgba(150, 255, 150, 0.6), rgba(255, 150, 200, 0.6));
  animation: bloom-rotate 8s linear infinite;
  filter: blur(2px);
  z-index: -1;
}

@keyframes bloom-expand {
  0% { transform: scale(0.8); opacity: 0.4; }
  50% { opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

@keyframes bloom-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shadow Meld */
.frame-shadow-meld {
  padding: 4px;
  background: radial-gradient(circle, #0a0a0a 0%, #000 100%);
  position: relative;
}

.frame-shadow-meld::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(50, 50, 80, 0.8) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(80, 50, 50, 0.6) 0%, transparent 30%);
  animation: shadow-shift 4s ease-in-out infinite;
  z-index: -2;
}

.frame-shadow-meld::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(50, 50, 80, 0.8);
  box-shadow: 0 0 20px rgba(50, 50, 80, 0.6);
  animation: shadow-pulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes shadow-shift {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

@keyframes shadow-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Light Dawn */
.frame-light-dawn {
  padding: 4px;
  background: radial-gradient(circle, #2e2a1a 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-light-dawn::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 220, 150, 0.9) 0%, transparent 40%);
  animation: dawn-rise 3s ease-in-out infinite;
  z-index: -2;
}

.frame-light-dawn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(255, 220, 150, 0.8);
  box-shadow:
    0 0 30px rgba(255, 220, 150, 0.8),
    inset 0 0 30px rgba(255, 220, 150, 0.3);
  animation: dawn-rays 2s linear infinite;
  z-index: -1;
}

@keyframes dawn-rise {
  0%, 100% { transform: translateY(10px); opacity: 0.5; }
  50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes dawn-rays {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== LEGENDARY SERIES ===== */

/* Time Distortion */
.frame-time-distortion {
  padding: 4px;
  background: radial-gradient(circle, #1a0a2e 0%, #000 100%);
  position: relative;
  animation: temporal-glitch 0.2s infinite;
}

.frame-time-distortion::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #ec4899, #06b6d4, #8b5cf6);
  background:
    conic-gradient(from var(--gradient-angle, 0deg), #8b5cf6, #ec4899, #06b6d4, #8b5cf6);
  animation: temporal-spin 2s ease-in-out infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-time-distortion::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 25px rgba(139, 92, 246, 0.8),
    0 0 50px rgba(236, 72, 153, 0.4);
  animation: temporal-flicker 0.1s infinite;
  z-index: -1;
}

@keyframes temporal-glitch {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-1px, 1px); }
  94% { transform: translate(1px, -1px); }
}

@keyframes temporal-spin {
  0% { --gradient-angle: 0deg; transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.03) rotate(180deg); }
  100% { --gradient-angle: 360deg; transform: scale(1) rotate(360deg); }
}

@keyframes temporal-flicker {
  0%, 19%, 21%, 100% { opacity: 1; }
  20% { opacity: 0.8; }
}

/* Dimension Portal */
.frame-dimension-portal {
  padding: 5px;
  background: radial-gradient(circle, #0a0520 0%, #000 100%);
  position: relative;
}

.frame-dimension-portal::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #06b6d4, #ec4899, #f59e0b, #8b5cf6);
  animation: portal-vortex 1.5s linear infinite;
  filter: blur(3px);
  opacity: 0.8;
  z-index: -2;
}

.frame-dimension-portal::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 4px solid rgba(139, 92, 246, 0.9);
  box-shadow:
    0 0 40px rgba(139, 92, 246, 1),
    inset 0 0 40px rgba(139, 92, 246, 0.4);
  animation: portal-suck 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes portal-vortex {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes portal-suck {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.97); }
}

/* Reality Shatter */
.frame-reality-shatter {
  padding: 4px;
  background: #000;
  position: relative;
  animation: reality-shake 0.15s infinite;
}

.frame-reality-shatter::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #ff0080, #00ffff, #ffff00, #ff00ff, #00ff80);
  animation: shatter-spin 1s linear infinite;
  filter: blur(4px);
  opacity: 0.7;
  z-index: -2;
}

.frame-reality-shatter::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 3px solid rgba(255, 0, 128, 0.8);
  box-shadow: 0 0 30px rgba(255, 0, 128, 0.8);
  animation: shatter-flicker 0.08s infinite;
  z-index: -1;
}

@keyframes reality-shake {
  0%, 90%, 100% { transform: translate(0) rotate(0deg); }
  92% { transform: translate(-1px, 1px) rotate(0.5deg); }
  94% { transform: translate(1px, -1px) rotate(-0.5deg); }
}

@keyframes shatter-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shatter-flicker {
  0%, 15%, 85%, 100% { opacity: 1; }
  20%, 80% { opacity: 0.7; }
}

/* Ascension Light */
.frame-ascension-light {
  padding: 5px;
  background: radial-gradient(circle, #2e2a3a 0%, #0a0a1a 100%);
  position: relative;
  overflow: hidden;
}

.frame-ascension-light::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 220, 150, 0.9) 0%, transparent 50%),
    conic-gradient(from 0deg, rgba(255, 220, 150, 0.6), rgba(255, 255, 200, 0.8), rgba(255, 220, 150, 0.6));
  animation: ascension-rise 4s ease-out infinite;
  z-index: -2;
}

.frame-ascension-light::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 4px solid rgba(255, 220, 150, 0.9);
  box-shadow:
    0 0 40px rgba(255, 220, 150, 1),
    0 0 80px rgba(255, 220, 150, 0.5);
  animation: ascension-glow 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes ascension-rise {
  0% { transform: translateY(20px) scale(0.8); opacity: 0.3; }
  50% { opacity: 1; }
  100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

@keyframes ascension-glow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Chaos Entropy */
.frame-chaos-entropy {
  padding: 4px;
  background: radial-gradient(circle, #1a0a0a 0%, #000 100%);
  position: relative;
  animation: chaos-shift 0.1s infinite;
}

.frame-chaos-entropy::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #ff0080, #00ff80, #8000ff, #ff8000, #0080ff);
  animation: chaos-spin 0.5s linear infinite;
  filter: blur(4px);
  opacity: 0.8;
  z-index: -2;
}

@keyframes chaos-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

@keyframes chaos-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Order Harmony */
.frame-order-harmony {
  padding: 4px;
  background: radial-gradient(circle, #0a1a2e 0%, #000 100%);
  position: relative;
}

.frame-order-harmony::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #06b6d4, #8b5cf6, #06b6d4, #8b5cf6);
  animation: harmony-rotate 8s linear infinite;
  filter: blur(2px);
  z-index: -2;
}

.frame-order-harmony::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 4px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.8),
    inset 0 0 30px rgba(6, 182, 212, 0.3);
  animation: harmony-pulse 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes harmony-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes harmony-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Infinity Loop */
.frame-infinity-loop {
  padding: 4px;
  background: radial-gradient(circle, #0a0a1a 0%, #000 100%);
  position: relative;
}

.frame-infinity-loop::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(139, 92, 246, 0.8);
  border-right-color: rgba(6, 182, 212, 0.6);
  animation: infinity-spin-cw 2s linear infinite;
  z-index: -2;
}

.frame-infinity-loop::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: rgba(236, 72, 153, 0.6);
  border-left-color: rgba(251, 191, 36, 0.4);
  animation: infinity-spin-ccw 2s linear infinite;
  z-index: -1;
}

@keyframes infinity-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes infinity-spin-ccw {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Zero Point */
.frame-zero-point {
  padding: 4px;
  background: #000;
  position: relative;
  overflow: hidden;
}

.frame-zero-point::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 1) 0%, transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.8) 0%, transparent 30%);
  animation: zero-point-pulse 1s ease-in-out infinite;
  z-index: -2;
}

.frame-zero-point::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 4px solid rgba(139, 92, 246, 0.9);
  box-shadow:
    0 0 50px rgba(139, 92, 246, 1),
    inset 0 0 50px rgba(139, 92, 246, 0.5);
  animation: zero-point-energy 0.5s ease-in-out infinite;
  z-index: -1;
}

@keyframes zero-point-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes zero-point-energy {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Omniscience Eye */
.frame-omniscience-eye {
  padding: 4px;
  background: radial-gradient(circle, #0a0520 0%, #000 100%);
  position: relative;
}

.frame-omniscience-eye::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 4px solid rgba(139, 92, 246, 0.8);
  box-shadow:
    0 0 40px rgba(139, 92, 246, 1),
    inset 0 0 40px rgba(139, 92, 246, 0.4);
  animation: eye-open 3s ease-in-out infinite;
  z-index: -2;
}

.frame-omniscience-eye::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 30%);
  animation: eye-glow 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes eye-open {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes eye-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Transcendence Aura (note: there was a typo in the key name, fixing it) */
.frame-transcendence-aura {
  padding: 5px;
  background: radial-gradient(circle, #1a0a3e 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.frame-transcendence-aura::before {
  content: '';
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #8b5cf6, #ec4899, #06b6d4, #f59e0b, #8b5cf6);
  animation: transcendence-spin 4s linear infinite;
  filter: blur(4px);
  opacity: 0.7;
  z-index: -2;
}

.frame-transcendence-aura::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 4px solid rgba(139, 92, 246, 0.9);
  box-shadow:
    0 0 50px rgba(139, 92, 246, 1),
    0 0 100px rgba(236, 72, 153, 0.5),
    inset 0 0 50px rgba(139, 92, 246, 0.4);
  animation: transcendence-glow 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes transcendence-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes transcendence-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== ENHANCED FRAME VISIBILITY ===== */
/* Increase frame padding for better visibility across all sizes */

/* sm (36px) - slightly more visible */
.avatar-frame.size-sm[class*="frame-"] { padding: 1.5px !important; }
.avatar-frame.size-sm[class*="frame-double-"] { padding: 2px !important; }
.avatar-frame.size-sm[class*="frame-thick-"] { padding: 2.5px !important; }

/* md (48px) - more visible */
.avatar-frame.size-md[class*="frame-"] { padding: 2px !important; }
.avatar-frame.size-md[class*="frame-double-"] { padding: 3px !important; }
.avatar-frame.size-md[class*="frame-thick-"] { padding: 3.5px !important; }

/* lg (56px) - significantly more visible (preview size) */
.avatar-frame.size-lg[class*="frame-"] { padding: 3px !important; }
.avatar-frame.size-lg[class*="frame-double-"] { padding: 4px !important; }
.avatar-frame.size-lg[class*="frame-thick-"] { padding: 4.5px !important; }

/* xl (80px) - very visible */
.avatar-frame.size-xl[class*="frame-"] { padding: 4px !important; }
.avatar-frame.size-xl[class*="frame-double-"] { padding: 5px !important; }
.avatar-frame.size-xl[class*="frame-thick-"] { padding: 6px !important; }

/* 2xl (120px) - extra visible */
.avatar-frame.size-2xl[class*="frame-"] { padding: 5px !important; }
.avatar-frame.size-2xl[class*="frame-double-"] { padding: 6px !important; }
.avatar-frame.size-2xl[class*="frame-thick-"] { padding: 7px !important; }

/* profile (150px) - maximum visibility (main profile display) */
.avatar-frame.size-profile[class*="frame-"] { padding: 6px !important; }
.avatar-frame.size-profile[class*="frame-double-"] { padding: 7px !important; }
.avatar-frame.size-profile[class*="frame-thick-"] { padding: 8px !important; }

/* Border-based frames (dotted, dashed, neon) - increase border-width */
.avatar-frame.size-lg[class*="frame-dotted-"],
.avatar-frame.size-lg[class*="frame-dashed-"],
.avatar-frame.size-lg[class*="frame-neon-"] { border-width: 4px !important; }

.avatar-frame.size-xl[class*="frame-dotted-"],
.avatar-frame.size-xl[class*="frame-dashed-"],
.avatar-frame.size-xl[class*="frame-neon-"] { border-width: 5px !important; }

.avatar-frame.size-2xl[class*="frame-dotted-"],
.avatar-frame.size-2xl[class*="frame-dashed-"],
.avatar-frame.size-2xl[class*="frame-neon-"] { border-width: 6px !important; }

.avatar-frame.size-profile[class*="frame-dotted-"],
.avatar-frame.size-profile[class*="frame-dashed-"],
.avatar-frame.size-profile[class*="frame-neon-"] { border-width: 7px !important; }

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .avatar-frame,
  .avatar-frame::before,
  .avatar-frame::after,
  .avatar-frame > .avatar-inner {
    animation: none !important;
  }
}

/* ===== PRINT ===== */

@media print {
  .avatar-frame::before,
  .avatar-frame::after {
    display: none;
  }
}

/* ============================================================================
   TOPIC PAGE ANIMATIONS & FONTS
   ============================================================================
   Source: TopicPage.js useEffect (lines 58-157)
   Purpose: All 54 animation keyframes + 34 animation classes + 21 font families
   Status: Extracted from original code - NO MODIFICATIONS
   ========================================================================== */

/* ============================================================================
   54 KEYFRAME ANIMATIONS
   ========================================================================== */

/* Username/Text Animations (20 keyframes) */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 5px #06b6d4, 0 0 10px #06b6d4; }
  50% { text-shadow: 0 0 10px #06b6d4, 0 0 15px #06b6d4; }
}

@keyframes bounceText {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes shakeHorizontal {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

@keyframes float3D {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
}

@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); opacity: 0.9; }
  80% { transform: translateX(1px); }
}

@keyframes fireText {
  0%, 100% { text-shadow: 0 0 5px #ff4500, 0 0 8px #ff4500; }
  50% { text-shadow: 0 0 8px #ff4500, 0 0 12px #ff6347; }
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes speedBlur {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(2px); opacity: 0.8; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 5px #c084fc, 0 0 10px #c084fc; }
  50% { text-shadow: 0 0 10px #c084fc, 0 0 15px #c084fc; }
}

@keyframes waveText {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(2px); }
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes zoomPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes rotate3D {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes blurFocus {
  0%, 100% { filter: blur(0px); text-shadow: 0 0 8px #06b6d4; }
  50% { filter: blur(1px); text-shadow: 0 0 3px #06b6d4; }
}

@keyframes waveGradient {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

@keyframes goldShimmer {
  0%, 100% { text-shadow: 0 0 5px #ffd700, 0 0 8px #ffed4e; filter: brightness(1); }
  50% { text-shadow: 0 0 8px #ffd700, 0 0 12px #ffed4e; filter: brightness(1.2); }
}

@keyframes swingRotate {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-2deg); }
}

@keyframes bounceScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Flame/Colored Text Animations (10 keyframes) */
@keyframes flamePink {
  0%, 100% { text-shadow: 0 0 5px #ff69b4, 0 0 8px #ff1493; filter: brightness(1.1); }
  50% { text-shadow: 0 0 8px #ff1493, 0 0 12px #ff69b4; filter: brightness(1.2); }
}

@keyframes flameBlue {
  0%, 100% { text-shadow: 0 0 5px #00bfff, 0 0 8px #1e90ff; filter: brightness(1.2); }
  50% { text-shadow: 0 0 8px #1e90ff, 0 0 12px #4169e1; filter: brightness(1.3); }
}

@keyframes flameGreen {
  0%, 100% { text-shadow: 0 0 5px #00ff00, 0 0 8px #32cd32; filter: brightness(1.1); }
  50% { text-shadow: 0 0 8px #32cd32, 0 0 12px #7fff00; filter: brightness(1.2); }
}

@keyframes flamePurple {
  0%, 100% { text-shadow: 0 0 5px #9370db, 0 0 8px #8a2be2; filter: brightness(1.2); }
  50% { text-shadow: 0 0 8px #8a2be2, 0 0 12px #9400d3; filter: brightness(1.3); }
}

@keyframes flameGold {
  0%, 100% { text-shadow: 0 0 5px #ffd700, 0 0 8px #ffaa00; filter: brightness(1.3); }
  50% { text-shadow: 0 0 8px #ffaa00, 0 0 12px #ff8c00; filter: brightness(1.4); }
}

@keyframes flameCyan {
  0%, 100% { text-shadow: 0 0 5px #00ffff, 0 0 8px #00ced1; filter: brightness(1.3); }
  50% { text-shadow: 0 0 8px #00ced1, 0 0 12px #48d1cc; filter: brightness(1.4); }
}

@keyframes flameRainbow {
  0% { text-shadow: 0 0 8px #ff0000; filter: hue-rotate(0deg) brightness(1.2); }
  16% { filter: hue-rotate(30deg); }
  33% { filter: hue-rotate(60deg); }
  50% { filter: hue-rotate(120deg); }
  66% { filter: hue-rotate(240deg); }
  83% { filter: hue-rotate(280deg); }
  100% { filter: hue-rotate(360deg) brightness(1.2); }
}

@keyframes flameWhite {
  0%, 100% { text-shadow: 0 0 5px #ffffff, 0 0 8px #f0f0f0; filter: brightness(1.5); }
  50% { text-shadow: 0 0 8px #ffffff, 0 0 12px #f0f0f0; filter: brightness(1.7); }
}

@keyframes flameDark {
  0%, 100% { text-shadow: 0 0 5px #660000, 0 0 8px #330000; filter: brightness(0.9) contrast(1.5); }
  50% { text-shadow: 0 0 8px #330000, 0 0 12px #990000; filter: brightness(1) contrast(1.8); }
}

@keyframes flameMulticolor {
  0% { text-shadow: 0 0 5px #ff00ff, 0 0 8px #00ffff; filter: hue-rotate(0deg) brightness(1.2); }
  25% { filter: hue-rotate(90deg); }
  50% { filter: hue-rotate(180deg); }
  75% { filter: hue-rotate(270deg); }
  100% { filter: hue-rotate(360deg) brightness(1.2); }
}

/* ============================================================================
   34 ANIMATION CLASSES
   ========================================================================== */

.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
.animate-bounce-text { animation: bounceText 0.6s ease-in-out infinite; }
.animate-shake-horizontal { animation: shakeHorizontal 0.5s ease-in-out infinite; }
.animate-3d-float { animation: float3D 2s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 1s ease-in-out infinite; }
.animate-glitch { animation: glitch 1s steps(2) infinite; }
.animate-fire-text { animation: fireText 2s ease-in-out infinite; }
.animate-rainbow { animation: rainbow 3s linear infinite; }
.animate-speed-blur { animation: speedBlur 0.8s ease-in-out infinite; }
.animate-flicker { animation: flicker 1.5s ease-in-out infinite; }
.animate-neon-pulse { animation: neonPulse 1.5s ease-in-out infinite; }
.animate-wave-text { animation: waveText 2s ease-in-out infinite; }
.animate-gradient-flow { background: linear-gradient(90deg, #ff0080, #ff8c00, #40e0d0, #9370db, #ff0080); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradientFlow 3s linear infinite; display: inline-block; }
.animate-zoom-pulse { animation: zoomPulse 1.2s ease-in-out infinite; }
.animate-rotate-3d { animation: rotate3D 4s ease-in-out infinite; }
.animate-blur-focus { animation: blurFocus 2.5s ease-in-out infinite; }
.animate-wave-gradient { background: linear-gradient(45deg, #06b6d4, #3b82f6, #8b5cf6, #06b6d4); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: waveGradient 3s ease-in-out infinite; display: inline-block; }
.animate-gold-shimmer { animation: goldShimmer 2s ease-in-out infinite; }
.animate-swing-rotate { animation: swingRotate 2s ease-in-out infinite; }
.animate-bounce-scale { animation: bounceScale 1s ease-in-out infinite; }
.animate-flame-pink { animation: flamePink 2s ease-in-out infinite; }
.animate-flame-blue { animation: flameBlue 2.2s ease-in-out infinite; }
.animate-flame-green { animation: flameGreen 2.5s ease-in-out infinite; }
.animate-flame-purple { animation: flamePurple 2.3s ease-in-out infinite; }
.animate-flame-gold { animation: flameGold 2s ease-in-out infinite; }
.animate-flame-cyan { animation: flameCyan 2.1s ease-in-out infinite; }
.animate-flame-rainbow { animation: flameRainbow 4s linear infinite; }
.animate-flame-white { animation: flameWhite 1.8s ease-in-out infinite; }
.animate-flame-dark { animation: flameDark 2.4s ease-in-out infinite; }
.animate-flame-multicolor { animation: flameMulticolor 3s linear infinite; }

/* ============================================================================
   21 FONT FAMILY CLASSES (Google Fonts)
   ========================================================================== */

.font-pacifico { font-family: 'Pacifico', cursive; }
.font-sacramento { font-family: 'Sacramento', cursive; }
.font-cinzel { font-family: 'Cinzel', serif; }
.font-lobster { font-family: 'Lobster', cursive; }
.font-kaushan { font-family: 'Kaushan Script', cursive; }
.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }
.font-audiowide { font-family: 'Audiowide', cursive; }
.font-fredoka { font-family: 'Fredoka One', cursive; }
.font-vt323 { font-family: 'VT323', monospace; }
.font-righteous { font-family: 'Righteous', cursive; }
.font-bangers { font-family: 'Bangers', cursive; }
.font-russo-one { font-family: 'Russo One', sans-serif; }
.font-bungee-shade { font-family: 'Bungee Shade', cursive; }
.font-permanent-marker { font-family: 'Permanent Marker', cursive; }
.font-press-start { font-family: 'Press Start 2P', cursive; }
.font-metal-mania { font-family: 'Metal Mania', cursive; }
.font-luckiest-guy { font-family: 'Luckiest Guy', cursive; }
.font-monoton { font-family: 'Monoton', cursive; }
.font-nosifer { font-family: 'Nosifer', cursive; }
.font-creepster { font-family: 'Creepster', cursive; }
.font-faster-one { font-family: 'Faster One', cursive; }

/* Interaction animations: reaction counts, bottom sheet, fade-in */

@keyframes countUp {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-6px); opacity: 0.6; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes countDown {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.6; }
  100% { transform: translateY(0); opacity: 1; }
}

.count-anim-up { animation: countUp 0.35s ease-out; }
.count-anim-down { animation: countDown 0.35s ease-out; }

@keyframes reactionFlash {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6); }
  100% { box-shadow: 0 0 0 6px rgba(250, 204, 21, 0); }
}

.animate-reaction-flash { animation: reactionFlash 0.6s ease-out; }

@keyframes bottomSheetIn {
  0% { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-bottomSheetIn { animation: bottomSheetIn 0.25s ease-out; }
.animate-fadeIn { animation: fadeIn 0.2s ease-out; }

/* Reply box transitions */
@keyframes doubleFlip {
  0% { transform: rotateY(0deg); opacity: 1; }
  50% { opacity: 0; }
  100% { transform: rotateY(360deg); opacity: 1; }
}
.flip-animation { animation: doubleFlip 0.6s ease-in-out forwards; transform-style: preserve-3d; }

@keyframes bubbleAppear {
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.bubble-appear { animation: bubbleAppear 0.5s ease-out forwards; }

@keyframes separatorSlide {
  0% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}
.separator-slide { animation: separatorSlide 0.4s ease-out forwards; }

/* Bubble and triangle animations + like heart effects */

/* Floating travel bubble used on new message */
@keyframes bubble-travel {
  0% { transform: scale(0.2) translate(0, 0); opacity: 0.9; border-radius: 50%; }
  25% { transform: scale(0.4) translate(calc(var(--target-x) * 0.25), calc(var(--target-y) * 0.25)); opacity: 1; border-radius: 45%; }
  50% { transform: scale(0.6) translate(calc(var(--target-x) * 0.5), calc(var(--target-y) * 0.5)); opacity: 1; border-radius: 35%; }
  75% { transform: scale(0.8) translate(calc(var(--target-x) * 0.75), calc(var(--target-y) * 0.75)); opacity: 0.8; border-radius: 25%; }
  100% { transform: scale(1) translate(var(--target-x), var(--target-y)); opacity: 0; border-radius: 16px; }
}
.floating-bubble { animation: bubble-travel 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Integrate bubble on appear */
@keyframes bubble-integrate {
  0% { transform: scale(0.4) translateY(-30px); opacity: 0; }
  30% { transform: scale(1.08) translateY(0px); opacity: 0.8; }
  45% { transform: scale(0.95) translateY(-8px); opacity: 1; }
  55% { transform: scale(1.02) translateY(0px); }
  60% { transform: scale(1.05) translateX(-8px) rotate(-2deg); }
  65% { transform: scale(1.03) translateX(10px) rotate(2deg); }
  80% { transform: scale(1) translateX(-4px) rotate(0deg); }
  100% { transform: scale(1); opacity: 1; }
}
.new-message-appear { animation: bubble-integrate 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Like heart fill/empty effects */
@keyframes heartFillLike {
  0% { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); transform: scale(1) rotate(0deg); }
  5% { transform: scale(1.15) rotate(-3deg); }
  10% { -webkit-clip-path: inset(90% 0 0 0); clip-path: inset(90% 0 0 0); transform: scale(1.1) rotate(3deg); }
  20% { -webkit-clip-path: inset(80% 0 0 0); clip-path: inset(80% 0 0 0); transform: scale(1.08) rotate(2deg); }
  30% { -webkit-clip-path: inset(70% 0 0 0); clip-path: inset(70% 0 0 0); transform: scale(1.05) rotate(1deg); }
  50% { -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0); transform: scale(1.02) rotate(1deg); }
  80% { -webkit-clip-path: inset(20% 0 0 0); clip-path: inset(20% 0 0 0); transform: scale(1.01); }
  100% { -webkit-clip-path: inset(0% 0 0 0); clip-path: inset(0% 0 0 0); transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(220,38,38,.8)); }
}
@keyframes heartEmptyUnlike {
  0% { -webkit-clip-path: inset(0% 0 0 0); clip-path: inset(0% 0 0 0); transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(220,38,38,.8)); }
  10% { -webkit-clip-path: inset(10% 0 0 0); clip-path: inset(10% 0 0 0); transform: scale(1.1) rotate(-3deg); }
  30% { -webkit-clip-path: inset(30% 0 0 0); clip-path: inset(30% 0 0 0); transform: scale(1.05) rotate(-1deg); }
  50% { -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0); transform: scale(1.02) rotate(-1deg); }
  80% { -webkit-clip-path: inset(80% 0 0 0); clip-path: inset(80% 0 0 0); transform: scale(1.01); }
  100% { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); transform: scale(1) rotate(0deg); filter: none; }
}
.heart-fill-like-animation { animation: heartFillLike 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
.heart-empty-unlike-animation { animation: heartEmptyUnlike 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; }
.heart-filled { -webkit-clip-path: inset(0% 0 0 0) !important; clip-path: inset(0% 0 0 0) !important; }
.heart-empty { -webkit-clip-path: inset(100% 0 0 0) !important; clip-path: inset(100% 0 0 0) !important; }

/* Floating heart to menu */
@keyframes floatingHeartToMenu {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  5% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  65% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
  85% { transform: translate(calc(-50% + var(--target-x) * .7), calc(-50% + var(--target-y) * .7)) scale(0.4); opacity:1; }
  100% { transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(0.1); opacity: 0; }
}
.floating-heart-animation { animation: floatingHeartToMenu 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Bubble pop */
@keyframes bubblePop { 0% { transform: scale(0.3); opacity: .9; } 50% { transform: scale(1.2); opacity: .7; } 100% { transform: scale(2.5); opacity: 0; } }
.bubble-pop-animation { box-shadow: 0 0 30px rgba(147,51,234,.6), 0 0 60px rgba(59,130,246,.4); }

/* Triangle animations */
@keyframes triangleGrow { 0% { transform: scale(0) rotate(-15deg); opacity: 0; } 45% { transform: scale(1.15) rotate(3deg); opacity: .9; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes triangleGlow { 0%,100% { opacity:.25; } 50% { opacity:.5; } }
@keyframes triangleSparkle { 0%,100% { opacity:.4; transform: scale(1); } 25% { opacity:.8; transform: scale(1.3); } 50% { opacity:.6; transform: scale(.8);} 75% { opacity:.9; transform: scale(1.1);} }
@keyframes triangleSlideIn { 0% { transform: translateY(-50%) translateX(-10px) scale(.3); opacity:0; } 60% { transform: translateY(-50%) translateX(2px) scale(1.1); opacity:.8; } 100% { transform: translateY(-50%) translateX(0) scale(1); opacity:1; } }

/* Connection line pulse */
@keyframes connectionFlow { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }


/* ===== ANIMATIONS LIKE (CŒUR) ===== */
/* Fichier: likes.css */
/* Contient: Animations du cœur, états filled/empty, transitions */
/* Utilisé par: MessageBubble.js, useLikeManager.js */

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.4) rotate(-10deg);
  }
  40% {
    transform: scale(1.2) rotate(10deg);
  }
  60% {
    transform: scale(1.4) rotate(-10deg);
  }
  80% {
    transform: scale(1.2) rotate(5deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heartFillLike {
  0% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
    transform: scale(1) rotate(0deg);
  }
  5% {
    transform: scale(1.15) rotate(-3deg);
  }
  10% {
    -webkit-clip-path: inset(90% 0 0 0);
            clip-path: inset(90% 0 0 0);
    transform: scale(1.1) rotate(3deg);
  }
  15% {
    transform: scale(1.12) rotate(-2deg);
  }
  20% {
    -webkit-clip-path: inset(80% 0 0 0);
            clip-path: inset(80% 0 0 0);
    transform: scale(1.08) rotate(2deg);
  }
  25% {
    transform: scale(1.1) rotate(-1deg);
  }
  30% {
    -webkit-clip-path: inset(70% 0 0 0);
            clip-path: inset(70% 0 0 0);
    transform: scale(1.05) rotate(1deg);
  }
  35% {
    transform: scale(1.08);
  }
  40% {
    -webkit-clip-path: inset(60% 0 0 0);
            clip-path: inset(60% 0 0 0);
    transform: scale(1.03) rotate(-1deg);
  }
  45% {
    transform: scale(1.06);
  }
  50% {
    -webkit-clip-path: inset(50% 0 0 0);
            clip-path: inset(50% 0 0 0);
    transform: scale(1.02) rotate(1deg);
  }
  55% {
    transform: scale(1.04);
  }
  60% {
    -webkit-clip-path: inset(40% 0 0 0);
            clip-path: inset(40% 0 0 0);
    transform: scale(1.01);
  }
  65% {
    transform: scale(1.03) rotate(-0.5deg);
  }
  70% {
    -webkit-clip-path: inset(30% 0 0 0);
            clip-path: inset(30% 0 0 0);
    transform: scale(1.01) rotate(0.5deg);
  }
  75% {
    transform: scale(1.02);
  }
  80% {
    -webkit-clip-path: inset(20% 0 0 0);
            clip-path: inset(20% 0 0 0);
    transform: scale(1.01);
  }
  85% {
    -webkit-clip-path: inset(10% 0 0 0);
            clip-path: inset(10% 0 0 0);
    transform: scale(1.01);
  }
  90% {
    -webkit-clip-path: inset(5% 0 0 0);
            clip-path: inset(5% 0 0 0);
  }
  95% {
    -webkit-clip-path: inset(2% 0 0 0);
            clip-path: inset(2% 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0% 0 0 0);
            clip-path: inset(0% 0 0 0);
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.8));
  }
}

@keyframes heartEmptyUnlike {
  0% {
    -webkit-clip-path: inset(0% 0 0 0);
            clip-path: inset(0% 0 0 0);
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.8));
  }
  5% {
    transform: scale(1.15) rotate(3deg);
    -webkit-clip-path: inset(2% 0 0 0);
            clip-path: inset(2% 0 0 0);
  }
  10% {
    -webkit-clip-path: inset(10% 0 0 0);
            clip-path: inset(10% 0 0 0);
    transform: scale(1.1) rotate(-3deg);
  }
  15% {
    transform: scale(1.12) rotate(2deg);
  }
  20% {
    -webkit-clip-path: inset(20% 0 0 0);
            clip-path: inset(20% 0 0 0);
    transform: scale(1.08) rotate(-2deg);
  }
  25% {
    transform: scale(1.1) rotate(1deg);
  }
  30% {
    -webkit-clip-path: inset(30% 0 0 0);
            clip-path: inset(30% 0 0 0);
    transform: scale(1.05) rotate(-1deg);
  }
  35% {
    transform: scale(1.08);
  }
  40% {
    -webkit-clip-path: inset(40% 0 0 0);
            clip-path: inset(40% 0 0 0);
    transform: scale(1.03) rotate(1deg);
  }
  45% {
    transform: scale(1.06);
  }
  50% {
    -webkit-clip-path: inset(50% 0 0 0);
            clip-path: inset(50% 0 0 0);
    transform: scale(1.02) rotate(-1deg);
  }
  55% {
    transform: scale(1.04);
  }
  60% {
    -webkit-clip-path: inset(60% 0 0 0);
            clip-path: inset(60% 0 0 0);
    transform: scale(1.01);
  }
  65% {
    transform: scale(1.03) rotate(0.5deg);
  }
  70% {
    -webkit-clip-path: inset(70% 0 0 0);
            clip-path: inset(70% 0 0 0);
    transform: scale(1.01) rotate(-0.5deg);
  }
  75% {
    transform: scale(1.02);
  }
  80% {
    -webkit-clip-path: inset(80% 0 0 0);
            clip-path: inset(80% 0 0 0);
    transform: scale(1.01);
  }
  85% {
    -webkit-clip-path: inset(90% 0 0 0);
            clip-path: inset(90% 0 0 0);
    transform: scale(1.01);
  }
  90% {
    -webkit-clip-path: inset(95% 0 0 0);
            clip-path: inset(95% 0 0 0);
  }
  95% {
    -webkit-clip-path: inset(98% 0 0 0);
            clip-path: inset(98% 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
    transform: scale(1) rotate(0deg);
    filter: none;
  }
}

/* Classe d'animation pour like (remplissage cœur) */
.heart-fill-like-animation {
  animation: heartFillLike 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

/* Classe d'animation pour unlike (vidage cœur) */
.heart-empty-unlike-animation {
  animation: heartEmptyUnlike 1.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards !important;
}

/* États persistants du cœur */
.heart-filled {
  -webkit-clip-path: inset(0% 0 0 0) !important;
          clip-path: inset(0% 0 0 0) !important;
}

.heart-empty {
  -webkit-clip-path: inset(100% 0 0 0) !important;
          clip-path: inset(100% 0 0 0) !important;
}

/* ===== ANIMATIONS MESSAGE (APPARITION BULLES) ===== */
/* Fichier: messages.css */
/* Contient: Animations de voyage de bulle, intégration des nouveaux messages */
/* Utilisé par: TopicPage.js */
/* Variables CSS dynamiques: --target-x, --target-y (définies en JS) */

@keyframes bubble-travel {
  0% {
    transform: scale(0.2) translate(0, 0);
    opacity: 0.9;
    border-radius: 50%;
  }
  25% {
    transform: scale(0.4) translate(calc(var(--target-x) * 0.25), calc(var(--target-y) * 0.25));
    opacity: 1;
    border-radius: 45%;
  }
  50% {
    transform: scale(0.6) translate(calc(var(--target-x) * 0.5), calc(var(--target-y) * 0.5));
    opacity: 1;
    border-radius: 35%;
  }
  75% {
    transform: scale(0.8) translate(calc(var(--target-x) * 0.75), calc(var(--target-y) * 0.75));
    opacity: 0.8;
    border-radius: 25%;
  }
  100% {
    transform: scale(1) translate(var(--target-x), var(--target-y));
    opacity: 0;
    border-radius: 16px;
  }
}

/* Bulle qui voyage (floating du like vers le compteur) */
.floating-bubble {
  position: fixed;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(209, 213, 219, 0.5);
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
  animation: bubble-travel 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes bubble-integrate {
  0% {
    transform: scale(0.4) translateY(-30px);
    opacity: 0;
  }

  /* Premier rebond - encore plus doux */
  30% {
    transform: scale(1.08) translateY(0px);
    opacity: 0.8;
  }

  /* Deuxième rebond */
  45% {
    transform: scale(0.95) translateY(-8px);
    opacity: 1;
  }

  /* Installation douce */
  55% {
    transform: scale(1.02) translateY(0px);
  }

  /* Vibrations légères - PLUS VISIBLES */
  60% {
    transform: scale(1.05) translateX(-8px) rotate(-2deg);
  }
  65% {
    transform: scale(1.03) translateX(10px) rotate(2deg);
  }
  70% {
    transform: scale(1.02) translateX(-6px) rotate(-1deg);
  }
  75% {
    transform: scale(1.01) translateX(8px) rotate(1deg);
  }
  80% {
    transform: scale(1) translateX(-4px) rotate(0deg);
  }
  85% {
    transform: scale(1) translateX(2px);
  }
  90% {
    transform: scale(1) translateX(0px);
  }
  100% {
    transform: scale(1) translateX(0px);
    opacity: 1;
  }
}

/* Animation d'apparition/intégration pour nouveaux messages */
.new-message-appear {
  animation: bubble-integrate 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== ANIMATIONS RÉACTIONS (POP & CŒUR FLOTTANT) ===== */
/* Fichier: reactions.css */
/* Contient: Animation pop de bulle, cœur qui flotte vers le bouton like */
/* Utilisé par: TopicPage.js, useLikeManager.js */
/* Variables CSS dynamiques: --target-x, --target-y (position du bouton like) */

@keyframes bubblePop {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.bubble-pop-animation {
  box-shadow: 0 0 30px rgba(147, 51, 234, 0.6), 0 0 60px rgba(59, 130, 246, 0.4);
}

@keyframes floatingHeartToMenu {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  5% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.3) rotate(-8deg);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) scale(1.4) rotate(8deg);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  85% {
    transform: translate(calc(-50% + var(--target-x) * 0.7), calc(-50% + var(--target-y) * 0.7)) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) scale(0.1);
    opacity: 0;
  }
}

.floating-heart-animation {
  animation: floatingHeartToMenu 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===== ANIMATIONS TRIANGLES MANGA ===== */
/* Fichier: triangles.css */
/* Contient: Styles et animations des triangles de bulle (style manga) */
/* Utilisé par: MessageBubble.js, TopicPage.js (sélecteurs en cascade) */

/* Classes de base pour les triangles */
.triangle-manga {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.triangle-highlight {
  transition: all 0.4s ease;
}

.triangle-shine {
  transition: all 0.3s ease;
}

.triangle-border {
  transition: all 0.4s ease;
}

.triangle-shine-dot {
  transition: all 0.3s ease;
}

/* Animations d'apparition organique style BD */
.new-message-appear .triangle-manga {
  animation: triangleGrow 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.new-message-appear .triangle-highlight {
  animation: triangleGlow 2s ease-out 0.2s;
}

.new-message-appear .triangle-shine {
  animation: triangleSparkle 1.5s ease-in-out 0.5s;
}

/* Keyframes pour croissance du triangle */
@keyframes triangleGrow {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  20% {
    transform: scale(0.3) rotate(-8deg);
    opacity: 0.6;
  }
  45% {
    transform: scale(1.15) rotate(3deg);
    opacity: 0.9;
  }
  65% {
    transform: scale(0.9) rotate(-2deg);
    opacity: 1;
  }
  80% {
    transform: scale(1.05) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Keyframes pour effet glow du triangle */
@keyframes triangleGlow {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
}

/* Keyframes pour scintillement du triangle */
@keyframes triangleSparkle {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.3);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

/* Effet hover sur triangles (style manga naturel) */
.message-bubble:hover .triangle-manga {
  transform: scale(1.1) rotate(3deg);
  filter: brightness(1.2) saturate(1.15);
}

.message-bubble:hover .triangle-border {
  stroke: "rgba(255,255,255,0.8)";
  strokeWidth: "1.5";
}

.message-bubble:hover .triangle-highlight {
  opacity: 0.6;
  transform: scale(1.08);
}

.message-bubble:hover .triangle-shine {
  opacity: 0.8;
  transform: scale(1.3);
}

.message-bubble:hover .triangle-shine-dot {
  opacity: 1;
  transform: scale(1.4);
}

/* ===== BUBBLE COLOR PALETTE - CSS VARIABLES ===== */
/* Définit les variables de couleur pour les 18 thèmes de bulles */
/* Réduit la répétition et rend le système plus maintenable */
/* Usage: Appliquer data-bubble-color au .speech-bubble ou utiliser .bubble-color--{name} */

:root {
  /* FREE COLORS (10) */
  --bubble-white: #f8fafc;
  --bubble-violet: #8b5cf6;
  --bubble-cyan: #0891b2;
  --bubble-green: #059669;
  --bubble-orange: #f97316;
  --bubble-pink: #f472b6;
  --bubble-indigo: #6366f1;
  --bubble-emerald: #10b981;
  --bubble-sapphire: #3b82f6;
  --bubble-copper: #dc2626;

  /* PREMIUM COLORS (8) */
  --bubble-glass: rgba(30, 30, 30, 0.85);
  --bubble-rainbow: #f472b6; /* animé dynamiquement en JS */
  --bubble-galaxy: #4c1d95;
  --bubble-sunset: #f97316;
  --bubble-neon: #10b981;
  --bubble-gold: #f59e0b;
  --bubble-aurora: #8b5cf6;
  --bubble-fire: #dc2626;
}

/* Fallback for older browsers without CSS variables */
.speech-bubble-reply[data-bubble-color="white"]::before { border-right-color: #f8fafc; }
.speech-bubble-reply[data-bubble-color="violet"]::before { border-right-color: #8b5cf6; }
.speech-bubble-reply[data-bubble-color="cyan"]::before { border-right-color: #0891b2; }
.speech-bubble-reply[data-bubble-color="green"]::before { border-right-color: #059669; }
.speech-bubble-reply[data-bubble-color="orange"]::before { border-right-color: #f97316; }
.speech-bubble-reply[data-bubble-color="pink"]::before { border-right-color: #f472b6; }
.speech-bubble-reply[data-bubble-color="indigo"]::before { border-right-color: #6366f1; }
.speech-bubble-reply[data-bubble-color="glass"]::before { border-right-color: rgba(30, 30, 30, 0.85); }
.speech-bubble-reply[data-bubble-color="emerald"]::before { border-right-color: #10b981; }
.speech-bubble-reply[data-bubble-color="sapphire"]::before { border-right-color: #3b82f6; }
.speech-bubble-reply[data-bubble-color="rainbow"]::before { border-right-color: #f472b6; }
.speech-bubble-reply[data-bubble-color="galaxy"]::before { border-right-color: #4c1d95; }
.speech-bubble-reply[data-bubble-color="sunset"]::before { border-right-color: #f97316; }
.speech-bubble-reply[data-bubble-color="neon"]::before { border-right-color: #10b981; }
.speech-bubble-reply[data-bubble-color="gold"]::before { border-right-color: #f59e0b; }
.speech-bubble-reply[data-bubble-color="copper"]::before { border-right-color: #dc2626; }
.speech-bubble-reply[data-bubble-color="aurora"]::before { border-right-color: #8b5cf6; }
.speech-bubble-reply[data-bubble-color="fire"]::before { border-right-color: #dc2626; }

/* ===== STYLES BULLES DE MESSAGE ===== */
/* Fichier: message-bubble.css */
/* Contient: Styles principaux des bulles, speech-bubble, nettoyage vidéos */
/* Utilisé par: MessageBubble.js, TopicPage.js */

/* Classe principale bulle */
.speech-bubble {
  position: relative;
}

/* Nettoyage contenu résiduel - empêche vidéos résiduelles d'ajouter hauteur */
/* Limite cleanup aux vrais posts (id commence par msg-) donc éditeur/preview restent visibles */
.message-bubble[id^="msg-"] .video-embed-container,
.message-bubble[id^="msg-"] .video-embed-container-mini,
.message-bubble[id^="msg-"] iframe[src*="youtube.com/embed"],
.message-bubble[id^="msg-"] iframe[src*="nicovideo.jp"],
.message-bubble[id^="msg-"] iframe[src*="twitch.tv"],
.message-bubble[id^="msg-"] .bubble-video-container,
.message-bubble[id^="msg-"] .video-embed-thumbnail,
.message-bubble[id^="msg-"] .click-indicator,
.message-bubble[id^="msg-"] .relative.block.my-2.group {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Classe bulle post original */
.speech-bubble-original {
  /* Styles additionnels définis en bubble-themes.css */
}

/* Classe conteneur média */
.media-attachment-container {
  position: relative;
  margin-top: -10px;
  margin-bottom: 1.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
}

.media-attachment-left {
  margin-left: 4rem;
  margin-right: 3rem;
}

.media-attachment-right {
  margin-right: 3.5rem;
  margin-left: 2rem;
}

/* ===== STYLES ATTACHEMENTS MÉDIAS ===== */
/* Fichier: media-attachment.css */
/* Contient: Styles container média, headers, footers, previews */
/* Utilisé par: MediaAttachment.js */

.media-attachment {
  max-width: 500px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: 8px;
}

.media-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.media-footer {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.media-preview {
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.media-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.error-placeholder {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.click-indicator {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bubble-error-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: rgba(40, 0, 0, 0.2);
  border: 1px dashed rgba(255, 100, 100, 0.3);
  border-radius: 16px;
  cursor: pointer;
}

.bubble-error-placeholder:hover {
  background: rgba(40, 0, 0, 0.3);
  border-color: rgba(255, 100, 100, 0.5);
}

/* ===== STYLES CONNECTEURS & TRIANGLES MÉDIA ===== */
/* Fichier: connectors.css */
/* Contient: Connecteurs visuels, triangles média, lignes de connexion, animations pulse */
/* Utilisé par: bubble-themes.css, MessageBubble.js (données-attributes) */
/* Dépendances: Importé par bubble-themes.css */

/* Connecteur visuel principal */
.media-connector {
  position: absolute;
  top: -8px;
  height: 20px;
  width: 60px;
  border-radius: 10px;
  border: 2px dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  opacity: 0.7;
  z-index: 1;
}

.media-connector-left {
  left: -30px;
  transform: rotate(-15deg);
}

.media-connector-right {
  right: -30px;
  transform: rotate(15deg);
}

.connector-dots {
  display: flex;
  gap: 3px;
}

.connector-dots .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.8;
  animation: pulse 2s infinite;
}

.connector-dots .dot:nth-child(2) {
  animation-delay: 0.3s;
}

.connector-dots .dot:nth-child(3) {
  animation-delay: 0.6s;
}

/* Triangle de connexion */
.media-triangle {
  position: absolute;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 10px solid;
  z-index: 2;
}

.media-triangle-left {
  left: 20px;
}

.media-triangle-right {
  right: 20px;
}

/* Ligne de liaison dans le header */
.connection-line {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 40px;
  opacity: 0.6;
  border-radius: 1px;
}

.connection-line-left {
  left: 10px;
}

.connection-line-right {
  right: 10px;
}

/* Animation pour les points du connecteur */
@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Animations pour les traits de connexion horizontaux */
@keyframes connectionFlow {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(139, 92, 246, 0.6),
      0 0 16px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow:
      0 0 12px rgba(139, 92, 246, 0.8),
      0 0 24px rgba(139, 92, 246, 0.4);
  }
}

@keyframes flowPulse {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(95px);
    opacity: 0;
  }
}

@keyframes startPulse {
  0%, 100% {
    opacity: 0.8;
    transform: translateY(-50%) scale(1);
    box-shadow:
      0 0 10px #8b5cf6,
      0 0 20px rgba(139, 92, 246, 0.5);
    box-shadow:
      0 0 10px var(--accent-color, #8b5cf6),
      0 0 20px rgba(139, 92, 246, 0.5);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
    box-shadow:
      0 0 15px #8b5cf6,
      0 0 30px rgba(139, 92, 246, 0.7);
    box-shadow:
      0 0 15px var(--accent-color, #8b5cf6),
      0 0 30px rgba(139, 92, 246, 0.7);
  }
}

/* ===== STYLES ÉDITEUR WYSIWYG ===== */
/* Fichier: editor.css */
/* Contient: Styles pour l'éditeur de contenu riche, formatage texte */
/* Utilisé par: TopicPage.js, RichContentEditor.js */

/* Placeholder quand éditeur vide */
#wysiwyg-editor:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
}

#wysiwyg-editor:focus:before {
  display: none;
}

#wysiwyg-editor {
  position: relative;
}

/* Styles pour le texte formaté dans l'éditeur */
#wysiwyg-editor strong {
  font-weight: bold;
}

#wysiwyg-editor em {
  font-style: italic;
}

#wysiwyg-editor code {
  background: #1f2937;
  color: #10b981;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

#wysiwyg-editor a {
  color: #2563eb;
  text-decoration: underline;
}

#wysiwyg-editor a:hover {
  text-decoration: none;
}

#wysiwyg-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

/* Styles pour les images en erreur */
#wysiwyg-editor img[alt*="Erreur"] {
  background-color: #fef2f2;
  border: 2px dashed #ef4444;
  padding: 10px;
  color: #ef4444;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== STYLES IMAGES & MINIATURES ===== */
/* Fichier: images.css */
/* Contient: Styles pour les miniatures, prévisualisations d'images */
/* Utilisé par: MediaAttachment.js, editor-toolbar.css */

/* Styles pour les miniatures d'images */
.image-thumbnail {
  transition: all 0.3s ease;
  display: block;
}

.image-thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
  border-color: #3b82f6 !important;
}

.image-container {
  display: inline-block;
  vertical-align: top;
}

/* Styles pour les images d'erreur */
.image-thumbnail[alt*="existe plus"] {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
  cursor: not-allowed;
}

.image-thumbnail[alt*="existe plus"]:hover {
  transform: none;
  box-shadow: none;
}

/* Bubble themes, triangle tails, media bubbles, connection lines, and responsive tweaks */

/* ===== Speech Bubbles (base + tails) ===== */
.speech-bubble {
  position: relative;
  transform: translateZ(0);
  border-radius: 24px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.15),
    0 2px 4px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 60%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 22px solid #f8fafc; /* default */
  z-index: 10;
  filter:
    drop-shadow(-3px 2px 4px rgba(0,0,0,0.18))
    drop-shadow(-1px 1px 2px rgba(0,0,0,0.12))
    drop-shadow(-4px 4px 8px rgba(0,0,0,0.12));
}

.speech-bubble::after {
  content: '';
  position: absolute;
  left: -26px;
  top: 60%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 23px solid transparent; /* no outline */
  z-index: 9;
  filter: none;
  pointer-events: none;
}

/* Original post tail color */
.speech-bubble-original::before { border-right-color: #8b5cf6; }

/* Reply tail colors by bubble theme - defined in bubble-colors-variables.css */

.speech-bubble:hover {
  transform: translateZ(0) translateY(-2px);
  box-shadow:
    0 8px 25px rgba(0,0,0,0.2),
    0 4px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ===== Media Attachment Bubbles ===== */
.media-attachment-container {
  position: relative;
  margin-top: -10px;
  margin-bottom: 1.5rem;
  z-index: 10; /* Higher than connection line (z-4) to cover line end */
  display: flex;
  align-items: center;
}

.media-attachment-left { margin-left: 3.5rem; margin-right: 2.5rem; }
.media-attachment-right { margin-right: 3rem; margin-left: 1.5rem; }

.media-speech-bubble {
  max-width: 520px;
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border: 1px solid var(--accent-color-20, rgba(139, 92, 246, 0.2));
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 15px rgba(139, 92, 246, 0.1),
    0 2px 8px rgba(139, 92, 246, 0.05);
  box-shadow:
    0 4px 15px var(--accent-color-10, rgba(139, 92, 246, 0.1)),
    0 2px 8px var(--accent-color-05, rgba(139, 92, 246, 0.05));
}

.media-speech-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.05) 0%,
    transparent 50%,
    rgba(99, 102, 241, 0.05) 100%);
  background: linear-gradient(135deg,
    var(--accent-color-05, rgba(139, 92, 246, 0.05)) 0%,
    transparent 50%,
    var(--accent-color-05, rgba(99, 102, 241, 0.05)) 100%);
  pointer-events: none;
  border-radius: 24px;
}

.media-speech-bubble::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
  background: linear-gradient(90deg, transparent, var(--accent-color-40, rgba(139, 92, 246, 0.4)), transparent);
}

.media-speech-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.4);
  border-color: var(--accent-color-40, rgba(139, 92, 246, 0.4));
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(139, 92, 246, 0.2);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 6px 20px var(--accent-color-20, rgba(139, 92, 246, 0.2));
}

/* Connecteur visuel et triangles (entre bulle et média) */
.media-connector {
  position: absolute;
  top: -8px;
  height: 20px;
  width: 60px;
  border-radius: 10px;
  border: 2px dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  opacity: 0.7;
  z-index: 1;
}
.media-connector-left { left: -30px; transform: rotate(-15deg); }
.media-connector-right { right: -30px; transform: rotate(15deg); }

.connector-dots { display: flex; gap: 3px; }
.connector-dots .dot { width: 4px; height: 4px; border-radius: 50%; opacity: 0.8; animation: pulse 2s infinite; }
.connector-dots .dot:nth-child(2) { animation-delay: 0.3s; }
.connector-dots .dot:nth-child(3) { animation-delay: 0.6s; }

.media-triangle {
  position: absolute;
  top: -8px;
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 10px solid;
  z-index: 2;
}
.media-triangle-left { left: 20px; }
.media-triangle-right { right: 20px; }

.connection-line {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 40px;
  opacity: 0.6;
  border-radius: 1px;
}
.connection-line-left { left: 10px; }
.connection-line-right { right: 10px; }

.bubble-header-gradient {
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(30, 30, 30, 0.5) 50%, rgba(0, 0, 0, 0.4) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.bubble-header-gradient::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, transparent 50%, rgba(99, 102, 241, 0.08) 100%);
  pointer-events: none;
}

.bubble-title-gradient {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bubble-media-content { position: relative; padding: 12px; background: rgba(0, 0, 0, 0.1); }
.bubble-image-container { position: relative; overflow: hidden; border-radius: 16px; background: rgba(0, 0, 0, 0.2); }
.bubble-video-container { position: relative; overflow: hidden; border-radius: 16px; background: rgba(0, 0, 0, 0.2); cursor: pointer; }

.bubble-media-image {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 16px;
}
.bubble-media-image:hover { transform: scale(1.03); }

.bubble-click-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bubble-image-container:hover .bubble-click-overlay { opacity: 1; }

.bubble-error-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
  background: rgba(40, 0, 0, 0.2);
  border: 1px dashed rgba(255, 100, 100, 0.3);
  border-radius: 16px; cursor: pointer;
}
.bubble-error-placeholder:hover { background: rgba(40, 0, 0, 0.3); border-color: rgba(255, 100, 100, 0.5); }

/* ===== Connection Lines ===== */
.message-connection-line {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; /* Lower z-index so media container overlaps */
  height: 3px;
}

/* Width slightly longer to ensure it reaches under media container edge */
.connection-left { left: calc(100% - 2px); width: 90px; }
.connection-right { left: calc(100% - 2px); width: 90px; }

@media (max-width: 1920px) { .connection-left, .connection-right { width: 88px; } }
@media (max-width: 1680px) { .connection-left, .connection-right { width: 85px; } }
@media (max-width: 1440px) { .connection-left, .connection-right { width: 80px; } }
@media (max-width: 1280px) { .connection-left, .connection-right { width: 72px; } }
@media (max-width: 1024px) { .connection-left, .connection-right { width: 65px; } }
@media (max-width: 768px) {
  .connection-left, .connection-right { width: 0; }
  [data-messages-container] { padding-left: 2rem; }
}

.connection-line-main {
  width: 100%; height: 3px;
  background: linear-gradient(90deg,
    #8b5cf6 0%,
    rgba(139, 92, 246, 0.8) 30%,
    rgba(139, 92, 246, 0.6) 70%,
    rgba(139, 92, 246, 0.4) 100%);
  background: linear-gradient(90deg,
    var(--accent-color, #8b5cf6) 0%,
    var(--accent-color-80, rgba(139, 92, 246, 0.8)) 30%,
    var(--accent-color-60, rgba(139, 92, 246, 0.6)) 70%,
    var(--accent-color-40, rgba(139, 92, 246, 0.4)) 100%);
  border-radius: 2px; position: relative;
  box-shadow:
    0 0 8px rgba(139, 92, 246, 0.6),
    0 0 16px rgba(139, 92, 246, 0.3);
  box-shadow:
    0 0 8px var(--accent-color-60, rgba(139, 92, 246, 0.6)),
    0 0 16px var(--accent-color-30, rgba(139, 92, 246, 0.3));
  animation: connectionFlow 4s infinite ease-in-out;
}
.connection-right .connection-line-main {
  background: linear-gradient(90deg,
    #8b5cf6 0%,
    rgba(139, 92, 246, 0.8) 30%,
    rgba(139, 92, 246, 0.6) 70%,
    rgba(139, 92, 246, 0.4) 100%);
  background: linear-gradient(90deg,
    var(--accent-color, #8b5cf6) 0%,
    var(--accent-color-80, rgba(139, 92, 246, 0.8)) 30%,
    var(--accent-color-60, rgba(139, 92, 246, 0.6)) 70%,
    var(--accent-color-40, rgba(139, 92, 246, 0.4)) 100%);
}
.connection-line-main::before {
  content: '';
  position: absolute; top: -1px; left: 0; height: 5px; width: 20px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
  border-radius: 3px; animation: flowPulse 3s infinite ease-in-out;
}
.connection-line-main::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: #8b5cf6; background: var(--accent-color, #8b5cf6); border-radius: 50%;
  box-shadow: 0 0 10px #8b5cf6, 0 0 20px rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 10px var(--accent-color, #8b5cf6), 0 0 20px var(--accent-color-50, rgba(139, 92, 246, 0.5));
  animation: startPulse 2s infinite ease-in-out; left: -3px;
}

/* ===== Responsive tweaks (bubbles/media) ===== */
@media (max-width: 768px) {
  .media-speech-bubble { max-width: calc(100vw - 4rem); border-radius: 20px; margin: 0.5rem; }
  .bubble-media-image { max-height: 200px; width: 100%; object-fit: cover; }
  .media-attachment-left, .media-attachment-right { margin-left: 0.5rem; margin-right: 0.5rem; max-width: calc(100vw - 2rem); }
  .media-speech-bubble { max-width: calc(100vw - 5rem) !important; }
  .bubble-media-image { max-height: 180px !important; }
  .speech-bubble { max-width: calc(100vw - 3rem) !important; margin: 0.5rem; padding: 0.75rem 1rem; }
  .media-attachment-container { margin-top: -5px !important; }
}

@media (max-width: 480px) {
  .media-speech-bubble { max-width: calc(100vw - 2rem); margin: 0.25rem; }
  .bubble-media-image { max-height: 150px; }
  .speech-bubble { max-width: calc(100vw - 1.5rem) !important; margin: 0.25rem; padding: 0.5rem 0.75rem; }
  .media-speech-bubble { max-width: calc(100vw - 1.5rem) !important; margin: 0.25rem !important; }
  .bubble-media-image { max-height: 120px !important; }
}

/* ===== Modal media (image zoom) ===== */
.media-overlay {
  animation: mediaOverlayIn 220ms ease-out forwards;
}
.media-overlay.closing { animation: mediaOverlayOut 200ms ease-in forwards; }

.media-content {
  animation: mediaContentIn 260ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
  transform-origin: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.media-content.closing { animation: mediaContentOut 180ms ease-in forwards; }

@keyframes mediaOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mediaOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes mediaContentIn {
  0% { transform: translateY(8px) scale(0.96); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes mediaContentOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(8px) scale(0.96); opacity: 0; }
}
.modal-media-bubble {
  max-width: 90vw;
  max-height: 90vh;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-bubble-header-gradient {
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 30, 30, 0.7) 50%, rgba(0, 0, 0, 0.6) 100%);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  position: relative;
}
.modal-bubble-header-gradient::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%, rgba(139, 92, 246, 0.05) 100%);
  pointer-events: none;
}

.modal-bubble-title-gradient {
  background: linear-gradient(45deg, #8b5cf6, #a78bfa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  font-size: 1.1rem;
}

.modal-bubble-media-content {
  padding: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-bubble-media-image {
  width: 100%;
  height: auto;
  max-width: 85vw;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.modal-bubble-error-placeholder {
  padding: 40px;
  text-align: center;
  background: rgba(239, 68, 68, 0.1);
  border: 2px dashed rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  margin: 20px;
}

@media (max-width: 768px) {
  .modal-media-bubble { max-width: 95vw; max-height: 85vh; border-radius: 20px; }
  .modal-bubble-header-gradient { padding: 12px 18px; }
  .modal-bubble-media-image { max-width: 90vw; max-height: 65vh; }
  /* Extra mobile polish */
  .media-content { width: 100%; padding: 0 8px; }
  .modal-bubble-title-gradient { font-size: 1rem; }
}

/* Editor toolbar and contentEditable styles for the reply composer */

/* Placeholder when empty */
#wysiwyg-editor:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
  position: absolute;
}

#wysiwyg-editor:focus:before { display: none; }
#wysiwyg-editor { position: relative; }

/* Inline formatting */
#wysiwyg-editor strong { font-weight: bold; }
#wysiwyg-editor em { font-style: italic; }
#wysiwyg-editor code {
  background: #1f2937;
  color: #10b981;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}
#wysiwyg-editor a { color: #2563eb; text-decoration: underline; }
#wysiwyg-editor a:hover { text-decoration: none; }

/* Images inside editor */
#wysiwyg-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  transition: all 0.3s ease;
}

/* Miniature sizing used in composer */
#wysiwyg-editor img {
  display: block !important;
  max-width: 150px !important;
}
@media (min-width: 640px) {
  #wysiwyg-editor img { max-width: 200px !important; }
}
#wysiwyg-editor .relative.block.my-2.group {
  display: block !important;
  float: none !important;
  clear: both !important;
  margin: 0.5em 0 !important;
  position: relative !important;
}
#wysiwyg-editor .video-embed-container-mini {
  display: block !important;
  max-width: 300px !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  margin: 0.5em 0 !important;
}

/* Error images */
#wysiwyg-editor img[alt*="Erreur"] {
  background-color: #fef2f2;
  border: 2px dashed #ef4444;
  padding: 10px;
  color: #ef4444;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image thumbnails added via media modal */
.image-thumbnail { transition: all 0.3s ease; display: block; }
.image-thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
  border-color: #3b82f6 !important;
}
.image-container { display: inline-block; vertical-align: top; }

/* Non-blocking images in messages and quotes */
.message-bubble img, .quote-bubble img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.message-bubble img:hover, .quote-bubble img:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ===== OPTIMISATIONS MOBILE ===== */
/* Fichier: mobile.css */
/* Contient: Media queries et surcharges mobile pour tous les composants */
/* Breakpoint: max-width: 768px */

@media (max-width: 768px) {

  /* ===== OVERFLOW PROTECTION ===== */
  body {
    overflow-x: hidden;
  }

  /* ===== MOBILE REPLY COMPOSER (BottomSheet) ===== */
  /* Adapter le ReplyComposer pour mobile dans BottomSheet */

  /* Masquer le wrapper desktop du composer */
  #reply-box.reply-section {
    display: none;
  }

  /* QuickReplyBar fixed bottom avec padding sécurisé iOS */
  .fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* BottomSheet content - couleurs adaptées au thème sombre */
  .bottom-sheet-content {
    color: white;
  }

  /* Titre du composer */
  .bottom-sheet-content h3 {
    color: #e5e7eb !important;
    /* text-gray-200 */
  }

  /* Toolbar du composer - fond sombre */
  .bottom-sheet-content .bg-gray-50 {
    background: rgba(30, 30, 50, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Boutons toolbar - couleur claire */
  .bottom-sheet-content .text-gray-600 {
    color: #9ca3af !important;
    /* text-gray-400 */
  }

  /* Bordure du container éditeur */
  .bottom-sheet-content .border-gray-300 {
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  /* Zone éditeur - fond sombre, texte clair */
  .bottom-sheet-content [contenteditable="true"] {
    background: rgba(20, 20, 40, 0.9) !important;
    color: white !important;
  }

  /* Placeholder éditeur */
  .bottom-sheet-content [data-placeholder]::before {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  /* Labels couleurs bubbles */
  .bottom-sheet-content .text-gray-700 {
    color: #d1d5db !important;
    /* text-gray-300 */
  }

  /* Bouton annuler - cibler par attribut class partiel */
  .bottom-sheet-content [class*="bg-gray-500"] {
    background: rgba(100, 100, 120, 0.3) !important;
  }

  /* Fond des sections couleurs/ombres */
  .bottom-sheet-content .bg-gray-50.rounded-lg {
    background: rgba(30, 30, 50, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Message "replyingTo" */
  .bottom-sheet-content .bg-blue-50 {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

  .bottom-sheet-content .text-blue-800 {
    color: #93c5fd !important;
    /* text-blue-300 */
  }

  /* ===== OPTIMISATIONS BULLES MESSAGES ===== */

  /* Bulles de messages - Réduction taille et padding */
  .message-bubble {
    padding: 8px 10px !important;
    border-radius: 16px !important;
    max-width: 85% !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Bulles post original - aussi compactes */
  .speech-bubble-original {
    border-width: 1px !important;
    padding: 10px 12px !important;
  }

  /* Container de message - marges réduites */
  .flex.mb-6 {
    margin-bottom: 1rem !important;
  }

  /* Triangles des bulles - plus petits */
  .speech-triangle-left,
  .speech-triangle-right {
    border-width: 0 10px 10px 10px !important;
  }

  /* Avatar - 50% plus petit */
  .message-bubble .w-10,
  .message-bubble .h-10 {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Pseudo utilisateur - plus compact */
  .message-bubble span[class*="font-semibold"] {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  /* Badge utilisateur - masqué ou ultra-compact */
  .message-bubble [class*="UserBadge"] {
    transform: scale(0.7) !important;
    transform-origin: top left;
  }

  /* Tag "Auteur" post original - plus petit */
  .message-bubble span.text-xs {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* Badge "POST ORIGINAL" - compact */
  .message-bubble .absolute.-top-3 span {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }

  /* Compteur de likes mobile - plus discret */
  .message-bubble .mt-8 {
    margin-top: 1rem !important;
  }

  .message-bubble .mt-8 .h-4 {
    width: 14px !important;
    height: 14px !important;
  }

  .message-bubble .mt-8 span {
    font-size: 11px !important;
  }

  /* Date en bas à droite - plus petite */
  .message-bubble .absolute.bottom-2.right-3 {
    font-size: 10px !important;
    bottom: 4px !important;
    right: 8px !important;
  }

  /* Contenu texte bulle - plus compact */
  .message-bubble .mb-3.leading-relaxed {
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
  }

  /* En-tête utilisateur (avatar + pseudo) - moins d'espace */
  .message-bubble .flex.mb-3 {
    margin-bottom: 6px !important;
    margin-top: 8px !important;
  }

  /* ===== MÉDIAS - OPTIMISATION COMPLÈTE ===== */

  /* Container médias externe - masqué sur mobile (médias dans bulle) */
  .media-attachment-container {
    display: none !important;
  }

  /* Bulles médias - max-width réduit */
  .media-attachment {
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Images dans médias - adaptation mobile */
  .media-attachment img,
  .media-attachment video {
    max-width: 100% !important;
    max-height: 250px !important;
    object-fit: contain;
    border-radius: 12px;
  }

  /* Trait de connexion médias - masqué sur mobile */
  .message-connection-line {
    display: none !important;
  }

  /* Header médias - padding réduit */
  .media-header {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .media-header h3,
  .media-header p {
    font-size: 11px !important;
  }

  /* Footer médias - compact */
  .media-footer {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  .media-footer button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Miniatures images - taille réduite */
  .image-thumbnail {
    max-width: 120px !important;
    max-height: 120px !important;
  }

  /* ===== NOTES DE MODÉRATION - COMPACT ===== */

  .message-bubble .mb-4.p-3 {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }

  .message-bubble .mb-4.p-3 p {
    font-size: 12px !important;
  }

  /* ===== ESPACEMENT GÉNÉRAL MOBILE ===== */

  /* Réduire espaces entre messages */
  .space-y-6>*+* {
    margin-top: 1rem !important;
  }

  /* Container principal messages - padding réduit */
  .px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* ===== ANIMATIONS - DÉSACTIVÉES SUR MOBILE POUR PERFORMANCE ===== */

  .speech-bubble:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Masquer effets glass overlay superflus mobile */
  .message-bubble .absolute.inset-0.bg-gradient-to-b {
    opacity: 0.5 !important;
  }

  /* ===== BOUTON 3 POINTS MOBILE - ULTRA COMPACT ===== */

  .mobile-menu-button button {
    padding: 3px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .mobile-menu-button button svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* ===== CONTAINER BULLES - OPTIMISATION MOBILE ===== */

  .flex.mb-6.justify-start .speech-bubble,
  .flex.mb-6.justify-end .speech-bubble {
    max-width: 82% !important;
  }

  /* Espacement réduit entre les bulles */
  .space-y-6.mt-6 {
    margin-top: 1rem !important;
  }

  /* ===== RÉPONSE/CITATION - ZONE D'ENTRÉE MOBILE ===== */

  /* Zone de texte réponse - padding réduit */
  textarea {
    font-size: 14px !important;
  }

  /* Boutons formatage toolbar - plus compacts */
  .toolbar-button {
    width: 32px !important;
    height: 32px !important;
  }
}
/* ===== TOPIC STYLES - INDEX CONSOLIDÉ ===== */
/* Fichier: index.css */
/* Rôle: Importer tous les fichiers CSS modulaires de manière organisée */
/* Utilisé par: TopicPage.js (import unique et simplifié) */

/* ===== GLOBAL ANIMATIONS (Shared) ===== */

/* ===== TOPIC-SPECIFIC ANIMATIONS ===== */

/* ===== COMPOSANTS ===== */

/* ===== THÈMES & TOOLBAR ===== */

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