@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap";
/* [project]/packages/popskills-design-system-5.0.0/dist/harmonia-ds.css [app-client] (css) */
.harmonia-button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-soft);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--spacing-2);
  letter-spacing: .05em;
  min-height: 48px;
  padding: 0 var(--spacing-5);
  text-transform: uppercase;
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--easing-ease), color var(--duration-fast) var(--easing-ease), box-shadow var(--duration-normal) var(--easing-ease), transform var(--duration-fast) var(--easing-spring), opacity var(--duration-fast) var(--easing-ease);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  background: none;
  border: none;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
}

.harmonia-button--sm {
  min-height: 48px;
  padding: 0 var(--spacing-4);
  font-size: 14px;
}

.harmonia-button--md {
  min-height: 48px;
  padding: 0 var(--spacing-5);
  font-size: 16px;
}

.harmonia-button--lg {
  min-height: 56px;
  padding: 0 var(--spacing-6);
  font-size: 16px;
}

.harmonia-button--primary {
  background-color: var(--color-pop-dark-500, #070433);
  color: var(--color-text-inverse);
}

.harmonia-button--primary:active:not(:disabled) {
  background-color: var(--color-pop-dark-700, #050228);
  box-shadow: 0 0 0 3px var(--color-pop-dark-200, #d1d5db);
  transform: scale(.95);
}

.harmonia-button--popskills {
  background-color: var(--color-popskills-500, #039de3);
  color: var(--color-text-inverse);
}

.harmonia-button--popskills:active:not(:disabled) {
  background-color: var(--color-popskills-700, #016c9b);
  box-shadow: 0 0 0 3px var(--color-popskills-200, #80d0f4);
  transform: scale(.95);
}

.harmonia-button--poplingua {
  background-color: var(--color-poplingua-500, #2ed6c5);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-button--poplingua:active:not(:disabled) {
  background-color: var(--color-poplingua-700, #1a8f85);
  box-shadow: 0 0 0 3px var(--color-poplingua-200, #9feadd);
  transform: scale(.95);
}

.harmonia-button--poptalent {
  background-color: var(--color-poptalent-500, #ff5a6a);
  color: var(--color-text-inverse);
}

.harmonia-button--poptalent:active:not(:disabled) {
  background-color: var(--color-poptalent-700, #c32e42);
  box-shadow: 0 0 0 3px var(--color-poptalent-200, #fab5bc);
  transform: scale(.95);
}

.harmonia-button--popmentor {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-button--popmentor:active:not(:disabled) {
  background-color: var(--color-popmentor-700, #e18e00);
  box-shadow: 0 0 0 3px var(--color-popmentor-200, #ffe066);
  transform: scale(.95);
}

.harmonia-button--turquoise {
  background-color: var(--color-poplingua-500, #2ed6c5);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-button--turquoise:active:not(:disabled) {
  background-color: var(--color-poplingua-700, #1a8f85);
  box-shadow: 0 0 0 3px var(--color-poplingua-200, #9feadd);
  transform: scale(.95);
}

.harmonia-button--coral {
  background-color: var(--color-poptalent-500, #ff5a6a);
  color: var(--color-text-inverse);
}

.harmonia-button--coral:active:not(:disabled) {
  background-color: var(--color-poptalent-700, #c32e42);
  box-shadow: 0 0 0 3px var(--color-poptalent-200, #fab5bc);
  transform: scale(.95);
}

.harmonia-button--plum {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-button--plum:active:not(:disabled) {
  background-color: var(--color-popmentor-700, #e18e00);
  box-shadow: 0 0 0 3px var(--color-popmentor-200, #ffe066);
  transform: scale(.95);
}

.harmonia-button--sky {
  background-color: var(--color-popskills-300, #33b4ec);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-button--sky:active:not(:disabled) {
  background-color: var(--color-popskills-400, #0289c6);
  box-shadow: 0 0 0 3px var(--color-popskills-200, #80d0f4);
  transform: scale(.95);
}

.harmonia-button--secondary {
  border: 2px solid var(--color-pop-dark-500, #070433);
  box-shadow: none;
  color: var(--color-pop-dark-500, #070433);
  background-color: #0000;
}

.harmonia-button--secondary:active:not(:disabled) {
  background-color: var(--color-pop-dark-50, #f6f7f9);
  box-shadow: 0 0 0 3px var(--color-pop-dark-200, #d1d5db);
  transform: scale(.95);
}

.harmonia-button--ghost {
  box-shadow: none;
  color: var(--color-pop-dark-500, #070433);
  background-color: #0000;
}

.harmonia-button--ghost:active:not(:disabled) {
  background-color: var(--color-neutral-100);
  box-shadow: 0 0 0 3px var(--color-neutral-200, #e5e7eb);
  transform: scale(.95);
}

.harmonia-button--destructive {
  background-color: var(--color-poptalent-500, #ff5a6a);
  color: var(--color-text-inverse);
}

.harmonia-button--destructive:active:not(:disabled) {
  background-color: var(--color-poptalent-700, #c32e42);
  box-shadow: 0 0 0 3px var(--color-poptalent-200, #fab5bc);
  transform: scale(.95);
}

.harmonia-button--full-width {
  width: 100%;
}

.harmonia-button--disabled, .harmonia-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}

.harmonia-button--loading {
  cursor: wait;
  pointer-events: none;
  position: relative;
}

.harmonia-button--icon-only {
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  padding: 0;
}

.harmonia-button__content, .harmonia-button__icon {
  align-items: center;
  display: inline-flex;
}

.harmonia-button__icon {
  flex-shrink: 0;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

.harmonia-button__icon--left {
  margin-right: var(--spacing-2);
}

.harmonia-button__icon--right {
  margin-left: var(--spacing-2);
}

.harmonia-button--lg .harmonia-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.harmonia-button__spinner {
  margin-right: var(--spacing-2);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.harmonia-button__spinner-icon {
  width: 1.25rem;
  height: 1.25rem;
  animation: 1s linear infinite harmonia-spin;
}

@keyframes harmonia-spin {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(1turn);
  }
}

.harmonia-button:focus-visible {
  outline: 3px solid var(--color-popskills-500, #039de3);
  outline-offset: 3px;
}

.harmonia-button--destructive:focus-visible {
  outline-color: var(--color-poptalent-500, #ff5a6a);
}

@media (prefers-contrast: high) {
  .harmonia-button:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

@media (min-width: 768px) {
  .harmonia-button {
    min-height: 44px;
  }

  .harmonia-button--sm {
    min-height: 40px;
  }

  .harmonia-button--md {
    min-height: 44px;
  }

  .harmonia-button--lg {
    min-height: 52px;
  }
}

@media (min-width: 1024px) {
  .harmonia-button--sm {
    min-height: 32px;
    padding: 0 var(--spacing-3);
  }

  .harmonia-button--md {
    min-height: 40px;
  }

  .harmonia-button--lg {
    min-height: 48px;
  }

  .harmonia-button--primary:hover:not(:disabled) {
    background-color: var(--color-pop-dark-400, #1f2937);
    box-shadow: var(--elevation-3);
    transform: translateY(-2px)scale(1.02);
  }

  .harmonia-button--popskills:hover:not(:disabled) {
    background-color: var(--color-popskills-400, #33b4ec);
    transform: translateY(-2px)scale(1.02);
    box-shadow: 0 8px 24px #039de340;
  }

  .harmonia-button--poplingua:hover:not(:disabled), .harmonia-button--turquoise:hover:not(:disabled) {
    background-color: var(--color-poplingua-400, #63dec9);
    transform: translateY(-2px)scale(1.02);
    box-shadow: 0 8px 24px #2ed6c540;
  }

  .harmonia-button--coral:hover:not(:disabled), .harmonia-button--poptalent:hover:not(:disabled) {
    background-color: var(--color-poptalent-400, #f98996);
    transform: translateY(-2px)scale(1.02);
    box-shadow: 0 8px 24px #ff5a6a40;
  }

  .harmonia-button--plum:hover:not(:disabled), .harmonia-button--popmentor:hover:not(:disabled) {
    background-color: var(--color-popmentor-400, #ffd633);
    transform: translateY(-2px)scale(1.02);
    box-shadow: 0 8px 24px #f6cd0140;
  }

  .harmonia-button--sky:hover:not(:disabled) {
    background-color: var(--color-popskills-200, #80d0f4);
    transform: translateY(-2px)scale(1.02);
  }

  .harmonia-button--secondary:hover:not(:disabled) {
    background-color: var(--color-pop-dark-50, #f6f7f9);
    transform: scale(1.02);
    box-shadow: 0 4px 12px #0704331a;
  }

  .harmonia-button--ghost:hover:not(:disabled) {
    background-color: var(--color-neutral-100);
    transform: scale(1.02);
  }

  .harmonia-button--destructive:hover:not(:disabled) {
    background-color: var(--color-poptalent-600, #eb4357);
    transform: translateY(-2px)scale(1.02);
    box-shadow: 0 8px 24px #ff5a6a40;
  }
}

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

  .harmonia-button:active:not(:disabled), .harmonia-button:hover:not(:disabled) {
    transform: none;
  }

  .harmonia-button__spinner-icon {
    animation: none;
  }
}

.harmonia-card {
  background-color: var(--color-background-primary, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-soft);
  transition: box-shadow var(--duration-normal) var(--easing-ease), background-color var(--duration-normal) var(--easing-ease), transform var(--duration-normal) var(--easing-spring);
  flex-direction: column;
  display: flex;
}

.harmonia-card--flat {
  border: 1px solid var(--color-border-light);
  box-shadow: none;
}

.harmonia-card--default {
  box-shadow: var(--elevation-soft);
}

.harmonia-card--elevated {
  box-shadow: var(--elevation-3);
}

.harmonia-card--hero {
  border-radius: var(--radius-2xl);
  box-shadow: var(--elevation-4);
}

.harmonia-card--accent-popskills {
  border-left: 4px solid var(--color-popskills-500, #039de3);
}

.harmonia-card--accent-poplingua {
  border-left: 4px solid var(--color-poplingua-500, #2ed6c5);
}

.harmonia-card--accent-poptalent {
  border-left: 4px solid var(--color-poptalent-500, #ff5a6a);
}

.harmonia-card--accent-popmentor {
  border-left: 4px solid var(--color-popmentor-500, #f6cd01);
}

.harmonia-card--accent-pop {
  border-left: 4px solid var(--color-pop-dark-500, #070433);
}

.harmonia-card--accent-turquoise {
  border-left: 4px solid var(--color-poplingua-500, #2ed6c5);
}

.harmonia-card--accent-coral {
  border-left: 4px solid var(--color-poptalent-500, #ff5a6a);
}

.harmonia-card--accent-plum {
  border-left: 4px solid var(--color-popmentor-500, #f6cd01);
}

.harmonia-card--accent-sky {
  border-left: 4px solid var(--color-popskills-300, #33b4ec);
}

.harmonia-card--accent-slate {
  border-left: 4px solid var(--color-pop-dark-500, #070433);
}

.harmonia-card--interactive {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.harmonia-card--interactive:active {
  box-shadow: var(--elevation-1);
  transform: scale(.98);
}

.harmonia-card--interactive:focus-visible {
  outline: 3px solid var(--color-popskills-500, #039de3);
  outline-offset: 3px;
}

@media (prefers-contrast: high) {
  .harmonia-card--interactive:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

.harmonia-card--padding-none .harmonia-card__body {
  padding: 0;
}

.harmonia-card--padding-sm .harmonia-card__body {
  padding: var(--spacing-3);
}

.harmonia-card--padding-md .harmonia-card__body {
  padding: var(--spacing-4);
}

.harmonia-card--padding-lg .harmonia-card__body {
  padding: var(--spacing-5);
}

.harmonia-card__header {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--spacing-4);
}

.harmonia-card--padding-sm .harmonia-card__header {
  padding: var(--spacing-3);
}

.harmonia-card--padding-lg .harmonia-card__header {
  padding: var(--spacing-5);
}

.harmonia-card__body {
  padding: var(--spacing-4);
  flex: 1;
}

.harmonia-card__footer {
  border-top: 1px solid var(--color-border-light);
  padding: var(--spacing-4);
}

.harmonia-card--padding-sm .harmonia-card__footer {
  padding: var(--spacing-3);
}

.harmonia-card--padding-lg .harmonia-card__footer {
  padding: var(--spacing-5);
}

.harmonia-card-header {
  align-items: flex-start;
  gap: var(--spacing-3);
  justify-content: space-between;
  display: flex;
}

.harmonia-card-header__text {
  flex: 1;
  min-width: 0;
}

.harmonia-card-header__title {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.harmonia-card-header__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--spacing-1) 0 0;
}

.harmonia-card-header__action {
  flex-shrink: 0;
}

.harmonia-card-footer {
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-card-footer--left {
  justify-content: flex-start;
}

.harmonia-card-footer--center {
  justify-content: center;
}

.harmonia-card-footer--right {
  justify-content: flex-end;
}

.harmonia-card-footer--space-between {
  justify-content: space-between;
}

:root.dark .harmonia-card, [data-theme="dark"] .harmonia-card {
  background-color: var(--surface-1, #1f2937);
  box-shadow: 0 4px 12px #00000040;
}

:root.dark .harmonia-card--flat, [data-theme="dark"] .harmonia-card--flat {
  background-color: var(--surface-1, #1f2937);
  border-color: var(--color-border-light);
}

:root.dark .harmonia-card--elevated, [data-theme="dark"] .harmonia-card--elevated {
  background-color: var(--surface-2, #374151);
  box-shadow: 0 8px 24px #00000059;
}

:root.dark .harmonia-card--hero, [data-theme="dark"] .harmonia-card--hero {
  background-color: var(--surface-3, #4b5563);
  box-shadow: 0 12px 32px #0006;
}

:root.dark .harmonia-card__footer, :root.dark .harmonia-card__header, [data-theme="dark"] .harmonia-card__footer, [data-theme="dark"] .harmonia-card__header {
  border-color: var(--color-border-light);
}

@media (min-width: 768px) {
  .harmonia-card--padding-md .harmonia-card__body {
    padding: var(--spacing-5);
  }

  .harmonia-card--padding-lg .harmonia-card__body {
    padding: var(--spacing-6);
  }

  .harmonia-card__header {
    gap: var(--spacing-4);
  }

  .harmonia-card-header__title {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 1024px) {
  .harmonia-card--padding-lg .harmonia-card__body {
    padding: var(--spacing-8);
  }

  .harmonia-card--padding-lg .harmonia-card__footer, .harmonia-card--padding-lg .harmonia-card__header {
    padding: var(--spacing-6);
  }

  .harmonia-card--interactive:hover {
    box-shadow: var(--elevation-3);
    transform: translateY(-4px)scale(1.01);
  }

  .harmonia-card--interactive:active {
    transform: translateY(0)scale(.99);
  }

  :root.dark .harmonia-card--interactive:hover, [data-theme="dark"] .harmonia-card--interactive:hover {
    background-color: var(--surface-2, #374151);
  }
}

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

  .harmonia-card--interactive:active, .harmonia-card--interactive:hover {
    transform: none;
  }
}

.harmonia-input {
  --input-color-focus: #039de3;
  --input-color-focus-ring: #039de333;
  --input-color-success: #2ed6c5;
  --input-color-success-ring: #2ed6c533;
  --input-color-success-bg: #2ed6c50d;
  --input-color-error: #ff5a6a;
  --input-color-error-ring: #ff5a6a26;
  --input-color-error-bg: #ff5a6a0d;
  --input-color-warning: #f6cd01;
  --input-height-sm: 44px;
  --input-height-md: 48px;
  --input-height-lg: 56px;
  --input-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --input-transition-fast: .15s ease-out;
  gap: var(--spacing-1-5);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.harmonia-input__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.harmonia-input__label--required:after {
  color: var(--input-color-error);
  content: " *";
}

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

.harmonia-input__field {
  appearance: none;
  background: none;
  background-color: var(--color-background-primary);
  border: none;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  min-height: var(--input-height-md);
  padding: var(--spacing-3) var(--spacing-4);
  transition: border-color var(--input-transition-fast), box-shadow var(--input-transition), background-color var(--input-transition-fast), transform var(--input-transition);
  outline: none;
  width: 100%;
}

.harmonia-input__field::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

.harmonia-input--filled .harmonia-input__field {
  background-color: var(--color-neutral-50);
  border-color: #0000;
}

.harmonia-input--filled .harmonia-input__field:hover:not(:focus):not(:disabled) {
  background-color: var(--color-neutral-100);
}

.harmonia-input--filled .harmonia-input__field:focus {
  background-color: var(--color-background-primary);
  border-color: var(--input-color-focus);
}

.harmonia-input__field:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-input__field:focus {
  border-color: var(--input-color-focus);
  box-shadow: 0 0 0 3px var(--input-color-focus-ring);
  transform: scale(1.005);
}

.harmonia-input--success .harmonia-input__field {
  background-color: var(--input-color-success-bg);
  border-color: var(--input-color-success);
}

.harmonia-input--success .harmonia-input__field:focus {
  box-shadow: 0 0 0 3px var(--input-color-success-ring);
}

.harmonia-input--error .harmonia-input__field {
  background-color: var(--input-color-error-bg);
  border-color: var(--input-color-error);
}

.harmonia-input--error .harmonia-input__field:focus {
  box-shadow: 0 0 0 3px var(--input-color-error-ring);
}

.harmonia-input__field:disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.harmonia-input__field:disabled:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-input__icon {
  color: var(--color-text-tertiary);
  pointer-events: none;
  height: 20px;
  transition: color var(--input-transition-fast), transform var(--input-transition);
  justify-content: center;
  align-items: center;
  width: 20px;
  display: flex;
  position: absolute;
}

.harmonia-input__icon--left {
  left: var(--spacing-4);
}

.harmonia-input__icon--right {
  right: var(--spacing-4);
}

.harmonia-input__field--with-icon-left {
  padding-left: calc(var(--spacing-4)  + 28px);
}

.harmonia-input__field--with-icon-right {
  padding-right: calc(var(--spacing-4)  + 28px);
}

.harmonia-input__field:focus ~ .harmonia-input__icon--left, .harmonia-input__field:focus ~ .harmonia-input__icon--right {
  color: var(--input-color-focus);
}

.harmonia-input__icon--success {
  color: var(--input-color-success);
  animation: .3s cubic-bezier(.34, 1.56, .64, 1) forwards pop-check;
}

@keyframes pop-check {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    transform: scale(1.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.harmonia-input__icon--error {
  color: var(--input-color-error);
}

.harmonia-input__icon--interactive {
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  pointer-events: auto;
  height: 44px;
  transition: color var(--input-transition-fast), background-color var(--input-transition-fast);
  width: 44px;
  margin: -12px;
  padding: 12px;
}

.harmonia-input__icon--interactive:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.harmonia-input__icon--interactive:active {
  transform: scale(.95);
}

.harmonia-input__helper {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: var(--spacing-1);
  line-height: var(--line-height-normal);
  display: flex;
}

.harmonia-input__success-message {
  color: var(--input-color-success);
}

.harmonia-input__error-message, .harmonia-input__success-message {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: var(--spacing-1);
  line-height: var(--line-height-normal);
  animation: .2s ease-out forwards fade-slide-in;
  display: flex;
}

.harmonia-input__error-message {
  color: var(--input-color-error);
}

@keyframes fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-input__message-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.harmonia-input--sm .harmonia-input__field {
  border-radius: var(--radius-md);
  min-height: var(--input-height-sm);
  padding: var(--spacing-2-5) var(--spacing-3);
  font-size: 16px;
}

.harmonia-input--sm .harmonia-input__icon {
  width: 18px;
  height: 18px;
}

.harmonia-input--sm .harmonia-input__icon--left {
  left: var(--spacing-3);
}

.harmonia-input--sm .harmonia-input__icon--right {
  right: var(--spacing-3);
}

.harmonia-input--lg .harmonia-input__field {
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  min-height: var(--input-height-lg);
  padding: var(--spacing-4) var(--spacing-5);
}

.harmonia-input--lg .harmonia-input__icon {
  width: 24px;
  height: 24px;
}

.harmonia-input--lg .harmonia-input__label {
  font-size: var(--font-size-base);
}

.harmonia-input__field:focus-visible {
  outline: 3px solid var(--input-color-focus);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-input__field {
    border-width: 3px;
  }

  .harmonia-input__field:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-input, [data-theme="dark"] .harmonia-input {
  --input-color-focus-ring: #039de34d;
  --input-color-success-ring: #2ed6c54d;
  --input-color-success-bg: #2ed6c51a;
  --input-color-error-ring: #ff5a6a40;
  --input-color-error-bg: #ff5a6a1a;
}

:root.dark .harmonia-input__field, [data-theme="dark"] .harmonia-input__field {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

:root.dark .harmonia-input__field::-moz-placeholder {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .harmonia-input__field::-moz-placeholder {
  color: var(--color-text-tertiary);
}

:root.dark .harmonia-input__field::placeholder, [data-theme="dark"] .harmonia-input__field::placeholder {
  color: var(--color-text-tertiary);
}

:root.dark .harmonia-input__field:hover:not(:focus):not(:disabled), [data-theme="dark"] .harmonia-input__field:hover:not(:focus):not(:disabled) {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-input__field:disabled, [data-theme="dark"] .harmonia-input__field:disabled {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

:root.dark .harmonia-input--filled .harmonia-input__field, [data-theme="dark"] .harmonia-input--filled .harmonia-input__field {
  background-color: var(--color-neutral-800);
}

:root.dark .harmonia-input--filled .harmonia-input__field:hover:not(:focus):not(:disabled), [data-theme="dark"] .harmonia-input--filled .harmonia-input__field:hover:not(:focus):not(:disabled) {
  background-color: var(--color-neutral-700);
}

@media (min-width: 768px) {
  .harmonia-input {
    --input-height-sm: 40px;
    --input-height-md: 44px;
    --input-height-lg: 52px;
  }
}

@media (min-width: 1024px) {
  .harmonia-input {
    --input-height-sm: 36px;
    --input-height-md: 40px;
    --input-height-lg: 48px;
  }

  .harmonia-input__field {
    font-size: var(--font-size-base);
  }

  .harmonia-input--sm .harmonia-input__field {
    font-size: var(--font-size-sm);
  }

  .harmonia-input__icon--interactive {
    width: 32px;
    height: 32px;
    margin: -6px;
    padding: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-input__field, .harmonia-input__icon {
    transition: none;
  }

  .harmonia-input__error-message, .harmonia-input__icon--success, .harmonia-input__success-message {
    animation: none;
  }

  .harmonia-input__field:focus, .harmonia-input__field:hover:not(:focus):not(:disabled) {
    transform: none;
  }
}

.harmonia-textarea-wrapper {
  --textarea-color-focus: #039de3;
  --textarea-color-focus-ring: #039de333;
  --textarea-color-success: #2ed6c5;
  --textarea-color-success-ring: #2ed6c533;
  --textarea-color-success-bg: #2ed6c50d;
  --textarea-color-error: #ff5a6a;
  --textarea-color-error-ring: #ff5a6a26;
  --textarea-color-error-bg: #ff5a6a0d;
  --textarea-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --textarea-transition-fast: .15s ease-out;
  gap: var(--spacing-1-5);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.harmonia-textarea__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.harmonia-textarea__required {
  color: var(--textarea-color-error);
  margin-left: var(--spacing-0-5);
}

.harmonia-textarea-container {
  background-color: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  transition: border-color var(--textarea-transition-fast), box-shadow var(--textarea-transition), background-color var(--textarea-transition-fast), transform var(--textarea-transition);
  position: relative;
}

.harmonia-textarea-container:hover:not(.harmonia-textarea-container--disabled):not(:focus-within) {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-textarea-container:focus-within {
  border-color: var(--textarea-color-focus);
  box-shadow: 0 0 0 3px var(--textarea-color-focus-ring);
  transform: scale(1.005);
}

.harmonia-textarea-container--success {
  background-color: var(--textarea-color-success-bg);
  border-color: var(--textarea-color-success);
}

.harmonia-textarea-container--success:focus-within {
  box-shadow: 0 0 0 3px var(--textarea-color-success-ring);
}

.harmonia-textarea-container--error {
  background-color: var(--textarea-color-error-bg);
  border-color: var(--textarea-color-error);
}

.harmonia-textarea-container--error:focus-within {
  box-shadow: 0 0 0 3px var(--textarea-color-error-ring);
}

.harmonia-textarea-container--disabled {
  background-color: var(--color-neutral-100);
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.harmonia-textarea-container--disabled:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-textarea {
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: var(--line-height-relaxed);
  min-height: 120px;
  padding: var(--spacing-3) var(--spacing-4);
  resize: vertical;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  display: block;
}

.harmonia-textarea::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

.harmonia-textarea:disabled {
  cursor: not-allowed;
}

.harmonia-textarea--auto-resize {
  resize: none;
  overflow: hidden;
}

.harmonia-textarea__footer {
  align-items: flex-start;
  gap: var(--spacing-4);
  justify-content: space-between;
  display: flex;
}

.harmonia-textarea__helper {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  flex: 1;
  margin: 0;
}

.harmonia-textarea__helper--success {
  color: var(--textarea-color-success);
}

.harmonia-textarea__helper--error, .harmonia-textarea__helper--success {
  align-items: center;
  gap: var(--spacing-1);
  animation: .2s ease-out forwards textarea-fade-slide-in;
  display: flex;
}

.harmonia-textarea__helper--error {
  color: var(--textarea-color-error);
}

@keyframes textarea-fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-textarea__count {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.harmonia-textarea:focus-visible {
  outline: 3px solid var(--textarea-color-focus);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-textarea-container {
    border-width: 3px;
  }

  .harmonia-textarea:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-textarea-wrapper, [data-theme="dark"] .harmonia-textarea-wrapper {
  --textarea-color-focus-ring: #039de34d;
  --textarea-color-success-ring: #2ed6c54d;
  --textarea-color-success-bg: #2ed6c51a;
  --textarea-color-error-ring: #ff5a6a40;
  --textarea-color-error-bg: #ff5a6a1a;
}

:root.dark .harmonia-textarea-container, [data-theme="dark"] .harmonia-textarea-container {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-textarea, [data-theme="dark"] .harmonia-textarea {
  color: var(--color-text-primary);
}

:root.dark .harmonia-textarea::-moz-placeholder {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .harmonia-textarea::-moz-placeholder {
  color: var(--color-text-tertiary);
}

:root.dark .harmonia-textarea::placeholder, [data-theme="dark"] .harmonia-textarea::placeholder {
  color: var(--color-text-tertiary);
}

:root.dark .harmonia-textarea-container:hover:not(.harmonia-textarea-container--disabled):not(:focus-within), [data-theme="dark"] .harmonia-textarea-container:hover:not(.harmonia-textarea-container--disabled):not(:focus-within) {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-textarea-container--disabled, [data-theme="dark"] .harmonia-textarea-container--disabled {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

@media (min-width: 1024px) {
  .harmonia-textarea {
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-textarea-container {
    transition: none;
  }

  .harmonia-textarea-container:hover:not(.harmonia-textarea-container--disabled):not(:focus-within), .harmonia-textarea-container:focus-within {
    transform: none;
  }

  .harmonia-textarea__helper--error, .harmonia-textarea__helper--success {
    animation: none;
  }
}

.harmonia-badge {
  --badge-popskills: #039de3;
  --badge-popskills-bg: #039de31a;
  --badge-poplingua: #2ed6c5;
  --badge-poplingua-bg: #2ed6c51a;
  --badge-poptalent: #ff5a6a;
  --badge-poptalent-bg: #ff5a6a1a;
  --badge-popmentor: #f6cd01;
  --badge-popmentor-bg: #f6cd0126;
  --badge-navy: #070433;
  --badge-focus-ring: #039de333;
  --badge-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --badge-transition-fast: .15s ease-out;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--spacing-1);
  min-height: 24px;
  padding: var(--spacing-1) var(--spacing-3);
  transition: background-color var(--badge-transition-fast), color var(--badge-transition-fast), transform var(--badge-transition), box-shadow var(--badge-transition);
  white-space: nowrap;
  justify-content: center;
  line-height: 1;
  display: inline-flex;
}

.harmonia-badge--default {
  background-color: var(--color-neutral-100);
  color: var(--color-text-secondary);
}

.harmonia-badge--primary {
  color: var(--badge-navy);
  background-color: #07043314;
}

.harmonia-badge--primary-solid {
  background-color: var(--badge-navy);
  color: #fff;
}

.harmonia-badge--blue, .harmonia-badge--popskills {
  background-color: var(--badge-popskills-bg);
  color: var(--badge-popskills);
}

.harmonia-badge--blue-solid, .harmonia-badge--popskills-solid {
  background-color: var(--badge-popskills);
  color: #fff;
}

.harmonia-badge--poplingua, .harmonia-badge--teal, .harmonia-badge--turquoise {
  background-color: var(--badge-poplingua-bg);
  color: #1a9e91;
}

.harmonia-badge--poplingua-solid, .harmonia-badge--teal-solid, .harmonia-badge--turquoise-solid {
  background-color: var(--badge-poplingua);
  color: #fff;
}

.harmonia-badge--coral, .harmonia-badge--poptalent, .harmonia-badge--red {
  background-color: var(--badge-poptalent-bg);
  color: #e5424f;
}

.harmonia-badge--coral-solid, .harmonia-badge--poptalent-solid, .harmonia-badge--red-solid {
  background-color: var(--badge-poptalent);
  color: #fff;
}

.harmonia-badge--plum, .harmonia-badge--popmentor, .harmonia-badge--yellow {
  background-color: var(--badge-popmentor-bg);
  color: #9a7b00;
}

.harmonia-badge--plum-solid, .harmonia-badge--popmentor-solid, .harmonia-badge--yellow-solid {
  background-color: var(--badge-popmentor);
  color: var(--badge-navy);
}

.harmonia-badge--success {
  background-color: var(--badge-poplingua-bg);
  color: #1a9e91;
}

.harmonia-badge--success-solid {
  background-color: var(--badge-poplingua);
  color: #fff;
}

.harmonia-badge--warning {
  background-color: var(--badge-popmentor-bg);
  color: #9a7b00;
}

.harmonia-badge--warning-solid {
  background-color: var(--badge-popmentor);
  color: var(--badge-navy);
}

.harmonia-badge--error {
  background-color: var(--badge-poptalent-bg);
  color: #e5424f;
}

.harmonia-badge--error-solid {
  background-color: var(--badge-poptalent);
  color: #fff;
}

.harmonia-badge--sm {
  min-height: 20px;
  padding: 2px var(--spacing-2);
  font-size: 10px;
}

.harmonia-badge--lg {
  font-size: var(--font-size-sm);
  min-height: 28px;
  padding: var(--spacing-1) var(--spacing-4);
}

.harmonia-badge--dot {
  border-radius: var(--radius-full);
  width: 8px;
  height: 8px;
  min-height: auto;
  padding: 0;
}

.harmonia-badge--dot.harmonia-badge--blue, .harmonia-badge--dot.harmonia-badge--popskills {
  background-color: var(--badge-popskills);
}

.harmonia-badge--dot.harmonia-badge--poplingua, .harmonia-badge--dot.harmonia-badge--teal, .harmonia-badge--dot.harmonia-badge--turquoise {
  background-color: var(--badge-poplingua);
}

.harmonia-badge--dot.harmonia-badge--coral, .harmonia-badge--dot.harmonia-badge--poptalent, .harmonia-badge--dot.harmonia-badge--red {
  background-color: var(--badge-poptalent);
}

.harmonia-badge--dot.harmonia-badge--plum, .harmonia-badge--dot.harmonia-badge--popmentor, .harmonia-badge--dot.harmonia-badge--yellow {
  background-color: var(--badge-popmentor);
}

.harmonia-badge--dot.harmonia-badge--success {
  background-color: var(--badge-poplingua);
}

.harmonia-badge--dot.harmonia-badge--error {
  background-color: var(--badge-poptalent);
}

.harmonia-badge--dot.harmonia-badge--warning {
  background-color: var(--badge-popmentor);
}

.harmonia-badge--outlined {
  background-color: #0000;
  border: 1.5px solid;
}

.harmonia-badge__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.harmonia-badge--lg .harmonia-badge__icon {
  width: 14px;
  height: 14px;
}

.harmonia-badge--interactive {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.harmonia-badge--interactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #0704331a;
}

.harmonia-badge--interactive:active {
  box-shadow: none;
  transform: scale(.95);
}

.harmonia-badge--interactive:focus-visible {
  box-shadow: 0 0 0 4px var(--badge-focus-ring);
  outline: 3px solid var(--badge-popskills);
  outline-offset: 2px;
}

:root.dark .harmonia-badge, [data-theme="dark"] .harmonia-badge {
  --badge-popskills-bg: #039de333;
  --badge-poplingua-bg: #2ed6c533;
  --badge-poptalent-bg: #ff5a6a33;
  --badge-popmentor-bg: #f6cd0133;
  --badge-focus-ring: #039de34d;
}

:root.dark .harmonia-badge--default, [data-theme="dark"] .harmonia-badge--default {
  background-color: var(--color-neutral-700);
  color: var(--color-neutral-200);
}

:root.dark .harmonia-badge--primary, [data-theme="dark"] .harmonia-badge--primary {
  color: var(--color-neutral-100);
  background-color: #ffffff1a;
}

:root.dark .harmonia-badge--blue, :root.dark .harmonia-badge--popskills, [data-theme="dark"] .harmonia-badge--blue, [data-theme="dark"] .harmonia-badge--popskills {
  color: #5ec2f0;
}

:root.dark .harmonia-badge--poplingua, :root.dark .harmonia-badge--success, :root.dark .harmonia-badge--teal, :root.dark .harmonia-badge--turquoise, [data-theme="dark"] .harmonia-badge--poplingua, [data-theme="dark"] .harmonia-badge--success, [data-theme="dark"] .harmonia-badge--teal, [data-theme="dark"] .harmonia-badge--turquoise {
  color: #5ee8da;
}

:root.dark .harmonia-badge--coral, :root.dark .harmonia-badge--error, :root.dark .harmonia-badge--poptalent, :root.dark .harmonia-badge--red, [data-theme="dark"] .harmonia-badge--coral, [data-theme="dark"] .harmonia-badge--error, [data-theme="dark"] .harmonia-badge--poptalent, [data-theme="dark"] .harmonia-badge--red {
  color: #ff8a95;
}

:root.dark .harmonia-badge--plum, :root.dark .harmonia-badge--popmentor, :root.dark .harmonia-badge--warning, :root.dark .harmonia-badge--yellow, [data-theme="dark"] .harmonia-badge--plum, [data-theme="dark"] .harmonia-badge--popmentor, [data-theme="dark"] .harmonia-badge--warning, [data-theme="dark"] .harmonia-badge--yellow {
  color: #ffe066;
}

:root.dark .harmonia-badge--interactive:hover, [data-theme="dark"] .harmonia-badge--interactive:hover {
  box-shadow: 0 2px 8px #0000004d;
}

@media (min-width: 1024px) {
  .harmonia-badge--interactive:hover {
    filter: brightness(1.05);
  }
}

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

  .harmonia-badge--interactive:active, .harmonia-badge--interactive:hover {
    transform: none;
  }
}

.harmonia-progress-bar {
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  display: flex;
}

.harmonia-progress-bar__track {
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  flex: 1;
  overflow: hidden;
}

.harmonia-progress-bar--sm .harmonia-progress-bar__track {
  height: 4px;
}

.harmonia-progress-bar--md .harmonia-progress-bar__track {
  height: 8px;
}

.harmonia-progress-bar--lg .harmonia-progress-bar__track {
  height: 12px;
}

.harmonia-progress-bar__fill {
  border-radius: var(--radius-full);
  height: 100%;
  transition: background-color var(--duration-fast) var(--easing-ease);
}

.harmonia-progress-bar__fill--primary {
  background: linear-gradient(90deg, var(--color-primary-500) 0, var(--color-primary-400) 100%);
}

.harmonia-progress-bar__fill--success {
  background: linear-gradient(90deg, var(--color-success-500) 0, var(--color-success-400) 100%);
}

.harmonia-progress-bar__fill--warning {
  background: linear-gradient(90deg, var(--color-warning-500) 0, var(--color-warning-400) 100%);
}

.harmonia-progress-bar__fill--error {
  background: linear-gradient(90deg, var(--color-error-500) 0, var(--color-error-400) 100%);
}

.harmonia-progress-bar__fill--theory-cognitive-load {
  background: linear-gradient(90deg, var(--color-theory-cognitive-load) 0, #8b9cf5 100%);
}

.harmonia-progress-bar__fill--theory-action {
  background: linear-gradient(90deg, var(--color-theory-action) 0, #34d399 100%);
}

.harmonia-progress-bar__fill--theory-reflection {
  background: linear-gradient(90deg, var(--color-theory-reflection) 0, #a78bfa 100%);
}

.harmonia-progress-bar__fill--theory-celebration {
  background: linear-gradient(90deg, var(--color-theory-celebration) 0, #fbbf24 100%);
}

.harmonia-progress-bar__fill--striped {
  background-image: linear-gradient(45deg, #ffffff26 25%, #0000 0 50%, #ffffff26 0 75%, #0000 0, #0000);
  background-size: 1rem 1rem;
  animation: 1s linear infinite harmonia-progress-stripes;
}

@keyframes harmonia-progress-stripes {
  0% {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.harmonia-progress-bar__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: right;
  flex-shrink: 0;
  min-width: 3rem;
}

.harmonia-progress-bar--lg .harmonia-progress-bar__label {
  font-size: var(--font-size-base);
}

.harmonia-modal__backdrop {
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-ease), visibility var(--duration-normal) var(--easing-ease);
  visibility: hidden;
  z-index: var(--z-modal);
  background-color: #00000080;
  justify-content: center;
  align-items: flex-end;
  padding: 0;
  display: flex;
  position: fixed;
  inset: 0;
}

.harmonia-modal__backdrop--open {
  opacity: 1;
  visibility: visible;
}

.harmonia-modal {
  background-color: var(--color-background-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--elevation-5);
  max-height: 90dvh;
  padding-bottom: var(--safe-area-bottom);
  transition: transform var(--duration-slow) var(--easing-spring);
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
  transform: translateY(100%);
}

.harmonia-modal__backdrop--open .harmonia-modal {
  transform: translateY(0);
}

.harmonia-modal__drag-handle {
  cursor: grab;
  padding: var(--spacing-3) 0;
  touch-action: none;
  justify-content: center;
  display: flex;
}

.harmonia-modal__drag-handle:before {
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-full);
  content: "";
  width: 36px;
  height: 4px;
}

.harmonia-modal__drag-handle:active {
  cursor: grabbing;
}

.harmonia-modal__drag-handle:active:before {
  background-color: var(--color-neutral-400);
}

.harmonia-modal__header {
  border-bottom: 1px solid var(--color-border-light);
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  flex-shrink: 0;
  justify-content: space-between;
  display: flex;
}

.harmonia-modal__title {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  flex: 1;
  min-width: 0;
  margin: 0;
}

.harmonia-modal__close {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  height: 44px;
  margin: calc(var(--spacing-2) * -1);
  padding: var(--spacing-2);
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--easing-ease), color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  display: flex;
}

.harmonia-modal__close:active {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.harmonia-modal__close:focus-visible {
  outline: 3px solid var(--color-secondary-500);
  outline-offset: 2px;
}

.harmonia-modal__close-icon {
  width: 24px;
  height: 24px;
}

.harmonia-modal__body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--spacing-4);
  flex: 1;
  overflow-y: auto;
}

.harmonia-modal__footer {
  border-top: 1px solid var(--color-border-light);
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  flex-direction: column;
  flex-shrink: 0;
  display: flex;
}

.harmonia-modal__footer .harmonia-button {
  width: 100%;
}

.harmonia-modal--sm {
  max-height: 60dvh;
}

.harmonia-modal--lg {
  max-height: 95dvh;
}

.harmonia-modal--fullscreen {
  border-radius: 0;
  max-height: 100dvh;
}

.harmonia-modal--fullscreen .harmonia-modal__drag-handle {
  display: none;
}

:root.dark .harmonia-modal__backdrop, [data-theme="dark"] .harmonia-modal__backdrop {
  background-color: #000000b3;
}

:root.dark .harmonia-modal, [data-theme="dark"] .harmonia-modal {
  background-color: var(--surface-2, var(--elevation-2-bg));
  box-shadow: 0 20px 40px #00000080;
}

:root.dark .harmonia-modal__drag-handle:before, [data-theme="dark"] .harmonia-modal__drag-handle:before {
  background-color: var(--color-neutral-600);
}

:root.dark .harmonia-modal__footer, :root.dark .harmonia-modal__header, [data-theme="dark"] .harmonia-modal__footer, [data-theme="dark"] .harmonia-modal__header {
  border-color: var(--color-border-light);
}

:root.dark .harmonia-modal__close:active, [data-theme="dark"] .harmonia-modal__close:active {
  background-color: var(--color-neutral-700);
}

@media (min-width: 768px) {
  .harmonia-modal__backdrop {
    padding: var(--spacing-6);
    align-items: center;
  }

  .harmonia-modal {
    border-radius: var(--radius-2xl);
    opacity: 0;
    min-width: 400px;
    max-width: 560px;
    max-height: 80vh;
    transition: transform var(--duration-slow) var(--easing-spring), opacity var(--duration-normal) var(--easing-ease);
    width: auto;
    transform: scale(.95)translateY(20px);
  }

  .harmonia-modal__backdrop--open .harmonia-modal {
    opacity: 1;
    transform: scale(1)translateY(0);
  }

  .harmonia-modal__drag-handle {
    display: none;
  }

  .harmonia-modal--sm {
    min-width: 320px;
    max-width: 400px;
  }

  .harmonia-modal--lg {
    max-width: 720px;
  }

  .harmonia-modal--fullscreen {
    border-radius: var(--radius-xl);
    height: calc(100% - var(--spacing-8));
    min-width: auto;
    max-width: none;
    max-height: none;
    width: calc(100% - var(--spacing-8));
  }

  .harmonia-modal__footer {
    flex-direction: row;
    justify-content: flex-end;
  }

  .harmonia-modal__footer .harmonia-button {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .harmonia-modal {
    max-width: 640px;
  }

  .harmonia-modal--lg {
    max-width: 800px;
  }

  .harmonia-modal__header {
    padding: var(--spacing-5);
  }

  .harmonia-modal__body {
    padding: var(--spacing-6);
  }

  .harmonia-modal__footer {
    padding: var(--spacing-5);
  }

  .harmonia-modal__title {
    font-size: var(--font-size-xl);
  }

  .harmonia-modal__close:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-text-primary);
  }

  :root.dark .harmonia-modal__close:hover, [data-theme="dark"] .harmonia-modal__close:hover {
    background-color: var(--color-neutral-700);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-modal, .harmonia-modal__backdrop {
    transition: opacity var(--duration-fast) var(--easing-ease);
  }

  .harmonia-modal, .harmonia-modal__backdrop--open .harmonia-modal {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-modal {
    border: 2px solid var(--color-border-strong);
  }

  .harmonia-modal__close:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

.harmonia-toast-container {
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  padding-bottom: calc(var(--spacing-4)  + var(--safe-area-bottom));
  pointer-events: none;
  z-index: var(--z-toast);
  flex-direction: column;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.harmonia-toast {
  background-color: var(--color-pop-dark-500, #070433);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-4);
  color: var(--color-text-inverse);
  align-items: flex-start;
  gap: var(--spacing-3);
  opacity: 0;
  min-height: 56px;
  padding: var(--spacing-4);
  pointer-events: auto;
  transition: transform var(--duration-slow) var(--easing-spring), opacity var(--duration-normal) var(--easing-ease);
  width: 100%;
  display: flex;
  transform: translateY(100%);
}

.harmonia-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.harmonia-toast--exiting {
  opacity: 0;
  transform: translateY(100%);
}

.harmonia-toast--success {
  background-color: var(--color-poplingua-600, #22b5a7);
}

.harmonia-toast--error {
  background-color: var(--color-poptalent-600, #eb4357);
}

.harmonia-toast--warning {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-toast--info, .harmonia-toast--popskills {
  background-color: var(--color-popskills-600, #0289c6);
}

.harmonia-toast--poplingua {
  background-color: var(--color-poplingua-600, #22b5a7);
}

.harmonia-toast--poptalent {
  background-color: var(--color-poptalent-600, #eb4357);
}

.harmonia-toast--popmentor {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-toast--turquoise {
  background-color: var(--color-poplingua-600, #22b5a7);
}

.harmonia-toast--coral {
  background-color: var(--color-poptalent-600, #eb4357);
}

.harmonia-toast--plum {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: var(--color-pop-dark-500, #070433);
}

.harmonia-toast__icon {
  color: currentColor;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.harmonia-toast__content {
  flex: 1;
  min-width: 0;
}

.harmonia-toast__title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-1);
}

.harmonia-toast__message {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  opacity: .9;
  margin: 0;
}

.harmonia-toast__close {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: var(--radius-full);
  color: currentColor;
  cursor: pointer;
  height: 44px;
  margin: calc(var(--spacing-2) * -1);
  opacity: .7;
  padding: var(--spacing-2);
  touch-action: manipulation;
  transition: opacity var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  display: flex;
}

.harmonia-toast__close:active {
  opacity: 1;
  background-color: #ffffff1a;
}

.harmonia-toast__close:focus-visible {
  opacity: 1;
  outline-offset: 2px;
  outline: 2px solid;
}

.harmonia-toast__close-icon {
  width: 20px;
  height: 20px;
}

.harmonia-toast--popmentor .harmonia-toast__close:active, .harmonia-toast--warning .harmonia-toast__close:active {
  background-color: #0704331a;
}

.harmonia-toast__actions {
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  display: flex;
}

.harmonia-toast__action {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: var(--radius-sm);
  color: currentColor;
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-height: 36px;
  padding: var(--spacing-2) var(--spacing-3);
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--easing-ease);
  background: #ffffff26;
  border: none;
}

.harmonia-toast__action:active {
  background-color: #ffffff40;
}

.harmonia-toast__action--primary {
  color: var(--color-pop-dark-500, #070433);
  background-color: #fffffff2;
}

.harmonia-toast__action--primary:active {
  background-color: #ffffffd9;
}

.harmonia-toast--popmentor .harmonia-toast__action, .harmonia-toast--warning .harmonia-toast__action {
  background: #0704331a;
}

.harmonia-toast--popmentor .harmonia-toast__action:active, .harmonia-toast--warning .harmonia-toast__action:active {
  background-color: #07043333;
}

.harmonia-toast--popmentor .harmonia-toast__action--primary, .harmonia-toast--warning .harmonia-toast__action--primary {
  background-color: var(--color-pop-dark-500, #070433);
  color: var(--color-popmentor-500, #f6cd01);
}

.harmonia-toast__progress {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-color: #fff3;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.harmonia-toast__progress-bar {
  transform-origin: 0;
  background-color: #ffffff80;
  height: 100%;
  animation: linear forwards harmonia-toast-progress;
}

.harmonia-toast--popmentor .harmonia-toast__progress, .harmonia-toast--warning .harmonia-toast__progress {
  background-color: #0704331a;
}

.harmonia-toast--popmentor .harmonia-toast__progress-bar, .harmonia-toast--warning .harmonia-toast__progress-bar {
  background-color: #0704334d;
}

@keyframes harmonia-toast-progress {
  0% {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (min-width: 768px) {
  .harmonia-toast-container {
    max-width: 400px;
    bottom: auto;
    left: auto;
    right: var(--spacing-6);
    top: var(--spacing-6);
    padding: 0;
  }

  .harmonia-toast {
    transform: translateX(100%);
  }

  .harmonia-toast--visible {
    transform: translateX(0);
  }

  .harmonia-toast--exiting {
    transform: translateX(100%);
  }

  .harmonia-toast-container--bottom-left {
    bottom: var(--spacing-6);
    left: var(--spacing-6);
    top: auto;
    right: auto;
  }

  .harmonia-toast-container--bottom-left .harmonia-toast {
    transform: translateX(-100%);
  }

  .harmonia-toast-container--bottom-left .harmonia-toast--visible {
    transform: translateX(0);
  }

  .harmonia-toast-container--bottom-left .harmonia-toast--exiting {
    transform: translateX(-100%);
  }
}

@media (min-width: 1024px) {
  .harmonia-toast__close {
    height: 32px;
    margin: calc(var(--spacing-1) * -1);
    padding: var(--spacing-1);
    width: 32px;
  }

  .harmonia-toast__close:hover {
    opacity: 1;
    background-color: #ffffff1a;
  }

  .harmonia-toast--popmentor .harmonia-toast__close:hover, .harmonia-toast--warning .harmonia-toast__close:hover {
    background-color: #0704331a;
  }

  .harmonia-toast__action:hover {
    background-color: #ffffff40;
  }

  .harmonia-toast__action--primary:hover {
    background-color: #ffffffd9;
  }

  .harmonia-toast--popmentor .harmonia-toast__action:hover, .harmonia-toast--warning .harmonia-toast__action:hover {
    background-color: #07043333;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-toast {
    transition: opacity var(--duration-fast) var(--easing-ease);
    transform: none;
  }

  .harmonia-toast--exiting, .harmonia-toast--visible {
    transform: none;
  }

  .harmonia-toast__progress-bar {
    animation: none;
    transform: scaleX(0);
  }
}

.harmonia-slider-wrapper {
  --slider-color-primary: #039de3;
  --slider-color-primary-hover: #0284c7;
  --slider-color-focus-ring: #039de333;
  --slider-color-success: #2ed6c5;
  --slider-color-warning: #f6cd01;
  --slider-color-error: #ff5a6a;
  --slider-touch-target: 48px;
  --slider-thumb-size: 28px;
  --slider-track-height: 8px;
  --slider-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --slider-transition-fast: .15s ease-out;
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-slider__header {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.harmonia-slider__label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.harmonia-slider__label, .harmonia-slider__value {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
}

.harmonia-slider__value {
  color: var(--slider-color-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

.harmonia-slider-container {
  align-items: center;
  gap: var(--spacing-3);
  display: flex;
}

.harmonia-slider__max-label, .harmonia-slider__min-label {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  min-width: 2rem;
}

.harmonia-slider__min-label {
  text-align: right;
}

.harmonia-slider__max-label {
  text-align: left;
}

.harmonia-slider__track-wrapper {
  height: var(--slider-touch-target);
  flex: 1;
  align-items: center;
  display: flex;
  position: relative;
}

.harmonia-slider__track {
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  height: var(--slider-track-height);
  transition: background-color var(--slider-transition-fast);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
}

.harmonia-slider__track-wrapper:hover .harmonia-slider__track {
  background-color: var(--color-neutral-300);
}

.harmonia-slider__fill {
  border-radius: var(--radius-full);
  height: 100%;
  transition: background-color var(--slider-transition-fast);
}

.harmonia-slider__fill--primary {
  background-color: var(--slider-color-primary);
}

.harmonia-slider__fill--success {
  background-color: var(--slider-color-success);
}

.harmonia-slider__fill--warning {
  background-color: var(--slider-color-warning);
}

.harmonia-slider__fill--error {
  background-color: var(--slider-color-error);
}

.harmonia-slider__input {
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
}

.harmonia-slider__input:disabled {
  cursor: not-allowed;
}

.harmonia-slider__thumb {
  border: 3px solid var(--slider-color-primary);
  border-radius: var(--radius-full);
  height: var(--slider-thumb-size);
  pointer-events: none;
  transition: box-shadow var(--slider-transition), border-color var(--slider-transition-fast), transform var(--slider-transition);
  width: var(--slider-thumb-size);
  z-index: 1;
  background-color: #fff;
  position: absolute;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #0704331f;
}

.harmonia-slider__input:hover ~ .harmonia-slider__thumb {
  transform: translateX(-50%)translateY(-2px);
  box-shadow: 0 6px 16px #07043326;
}

.harmonia-slider__input:focus-visible ~ .harmonia-slider__thumb {
  box-shadow: 0 0 0 4px var(--slider-color-focus-ring), 0 4px 12px #0704331f;
  transform: translateX(-50%)scale(1.1);
}

.harmonia-slider__input:active ~ .harmonia-slider__thumb {
  transform: translateX(-50%)scale(.95);
}

.harmonia-slider__thumb--primary {
  border-color: var(--slider-color-primary);
}

.harmonia-slider__thumb--success {
  border-color: var(--slider-color-success);
}

.harmonia-slider__thumb--warning {
  border-color: var(--slider-color-warning);
}

.harmonia-slider__thumb--error {
  border-color: var(--slider-color-error);
}

.harmonia-slider__thumb-value {
  background-color: var(--color-navy-900, #070433);
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-1) var(--spacing-2);
  white-space: nowrap;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-slider__thumb-value:after {
  border: 4px solid #0000;
  border-top: 4px solid var(--color-navy-900, #070433);
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-slider__ticks {
  position: absolute;
  top: calc(50% + 16px);
  left: 0;
  right: 0;
}

.harmonia-slider__tick {
  align-items: center;
  gap: var(--spacing-1);
  flex-direction: column;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
}

.harmonia-slider__tick-mark {
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-sm);
  height: 8px;
  transition: background-color var(--slider-transition-fast);
  width: 2px;
}

.harmonia-slider__tick--active .harmonia-slider__tick-mark {
  background-color: var(--slider-color-primary);
}

.harmonia-slider__tick-label {
  color: var(--color-text-tertiary);
}

.harmonia-slider__helper, .harmonia-slider__tick-label {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
}

.harmonia-slider__helper {
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

.harmonia-slider-wrapper--sm {
  --slider-touch-target: 44px;
  --slider-thumb-size: 24px;
  --slider-track-height: 6px;
}

.harmonia-slider-wrapper--lg {
  --slider-touch-target: 56px;
  --slider-thumb-size: 32px;
  --slider-track-height: 10px;
}

.harmonia-slider__input:disabled ~ .harmonia-slider__thumb {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  box-shadow: none;
  transform: translateX(-50%);
}

.harmonia-slider__input:disabled ~ .harmonia-slider__thumb:hover {
  box-shadow: none;
  transform: translateX(-50%);
}

.harmonia-slider__input:disabled ~ .harmonia-slider__track .harmonia-slider__fill {
  background-color: var(--color-neutral-300);
}

.harmonia-slider-wrapper:has(.harmonia-slider__input:disabled) {
  opacity: .5;
}

.harmonia-slider__input:focus-visible ~ .harmonia-slider__thumb {
  outline: 3px solid var(--slider-color-primary);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-slider__thumb {
    border-width: 4px;
  }

  .harmonia-slider__input:focus-visible ~ .harmonia-slider__thumb {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-slider-wrapper, [data-theme="dark"] .harmonia-slider-wrapper {
  --slider-color-focus-ring: #039de34d;
}

:root.dark .harmonia-slider__track, [data-theme="dark"] .harmonia-slider__track {
  background-color: var(--color-neutral-700);
}

:root.dark .harmonia-slider__track-wrapper:hover .harmonia-slider__track, [data-theme="dark"] .harmonia-slider__track-wrapper:hover .harmonia-slider__track {
  background-color: var(--color-neutral-600);
}

:root.dark .harmonia-slider__thumb, [data-theme="dark"] .harmonia-slider__thumb {
  background-color: var(--surface-1, var(--elevation-1-bg));
  box-shadow: 0 2px 8px #0000004d;
}

:root.dark .harmonia-slider__input:hover ~ .harmonia-slider__thumb, [data-theme="dark"] .harmonia-slider__input:hover ~ .harmonia-slider__thumb {
  box-shadow: 0 6px 16px #0006;
}

:root.dark .harmonia-slider__tick-mark, [data-theme="dark"] .harmonia-slider__tick-mark {
  background-color: var(--color-neutral-600);
}

:root.dark .harmonia-slider__input:disabled ~ .harmonia-slider__thumb, [data-theme="dark"] .harmonia-slider__input:disabled ~ .harmonia-slider__thumb {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

@media (min-width: 768px) {
  .harmonia-slider-wrapper {
    --slider-touch-target: 44px;
    --slider-thumb-size: 24px;
    --slider-track-height: 6px;
  }

  .harmonia-slider-wrapper--sm {
    --slider-touch-target: 40px;
    --slider-thumb-size: 20px;
    --slider-track-height: 4px;
  }

  .harmonia-slider-wrapper--lg {
    --slider-touch-target: 52px;
    --slider-thumb-size: 28px;
    --slider-track-height: 8px;
  }
}

@media (min-width: 1024px) {
  .harmonia-slider-wrapper {
    --slider-touch-target: 40px;
    --slider-thumb-size: 20px;
    --slider-track-height: 6px;
  }

  .harmonia-slider-wrapper--sm {
    --slider-touch-target: 36px;
    --slider-thumb-size: 16px;
    --slider-track-height: 4px;
  }

  .harmonia-slider-wrapper--lg {
    --slider-touch-target: 48px;
    --slider-thumb-size: 24px;
    --slider-track-height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-slider__fill, .harmonia-slider__thumb, .harmonia-slider__tick-mark, .harmonia-slider__track {
    transition: none;
  }

  .harmonia-slider__input:active ~ .harmonia-slider__thumb, .harmonia-slider__input:focus-visible ~ .harmonia-slider__thumb, .harmonia-slider__input:hover ~ .harmonia-slider__thumb {
    transform: translateX(-50%);
  }
}

.harmonia-tooltip-wrapper {
  --tooltip-background: #070433;
  --tooltip-text: #fff;
  --tooltip-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --tooltip-transition-fast: .15s ease-out;
  display: inline-flex;
  position: relative;
}

.harmonia-tooltip-trigger {
  display: inline-flex;
}

.harmonia-tooltip {
  word-wrap: break-word;
  background-color: var(--tooltip-background);
  border-radius: var(--radius-lg);
  color: var(--tooltip-text);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  opacity: 0;
  max-width: 280px;
  padding: var(--spacing-2) var(--spacing-3);
  pointer-events: none;
  transform-origin: center;
  transition: opacity var(--tooltip-transition-fast), transform var(--tooltip-transition);
  white-space: normal;
  z-index: var(--z-index-tooltip, 9999);
  position: absolute;
  box-shadow: 0 4px 16px #07043333;
}

.harmonia-tooltip--visible {
  opacity: 1;
}

.harmonia-tooltip--top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%)translateY(4px);
}

.harmonia-tooltip--top.harmonia-tooltip--visible {
  transform: translateX(-50%)translateY(0);
}

.harmonia-tooltip--bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%)translateY(-4px);
}

.harmonia-tooltip--bottom.harmonia-tooltip--visible {
  transform: translateX(-50%)translateY(0);
}

.harmonia-tooltip--left {
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%)translateX(4px);
}

.harmonia-tooltip--left.harmonia-tooltip--visible {
  transform: translateY(-50%)translateX(0);
}

.harmonia-tooltip--right {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%)translateX(-4px);
}

.harmonia-tooltip--right.harmonia-tooltip--visible {
  transform: translateY(-50%)translateX(0);
}

.harmonia-tooltip__arrow {
  border: 6px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
}

.harmonia-tooltip--top .harmonia-tooltip__arrow {
  border-top-color: var(--tooltip-background);
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-tooltip--bottom .harmonia-tooltip__arrow {
  border-bottom-color: var(--tooltip-background);
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-tooltip--left .harmonia-tooltip__arrow {
  border-left-color: var(--tooltip-background);
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
}

.harmonia-tooltip--right .harmonia-tooltip__arrow {
  border-right-color: var(--tooltip-background);
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
}

:root.dark .harmonia-tooltip-wrapper, [data-theme="dark"] .harmonia-tooltip-wrapper {
  --tooltip-background: #1f2937;
}

:root.dark .harmonia-tooltip, [data-theme="dark"] .harmonia-tooltip {
  box-shadow: 0 4px 16px #0006;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-tooltip {
    transition: opacity var(--tooltip-transition-fast);
  }

  .harmonia-tooltip--bottom, .harmonia-tooltip--left, .harmonia-tooltip--right, .harmonia-tooltip--top {
    transform: translateX(-50%)translateY(0);
  }

  .harmonia-tooltip--left, .harmonia-tooltip--right {
    transform: translateY(-50%)translateX(0);
  }
}

.harmonia-checkbox-wrapper {
  --checkbox-color-checked: #039de3;
  --checkbox-color-checked-hover: #0284c7;
  --checkbox-color-focus-ring: #039de333;
  --checkbox-color-error: #ff5a6a;
  --checkbox-color-error-ring: #ff5a6a26;
  --checkbox-touch-target: 48px;
  --checkbox-box-size: 24px;
  --checkbox-icon-size: 16px;
  --checkbox-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --checkbox-transition-fast: .15s ease-out;
  gap: var(--spacing-1);
  flex-direction: column;
  display: flex;
}

.harmonia-checkbox {
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--checkbox-touch-target);
  padding: calc((var(--checkbox-touch-target)  - var(--checkbox-box-size)) / 2) 0;
  display: inline-flex;
}

.harmonia-checkbox-wrapper--disabled .harmonia-checkbox {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-checkbox__input {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
}

.harmonia-checkbox__box {
  background-color: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  height: var(--checkbox-box-size);
  transition: background-color var(--checkbox-transition-fast), border-color var(--checkbox-transition-fast), box-shadow var(--checkbox-transition), transform var(--checkbox-transition);
  width: var(--checkbox-box-size);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-checkbox__box svg {
  color: #fff;
  height: var(--checkbox-icon-size);
  width: var(--checkbox-icon-size);
}

.harmonia-checkbox:hover:not(.harmonia-checkbox--disabled) .harmonia-checkbox__box {
  border-color: var(--checkbox-color-checked);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-checkbox__input:focus-visible + .harmonia-checkbox__box {
  border-color: var(--checkbox-color-checked);
  box-shadow: 0 0 0 3px var(--checkbox-color-focus-ring);
  transform: scale(1.05);
}

.harmonia-checkbox__input:checked + .harmonia-checkbox__box {
  background-color: var(--checkbox-color-checked);
  border-color: var(--checkbox-color-checked);
}

.harmonia-checkbox__input:checked:hover + .harmonia-checkbox__box {
  background-color: var(--checkbox-color-checked-hover);
  border-color: var(--checkbox-color-checked-hover);
}

.harmonia-checkbox__input:indeterminate + .harmonia-checkbox__box {
  background-color: var(--checkbox-color-checked);
  border-color: var(--checkbox-color-checked);
}

.harmonia-checkbox-wrapper--error .harmonia-checkbox__box {
  border-color: var(--checkbox-color-error);
}

.harmonia-checkbox-wrapper--error .harmonia-checkbox__input:focus-visible + .harmonia-checkbox__box {
  box-shadow: 0 0 0 3px var(--checkbox-color-error-ring);
}

.harmonia-checkbox-wrapper--error .harmonia-checkbox__input:checked + .harmonia-checkbox__box {
  background-color: var(--checkbox-color-error);
  border-color: var(--checkbox-color-error);
}

.harmonia-checkbox__input:disabled + .harmonia-checkbox__box {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  transform: none;
}

.harmonia-checkbox__input:disabled:checked + .harmonia-checkbox__box {
  background-color: var(--color-neutral-400);
  border-color: var(--color-neutral-400);
}

.harmonia-checkbox__input:disabled + .harmonia-checkbox__box:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-checkbox__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-user-select: none;
  user-select: none;
}

.harmonia-checkbox__helper {
  color: var(--color-text-secondary);
}

.harmonia-checkbox__error, .harmonia-checkbox__helper {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  margin: 0;
  margin-left: calc(var(--checkbox-box-size)  + var(--spacing-3));
}

.harmonia-checkbox__error {
  color: var(--checkbox-color-error);
  align-items: center;
  gap: var(--spacing-1);
  animation: .2s ease-out forwards checkbox-fade-slide-in;
  display: flex;
}

@keyframes checkbox-fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-checkbox-wrapper--sm {
  --checkbox-touch-target: 44px;
  --checkbox-box-size: 20px;
  --checkbox-icon-size: 14px;
}

.harmonia-checkbox-wrapper--sm .harmonia-checkbox__label {
  font-size: var(--font-size-sm);
}

.harmonia-checkbox-wrapper--lg {
  --checkbox-touch-target: 56px;
  --checkbox-box-size: 28px;
  --checkbox-icon-size: 18px;
}

.harmonia-checkbox-wrapper--lg .harmonia-checkbox__label {
  font-size: var(--font-size-lg);
}

.harmonia-checkbox-group {
  border: none;
  margin: 0;
  padding: 0;
}

.harmonia-checkbox-group__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-3);
  display: block;
}

.harmonia-checkbox-group__options {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-checkbox-group--vertical .harmonia-checkbox-group__options {
  flex-direction: column;
}

.harmonia-checkbox-group--horizontal .harmonia-checkbox-group__options {
  gap: var(--spacing-4);
  flex-flow: wrap;
}

.harmonia-checkbox-group__helper {
  color: var(--color-text-secondary);
}

.harmonia-checkbox-group__error, .harmonia-checkbox-group__helper {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  margin: var(--spacing-2) 0 0;
}

.harmonia-checkbox-group__error {
  color: var(--checkbox-color-error);
}

.harmonia-checkbox__input:focus-visible + .harmonia-checkbox__box {
  outline: 3px solid var(--checkbox-color-checked);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-checkbox__box {
    border-width: 3px;
  }

  .harmonia-checkbox__input:focus-visible + .harmonia-checkbox__box {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-checkbox-wrapper, [data-theme="dark"] .harmonia-checkbox-wrapper {
  --checkbox-color-focus-ring: #039de34d;
  --checkbox-color-error-ring: #ff5a6a40;
}

:root.dark .harmonia-checkbox__box, [data-theme="dark"] .harmonia-checkbox__box {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-checkbox:hover:not(.harmonia-checkbox--disabled) .harmonia-checkbox__box, [data-theme="dark"] .harmonia-checkbox:hover:not(.harmonia-checkbox--disabled) .harmonia-checkbox__box {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-checkbox__input:disabled + .harmonia-checkbox__box, [data-theme="dark"] .harmonia-checkbox__input:disabled + .harmonia-checkbox__box {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

@media (min-width: 768px) {
  .harmonia-checkbox-wrapper {
    --checkbox-touch-target: 44px;
    --checkbox-box-size: 22px;
    --checkbox-icon-size: 14px;
  }

  .harmonia-checkbox-wrapper--sm {
    --checkbox-touch-target: 40px;
    --checkbox-box-size: 18px;
    --checkbox-icon-size: 12px;
  }

  .harmonia-checkbox-wrapper--lg {
    --checkbox-touch-target: 52px;
    --checkbox-box-size: 26px;
    --checkbox-icon-size: 16px;
  }
}

@media (min-width: 1024px) {
  .harmonia-checkbox-wrapper {
    --checkbox-touch-target: 40px;
    --checkbox-box-size: 20px;
    --checkbox-icon-size: 14px;
  }

  .harmonia-checkbox__label {
    font-size: var(--font-size-base);
  }

  .harmonia-checkbox-wrapper--sm {
    --checkbox-touch-target: 36px;
    --checkbox-box-size: 16px;
    --checkbox-icon-size: 10px;
  }

  .harmonia-checkbox-wrapper--lg {
    --checkbox-touch-target: 48px;
    --checkbox-box-size: 24px;
    --checkbox-icon-size: 16px;
  }
}

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

  .harmonia-checkbox:hover:not(.harmonia-checkbox--disabled) .harmonia-checkbox__box, .harmonia-checkbox__input:focus-visible + .harmonia-checkbox__box {
    transform: none;
  }

  .harmonia-checkbox__error {
    animation: none;
  }
}

.harmonia-radio-wrapper {
  --radio-color-selected: #039de3;
  --radio-color-selected-hover: #0284c7;
  --radio-color-focus-ring: #039de333;
  --radio-color-error: #ff5a6a;
  --radio-color-error-ring: #ff5a6a26;
  --radio-touch-target: 48px;
  --radio-circle-size: 24px;
  --radio-dot-size: 10px;
  --radio-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --radio-transition-fast: .15s ease-out;
  gap: var(--spacing-1);
  flex-direction: column;
  display: flex;
}

.harmonia-radio {
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--radio-touch-target);
  padding: calc((var(--radio-touch-target)  - var(--radio-circle-size)) / 2) 0;
  display: inline-flex;
}

.harmonia-radio-wrapper--disabled .harmonia-radio {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-radio__input {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
}

.harmonia-radio__circle {
  background-color: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-full);
  height: var(--radio-circle-size);
  transition: background-color var(--radio-transition-fast), border-color var(--radio-transition-fast), box-shadow var(--radio-transition), transform var(--radio-transition);
  width: var(--radio-circle-size);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-radio__dot {
  border-radius: var(--radius-full);
  height: var(--radio-dot-size);
  width: var(--radio-dot-size);
  background-color: #fff;
}

.harmonia-radio:hover:not(.harmonia-radio--disabled) .harmonia-radio__circle {
  border-color: var(--radio-color-selected);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-radio__input:focus-visible + .harmonia-radio__circle {
  border-color: var(--radio-color-selected);
  box-shadow: 0 0 0 3px var(--radio-color-focus-ring);
  transform: scale(1.05);
}

.harmonia-radio__input:checked + .harmonia-radio__circle {
  background-color: var(--radio-color-selected);
  border-color: var(--radio-color-selected);
}

.harmonia-radio__input:checked:hover + .harmonia-radio__circle {
  background-color: var(--radio-color-selected-hover);
  border-color: var(--radio-color-selected-hover);
}

.harmonia-radio-wrapper--error .harmonia-radio__circle {
  border-color: var(--radio-color-error);
}

.harmonia-radio-wrapper--error .harmonia-radio__input:focus-visible + .harmonia-radio__circle {
  box-shadow: 0 0 0 3px var(--radio-color-error-ring);
}

.harmonia-radio-wrapper--error .harmonia-radio__input:checked + .harmonia-radio__circle {
  background-color: var(--radio-color-error);
  border-color: var(--radio-color-error);
}

.harmonia-radio__input:disabled + .harmonia-radio__circle {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
  transform: none;
}

.harmonia-radio__input:disabled:checked + .harmonia-radio__circle {
  background-color: var(--color-neutral-400);
  border-color: var(--color-neutral-400);
}

.harmonia-radio__input:disabled + .harmonia-radio__circle:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-radio__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-user-select: none;
  user-select: none;
}

.harmonia-radio__helper {
  color: var(--color-text-secondary);
}

.harmonia-radio__error, .harmonia-radio__helper {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  margin: 0;
  margin-left: calc(var(--radio-circle-size)  + var(--spacing-3));
}

.harmonia-radio__error {
  color: var(--radio-color-error);
  align-items: center;
  gap: var(--spacing-1);
  animation: .2s ease-out forwards radio-fade-slide-in;
  display: flex;
}

@keyframes radio-fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-radio-wrapper--sm {
  --radio-touch-target: 44px;
  --radio-circle-size: 20px;
  --radio-dot-size: 8px;
}

.harmonia-radio-wrapper--sm .harmonia-radio__label {
  font-size: var(--font-size-sm);
}

.harmonia-radio-wrapper--lg {
  --radio-touch-target: 56px;
  --radio-circle-size: 28px;
  --radio-dot-size: 12px;
}

.harmonia-radio-wrapper--lg .harmonia-radio__label {
  font-size: var(--font-size-lg);
}

.harmonia-radio-group {
  border: none;
  margin: 0;
  padding: 0;
}

.harmonia-radio-group__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-3);
  display: block;
}

.harmonia-radio-group__options {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-radio-group--vertical .harmonia-radio-group__options {
  flex-direction: column;
}

.harmonia-radio-group--horizontal .harmonia-radio-group__options {
  gap: var(--spacing-4);
  flex-flow: wrap;
}

.harmonia-radio-group__helper {
  color: var(--color-text-secondary);
}

.harmonia-radio-group__error, .harmonia-radio-group__helper {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  margin: var(--spacing-2) 0 0;
}

.harmonia-radio-group__error {
  color: var(--radio-color-error);
  animation: .2s ease-out forwards radio-fade-slide-in;
}

.harmonia-radio__input:focus-visible + .harmonia-radio__circle {
  outline: 3px solid var(--radio-color-selected);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-radio__circle {
    border-width: 3px;
  }

  .harmonia-radio__input:focus-visible + .harmonia-radio__circle {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-radio-wrapper, [data-theme="dark"] .harmonia-radio-wrapper {
  --radio-color-focus-ring: #039de34d;
  --radio-color-error-ring: #ff5a6a40;
}

:root.dark .harmonia-radio__circle, [data-theme="dark"] .harmonia-radio__circle {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-radio:hover:not(.harmonia-radio--disabled) .harmonia-radio__circle, [data-theme="dark"] .harmonia-radio:hover:not(.harmonia-radio--disabled) .harmonia-radio__circle {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-radio__input:disabled + .harmonia-radio__circle, [data-theme="dark"] .harmonia-radio__input:disabled + .harmonia-radio__circle {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

@media (min-width: 768px) {
  .harmonia-radio-wrapper {
    --radio-touch-target: 44px;
    --radio-circle-size: 22px;
    --radio-dot-size: 9px;
  }

  .harmonia-radio-wrapper--sm {
    --radio-touch-target: 40px;
    --radio-circle-size: 18px;
    --radio-dot-size: 7px;
  }

  .harmonia-radio-wrapper--lg {
    --radio-touch-target: 52px;
    --radio-circle-size: 26px;
    --radio-dot-size: 11px;
  }
}

@media (min-width: 1024px) {
  .harmonia-radio-wrapper {
    --radio-touch-target: 40px;
    --radio-circle-size: 20px;
    --radio-dot-size: 8px;
  }

  .harmonia-radio__label {
    font-size: var(--font-size-base);
  }

  .harmonia-radio-wrapper--sm {
    --radio-touch-target: 36px;
    --radio-circle-size: 16px;
    --radio-dot-size: 6px;
  }

  .harmonia-radio-wrapper--lg {
    --radio-touch-target: 48px;
    --radio-circle-size: 24px;
    --radio-dot-size: 10px;
  }
}

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

  .harmonia-radio:hover:not(.harmonia-radio--disabled) .harmonia-radio__circle, .harmonia-radio__input:focus-visible + .harmonia-radio__circle {
    transform: none;
  }

  .harmonia-radio-group__error, .harmonia-radio__error {
    animation: none;
  }
}

.harmonia-select-wrapper {
  --select-color-focus: #039de3;
  --select-color-focus-ring: #039de333;
  --select-color-success: #2ed6c5;
  --select-color-success-ring: #2ed6c533;
  --select-color-success-bg: #2ed6c50d;
  --select-color-error: #ff5a6a;
  --select-color-error-ring: #ff5a6a26;
  --select-color-error-bg: #ff5a6a0d;
  --select-height-sm: 44px;
  --select-height-md: 48px;
  --select-height-lg: 56px;
  --select-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --select-transition-fast: .15s ease-out;
  gap: var(--spacing-1-5);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.harmonia-select__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.harmonia-select__label--required:after {
  color: var(--select-color-error);
  content: " *";
}

.harmonia-select__container {
  align-items: center;
  width: 100%;
  display: inline-flex;
  position: relative;
}

.harmonia-select {
  appearance: none;
  background: none;
  background-color: var(--color-background-primary);
  border: none;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  min-height: var(--select-height-md);
  padding: var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-4);
  transition: border-color var(--select-transition-fast), box-shadow var(--select-transition), background-color var(--select-transition-fast), transform var(--select-transition);
  outline: none;
  width: 100%;
}

.harmonia-select--with-left-icon {
  padding-left: calc(var(--spacing-4)  + 28px);
}

.harmonia-select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-select:focus {
  border-color: var(--select-color-focus);
  box-shadow: 0 0 0 3px var(--select-color-focus-ring);
  transform: scale(1.005);
}

.harmonia-select:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.harmonia-select:disabled:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-select__icon {
  color: var(--color-text-tertiary);
  pointer-events: none;
  height: 20px;
  transition: color var(--select-transition-fast), transform var(--select-transition);
  justify-content: center;
  align-items: center;
  width: 20px;
  display: flex;
  position: absolute;
}

.harmonia-select__icon--left {
  left: var(--spacing-4);
}

.harmonia-select__icon svg {
  width: 100%;
  height: 100%;
}

.harmonia-select__chevron {
  color: var(--color-text-tertiary);
  pointer-events: none;
  height: 20px;
  right: var(--spacing-4);
  transition: color var(--select-transition-fast), transform var(--select-transition);
  justify-content: center;
  align-items: center;
  width: 20px;
  display: flex;
  position: absolute;
}

.harmonia-select__chevron svg {
  width: 100%;
  height: 100%;
}

.harmonia-select:focus ~ .harmonia-select__chevron, .harmonia-select:focus ~ .harmonia-select__icon--left {
  color: var(--select-color-focus);
}

.harmonia-select:focus ~ .harmonia-select__chevron {
  transform: rotate(180deg);
}

.harmonia-select__helper {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  margin: 0;
}

.harmonia-select__success {
  color: var(--select-color-success);
}

.harmonia-select__error, .harmonia-select__success {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: var(--spacing-1);
  line-height: var(--line-height-normal);
  margin: 0;
  animation: .2s ease-out forwards select-fade-slide-in;
  display: flex;
}

.harmonia-select__error {
  color: var(--select-color-error);
}

@keyframes select-fade-slide-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-select-wrapper--success .harmonia-select {
  background-color: var(--select-color-success-bg);
  border-color: var(--select-color-success);
}

.harmonia-select-wrapper--success .harmonia-select:focus {
  box-shadow: 0 0 0 3px var(--select-color-success-ring);
}

.harmonia-select-wrapper--success .harmonia-select__chevron, .harmonia-select-wrapper--success .harmonia-select__icon--left {
  color: var(--select-color-success);
}

.harmonia-select-wrapper--error .harmonia-select {
  background-color: var(--select-color-error-bg);
  border-color: var(--select-color-error);
}

.harmonia-select-wrapper--error .harmonia-select:focus {
  box-shadow: 0 0 0 3px var(--select-color-error-ring);
}

.harmonia-select-wrapper--error .harmonia-select__chevron, .harmonia-select-wrapper--error .harmonia-select__icon--left {
  color: var(--select-color-error);
}

.harmonia-select-wrapper--sm .harmonia-select {
  border-radius: var(--radius-md);
  min-height: var(--select-height-sm);
  padding: var(--spacing-2-5) var(--spacing-8) var(--spacing-2-5) var(--spacing-3);
  font-size: 16px;
}

.harmonia-select-wrapper--sm .harmonia-select--with-left-icon {
  padding-left: calc(var(--spacing-3)  + 24px);
}

.harmonia-select-wrapper--sm .harmonia-select__chevron, .harmonia-select-wrapper--sm .harmonia-select__icon {
  width: 18px;
  height: 18px;
}

.harmonia-select-wrapper--sm .harmonia-select__icon--left {
  left: var(--spacing-3);
}

.harmonia-select-wrapper--sm .harmonia-select__chevron {
  right: var(--spacing-3);
}

.harmonia-select-wrapper--lg .harmonia-select {
  border-radius: var(--radius-xl);
  font-size: var(--font-size-lg);
  min-height: var(--select-height-lg);
  padding: var(--spacing-4) var(--spacing-12) var(--spacing-4) var(--spacing-5);
}

.harmonia-select-wrapper--lg .harmonia-select--with-left-icon {
  padding-left: calc(var(--spacing-5)  + 32px);
}

.harmonia-select-wrapper--lg .harmonia-select__chevron, .harmonia-select-wrapper--lg .harmonia-select__icon {
  width: 24px;
  height: 24px;
}

.harmonia-select-wrapper--lg .harmonia-select__label {
  font-size: var(--font-size-base);
}

.harmonia-select:focus-visible {
  outline: 3px solid var(--select-color-focus);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .harmonia-select {
    border-width: 3px;
  }

  .harmonia-select:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }
}

:root.dark .harmonia-select-wrapper, [data-theme="dark"] .harmonia-select-wrapper {
  --select-color-focus-ring: #039de34d;
  --select-color-success-ring: #2ed6c54d;
  --select-color-success-bg: #2ed6c51a;
  --select-color-error-ring: #ff5a6a40;
  --select-color-error-bg: #ff5a6a1a;
}

:root.dark .harmonia-select, [data-theme="dark"] .harmonia-select {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

:root.dark .harmonia-select:hover:not(:focus):not(:disabled), [data-theme="dark"] .harmonia-select:hover:not(:focus):not(:disabled) {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-select:disabled, [data-theme="dark"] .harmonia-select:disabled {
  background-color: var(--surface-base, var(--color-background-tertiary));
}

@media (min-width: 768px) {
  .harmonia-select-wrapper {
    --select-height-sm: 40px;
    --select-height-md: 44px;
    --select-height-lg: 52px;
  }
}

@media (min-width: 1024px) {
  .harmonia-select-wrapper {
    --select-height-sm: 36px;
    --select-height-md: 40px;
    --select-height-lg: 48px;
  }

  .harmonia-select {
    font-size: var(--font-size-base);
  }

  .harmonia-select-wrapper--sm .harmonia-select {
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-select, .harmonia-select__chevron, .harmonia-select__icon {
    transition: none;
  }

  .harmonia-select:focus, .harmonia-select:focus ~ .harmonia-select__chevron, .harmonia-select:hover:not(:focus):not(:disabled) {
    transform: none;
  }

  .harmonia-select__error, .harmonia-select__success {
    animation: none;
  }
}

.harmonia-bottom-sheet__container {
  z-index: var(--z-modal);
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: 0;
}

.harmonia-bottom-sheet__overlay {
  -webkit-backdrop-filter: blur(4px);
  background-color: #00000080;
  position: absolute;
  inset: 0;
}

.harmonia-bottom-sheet {
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-background-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  max-height: 90dvh;
  padding-bottom: var(--safe-area-bottom);
  touch-action: none;
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
  box-shadow: 0 -8px 32px #00000026;
}

.harmonia-bottom-sheet__handle-container {
  cursor: grab;
  padding: var(--spacing-3) 0 var(--spacing-2);
  touch-action: none;
  justify-content: center;
  display: flex;
}

.harmonia-bottom-sheet__handle-container:active {
  cursor: grabbing;
}

.harmonia-bottom-sheet__handle-container:focus-visible {
  outline: none;
}

.harmonia-bottom-sheet__handle-container:focus-visible .harmonia-bottom-sheet__handle {
  background-color: var(--color-secondary-500);
}

.harmonia-bottom-sheet__handle {
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-pill);
  height: 5px;
  transition: background-color var(--duration-fast) var(--easing-ease), width var(--duration-fast) var(--easing-ease);
  width: 40px;
}

.harmonia-bottom-sheet__handle-container:hover .harmonia-bottom-sheet__handle {
  background-color: var(--color-neutral-400);
  width: 50px;
}

.harmonia-bottom-sheet__header {
  border-bottom: 1px solid var(--color-border-light);
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  flex-shrink: 0;
  justify-content: space-between;
  display: flex;
}

.harmonia-bottom-sheet__title {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0;
}

.harmonia-bottom-sheet__close {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  height: 44px;
  margin: calc(var(--spacing-2) * -1);
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--easing-ease), color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  display: flex;
}

.harmonia-bottom-sheet__close:active {
  background-color: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.harmonia-bottom-sheet__close:focus-visible {
  outline: 3px solid var(--color-secondary-500);
  outline-offset: 2px;
}

.harmonia-bottom-sheet__content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--spacing-4);
  flex: 1;
  overflow-y: auto;
}

.harmonia-bottom-sheet__snap-indicators {
  gap: var(--spacing-2);
  right: var(--spacing-3);
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.harmonia-bottom-sheet__snap-dot {
  appearance: none;
  background: none;
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  height: 8px;
  transition: background-color var(--duration-fast) var(--easing-ease), transform var(--duration-fast) var(--easing-ease);
  border: none;
  width: 8px;
  padding: 0;
}

.harmonia-bottom-sheet__snap-dot:hover {
  background-color: var(--color-neutral-400);
}

.harmonia-bottom-sheet__snap-dot--active {
  background-color: var(--color-secondary-500);
  transform: scale(1.3);
}

.harmonia-bottom-sheet__snap-dot:focus-visible {
  outline: 2px solid var(--color-secondary-500);
  outline-offset: 2px;
}

:root.dark .harmonia-bottom-sheet__overlay, [data-theme="dark"] .harmonia-bottom-sheet__overlay {
  background-color: #000000b3;
}

:root.dark .harmonia-bottom-sheet, [data-theme="dark"] .harmonia-bottom-sheet {
  background-color: var(--surface-2);
  box-shadow: 0 -8px 32px #0006;
}

:root.dark .harmonia-bottom-sheet__handle, [data-theme="dark"] .harmonia-bottom-sheet__handle {
  background-color: var(--color-neutral-600);
}

:root.dark .harmonia-bottom-sheet__handle-container:hover .harmonia-bottom-sheet__handle, [data-theme="dark"] .harmonia-bottom-sheet__handle-container:hover .harmonia-bottom-sheet__handle {
  background-color: var(--color-neutral-500);
}

:root.dark .harmonia-bottom-sheet__header, [data-theme="dark"] .harmonia-bottom-sheet__header {
  border-color: var(--color-border-light);
}

:root.dark .harmonia-bottom-sheet__close:active, [data-theme="dark"] .harmonia-bottom-sheet__close:active {
  background-color: var(--color-neutral-700);
}

:root.dark .harmonia-bottom-sheet__snap-dot, [data-theme="dark"] .harmonia-bottom-sheet__snap-dot {
  background-color: var(--color-neutral-600);
}

:root.dark .harmonia-bottom-sheet__snap-dot:hover, [data-theme="dark"] .harmonia-bottom-sheet__snap-dot:hover {
  background-color: var(--color-neutral-500);
}

@media (min-width: 768px) {
  .harmonia-bottom-sheet {
    border-radius: var(--radius-2xl);
    margin: 0 auto;
    margin-bottom: var(--spacing-6);
    max-width: 600px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-bottom-sheet__handle {
    transition: none;
  }
}

.harmonia-skeleton {
  --skeleton-base: #07043314;
  --skeleton-highlight: #07043308;
  --skeleton-wave: #ffffff80;
  --skeleton-duration: 1.5s;
  --skeleton-wave-duration: 1.6s;
  background-color: var(--skeleton-base);
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.harmonia-skeleton--text {
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-2);
}

.harmonia-skeleton--last-line, .harmonia-skeleton--text:last-child {
  margin-bottom: 0;
}

.harmonia-skeleton--circular {
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.harmonia-skeleton--rectangular {
  border-radius: 0;
}

.harmonia-skeleton--button, .harmonia-skeleton--rounded {
  border-radius: var(--radius-lg);
}

.harmonia-skeleton--pulse {
  animation: harmonia-skeleton-pulse var(--skeleton-duration) ease-in-out infinite;
}

@keyframes harmonia-skeleton-pulse {
  0%, to {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.harmonia-skeleton--wave:after {
  animation: harmonia-skeleton-wave var(--skeleton-wave-duration) linear infinite;
  background: linear-gradient(90deg, transparent 0, var(--skeleton-wave) 50%, transparent 100%);
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

@keyframes harmonia-skeleton-wave {
  0% {
    transform: translateX(-100%);
  }

  60%, to {
    transform: translateX(100%);
  }
}

.harmonia-skeleton--none {
  animation: none;
}

.harmonia-skeleton--none:after {
  display: none;
}

.harmonia-skeleton__lines {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-skeleton-card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-skeleton-card__header {
  align-items: center;
  gap: var(--spacing-3);
  display: flex;
}

.harmonia-skeleton-card__header-text {
  gap: var(--spacing-1);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.harmonia-skeleton-card__content {
  flex: 1;
}

.harmonia-skeleton-card__actions {
  border-top: 1px solid var(--color-border-light);
  gap: var(--spacing-2);
  padding-top: var(--spacing-2);
  justify-content: flex-end;
  display: flex;
}

.harmonia-skeleton-image {
  background-color: var(--skeleton-base);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.harmonia-skeleton-image--rounded {
  border-radius: var(--radius-xl);
}

.harmonia-skeleton-image .harmonia-skeleton {
  position: absolute;
  inset: 0;
}

.harmonia-skeleton-image__icon {
  color: #07043333;
  opacity: .5;
  z-index: 1;
  position: relative;
}

:root.dark .harmonia-skeleton, [data-theme="dark"] .harmonia-skeleton {
  --skeleton-base: #ffffff14;
  --skeleton-highlight: #ffffff08;
  --skeleton-wave: #ffffff1a;
}

:root.dark .harmonia-skeleton-card, [data-theme="dark"] .harmonia-skeleton-card {
  background: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-skeleton-image, [data-theme="dark"] .harmonia-skeleton-image {
  background-color: var(--skeleton-base);
}

:root.dark .harmonia-skeleton-image__icon, [data-theme="dark"] .harmonia-skeleton-image__icon {
  color: #fff3;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-skeleton--pulse, .harmonia-skeleton--wave {
    animation: none;
  }

  .harmonia-skeleton--wave:after {
    display: none;
  }
}

.harmonia-virtual-list {
  --virtuallist-spinner-color: #039de3;
  --virtuallist-spinner-track: #039de333;
  --virtuallist-scrollbar-thumb: #07043333;
  --virtuallist-scrollbar-thumb-hover: #0704334d;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overflow: hidden auto;
}

.harmonia-virtual-list--gpu {
  will-change: transform;
}

.harmonia-virtual-list__spacer {
  width: 100%;
  position: relative;
}

.harmonia-virtual-list__items {
  will-change: transform;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.harmonia-virtual-list--gpu .harmonia-virtual-list__items {
  transform: translateZ(0);
}

.harmonia-virtual-list__item {
  width: 100%;
  overflow: hidden;
}

.harmonia-virtual-list--empty {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-virtual-list__loading {
  background: linear-gradient(to top, var(--color-background-primary) 60%, transparent);
  padding: var(--spacing-4);
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  bottom: 0;
}

.harmonia-virtual-list__spinner {
  border: 3px solid var(--virtuallist-spinner-track);
  border-radius: var(--radius-full);
  border-top-color: var(--virtuallist-spinner-color);
  width: 28px;
  height: 28px;
  animation: .8s linear infinite harmonia-virtuallist-spin;
}

@keyframes harmonia-virtuallist-spin {
  to {
    transform: rotate(1turn);
  }
}

.harmonia-virtual-list__loading-text {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-3);
}

.harmonia-virtual-list::-webkit-scrollbar {
  width: 8px;
}

.harmonia-virtual-list::-webkit-scrollbar-track {
  background: none;
}

.harmonia-virtual-list::-webkit-scrollbar-thumb {
  background: var(--virtuallist-scrollbar-thumb);
  border-radius: var(--radius-full);
  transition: background-color .15s ease-out;
}

.harmonia-virtual-list::-webkit-scrollbar-thumb:hover {
  background: var(--virtuallist-scrollbar-thumb-hover);
}

.harmonia-virtual-list {
  scrollbar-color: var(--virtuallist-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

:root.dark .harmonia-virtual-list, [data-theme="dark"] .harmonia-virtual-list {
  --virtuallist-spinner-track: #039de34d;
  --virtuallist-scrollbar-thumb: #fff3;
  --virtuallist-scrollbar-thumb-hover: #ffffff4d;
}

:root.dark .harmonia-virtual-list__loading, [data-theme="dark"] .harmonia-virtual-list__loading {
  background: linear-gradient(to top, var(--surface-1, var(--elevation-1-bg)) 60%, transparent);
}

@media (pointer: coarse) {
  .harmonia-virtual-list::-webkit-scrollbar {
    display: none;
  }

  .harmonia-virtual-list {
    scrollbar-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-virtual-list__spinner {
    border-right-color: var(--virtuallist-spinner-color);
    border-top-color: var(--virtuallist-spinner-color);
    animation: none;
  }
}

.harmonia-lazy-image {
  background: var(--color-neutral-100);
  display: block;
  position: relative;
  overflow: hidden;
}

.harmonia-lazy-image--rounded-sm {
  border-radius: var(--radius-sm);
}

.harmonia-lazy-image--rounded-md {
  border-radius: var(--radius-md);
}

.harmonia-lazy-image--rounded-lg {
  border-radius: var(--radius-lg);
}

.harmonia-lazy-image--rounded-full {
  border-radius: var(--radius-full);
}

.harmonia-lazy-image__placeholder {
  position: absolute;
  inset: 0;
}

.harmonia-lazy-image__blur {
  filter: blur(20px);
  width: 100%;
  height: 100%;
  transform: scale(1.1);
}

.harmonia-lazy-image__skeleton {
  background: linear-gradient(90deg, var(--color-neutral-200) 25%, var(--color-neutral-100) 50%, var(--color-neutral-200) 75%);
  background-size: 200% 100%;
  width: 100%;
  height: 100%;
  animation: 1.5s infinite harmonia-shimmer;
}

@keyframes harmonia-shimmer {
  0% {
    background-position: 200% 0;
  }

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

.harmonia-lazy-image__error {
  background: var(--color-neutral-100);
  align-items: center;
  gap: var(--spacing-2);
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.harmonia-lazy-image__error-icon {
  opacity: .5;
  font-size: 2rem;
}

.harmonia-lazy-image__error-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.harmonia-lazy-image__img {
  width: 100%;
  height: 100%;
  display: block;
}

:root.dark .harmonia-lazy-image, [data-theme="dark"] .harmonia-lazy-image {
  background: var(--color-neutral-200);
}

:root.dark .harmonia-lazy-image__skeleton, [data-theme="dark"] .harmonia-lazy-image__skeleton {
  background: linear-gradient(90deg, var(--color-neutral-300) 25%, var(--color-neutral-200) 50%, var(--color-neutral-300) 75%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-lazy-image__skeleton {
    background: var(--color-neutral-200);
    animation: none;
  }
}

.harmonia-skip-links {
  --skiplinks-background: #039de3;
  --skiplinks-background-hover: #0284c7;
  --skiplinks-focus-ring: #039de34d;
  --skiplinks-min-height: 48px;
  --skiplinks-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --skiplinks-transition-fast: .15s ease-out;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  z-index: 9999;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.harmonia-skip-links__link {
  background: var(--skiplinks-background);
  border-radius: var(--radius-lg);
  color: #fff;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  min-height: var(--skiplinks-min-height);
  opacity: 0;
  padding: var(--spacing-3) var(--spacing-5);
  transition: transform var(--skiplinks-transition), opacity var(--skiplinks-transition-fast), background-color var(--skiplinks-transition-fast);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
  position: absolute;
  transform: translateY(-100%);
  box-shadow: 0 4px 16px #07043326;
}

.harmonia-skip-links__link:focus {
  box-shadow: 0 0 0 5px var(--skiplinks-focus-ring), 0 4px 16px #07043326;
  opacity: 1;
  outline-offset: 2px;
  outline: 3px solid #fff;
  transform: translateY(0);
}

.harmonia-skip-links__link:hover {
  background: var(--skiplinks-background-hover);
}

.harmonia-skip-links__link:active {
  transform: translateY(0)scale(.98);
}

.harmonia-skip-links__link:nth-child(2):focus {
  transform: translateY(0) translateX(calc(100% + var(--spacing-2)));
}

.harmonia-skip-links__link:nth-child(3):focus {
  transform: translateY(0) translateX(calc(200% + var(--spacing-4)));
}

:root.dark .harmonia-skip-links__link, [data-theme="dark"] .harmonia-skip-links__link {
  box-shadow: 0 4px 16px #0000004d;
}

:root.dark .harmonia-skip-links__link:focus, [data-theme="dark"] .harmonia-skip-links__link:focus {
  box-shadow: 0 0 0 5px var(--skiplinks-focus-ring), 0 4px 16px #0000004d;
}

@media (min-width: 768px) {
  .harmonia-skip-links {
    --skiplinks-min-height: 44px;
  }
}

@media (min-width: 1024px) {
  .harmonia-skip-links {
    --skiplinks-min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-skip-links__link {
    transition: opacity var(--skiplinks-transition-fast);
  }

  .harmonia-skip-links__link:active, .harmonia-skip-links__link:focus {
    transform: translateY(0);
  }

  .harmonia-skip-links__link:nth-child(2):focus {
    transform: translateY(0) translateX(calc(100% + var(--spacing-2)));
  }

  .harmonia-skip-links__link:nth-child(3):focus {
    transform: translateY(0) translateX(calc(200% + var(--spacing-4)));
  }
}

@media (prefers-contrast: high) {
  .harmonia-skip-links__link:focus {
    outline-width: 4px;
  }
}

.harmonia-fab__backdrop {
  z-index: 998;
  background: #0000004d;
  position: fixed;
  inset: 0;
}

.harmonia-fab-container {
  align-items: center;
  gap: var(--spacing-4);
  z-index: 999;
  flex-direction: column;
  display: flex;
  position: fixed;
}

.harmonia-fab-container--bottom-right {
  bottom: calc(var(--spacing-4)  + var(--safe-area-bottom));
  right: var(--spacing-4);
}

.harmonia-fab-container--bottom-left {
  bottom: calc(var(--spacing-4)  + var(--safe-area-bottom));
  left: var(--spacing-4);
}

.harmonia-fab-container--bottom-center {
  bottom: calc(var(--spacing-4)  + var(--safe-area-bottom));
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-fab {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-4);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-2);
  transition: box-shadow var(--duration-fast) var(--easing-ease);
  border: none;
  justify-content: center;
  display: flex;
}

.harmonia-fab--sm {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

.harmonia-fab--md {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.harmonia-fab--lg {
  width: 72px;
  height: 72px;
  font-size: 2rem;
}

.harmonia-fab--extended {
  border-radius: var(--radius-full);
  padding: 0 var(--spacing-4);
  width: auto;
}

.harmonia-fab--extended.harmonia-fab--sm {
  height: 40px;
}

.harmonia-fab--extended.harmonia-fab--md {
  height: 48px;
}

.harmonia-fab--extended.harmonia-fab--lg {
  height: 56px;
}

.harmonia-fab--primary {
  background: var(--color-primary-500);
  color: #fff;
}

.harmonia-fab--primary:hover:not(:disabled) {
  background: var(--color-primary-600);
  box-shadow: var(--elevation-5);
}

.harmonia-fab--secondary {
  background: var(--color-secondary-500);
  color: #fff;
}

.harmonia-fab--secondary:hover:not(:disabled) {
  background: var(--color-secondary-600);
  box-shadow: var(--elevation-5);
}

.harmonia-fab--success {
  background: var(--color-success-500);
  color: #fff;
}

.harmonia-fab--success:hover:not(:disabled) {
  background: var(--color-success-600);
  box-shadow: var(--elevation-5);
}

.harmonia-fab--error {
  background: var(--color-error-500);
  color: #fff;
}

.harmonia-fab--error:hover:not(:disabled) {
  background: var(--color-error-600);
  box-shadow: var(--elevation-5);
}

.harmonia-fab--disabled {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-fab--open {
  box-shadow: var(--elevation-5);
}

.harmonia-fab__icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-fab__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.harmonia-fab__actions {
  align-items: flex-end;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-fab-container--bottom-left .harmonia-fab__actions {
  align-items: flex-start;
}

.harmonia-fab-container--bottom-center .harmonia-fab__actions {
  align-items: center;
}

.harmonia-fab__action {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-background-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--elevation-3);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  white-space: nowrap;
  border: none;
  display: flex;
}

.harmonia-fab__action:hover {
  background: var(--color-neutral-100);
}

.harmonia-fab__action-icon {
  background: var(--color-primary-100);
  border-radius: var(--radius-full);
  color: var(--color-primary-600);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  display: flex;
}

.harmonia-fab__action-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding-right: var(--spacing-2);
}

:root.dark .harmonia-fab__backdrop, [data-theme="dark"] .harmonia-fab__backdrop {
  background: #00000080;
}

:root.dark .harmonia-fab__action, [data-theme="dark"] .harmonia-fab__action {
  background: var(--color-background-secondary);
}

:root.dark .harmonia-fab__action:hover, [data-theme="dark"] .harmonia-fab__action:hover {
  background: var(--color-neutral-200);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-fab, .harmonia-fab__action, .harmonia-fab__icon {
    transition: none;
  }
}

.harmonia-action-sheet__backdrop {
  z-index: 1000;
  background: #0006;
  position: fixed;
  inset: 0;
}

.harmonia-action-sheet {
  background: var(--color-background-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  max-height: 80vh;
  padding: var(--spacing-4);
  padding-bottom: calc(var(--spacing-4)  + var(--safe-area-bottom));
  z-index: 1001;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.harmonia-action-sheet__handle {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  height: 4px;
  margin: 0 auto var(--spacing-4);
  width: 36px;
}

.harmonia-action-sheet__header {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  text-align: center;
}

.harmonia-action-sheet__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.harmonia-action-sheet__description {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin: var(--spacing-1) 0 0;
}

.harmonia-action-sheet__actions {
  gap: var(--spacing-1);
  flex-direction: column;
  display: flex;
}

.harmonia-action-sheet__action {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-4);
  text-align: left;
  transition: background-color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  width: 100%;
  display: flex;
}

.harmonia-action-sheet__action:hover:not(:disabled) {
  background: var(--color-neutral-100);
}

.harmonia-action-sheet__action--default .harmonia-action-sheet__action-label {
  color: var(--color-text-primary);
}

.harmonia-action-sheet__action--primary .harmonia-action-sheet__action-label {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-semibold);
}

.harmonia-action-sheet__action--destructive .harmonia-action-sheet__action-label {
  color: var(--color-error-600);
}

.harmonia-action-sheet__action--disabled {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-action-sheet__action-icon {
  color: var(--color-text-secondary);
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 1.25rem;
  display: flex;
}

.harmonia-action-sheet__action--destructive .harmonia-action-sheet__action-icon {
  color: var(--color-error-500);
}

.harmonia-action-sheet__action--primary .harmonia-action-sheet__action-icon {
  color: var(--color-primary-500);
}

.harmonia-action-sheet__action-label {
  font-size: var(--font-size-base);
}

.harmonia-action-sheet__cancel-container {
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
}

.harmonia-action-sheet__cancel {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-4);
  border: none;
  width: 100%;
}

.harmonia-action-sheet__cancel:hover {
  background: var(--color-neutral-200);
}

:root.dark .harmonia-action-sheet, [data-theme="dark"] .harmonia-action-sheet {
  background: var(--color-background-secondary);
}

:root.dark .harmonia-action-sheet__backdrop, [data-theme="dark"] .harmonia-action-sheet__backdrop {
  background: #0009;
}

:root.dark .harmonia-action-sheet__handle, [data-theme="dark"] .harmonia-action-sheet__handle {
  background: var(--color-neutral-400);
}

:root.dark .harmonia-action-sheet__action:hover:not(:disabled), :root.dark .harmonia-action-sheet__cancel, [data-theme="dark"] .harmonia-action-sheet__action:hover:not(:disabled), [data-theme="dark"] .harmonia-action-sheet__cancel {
  background: var(--color-neutral-200);
}

:root.dark .harmonia-action-sheet__cancel:hover, [data-theme="dark"] .harmonia-action-sheet__cancel:hover {
  background: var(--color-neutral-300);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-action-sheet {
    transition: none;
  }
}

.harmonia-datepicker {
  --datepicker-color-primary: #039de3;
  --datepicker-color-primary-hover: #0284c7;
  --datepicker-color-focus-ring: #039de333;
  --datepicker-color-error: #ff5a6a;
  --datepicker-color-error-ring: #ff5a6a26;
  --datepicker-touch-target: 48px;
  --datepicker-day-size: 44px;
  --datepicker-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --datepicker-transition-fast: .15s ease-out;
  gap: var(--spacing-1-5);
  flex-direction: column;
  display: flex;
}

.harmonia-datepicker__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-datepicker__trigger {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--datepicker-touch-target);
  padding: var(--spacing-3) var(--spacing-4);
  transition: border-color var(--datepicker-transition-fast), box-shadow var(--datepicker-transition), transform var(--datepicker-transition);
  justify-content: space-between;
  display: flex;
}

.harmonia-datepicker__trigger:hover:not(:focus):not(.harmonia-datepicker__trigger--disabled) {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-datepicker__trigger:focus {
  border-color: var(--datepicker-color-primary);
  box-shadow: 0 0 0 3px var(--datepicker-color-focus-ring);
  outline: none;
}

.harmonia-datepicker__trigger:focus-visible {
  outline: 3px solid var(--datepicker-color-primary);
  outline-offset: 2px;
}

.harmonia-datepicker__trigger--disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.harmonia-datepicker__trigger--disabled:hover {
  box-shadow: none;
  transform: none;
}

.harmonia-datepicker__trigger--error {
  border-color: var(--datepicker-color-error);
}

.harmonia-datepicker__trigger--error:focus {
  box-shadow: 0 0 0 3px var(--datepicker-color-error-ring);
}

.harmonia-datepicker__value {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
}

.harmonia-datepicker__icon, .harmonia-datepicker__placeholder {
  color: var(--color-text-tertiary);
}

.harmonia-datepicker__icon {
  height: 20px;
  transition: color var(--datepicker-transition-fast);
  flex-shrink: 0;
  width: 20px;
}

.harmonia-datepicker__trigger:focus .harmonia-datepicker__icon {
  color: var(--datepicker-color-primary);
}

.harmonia-datepicker__error {
  color: var(--datepicker-color-error);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: var(--spacing-1);
  animation: .2s ease-out datepicker-fade-in;
  display: flex;
}

@keyframes datepicker-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-datepicker__backdrop {
  z-index: 1000;
  background: #07043380;
  position: fixed;
  inset: 0;
}

.harmonia-datepicker__calendar {
  background: var(--color-background-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--spacing-4);
  padding-bottom: calc(var(--spacing-6)  + env(safe-area-inset-bottom, 0px));
  z-index: 1001;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -4px 24px #07043326;
}

.harmonia-datepicker__handle {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  height: 4px;
  margin: 0 auto var(--spacing-4);
  width: 36px;
}

.harmonia-datepicker__header {
  margin-bottom: var(--spacing-4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-datepicker__nav {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  cursor: pointer;
  height: var(--datepicker-touch-target);
  transition: background-color var(--datepicker-transition-fast), transform var(--datepicker-transition);
  width: var(--datepicker-touch-target);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-datepicker__nav:hover {
  background: #039de31a;
}

.harmonia-datepicker__nav:active {
  transform: scale(.95);
}

.harmonia-datepicker__nav:focus-visible {
  outline: 3px solid var(--datepicker-color-primary);
  outline-offset: 2px;
}

.harmonia-datepicker__nav svg {
  width: 20px;
  height: 20px;
}

.harmonia-datepicker__month-year {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.harmonia-datepicker__weekdays {
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
  grid-template-columns: repeat(7, 1fr);
  display: grid;
}

.harmonia-datepicker__weekday {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-2);
  text-align: center;
}

.harmonia-datepicker__days {
  gap: var(--spacing-1);
  grid-template-columns: repeat(7, 1fr);
  display: grid;
}

.harmonia-datepicker__day-cell {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-datepicker__day {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  height: var(--datepicker-day-size);
  transition: background-color var(--datepicker-transition-fast), color var(--datepicker-transition-fast), transform var(--datepicker-transition), box-shadow var(--datepicker-transition);
  width: var(--datepicker-day-size);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-datepicker__day:hover:not(:disabled):not(.harmonia-datepicker__day--selected) {
  background: #039de31a;
  transform: scale(1.05);
}

.harmonia-datepicker__day:focus-visible {
  outline: 3px solid var(--datepicker-color-primary);
  outline-offset: 2px;
}

.harmonia-datepicker__day--today {
  border: 2px solid var(--datepicker-color-primary);
  font-weight: var(--font-weight-bold);
}

.harmonia-datepicker__day--selected {
  background: var(--datepicker-color-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px #039de34d;
}

.harmonia-datepicker__day--selected:hover {
  background: var(--datepicker-color-primary-hover);
  transform: scale(1.05);
}

.harmonia-datepicker__day--disabled {
  cursor: not-allowed;
  opacity: .3;
}

.harmonia-datepicker__day--disabled:hover {
  background: none;
  transform: none;
}

.harmonia-datepicker__day--other-month {
  color: var(--color-text-tertiary);
}

.harmonia-datepicker__actions {
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  display: flex;
}

.harmonia-datepicker__cancel, .harmonia-datepicker__today {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  min-height: var(--datepicker-touch-target);
  padding: var(--spacing-3);
  transition: background-color var(--datepicker-transition-fast), transform var(--datepicker-transition);
  border: none;
  flex: 1;
}

.harmonia-datepicker__today {
  background: var(--datepicker-color-primary);
  color: #fff;
}

.harmonia-datepicker__today:hover {
  background: var(--datepicker-color-primary-hover);
}

.harmonia-datepicker__today:active {
  transform: scale(.98);
}

.harmonia-datepicker__cancel {
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.harmonia-datepicker__cancel:hover {
  background: var(--color-neutral-200);
}

.harmonia-datepicker__cancel:active {
  transform: scale(.98);
}

.harmonia-datepicker__cancel:focus-visible, .harmonia-datepicker__today:focus-visible {
  outline: 3px solid var(--datepicker-color-primary);
  outline-offset: 2px;
}

:root.dark .harmonia-datepicker, [data-theme="dark"] .harmonia-datepicker {
  --datepicker-color-focus-ring: #039de34d;
  --datepicker-color-error-ring: #ff5a6a40;
}

:root.dark .harmonia-datepicker__trigger, [data-theme="dark"] .harmonia-datepicker__trigger {
  background: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-datepicker__trigger:hover:not(:focus):not(.harmonia-datepicker__trigger--disabled), [data-theme="dark"] .harmonia-datepicker__trigger:hover:not(:focus):not(.harmonia-datepicker__trigger--disabled) {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-datepicker__calendar, [data-theme="dark"] .harmonia-datepicker__calendar {
  background: var(--surface-1, var(--elevation-1-bg));
  box-shadow: 0 -4px 24px #0000004d;
}

:root.dark .harmonia-datepicker__handle, [data-theme="dark"] .harmonia-datepicker__handle {
  background: var(--color-neutral-600);
}

:root.dark .harmonia-datepicker__day:hover:not(:disabled):not(.harmonia-datepicker__day--selected), :root.dark .harmonia-datepicker__nav:hover, [data-theme="dark"] .harmonia-datepicker__day:hover:not(:disabled):not(.harmonia-datepicker__day--selected), [data-theme="dark"] .harmonia-datepicker__nav:hover {
  background: #039de333;
}

:root.dark .harmonia-datepicker__cancel, [data-theme="dark"] .harmonia-datepicker__cancel {
  background: var(--color-neutral-700);
  color: var(--color-neutral-100);
}

:root.dark .harmonia-datepicker__cancel:hover, [data-theme="dark"] .harmonia-datepicker__cancel:hover {
  background: var(--color-neutral-600);
}

@media (min-width: 768px) {
  .harmonia-datepicker {
    --datepicker-touch-target: 44px;
    --datepicker-day-size: 40px;
  }

  .harmonia-datepicker__calendar {
    border-radius: var(--radius-xl);
    min-width: 320px;
    padding-bottom: var(--spacing-4);
    position: absolute;
    bottom: auto;
    left: 0;
    right: auto;
    box-shadow: 0 4px 24px #07043326;
  }

  .harmonia-datepicker__handle {
    display: none;
  }
}

@media (min-width: 1024px) {
  .harmonia-datepicker {
    --datepicker-touch-target: 40px;
    --datepicker-day-size: 36px;
  }

  .harmonia-datepicker__value {
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-datepicker__cancel, .harmonia-datepicker__day, .harmonia-datepicker__nav, .harmonia-datepicker__today, .harmonia-datepicker__trigger {
    transition: none;
  }

  .harmonia-datepicker__day--selected:hover, .harmonia-datepicker__day:hover, .harmonia-datepicker__nav:active, .harmonia-datepicker__trigger:hover {
    transform: none;
  }

  .harmonia-datepicker__error {
    animation: none;
  }
}

.harmonia-timepicker {
  --timepicker-color-primary: #039de3;
  --timepicker-color-primary-hover: #0284c7;
  --timepicker-color-focus-ring: #039de333;
  --timepicker-color-error: #ff5a6a;
  --timepicker-touch-target: 48px;
  --timepicker-item-size: 52px;
  --timepicker-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --timepicker-transition-fast: .15s ease-out;
  gap: var(--spacing-1-5);
  flex-direction: column;
  display: flex;
}

.harmonia-timepicker__label {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-timepicker__trigger {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--timepicker-touch-target);
  padding: var(--spacing-3) var(--spacing-4);
  transition: border-color var(--timepicker-transition-fast), box-shadow var(--timepicker-transition), transform var(--timepicker-transition);
  justify-content: space-between;
  display: flex;
}

.harmonia-timepicker__trigger:hover:not(:focus):not(.harmonia-timepicker__trigger--disabled) {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #07043314;
}

.harmonia-timepicker__trigger:focus {
  border-color: var(--timepicker-color-primary);
  box-shadow: 0 0 0 3px var(--timepicker-color-focus-ring);
  outline: none;
}

.harmonia-timepicker__trigger:focus-visible {
  outline: 3px solid var(--timepicker-color-primary);
  outline-offset: 2px;
}

.harmonia-timepicker__trigger--disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
}

.harmonia-timepicker__trigger--error {
  border-color: var(--timepicker-color-error);
}

.harmonia-timepicker__value {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  font-size: 16px;
}

.harmonia-timepicker__icon, .harmonia-timepicker__placeholder {
  color: var(--color-text-tertiary);
}

.harmonia-timepicker__icon {
  height: 20px;
  transition: color var(--timepicker-transition-fast);
  flex-shrink: 0;
  width: 20px;
}

.harmonia-timepicker__trigger:focus .harmonia-timepicker__icon {
  color: var(--timepicker-color-primary);
}

.harmonia-timepicker__error {
  color: var(--timepicker-color-error);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  animation: .2s ease-out timepicker-fade-in;
}

@keyframes timepicker-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.harmonia-timepicker__backdrop {
  z-index: 1000;
  background: #07043380;
  position: fixed;
  inset: 0;
}

.harmonia-timepicker__picker {
  background: var(--color-background-primary);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--spacing-4);
  padding-bottom: calc(var(--spacing-6)  + env(safe-area-inset-bottom, 0px));
  z-index: 1001;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -4px 24px #07043326;
}

.harmonia-timepicker__handle {
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  height: 4px;
  margin: 0 auto var(--spacing-4);
  width: 36px;
}

.harmonia-timepicker__header {
  margin-bottom: var(--spacing-4);
  text-align: center;
}

.harmonia-timepicker__title {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.harmonia-timepicker__preview {
  color: var(--timepicker-color-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  margin-top: var(--spacing-2);
}

.harmonia-timepicker__wheels {
  align-items: flex-start;
  gap: var(--spacing-4);
  justify-content: center;
  display: flex;
}

.harmonia-timepicker__wheel {
  align-items: center;
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-timepicker__wheel-label {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.harmonia-timepicker__wheel-items {
  -ms-overflow-style: none;
  gap: var(--spacing-2);
  max-height: 220px;
  padding: var(--spacing-2);
  scrollbar-width: none;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
  overflow-y: auto;
}

.harmonia-timepicker__wheel-items::-webkit-scrollbar {
  display: none;
}

.harmonia-timepicker__wheel-item {
  -webkit-tap-highlight-color: transparent;
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  height: var(--timepicker-item-size);
  transition: background-color var(--timepicker-transition-fast), border-color var(--timepicker-transition-fast), color var(--timepicker-transition-fast), transform var(--timepicker-transition), box-shadow var(--timepicker-transition);
  width: var(--timepicker-item-size);
  background: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-timepicker__wheel-item:hover:not(.harmonia-timepicker__wheel-item--selected) {
  border-color: var(--timepicker-color-primary);
  background: #039de31a;
  transform: scale(1.05);
}

.harmonia-timepicker__wheel-item:focus-visible {
  outline: 3px solid var(--timepicker-color-primary);
  outline-offset: 2px;
}

.harmonia-timepicker__wheel-item--selected {
  background: var(--timepicker-color-primary);
  border-color: var(--timepicker-color-primary);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 2px 8px #039de34d;
}

.harmonia-timepicker__wheel-item--selected:hover {
  background: var(--timepicker-color-primary-hover);
  border-color: var(--timepicker-color-primary-hover);
  transform: scale(1.05);
}

.harmonia-timepicker__separator {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-top: 48px;
}

.harmonia-timepicker__actions {
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  display: flex;
}

.harmonia-timepicker__cancel, .harmonia-timepicker__confirm {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  min-height: var(--timepicker-touch-target);
  padding: var(--spacing-3);
  transition: background-color var(--timepicker-transition-fast), transform var(--timepicker-transition);
  border: none;
  flex: 1;
}

.harmonia-timepicker__cancel {
  background: var(--color-neutral-100);
  color: var(--color-text-primary);
}

.harmonia-timepicker__cancel:hover {
  background: var(--color-neutral-200);
}

.harmonia-timepicker__cancel:active {
  transform: scale(.98);
}

.harmonia-timepicker__confirm {
  background: var(--timepicker-color-primary);
  color: #fff;
}

.harmonia-timepicker__confirm:hover {
  background: var(--timepicker-color-primary-hover);
}

.harmonia-timepicker__confirm:active {
  transform: scale(.98);
}

.harmonia-timepicker__cancel:focus-visible, .harmonia-timepicker__confirm:focus-visible {
  outline: 3px solid var(--timepicker-color-primary);
  outline-offset: 2px;
}

:root.dark .harmonia-timepicker, [data-theme="dark"] .harmonia-timepicker {
  --timepicker-color-focus-ring: #039de34d;
}

:root.dark .harmonia-timepicker__trigger, [data-theme="dark"] .harmonia-timepicker__trigger {
  background: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-timepicker__trigger:hover:not(:focus):not(.harmonia-timepicker__trigger--disabled), [data-theme="dark"] .harmonia-timepicker__trigger:hover:not(:focus):not(.harmonia-timepicker__trigger--disabled) {
  box-shadow: 0 4px 12px #0003;
}

:root.dark .harmonia-timepicker__picker, [data-theme="dark"] .harmonia-timepicker__picker {
  background: var(--surface-1, var(--elevation-1-bg));
  box-shadow: 0 -4px 24px #0000004d;
}

:root.dark .harmonia-timepicker__handle, [data-theme="dark"] .harmonia-timepicker__handle {
  background: var(--color-neutral-600);
}

:root.dark .harmonia-timepicker__wheel-item, [data-theme="dark"] .harmonia-timepicker__wheel-item {
  border-color: var(--color-neutral-600);
}

:root.dark .harmonia-timepicker__wheel-item:hover:not(.harmonia-timepicker__wheel-item--selected), [data-theme="dark"] .harmonia-timepicker__wheel-item:hover:not(.harmonia-timepicker__wheel-item--selected) {
  background: #039de333;
}

:root.dark .harmonia-timepicker__cancel, [data-theme="dark"] .harmonia-timepicker__cancel {
  background: var(--color-neutral-700);
  color: var(--color-neutral-100);
}

:root.dark .harmonia-timepicker__cancel:hover, [data-theme="dark"] .harmonia-timepicker__cancel:hover {
  background: var(--color-neutral-600);
}

@media (min-width: 768px) {
  .harmonia-timepicker {
    --timepicker-touch-target: 44px;
    --timepicker-item-size: 48px;
  }

  .harmonia-timepicker__picker {
    border-radius: var(--radius-xl);
    min-width: 320px;
    padding-bottom: var(--spacing-4);
    position: absolute;
    bottom: auto;
    left: 0;
    right: auto;
    box-shadow: 0 4px 24px #07043326;
  }

  .harmonia-timepicker__handle {
    display: none;
  }
}

@media (min-width: 1024px) {
  .harmonia-timepicker {
    --timepicker-touch-target: 40px;
    --timepicker-item-size: 44px;
  }

  .harmonia-timepicker__value {
    font-size: var(--font-size-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-timepicker__cancel, .harmonia-timepicker__confirm, .harmonia-timepicker__trigger, .harmonia-timepicker__wheel-item {
    transition: none;
  }

  .harmonia-timepicker__trigger:hover, .harmonia-timepicker__wheel-item--selected:hover, .harmonia-timepicker__wheel-item:hover {
    transform: none;
  }

  .harmonia-timepicker__error {
    animation: none;
  }
}

.harmonia-brand-icon {
  transition: transform var(--duration-normal) var(--easing-ease);
}

.harmonia-brand-icon--animated:hover {
  transform: scale(1.1);
}

.harmonia-brand-icon--animated:active {
  transform: scale(.95);
}

.harmonia-brand-icon--pop.harmonia-brand-icon--animated:hover {
  filter: drop-shadow(0 0 8px #0704334d);
}

.harmonia-brand-icon--popskills.harmonia-brand-icon--animated:hover {
  filter: drop-shadow(0 0 8px #039de366);
}

.harmonia-brand-icon--poplingua.harmonia-brand-icon--animated:hover {
  filter: drop-shadow(0 0 8px #2ed6c566);
}

.harmonia-brand-icon--poptalent.harmonia-brand-icon--animated:hover {
  filter: drop-shadow(0 0 8px #ff5a6a66);
}

.harmonia-brand-icon--popmentor.harmonia-brand-icon--animated:hover {
  filter: drop-shadow(0 0 8px #f6cd0166);
}

.harmonia-brand-icon--filled svg, .harmonia-brand-icon--soft {
  border-radius: var(--radius-full);
}

.harmonia-logo {
  --logo-focus-popskills: #039de3;
  --logo-focus-poplingua: #2ed6c5;
  --logo-focus-poptalent: #ff5a6a;
  --logo-focus-popmentor: #f6cd01;
  --logo-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --logo-transition-fast: .15s ease-out;
  transition: transform var(--logo-transition), filter var(--logo-transition-fast);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: inline-flex;
}

.harmonia-logo[href], .harmonia-logo[role="button"], a .harmonia-logo, button .harmonia-logo {
  cursor: pointer;
}

.harmonia-logo[href]:hover, .harmonia-logo[role="button"]:hover, a:hover .harmonia-logo, button:hover .harmonia-logo {
  transform: scale(1.03);
}

.harmonia-logo[href]:active, .harmonia-logo[role="button"]:active, a:active .harmonia-logo, button:active .harmonia-logo {
  transform: scale(.98);
}

.harmonia-logo__icon {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.harmonia-logo__icon svg {
  width: 100%;
  height: 100%;
}

.harmonia-logo__wordmark {
  align-items: center;
  display: inline-flex;
}

.harmonia-logo__wordmark svg {
  width: auto;
  height: 100%;
}

.harmonia-logo--xs {
  height: 20px;
}

.harmonia-logo--sm {
  height: 28px;
}

.harmonia-logo--md {
  height: 36px;
}

.harmonia-logo--lg {
  height: 48px;
}

.harmonia-logo--xl {
  height: 64px;
}

.harmonia-logo--2xl {
  height: 80px;
}

.harmonia-logo--icon .harmonia-logo__icon {
  aspect-ratio: 1;
}

.harmonia-logo--full {
  gap: var(--spacing-2);
}

.harmonia-logo--wordmark .harmonia-logo__wordmark {
  height: 100%;
}

.harmonia-logo:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--logo-focus-popskills);
  outline-offset: 4px;
}

.harmonia-logo--pop:focus-visible, .harmonia-logo--popskills:focus-visible {
  outline-color: var(--logo-focus-popskills);
}

.harmonia-logo--poplingua:focus-visible {
  outline-color: var(--logo-focus-poplingua);
}

.harmonia-logo--poptalent:focus-visible {
  outline-color: var(--logo-focus-poptalent);
}

.harmonia-logo--popmentor:focus-visible {
  outline-color: var(--logo-focus-popmentor);
}

.harmonia-logo--mono {
  opacity: .9;
}

.harmonia-logo--dark, .harmonia-logo--inverse {
  filter: drop-shadow(0 1px 2px #0000001a);
}

.harmonia-logo--brand:hover {
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .harmonia-logo--xl {
    height: 48px;
  }

  .harmonia-logo--2xl {
    height: 64px;
  }
}

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

  .harmonia-logo[href]:active, .harmonia-logo[href]:hover, .harmonia-logo[role="button"]:active, .harmonia-logo[role="button"]:hover, a:active .harmonia-logo, a:hover .harmonia-logo, button:active .harmonia-logo, button:hover .harmonia-logo {
    transform: none;
  }
}

.harmonia-brand-pattern {
  pointer-events: none;
  z-index: 0;
  position: absolute;
  overflow: hidden;
}

.harmonia-brand-pattern--background {
  inset: 0;
}

.harmonia-brand-pattern--top {
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
}

.harmonia-brand-pattern--bottom {
  height: 200px;
  bottom: 0;
  left: 0;
  right: 0;
}

.harmonia-brand-pattern--corner-tr {
  width: 50%;
  height: 50%;
  top: 0;
  right: 0;
}

.harmonia-brand-pattern--corner-bl {
  width: 50%;
  height: 50%;
  bottom: 0;
  left: 0;
}

.harmonia-brand-pattern--fixed {
  position: fixed;
}

.harmonia-brand-pattern__svg {
  width: 100%;
  height: 100%;
}

.harmonia-brand-pattern__svg--wave {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.harmonia-brand-pattern__wave--animated {
  animation: 20s ease-in-out infinite harmonia-wave-drift;
}

@keyframes harmonia-wave-drift {
  0%, to {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-2%);
  }
}

.harmonia-brand-pattern--animated .harmonia-brand-pattern__svg path:first-of-type {
  animation: 12s ease-in-out infinite harmonia-blob-morph;
}

@keyframes harmonia-blob-morph {
  0%, to {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .85;
    transform: scale(1.05);
  }
}

.harmonia-brand-pattern--minimal .harmonia-brand-pattern__svg {
  height: auto;
}

.harmonia-brand-pattern--dots .harmonia-brand-pattern__svg, :root.dark .harmonia-brand-pattern, [data-theme="dark"] .harmonia-brand-pattern {
  opacity: .6;
}

@media (max-width: 767px) {
  .harmonia-brand-pattern--corner-bl, .harmonia-brand-pattern--corner-tr {
    width: 70%;
    height: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-brand-pattern--animated .harmonia-brand-pattern__svg path:first-of-type, .harmonia-brand-pattern__wave--animated {
    animation: none;
  }
}

.harmonia-grid {
  width: 100%;
  display: grid;
}

.harmonia-grid--cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.harmonia-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.harmonia-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.harmonia-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.harmonia-grid--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.harmonia-grid--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.harmonia-grid--cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.harmonia-grid--cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.harmonia-grid--cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.harmonia-grid--cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.harmonia-grid--cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.harmonia-grid--cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

.harmonia-grid--xs-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.harmonia-grid--xs-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.harmonia-grid--xs-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.harmonia-grid--xs-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 640px) {
  .harmonia-grid--sm-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

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

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

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

  .harmonia-grid--sm-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .harmonia-grid--sm-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 768px) {
  .harmonia-grid--md-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

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

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

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

  .harmonia-grid--md-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .harmonia-grid--md-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .harmonia-grid--lg-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

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

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

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

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

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

  .harmonia-grid--lg-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .harmonia-grid--lg-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1280px) {
  .harmonia-grid--xl-cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }

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

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

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

  .harmonia-grid--xl-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .harmonia-grid--xl-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .harmonia-grid--xl-cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .harmonia-grid--xl-cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .harmonia-grid--xl-cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

.harmonia-grid--gap-none {
  gap: 0;
}

.harmonia-grid--gap-xs {
  gap: var(--spacing-2);
}

.harmonia-grid--gap-sm {
  gap: var(--spacing-3);
}

.harmonia-grid--gap-md {
  gap: var(--spacing-4);
}

.harmonia-grid--gap-lg {
  gap: var(--spacing-6);
}

.harmonia-grid--gap-xl {
  gap: var(--spacing-8);
}

.harmonia-grid--row-gap-none {
  row-gap: 0;
}

.harmonia-grid--row-gap-xs {
  row-gap: var(--spacing-2);
}

.harmonia-grid--row-gap-sm {
  row-gap: var(--spacing-3);
}

.harmonia-grid--row-gap-md {
  row-gap: var(--spacing-4);
}

.harmonia-grid--row-gap-lg {
  row-gap: var(--spacing-6);
}

.harmonia-grid--row-gap-xl {
  row-gap: var(--spacing-8);
}

@media (min-width: 768px) {
  .harmonia-grid--md-gap-none {
    gap: 0;
  }

  .harmonia-grid--md-gap-xs {
    gap: var(--spacing-2);
  }

  .harmonia-grid--md-gap-sm {
    gap: var(--spacing-3);
  }

  .harmonia-grid--md-gap-md {
    gap: var(--spacing-4);
  }

  .harmonia-grid--md-gap-lg {
    gap: var(--spacing-6);
  }

  .harmonia-grid--md-gap-xl {
    gap: var(--spacing-8);
  }
}

@media (min-width: 1024px) {
  .harmonia-grid--lg-gap-none {
    gap: 0;
  }

  .harmonia-grid--lg-gap-xs {
    gap: var(--spacing-2);
  }

  .harmonia-grid--lg-gap-sm {
    gap: var(--spacing-3);
  }

  .harmonia-grid--lg-gap-md {
    gap: var(--spacing-4);
  }

  .harmonia-grid--lg-gap-lg {
    gap: var(--spacing-6);
  }

  .harmonia-grid--lg-gap-xl {
    gap: var(--spacing-8);
  }
}

.harmonia-grid--align-start {
  align-items: start;
}

.harmonia-grid--align-center {
  align-items: center;
}

.harmonia-grid--align-end {
  align-items: end;
}

.harmonia-grid--align-stretch {
  align-items: stretch;
}

.harmonia-grid--justify-start {
  justify-content: start;
}

.harmonia-grid--justify-center {
  justify-content: center;
}

.harmonia-grid--justify-end {
  justify-content: end;
}

.harmonia-grid--justify-between {
  justify-content: space-between;
}

.harmonia-grid--justify-around {
  justify-content: space-around;
}

.harmonia-grid--justify-evenly {
  justify-content: space-evenly;
}

.harmonia-grid-item {
  min-width: 0;
}

.harmonia-grid-item--span-1 {
  grid-column: span 1;
}

.harmonia-grid-item--span-2 {
  grid-column: span 2;
}

.harmonia-grid-item--span-3 {
  grid-column: span 3;
}

.harmonia-grid-item--span-4 {
  grid-column: span 4;
}

.harmonia-grid-item--span-5 {
  grid-column: span 5;
}

.harmonia-grid-item--span-6 {
  grid-column: span 6;
}

.harmonia-grid-item--span-7 {
  grid-column: span 7;
}

.harmonia-grid-item--span-8 {
  grid-column: span 8;
}

.harmonia-grid-item--span-9 {
  grid-column: span 9;
}

.harmonia-grid-item--span-10 {
  grid-column: span 10;
}

.harmonia-grid-item--span-11 {
  grid-column: span 11;
}

.harmonia-grid-item--span-12 {
  grid-column: span 12;
}

.harmonia-grid-item--start-1 {
  grid-column-start: 1;
}

.harmonia-grid-item--start-2 {
  grid-column-start: 2;
}

.harmonia-grid-item--start-3 {
  grid-column-start: 3;
}

.harmonia-grid-item--start-4 {
  grid-column-start: 4;
}

.harmonia-grid-item--start-5 {
  grid-column-start: 5;
}

.harmonia-grid-item--start-6 {
  grid-column-start: 6;
}

.harmonia-grid-item--start-7 {
  grid-column-start: 7;
}

@media (min-width: 640px) {
  .harmonia-grid-item--sm-span-1 {
    grid-column: span 1;
  }

  .harmonia-grid-item--sm-span-2 {
    grid-column: span 2;
  }

  .harmonia-grid-item--sm-span-3 {
    grid-column: span 3;
  }

  .harmonia-grid-item--sm-span-4 {
    grid-column: span 4;
  }

  .harmonia-grid-item--sm-span-6 {
    grid-column: span 6;
  }
}

@media (min-width: 768px) {
  .harmonia-grid-item--md-span-1 {
    grid-column: span 1;
  }

  .harmonia-grid-item--md-span-2 {
    grid-column: span 2;
  }

  .harmonia-grid-item--md-span-3 {
    grid-column: span 3;
  }

  .harmonia-grid-item--md-span-4 {
    grid-column: span 4;
  }

  .harmonia-grid-item--md-span-6 {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  .harmonia-grid-item--lg-span-1 {
    grid-column: span 1;
  }

  .harmonia-grid-item--lg-span-2 {
    grid-column: span 2;
  }

  .harmonia-grid-item--lg-span-3 {
    grid-column: span 3;
  }

  .harmonia-grid-item--lg-span-4 {
    grid-column: span 4;
  }

  .harmonia-grid-item--lg-span-6 {
    grid-column: span 6;
  }

  .harmonia-grid-item--lg-span-8 {
    grid-column: span 8;
  }
}

.harmonia-stepper {
  --stepper-color-current: #039de3;
  --stepper-color-current-ring: #039de333;
  --stepper-color-completed: #2ed6c5;
  --stepper-color-error: #ff5a6a;
  --stepper-color-pending: var(--color-neutral-200);
  --stepper-color-focus-ring: #039de34d;
  --stepper-bg-hover: #0704330a;
  --stepper-text-primary: var(--color-text-primary);
  --stepper-text-secondary: var(--color-text-secondary);
  --stepper-text-tertiary: var(--color-text-tertiary);
  --stepper-connector-color: var(--color-neutral-200);
  --stepper-connector-completed: var(--stepper-color-completed);
  --stepper-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --stepper-transition-fast: .15s ease-out;
  width: 100%;
}

.harmonia-stepper__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.harmonia-stepper--horizontal .harmonia-stepper__list {
  flex-direction: row;
  align-items: flex-start;
}

.harmonia-stepper--vertical .harmonia-stepper__list {
  flex-direction: column;
}

.harmonia-step {
  display: flex;
  position: relative;
}

.harmonia-stepper--horizontal .harmonia-step {
  flex-direction: column;
  flex: 1;
}

.harmonia-stepper--vertical .harmonia-step {
  flex-direction: row;
}

.harmonia-step--clickable .harmonia-step__button {
  cursor: pointer;
}

.harmonia-step--disabled {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-step__button {
  border-radius: var(--radius-lg);
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-2);
  transition: background-color var(--stepper-transition-fast), transform var(--stepper-transition);
  background: none;
  border: none;
  display: flex;
}

.harmonia-stepper--horizontal .harmonia-step__button {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.harmonia-stepper--vertical .harmonia-step__button {
  text-align: left;
  flex-direction: row;
}

.harmonia-step--clickable .harmonia-step__button:hover {
  background-color: var(--stepper-bg-hover);
}

.harmonia-step--clickable .harmonia-step__button:active {
  transform: scale(.98);
}

.harmonia-step__button:focus-visible {
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 3px var(--stepper-color-focus-ring);
  outline: none;
}

.harmonia-step__indicator {
  background-color: var(--stepper-color-pending);
  border-radius: var(--radius-full);
  color: var(--stepper-text-tertiary);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--stepper-transition), color var(--stepper-transition), box-shadow var(--stepper-transition), transform var(--stepper-transition);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-stepper--sm .harmonia-step__indicator {
  font-size: var(--font-size-xs);
  width: 24px;
  height: 24px;
}

.harmonia-stepper--md .harmonia-step__indicator {
  font-size: var(--font-size-sm);
  width: 32px;
  height: 32px;
}

.harmonia-stepper--lg .harmonia-step__indicator {
  font-size: var(--font-size-base);
  width: 40px;
  height: 40px;
}

.harmonia-step--current .harmonia-step__indicator {
  background-color: var(--stepper-color-current);
  box-shadow: 0 0 0 4px var(--stepper-color-current-ring);
  color: #fff;
  transform: scale(1.05);
}

.harmonia-step--completed .harmonia-step__indicator {
  background-color: var(--stepper-color-completed);
  color: #fff;
}

.harmonia-step--error .harmonia-step__indicator {
  background-color: var(--stepper-color-error);
  color: #fff;
}

.harmonia-step__number {
  font-weight: var(--font-weight-semibold);
}

.harmonia-step__check {
  width: 60%;
  height: 60%;
}

.harmonia-step__icon {
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 60%;
  display: flex;
}

.harmonia-step__dot {
  border-radius: var(--radius-full);
  background-color: currentColor;
  width: 8px;
  height: 8px;
}

.harmonia-step__content {
  gap: var(--spacing-0-5);
  flex-direction: column;
  display: flex;
}

.harmonia-step__label {
  color: var(--stepper-text-primary);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  transition: color var(--stepper-transition-fast);
}

.harmonia-stepper--sm .harmonia-step__label {
  font-size: var(--font-size-sm);
}

.harmonia-stepper--md .harmonia-step__label {
  font-size: var(--font-size-base);
}

.harmonia-stepper--lg .harmonia-step__label {
  font-size: var(--font-size-lg);
}

.harmonia-step--current .harmonia-step__label {
  color: var(--stepper-color-current);
}

.harmonia-step--pending .harmonia-step__label, .harmonia-step__optional {
  color: var(--stepper-text-tertiary);
}

.harmonia-step__optional {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  margin-left: var(--spacing-1);
}

.harmonia-step__description {
  color: var(--stepper-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

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

.harmonia-stepper--horizontal .harmonia-step__connector {
  height: var(--spacing-8);
  padding: 0 var(--spacing-2);
  position: absolute;
  top: 0;
  left: 50%;
  right: -50%;
}

.harmonia-stepper--horizontal.harmonia-stepper--sm .harmonia-step__connector {
  height: var(--spacing-6);
  top: calc(12px + var(--spacing-2));
  transform: translateY(-50%);
}

.harmonia-stepper--horizontal.harmonia-stepper--md .harmonia-step__connector {
  height: var(--spacing-8);
  top: calc(16px + var(--spacing-2));
  transform: translateY(-50%);
}

.harmonia-stepper--horizontal.harmonia-stepper--lg .harmonia-step__connector {
  height: var(--spacing-10);
  top: calc(20px + var(--spacing-2));
  transform: translateY(-50%);
}

.harmonia-stepper--vertical .harmonia-step__connector {
  padding: var(--spacing-2) 0;
  width: var(--spacing-8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.harmonia-stepper--vertical.harmonia-stepper--sm .harmonia-step__connector {
  left: calc(12px + var(--spacing-2));
  width: var(--spacing-6);
  transform: translateX(-50%);
}

.harmonia-stepper--vertical.harmonia-stepper--md .harmonia-step__connector {
  left: calc(16px + var(--spacing-2));
  width: var(--spacing-8);
  transform: translateX(-50%);
}

.harmonia-stepper--vertical.harmonia-stepper--lg .harmonia-step__connector {
  left: calc(20px + var(--spacing-2));
  width: var(--spacing-10);
  transform: translateX(-50%);
}

.harmonia-step__connector-line {
  background-color: var(--stepper-connector-color);
  transition: background-color var(--stepper-transition);
}

.harmonia-stepper--horizontal .harmonia-step__connector-line {
  width: 100%;
  height: 2px;
}

.harmonia-stepper--vertical .harmonia-step__connector-line {
  width: 2px;
  height: 100%;
}

.harmonia-step__connector-line--completed {
  background-color: var(--stepper-connector-completed);
}

.harmonia-step-content {
  margin-top: var(--spacing-6);
  padding: var(--spacing-4);
}

@media (max-width: 640px) {
  .harmonia-stepper--horizontal .harmonia-stepper__list {
    flex-direction: column;
  }

  .harmonia-stepper--horizontal .harmonia-step {
    flex-direction: row;
  }

  .harmonia-stepper--horizontal .harmonia-step__button {
    text-align: left;
    flex-direction: row;
  }

  .harmonia-stepper--horizontal .harmonia-step__connector {
    height: auto;
    padding: var(--spacing-2) 0;
    width: var(--spacing-8);
    position: absolute;
    inset: 0 auto 0 0;
  }

  .harmonia-stepper--horizontal .harmonia-step__connector-line {
    width: 2px;
    height: 100%;
  }
}

:root.dark .harmonia-stepper, [data-theme="dark"] .harmonia-stepper {
  --stepper-color-pending: #ffffff26;
  --stepper-color-current-ring: #039de34d;
  --stepper-bg-hover: #ffffff0f;
  --stepper-connector-color: #ffffff26;
}

:root.dark .harmonia-step--current .harmonia-step__indicator, [data-theme="dark"] .harmonia-step--current .harmonia-step__indicator {
  box-shadow: 0 0 0 4px var(--stepper-color-current-ring);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-stepper {
    --stepper-transition: 0s;
    --stepper-transition-fast: 0s;
  }

  .harmonia-step__button, .harmonia-step__connector-line, .harmonia-step__indicator, .harmonia-step__label {
    transition: none;
  }

  .harmonia-step--clickable .harmonia-step__button:active, .harmonia-step--current .harmonia-step__indicator {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-step__button:focus-visible {
    box-shadow: 0 0 0 4px var(--stepper-color-current);
  }

  .harmonia-step__connector-line {
    height: 3px;
  }

  .harmonia-stepper--vertical .harmonia-step__connector-line {
    width: 3px;
    height: 100%;
  }

  .harmonia-step--current .harmonia-step__indicator {
    box-shadow: 0 0 0 5px var(--stepper-color-current-ring);
  }
}

.harmonia-tabs {
  --tabs-color-active: #039de3;
  --tabs-color-active-hover: #0284c7;
  --tabs-color-focus-ring: #039de333;
  --tabs-trigger-min-height: 48px;
  --tabs-indicator-height: 3px;
  --tabs-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --tabs-transition-fast: .15s ease-out;
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-tabs--vertical {
  flex-direction: row;
}

.harmonia-tabs__list {
  gap: var(--spacing-1);
  display: flex;
  position: relative;
}

.harmonia-tabs--horizontal .harmonia-tabs__list {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--color-border-light);
  scrollbar-width: none;
  flex-direction: row;
  overflow-x: auto;
}

.harmonia-tabs--horizontal .harmonia-tabs__list::-webkit-scrollbar {
  display: none;
}

.harmonia-tabs--vertical .harmonia-tabs__list {
  border-right: 1px solid var(--color-border-light);
  padding-right: var(--spacing-4);
  flex-direction: column;
}

.harmonia-tabs__trigger {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--tabs-trigger-min-height);
  padding: var(--spacing-3) var(--spacing-4);
  transition: color var(--tabs-transition-fast), background-color var(--tabs-transition-fast), transform var(--tabs-transition);
  white-space: nowrap;
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  display: flex;
  position: relative;
}

.harmonia-tabs__trigger:hover:not(.harmonia-tabs__trigger--disabled):not(.harmonia-tabs__trigger--active) {
  color: var(--color-text-primary);
  background-color: #039de30d;
}

.harmonia-tabs__trigger--active {
  color: var(--tabs-color-active);
}

.harmonia-tabs__trigger--active:hover {
  color: var(--tabs-color-active-hover);
}

.harmonia-tabs__trigger--disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-tabs__trigger:focus-visible {
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 4px var(--tabs-color-focus-ring);
  outline: 3px solid var(--tabs-color-active);
  outline-offset: 2px;
}

.harmonia-tabs__trigger:active:not(.harmonia-tabs__trigger--disabled) {
  transform: scale(.98);
}

.harmonia-tabs__trigger-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.harmonia-tabs__trigger-icon svg {
  width: 100%;
  height: 100%;
}

.harmonia-tabs__indicator {
  background-color: var(--tabs-color-active);
  border-radius: var(--radius-full);
  transition: left var(--tabs-transition), right var(--tabs-transition), top var(--tabs-transition), bottom var(--tabs-transition), width var(--tabs-transition), height var(--tabs-transition);
  position: absolute;
}

.harmonia-tabs--horizontal .harmonia-tabs__indicator {
  height: var(--tabs-indicator-height);
  bottom: -1px;
  left: 0;
}

.harmonia-tabs--vertical .harmonia-tabs__indicator {
  width: var(--tabs-indicator-height);
  top: 0;
  right: -1px;
}

.harmonia-tabs__content {
  flex: 1;
  min-width: 0;
}

.harmonia-tabs__content:focus {
  outline: none;
}

.harmonia-tabs__content:focus-visible {
  border-radius: var(--radius-md);
  outline: 2px solid var(--tabs-color-active);
  outline-offset: 4px;
}

.harmonia-tabs--sm {
  --tabs-trigger-min-height: 44px;
  --tabs-indicator-height: 2px;
}

.harmonia-tabs--sm .harmonia-tabs__trigger {
  font-size: var(--font-size-sm);
  padding: var(--spacing-2) var(--spacing-3);
}

.harmonia-tabs--sm .harmonia-tabs__trigger-icon {
  width: 16px;
  height: 16px;
}

.harmonia-tabs--lg {
  --tabs-trigger-min-height: 56px;
  --tabs-indicator-height: 4px;
}

.harmonia-tabs--lg .harmonia-tabs__trigger {
  font-size: var(--font-size-lg);
  padding: var(--spacing-4) var(--spacing-6);
}

.harmonia-tabs--lg .harmonia-tabs__trigger-icon {
  width: 24px;
  height: 24px;
}

.harmonia-tabs--pills .harmonia-tabs__list {
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-xl);
  gap: var(--spacing-1);
  padding: var(--spacing-1);
  border: none;
}

.harmonia-tabs--pills .harmonia-tabs__trigger {
  border-radius: var(--radius-lg);
  z-index: 1;
}

.harmonia-tabs--pills .harmonia-tabs__trigger:hover:not(.harmonia-tabs__trigger--disabled):not(.harmonia-tabs__trigger--active) {
  background-color: #0704330d;
}

.harmonia-tabs--pills .harmonia-tabs__trigger--active {
  color: var(--color-text-primary);
}

.harmonia-tabs--pills .harmonia-tabs__indicator {
  background-color: var(--color-background-primary);
  border-radius: var(--radius-lg);
  z-index: 0;
  position: absolute;
  inset: 0;
  box-shadow: 0 1px 3px #0704331a;
}

.harmonia-tabs--underline .harmonia-tabs__list {
  gap: var(--spacing-4);
}

.harmonia-tabs--underline .harmonia-tabs__trigger {
  padding: var(--spacing-3) var(--spacing-1);
}

.harmonia-tabs--underline .harmonia-tabs__trigger:hover:not(.harmonia-tabs__trigger--disabled):not(.harmonia-tabs__trigger--active) {
  background-color: #0000;
}

.harmonia-tabs--underline .harmonia-tabs__indicator {
  border-radius: var(--radius-full);
  height: var(--tabs-indicator-height);
}

.harmonia-tabs--boxed .harmonia-tabs__list {
  background-color: var(--color-background-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--spacing-1);
  gap: 0;
}

.harmonia-tabs--boxed .harmonia-tabs__trigger {
  border-radius: var(--radius-lg);
  z-index: 1;
  border: 2px solid #0000;
}

.harmonia-tabs--boxed .harmonia-tabs__trigger--active {
  border-color: var(--tabs-color-active);
  background-color: #039de30d;
}

.harmonia-tabs--boxed .harmonia-tabs__indicator {
  display: none;
}

@media (prefers-contrast: high) {
  .harmonia-tabs__trigger:focus-visible {
    outline-width: 4px;
    outline-color: currentColor;
  }

  .harmonia-tabs__indicator {
    height: 4px;
  }
}

:root.dark .harmonia-tabs, [data-theme="dark"] .harmonia-tabs {
  --tabs-color-focus-ring: #039de34d;
}

:root.dark .harmonia-tabs__trigger:hover:not(.harmonia-tabs__trigger--disabled):not(.harmonia-tabs__trigger--active), [data-theme="dark"] .harmonia-tabs__trigger:hover:not(.harmonia-tabs__trigger--disabled):not(.harmonia-tabs__trigger--active) {
  background-color: #039de31a;
}

:root.dark .harmonia-tabs--pills .harmonia-tabs__list, [data-theme="dark"] .harmonia-tabs--pills .harmonia-tabs__list {
  background-color: var(--color-neutral-800);
}

:root.dark .harmonia-tabs--pills .harmonia-tabs__indicator, [data-theme="dark"] .harmonia-tabs--pills .harmonia-tabs__indicator {
  background-color: var(--surface-1, var(--elevation-1-bg));
  box-shadow: 0 1px 3px #0000004d;
}

:root.dark .harmonia-tabs--boxed .harmonia-tabs__list, [data-theme="dark"] .harmonia-tabs--boxed .harmonia-tabs__list {
  background-color: var(--surface-1, var(--elevation-1-bg));
  border-color: var(--color-border-default);
}

:root.dark .harmonia-tabs--boxed .harmonia-tabs__trigger--active, [data-theme="dark"] .harmonia-tabs--boxed .harmonia-tabs__trigger--active {
  background-color: #039de326;
}

@media (min-width: 768px) {
  .harmonia-tabs {
    --tabs-trigger-min-height: 44px;
  }

  .harmonia-tabs--sm {
    --tabs-trigger-min-height: 40px;
  }

  .harmonia-tabs--lg {
    --tabs-trigger-min-height: 52px;
  }
}

@media (min-width: 1024px) {
  .harmonia-tabs {
    --tabs-trigger-min-height: 40px;
  }

  .harmonia-tabs__trigger {
    font-size: var(--font-size-base);
  }

  .harmonia-tabs--sm {
    --tabs-trigger-min-height: 36px;
  }

  .harmonia-tabs--sm .harmonia-tabs__trigger {
    font-size: var(--font-size-sm);
  }

  .harmonia-tabs--lg {
    --tabs-trigger-min-height: 48px;
  }
}

@media (max-width: 640px) {
  .harmonia-tabs--vertical {
    flex-direction: column;
  }

  .harmonia-tabs--vertical .harmonia-tabs__list {
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--color-border-light);
    border-right: none;
    flex-direction: row;
    padding-right: 0;
    overflow-x: auto;
  }

  .harmonia-tabs--vertical .harmonia-tabs__indicator {
    height: var(--tabs-indicator-height);
    width: auto;
    top: auto;
    bottom: -1px;
    right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-tabs__indicator, .harmonia-tabs__trigger {
    transition: none;
  }

  .harmonia-tabs__trigger:active:not(.harmonia-tabs__trigger--disabled) {
    transform: none;
  }
}

.harmonia-accordion {
  --accordion-color-primary: #039de3;
  --accordion-color-focus-ring: #039de333;
  --accordion-color-expanded-border: #039de34d;
  --accordion-bg-hover: #0704330a;
  --accordion-bg-item: var(--color-background-primary);
  --accordion-border-color: var(--color-border-light);
  --accordion-border-expanded: var(--accordion-color-primary);
  --accordion-text-primary: var(--color-text-primary);
  --accordion-text-secondary: var(--color-text-secondary);
  --accordion-text-tertiary: var(--color-text-tertiary);
  --accordion-trigger-min-height: 48px;
  --accordion-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --accordion-transition-fast: .15s ease-out;
  flex-direction: column;
  display: flex;
}

.harmonia-accordion--default .harmonia-accordion__item {
  border-bottom: 1px solid var(--accordion-border-color);
}

.harmonia-accordion--default .harmonia-accordion__item:last-child {
  border-bottom: none;
}

.harmonia-accordion--bordered {
  border: 1px solid var(--accordion-border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.harmonia-accordion--bordered .harmonia-accordion__item {
  border-bottom: 1px solid var(--accordion-border-color);
}

.harmonia-accordion--bordered .harmonia-accordion__item:last-child {
  border-bottom: none;
}

.harmonia-accordion--separated {
  gap: var(--spacing-2);
}

.harmonia-accordion--separated .harmonia-accordion__item {
  border: 1px solid var(--accordion-border-color);
  border-radius: var(--radius-lg);
  transition: border-color var(--accordion-transition-fast), box-shadow var(--accordion-transition);
  overflow: hidden;
}

.harmonia-accordion--separated .harmonia-accordion__item--expanded {
  border-color: var(--accordion-border-expanded);
  box-shadow: 0 0 0 3px var(--accordion-color-focus-ring), var(--elevation-1);
}

.harmonia-accordion__item {
  background-color: var(--accordion-bg-item);
}

.harmonia-accordion__item--disabled {
  opacity: .5;
  pointer-events: none;
}

.harmonia-accordion__trigger {
  color: var(--accordion-text-primary);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  min-height: var(--accordion-trigger-min-height);
  padding: var(--spacing-4);
  text-align: left;
  transition: background-color var(--accordion-transition-fast), color var(--accordion-transition-fast);
  background: none;
  border: none;
  align-items: center;
  width: 100%;
  display: flex;
}

.harmonia-accordion__trigger:hover {
  background-color: var(--accordion-bg-hover);
}

.harmonia-accordion__trigger:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 3px var(--accordion-color-primary), inset 0 0 0 5px var(--accordion-color-focus-ring);
  outline: none;
}

.harmonia-accordion__trigger:active {
  background-color: var(--accordion-bg-hover);
}

.harmonia-accordion__item--expanded .harmonia-accordion__trigger {
  color: var(--accordion-color-primary);
}

.harmonia-accordion__trigger-icon {
  color: var(--accordion-text-secondary);
  height: 1.25rem;
  margin-right: var(--spacing-3);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  display: flex;
}

.harmonia-accordion__trigger-icon svg {
  width: 100%;
  height: 100%;
}

.harmonia-accordion__trigger-text {
  flex: 1;
}

.harmonia-accordion__chevron {
  color: var(--accordion-text-tertiary);
  height: 1.25rem;
  margin-left: var(--spacing-3);
  transition: transform var(--accordion-transition);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  display: flex;
}

.harmonia-accordion__chevron svg {
  width: 100%;
  height: 100%;
}

.harmonia-accordion__item--expanded .harmonia-accordion__chevron {
  color: var(--accordion-color-primary);
  transform: rotate(180deg);
}

.harmonia-accordion__content {
  overflow: hidden;
}

.harmonia-accordion__content-inner {
  color: var(--accordion-text-secondary);
  line-height: var(--line-height-relaxed);
  padding: 0 var(--spacing-4) var(--spacing-4);
}

.harmonia-accordion__trigger-icon + .harmonia-accordion__trigger-text ~ .harmonia-accordion__content-inner {
  padding-left: calc(var(--spacing-4)  + 1.25rem + var(--spacing-3));
}

@media (min-width: 768px) {
  .harmonia-accordion {
    --accordion-trigger-min-height: 44px;
  }
}

@media (min-width: 1024px) {
  .harmonia-accordion {
    --accordion-trigger-min-height: 40px;
  }
}

:root.dark .harmonia-accordion, [data-theme="dark"] .harmonia-accordion {
  --accordion-bg-hover: #ffffff0f;
  --accordion-bg-item: var(--surface-1, var(--elevation-1-bg));
  --accordion-border-color: var(--color-border-default);
  --accordion-color-focus-ring: #039de34d;
}

:root.dark .harmonia-accordion--separated .harmonia-accordion__item--expanded, [data-theme="dark"] .harmonia-accordion--separated .harmonia-accordion__item--expanded {
  box-shadow: 0 0 0 3px var(--accordion-color-focus-ring), 0 4px 16px #0000004d;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-accordion, .harmonia-accordion--separated .harmonia-accordion__item {
    --accordion-transition: 0s;
    --accordion-transition-fast: 0s;
  }

  .harmonia-accordion__chevron, .harmonia-accordion__content, .harmonia-accordion__trigger {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-accordion__trigger:focus-visible {
    box-shadow: inset 0 0 0 4px var(--accordion-color-primary), inset 0 0 0 6px var(--accordion-bg-item);
  }

  .harmonia-accordion--separated .harmonia-accordion__item--expanded {
    border-width: 2px;
  }
}

.harmonia-bottom-nav {
  --bottomnav-color-active: #039de3;
  --bottomnav-color-badge: #ff5a6a;
  --bottomnav-color-focus-ring: #039de34d;
  --bottomnav-bg: var(--color-background-primary);
  --bottomnav-bg-active: #039de314;
  --bottomnav-border-color: var(--color-border-light);
  --bottomnav-text-inactive: var(--color-text-tertiary);
  --bottomnav-text-active: var(--bottomnav-color-active);
  --bottomnav-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --bottomnav-transition-fast: .15s ease-out;
  background-color: var(--bottomnav-bg);
  border-top: 1px solid var(--bottomnav-border-color);
  padding-bottom: var(--safe-area-bottom);
  transition: transform var(--bottomnav-transition);
  will-change: transform;
  z-index: var(--z-index-bottom-nav);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(0)translateZ(0);
}

.harmonia-bottom-nav--hidden {
  transform: translateY(100%);
}

@media (min-width: 1024px) {
  .harmonia-bottom-nav {
    display: none;
  }
}

.harmonia-bottom-nav__list {
  height: var(--spacing-bottom-nav-height);
  justify-content: space-around;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.harmonia-bottom-nav__item {
  flex: 1;
  min-width: 0;
  display: flex;
}

.harmonia-bottom-nav__button {
  -webkit-tap-highlight-color: transparent;
  color: var(--bottomnav-text-inactive);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-1);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-2) var(--spacing-1);
  touch-action: manipulation;
  transition: color var(--bottomnav-transition-fast), background-color var(--bottomnav-transition-fast), transform var(--bottomnav-transition);
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  display: flex;
}

.harmonia-bottom-nav__button:hover {
  background-color: var(--bottomnav-bg-active);
}

.harmonia-bottom-nav__button:active {
  transform: scale(.95);
}

.harmonia-bottom-nav__button--active {
  background-color: var(--bottomnav-bg-active);
  color: var(--bottomnav-text-active);
}

.harmonia-bottom-nav__button--disabled {
  cursor: not-allowed;
  opacity: .4;
  pointer-events: none;
}

.harmonia-bottom-nav__button:focus-visible {
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--bottomnav-color-active);
  outline: none;
}

.harmonia-bottom-nav__icon {
  height: 24px;
  transition: transform var(--bottomnav-transition);
  justify-content: center;
  align-items: center;
  width: 24px;
  display: flex;
  position: relative;
}

.harmonia-bottom-nav__icon svg {
  width: 24px;
  height: 24px;
}

.harmonia-bottom-nav__button--active .harmonia-bottom-nav__icon {
  transform: scale(1.1);
}

.harmonia-bottom-nav--icons-only .harmonia-bottom-nav__icon, .harmonia-bottom-nav--icons-only .harmonia-bottom-nav__icon svg {
  width: 28px;
  height: 28px;
}

.harmonia-bottom-nav__badge {
  background-color: var(--bottomnav-color-badge);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  line-height: 18px;
  animation: 2s ease-in-out infinite bottomnav-badge-pulse;
  position: absolute;
  top: -4px;
  right: -8px;
  box-shadow: 0 2px 6px #ff5a6a66;
}

@keyframes bottomnav-badge-pulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.harmonia-bottom-nav__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  max-width: 100%;
  transition: font-weight var(--bottomnav-transition-fast);
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
}

.harmonia-bottom-nav__button--active .harmonia-bottom-nav__label {
  font-weight: var(--font-weight-semibold);
}

:root.dark .harmonia-bottom-nav, [data-theme="dark"] .harmonia-bottom-nav {
  --bottomnav-bg: var(--surface-1, #1a1a2e);
  --bottomnav-border-color: var(--color-border-default);
  --bottomnav-bg-active: #039de31f;
  --bottomnav-text-inactive: #ffffff80;
}

:root.dark .harmonia-bottom-nav__badge, [data-theme="dark"] .harmonia-bottom-nav__badge {
  box-shadow: 0 2px 8px #0006;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-bottom-nav, .harmonia-bottom-nav__button {
    transition: none;
  }

  .harmonia-bottom-nav__button:active {
    transform: none;
  }

  .harmonia-bottom-nav__icon {
    transition: none;
  }

  .harmonia-bottom-nav__button--active .harmonia-bottom-nav__icon {
    transform: none;
  }

  .harmonia-bottom-nav__badge {
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-bottom-nav__button:focus-visible {
    box-shadow: inset 0 0 0 4px var(--bottomnav-color-active);
  }

  .harmonia-bottom-nav__button--active {
    text-underline-offset: 2px;
    text-decoration: underline;
  }
}

.harmonia-swipeable {
  --swipeable-color-primary: #039de3;
  --swipeable-color-success: #2ed6c5;
  --swipeable-color-warning: #f6cd01;
  --swipeable-color-error: #ff5a6a;
  --swipeable-color-neutral: #6b7280;
  --swipeable-action-width: 80px;
  --swipeable-action-min-height: 100%;
  --swipeable-icon-size: 24px;
  --swipeable-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --swipeable-transition-fast: .15s ease-out;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.harmonia-swipeable, .harmonia-swipeable__content {
  background-color: var(--color-background-primary);
  position: relative;
}

.harmonia-swipeable__content {
  cursor: grab;
  touch-action: pan-y;
  transition: transform var(--swipeable-transition);
  will-change: transform;
  z-index: 1;
  transform: translateZ(0);
}

.harmonia-swipeable__content:active {
  cursor: grabbing;
}

.harmonia-swipeable__content--dragging {
  transform: scale(.98);
  box-shadow: 0 8px 24px #0704331a;
}

.harmonia-swipeable__actions {
  align-items: stretch;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
}

.harmonia-swipeable__actions--left {
  left: 0;
}

.harmonia-swipeable__actions--right {
  flex-direction: row-reverse;
  right: 0;
}

.harmonia-swipeable__action {
  -webkit-tap-highlight-color: transparent;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--spacing-1);
  min-height: var(--swipeable-action-min-height);
  padding: var(--spacing-3);
  touch-action: manipulation;
  transition: opacity var(--swipeable-transition-fast), transform var(--swipeable-transition);
  width: var(--swipeable-action-width);
  border: none;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.harmonia-swipeable__action:hover {
  transform: scale(1.05);
}

.harmonia-swipeable__action:active {
  opacity: .8;
  transform: scale(.95);
}

.harmonia-swipeable__action:focus-visible {
  outline-offset: -4px;
  outline: 2px solid #fff;
  box-shadow: inset 0 0 0 2px #ffffff4d;
}

.harmonia-swipeable__action--primary {
  background-color: var(--swipeable-color-primary);
}

.harmonia-swipeable__action--primary:hover {
  background-color: #0284c7;
}

.harmonia-swipeable__action--success {
  background-color: var(--swipeable-color-success);
}

.harmonia-swipeable__action--success:hover {
  background-color: #1a9e91;
}

.harmonia-swipeable__action--warning {
  background-color: var(--swipeable-color-warning);
  color: #070433;
}

.harmonia-swipeable__action--warning:hover {
  background-color: #d9b300;
}

.harmonia-swipeable__action--error {
  background-color: var(--swipeable-color-error);
}

.harmonia-swipeable__action--error:hover {
  background-color: #e5424f;
}

.harmonia-swipeable__action--neutral {
  background-color: var(--swipeable-color-neutral);
}

.harmonia-swipeable__action--neutral:hover {
  background-color: #4b5563;
}

.harmonia-swipeable__action-icon {
  height: var(--swipeable-icon-size);
  width: var(--swipeable-icon-size);
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-swipeable__action-icon svg {
  width: 100%;
  height: 100%;
}

.harmonia-swipeable__action-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

:root.dark .harmonia-swipeable, :root.dark .harmonia-swipeable__content, [data-theme="dark"] .harmonia-swipeable, [data-theme="dark"] .harmonia-swipeable__content {
  background-color: var(--surface-1, var(--elevation-1-bg));
}

:root.dark .harmonia-swipeable__content--dragging, [data-theme="dark"] .harmonia-swipeable__content--dragging {
  box-shadow: 0 8px 24px #0000004d;
}

:root.dark .harmonia-swipeable__action--warning, [data-theme="dark"] .harmonia-swipeable__action--warning {
  color: #070433;
}

@media (min-width: 768px) {
  .harmonia-swipeable {
    --swipeable-action-width: 88px;
    --swipeable-icon-size: 22px;
  }

  .harmonia-swipeable:hover .harmonia-swipeable__actions {
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .harmonia-swipeable {
    --swipeable-action-width: 96px;
    --swipeable-icon-size: 20px;
  }

  .harmonia-swipeable__action {
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-swipeable__action, .harmonia-swipeable__content {
    transition: none;
  }

  .harmonia-swipeable__action:active, .harmonia-swipeable__action:hover, .harmonia-swipeable__content--dragging {
    transform: none;
  }
}

.harmonia-progressive-disclosure {
  flex-direction: column;
  max-width: 600px;
  min-height: 400px;
  margin: 0 auto;
  display: flex;
}

.harmonia-progressive-disclosure__progress {
  margin-bottom: var(--spacing-6);
}

.harmonia-progressive-disclosure__progress-bar {
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  height: 4px;
  overflow: hidden;
}

.harmonia-progressive-disclosure__progress-fill {
  background: linear-gradient(90deg, var(--color-primary-500) 0, var(--color-primary-400) 100%);
  border-radius: var(--radius-full);
  height: 100%;
}

.harmonia-progressive-disclosure__progress-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-2);
  text-align: center;
  display: block;
}

.harmonia-progressive-disclosure__content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.harmonia-progressive-disclosure__step {
  flex-direction: column;
  display: flex;
}

.harmonia-progressive-disclosure__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-2);
}

.harmonia-progressive-disclosure__helper {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--spacing-6);
}

.harmonia-progressive-disclosure__step-content {
  flex: 1;
}

.harmonia-progressive-disclosure__navigation {
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-progressive-disclosure__nav-left {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-progressive-disclosure__nav-right {
  gap: var(--spacing-3);
  display: flex;
}

@media (max-width: 640px) {
  .harmonia-progressive-disclosure {
    min-height: 300px;
  }

  .harmonia-progressive-disclosure__title {
    font-size: var(--font-size-xl);
  }

  .harmonia-progressive-disclosure__navigation {
    gap: var(--spacing-4);
    flex-direction: column;
  }

  .harmonia-progressive-disclosure__nav-left, .harmonia-progressive-disclosure__nav-right {
    justify-content: center;
    width: 100%;
  }

  .harmonia-progressive-disclosure__nav-right {
    flex-direction: column;
  }

  .harmonia-progressive-disclosure__nav-right .harmonia-button {
    width: 100%;
  }
}

.harmonia-woop-flow {
  --woop-color-wish: #ff5a6a;
  --woop-color-outcome: #2ed6c5;
  --woop-color-obstacle: #f6cd01;
  --woop-color-plan: #039de3;
  --woop-color-success: #2ed6c5;
  --woop-focus-ring: #039de34d;
  --woop-bg-input: var(--color-background-primary);
  --woop-bg-summary: #0704330a;
  --woop-bg-if-then: var(--color-background-primary);
  --woop-text-primary: var(--color-text-primary);
  --woop-text-secondary: var(--color-text-secondary);
  --woop-text-tertiary: var(--color-text-tertiary);
  --woop-border-color: var(--color-border-default);
  --woop-border-focus: var(--woop-color-plan);
  --woop-step-size: 2.5rem;
  --woop-nav-min-height: 48px;
  --woop-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --woop-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.harmonia-woop-flow__steps {
  padding: 0 var(--spacing-4);
  justify-content: space-between;
  display: flex;
}

.harmonia-woop-flow__step-indicator {
  align-items: center;
  gap: var(--spacing-1);
  opacity: .4;
  transition: opacity var(--woop-transition);
  flex-direction: column;
  display: flex;
}

.harmonia-woop-flow__step-indicator--active, .harmonia-woop-flow__step-indicator--completed {
  opacity: 1;
}

.harmonia-woop-flow__step-letter {
  background-color: var(--step-color, var(--woop-color-plan));
  border-radius: var(--radius-full);
  color: var(--color-neutral-900);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  height: var(--woop-step-size);
  transition: background-color var(--woop-transition), box-shadow var(--woop-transition), transform var(--woop-transition);
  width: var(--woop-step-size);
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-woop-flow__step-indicator--active .harmonia-woop-flow__step-letter {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--woop-color-plan)) 25%, transparent);
  transform: scale(1.05);
}

.harmonia-woop-flow__step-indicator--completed .harmonia-woop-flow__step-letter {
  background-color: var(--woop-color-success);
  color: #fff;
}

.harmonia-woop-flow__step-indicator--completed .harmonia-woop-flow__step-letter:after {
  content: "✓";
}

.harmonia-woop-flow__step-label {
  color: var(--woop-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.harmonia-woop-flow__content {
  min-height: 350px;
}

.harmonia-woop-flow__title {
  color: var(--woop-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  align-items: baseline;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  display: flex;
}

.harmonia-woop-flow__count {
  color: var(--woop-text-tertiary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
}

.harmonia-woop-flow__prompt {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--spacing-4);
}

.harmonia-woop-flow__input, .harmonia-woop-flow__prompt {
  color: var(--woop-text-primary);
  line-height: var(--line-height-relaxed);
}

.harmonia-woop-flow__input {
  background-color: var(--woop-bg-input);
  border: 2px solid var(--woop-border-color);
  border-radius: var(--radius-xl);
  font-family: var(--font-family-primary);
  padding: var(--spacing-4);
  resize: vertical;
  transition: border-color var(--woop-transition-fast), box-shadow var(--woop-transition);
  width: 100%;
  font-size: 16px;
}

.harmonia-woop-flow__input:focus, .harmonia-woop-flow__input:hover {
  border-color: var(--step-color, var(--woop-color-plan));
}

.harmonia-woop-flow__input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-color, var(--woop-color-plan)) 20%, transparent);
  outline: none;
}

.harmonia-woop-flow__input:focus-visible {
  border-color: var(--step-color, var(--woop-color-plan));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-color, var(--woop-color-plan)) 25%, transparent);
  outline: none;
}

.harmonia-woop-flow__input::placeholder {
  color: var(--woop-text-tertiary);
}

.harmonia-woop-flow__helper {
  color: var(--woop-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--spacing-3) 0 0;
}

.harmonia-woop-flow__summary {
  gap: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-woop-flow__summary-section {
  background-color: var(--woop-bg-summary);
  border-left: 4px solid var(--section-color, var(--woop-color-plan));
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.harmonia-woop-flow__summary-section h3 {
  color: var(--section-color, var(--woop-text-primary));
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-woop-flow__summary-section p {
  color: var(--woop-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-woop-flow__if-then {
  background-color: var(--woop-bg-if-then);
  border-left: 4px solid var(--woop-color-plan);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
}

.harmonia-woop-flow__if-then:first-of-type {
  margin-top: var(--spacing-4);
}

.harmonia-woop-flow__if, .harmonia-woop-flow__then {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0;
}

.harmonia-woop-flow__if {
  color: var(--woop-color-obstacle);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-1);
}

.harmonia-woop-flow__then {
  color: var(--woop-color-plan);
  font-weight: var(--font-weight-medium);
}

.harmonia-woop-flow__navigation {
  min-height: var(--woop-nav-min-height);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-woop-flow__nav-right {
  gap: var(--spacing-3);
  display: flex;
}

@media (max-width: 640px) {
  .harmonia-woop-flow__steps {
    padding: 0;
  }

  .harmonia-woop-flow {
    --woop-step-size: 2rem;
  }

  .harmonia-woop-flow__step-letter {
    font-size: var(--font-size-base);
  }

  .harmonia-woop-flow__step-label {
    display: none;
  }

  .harmonia-woop-flow__title {
    font-size: var(--font-size-xl);
  }

  .harmonia-woop-flow__prompt {
    font-size: var(--font-size-base);
  }

  .harmonia-woop-flow__navigation {
    gap: var(--spacing-4);
    flex-direction: column;
  }

  .harmonia-woop-flow__nav-right {
    flex-direction: column;
    width: 100%;
  }
}

:root.dark .harmonia-woop-flow, [data-theme="dark"] .harmonia-woop-flow {
  --woop-bg-input: var(--surface-1, #1a1a2e);
  --woop-bg-summary: #ffffff0f;
  --woop-bg-if-then: #ffffff0a;
  --woop-border-color: #ffffff26;
  --woop-focus-ring: #039de366;
}

:root.dark .harmonia-woop-flow__step-letter, [data-theme="dark"] .harmonia-woop-flow__step-letter {
  color: #070433;
}

:root.dark .harmonia-woop-flow__step-indicator--completed .harmonia-woop-flow__step-letter, [data-theme="dark"] .harmonia-woop-flow__step-indicator--completed .harmonia-woop-flow__step-letter {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-woop-flow {
    --woop-transition: 0s;
    --woop-transition-fast: 0s;
  }

  .harmonia-woop-flow__input, .harmonia-woop-flow__step-indicator, .harmonia-woop-flow__step-letter {
    transition: none;
  }

  .harmonia-woop-flow__step-indicator--active .harmonia-woop-flow__step-letter {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-woop-flow__input:focus-visible {
    box-shadow: 0 0 0 4px var(--step-color, var(--woop-color-plan));
  }

  .harmonia-woop-flow__if-then, .harmonia-woop-flow__summary-section {
    border-left-width: 6px;
  }
}

.harmonia-srl {
  --srl-color-forethought: #039de3;
  --srl-color-performance: #2ed6c5;
  --srl-color-reflection: #f6cd01;
  --srl-color-complete: #2ed6c5;
  --srl-focus-ring: #039de34d;
  --srl-bg-primary: var(--color-background-primary);
  --srl-bg-secondary: #0704330a;
  --srl-bg-phase-active: #039de314;
  --srl-bg-phase-complete: #2ed6c514;
  --srl-text-primary: var(--color-text-primary);
  --srl-text-secondary: var(--color-text-secondary);
  --srl-text-tertiary: var(--color-text-tertiary);
  --srl-border-color: var(--color-border-default);
  --srl-button-min-height: 48px;
  --srl-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --srl-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
}

.harmonia-srl__phases {
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  justify-content: center;
  display: flex;
}

.harmonia-srl__phase-indicator {
  background-color: var(--srl-bg-secondary);
  border-radius: var(--radius-full);
  align-items: center;
  gap: var(--spacing-2);
  opacity: .5;
  padding: var(--spacing-2) var(--spacing-4);
  transition: opacity var(--srl-transition), background-color var(--srl-transition), transform var(--srl-transition);
  display: flex;
}

.harmonia-srl__phase-indicator--active {
  background-color: var(--srl-bg-phase-active);
  opacity: 1;
  transform: scale(1.02);
}

.harmonia-srl__phase-indicator--completed {
  background-color: var(--srl-bg-phase-complete);
  opacity: 1;
}

.harmonia-srl__phase-number {
  background-color: var(--color-neutral-300);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  height: 24px;
  transition: background-color var(--srl-transition);
  justify-content: center;
  align-items: center;
  width: 24px;
  display: flex;
}

.harmonia-srl__phase-indicator--active .harmonia-srl__phase-number {
  background-color: var(--phase-color, var(--srl-color-forethought));
}

.harmonia-srl__phase-indicator--completed .harmonia-srl__phase-number {
  background-color: var(--srl-color-complete);
}

.harmonia-srl__phase-name {
  color: var(--srl-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--srl-transition-fast);
}

.harmonia-srl__phase-indicator--active .harmonia-srl__phase-name {
  color: var(--phase-color, var(--srl-color-forethought));
  font-weight: var(--font-weight-semibold);
}

.harmonia-srl__phase-card {
  max-width: 600px;
  margin: 0 auto;
}

.harmonia-srl__phase-header {
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.harmonia-srl__phase-badge {
  background-color: var(--phase-color, var(--srl-color-forethought));
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-3);
  padding: var(--spacing-1) var(--spacing-3);
  text-transform: uppercase;
  display: inline-block;
}

.harmonia-srl__phase-title {
  color: var(--srl-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-srl__phase-description {
  color: var(--srl-text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
}

.harmonia-srl__form {
  gap: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-srl__field {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-srl__label {
  color: var(--srl-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.harmonia-srl__reminder {
  background-color: var(--srl-bg-secondary);
  border-radius: var(--radius-lg);
  color: var(--srl-text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-3);
  margin: 0;
  font-style: italic;
}

.harmonia-srl__scale {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-srl__scale-button {
  background-color: var(--srl-bg-primary);
  border: 2px solid var(--srl-border-color);
  border-radius: var(--radius-lg);
  color: var(--srl-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  min-height: var(--srl-button-min-height);
  padding: var(--spacing-3);
  transition: border-color var(--srl-transition-fast), background-color var(--srl-transition-fast), color var(--srl-transition-fast), transform var(--srl-transition);
  flex: 1;
}

.harmonia-srl__scale-button:hover {
  border-color: var(--phase-color, var(--srl-color-forethought));
  background-color: #039de30d;
}

.harmonia-srl__scale-button:active {
  transform: scale(.98);
}

.harmonia-srl__scale-button:focus-visible {
  border-color: var(--phase-color, var(--srl-color-forethought));
  box-shadow: 0 0 0 3px var(--srl-focus-ring);
  outline: none;
}

.harmonia-srl__scale-button--selected {
  border-color: var(--phase-color, var(--srl-color-forethought));
  color: var(--phase-color, var(--srl-color-forethought));
  background-color: #039de31a;
}

.harmonia-srl__scale-labels {
  color: var(--srl-text-tertiary);
  font-size: var(--font-size-xs);
  justify-content: space-between;
  display: flex;
}

.harmonia-srl__binary-choice {
  gap: var(--spacing-4);
  display: flex;
}

.harmonia-srl__choice-button {
  background-color: var(--srl-bg-primary);
  border: 2px solid var(--srl-border-color);
  border-radius: var(--radius-xl);
  color: var(--srl-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  min-height: var(--srl-button-min-height);
  padding: var(--spacing-4);
  transition: border-color var(--srl-transition-fast), background-color var(--srl-transition-fast), transform var(--srl-transition);
  flex: 1;
}

.harmonia-srl__choice-button:hover {
  border-color: var(--phase-color, var(--srl-color-forethought));
}

.harmonia-srl__choice-button:active {
  transform: scale(.98);
}

.harmonia-srl__choice-button:focus-visible {
  border-color: var(--phase-color, var(--srl-color-forethought));
  box-shadow: 0 0 0 3px var(--srl-focus-ring);
  outline: none;
}

.harmonia-srl__choice-button--selected {
  border-color: var(--phase-color, var(--srl-color-forethought));
  color: var(--phase-color, var(--srl-color-forethought));
  background-color: #039de30d;
}

.harmonia-srl__actions {
  margin-top: var(--spacing-6);
  justify-content: center;
  display: flex;
}

.harmonia-srl__performance {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-srl__activity-header {
  background-color: var(--srl-bg-secondary);
  border-left: 4px solid var(--srl-color-performance);
  border-radius: var(--radius-xl);
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  display: flex;
}

.harmonia-srl__activity-info {
  flex: 1;
}

.harmonia-srl__activity-title {
  color: var(--srl-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-1);
}

.harmonia-srl__activity-goal {
  color: var(--srl-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.harmonia-srl__activity-content {
  min-height: 300px;
}

.harmonia-srl__monitoring-prompt {
  background-color: var(--srl-bg-primary);
  border-radius: var(--radius-xl);
  bottom: var(--spacing-6);
  max-width: 400px;
  padding: var(--spacing-4);
  width: calc(100% - var(--spacing-8));
  z-index: var(--z-index-toast);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 8px 32px #07043326;
}

.harmonia-srl__monitoring-question {
  color: var(--srl-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-3);
  text-align: center;
}

.harmonia-srl__monitoring-options {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.harmonia-srl__complete-bar {
  background: linear-gradient(transparent, var(--srl-bg-primary) 30%);
  padding: var(--spacing-4);
  justify-content: center;
  display: flex;
  position: sticky;
  bottom: 0;
}

.harmonia-srl__complete {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.harmonia-srl__complete-content {
  align-items: center;
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-srl__complete-icon {
  font-size: 4rem;
}

.harmonia-srl__complete h2 {
  color: var(--srl-text-primary);
  font-size: var(--font-size-2xl);
  margin: 0;
}

.harmonia-srl__complete p {
  color: var(--srl-text-secondary);
  font-size: var(--font-size-base);
  margin: 0;
}

@media (max-width: 640px) {
  .harmonia-srl__phases {
    flex-direction: column;
    align-items: stretch;
  }

  .harmonia-srl__phase-indicator {
    justify-content: center;
  }

  .harmonia-srl__binary-choice, .harmonia-srl__monitoring-options {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .harmonia-srl {
    --srl-button-min-height: 44px;
  }
}

@media (min-width: 1024px) {
  .harmonia-srl {
    --srl-button-min-height: 40px;
  }
}

:root.dark .harmonia-srl, [data-theme="dark"] .harmonia-srl {
  --srl-bg-primary: var(--surface-1, #1a1a2e);
  --srl-bg-secondary: #ffffff0f;
  --srl-bg-phase-active: #039de326;
  --srl-bg-phase-complete: #2ed6c526;
  --srl-border-color: #ffffff26;
  --srl-focus-ring: #039de366;
}

:root.dark .harmonia-srl__monitoring-prompt, [data-theme="dark"] .harmonia-srl__monitoring-prompt {
  box-shadow: 0 8px 32px #0006;
}

:root.dark .harmonia-srl__complete-bar, [data-theme="dark"] .harmonia-srl__complete-bar {
  background: linear-gradient(transparent, var(--surface-1, #1a1a2e) 30%);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-srl {
    --srl-transition: 0s;
    --srl-transition-fast: 0s;
  }

  .harmonia-srl__choice-button, .harmonia-srl__phase-indicator, .harmonia-srl__phase-number, .harmonia-srl__scale-button {
    transition: none;
  }

  .harmonia-srl__choice-button:active, .harmonia-srl__phase-indicator--active, .harmonia-srl__scale-button:active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-srl__choice-button:focus-visible, .harmonia-srl__scale-button:focus-visible {
    box-shadow: 0 0 0 4px var(--phase-color, var(--srl-color-forethought));
  }

  .harmonia-srl__activity-header {
    border-left-width: 6px;
  }
}

.harmonia-if-then-builder {
  --ifthen-color-if: #f6cd01;
  --ifthen-color-then: #039de3;
  --ifthen-color-success: #2ed6c5;
  --ifthen-color-delete: #ff5a6a;
  --ifthen-focus-ring: #039de34d;
  --ifthen-bg-primary: var(--color-background-primary);
  --ifthen-bg-secondary: #0704330a;
  --ifthen-bg-example: var(--color-background-primary);
  --ifthen-bg-suggestion: var(--color-background-primary);
  --ifthen-text-primary: var(--color-text-primary);
  --ifthen-text-secondary: var(--color-text-secondary);
  --ifthen-text-tertiary: var(--color-text-tertiary);
  --ifthen-border-color: var(--color-border-default);
  --ifthen-border-light: var(--color-border-light);
  --ifthen-chip-min-height: 44px;
  --ifthen-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --ifthen-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.harmonia-if-then-builder__header {
  text-align: center;
}

.harmonia-if-then-builder__title {
  color: var(--ifthen-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-if-then-builder__context {
  color: var(--ifthen-color-then);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-2);
}

.harmonia-if-then-builder__description {
  color: var(--ifthen-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-if-then-builder__examples {
  background-color: var(--ifthen-bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
}

.harmonia-if-then-builder__examples-title {
  color: var(--ifthen-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-3);
}

.harmonia-if-then-builder__example {
  background-color: var(--ifthen-bg-example);
  border-left: 3px solid var(--ifthen-color-then);
  border-radius: var(--radius-lg);
  cursor: pointer;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-3);
  transition: box-shadow var(--ifthen-transition), transform var(--ifthen-transition);
  flex-direction: column;
  display: flex;
}

.harmonia-if-then-builder__example:last-child {
  margin-bottom: 0;
}

.harmonia-if-then-builder__example:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.harmonia-if-then-builder__example:active {
  transform: scale(.99);
}

.harmonia-if-then-builder__example:focus-visible {
  box-shadow: 0 0 0 3px var(--ifthen-focus-ring);
  outline: none;
}

.harmonia-if-then-builder__example-if {
  color: #b89800;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-if-then-builder__example-then {
  color: var(--ifthen-color-then);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-if-then-builder__form {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-if-then-builder__field {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-if-then-builder__field-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-if-then-builder__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.harmonia-if-then-builder__label--if {
  color: #b89800;
}

.harmonia-if-then-builder__label--then {
  color: var(--ifthen-color-then);
}

.harmonia-if-then-builder__suggestions-toggle {
  border-radius: var(--radius-md);
  color: var(--ifthen-text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  min-height: 44px;
  padding: var(--spacing-2) var(--spacing-3);
  transition: color var(--ifthen-transition-fast), background-color var(--ifthen-transition-fast);
  background: none;
  border: none;
}

.harmonia-if-then-builder__suggestions-toggle:hover {
  color: var(--ifthen-color-then);
  background-color: #039de314;
}

.harmonia-if-then-builder__suggestions-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--ifthen-focus-ring);
  outline: none;
}

.harmonia-if-then-builder__suggestions {
  background-color: var(--ifthen-bg-secondary);
  border-radius: var(--radius-lg);
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  flex-wrap: wrap;
  display: flex;
  overflow: hidden;
}

.harmonia-if-then-builder__suggestion {
  background-color: var(--ifthen-bg-suggestion);
  border: 2px solid var(--ifthen-border-light);
  border-radius: var(--radius-full);
  color: var(--ifthen-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  min-height: var(--ifthen-chip-min-height);
  padding: var(--spacing-2) var(--spacing-4);
  transition: background-color var(--ifthen-transition-fast), border-color var(--ifthen-transition-fast), transform var(--ifthen-transition);
  align-items: center;
  display: flex;
}

.harmonia-if-then-builder__suggestion:hover {
  border-color: var(--ifthen-color-then);
  background-color: #039de314;
}

.harmonia-if-then-builder__suggestion:active {
  transform: scale(.97);
}

.harmonia-if-then-builder__suggestion:focus-visible {
  border-color: var(--ifthen-color-then);
  box-shadow: 0 0 0 3px var(--ifthen-focus-ring);
  outline: none;
}

.harmonia-if-then-builder__field--if .harmonia-if-then-builder__suggestion:hover {
  border-color: var(--ifthen-color-if);
  background-color: #f6cd011a;
}

.harmonia-if-then-builder__field--if .harmonia-if-then-builder__suggestion:focus-visible {
  border-color: var(--ifthen-color-if);
  box-shadow: 0 0 0 3px #f6cd014d;
}

.harmonia-if-then-builder__field--then .harmonia-if-then-builder__suggestion:hover {
  border-color: var(--ifthen-color-then);
  background-color: #039de314;
}

.harmonia-if-then-builder__form-actions {
  gap: var(--spacing-3);
  justify-content: flex-end;
  display: flex;
}

.harmonia-if-then-builder__plans {
  gap: var(--spacing-3);
  flex-direction: column;
  display: flex;
}

.harmonia-if-then-builder__plans-count {
  color: var(--ifthen-text-tertiary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.harmonia-if-then-builder__plan {
  background-color: var(--ifthen-bg-primary);
  border: 1px solid var(--ifthen-border-light);
  border-left: 4px solid var(--ifthen-color-then);
  border-radius: var(--radius-xl);
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  transition: box-shadow var(--ifthen-transition), transform var(--ifthen-transition);
  display: flex;
}

.harmonia-if-then-builder__plan:hover {
  box-shadow: var(--elevation-1);
}

.harmonia-if-then-builder__plan-content {
  flex: 1;
}

.harmonia-if-then-builder__plan-if, .harmonia-if-then-builder__plan-then {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-if-then-builder__plan-if {
  border-bottom: 1px dashed var(--ifthen-border-light);
  color: #b89800;
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.harmonia-if-then-builder__plan-if strong, .harmonia-if-then-builder__plan-then strong {
  font-weight: var(--font-weight-bold);
}

.harmonia-if-then-builder__plan-then {
  color: var(--ifthen-color-then);
}

.harmonia-if-then-builder__plan-actions {
  gap: var(--spacing-1);
  display: flex;
}

.harmonia-if-then-builder__plan-btn {
  border-radius: var(--radius-lg);
  color: var(--ifthen-text-tertiary);
  cursor: pointer;
  height: 44px;
  transition: color var(--ifthen-transition-fast), background-color var(--ifthen-transition-fast), transform var(--ifthen-transition);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  padding: 0;
  display: flex;
}

.harmonia-if-then-builder__plan-btn:hover {
  background-color: var(--ifthen-bg-secondary);
  color: var(--ifthen-text-primary);
}

.harmonia-if-then-builder__plan-btn:active {
  transform: scale(.95);
}

.harmonia-if-then-builder__plan-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ifthen-focus-ring);
  outline: none;
}

.harmonia-if-then-builder__plan-btn--delete:hover {
  color: var(--ifthen-color-delete);
  background-color: #ff5a6a1a;
}

.harmonia-if-then-builder__plan-btn--delete:focus-visible {
  box-shadow: 0 0 0 3px #ff5a6a4d;
}

.harmonia-if-then-builder__footer {
  border-top: 1px solid var(--ifthen-border-light);
  padding-top: var(--spacing-4);
  justify-content: center;
  display: flex;
}

@media (max-width: 640px) {
  .harmonia-if-then-builder__title {
    font-size: var(--font-size-xl);
  }

  .harmonia-if-then-builder__form-actions {
    flex-direction: column;
  }

  .harmonia-if-then-builder__form-actions .harmonia-button {
    width: 100%;
  }

  .harmonia-if-then-builder__plan {
    flex-direction: column;
  }

  .harmonia-if-then-builder__plan-actions {
    align-self: flex-end;
  }
}

@media (min-width: 768px) {
  .harmonia-if-then-builder {
    --ifthen-chip-min-height: 40px;
  }
}

:root.dark .harmonia-if-then-builder, [data-theme="dark"] .harmonia-if-then-builder {
  --ifthen-bg-primary: var(--surface-1, #1a1a2e);
  --ifthen-bg-secondary: #ffffff0f;
  --ifthen-bg-example: #ffffff0a;
  --ifthen-bg-suggestion: #ffffff0a;
  --ifthen-border-color: #ffffff26;
  --ifthen-border-light: #ffffff1a;
  --ifthen-focus-ring: #039de366;
}

:root.dark .harmonia-if-then-builder__example-if, :root.dark .harmonia-if-then-builder__label--if, :root.dark .harmonia-if-then-builder__plan-if, [data-theme="dark"] .harmonia-if-then-builder__example-if, [data-theme="dark"] .harmonia-if-then-builder__label--if, [data-theme="dark"] .harmonia-if-then-builder__plan-if {
  color: var(--ifthen-color-if);
}

:root.dark .harmonia-if-then-builder__example:hover, [data-theme="dark"] .harmonia-if-then-builder__example:hover {
  box-shadow: 0 4px 16px #0000004d;
}

:root.dark .harmonia-if-then-builder__plan:hover, [data-theme="dark"] .harmonia-if-then-builder__plan:hover {
  box-shadow: 0 2px 12px #0000004d;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-if-then-builder {
    --ifthen-transition: 0s;
    --ifthen-transition-fast: 0s;
  }

  .harmonia-if-then-builder__example, .harmonia-if-then-builder__plan, .harmonia-if-then-builder__plan-btn, .harmonia-if-then-builder__suggestion, .harmonia-if-then-builder__suggestions-toggle {
    transition: none;
  }

  .harmonia-if-then-builder__example:active, .harmonia-if-then-builder__example:hover, .harmonia-if-then-builder__plan-btn:active, .harmonia-if-then-builder__suggestion:active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-if-then-builder__example {
    border-left-width: 5px;
  }

  .harmonia-if-then-builder__plan {
    border-left-width: 6px;
  }

  .harmonia-if-then-builder__suggestion {
    border-width: 3px;
  }

  .harmonia-if-then-builder__example:focus-visible, .harmonia-if-then-builder__plan-btn:focus-visible, .harmonia-if-then-builder__suggestion:focus-visible, .harmonia-if-then-builder__suggestions-toggle:focus-visible {
    box-shadow: 0 0 0 4px var(--ifthen-color-then);
  }
}

.harmonia-comb-diagnostic {
  --comb-color-capability: #039de3;
  --comb-color-opportunity: #2ed6c5;
  --comb-color-motivation: #f6cd01;
  --comb-color-behavior: #070433;
  --comb-color-success: #2ed6c5;
  --comb-focus-ring: #039de34d;
  --comb-bg-primary: var(--color-background-primary);
  --comb-bg-secondary: #0704330a;
  --comb-bg-model-item: var(--color-background-primary);
  --comb-text-primary: var(--color-text-primary);
  --comb-text-secondary: var(--color-text-secondary);
  --comb-text-tertiary: var(--color-text-tertiary);
  --comb-border-color: var(--color-border-default);
  --comb-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --comb-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.harmonia-comb-diagnostic__progress {
  gap: var(--spacing-8);
  justify-content: center;
  display: flex;
}

.harmonia-comb-diagnostic__progress-step {
  align-items: center;
  gap: var(--spacing-1);
  opacity: .4;
  transition: opacity var(--comb-transition);
  flex-direction: column;
  display: flex;
}

.harmonia-comb-diagnostic__progress-step--active, .harmonia-comb-diagnostic__progress-step--completed {
  opacity: 1;
}

.harmonia-comb-diagnostic__progress-step--active {
  transform: scale(1.05);
}

.harmonia-comb-diagnostic__progress-icon {
  font-size: var(--font-size-2xl);
  transition: transform var(--comb-transition);
}

.harmonia-comb-diagnostic__progress-label {
  color: var(--comb-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.harmonia-comb-diagnostic__card {
  min-height: 350px;
}

.harmonia-comb-diagnostic__header {
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  display: flex;
}

.harmonia-comb-diagnostic__icon {
  font-size: var(--font-size-3xl);
}

.harmonia-comb-diagnostic__title {
  color: var(--comb-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.harmonia-comb-diagnostic__behavior {
  background-color: var(--comb-bg-secondary);
  border-left: 4px solid var(--comb-color-behavior);
  border-radius: var(--radius-lg);
  color: var(--comb-text-secondary);
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-3);
}

.harmonia-comb-diagnostic__behavior strong {
  color: var(--comb-text-primary);
}

.harmonia-comb-diagnostic__description, .harmonia-comb-diagnostic__step-description {
  color: var(--comb-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--spacing-6);
}

.harmonia-comb-diagnostic__model {
  background-color: var(--comb-bg-secondary);
  border-radius: var(--radius-xl);
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.harmonia-comb-diagnostic__model-item {
  background-color: var(--comb-bg-model-item);
  border: 2px solid var(--comb-border-color);
  border-radius: var(--radius-lg);
  align-items: center;
  gap: var(--spacing-1);
  min-width: 80px;
  padding: var(--spacing-3);
  transition: border-color var(--comb-transition-fast), box-shadow var(--comb-transition);
  flex-direction: column;
  display: flex;
}

.harmonia-comb-diagnostic__model-item span:first-child {
  font-size: var(--font-size-xl);
}

.harmonia-comb-diagnostic__model-item span:last-child {
  color: var(--comb-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.harmonia-comb-diagnostic__model-item--capability {
  border-color: var(--comb-color-capability);
}

.harmonia-comb-diagnostic__model-item--opportunity {
  border-color: var(--comb-color-opportunity);
}

.harmonia-comb-diagnostic__model-item--motivation {
  border-color: var(--comb-color-motivation);
}

.harmonia-comb-diagnostic__model-item--result {
  border-color: var(--comb-color-success);
  background-color: #2ed6c51a;
}

.harmonia-comb-diagnostic__model-operator {
  color: var(--comb-text-tertiary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.harmonia-comb-diagnostic__questions {
  gap: var(--spacing-8);
  flex-direction: column;
  display: flex;
}

.harmonia-comb-diagnostic__result-chart {
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-comb-diagnostic__result-bar {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-comb-diagnostic__result-bar-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-comb-diagnostic__result-bar-value {
  color: var(--comb-text-primary);
  font-weight: var(--font-weight-semibold);
  margin-left: auto;
}

.harmonia-comb-diagnostic__result-bar-track {
  background-color: var(--comb-bg-secondary);
  border-radius: var(--radius-full);
  height: 12px;
  overflow: hidden;
}

.harmonia-comb-diagnostic__result-bar-fill {
  border-radius: var(--radius-full);
  height: 100%;
  transition: width var(--comb-transition);
}

.harmonia-comb-diagnostic__result-bar--capability .harmonia-comb-diagnostic__result-bar-fill {
  background-color: var(--comb-color-capability);
}

.harmonia-comb-diagnostic__result-bar--opportunity .harmonia-comb-diagnostic__result-bar-fill {
  background-color: var(--comb-color-opportunity);
}

.harmonia-comb-diagnostic__result-bar--motivation .harmonia-comb-diagnostic__result-bar-fill {
  background-color: var(--comb-color-motivation);
}

.harmonia-comb-diagnostic__blocker {
  background-color: var(--comb-bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4);
}

.harmonia-comb-diagnostic__blocker p {
  color: var(--comb-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-comb-diagnostic__blocker p + p {
  margin-top: var(--spacing-2);
}

.harmonia-comb-diagnostic__recommendations {
  border-left: 4px solid var(--comb-color-capability);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  background-color: #039de314;
}

.harmonia-comb-diagnostic__recommendations h3 {
  color: var(--comb-color-capability);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-3);
}

.harmonia-comb-diagnostic__recommendations ul {
  padding-left: var(--spacing-4);
  margin: 0;
}

.harmonia-comb-diagnostic__recommendations li {
  color: var(--comb-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-1);
}

.harmonia-comb-diagnostic__recommendations li:last-child {
  margin-bottom: 0;
}

.harmonia-comb-diagnostic__nav {
  align-items: center;
  display: flex;
}

.harmonia-comb-diagnostic__nav-spacer {
  flex: 1;
}

@media (max-width: 640px) {
  .harmonia-comb-diagnostic__progress {
    gap: var(--spacing-4);
  }

  .harmonia-comb-diagnostic__model {
    gap: var(--spacing-2);
    padding: var(--spacing-4);
  }

  .harmonia-comb-diagnostic__model-item {
    min-width: 60px;
    padding: var(--spacing-2);
  }

  .harmonia-comb-diagnostic__model-item span:first-child {
    font-size: var(--font-size-lg);
  }

  .harmonia-comb-diagnostic__model-operator {
    font-size: var(--font-size-base);
  }
}

:root.dark .harmonia-comb-diagnostic, [data-theme="dark"] .harmonia-comb-diagnostic {
  --comb-bg-primary: var(--surface-1, #1a1a2e);
  --comb-bg-secondary: #ffffff0f;
  --comb-bg-model-item: #ffffff0a;
  --comb-border-color: #ffffff26;
  --comb-focus-ring: #039de366;
}

:root.dark .harmonia-comb-diagnostic__model-item--result, [data-theme="dark"] .harmonia-comb-diagnostic__model-item--result {
  background-color: #2ed6c526;
}

:root.dark .harmonia-comb-diagnostic__recommendations, [data-theme="dark"] .harmonia-comb-diagnostic__recommendations {
  background-color: #039de31f;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-comb-diagnostic {
    --comb-transition: 0s;
    --comb-transition-fast: 0s;
  }

  .harmonia-comb-diagnostic__model-item, .harmonia-comb-diagnostic__progress-icon, .harmonia-comb-diagnostic__progress-step, .harmonia-comb-diagnostic__result-bar-fill {
    transition: none;
  }

  .harmonia-comb-diagnostic__progress-step--active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-comb-diagnostic__model-item {
    border-width: 3px;
  }

  .harmonia-comb-diagnostic__behavior, .harmonia-comb-diagnostic__recommendations {
    border-left-width: 6px;
  }

  .harmonia-comb-diagnostic__result-bar-track {
    height: 16px;
  }
}

.harmonia-celebration__overlay {
  --celebration-color-blue: #039de3;
  --celebration-color-teal: #2ed6c5;
  --celebration-color-red: #ff5a6a;
  --celebration-color-yellow: #f6cd01;
  --celebration-color-navy: #070433;
  --celebration-focus-ring: #ffffff80;
  --celebration-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  z-index: var(--z-index-celebration, 9999);
  background: linear-gradient(135deg, #039de3f2, #2ed6c5f2 33%, #ff5a6af2 66%, #f6cd01f2);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.harmonia-celebration__overlay--popskills {
  background: linear-gradient(135deg, #039de3f2, #80d0f4f2 50%, #33b4ecf2);
}

.harmonia-celebration__overlay--poplingua {
  background: linear-gradient(135deg, #2ed6c5f2, #9feaddf2 50%, #63dec9f2);
}

.harmonia-celebration__overlay--poptalent {
  background: linear-gradient(135deg, #ff5a6af2, #fab5bcf2 50%, #f98996f2);
}

.harmonia-celebration__overlay--popmentor {
  --celebration-focus-ring: #07043380;
  background: linear-gradient(135deg, #f6cd01f2, #ffe066f2 50%, #ffd633f2);
}

.harmonia-celebration__confetti {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.harmonia-celebration__particle {
  border-radius: 2px;
  width: 10px;
  height: 10px;
  position: absolute;
}

.harmonia-celebration__particle--popskills {
  background: var(--celebration-color-blue);
}

.harmonia-celebration__particle--poplingua {
  background: var(--celebration-color-teal);
}

.harmonia-celebration__particle--poptalent {
  background: var(--celebration-color-red);
}

.harmonia-celebration__particle--popmentor {
  background: var(--celebration-color-yellow);
}

.harmonia-celebration__particle--pop-dark {
  background: var(--celebration-color-navy);
}

.harmonia-celebration__stars {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.harmonia-celebration__star {
  font-size: 2rem;
  position: absolute;
}

.harmonia-celebration__content {
  max-width: 500px;
  padding: var(--spacing-12, 3rem);
  text-align: center;
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.harmonia-celebration__badge {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full, 9999px);
  align-items: center;
  gap: var(--spacing-2, .5rem);
  margin-bottom: var(--spacing-6, 1.5rem);
  padding: var(--spacing-6, 1.5rem);
  background: #fff3;
  border: 2px solid #ffffff4d;
  flex-direction: column;
  display: flex;
}

.harmonia-celebration__badge-icon {
  background: var(--badge-color, var(--celebration-color-blue));
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 0 30px var(--badge-color, var(--celebration-color-blue));
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  font-size: 3rem;
  display: flex;
}

.harmonia-celebration__badge--popskills .harmonia-celebration__badge-icon {
  --badge-color: var(--celebration-color-blue);
}

.harmonia-celebration__badge--poplingua .harmonia-celebration__badge-icon {
  --badge-color: var(--celebration-color-teal);
}

.harmonia-celebration__badge--poptalent .harmonia-celebration__badge-icon {
  --badge-color: var(--celebration-color-red);
}

.harmonia-celebration__badge--popmentor .harmonia-celebration__badge-icon {
  --badge-color: var(--celebration-color-yellow);
}

.harmonia-celebration__badge-label {
  color: #ffffffe6;
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-wider, .05em);
  text-transform: uppercase;
}

.harmonia-celebration__emoji {
  filter: drop-shadow(0 0 20px #ffffff80);
  margin-bottom: var(--spacing-4, 1rem);
  font-size: 5rem;
}

.harmonia-celebration__title {
  color: #fff;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  margin: 0 0 var(--spacing-3, .75rem);
  text-shadow: 0 2px 10px #0003;
}

.harmonia-celebration__message {
  color: #ffffffe6;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-relaxed, 1.6);
  margin: 0 0 var(--spacing-8, 2rem);
  max-width: 400px;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__message, .harmonia-celebration__overlay--popmentor .harmonia-celebration__title {
  color: var(--celebration-color-navy);
  text-shadow: none;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__badge-label {
  color: #070433e6;
}

.harmonia-celebration__actions {
  align-items: center;
  gap: var(--spacing-3, .75rem);
  flex-direction: column;
  display: flex;
}

.harmonia-celebration__action-button {
  border-radius: var(--radius-lg, .5rem);
  box-shadow: var(--elevation-4, 0 12px 24px #00000026);
  cursor: pointer;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  font-size: var(--font-size-base, 1rem);
  min-width: 200px;
  min-height: 48px;
  padding: var(--spacing-3, .75rem) var(--spacing-6, 1.5rem);
  transition: transform var(--celebration-transition), box-shadow var(--celebration-transition);
  border: none;
  color: var(--celebration-color-navy) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  background: #fff !important;
}

.harmonia-celebration__action-button:hover {
  box-shadow: var(--elevation-5, 0 16px 32px #0003);
  transform: scale(1.05);
}

.harmonia-celebration__action-button:active {
  transform: scale(.98);
}

.harmonia-celebration__action-button:focus-visible {
  box-shadow: var(--elevation-4, 0 12px 24px #00000026), 0 0 0 3px var(--celebration-focus-ring);
  outline: none;
}

.harmonia-celebration__share-button {
  border-radius: var(--radius-lg, .5rem);
  cursor: pointer;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  min-height: 44px;
  padding: var(--spacing-2, .5rem) var(--spacing-4, 1rem);
  transition: background-color var(--celebration-transition), border-color var(--celebration-transition);
  border: 2px solid #ffffff4d;
  color: #ffffffe6 !important;
  background: none !important;
}

.harmonia-celebration__share-button:hover {
  border-color: #ffffff80;
  color: #fff !important;
  background: #ffffff1a !important;
}

.harmonia-celebration__share-button:focus-visible {
  box-shadow: 0 0 0 3px var(--celebration-focus-ring);
  border-color: #ffffff80;
  outline: none;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__share-button {
  border-color: #0704334d;
  color: #070433cc !important;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__share-button:hover {
  border-color: #07043380;
  color: var(--celebration-color-navy) !important;
  background: #0704331a !important;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__share-button:focus-visible {
  box-shadow: 0 0 0 3px var(--celebration-focus-ring);
}

.harmonia-celebration__close {
  border-radius: var(--radius-full, 9999px);
  color: #fff;
  cursor: pointer;
  height: 48px;
  right: var(--spacing-4, 1rem);
  top: var(--spacing-4, 1rem);
  transition: background-color var(--celebration-transition), transform var(--celebration-transition);
  z-index: 10;
  background: #fff3;
  border: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  font-size: 1.5rem;
  display: flex;
  position: absolute;
}

.harmonia-celebration__close:hover {
  background: #ffffff4d;
  transform: scale(1.1);
}

.harmonia-celebration__close:focus-visible {
  box-shadow: 0 0 0 3px var(--celebration-focus-ring);
  outline: none;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__close {
  color: var(--celebration-color-navy);
  background: #07043333;
}

.harmonia-celebration__overlay--popmentor .harmonia-celebration__close:hover {
  background: #0704334d;
}

.harmonia-celebration__overlay--micro {
  background: #070433e6;
}

.harmonia-celebration__overlay--minor {
  background: linear-gradient(135deg, #070433f2, #039de3f2);
}

.harmonia-celebration__overlay--standard {
  background: linear-gradient(135deg, #039de3f2, #2ed6c5f2);
}

.harmonia-celebration__overlay--major {
  background: linear-gradient(135deg, #039de3f2, #ff5a6af2 50%, #f6cd01f2);
}

.harmonia-celebration__overlay--epic {
  background: linear-gradient(135deg, #039de3f2, #2ed6c5f2 25%, #ff5a6af2 50%, #f6cd01f2 75%, #070433f2);
}

:root.dark .harmonia-celebration__overlay, [data-theme="dark"] .harmonia-celebration__overlay {
  --celebration-focus-ring: #fff9;
}

:root.dark .harmonia-celebration__badge, [data-theme="dark"] .harmonia-celebration__badge {
  background: #ffffff26;
  border-color: #ffffff40;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-celebration__overlay {
    --celebration-transition: 0s;
  }

  .harmonia-celebration__particle, .harmonia-celebration__star {
    transition: none !important;
    animation: none !important;
  }

  .harmonia-celebration__confetti, .harmonia-celebration__stars {
    display: none;
  }

  .harmonia-celebration__action-button, .harmonia-celebration__close, .harmonia-celebration__share-button {
    transition: none;
  }

  .harmonia-celebration__action-button:hover, .harmonia-celebration__close:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-celebration__overlay, .harmonia-celebration__overlay--popskills {
    background: var(--celebration-color-blue);
  }

  .harmonia-celebration__overlay--poplingua {
    background: var(--celebration-color-teal);
  }

  .harmonia-celebration__overlay--poptalent {
    background: var(--celebration-color-red);
  }

  .harmonia-celebration__overlay--popmentor {
    background: var(--celebration-color-yellow);
  }

  .harmonia-celebration__badge {
    background: #ffffff4d;
    border-width: 3px;
    border-color: #fff;
  }

  .harmonia-celebration__badge-icon {
    border: 3px solid #fff;
  }

  .harmonia-celebration__title {
    text-shadow: 0 2px 4px #00000080;
  }

  .harmonia-celebration__action-button {
    border: 3px solid var(--celebration-color-navy);
  }

  .harmonia-celebration__action-button:focus-visible {
    box-shadow: 0 0 0 4px #fff;
  }

  .harmonia-celebration__share-button {
    border-width: 3px;
    border-color: #fff;
  }

  .harmonia-celebration__share-button:focus-visible {
    box-shadow: 0 0 0 4px #fff;
  }

  .harmonia-celebration__close {
    border: 3px solid #fff;
  }

  .harmonia-celebration__close:focus-visible {
    box-shadow: 0 0 0 4px #fff;
  }
}

@media (max-width: 640px) {
  .harmonia-celebration__content {
    padding: var(--spacing-8, 2rem) var(--spacing-4, 1rem);
  }

  .harmonia-celebration__title {
    font-size: var(--font-size-3xl, 1.875rem);
  }

  .harmonia-celebration__emoji {
    font-size: 4rem;
  }

  .harmonia-celebration__badge-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .harmonia-celebration__action-button {
    width: 100%;
    max-width: 280px;
  }
}

.harmonia-signaling {
  display: inline-block;
  position: relative;
}

.harmonia-signaling__content {
  z-index: 1;
  position: relative;
}

.harmonia-signaling--pulse.harmonia-signaling--active:before {
  animation: harmonia-signaling-pulse var(--signaling-pulse-duration) ease-in-out infinite;
  background-color: var(--signaling-color);
  border-radius: var(--radius-lg);
  content: "";
  opacity: 0;
  position: absolute;
  inset: -4px;
}

@keyframes harmonia-signaling-pulse {
  0%, to {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: .15;
    transform: scale(1.02);
  }
}

.harmonia-signaling--pulse.harmonia-signaling--subtle:before {
  animation-duration: calc(var(--signaling-pulse-duration) * 1.5);
}

.harmonia-signaling--pulse.harmonia-signaling--subtle.harmonia-signaling--active:before {
  opacity: 0;
}

@keyframes harmonia-signaling-pulse-subtle {
  0%, to {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: .08;
    transform: scale(1.01);
  }
}

.harmonia-signaling--pulse.harmonia-signaling--strong.harmonia-signaling--active:before {
  animation: harmonia-signaling-pulse-strong var(--signaling-pulse-duration) ease-in-out infinite;
}

@keyframes harmonia-signaling-pulse-strong {
  0%, to {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: .25;
    transform: scale(1.04);
  }
}

.harmonia-signaling--glow.harmonia-signaling--active {
  animation: harmonia-signaling-glow var(--signaling-pulse-duration) ease-in-out infinite;
  filter: drop-shadow(0 0 8px var(--signaling-color));
}

@keyframes harmonia-signaling-glow {
  0%, to {
    filter: drop-shadow(0 0 4px var(--signaling-color));
  }

  50% {
    filter: drop-shadow(0 0 16px var(--signaling-color));
  }
}

.harmonia-signaling--glow.harmonia-signaling--subtle.harmonia-signaling--active {
  animation: harmonia-signaling-glow-subtle var(--signaling-pulse-duration) ease-in-out infinite;
}

@keyframes harmonia-signaling-glow-subtle {
  0%, to {
    filter: drop-shadow(0 0 2px var(--signaling-color));
  }

  50% {
    filter: drop-shadow(0 0 8px var(--signaling-color));
  }
}

.harmonia-signaling--glow.harmonia-signaling--strong.harmonia-signaling--active {
  animation: harmonia-signaling-glow-strong var(--signaling-pulse-duration) ease-in-out infinite;
}

@keyframes harmonia-signaling-glow-strong {
  0%, to {
    filter: drop-shadow(0 0 8px var(--signaling-color));
  }

  50% {
    filter: drop-shadow(0 0 24px var(--signaling-color)) drop-shadow(0 0 32px var(--signaling-color));
  }
}

.harmonia-signaling--border.harmonia-signaling--active {
  animation: harmonia-signaling-border var(--signaling-pulse-duration) ease-in-out infinite;
  border-radius: var(--radius-lg);
  outline: 2px solid var(--signaling-color);
  outline-offset: 2px;
}

@keyframes harmonia-signaling-border {
  0%, to {
    outline-color: var(--signaling-color);
    outline-offset: 2px;
  }

  50% {
    outline-color: var(--signaling-color);
    outline-offset: 4px;
  }
}

.harmonia-signaling--border.harmonia-signaling--subtle.harmonia-signaling--active {
  outline-width: 1px;
}

.harmonia-signaling--border.harmonia-signaling--strong.harmonia-signaling--active {
  animation: harmonia-signaling-border-strong var(--signaling-pulse-duration) ease-in-out infinite;
  outline-width: 3px;
}

@keyframes harmonia-signaling-border-strong {
  0%, to {
    outline-offset: 2px;
  }

  50% {
    outline-offset: 6px;
  }
}

.harmonia-signaling--arrow {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-signaling__arrow {
  color: var(--signaling-color);
  justify-content: center;
  align-items: center;
  animation: 1s ease-in-out infinite harmonia-signaling-arrow;
  display: flex;
}

@keyframes harmonia-signaling-arrow {
  0%, to {
    opacity: 1;
    transform: translateX(0);
  }

  50% {
    opacity: .7;
    transform: translateX(4px);
  }
}

.harmonia-signaling--arrow-left {
  flex-direction: row-reverse;
}

.harmonia-signaling--arrow-left .harmonia-signaling__arrow {
  animation: 1s ease-in-out infinite harmonia-signaling-arrow-left;
  transform: rotate(180deg);
}

@keyframes harmonia-signaling-arrow-left {
  0%, to {
    opacity: 1;
    transform: translateX(0)rotate(180deg);
  }

  50% {
    opacity: .7;
    transform: translateX(-4px)rotate(180deg);
  }
}

.harmonia-signaling--arrow-top {
  flex-direction: column-reverse;
}

.harmonia-signaling--arrow-top .harmonia-signaling__arrow {
  animation: 1s ease-in-out infinite harmonia-signaling-arrow-top;
  transform: rotate(-90deg);
}

@keyframes harmonia-signaling-arrow-top {
  0%, to {
    opacity: 1;
    transform: translateY(0)rotate(-90deg);
  }

  50% {
    opacity: .7;
    transform: translateY(-4px)rotate(-90deg);
  }
}

.harmonia-signaling--arrow-bottom {
  flex-direction: column;
}

.harmonia-signaling--arrow-bottom .harmonia-signaling__arrow {
  animation: 1s ease-in-out infinite harmonia-signaling-arrow-bottom;
  transform: rotate(90deg);
}

@keyframes harmonia-signaling-arrow-bottom {
  0%, to {
    opacity: 1;
    transform: translateY(0)rotate(90deg);
  }

  50% {
    opacity: .7;
    transform: translateY(4px)rotate(90deg);
  }
}

.harmonia-signaling__spotlight {
  background: radial-gradient(circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), transparent 0, transparent 100px, #00000080 150px);
  pointer-events: none;
  z-index: var(--z-index-overlay);
  animation: .3s ease-out harmonia-signaling-spotlight-fade;
  position: fixed;
  inset: 0;
}

@keyframes harmonia-signaling-spotlight-fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-signaling--border.harmonia-signaling--active, .harmonia-signaling--glow.harmonia-signaling--active, .harmonia-signaling--pulse.harmonia-signaling--active:before, .harmonia-signaling__arrow {
    animation: none !important;
  }

  .harmonia-signaling--pulse.harmonia-signaling--active:before {
    opacity: .1;
  }

  .harmonia-signaling--glow.harmonia-signaling--active {
    filter: drop-shadow(0 0 8px var(--signaling-color));
  }
}

.harmonia-smart {
  --smart-color-s: #039de3;
  --smart-color-m: #2ed6c5;
  --smart-color-a: #f6cd01;
  --smart-color-r: #ff5a6a;
  --smart-color-t: #070433;
  --smart-color-completed: #2ed6c5;
  --smart-focus-ring: #039de34d;
  --smart-bg-primary: var(--color-background-primary);
  --smart-bg-secondary: #0704330a;
  --smart-bg-button: var(--color-neutral-100);
  --smart-bg-milestone: var(--color-neutral-50);
  --smart-text-primary: var(--color-text-primary);
  --smart-text-secondary: var(--color-text-secondary);
  --smart-text-tertiary: var(--color-text-tertiary);
  --smart-border-color: var(--color-border-default);
  --smart-step-size: 40px;
  --smart-title-size: 48px;
  --smart-button-size: 48px;
  --smart-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --smart-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
}

.harmonia-smart__steps {
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
  justify-content: space-between;
  display: flex;
}

.harmonia-smart__step-indicator {
  align-items: center;
  gap: var(--spacing-1);
  opacity: .5;
  transition: opacity var(--smart-transition);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.harmonia-smart__step-indicator--active, .harmonia-smart__step-indicator--completed {
  opacity: 1;
}

.harmonia-smart__step-letter {
  background-color: var(--color-neutral-200);
  border-radius: var(--radius-full);
  color: var(--smart-text-secondary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  height: var(--smart-step-size);
  transition: background-color var(--smart-transition), color var(--smart-transition), box-shadow var(--smart-transition), transform var(--smart-transition);
  width: var(--smart-step-size);
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-smart__step-indicator--active .harmonia-smart__step-letter {
  background-color: var(--step-color, var(--smart-color-s));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-color, var(--smart-color-s)) 25%, transparent);
  color: #fff;
  transform: scale(1.05);
}

.harmonia-smart__step-indicator--completed .harmonia-smart__step-letter {
  background-color: var(--smart-color-completed);
  color: #fff;
}

.harmonia-smart__step-label {
  color: var(--smart-text-tertiary);
  font-size: var(--font-size-xs);
  text-align: center;
  transition: color var(--smart-transition-fast);
  white-space: nowrap;
}

.harmonia-smart__step-indicator--active .harmonia-smart__step-label {
  color: var(--smart-text-primary);
  font-weight: var(--font-weight-medium);
}

.harmonia-smart__content {
  min-height: 400px;
}

.harmonia-smart__title {
  color: var(--smart-text-primary);
  font-size: var(--font-size-2xl);
  gap: var(--spacing-3);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-2);
}

.harmonia-smart__title, .harmonia-smart__title-letter {
  font-weight: var(--font-weight-bold);
  align-items: center;
  display: flex;
}

.harmonia-smart__title-letter {
  background-color: var(--step-color, var(--smart-color-s));
  border-radius: var(--radius-lg);
  color: #fff;
  font-size: var(--font-size-xl);
  height: var(--smart-title-size);
  width: var(--smart-title-size);
  justify-content: center;
}

.harmonia-smart__title-letter:after {
  content: attr(data-letter);
}

.harmonia-smart__title-letter[data-letter="A"] {
  color: #070433;
}

.harmonia-smart__description {
  color: var(--smart-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--spacing-6);
}

.harmonia-smart__step-content {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-smart__field {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-smart__label {
  color: var(--smart-text-primary);
}

.harmonia-smart__label, .harmonia-smart__validation-hint {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-smart__validation-hint {
  color: var(--smart-color-a);
  margin: 0;
}

.harmonia-smart__range-group {
  align-items: flex-end;
  gap: var(--spacing-4);
  display: flex;
}

.harmonia-smart__range-field {
  gap: var(--spacing-1);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.harmonia-smart__range-arrow {
  color: var(--smart-color-m);
  font-size: var(--font-size-xl);
  justify-content: center;
  align-items: center;
  height: 40px;
  display: flex;
}

.harmonia-smart__confidence-scale {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-smart__confidence-button {
  background: var(--smart-bg-button);
  border-radius: var(--radius-lg);
  color: var(--smart-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  height: var(--smart-button-size);
  transition: background-color var(--smart-transition-fast), border-color var(--smart-transition-fast), color var(--smart-transition-fast), transform var(--smart-transition);
  width: var(--smart-button-size);
  border: 2px solid #0000;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-smart__confidence-button:hover {
  background: var(--color-neutral-200);
  color: var(--smart-text-primary);
}

.harmonia-smart__confidence-button:active {
  transform: scale(.97);
}

.harmonia-smart__confidence-button:focus-visible {
  border-color: var(--smart-color-s);
  box-shadow: 0 0 0 3px var(--smart-focus-ring);
  outline: none;
}

.harmonia-smart__confidence-button--selected {
  border-color: var(--smart-color-completed);
  color: var(--smart-color-completed);
  background: #2ed6c526;
}

.harmonia-smart__confidence-labels {
  color: var(--smart-text-tertiary);
  font-size: var(--font-size-xs);
  justify-content: space-between;
  display: flex;
}

.harmonia-smart__milestones {
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-smart__milestone-list {
  gap: var(--spacing-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.harmonia-smart__milestone-item {
  background: var(--smart-bg-milestone);
  border-left: 3px solid var(--smart-color-t);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  display: flex;
}

.harmonia-smart__milestone-date {
  color: var(--smart-color-t);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.harmonia-smart__milestone-desc {
  color: var(--smart-text-primary);
}

.harmonia-smart__milestone-add {
  align-items: flex-end;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-smart__milestone-add > :first-child {
  flex: 2;
}

.harmonia-smart__milestone-add > :nth-child(2) {
  flex: 1;
}

.harmonia-smart__summary {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-smart__summary-section {
  background: var(--smart-bg-secondary);
  border-left: 4px solid var(--section-color, var(--smart-color-s));
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.harmonia-smart__summary-section h4 {
  color: var(--section-color, var(--smart-text-primary));
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-smart__summary-section p {
  color: var(--smart-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-smart__summary-section p + p {
  margin-top: var(--spacing-1);
}

.harmonia-smart__summary-section--s {
  --section-color: var(--smart-color-s);
}

.harmonia-smart__summary-section--m {
  --section-color: var(--smart-color-m);
}

.harmonia-smart__summary-section--a {
  --section-color: var(--smart-color-a);
}

.harmonia-smart__summary-section--r {
  --section-color: var(--smart-color-r);
}

.harmonia-smart__summary-section--t {
  --section-color: var(--smart-color-t);
}

.harmonia-smart__navigation {
  align-items: center;
  gap: var(--spacing-4);
  justify-content: space-between;
  min-height: 48px;
  display: flex;
}

.harmonia-smart__nav-right {
  gap: var(--spacing-2);
  margin-left: auto;
  display: flex;
}

@media (max-width: 640px) {
  .harmonia-smart__steps {
    gap: var(--spacing-1);
    padding: 0;
  }

  .harmonia-smart__step-letter {
    font-size: var(--font-size-base);
    width: 32px;
    height: 32px;
  }

  .harmonia-smart__step-label {
    display: none;
  }

  .harmonia-smart__range-group {
    gap: var(--spacing-2);
    flex-direction: column;
  }

  .harmonia-smart__range-arrow {
    height: auto;
    transform: rotate(90deg);
  }

  .harmonia-smart__milestone-add {
    flex-direction: column;
  }

  .harmonia-smart__milestone-add > * {
    width: 100%;
    flex: none !important;
  }

  .harmonia-smart__navigation {
    gap: var(--spacing-3);
    flex-direction: column;
  }

  .harmonia-smart__nav-right {
    width: 100%;
    margin-left: 0;
  }

  .harmonia-smart__nav-right button {
    flex: 1;
  }

  .harmonia-smart__confidence-scale {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .harmonia-smart {
    --smart-button-size: 44px;
  }
}

@media (min-width: 1024px) {
  .harmonia-smart {
    --smart-button-size: 40px;
  }
}

:root.dark .harmonia-smart, [data-theme="dark"] .harmonia-smart {
  --smart-bg-primary: var(--surface-1, #1a1a2e);
  --smart-bg-secondary: #ffffff0f;
  --smart-bg-button: #ffffff14;
  --smart-bg-milestone: #ffffff0a;
  --smart-border-color: #ffffff26;
  --smart-focus-ring: #039de366;
}

:root.dark .harmonia-smart__step-letter, [data-theme="dark"] .harmonia-smart__step-letter {
  background-color: #ffffff26;
}

:root.dark .harmonia-smart__confidence-button:hover, [data-theme="dark"] .harmonia-smart__confidence-button:hover {
  background: #ffffff1f;
}

:root.dark .harmonia-smart__confidence-button--selected, [data-theme="dark"] .harmonia-smart__confidence-button--selected {
  background: #2ed6c533;
}

:root.dark .harmonia-smart__milestone-date, [data-theme="dark"] .harmonia-smart__milestone-date {
  color: var(--smart-color-m);
}

:root.dark .harmonia-smart__milestone-item, [data-theme="dark"] .harmonia-smart__milestone-item {
  border-left-color: var(--smart-color-m);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-smart {
    --smart-transition: 0s;
    --smart-transition-fast: 0s;
  }

  .harmonia-smart__confidence-button, .harmonia-smart__step-indicator, .harmonia-smart__step-label, .harmonia-smart__step-letter {
    transition: none;
  }

  .harmonia-smart__confidence-button:active, .harmonia-smart__step-indicator--active .harmonia-smart__step-letter {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-smart__confidence-button {
    border-width: 3px;
  }

  .harmonia-smart__confidence-button:focus-visible {
    box-shadow: 0 0 0 4px var(--smart-color-s);
  }

  .harmonia-smart__step-indicator--active .harmonia-smart__step-letter {
    box-shadow: 0 0 0 5px var(--step-color, var(--smart-color-s));
  }

  .harmonia-smart__summary-section {
    border-left-width: 6px;
  }

  .harmonia-smart__milestone-item {
    border-left-width: 5px;
  }
}

.harmonia-values {
  --values-color-primary: #039de3;
  --values-color-selected: #2ed6c5;
  --values-color-gap-positive: #2ed6c5;
  --values-color-gap-small: #039de3;
  --values-color-gap-medium: #f6cd01;
  --values-color-gap-large: #ff5a6a;
  --values-focus-ring: #039de34d;
  --values-bg-primary: var(--color-background-primary);
  --values-bg-secondary: #0704330a;
  --values-bg-tag: var(--color-neutral-100);
  --values-bg-selected-summary: var(--color-neutral-50);
  --values-bg-review-item: var(--color-neutral-50);
  --values-bg-insight: #039de314;
  --values-text-primary: var(--color-text-primary);
  --values-text-secondary: var(--color-text-secondary);
  --values-text-tertiary: var(--color-text-tertiary);
  --values-border-color: var(--color-border-default);
  --values-border-light: var(--color-border-light);
  --values-tag-min-height: 44px;
  --values-button-size: 44px;
  --values-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --values-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
}

.harmonia-values__content {
  min-height: 500px;
}

.harmonia-values__header {
  margin-bottom: var(--spacing-6);
  text-align: center;
}

.harmonia-values__title {
  color: var(--values-color-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-values__description {
  color: var(--values-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-values__subtitle {
  color: var(--values-text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-3);
}

.harmonia-values__hint {
  color: var(--values-text-tertiary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--spacing-4);
}

.harmonia-values__categories {
  gap: var(--spacing-5);
  margin-bottom: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-values__category-title {
  color: var(--values-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-values__tags {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-values__tag {
  background: var(--values-bg-tag);
  border-radius: var(--radius-full);
  color: var(--values-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  align-items: center;
  gap: var(--spacing-1);
  min-height: var(--values-tag-min-height);
  padding: var(--spacing-2) var(--spacing-4);
  transition: background-color var(--values-transition-fast), border-color var(--values-transition-fast), transform var(--values-transition);
  border: 2px solid #0000;
  display: inline-flex;
}

.harmonia-values__tag:hover:not(:disabled) {
  background: var(--color-neutral-200);
  border-color: var(--tag-color, var(--values-color-primary));
}

.harmonia-values__tag:active:not(:disabled) {
  transform: scale(.97);
}

.harmonia-values__tag:focus-visible {
  border-color: var(--values-color-primary);
  box-shadow: 0 0 0 3px var(--values-focus-ring);
  outline: none;
}

.harmonia-values__tag--selected {
  border-color: var(--values-color-selected);
  color: var(--values-color-selected);
  font-weight: var(--font-weight-medium);
  background: #2ed6c526;
}

.harmonia-values__tag:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-values__tag-check {
  font-weight: var(--font-weight-bold);
}

.harmonia-values__custom {
  border-top: 1px solid var(--values-border-light);
  align-items: flex-end;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  display: flex;
}

.harmonia-values__custom > :first-child {
  flex: 1;
}

.harmonia-values__selected-summary {
  background: var(--values-bg-selected-summary);
  border-radius: var(--radius-lg);
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-values__selected-label {
  color: var(--values-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-values__selected-tag {
  border-radius: var(--radius-md);
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-3);
  background: #039de31f;
  display: inline-flex;
}

.harmonia-values__remove, .harmonia-values__selected-tag {
  color: var(--values-color-primary);
  font-size: var(--font-size-sm);
  align-items: center;
}

.harmonia-values__remove {
  border-radius: var(--radius-full);
  cursor: pointer;
  height: 24px;
  transition: background-color var(--values-transition-fast), color var(--values-transition-fast);
  background: none;
  border: none;
  justify-content: center;
  width: 24px;
  padding: 0;
  display: flex;
}

.harmonia-values__remove:hover {
  color: #0289c7;
  background: #039de326;
}

.harmonia-values__remove:focus-visible {
  box-shadow: 0 0 0 3px var(--values-focus-ring);
  outline: none;
}

.harmonia-values__rating {
  gap: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-values__rating-progress {
  color: var(--values-text-tertiary);
  font-size: var(--font-size-sm);
  text-align: center;
}

.harmonia-values__rating-content {
  align-items: center;
  gap: var(--spacing-6);
  flex-direction: column;
  display: flex;
}

.harmonia-values__rating-badge {
  border-radius: var(--radius-full);
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  font-size: 2.5rem;
  display: flex;
  box-shadow: 0 4px 20px #07043326;
}

.harmonia-values__rating-title {
  color: var(--values-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin: 0;
}

.harmonia-values__rating-field {
  width: 100%;
  max-width: 400px;
}

.harmonia-values__rating-label {
  color: var(--values-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-3);
  text-align: center;
  display: block;
}

.harmonia-values__slider-container {
  width: 100%;
}

.harmonia-values__slider-labels {
  color: var(--values-text-tertiary);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-2);
  justify-content: space-between;
  display: flex;
}

.harmonia-values__slider-value {
  color: var(--values-color-primary);
  font-weight: var(--font-weight-bold);
}

.harmonia-values__gap-indicator {
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-3) var(--spacing-4);
  text-align: center;
}

.harmonia-values__gap-indicator--positive {
  color: var(--values-color-gap-positive);
  background: #2ed6c51f;
}

.harmonia-values__gap-indicator--small {
  color: var(--values-color-gap-small);
  background: #039de31a;
}

.harmonia-values__gap-indicator--medium {
  color: #b89800;
  background: #f6cd0126;
}

.harmonia-values__gap-indicator--large {
  color: var(--values-color-gap-large);
  background: #ff5a6a1f;
}

.harmonia-values__radar-container {
  margin-bottom: var(--spacing-6);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.harmonia-values__radar {
  width: 250px;
  height: 250px;
}

.harmonia-values__radar-circle {
  fill: none;
}

.harmonia-values__radar-axis, .harmonia-values__radar-circle {
  stroke: var(--values-border-color);
  stroke-width: 1px;
}

.harmonia-values__radar-importance {
  fill: #039de340;
  stroke: var(--values-color-primary);
  stroke-width: 2px;
}

.harmonia-values__radar-alignment {
  fill: #2ed6c540;
  stroke: var(--values-color-selected);
  stroke-width: 2px;
}

.harmonia-values__radar-label {
  fill: var(--values-text-secondary);
  font-size: 8px;
}

.harmonia-values__radar-legend {
  font-size: var(--font-size-xs);
  gap: var(--spacing-4);
  margin-top: var(--spacing-3);
  display: flex;
}

.harmonia-values__legend-importance {
  color: var(--values-color-primary);
  font-weight: var(--font-weight-medium);
}

.harmonia-values__legend-alignment {
  color: var(--values-color-selected);
  font-weight: var(--font-weight-medium);
}

.harmonia-values__review-list {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-values__review-list h4 {
  color: var(--values-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-values__review-item {
  background: var(--values-bg-review-item);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  transition: background-color var(--values-transition-fast);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-values__review-item:hover {
  background: var(--values-bg-secondary);
}

.harmonia-values__review-header {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-values__review-emoji {
  border-radius: var(--radius-full);
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  display: flex;
}

.harmonia-values__review-name {
  color: var(--values-text-primary);
  font-weight: var(--font-weight-medium);
}

.harmonia-values__review-scores {
  color: var(--values-text-tertiary);
  font-size: var(--font-size-xs);
  gap: var(--spacing-3);
  display: flex;
}

.harmonia-values__review-gap {
  font-weight: var(--font-weight-semibold);
}

.harmonia-values__review-gap--positive {
  color: var(--values-color-gap-positive);
}

.harmonia-values__review-gap--negative {
  color: var(--values-color-gap-large);
}

.harmonia-values__insight {
  background: var(--values-bg-insight);
  border-left: 3px solid var(--values-color-primary);
  border-radius: var(--radius-lg);
  color: var(--values-color-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
}

.harmonia-values__navigation {
  gap: var(--spacing-4);
  justify-content: space-between;
  min-height: 48px;
  display: flex;
}

.harmonia-values__navigation > button:only-child {
  margin-left: auto;
}

@media (max-width: 640px) {
  .harmonia-values__review-item {
    align-items: flex-start;
    gap: var(--spacing-2);
    flex-direction: column;
  }

  .harmonia-values__review-scores {
    justify-content: space-between;
    width: 100%;
  }

  .harmonia-values__custom {
    flex-direction: column;
  }

  .harmonia-values__custom button {
    width: 100%;
  }

  .harmonia-values__navigation {
    gap: var(--spacing-3);
    flex-direction: column;
  }

  .harmonia-values__navigation button {
    width: 100%;
  }

  .harmonia-values__tags {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .harmonia-values {
    --values-tag-min-height: 40px;
    --values-button-size: 40px;
  }
}

:root.dark .harmonia-values, [data-theme="dark"] .harmonia-values {
  --values-bg-primary: var(--surface-1, #1a1a2e);
  --values-bg-secondary: #ffffff14;
  --values-bg-tag: #ffffff14;
  --values-bg-selected-summary: #ffffff0a;
  --values-bg-review-item: #ffffff0a;
  --values-bg-insight: #039de31f;
  --values-border-color: #ffffff26;
  --values-border-light: #ffffff1a;
  --values-focus-ring: #039de366;
}

:root.dark .harmonia-values__tag:hover:not(:disabled), [data-theme="dark"] .harmonia-values__tag:hover:not(:disabled) {
  background: #ffffff1f;
}

:root.dark .harmonia-values__tag--selected, [data-theme="dark"] .harmonia-values__tag--selected {
  background: #2ed6c533;
}

:root.dark .harmonia-values__selected-tag, [data-theme="dark"] .harmonia-values__selected-tag {
  background: #039de326;
}

:root.dark .harmonia-values__remove:hover, [data-theme="dark"] .harmonia-values__remove:hover {
  background: #039de333;
}

:root.dark .harmonia-values__rating-badge, [data-theme="dark"] .harmonia-values__rating-badge {
  box-shadow: 0 4px 20px #0000004d;
}

:root.dark .harmonia-values__review-item:hover, [data-theme="dark"] .harmonia-values__review-item:hover {
  background: #ffffff14;
}

:root.dark .harmonia-values__gap-indicator--positive, [data-theme="dark"] .harmonia-values__gap-indicator--positive {
  background: #2ed6c526;
}

:root.dark .harmonia-values__gap-indicator--small, [data-theme="dark"] .harmonia-values__gap-indicator--small {
  background: #039de326;
}

:root.dark .harmonia-values__gap-indicator--medium, [data-theme="dark"] .harmonia-values__gap-indicator--medium {
  color: var(--values-color-gap-medium);
  background: #f6cd0133;
}

:root.dark .harmonia-values__gap-indicator--large, [data-theme="dark"] .harmonia-values__gap-indicator--large {
  background: #ff5a6a26;
}

:root.dark .harmonia-values__radar-axis, :root.dark .harmonia-values__radar-circle, [data-theme="dark"] .harmonia-values__radar-axis, [data-theme="dark"] .harmonia-values__radar-circle {
  stroke: #ffffff26;
}

:root.dark .harmonia-values__radar-label, [data-theme="dark"] .harmonia-values__radar-label {
  fill: var(--values-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-values {
    --values-transition: 0s;
    --values-transition-fast: 0s;
  }

  .harmonia-values__remove, .harmonia-values__review-item, .harmonia-values__tag {
    transition: none;
  }

  .harmonia-values__tag:active:not(:disabled) {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-values__tag {
    border-width: 3px;
  }

  .harmonia-values__tag:focus-visible {
    box-shadow: 0 0 0 4px var(--values-color-primary);
  }

  .harmonia-values__insight {
    border-left-width: 5px;
  }

  .harmonia-values__radar-alignment, .harmonia-values__radar-importance {
    stroke-width: 3px;
  }

  .harmonia-values__gap-indicator {
    border: 2px solid;
  }
}

.harmonia-thought {
  --thought-color-original: #ff5a6a;
  --thought-color-evidence-for: #f6cd01;
  --thought-color-evidence-against: #2ed6c5;
  --thought-color-alternative: #039de3;
  --thought-color-active: #039de3;
  --thought-color-completed: #2ed6c5;
  --thought-focus-ring: #039de34d;
  --thought-bg-primary: var(--color-background-primary);
  --thought-bg-secondary: #0704330a;
  --thought-bg-tag: var(--color-neutral-100);
  --thought-bg-guidance: #039de314;
  --thought-bg-intensity: var(--color-neutral-50);
  --thought-bg-evidence-for: #f6cd011f;
  --thought-bg-evidence-against: #2ed6c51f;
  --thought-text-primary: var(--color-text-primary);
  --thought-text-secondary: var(--color-text-secondary);
  --thought-text-tertiary: var(--color-text-tertiary);
  --thought-border-color: var(--color-border-default);
  --thought-border-light: var(--color-border-light);
  --thought-tag-min-height: 44px;
  --thought-button-size: 44px;
  --thought-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --thought-transition-fast: .15s ease-out;
  gap: var(--spacing-6);
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
}

.harmonia-thought__progress {
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
  display: flex;
}

.harmonia-thought__progress-step {
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  height: 4px;
  transition: background-color var(--thought-transition);
  flex: 1;
}

.harmonia-thought__progress-step--active {
  background: var(--thought-color-active);
}

.harmonia-thought__progress-step--completed {
  background: var(--thought-color-completed);
}

.harmonia-thought__content {
  min-height: 450px;
}

.harmonia-thought__header {
  margin-bottom: var(--spacing-4);
  text-align: center;
}

.harmonia-thought__step-number {
  background: var(--thought-bg-secondary);
  border-radius: var(--radius-full);
  color: var(--thought-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  display: inline-block;
}

.harmonia-thought__title {
  color: var(--thought-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-thought__description {
  color: var(--thought-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-thought__guidance {
  background: var(--thought-bg-guidance);
  border-left: 3px solid var(--thought-color-alternative);
  border-radius: var(--radius-lg);
  color: var(--thought-color-alternative);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
}

.harmonia-thought__phase-content {
  margin-top: var(--spacing-4);
}

.harmonia-thought__emotion-selector {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-thought__emotion-tags {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-thought__emotion-tag {
  background: var(--thought-bg-tag);
  border-radius: var(--radius-full);
  color: var(--thought-text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  min-height: var(--thought-tag-min-height);
  padding: var(--spacing-2) var(--spacing-4);
  transition: background-color var(--thought-transition-fast), border-color var(--thought-transition-fast), transform var(--thought-transition);
  border: 2px solid #0000;
  align-items: center;
  display: flex;
}

.harmonia-thought__emotion-tag:hover {
  background: var(--color-neutral-200);
}

.harmonia-thought__emotion-tag:active {
  transform: scale(.97);
}

.harmonia-thought__emotion-tag:focus-visible {
  border-color: var(--thought-color-active);
  box-shadow: 0 0 0 3px var(--thought-focus-ring);
  outline: none;
}

.harmonia-thought__emotion-tag--selected {
  border-color: var(--thought-color-completed);
  color: var(--thought-color-completed);
  font-weight: var(--font-weight-medium);
  background: #2ed6c526;
}

.harmonia-thought__emotion-custom {
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-thought__emotion-input {
  background-color: var(--thought-bg-primary);
  border: 2px solid var(--thought-border-light);
  border-radius: var(--radius-lg);
  color: var(--thought-text-primary);
  min-height: var(--thought-tag-min-height);
  padding: var(--spacing-3) var(--spacing-4);
  transition: border-color var(--thought-transition-fast), box-shadow var(--thought-transition);
  flex: 1;
  font-size: 16px;
}

.harmonia-thought__emotion-input:focus, .harmonia-thought__emotion-input:hover {
  border-color: var(--thought-color-active);
}

.harmonia-thought__emotion-input:focus {
  box-shadow: 0 0 0 3px var(--thought-focus-ring);
  outline: none;
}

.harmonia-thought__emotion-input::placeholder {
  color: var(--thought-text-tertiary);
}

.harmonia-thought__emotion-add {
  background: var(--thought-color-active);
  border-radius: var(--radius-lg);
  color: #fff;
  cursor: pointer;
  font-size: var(--font-size-xl);
  height: var(--thought-button-size);
  transition: background-color var(--thought-transition-fast), transform var(--thought-transition);
  width: var(--thought-button-size);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-thought__emotion-add:hover {
  background: #0289c7;
}

.harmonia-thought__emotion-add:active {
  transform: scale(.95);
}

.harmonia-thought__emotion-add:focus-visible {
  box-shadow: 0 0 0 3px var(--thought-focus-ring);
  outline: none;
}

.harmonia-thought__intensity {
  background: var(--thought-bg-intensity);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.harmonia-thought__intensity-label {
  color: var(--thought-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-3);
  display: block;
}

.harmonia-thought__intensity-scale {
  color: var(--thought-text-tertiary);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-2);
  justify-content: space-between;
  display: flex;
}

.harmonia-thought__intensity-value {
  color: var(--thought-color-completed);
  font-weight: var(--font-weight-bold);
}

.harmonia-thought__evidence {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-thought__evidence-list {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-thought__evidence-item {
  background: var(--thought-bg-evidence-for);
  border-left: 4px solid var(--thought-color-evidence-for);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--thought-text-primary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-3) var(--spacing-4);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.harmonia-thought__evidence-item--against {
  background: var(--thought-bg-evidence-against);
  border-left-color: var(--thought-color-evidence-against);
}

.harmonia-thought__evidence-remove {
  border-radius: var(--radius-full);
  color: var(--thought-text-tertiary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  height: 36px;
  transition: background-color var(--thought-transition-fast), color var(--thought-transition-fast);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 36px;
  padding: 0;
  display: flex;
}

.harmonia-thought__evidence-remove:hover {
  color: var(--thought-color-original);
  background: #ff5a6a1a;
}

.harmonia-thought__evidence-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ff5a6a4d;
}

.harmonia-thought__evidence-add {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-thought__evidence-add button {
  align-self: flex-end;
}

.harmonia-thought__summary {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-thought__summary-section {
  background: var(--thought-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.harmonia-thought__summary-section h4 {
  color: var(--thought-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-2);
}

.harmonia-thought__summary-section p, .harmonia-thought__summary-section ul {
  color: var(--thought-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-thought__summary-section ul {
  padding-left: var(--spacing-4);
}

.harmonia-thought__summary-section li {
  margin-bottom: var(--spacing-1);
}

.harmonia-thought__summary-thought {
  color: var(--thought-color-original);
  font-style: italic;
}

.harmonia-thought__summary-alternative {
  color: var(--thought-color-alternative);
  font-weight: var(--font-weight-semibold);
}

.harmonia-thought__summary-columns {
  gap: var(--spacing-3);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.harmonia-thought__summary-for {
  background: var(--thought-bg-evidence-for);
  border-left: 4px solid var(--thought-color-evidence-for);
}

.harmonia-thought__summary-for h4 {
  color: #b89800;
}

.harmonia-thought__summary-against {
  background: var(--thought-bg-evidence-against);
  border-left: 4px solid var(--thought-color-evidence-against);
}

.harmonia-thought__summary-against h4 {
  color: var(--thought-color-evidence-against);
}

.harmonia-thought__summary-result {
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-4);
  text-align: center;
}

.harmonia-thought__summary-result--positive {
  color: var(--thought-color-completed);
  background: linear-gradient(135deg, #2ed6c526, #039de326);
}

.harmonia-thought__summary-result--neutral {
  background: var(--thought-bg-secondary);
  color: var(--thought-text-secondary);
}

.harmonia-thought__navigation {
  gap: var(--spacing-4);
  justify-content: space-between;
  min-height: 48px;
  display: flex;
}

.harmonia-thought__nav-right {
  margin-left: auto;
}

@media (max-width: 640px) {
  .harmonia-thought__summary-columns {
    grid-template-columns: 1fr;
  }

  .harmonia-thought__navigation {
    gap: var(--spacing-3);
    flex-direction: column;
  }

  .harmonia-thought__navigation button {
    width: 100%;
  }

  .harmonia-thought__nav-right {
    margin-left: 0;
  }

  .harmonia-thought__emotion-tags {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .harmonia-thought {
    --thought-tag-min-height: 40px;
    --thought-button-size: 40px;
  }
}

:root.dark .harmonia-thought, [data-theme="dark"] .harmonia-thought {
  --thought-bg-primary: var(--surface-1, #1a1a2e);
  --thought-bg-secondary: #ffffff0f;
  --thought-bg-tag: #ffffff14;
  --thought-bg-guidance: #039de31f;
  --thought-bg-intensity: #ffffff0a;
  --thought-bg-evidence-for: #f6cd0126;
  --thought-bg-evidence-against: #2ed6c526;
  --thought-border-color: #ffffff26;
  --thought-border-light: #ffffff1a;
  --thought-focus-ring: #039de366;
}

:root.dark .harmonia-thought__emotion-tag:hover, [data-theme="dark"] .harmonia-thought__emotion-tag:hover {
  background: #ffffff1f;
}

:root.dark .harmonia-thought__emotion-tag--selected, [data-theme="dark"] .harmonia-thought__emotion-tag--selected {
  background: #2ed6c533;
}

:root.dark .harmonia-thought__evidence-remove:hover, [data-theme="dark"] .harmonia-thought__evidence-remove:hover {
  background: #ff5a6a26;
}

:root.dark .harmonia-thought__summary-for h4, [data-theme="dark"] .harmonia-thought__summary-for h4 {
  color: var(--thought-color-evidence-for);
}

:root.dark .harmonia-thought__summary-result--positive, [data-theme="dark"] .harmonia-thought__summary-result--positive {
  background: linear-gradient(135deg, #2ed6c533, #039de333);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-thought {
    --thought-transition: 0s;
    --thought-transition-fast: 0s;
  }

  .harmonia-thought__emotion-add, .harmonia-thought__emotion-input, .harmonia-thought__emotion-tag, .harmonia-thought__evidence-remove, .harmonia-thought__progress-step {
    transition: none;
  }

  .harmonia-thought__emotion-add:active, .harmonia-thought__emotion-tag:active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-thought__progress-step {
    height: 6px;
  }

  .harmonia-thought__emotion-tag {
    border-width: 3px;
  }

  .harmonia-thought__emotion-add:focus-visible, .harmonia-thought__emotion-input:focus, .harmonia-thought__emotion-tag:focus-visible {
    box-shadow: 0 0 0 4px var(--thought-color-active);
  }

  .harmonia-thought__evidence-item {
    border-left-width: 6px;
  }

  .harmonia-thought__guidance {
    border-left-width: 5px;
  }

  .harmonia-thought__summary-against, .harmonia-thought__summary-for {
    border-left-width: 6px;
  }
}

.harmonia-pull-to-refresh {
  touch-action: pan-y;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.harmonia-pull-to-refresh--disabled {
  pointer-events: none;
}

.harmonia-pull-to-refresh__indicator {
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  pointer-events: none;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.harmonia-pull-to-refresh__spinner {
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.harmonia-pull-to-refresh__blob {
  width: 40px;
  height: 40px;
}

.harmonia-pull-to-refresh__blob-circle {
  fill: none;
  stroke: var(--color-neutral-200);
  stroke-width: 3px;
}

.harmonia-pull-to-refresh__blob-arc {
  fill: none;
  stroke: var(--color-secondary-500);
  stroke-width: 3px;
}

.harmonia-pull-to-refresh--refreshing .harmonia-pull-to-refresh__blob-arc {
  stroke-dasharray: 60;
  stroke-dashoffset: 30px;
  animation: 1s ease-in-out infinite harmonia-refresh-arc;
}

@keyframes harmonia-refresh-arc {
  0% {
    stroke-dashoffset: 60px;
  }

  50% {
    stroke-dashoffset: 15px;
  }

  to {
    stroke-dashoffset: 60px;
  }
}

.harmonia-pull-to-refresh__text {
  color: var(--color-text-secondary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.harmonia-pull-to-refresh--ready .harmonia-pull-to-refresh__text {
  color: var(--color-secondary-600);
}

.harmonia-pull-to-refresh--refreshing .harmonia-pull-to-refresh__text {
  color: var(--color-secondary-500);
}

.harmonia-pull-to-refresh__content {
  background-color: var(--color-background-primary);
  touch-action: pan-y;
  min-height: 100%;
  position: relative;
}

:root.dark .harmonia-pull-to-refresh__blob-circle, [data-theme="dark"] .harmonia-pull-to-refresh__blob-circle {
  stroke: var(--color-neutral-700);
}

:root.dark .harmonia-pull-to-refresh__content, [data-theme="dark"] .harmonia-pull-to-refresh__content {
  background-color: var(--surface-base);
}

@media (min-width: 1024px) {
  .harmonia-pull-to-refresh__indicator {
    display: none;
  }

  .harmonia-pull-to-refresh__content {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-pull-to-refresh--refreshing .harmonia-pull-to-refresh__blob-arc {
    animation: none;
  }

  .harmonia-pull-to-refresh__content {
    transition: none;
  }
}

.harmonia-streak-counter {
  --streak-color-primary: #039de3;
  --streak-color-teal: #2ed6c5;
  --streak-color-flame: #ff5a6a;
  --streak-color-flame-dark: #d84a5a;
  --streak-color-warning: #f6cd01;
  --streak-color-navy: #070433;
  --streak-focus-ring: #039de34d;
  --streak-bg-gradient: linear-gradient(135deg, #ff5a6a14 0%, var(--color-neutral-50, #fafbfc) 50%, #2ed6c514 100%);
  --streak-bg-blob-accent: #ff5a6a26;
  --streak-bg-blob-teal: #2ed6c526;
  --streak-text-primary: var(--color-text-primary, #111827);
  --streak-text-secondary: var(--color-text-secondary, #374151);
  --streak-text-tertiary: var(--color-text-tertiary, #6b7280);
  --streak-border-color: var(--color-border-light, #e8eaec);
  --streak-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --streak-transition-fast: .15s ease-out;
  background: var(--streak-bg-gradient);
  border: 1px solid var(--streak-border-color);
  align-items: center;
  gap: var(--spacing-3, .75rem);
  padding: var(--spacing-5, 1.25rem);
  border-radius: 20px;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px #2d323814;
}

.harmonia-streak-counter:before {
  background: radial-gradient(ellipse at 70% 30%, var(--streak-bg-blob-accent) 0, transparent 50%), radial-gradient(ellipse at 30% 70%, var(--streak-bg-blob-teal) 0, transparent 50%);
  content: "";
  opacity: .4;
  pointer-events: none;
  width: 200%;
  height: 200%;
  animation: 20s ease-in-out infinite harmonia-blob-drift;
  position: absolute;
  top: -50%;
  right: -50%;
}

@keyframes harmonia-blob-drift {
  0%, to {
    transform: translate(0)rotate(0);
  }

  50% {
    transform: translate(5%, 5%)rotate(5deg);
  }
}

.harmonia-streak-counter__main {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-2, .5rem);
  min-width: 48px;
  min-height: 48px;
  padding: var(--spacing-2, .5rem);
  transition: background-color var(--streak-transition-fast), box-shadow var(--streak-transition-fast);
  background: none;
  border: none;
  border-radius: 16px;
  flex-direction: column;
  display: flex;
}

.harmonia-streak-counter__main:hover {
  background-color: #ff5a6a1a;
}

.harmonia-streak-counter__main:active {
  background-color: #ff5a6a26;
}

.harmonia-streak-counter__main:focus-visible {
  box-shadow: 0 0 0 3px var(--streak-focus-ring);
  background-color: #039de314;
  outline: none;
}

.harmonia-streak-counter__flame-container {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.harmonia-streak-counter__flame-icon {
  filter: drop-shadow(0 4px 8px #ff5a6a4d);
  font-size: 3.5rem;
}

.harmonia-streak-counter--completed .harmonia-streak-counter__flame-icon {
  filter: drop-shadow(0 0 16px #ff5a6a99);
  animation: .5s ease-in-out infinite alternate harmonia-flame-dance;
}

@keyframes harmonia-flame-dance {
  0% {
    transform: scale(1)rotate(-3deg);
  }

  to {
    transform: scale(1.05)rotate(3deg);
  }
}

.harmonia-streak-counter__glow {
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, #ff5a6a4d 0, #0000 70%);
  border-radius: 9999px;
  transition: opacity .3s;
  position: absolute;
  inset: -12px;
}

.harmonia-streak-counter--completed .harmonia-streak-counter__glow {
  opacity: 1;
}

.harmonia-streak-counter__count-container {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.harmonia-streak-counter__count {
  color: var(--streak-color-flame);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-shadow: 0 2px 4px #0000000d;
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}

.harmonia-streak-counter--completed .harmonia-streak-counter__count {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, var(--streak-color-flame) 0, var(--streak-color-flame-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.harmonia-streak-counter__label {
  color: var(--streak-text-secondary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
}

.harmonia-streak-counter__progress {
  gap: var(--spacing-2, .5rem);
  z-index: 1;
  flex-direction: column;
  width: 100%;
  display: flex;
  position: relative;
}

.harmonia-streak-counter__progress-bar {
  background: var(--color-neutral-200, #e8eaec);
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
}

.harmonia-streak-counter__progress-fill {
  background: linear-gradient(90deg, var(--streak-color-teal) 0, var(--streak-color-primary) 50%, var(--streak-color-flame) 100%);
  border-radius: 9999px;
  height: 100%;
  transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 1px 3px #ff5a6a4d;
}

.harmonia-streak-counter__milestone {
  color: var(--streak-text-tertiary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
}

.harmonia-streak-counter__warning {
  align-items: center;
  gap: var(--spacing-2, .5rem);
  padding: var(--spacing-2, .5rem) var(--spacing-3, .75rem);
  background: #f6cd011a;
  border: 1px solid #f6cd014d;
  border-radius: 12px;
  width: 100%;
  display: flex;
}

.harmonia-streak-counter__warning-icon {
  color: var(--streak-color-warning);
  font-size: 1rem;
}

.harmonia-streak-counter__warning-text {
  color: #b59700;
  font-size: .875rem;
  font-weight: 500;
}

.harmonia-streak-counter--at-risk {
  border-color: var(--streak-color-warning);
  animation: 2s ease-in-out infinite harmonia-streak-pulse;
}

@keyframes harmonia-streak-pulse {
  0%, to {
    box-shadow: 0 4px 12px #2d323814;
  }

  50% {
    box-shadow: 0 4px 16px #f6cd014d;
  }
}

.harmonia-streak-counter__record {
  color: var(--streak-text-tertiary);
  align-items: center;
  gap: var(--spacing-1, .25rem);
  font-size: .875rem;
  display: flex;
}

.harmonia-streak-counter__record-icon {
  color: var(--streak-color-primary);
  font-size: 1rem;
}

.harmonia-streak-counter__celebration {
  background: linear-gradient(135deg, var(--streak-color-flame) 0, var(--streak-color-flame-dark) 50%, var(--streak-color-teal) 100%);
  z-index: 10;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  animation: .3s cubic-bezier(.34, 1.56, .64, 1) harmonia-celebration-pop;
  display: flex;
  position: absolute;
  inset: 0;
}

@keyframes harmonia-celebration-pop {
  0% {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.harmonia-streak-counter__celebration:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 30% 40%, #ffffff40 0, #0000 50%), radial-gradient(circle at 70% 60%, #ffffff26 0, #0000 40%);
  border-radius: 20px;
  position: absolute;
  inset: 0;
}

.harmonia-streak-counter__celebration-content {
  align-items: center;
  gap: var(--spacing-3, .75rem);
  z-index: 1;
  flex-direction: column;
  display: flex;
  position: relative;
}

.harmonia-streak-counter__celebration-emoji {
  filter: drop-shadow(0 4px 8px #0003);
  font-size: 4rem;
  animation: .5s cubic-bezier(.68, -.55, .265, 1.55) harmonia-emoji-bounce;
}

@keyframes harmonia-emoji-bounce {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.3);
  }

  to {
    transform: scale(1);
  }
}

.harmonia-streak-counter__celebration-text {
  color: #fff;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-shadow: 0 2px 4px #0003;
  font-size: 1.5rem;
  font-weight: 700;
}

.harmonia-streak-counter--compact {
  background: linear-gradient(135deg, var(--color-neutral-50, #fafbfc) 0, #ff5a6a14 100%);
  cursor: pointer;
  gap: var(--spacing-2, .5rem);
  min-height: 48px;
  padding: var(--spacing-2, .5rem) var(--spacing-4, 1rem);
  border-radius: 9999px;
  flex-direction: row;
}

.harmonia-streak-counter--compact:before {
  display: none;
}

.harmonia-streak-counter--compact:focus-visible {
  box-shadow: 0 0 0 3px var(--streak-focus-ring);
  outline: none;
}

.harmonia-streak-counter--compact .harmonia-streak-counter__flame-icon {
  font-size: 1.5rem;
}

.harmonia-streak-counter--compact .harmonia-streak-counter__count {
  color: var(--streak-color-flame);
  font-size: 1.25rem;
}

.harmonia-streak-counter--compact.harmonia-streak-counter--completed {
  background: linear-gradient(135deg, #ff5a6a26, #ff5a6a14);
  border-color: #ff5a6a4d;
}

:root.dark .harmonia-streak-counter, [data-theme="dark"] .harmonia-streak-counter {
  --streak-bg-gradient: linear-gradient(135deg, var(--elevation-1-bg, #252a30) 0%, var(--elevation-2-bg, #2d333a) 100%);
  --streak-bg-blob-accent: #ff5a6a1a;
  --streak-bg-blob-teal: #2ed6c51a;
  --streak-text-secondary: var(--color-text-secondary-dark, #9ca3af);
  --streak-text-tertiary: var(--color-text-tertiary-dark, #6b7280);
  --streak-border-color: var(--color-neutral-700, #374151);
  --streak-focus-ring: #039de366;
  box-shadow: 0 4px 12px #0000004d;
}

:root.dark .harmonia-streak-counter:before, [data-theme="dark"] .harmonia-streak-counter:before {
  opacity: .15;
}

:root.dark .harmonia-streak-counter__main:hover, [data-theme="dark"] .harmonia-streak-counter__main:hover {
  background-color: #ff5a6a26;
}

:root.dark .harmonia-streak-counter__main:focus-visible, [data-theme="dark"] .harmonia-streak-counter__main:focus-visible {
  background-color: #039de31f;
}

:root.dark .harmonia-streak-counter__progress-bar, [data-theme="dark"] .harmonia-streak-counter__progress-bar {
  background: var(--color-neutral-700, #374151);
}

:root.dark .harmonia-streak-counter__warning, [data-theme="dark"] .harmonia-streak-counter__warning {
  background: #f6cd0126;
  border-color: #f6cd0166;
}

:root.dark .harmonia-streak-counter__warning-text, [data-theme="dark"] .harmonia-streak-counter__warning-text {
  color: var(--streak-color-warning);
}

:root.dark .harmonia-streak-counter--compact, [data-theme="dark"] .harmonia-streak-counter--compact {
  background: linear-gradient(135deg, var(--elevation-1-bg, #252a30) 0, var(--elevation-2-bg, #2d333a) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-streak-counter {
    --streak-transition: 0s;
    --streak-transition-fast: 0s;
  }

  .harmonia-streak-counter--at-risk, .harmonia-streak-counter:before, .harmonia-streak-counter__celebration, .harmonia-streak-counter__celebration-emoji, .harmonia-streak-counter__flame-icon, .harmonia-streak-counter__glow {
    animation: none !important;
  }

  .harmonia-streak-counter__glow, .harmonia-streak-counter__main, .harmonia-streak-counter__progress-fill {
    transition: none;
  }

  .harmonia-streak-counter--completed .harmonia-streak-counter__flame-icon {
    transform: scale(1)rotate(0);
  }

  .harmonia-streak-counter--completed .harmonia-streak-counter__glow {
    opacity: .6;
  }

  .harmonia-streak-counter__celebration {
    opacity: 1;
    transform: scale(1);
  }

  .harmonia-streak-counter__celebration-emoji {
    transform: scale(1);
  }
}

@media (prefers-contrast: high) {
  .harmonia-streak-counter {
    border-width: 2px;
  }

  .harmonia-streak-counter__main:focus-visible, .harmonia-streak-counter--compact:focus-visible {
    box-shadow: 0 0 0 4px var(--streak-color-primary);
  }

  .harmonia-streak-counter__progress-bar {
    border: 2px solid var(--streak-border-color);
    height: 12px;
  }

  .harmonia-streak-counter__count {
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    background: none;
  }

  .harmonia-streak-counter__warning {
    border-width: 2px;
  }

  .harmonia-streak-counter__label, .harmonia-streak-counter__milestone {
    font-weight: 600;
  }

  .harmonia-streak-counter__celebration {
    border: 4px solid #fff;
  }
}

.harmonia-xp-progress {
  --xp-color-primary: #039de3;
  --xp-color-teal: #2ed6c5;
  --xp-color-coral: #ff5a6a;
  --xp-color-yellow: #f6cd01;
  --xp-color-navy: #070433;
  --xp-level-gradient: linear-gradient(135deg, #2ed6c5, #039de3 50%, #0077b5);
  --xp-level-glow: #2ed6c54d;
  --xp-progress-gradient: linear-gradient(90deg, #2ed6c5, #039de3 40%, #ff5a6a);
  --xp-focus-ring: #039de34d;
  --xp-bg-bar: var(--color-neutral-100, #f5f6f7);
  --xp-bg-next: var(--color-neutral-100, #f5f6f7);
  --xp-text-primary: var(--color-text-primary, #070433);
  --xp-text-secondary: var(--color-text-secondary, #6b7280);
  --xp-text-tertiary: var(--color-text-tertiary, #9ca3af);
  --xp-border-color: var(--color-neutral-300, #d1d5d9);
  --xp-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --xp-transition-fill: .6s cubic-bezier(.34, 1.56, .64, 1);
  align-items: center;
  gap: var(--spacing-3, .75rem);
  display: flex;
  position: relative;
}

.harmonia-xp-progress__level {
  background: var(--xp-level-gradient);
  box-shadow: 0 4px 12px var(--xp-level-glow), inset 0 1px 0 #fff3;
  cursor: default;
  min-width: 52px;
  height: 52px;
  transition: transform var(--xp-transition);
  border-radius: 9999px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  display: flex;
  position: relative;
}

.harmonia-xp-progress__level:before {
  border: 2px solid var(--xp-color-teal);
  content: "";
  opacity: .5;
  border-radius: 9999px;
  position: absolute;
  inset: -3px;
}

.harmonia-xp-progress__level:focus-visible {
  box-shadow: 0 4px 12px var(--xp-level-glow), inset 0 1px 0 #fff3, 0 0 0 3px var(--xp-focus-ring);
  outline: none;
}

.harmonia-xp-progress__level-number {
  color: #fff;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-shadow: 0 1px 2px #0003;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.harmonia-xp-progress__level-label {
  color: #ffffffd9;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .5rem;
  font-weight: 500;
}

.harmonia-xp-progress__content {
  gap: var(--spacing-2, .5rem);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.harmonia-xp-progress__bar-container {
  position: relative;
}

.harmonia-xp-progress__bar {
  background: var(--xp-bg-bar);
  border-radius: 9999px;
  height: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 3px #00000014;
}

.harmonia-xp-progress__fill {
  background: var(--xp-progress-gradient);
  height: 100%;
  transition: width var(--xp-transition-fill);
  border-radius: 9999px;
  position: relative;
  box-shadow: 0 1px 3px #00000026;
}

.harmonia-xp-progress__fill:before {
  content: "";
  background: linear-gradient(#ffffff80 0, #0000);
  border-radius: 9999px;
  height: 4px;
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
}

.harmonia-xp-progress__shimmer {
  background: linear-gradient(90deg, #0000, #ffffff80 50%, #0000);
  animation: 2s ease-in-out infinite harmonia-xp-shimmer;
  position: absolute;
  inset: 0;
}

@keyframes harmonia-xp-shimmer {
  0% {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.harmonia-xp-progress__gain {
  color: var(--xp-color-yellow);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  pointer-events: none;
  text-shadow: 0 1px 2px #0000001a, 0 0 12px #f6cd0166;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
  animation: 1.5s ease-out forwards harmonia-xp-float;
  position: absolute;
  top: 0;
}

@keyframes harmonia-xp-float {
  0% {
    opacity: 0;
    transform: translateY(0)scale(.5);
  }

  20% {
    opacity: 1;
    transform: translateY(-20px)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-60px)scale(.8);
  }
}

.harmonia-xp-progress__numbers {
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  align-items: center;
  gap: var(--spacing-1, .25rem);
  font-size: .875rem;
  display: flex;
}

.harmonia-xp-progress__current {
  color: var(--xp-color-primary);
  font-weight: 600;
}

.harmonia-xp-progress__separator, .harmonia-xp-progress__total {
  color: var(--xp-text-tertiary);
}

.harmonia-xp-progress__next {
  background: var(--xp-bg-next);
  border: 2px dashed var(--xp-border-color);
  height: 36px;
  transition: border-color var(--xp-transition), background-color var(--xp-transition);
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 36px;
  display: flex;
}

.harmonia-xp-progress__next:focus-visible {
  border-color: var(--xp-color-primary);
  box-shadow: 0 0 0 3px var(--xp-focus-ring);
  border-style: solid;
  outline: none;
}

.harmonia-xp-progress__next-number {
  color: var(--xp-text-tertiary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  font-size: 1rem;
  font-weight: 600;
}

.harmonia-xp-progress__levelup {
  background: linear-gradient(135deg, var(--xp-color-teal) 0, var(--xp-color-primary) 50%, var(--xp-color-coral) 100%);
  z-index: 10;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  animation: .4s cubic-bezier(.34, 1.56, .64, 1) harmonia-levelup-pop;
  display: flex;
  position: absolute;
  inset: -24px;
  box-shadow: 0 8px 32px #2ed6c566, 0 0 0 4px #ffffff1a;
}

@keyframes harmonia-levelup-pop {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  50% {
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.harmonia-xp-progress__levelup:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #ffffff4d 0, #0000 40%), radial-gradient(circle at 70% 70%, #ffffff26 0, #0000 30%);
  border-radius: 24px;
  position: absolute;
  inset: 0;
}

.harmonia-xp-progress__levelup-content {
  align-items: center;
  gap: var(--spacing-2, .5rem);
  z-index: 1;
  flex-direction: column;
  display: flex;
  position: relative;
}

.harmonia-xp-progress__levelup-star {
  filter: drop-shadow(0 4px 8px #0003);
  font-size: 3rem;
  animation: .6s cubic-bezier(.68, -.55, .265, 1.55) harmonia-star-spin;
}

@keyframes harmonia-star-spin {
  0% {
    transform: scale(0)rotate(-180deg);
  }

  to {
    transform: scale(1)rotate(0);
  }
}

.harmonia-xp-progress__levelup-text {
  color: #fff;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-shadow: 0 2px 4px #0003;
  font-size: 1.5rem;
  font-weight: 700;
}

.harmonia-xp-progress__confetti {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.harmonia-xp-progress__confetti-particle {
  border-radius: 4px;
  width: 8px;
  height: 8px;
  position: absolute;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__level {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__level:before {
  inset: -2px;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__level-number {
  font-size: 1rem;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__level-label {
  display: none;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__bar {
  height: 10px;
}

.harmonia-xp-progress--sm .harmonia-xp-progress__next {
  width: 28px;
  height: 28px;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__level {
  min-width: 72px;
  height: 72px;
  padding: 0 16px;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__level:before {
  inset: -4px;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__level-number {
  font-size: 1.875rem;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__bar {
  height: 18px;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__next {
  width: 48px;
  height: 48px;
}

.harmonia-xp-progress--lg .harmonia-xp-progress__next-number {
  font-size: 1.125rem;
}

.harmonia-xp-progress--compact {
  padding: 0;
}

.harmonia-xp-progress--compact .harmonia-xp-progress__bar {
  height: 8px;
}

.harmonia-xp-progress--compact .harmonia-xp-progress__fill:before {
  height: 2px;
}

:root.dark .harmonia-xp-progress, [data-theme="dark"] .harmonia-xp-progress {
  --xp-bg-bar: var(--color-neutral-700, #374151);
  --xp-bg-next: var(--color-neutral-700, #374151);
  --xp-border-color: var(--color-neutral-500, #6b7280);
  --xp-text-tertiary: var(--color-neutral-400, #9ca3af);
  --xp-focus-ring: #039de366;
  --xp-level-glow: #2ed6c566;
}

:root.dark .harmonia-xp-progress__bar, [data-theme="dark"] .harmonia-xp-progress__bar {
  box-shadow: inset 0 1px 3px #0000004d;
}

:root.dark .harmonia-xp-progress__level, [data-theme="dark"] .harmonia-xp-progress__level {
  box-shadow: 0 4px 12px #0006, inset 0 1px #ffffff1a;
}

:root.dark .harmonia-xp-progress__shimmer, [data-theme="dark"] .harmonia-xp-progress__shimmer {
  background: linear-gradient(90deg, #0000, #fff3 50%, #0000);
}

:root.dark .harmonia-xp-progress__levelup, [data-theme="dark"] .harmonia-xp-progress__levelup {
  box-shadow: 0 8px 32px #00000080, 0 0 0 4px #ffffff0d;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-xp-progress {
    --xp-transition: 0s;
    --xp-transition-fill: 0s;
  }

  .harmonia-xp-progress__gain, .harmonia-xp-progress__levelup, .harmonia-xp-progress__levelup-star, .harmonia-xp-progress__shimmer {
    animation: none;
  }

  .harmonia-xp-progress__fill, .harmonia-xp-progress__level, .harmonia-xp-progress__next {
    transition: none;
  }

  .harmonia-xp-progress__confetti-particle {
    display: none;
  }

  .harmonia-xp-progress__gain {
    opacity: 1;
    transform: translateY(-20px);
  }

  .harmonia-xp-progress__levelup {
    opacity: 1;
    transform: scale(1);
  }

  .harmonia-xp-progress__levelup-star {
    transform: scale(1)rotate(0);
  }
}

@media (prefers-contrast: high) {
  .harmonia-xp-progress__bar {
    border: 2px solid var(--xp-text-primary);
    height: 18px;
  }

  .harmonia-xp-progress__fill {
    box-shadow: none;
  }

  .harmonia-xp-progress__level {
    border: 3px solid #fff;
  }

  .harmonia-xp-progress__level:before {
    opacity: 1;
    border-width: 3px;
  }

  .harmonia-xp-progress__level:focus-visible {
    box-shadow: 0 0 0 4px var(--xp-color-primary);
  }

  .harmonia-xp-progress__next {
    border-style: solid;
    border-width: 3px;
  }

  .harmonia-xp-progress__next:focus-visible {
    box-shadow: 0 0 0 4px var(--xp-color-primary);
  }

  .harmonia-xp-progress__numbers {
    font-weight: 700;
  }

  .harmonia-xp-progress__levelup {
    border: 4px solid #fff;
  }
}

.harmonia-flashcard {
  perspective: 1000px;
  width: 100%;
  max-width: 400px;
  position: relative;
}

.harmonia-flashcard__progress {
  z-index: 5;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.harmonia-flashcard__progress-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.harmonia-flashcard__indicator {
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-bold);
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-3);
  z-index: 10;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.harmonia-flashcard__indicator--right {
  background: var(--color-success-100);
  color: var(--color-success-700);
  right: -80px;
}

.harmonia-flashcard__indicator--left {
  background: var(--color-error-100);
  color: var(--color-error-700);
  left: -80px;
}

.harmonia-flashcard__indicator span:first-child {
  font-size: 1.5rem;
}

.harmonia-flashcard__indicator span:last-child {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.harmonia-flashcard__container {
  aspect-ratio: 3 / 4;
  cursor: grab;
  width: 100%;
}

.harmonia-flashcard--dragging .harmonia-flashcard__container {
  cursor: grabbing;
}

.harmonia-flashcard__inner {
  height: 100%;
  transform-style: preserve-3d;
  width: 100%;
  position: relative;
}

.harmonia-flashcard__face {
  -webkit-tap-highlight-color: transparent;
  backface-visibility: hidden;
  background: var(--color-background-primary);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--elevation-3);
  cursor: pointer;
  padding: var(--spacing-6);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.harmonia-flashcard__front {
  background: linear-gradient(135deg, var(--color-primary-50) 0, var(--color-background-primary) 100%);
}

.harmonia-flashcard__back {
  background: linear-gradient(135deg, var(--color-secondary-50) 0, var(--color-background-primary) 100%);
  transform: rotateY(180deg);
}

.harmonia-flashcard__content {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  text-align: center;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  overflow: auto;
}

.harmonia-flashcard__hint, .harmonia-flashcard__swipe-hint {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-top: auto;
}

.harmonia-flashcard__difficulty {
  gap: var(--spacing-2);
  padding-top: var(--spacing-4);
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: auto;
  display: grid;
}

.harmonia-flashcard__difficulty-btn {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-height: var(--touch-target-minimum);
  padding: var(--spacing-2) var(--spacing-1);
  transition: all var(--duration-fast) var(--easing-ease);
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-flashcard__difficulty-btn--again {
  background: var(--color-error-100);
  color: var(--color-error-700);
}

.harmonia-flashcard__difficulty-btn--again:active {
  background: var(--color-error-200);
}

.harmonia-flashcard__difficulty-btn--hard {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.harmonia-flashcard__difficulty-btn--hard:active {
  background: var(--color-warning-200);
}

.harmonia-flashcard__difficulty-btn--medium {
  background: var(--color-info-100);
  color: var(--color-info-700);
}

.harmonia-flashcard__difficulty-btn--medium:active {
  background: var(--color-info-200);
}

.harmonia-flashcard__difficulty-btn--easy {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.harmonia-flashcard__difficulty-btn--easy:active {
  background: var(--color-success-200);
}

.harmonia-flashcard--disabled {
  opacity: .6;
  pointer-events: none;
}

:root.dark .harmonia-flashcard__face, [data-theme="dark"] .harmonia-flashcard__face {
  background: var(--color-background-secondary);
  border-color: var(--color-border-default);
}

:root.dark .harmonia-flashcard__front, [data-theme="dark"] .harmonia-flashcard__front {
  background: linear-gradient(135deg, var(--color-primary-100) 0, var(--color-background-secondary) 100%);
}

:root.dark .harmonia-flashcard__back, [data-theme="dark"] .harmonia-flashcard__back {
  background: linear-gradient(135deg, var(--color-secondary-100) 0, var(--color-background-secondary) 100%);
}

@media (max-width: 480px) {
  .harmonia-flashcard__indicator {
    display: none;
  }

  .harmonia-flashcard__difficulty {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.harmonia-quiz {
  gap: var(--spacing-4);
  flex-direction: column;
  display: flex;
  position: relative;
}

.harmonia-quiz__progress {
  gap: var(--spacing-1);
  flex-direction: column;
  display: flex;
}

.harmonia-quiz__progress-bar {
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  height: 4px;
  overflow: hidden;
}

.harmonia-quiz__progress-fill {
  background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-500));
  border-radius: var(--radius-full);
  height: 100%;
}

.harmonia-quiz__progress-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.harmonia-quiz__question {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-quiz__question-text {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin: 0;
}

.harmonia-quiz__hint-toggle {
  -webkit-tap-highlight-color: transparent;
  color: var(--color-primary-500);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--spacing-1) 0;
  background: none;
  border: none;
  align-self: flex-start;
}

.harmonia-quiz__hint {
  background: var(--color-info-50);
  border-radius: var(--radius-lg);
  color: var(--color-info-700);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  padding: var(--spacing-3);
}

.harmonia-quiz__options {
  gap: var(--spacing-2);
  flex-direction: column;
  display: flex;
}

.harmonia-quiz__option {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-background-primary);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-4);
  text-align: left;
  transition: all var(--duration-fast) var(--easing-ease);
  display: flex;
}

.harmonia-quiz__option:hover:not(:disabled) {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
}

.harmonia-quiz__option--selected {
  background: var(--color-primary-50);
  border-color: var(--color-primary-500);
}

.harmonia-quiz__option--correct {
  background: var(--color-success-50);
  border-color: var(--color-success-500);
}

.harmonia-quiz__option--incorrect {
  background: var(--color-error-50);
  border-color: var(--color-error-500);
}

.harmonia-quiz__option:disabled {
  cursor: default;
}

.harmonia-quiz__option-indicator {
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.harmonia-quiz__option--selected .harmonia-quiz__option-indicator {
  background: var(--color-primary-500);
  color: #fff;
}

.harmonia-quiz__option--correct .harmonia-quiz__option-indicator {
  background: var(--color-success-500);
  color: #fff;
}

.harmonia-quiz__option--incorrect .harmonia-quiz__option-indicator {
  background: var(--color-error-500);
  color: #fff;
}

.harmonia-quiz__option-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.harmonia-quiz__submit {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-primary-500);
  border-radius: var(--radius-xl);
  color: #fff;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-4);
  transition: all var(--duration-fast) var(--easing-ease);
  border: none;
}

.harmonia-quiz__submit:hover:not(:disabled) {
  background: var(--color-primary-600);
}

.harmonia-quiz__submit:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.harmonia-quiz__feedback {
  border-radius: var(--radius-xl);
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  flex-direction: column;
  display: flex;
}

.harmonia-quiz__feedback--correct {
  background: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.harmonia-quiz__feedback--incorrect {
  background: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.harmonia-quiz__feedback-header {
  align-items: center;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-quiz__feedback-icon {
  font-size: 1.5rem;
}

.harmonia-quiz__feedback-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.harmonia-quiz__explanation {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.harmonia-quiz__actions {
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-quiz__retry {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.harmonia-quiz__continue, .harmonia-quiz__retry {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  font-size: var(--font-size-sm);
  min-height: var(--touch-target-minimum);
  min-width: 120px;
  padding: var(--spacing-3);
  flex: 1;
}

.harmonia-quiz__continue {
  background: var(--color-primary-500);
  border-radius: var(--radius-lg);
  color: #fff;
  font-weight: var(--font-weight-semibold);
  border: none;
}

.harmonia-quiz__continue:hover {
  background: var(--color-primary-600);
}

.harmonia-quiz__celebration {
  pointer-events: none;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.harmonia-quiz__particle {
  border-radius: var(--radius-sm);
  width: 8px;
  height: 8px;
  position: absolute;
}

:root.dark .harmonia-quiz__option, [data-theme="dark"] .harmonia-quiz__option {
  background: var(--color-background-secondary);
  border-color: var(--color-border-default);
}

:root.dark .harmonia-quiz__option:hover:not(:disabled), [data-theme="dark"] .harmonia-quiz__option:hover:not(:disabled) {
  background: var(--color-primary-100);
  border-color: var(--color-primary-400);
}

:root.dark .harmonia-quiz__progress-bar, [data-theme="dark"] .harmonia-quiz__progress-bar {
  background: var(--color-neutral-300);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-quiz__particle {
    display: none;
  }
}

.harmonia-learning-path {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.harmonia-learning-path--horizontal {
  padding-bottom: var(--spacing-4);
  flex-direction: row;
  overflow-x: auto;
}

.harmonia-learning-path__item {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.harmonia-learning-path--horizontal .harmonia-learning-path__item {
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
}

.harmonia-learning-path__connector {
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  width: 4px;
  height: calc(100% - 48px);
  position: absolute;
  top: 48px;
  left: 24px;
  overflow: hidden;
}

.harmonia-learning-path--horizontal .harmonia-learning-path__connector {
  width: 40px;
  height: 4px;
  top: 50%;
  left: auto;
  right: -20px;
  transform: translateY(-50%);
}

.harmonia-learning-path__connector-fill {
  background: linear-gradient(to bottom, var(--color-success-400), var(--color-success-500));
  transform-origin: top;
  width: 100%;
  height: 100%;
}

.harmonia-learning-path--horizontal .harmonia-learning-path__connector-fill {
  transform-origin: 0;
}

.harmonia-learning-path__connector--completed .harmonia-learning-path__connector-fill {
  transform: scaleY(1) !important;
}

.harmonia-learning-path__node {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-xl);
  cursor: pointer;
  align-items: flex-start;
  gap: var(--spacing-3);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-3);
  text-align: left;
  transition: background-color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  width: 100%;
  display: flex;
}

.harmonia-learning-path__node:hover:not(:disabled) {
  background: var(--color-neutral-100);
}

.harmonia-learning-path__node:disabled {
  cursor: not-allowed;
  opacity: .7;
}

.harmonia-learning-path--horizontal .harmonia-learning-path__node {
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 120px;
}

.harmonia-learning-path__node-icon {
  border-radius: var(--radius-full);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  display: flex;
  position: relative;
}

.harmonia-learning-path__node--locked .harmonia-learning-path__node-icon {
  background: var(--color-neutral-200);
  color: var(--color-text-disabled);
}

.harmonia-learning-path__node--available .harmonia-learning-path__node-icon {
  background: var(--color-primary-100);
  border: 2px solid var(--color-primary-300);
  color: var(--color-primary-600);
}

.harmonia-learning-path__node--current .harmonia-learning-path__node-icon {
  background: var(--color-primary-500);
  box-shadow: 0 0 0 4px var(--color-primary-200);
  color: #fff;
}

.harmonia-learning-path__node--completed .harmonia-learning-path__node-icon {
  background: var(--color-success-500);
  color: #fff;
}

.harmonia-learning-path__pulse {
  background: var(--color-primary-400);
  border-radius: var(--radius-full);
  position: absolute;
  inset: 0;
}

.harmonia-learning-path__node-status {
  z-index: 1;
  position: relative;
}

.harmonia-learning-path__node-content {
  gap: var(--spacing-1);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.harmonia-learning-path__node-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin: 0;
}

.harmonia-learning-path__node--locked .harmonia-learning-path__node-title {
  color: var(--color-text-disabled);
}

.harmonia-learning-path__node-description {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0;
}

.harmonia-learning-path__node-meta {
  gap: var(--spacing-3);
  margin-top: var(--spacing-1);
  display: flex;
}

.harmonia-learning-path__xp {
  color: var(--color-warning-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.harmonia-learning-path__duration {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

:root.dark .harmonia-learning-path__connector, [data-theme="dark"] .harmonia-learning-path__connector {
  background: var(--color-neutral-300);
}

:root.dark .harmonia-learning-path__node:hover:not(:disabled), [data-theme="dark"] .harmonia-learning-path__node:hover:not(:disabled) {
  background: var(--color-neutral-200);
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-learning-path__pulse {
    display: none;
  }
}

.harmonia-micro-lesson {
  -webkit-tap-highlight-color: transparent;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  cursor: pointer;
  align-items: stretch;
  gap: var(--spacing-3);
  min-height: var(--touch-target-comfortable);
  padding: var(--spacing-3);
  text-align: left;
  transition: all var(--duration-fast) var(--easing-ease);
  width: 100%;
  display: flex;
}

.harmonia-micro-lesson:hover:not(:disabled) {
  border-color: var(--color-primary-300);
  box-shadow: var(--elevation-2);
}

.harmonia-micro-lesson:disabled {
  cursor: not-allowed;
}

.harmonia-micro-lesson--locked {
  background: var(--color-neutral-100);
  opacity: .7;
}

.harmonia-micro-lesson--completed {
  background: var(--color-success-50);
  border-color: var(--color-success-200);
}

.harmonia-micro-lesson__thumbnail {
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
}

.harmonia-micro-lesson__thumbnail img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.harmonia-micro-lesson__thumbnail-progress {
  background: #0000004d;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.harmonia-micro-lesson__thumbnail-progress-fill {
  background: var(--color-primary-500);
  height: 100%;
}

.harmonia-micro-lesson__content {
  gap: var(--spacing-1);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.harmonia-micro-lesson__badges {
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-micro-lesson__type {
  background: var(--color-primary-100);
  border-radius: var(--radius-full);
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-0-5) var(--spacing-2);
  display: inline-flex;
}

.harmonia-micro-lesson__type-icon {
  font-size: .75rem;
}

.harmonia-micro-lesson__duration {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.harmonia-micro-lesson__title {
  -webkit-line-clamp: 2;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
}

.harmonia-micro-lesson--locked .harmonia-micro-lesson__title {
  color: var(--color-text-disabled);
}

.harmonia-micro-lesson__description {
  -webkit-line-clamp: 1;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
}

.harmonia-micro-lesson__footer {
  align-items: center;
  gap: var(--spacing-2);
  margin-top: auto;
  display: flex;
}

.harmonia-micro-lesson__progress {
  align-items: center;
  gap: var(--spacing-2);
  flex: 1;
  display: flex;
}

.harmonia-micro-lesson__progress-bar {
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  flex: 1;
  height: 4px;
  overflow: hidden;
}

.harmonia-micro-lesson__progress-fill {
  background: var(--color-primary-500);
  border-radius: var(--radius-full);
  height: 100%;
}

.harmonia-micro-lesson__progress-text {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  min-width: 32px;
}

.harmonia-micro-lesson__completed {
  color: var(--color-success-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.harmonia-micro-lesson__locked {
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
}

.harmonia-micro-lesson__xp {
  color: var(--color-warning-600);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-left: auto;
}

.harmonia-micro-lesson__arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

:root.dark .harmonia-micro-lesson, [data-theme="dark"] .harmonia-micro-lesson {
  background: var(--color-background-secondary);
}

:root.dark .harmonia-micro-lesson--locked, [data-theme="dark"] .harmonia-micro-lesson--locked {
  background: var(--color-neutral-200);
}

:root.dark .harmonia-micro-lesson--completed, [data-theme="dark"] .harmonia-micro-lesson--completed {
  background: #10b9811a;
}

@media (max-width: 374px) {
  .harmonia-micro-lesson__thumbnail {
    width: 60px;
    height: 60px;
  }
}

.harmonia-leaderboard {
  --leaderboard-color-primary: #039de3;
  --leaderboard-color-success: #2ed6c5;
  --leaderboard-color-error: #ff5a6a;
  --leaderboard-color-gold: #f6cd01;
  --leaderboard-color-silver: #9ca3af;
  --leaderboard-color-bronze: #d97706;
  --leaderboard-color-navy: #070433;
  --leaderboard-focus-ring: #039de34d;
  --leaderboard-bg-primary: var(--color-background-primary, #fff);
  --leaderboard-bg-secondary: var(--color-neutral-100, #f5f6f7);
  --leaderboard-bg-hover: var(--color-neutral-100, #f5f6f7);
  --leaderboard-bg-current: #039de314;
  --leaderboard-text-primary: var(--color-text-primary, #070433);
  --leaderboard-text-secondary: var(--color-text-secondary, #6b7280);
  --leaderboard-text-tertiary: var(--color-text-tertiary, #9ca3af);
  --leaderboard-border-color: var(--color-border-default, #e5e7eb);
  --leaderboard-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --leaderboard-transition-fast: .15s ease-out;
  background: var(--leaderboard-bg-primary);
  border-radius: var(--radius-2xl, 1rem);
  gap: var(--spacing-4, 1rem);
  padding: var(--spacing-4, 1rem);
  flex-direction: column;
  display: flex;
}

.harmonia-leaderboard__header {
  gap: var(--spacing-3, .75rem);
  flex-direction: column;
  display: flex;
}

.harmonia-leaderboard__title {
  color: var(--leaderboard-text-primary);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  margin: 0;
}

.harmonia-leaderboard__filters {
  background: var(--leaderboard-bg-secondary);
  border-radius: var(--radius-lg, .5rem);
  gap: var(--spacing-1, .25rem);
  padding: var(--spacing-1, .25rem);
  display: flex;
}

.harmonia-leaderboard__filter {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-md, .375rem);
  color: var(--leaderboard-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm, .875rem);
  min-height: 44px;
  padding: var(--spacing-2, .5rem);
  transition: background-color var(--leaderboard-transition-fast), color var(--leaderboard-transition-fast);
  background: none;
  border: none;
  flex: 1;
}

.harmonia-leaderboard__filter:hover {
  color: var(--leaderboard-text-primary);
}

.harmonia-leaderboard__filter:focus-visible {
  box-shadow: 0 0 0 3px var(--leaderboard-focus-ring);
  color: var(--leaderboard-color-primary);
  outline: none;
}

.harmonia-leaderboard__filter--active {
  background: var(--leaderboard-bg-primary);
  box-shadow: var(--elevation-1, 0 1px 3px #0000001a);
  color: var(--leaderboard-text-primary);
  font-weight: var(--font-weight-semibold, 600);
}

.harmonia-leaderboard__podium {
  align-items: flex-end;
  gap: var(--spacing-2, .5rem);
  padding: var(--spacing-4, 1rem) 0;
  justify-content: center;
  display: flex;
}

.harmonia-leaderboard__podium-item {
  background: var(--leaderboard-bg-secondary);
  border-radius: var(--radius-xl, .75rem);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-1, .25rem);
  padding: var(--spacing-3, .75rem);
  transition: transform var(--leaderboard-transition), border-color var(--leaderboard-transition-fast);
  border: 2px solid #0000;
  flex-direction: column;
  display: flex;
  position: relative;
}

.harmonia-leaderboard__podium-item:hover {
  transform: translateY(-2px);
}

.harmonia-leaderboard__podium-item:focus-visible {
  border-color: var(--leaderboard-color-primary);
  box-shadow: 0 0 0 3px var(--leaderboard-focus-ring);
  outline: none;
}

.harmonia-leaderboard__podium-item--1 {
  border-color: var(--leaderboard-color-gold);
  padding: var(--spacing-4, 1rem);
  background: linear-gradient(135deg, #f6cd0126, #f6cd010d);
  order: 2;
}

.harmonia-leaderboard__podium-item--2 {
  border-color: var(--leaderboard-color-silver);
  order: 1;
}

.harmonia-leaderboard__podium-item--3 {
  border-color: var(--leaderboard-color-bronze);
  order: 3;
}

.harmonia-leaderboard__podium-crown {
  font-size: 1.5rem;
  position: absolute;
  top: -20px;
}

.harmonia-leaderboard__podium-avatar {
  background: var(--leaderboard-bg-secondary);
  border-radius: var(--radius-full, 9999px);
  color: var(--leaderboard-color-primary);
  font-weight: var(--font-weight-bold, 700);
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  overflow: hidden;
}

.harmonia-leaderboard__podium-avatar--winner {
  border: 3px solid var(--leaderboard-color-gold);
  width: 64px;
  height: 64px;
}

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

.harmonia-leaderboard__podium-rank {
  font-size: 1.25rem;
}

.harmonia-leaderboard__podium-name {
  color: var(--leaderboard-text-primary);
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-semibold, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
}

.harmonia-leaderboard__podium-score {
  color: var(--leaderboard-text-tertiary);
  font-size: var(--font-size-xs, .75rem);
}

.harmonia-leaderboard__list {
  gap: var(--spacing-1, .25rem);
  flex-direction: column;
  display: flex;
}

.harmonia-leaderboard__item {
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-lg, .5rem);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3, .75rem);
  min-height: 48px;
  padding: var(--spacing-3, .75rem);
  text-align: left;
  transition: background-color var(--leaderboard-transition-fast), box-shadow var(--leaderboard-transition-fast);
  background: none;
  border: none;
  width: 100%;
  display: flex;
}

.harmonia-leaderboard__item:hover {
  background: var(--leaderboard-bg-hover);
}

.harmonia-leaderboard__item:focus-visible {
  background: var(--leaderboard-bg-hover);
  box-shadow: inset 0 0 0 3px var(--leaderboard-focus-ring);
  outline: none;
}

.harmonia-leaderboard__item--current {
  background: var(--leaderboard-bg-current);
  border: 1px solid #039de333;
}

.harmonia-leaderboard__item--current:focus-visible {
  border-color: var(--leaderboard-color-primary);
}

.harmonia-leaderboard__rank {
  color: var(--leaderboard-text-secondary);
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  width: 40px;
}

.harmonia-leaderboard__avatar {
  border-radius: var(--radius-full, 9999px);
  color: var(--leaderboard-color-primary);
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-bold, 700);
  background: #039de31a;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  overflow: hidden;
}

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

.harmonia-leaderboard__info {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.harmonia-leaderboard__name {
  color: var(--leaderboard-text-primary);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.harmonia-leaderboard__you {
  color: var(--leaderboard-color-primary);
  font-size: var(--font-size-xs, .75rem);
  font-weight: var(--font-weight-normal, 400);
  margin-left: var(--spacing-1, .25rem);
}

.harmonia-leaderboard__level {
  color: var(--leaderboard-text-tertiary);
  font-size: var(--font-size-xs, .75rem);
}

.harmonia-leaderboard__score-section {
  align-items: center;
  gap: var(--spacing-1, .25rem);
  display: flex;
}

.harmonia-leaderboard__change {
  font-size: .625rem;
}

.harmonia-leaderboard__change--up {
  color: var(--leaderboard-color-success);
}

.harmonia-leaderboard__change--down {
  color: var(--leaderboard-color-error);
}

.harmonia-leaderboard__score {
  color: var(--leaderboard-text-primary);
  font-size: var(--font-size-sm, .875rem);
  font-weight: var(--font-weight-semibold, 600);
  white-space: nowrap;
}

.harmonia-leaderboard__current-user {
  background: var(--leaderboard-color-primary);
  border-radius: var(--radius-lg, .5rem);
  color: #fff;
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-3, .75rem);
  margin-top: var(--spacing-2, .5rem);
  min-height: 48px;
  padding: var(--spacing-3, .75rem);
  transition: background-color var(--leaderboard-transition-fast);
  border: none;
  width: 100%;
  display: flex;
}

.harmonia-leaderboard__current-user:hover {
  background: #0285c7;
}

.harmonia-leaderboard__current-user:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffffff80;
}

.harmonia-leaderboard__current-user .harmonia-leaderboard__name, .harmonia-leaderboard__current-user .harmonia-leaderboard__rank, .harmonia-leaderboard__current-user .harmonia-leaderboard__score {
  color: #fff;
}

.harmonia-leaderboard__current-user .harmonia-leaderboard__level {
  color: #fffc;
}

.harmonia-leaderboard__current-user .harmonia-leaderboard__avatar {
  color: #fff;
  background: #fff3;
}

:root.dark .harmonia-leaderboard, [data-theme="dark"] .harmonia-leaderboard {
  --leaderboard-bg-primary: var(--surface-1, #1a1a2e);
  --leaderboard-bg-secondary: #ffffff0f;
  --leaderboard-bg-hover: #ffffff14;
  --leaderboard-bg-current: #039de326;
  --leaderboard-text-primary: var(--color-text-primary-dark, #f9fafb);
  --leaderboard-text-secondary: var(--color-text-secondary-dark, #9ca3af);
  --leaderboard-text-tertiary: var(--color-text-tertiary-dark, #6b7280);
  --leaderboard-border-color: #ffffff26;
  --leaderboard-focus-ring: #039de366;
}

:root.dark .harmonia-leaderboard__filter--active, [data-theme="dark"] .harmonia-leaderboard__filter--active {
  background: var(--leaderboard-bg-primary);
  box-shadow: 0 1px 3px #0000004d;
}

:root.dark .harmonia-leaderboard__podium-item--1, [data-theme="dark"] .harmonia-leaderboard__podium-item--1 {
  background: linear-gradient(135deg, #f6cd0133, #f6cd011a);
}

:root.dark .harmonia-leaderboard__avatar, [data-theme="dark"] .harmonia-leaderboard__avatar {
  background: #039de333;
}

:root.dark .harmonia-leaderboard__current-user:focus-visible, [data-theme="dark"] .harmonia-leaderboard__current-user:focus-visible {
  box-shadow: 0 0 0 3px #fff9;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-leaderboard {
    --leaderboard-transition: 0s;
    --leaderboard-transition-fast: 0s;
  }

  .harmonia-leaderboard__current-user, .harmonia-leaderboard__filter, .harmonia-leaderboard__item, .harmonia-leaderboard__podium-item {
    transition: none;
  }

  .harmonia-leaderboard__podium-item:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .harmonia-leaderboard {
    border: 2px solid var(--leaderboard-text-primary);
  }

  .harmonia-leaderboard__filters {
    border: 2px solid var(--leaderboard-border-color);
  }

  .harmonia-leaderboard__filter:focus-visible {
    box-shadow: 0 0 0 4px var(--leaderboard-color-primary);
  }

  .harmonia-leaderboard__filter--active {
    border: 2px solid var(--leaderboard-text-primary);
  }

  .harmonia-leaderboard__podium-item {
    border-width: 3px;
  }

  .harmonia-leaderboard__podium-item:focus-visible {
    box-shadow: 0 0 0 4px var(--leaderboard-color-primary);
  }

  .harmonia-leaderboard__podium-avatar--winner {
    border-width: 4px;
  }

  .harmonia-leaderboard__item {
    border: 2px solid #0000;
  }

  .harmonia-leaderboard__item:focus-visible {
    border-color: var(--leaderboard-color-primary);
    box-shadow: 0 0 0 4px var(--leaderboard-color-primary);
  }

  .harmonia-leaderboard__item--current {
    border-color: var(--leaderboard-color-primary);
    border-width: 2px;
  }

  .harmonia-leaderboard__current-user {
    border: 3px solid #fff;
  }

  .harmonia-leaderboard__current-user:focus-visible {
    box-shadow: 0 0 0 4px #fff;
  }

  .harmonia-leaderboard__name, .harmonia-leaderboard__score {
    font-weight: var(--font-weight-bold, 700);
  }
}

.harmonia-achievement {
  --achievement-color-primary: #039de3;
  --achievement-color-success: #2ed6c5;
  --achievement-color-epic: #ff5a6a;
  --achievement-color-legendary: #f6cd01;
  --achievement-color-navy: #070433;
  --badge-bg: linear-gradient(135deg, #f5f6f7, #e8eaec);
  --badge-border: #d1d5d9;
  --badge-glow: #2ed6c54d;
  --achievement-focus-ring: #039de34d;
  --achievement-bg-tooltip: var(--color-neutral-50, #fafbfc);
  --achievement-border-tooltip: var(--color-border-light, #e8eaec);
  --achievement-text-primary: var(--color-text-primary, #111827);
  --achievement-text-secondary: var(--color-text-secondary, #374151);
  --achievement-text-tertiary: var(--color-text-tertiary, #6b7280);
  --achievement-text-disabled: var(--color-text-disabled, #a8aeb4);
  --achievement-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  align-items: center;
  gap: var(--spacing-3, .75rem);
  flex-direction: column;
  display: flex;
  position: relative;
}

.harmonia-achievement__badge {
  -webkit-tap-highlight-color: transparent;
  background: var(--badge-bg);
  border: 3px solid var(--badge-border);
  cursor: pointer;
  transition: transform var(--achievement-transition), box-shadow var(--achievement-transition);
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #2d323814;
}

.harmonia-achievement__badge:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px #2d32381f;
}

.harmonia-achievement__badge:active {
  transform: scale(.95);
}

.harmonia-achievement__badge:focus-visible {
  box-shadow: 0 4px 12px #2d323814, 0 0 0 3px var(--achievement-focus-ring);
  outline: none;
}

.harmonia-achievement--sm .harmonia-achievement__badge {
  width: 52px;
  height: 52px;
}

.harmonia-achievement--md .harmonia-achievement__badge {
  width: 72px;
  height: 72px;
}

.harmonia-achievement--lg .harmonia-achievement__badge {
  width: 96px;
  height: 96px;
}

.harmonia-achievement--unlocked .harmonia-achievement__badge {
  --badge-bg: linear-gradient(135deg, var(--achievement-color-success) 0%, var(--achievement-color-primary) 50%, var(--achievement-color-epic) 100%);
  --badge-border: var(--achievement-color-success);
  box-shadow: 0 6px 20px #2ed6c54d, inset 0 2px #fff3;
}

.harmonia-achievement--unlocked .harmonia-achievement__badge:focus-visible {
  box-shadow: 0 6px 20px #2ed6c54d, inset 0 2px 0 #fff3, 0 0 0 3px var(--achievement-focus-ring);
}

.harmonia-achievement__glow {
  background: radial-gradient(circle, var(--badge-glow) 0, transparent 70%);
  opacity: 0;
  pointer-events: none;
  border-radius: 9999px;
  transition: opacity .3s;
  position: absolute;
  inset: -12px;
}

.harmonia-achievement--unlocked .harmonia-achievement__glow {
  opacity: 1;
  animation: 2s ease-in-out infinite harmonia-achievement-glow;
}

@keyframes harmonia-achievement-glow {
  0%, to {
    opacity: .6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.harmonia-achievement__icon {
  color: #fff;
  filter: drop-shadow(0 2px 4px #00000026);
  z-index: 1;
  position: relative;
}

.harmonia-achievement--sm .harmonia-achievement__icon {
  font-size: 1.5rem;
}

.harmonia-achievement--md .harmonia-achievement__icon {
  font-size: 2rem;
}

.harmonia-achievement--lg .harmonia-achievement__icon {
  font-size: 3rem;
}

.harmonia-achievement__icon--locked {
  color: var(--achievement-text-tertiary);
  filter: grayscale();
  opacity: .4;
}

.harmonia-achievement__progress {
  position: absolute;
  inset: -5px;
  transform: rotate(-90deg);
}

.harmonia-achievement__progress-bg {
  fill: none;
  stroke: var(--color-neutral-200, #e8eaec);
  stroke-width: 4px;
}

.harmonia-achievement__progress-fill {
  fill: none;
  stroke: var(--achievement-color-epic);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray: 283;
  transition: stroke-dashoffset .5s cubic-bezier(.34, 1.56, .64, 1);
}

.harmonia-achievement__new {
  background: linear-gradient(135deg, var(--achievement-color-epic) 0, #d84a5a 100%);
  color: #fff;
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: .625rem;
  font-weight: 700;
  animation: 1.5s ease-in-out infinite harmonia-badge-pulse;
  position: absolute;
  top: -6px;
  right: -6px;
  box-shadow: 0 2px 8px #ff5a6a66;
}

@keyframes harmonia-badge-pulse {
  0%, to {
    transform: scale(1);
    box-shadow: 0 2px 8px #ff5a6a66;
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 4px 12px #ff5a6a99;
  }
}

.harmonia-achievement__name {
  color: var(--achievement-text-secondary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
  font-size: .875rem;
  font-weight: 500;
  overflow: hidden;
}

.harmonia-achievement--unlocked .harmonia-achievement__name {
  color: var(--achievement-text-primary);
  font-weight: 600;
}

.harmonia-achievement--locked .harmonia-achievement__name {
  color: var(--achievement-text-disabled);
}

.harmonia-achievement__unlock-overlay {
  pointer-events: none;
  z-index: 10;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.harmonia-achievement__unlock-badge {
  animation: .6s cubic-bezier(.68, -.55, .265, 1.55) harmonia-unlock-pop;
}

@keyframes harmonia-unlock-pop {
  0% {
    opacity: 0;
    transform: scale(0)rotate(-180deg);
  }

  50% {
    transform: scale(1.2)rotate(10deg);
  }

  to {
    opacity: 1;
    transform: scale(1)rotate(0);
  }
}

.harmonia-achievement__confetti {
  border-radius: 2px;
  width: 8px;
  height: 8px;
  position: absolute;
}

.harmonia-achievement__details {
  background: var(--achievement-bg-tooltip);
  border: 1px solid var(--achievement-border-tooltip);
  margin-top: var(--spacing-3, .75rem);
  min-width: 220px;
  max-width: 300px;
  padding: var(--spacing-4, 1rem);
  z-index: 100;
  border-radius: 16px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 12px 32px #2d323826;
}

.harmonia-achievement__details:before {
  background: var(--achievement-bg-tooltip);
  border-left: 1px solid var(--achievement-border-tooltip);
  border-top: 1px solid var(--achievement-border-tooltip);
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%)rotate(45deg);
}

.harmonia-achievement__details-name {
  color: var(--achievement-color-primary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  margin: 0 0 var(--spacing-2, .5rem);
  font-size: 1.125rem;
  font-weight: 700;
}

.harmonia-achievement__details-description {
  color: var(--achievement-text-secondary);
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  margin: 0 0 var(--spacing-3, .75rem);
  font-size: .875rem;
  line-height: 1.6;
}

.harmonia-achievement__details-meta {
  font-family: var(--font-family-primary, "DM Sans", sans-serif);
  gap: var(--spacing-2, .5rem);
  flex-wrap: wrap;
  font-size: .75rem;
  display: flex;
}

.harmonia-achievement__rarity {
  letter-spacing: .05em;
  padding: var(--spacing-1, .25rem) var(--spacing-2, .5rem);
  text-transform: uppercase;
  border-radius: 9999px;
  font-weight: 600;
}

.harmonia-achievement__rarity--common {
  background: var(--color-neutral-100, #f5f6f7);
  color: var(--color-neutral-600, #4b5563);
}

.harmonia-achievement__rarity--rare {
  color: var(--achievement-color-primary);
  background: #039de31a;
  border: 1px solid #039de34d;
}

.harmonia-achievement__rarity--epic {
  color: var(--achievement-color-epic);
  background: #ff5a6a1a;
  border: 1px solid #ff5a6a4d;
}

.harmonia-achievement__rarity--legendary {
  color: #b59700;
  background: #f6cd0126;
  border: 1px solid #f6cd0166;
  box-shadow: 0 0 8px #f6cd014d;
}

.harmonia-achievement__date, .harmonia-achievement__progress-text {
  color: var(--achievement-text-tertiary);
}

:root.dark .harmonia-achievement, [data-theme="dark"] .harmonia-achievement {
  --achievement-bg-tooltip: var(--elevation-2-bg, #2d333a);
  --achievement-border-tooltip: var(--color-neutral-600, #4b5563);
  --achievement-text-primary: var(--color-text-primary-dark, #f9fafb);
  --achievement-text-secondary: var(--color-text-secondary-dark, #9ca3af);
  --achievement-text-tertiary: var(--color-text-tertiary-dark, #6b7280);
  --achievement-text-disabled: var(--color-neutral-500, #6b7280);
  --achievement-focus-ring: #039de366;
}

:root.dark .harmonia-achievement__badge, [data-theme="dark"] .harmonia-achievement__badge {
  box-shadow: 0 4px 12px #0000004d, inset 0 1px #ffffff1a;
}

:root.dark .harmonia-achievement--unlocked .harmonia-achievement__badge, [data-theme="dark"] .harmonia-achievement--unlocked .harmonia-achievement__badge {
  box-shadow: 0 6px 20px #0006, 0 0 20px #2ed6c533, inset 0 1px #ffffff26;
}

:root.dark .harmonia-achievement__glow, [data-theme="dark"] .harmonia-achievement__glow {
  opacity: .4;
}

:root.dark .harmonia-achievement__progress-bg, [data-theme="dark"] .harmonia-achievement__progress-bg {
  stroke: var(--color-neutral-600, #4b5563);
}

:root.dark .harmonia-achievement__rarity--common, [data-theme="dark"] .harmonia-achievement__rarity--common {
  color: var(--achievement-text-secondary);
  background: #ffffff1a;
}

:root.dark .harmonia-achievement__rarity--rare, [data-theme="dark"] .harmonia-achievement__rarity--rare {
  background: #039de326;
}

:root.dark .harmonia-achievement__rarity--epic, [data-theme="dark"] .harmonia-achievement__rarity--epic {
  background: #ff5a6a26;
}

:root.dark .harmonia-achievement__rarity--legendary, [data-theme="dark"] .harmonia-achievement__rarity--legendary {
  color: var(--achievement-color-legendary);
  background: #f6cd0133;
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-achievement {
    --achievement-transition: 0s;
  }

  .harmonia-achievement__glow, .harmonia-achievement__new, .harmonia-achievement__unlock-badge {
    animation: none;
  }

  .harmonia-achievement__confetti {
    display: none;
  }

  .harmonia-achievement__badge, .harmonia-achievement__glow, .harmonia-achievement__progress-fill {
    transition: none;
  }

  .harmonia-achievement--unlocked .harmonia-achievement__glow {
    opacity: .6;
    transform: scale(1);
  }

  .harmonia-achievement__unlock-badge {
    opacity: 1;
    transform: scale(1)rotate(0);
  }

  .harmonia-achievement__new {
    transform: scale(1);
  }
}

@media (prefers-contrast: high) {
  .harmonia-achievement__badge {
    border-width: 4px;
  }

  .harmonia-achievement__badge:focus-visible, .harmonia-achievement--unlocked .harmonia-achievement__badge:focus-visible {
    box-shadow: 0 0 0 4px var(--achievement-color-primary);
  }

  .harmonia-achievement__progress-bg {
    stroke-width: 5px;
  }

  .harmonia-achievement__progress-fill {
    stroke-width: 6px;
  }

  .harmonia-achievement__new {
    border: 2px solid #fff;
  }

  .harmonia-achievement__details {
    border-width: 2px;
  }

  .harmonia-achievement__rarity {
    border-width: 2px;
    font-weight: 700;
  }

  .harmonia-achievement__name {
    font-weight: 600;
  }

  .harmonia-achievement--locked .harmonia-achievement__name {
    font-weight: 500;
  }
}

.harmonia-transparency {
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
}

.harmonia-transparency--inline {
  background-color: var(--color-popskills-50, #e6f5fd);
  border-left: 3px solid var(--color-popskills-500, #039de3);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
}

.harmonia-transparency__inline-content {
  align-items: center;
  gap: var(--spacing-2);
  flex-wrap: wrap;
  display: flex;
}

.harmonia-transparency--inline .harmonia-transparency__icon {
  color: var(--color-popskills-600, #0289c6);
  flex-shrink: 0;
}

.harmonia-transparency--inline .harmonia-transparency__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  flex: 1;
  min-width: 200px;
}

.harmonia-transparency__toggle-inline {
  appearance: none;
  border-radius: var(--radius-sm);
  color: var(--color-popskills-600, #0289c6);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-1) var(--spacing-2);
  transition: background-color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
}

.harmonia-transparency__toggle-inline:hover {
  background-color: var(--color-popskills-100, #bfe7fa);
}

.harmonia-transparency__toggle-inline:focus-visible {
  outline: 2px solid var(--color-popskills-500, #039de3);
  outline-offset: 2px;
}

.harmonia-transparency--card {
  background-color: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-soft);
  overflow: hidden;
}

.harmonia-transparency__header {
  cursor: pointer;
  padding: var(--spacing-4);
  text-align: left;
  transition: background-color var(--duration-fast) var(--easing-ease);
  background: none;
  border: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-family: inherit;
  display: flex;
}

.harmonia-transparency__header:hover {
  background-color: var(--color-neutral-50);
}

.harmonia-transparency__header:focus-visible {
  outline: 2px solid var(--color-popskills-500, #039de3);
  outline-offset: -2px;
}

.harmonia-transparency__header--static {
  cursor: default;
}

.harmonia-transparency__header--static:hover {
  background-color: #0000;
}

.harmonia-transparency__header-content {
  align-items: flex-start;
  gap: var(--spacing-3);
  display: flex;
}

.harmonia-transparency--card .harmonia-transparency__icon {
  color: var(--color-popskills-500, #039de3);
  flex-shrink: 0;
  margin-top: 2px;
}

.harmonia-transparency__header-text {
  flex: 1;
}

.harmonia-transparency__title {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-1);
}

.harmonia-transparency__recommendation {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0;
}

.harmonia-transparency__chevron {
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-1);
  flex-shrink: 0;
}

.harmonia-transparency__body, .harmonia-transparency__details {
  overflow: hidden;
}

.harmonia-transparency--card .harmonia-transparency__body {
  background-color: var(--color-neutral-50);
  border-top: 1px solid var(--color-border-light);
  padding: 0 var(--spacing-4) var(--spacing-4);
}

.harmonia-transparency--inline .harmonia-transparency__details {
  border-top: 1px solid var(--color-popskills-200, #80d0f4);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
}

.harmonia-transparency__factors-intro {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: var(--spacing-3) 0 var(--spacing-2);
}

.harmonia-transparency__factors-list {
  gap: var(--spacing-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.harmonia-transparency__factor {
  align-items: flex-start;
  gap: var(--spacing-2);
  display: flex;
}

.harmonia-transparency__factor-bullet {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
}

.harmonia-transparency__factor-icon {
  color: var(--color-poplingua-500, #2ed6c5);
}

.harmonia-transparency__factor-content {
  gap: var(--spacing-1);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.harmonia-transparency__factor-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.harmonia-transparency__factor-desc {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.harmonia-transparency__learn-more {
  color: var(--color-popskills-600, #0289c6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-3);
  transition: color var(--duration-fast) var(--easing-ease);
  text-decoration: none;
  display: inline-block;
}

.harmonia-transparency__learn-more:hover {
  color: var(--color-popskills-700, #016c9b);
  text-decoration: underline;
}

.harmonia-transparency__learn-more:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-popskills-500, #039de3);
  outline-offset: 2px;
}

.harmonia-transparency--popskills {
  --transparency-color: var(--color-popskills-500, #039de3);
  --transparency-bg: var(--color-popskills-50, #e6f5fd);
}

.harmonia-transparency--poplingua {
  --transparency-color: var(--color-poplingua-500, #2ed6c5);
  --transparency-bg: var(--color-poplingua-50, #f2f9f8);
}

.harmonia-transparency--poplingua.harmonia-transparency--inline {
  background-color: var(--color-poplingua-50, #f2f9f8);
  border-left-color: var(--color-poplingua-500, #2ed6c5);
}

.harmonia-transparency--poplingua .harmonia-transparency__icon {
  color: var(--color-poplingua-600, #22b5a7);
}

.harmonia-transparency--poptalent {
  --transparency-color: var(--color-poptalent-500, #ff5a6a);
  --transparency-bg: var(--color-poptalent-50, #ffeff1);
}

.harmonia-transparency--poptalent.harmonia-transparency--inline {
  background-color: var(--color-poptalent-50, #ffeff1);
  border-left-color: var(--color-poptalent-500, #ff5a6a);
}

.harmonia-transparency--poptalent .harmonia-transparency__icon {
  color: var(--color-poptalent-600, #eb4357);
}

.harmonia-transparency--popmentor {
  --transparency-color: var(--color-popmentor-500, #f6cd01);
  --transparency-bg: var(--color-popmentor-50, #fff8e1);
}

.harmonia-transparency--popmentor.harmonia-transparency--inline {
  background-color: var(--color-popmentor-50, #fff8e1);
  border-left-color: var(--color-popmentor-500, #f6cd01);
}

.harmonia-transparency--popmentor .harmonia-transparency__icon {
  color: var(--color-popmentor-600, #e6b200);
}

:root.dark .harmonia-transparency--card, [data-theme="dark"] .harmonia-transparency--card {
  background-color: var(--surface-1, #1f2937);
  border-color: var(--color-border-light);
}

:root.dark .harmonia-transparency--card .harmonia-transparency__body, :root.dark .harmonia-transparency__header:hover, [data-theme="dark"] .harmonia-transparency--card .harmonia-transparency__body, [data-theme="dark"] .harmonia-transparency__header:hover {
  background-color: var(--surface-2, #374151);
}

:root.dark .harmonia-transparency--inline, [data-theme="dark"] .harmonia-transparency--inline {
  background-color: #039de31a;
}

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

@media (max-width: 640px) {
  .harmonia-transparency__header {
    padding: var(--spacing-3);
  }

  .harmonia-transparency--card .harmonia-transparency__body {
    padding: 0 var(--spacing-3) var(--spacing-3);
  }

  .harmonia-transparency__inline-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .harmonia-transparency__toggle-inline {
    margin-top: var(--spacing-2);
  }
}

.harmonia-illustrated-state {
  gap: var(--spacing-4, 1rem);
  padding: var(--spacing-6, 1.5rem);
  text-align: center;
  flex-direction: column;
}

.harmonia-illustrated-state, .harmonia-illustrated-state__illustration {
  justify-content: center;
  align-items: center;
  display: flex;
}

.harmonia-illustrated-state__illustration svg {
  width: 100%;
  height: 100%;
}

.harmonia-illustrated-state__content {
  align-items: center;
  gap: var(--spacing-2, .5rem);
  flex-direction: column;
  max-width: 320px;
  display: flex;
}

.harmonia-illustrated-state__title {
  color: var(--color-text-primary, #070433);
  font-family: var(--font-family-display, "Chillax", system-ui, sans-serif);
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.harmonia-illustrated-state__description {
  color: var(--color-text-secondary, #6b7280);
  font-family: var(--font-family-body, system-ui, sans-serif);
  margin: 0;
  line-height: 1.5;
}

.harmonia-illustrated-state--sm {
  gap: var(--spacing-3, .75rem);
  padding: var(--spacing-4, 1rem);
}

.harmonia-illustrated-state--sm .harmonia-illustrated-state__illustration {
  width: 100px;
  height: 80px;
}

.harmonia-illustrated-state--sm .harmonia-illustrated-state__title {
  font-size: var(--font-size-md, 1rem);
}

.harmonia-illustrated-state--sm .harmonia-illustrated-state__description {
  font-size: var(--font-size-sm, .875rem);
}

.harmonia-illustrated-state--md .harmonia-illustrated-state__illustration {
  width: 160px;
  height: 128px;
}

.harmonia-illustrated-state--md .harmonia-illustrated-state__title {
  font-size: var(--font-size-lg, 1.125rem);
}

.harmonia-illustrated-state--md .harmonia-illustrated-state__description {
  font-size: var(--font-size-md, 1rem);
}

.harmonia-illustrated-state--lg {
  gap: var(--spacing-6, 1.5rem);
  padding: var(--spacing-8, 2rem);
}

.harmonia-illustrated-state--lg .harmonia-illustrated-state__illustration {
  width: 200px;
  height: 160px;
}

.harmonia-illustrated-state--lg .harmonia-illustrated-state__title {
  font-size: var(--font-size-xl, 1.25rem);
}

.harmonia-illustrated-state--lg .harmonia-illustrated-state__description {
  font-size: var(--font-size-md, 1rem);
}

.harmonia-illustrated-state--lg .harmonia-illustrated-state__content {
  max-width: 400px;
}

.harmonia-illustrated-state__actions {
  gap: var(--spacing-3, .75rem);
  margin-top: var(--spacing-2, .5rem);
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.harmonia-illustrated-state__action {
  border-radius: var(--radius-md, .5rem);
  cursor: pointer;
  font-family: var(--font-family-body, system-ui, sans-serif);
  font-size: var(--font-size-sm, .875rem);
  padding: var(--spacing-2, .5rem) var(--spacing-4, 1rem);
  border: none;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  transition: all .2s;
  display: inline-flex;
}

.harmonia-illustrated-state__action--primary {
  background-color: var(--action-color, #039de3);
  color: #fff;
}

.harmonia-illustrated-state__action--primary:hover {
  filter: brightness(1.1);
}

.harmonia-illustrated-state__action--primary:active {
  transform: scale(.98);
}

.harmonia-illustrated-state__action--secondary {
  border: 1px solid var(--action-color, #039de3);
  color: var(--action-color, #039de3);
  background-color: #0000;
}

.harmonia-illustrated-state__action--secondary:hover {
  background-color: var(--action-color, #039de3);
  color: #fff;
}

.harmonia-illustrated-state__action--ghost {
  color: var(--color-text-secondary, #6b7280);
  background-color: #0000;
}

.harmonia-illustrated-state__action--ghost:hover {
  background-color: var(--color-bg-secondary, #f3f4f6);
  color: var(--color-text-primary, #070433);
}

.harmonia-illustrated-state--loading .harmonia-illustrated-state__title {
  animation: 2s ease-in-out infinite pulse;
}

@keyframes pulse {
  0%, to {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

.harmonia-illustrated-state--success .harmonia-illustrated-state__illustration {
  animation: .5s ease-out bounce-in;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  50% {
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.harmonia-illustrated-state--error .harmonia-illustrated-state__illustration {
  animation: .5s ease-in-out shake;
}

@keyframes shake {
  0%, to {
    transform: translateX(0);
  }

  20%, 60% {
    transform: translateX(-5px);
  }

  40%, 80% {
    transform: translateX(5px);
  }
}

.harmonia-illustrated-state--popskills .harmonia-illustrated-state__action--primary {
  background-color: var(--color-popskills-500, #039de3);
}

.harmonia-illustrated-state--poplingua .harmonia-illustrated-state__action--primary {
  background-color: var(--color-poplingua-500, #2ed6c5);
  color: #070433;
}

.harmonia-illustrated-state--poptalent .harmonia-illustrated-state__action--primary {
  background-color: var(--color-poptalent-500, #ff5a6a);
}

.harmonia-illustrated-state--popmentor .harmonia-illustrated-state__action--primary {
  background-color: var(--color-popmentor-500, #f6cd01);
  color: #070433;
}

@media (prefers-color-scheme: dark) {
  .harmonia-illustrated-state__title {
    color: var(--color-text-primary-dark, #f9fafb);
  }

  .harmonia-illustrated-state__description {
    color: var(--color-text-secondary-dark, #9ca3af);
  }

  .harmonia-illustrated-state__action--ghost:hover {
    background-color: var(--color-bg-secondary-dark, #374151);
  }
}

@media (prefers-reduced-motion: reduce) {
  .harmonia-illustrated-state--error .harmonia-illustrated-state__illustration, .harmonia-illustrated-state--loading .harmonia-illustrated-state__title, .harmonia-illustrated-state--success .harmonia-illustrated-state__illustration {
    animation: none;
  }

  .harmonia-illustrated-state__action {
    transition: none;
  }
}

.journey-dashboard {
  --journey-color-primary: #039de3;
  --journey-color-success: #2ed6c5;
  --journey-color-xp: #f6cd01;
  --journey-color-legendary: #ff5a6a;
  --journey-color-navy: #070433;
  --journey-focus-ring: #039de34d;
  --journey-bg-primary: var(--color-bg-primary, #fff);
  --journey-bg-secondary: var(--color-bg-secondary, #f9fafb);
  --journey-bg-tertiary: var(--color-bg-tertiary, #f3f4f6);
  --journey-text-primary: var(--color-text-primary, #070433);
  --journey-text-secondary: var(--color-text-secondary, #6b7280);
  --journey-text-tertiary: var(--color-text-tertiary, #9ca3af);
  --journey-border-color: var(--color-border, #e5e7eb);
  --journey-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
  --journey-transition-fast: .15s ease-out;
  background: var(--journey-bg-primary);
  border-radius: var(--radius-lg, .75rem);
  font-family: var(--font-family-body, system-ui, sans-serif);
  flex-direction: column;
  max-width: 600px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000001a;
}

.journey-dashboard__header {
  border-bottom: 1px solid var(--journey-border-color);
  padding: var(--spacing-4, 1rem);
}

.journey-dashboard__user {
  align-items: center;
  gap: var(--spacing-3, .75rem);
  display: flex;
}

.journey-dashboard__avatar {
  background: var(--journey-color-primary);
  color: #fff;
  font-size: var(--font-size-lg, 1.125rem);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-weight: 600;
  display: flex;
}

.journey-dashboard__user-info {
  flex: 1;
  min-width: 0;
}

.journey-dashboard__user-name {
  color: var(--journey-text-primary);
  font-family: var(--font-family-display, "Chillax", system-ui, sans-serif);
  font-size: var(--font-size-lg, 1.125rem);
  margin: 0;
  font-weight: 600;
}

.journey-dashboard__user-stats {
  font-size: var(--font-size-sm, .875rem);
  align-items: center;
  gap: var(--spacing-2, .5rem);
  margin-top: var(--spacing-1, .25rem);
  display: flex;
}

.journey-dashboard__level {
  color: var(--journey-text-secondary);
  font-weight: 500;
}

.journey-dashboard__xp {
  color: var(--journey-color-xp);
  font-weight: 600;
}

.journey-dashboard__streak {
  color: var(--journey-text-secondary);
}

.journey-dashboard__xp-bar {
  background: var(--journey-bg-tertiary);
  border-radius: var(--radius-full, 9999px);
  height: 6px;
  margin-top: var(--spacing-3, .75rem);
  overflow: hidden;
}

.journey-dashboard__xp-fill {
  background: linear-gradient(90deg, var(--journey-color-xp), var(--journey-color-success));
  border-radius: var(--radius-full, 9999px);
  height: 100%;
  transition: width .3s;
}

.journey-dashboard__nav {
  background: var(--journey-bg-secondary);
  border-bottom: 1px solid var(--journey-border-color);
  display: flex;
}

.journey-dashboard__nav-item {
  color: var(--journey-text-secondary);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-1, .25rem);
  min-height: 48px;
  padding: var(--spacing-3, .75rem) var(--spacing-2, .5rem);
  transition: color var(--journey-transition-fast), background-color var(--journey-transition-fast);
  background: none;
  border: none;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  display: flex;
  position: relative;
}

.journey-dashboard__nav-item:hover {
  background: var(--journey-bg-tertiary);
  color: var(--journey-text-primary);
}

.journey-dashboard__nav-item:focus-visible {
  box-shadow: inset 0 0 0 3px var(--journey-focus-ring);
  color: var(--journey-color-primary);
  outline: none;
}

.journey-dashboard__nav-item--active {
  color: var(--journey-color-primary);
}

.journey-dashboard__nav-item--active:after {
  background: var(--journey-color-primary);
  border-radius: var(--radius-full, 9999px) var(--radius-full, 9999px) 0 0;
  content: "";
  width: 40px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.journey-dashboard__nav-icon {
  width: 20px;
  height: 20px;
}

.journey-dashboard__nav-icon svg {
  width: 100%;
  height: 100%;
}

.journey-dashboard__nav-label {
  font-size: var(--font-size-xs, .75rem);
  font-weight: 500;
}

.journey-dashboard__content {
  min-height: 300px;
  padding: var(--spacing-4, 1rem);
}

.journey-dashboard__empty {
  color: var(--journey-text-secondary);
  justify-content: center;
  align-items: center;
  height: 200px;
  font-style: italic;
  display: flex;
}

.journey-dashboard__timeline-list {
  flex-direction: column;
  display: flex;
}

.journey-dashboard__timeline-item {
  padding-bottom: var(--spacing-4, 1rem);
  padding-left: var(--spacing-6, 1.5rem);
  position: relative;
}

.journey-dashboard__timeline-dot {
  background: var(--journey-color-primary);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 0;
}

.journey-dashboard__timeline-item--major .journey-dashboard__timeline-dot {
  background: var(--journey-color-xp);
  width: 16px;
  height: 16px;
  left: -2px;
  box-shadow: 0 0 0 4px #f6cd0133;
}

.journey-dashboard__timeline-line {
  background: var(--journey-border-color);
  width: 2px;
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 5px;
}

.journey-dashboard__timeline-content {
  padding-left: var(--spacing-2, .5rem);
}

.journey-dashboard__timeline-header {
  align-items: center;
  gap: var(--spacing-2, .5rem);
  flex-wrap: wrap;
  display: flex;
}

.journey-dashboard__timeline-icon {
  font-size: var(--font-size-md, 1rem);
}

.journey-dashboard__timeline-title {
  color: var(--journey-text-primary);
  font-size: var(--font-size-sm, .875rem);
  margin: 0;
  font-weight: 600;
}

.journey-dashboard__timeline-xp {
  color: var(--journey-color-xp);
  font-size: var(--font-size-xs, .75rem);
  margin-left: auto;
  font-weight: 600;
}

.journey-dashboard__timeline-desc {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-sm, .875rem);
  margin: var(--spacing-1, .25rem) 0 0;
}

.journey-dashboard__timeline-date {
  color: var(--journey-text-tertiary);
  font-size: var(--font-size-xs, .75rem);
  margin-top: var(--spacing-1, .25rem);
  display: block;
}

.journey-dashboard__map-stats {
  background: var(--journey-bg-secondary);
  border-radius: var(--radius-md, .5rem);
  margin-bottom: var(--spacing-4, 1rem);
  padding: var(--spacing-4, 1rem);
  justify-content: space-around;
  display: flex;
}

.journey-dashboard__map-stat {
  align-items: center;
  gap: var(--spacing-1, .25rem);
  flex-direction: column;
  display: flex;
}

.journey-dashboard__map-stat-value {
  color: var(--journey-color-primary);
  font-family: var(--font-family-display, "Chillax", system-ui, sans-serif);
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
}

.journey-dashboard__map-stat-label {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-xs, .75rem);
}

.journey-dashboard__map-section-title {
  color: var(--journey-text-primary);
  font-size: var(--font-size-sm, .875rem);
  margin: 0 0 var(--spacing-3, .75rem);
  font-weight: 600;
}

.journey-dashboard__map-skills-grid {
  gap: var(--spacing-3, .75rem);
  flex-direction: column;
  display: flex;
}

.journey-dashboard__map-skill-header {
  margin-bottom: var(--spacing-1, .25rem);
  justify-content: space-between;
  display: flex;
}

.journey-dashboard__map-skill-name {
  color: var(--journey-text-primary);
  font-size: var(--font-size-sm, .875rem);
}

.journey-dashboard__map-skill-pct {
  color: var(--journey-color-primary);
  font-size: var(--font-size-sm, .875rem);
  font-weight: 600;
}

.journey-dashboard__map-skill-bar {
  background: var(--journey-bg-tertiary);
  border-radius: var(--radius-full, 9999px);
  height: 8px;
  overflow: hidden;
}

.journey-dashboard__map-skill-fill {
  background: var(--journey-color-success);
  border-radius: var(--radius-full, 9999px);
  height: 100%;
  transition: width var(--journey-transition);
}

.journey-dashboard__collection-header {
  margin-bottom: var(--spacing-4, 1rem);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.journey-dashboard__collection-header h4 {
  color: var(--journey-text-primary);
  font-size: var(--font-size-md, 1rem);
  margin: 0;
  font-weight: 600;
}

.journey-dashboard__collection-count {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-sm, .875rem);
}

.journey-dashboard__collection-grid {
  gap: var(--spacing-3, .75rem);
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  display: grid;
}

.journey-dashboard__badge {
  border-radius: var(--radius-md, .5rem);
  cursor: pointer;
  align-items: center;
  gap: var(--spacing-1, .25rem);
  padding: var(--spacing-2, .5rem);
  text-align: center;
  transition: transform var(--journey-transition), border-color var(--journey-transition-fast);
  background: none;
  border: 2px solid #0000;
  flex-direction: column;
  display: flex;
}

.journey-dashboard__badge:focus-visible {
  border-color: var(--journey-color-primary);
  box-shadow: 0 0 0 3px var(--journey-focus-ring);
  outline: none;
}

.journey-dashboard__badge--unlocked:hover {
  transform: scale(1.05);
}

.journey-dashboard__badge--locked {
  cursor: not-allowed;
  opacity: .6;
}

.journey-dashboard__badge-icon {
  background: var(--journey-bg-secondary);
  border: 3px solid var(--journey-color-primary);
  font-size: var(--font-size-xl, 1.25rem);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.journey-dashboard__badge--unlocked .journey-dashboard__badge-icon {
  border-color: var(--journey-color-success);
}

.journey-dashboard__badge-name {
  color: var(--journey-text-primary);
  font-size: var(--font-size-xs, .75rem);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-weight: 500;
  overflow: hidden;
}

.journey-dashboard__badge-progress {
  background: var(--journey-bg-tertiary);
  border-radius: var(--radius-full, 9999px);
  width: 100%;
  height: 4px;
  overflow: hidden;
}

.journey-dashboard__badge-progress-fill {
  background: var(--journey-color-primary);
  border-radius: var(--radius-full, 9999px);
  height: 100%;
}

.journey-dashboard__badge-rarity {
  font-size: var(--font-size-xs, .75rem);
  text-transform: capitalize;
  font-weight: 500;
}

.journey-dashboard__badge-rarity--common {
  color: var(--journey-text-secondary);
}

.journey-dashboard__badge-rarity--rare {
  color: var(--journey-color-primary);
}

.journey-dashboard__badge-rarity--epic {
  color: var(--journey-color-legendary);
}

.journey-dashboard__badge-rarity--legendary {
  color: var(--journey-color-xp);
}

.journey-dashboard__story-hero {
  border-radius: var(--radius-md, .5rem);
  margin-bottom: var(--spacing-4, 1rem);
  padding: var(--spacing-6, 1.5rem);
  background: linear-gradient(135deg, #039de314, #2ed6c514);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.journey-dashboard__story-avatar {
  background: var(--journey-color-primary);
  color: #fff;
  font-size: var(--font-size-xl, 1.25rem);
  height: 64px;
  margin-bottom: var(--spacing-2, .5rem);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 64px;
  font-weight: 700;
  display: flex;
}

.journey-dashboard__story-name {
  color: var(--journey-text-primary);
  font-family: var(--font-family-display, "Chillax", system-ui, sans-serif);
  font-size: var(--font-size-xl, 1.25rem);
  margin: 0;
  font-weight: 600;
}

.journey-dashboard__story-subtitle {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-sm, .875rem);
  margin: var(--spacing-1, .25rem) 0 0;
}

.journey-dashboard__story-content {
  gap: var(--spacing-4, 1rem);
  flex-direction: column;
  display: flex;
}

.journey-dashboard__story-chapter {
  background: var(--journey-bg-secondary);
  border-radius: var(--radius-md, .5rem);
  padding: var(--spacing-3, .75rem);
}

.journey-dashboard__story-chapter h4 {
  color: var(--journey-text-primary);
  font-size: var(--font-size-sm, .875rem);
  margin: 0 0 var(--spacing-2, .5rem);
  font-weight: 600;
}

.journey-dashboard__story-chapter p {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-sm, .875rem);
  margin: 0;
  line-height: 1.6;
}

.journey-dashboard__story-highlights {
  padding-left: var(--spacing-4, 1rem);
  margin: 0;
  list-style: none;
}

.journey-dashboard__story-highlights li {
  color: var(--journey-text-secondary);
  font-size: var(--font-size-sm, .875rem);
  align-items: center;
  gap: var(--spacing-2, .5rem);
  padding: var(--spacing-1, .25rem) 0;
  display: flex;
}

.journey-dashboard__story-highlight-icon {
  font-size: var(--font-size-md, 1rem);
}

.journey-dashboard__story-legendary {
  gap: var(--spacing-2, .5rem);
  flex-wrap: wrap;
  display: flex;
}

.journey-dashboard__story-legendary-badge {
  border-radius: var(--radius-md, .5rem);
  color: var(--journey-text-primary);
  font-size: var(--font-size-xs, .75rem);
  align-items: center;
  gap: var(--spacing-1, .25rem);
  padding: var(--spacing-1, .25rem) var(--spacing-2, .5rem);
  background: linear-gradient(135deg, #f6cd0133, #f6cd011a);
  border: 1px solid #f6cd0166;
  display: flex;
}

.journey-dashboard__story-future {
  border-left: 3px solid var(--journey-color-primary);
  background: none;
}

.journey-dashboard__story-future p {
  font-style: italic;
}

@media (max-width: 480px) {
  .journey-dashboard__nav-label {
    display: none;
  }

  .journey-dashboard__nav-icon {
    width: 24px;
    height: 24px;
  }

  .journey-dashboard__collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .journey-dashboard__nav-item {
    min-height: 44px;
  }
}

@media (min-width: 1024px) {
  .journey-dashboard__nav-item {
    min-height: 40px;
  }
}

:root.dark .journey-dashboard, [data-theme="dark"] .journey-dashboard {
  --journey-bg-primary: var(--surface-1, #1a1a2e);
  --journey-bg-secondary: #ffffff0f;
  --journey-bg-tertiary: #ffffff1a;
  --journey-text-primary: var(--color-text-primary-dark, #f9fafb);
  --journey-text-secondary: var(--color-text-secondary-dark, #9ca3af);
  --journey-text-tertiary: var(--color-text-tertiary-dark, #6b7280);
  --journey-border-color: #ffffff26;
  --journey-focus-ring: #039de366;
  box-shadow: 0 1px 3px #0000004d;
}

:root.dark .journey-dashboard__story-hero, [data-theme="dark"] .journey-dashboard__story-hero {
  background: linear-gradient(135deg, #039de326, #2ed6c526);
}

:root.dark .journey-dashboard__story-legendary-badge, [data-theme="dark"] .journey-dashboard__story-legendary-badge {
  background: linear-gradient(135deg, #f6cd0140, #f6cd0126);
  border-color: #f6cd0180;
}

@media (prefers-reduced-motion: reduce) {
  .journey-dashboard {
    --journey-transition: 0s;
    --journey-transition-fast: 0s;
  }

  .journey-dashboard__badge, .journey-dashboard__map-skill-fill, .journey-dashboard__nav-item, .journey-dashboard__xp-fill {
    transition: none;
  }

  .journey-dashboard__badge--unlocked:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .journey-dashboard {
    border: 2px solid var(--journey-text-primary);
  }

  .journey-dashboard__header, .journey-dashboard__nav {
    border-width: 2px;
  }

  .journey-dashboard__nav-item:focus-visible {
    box-shadow: inset 0 0 0 4px var(--journey-color-primary);
  }

  .journey-dashboard__nav-item--active:after {
    height: 4px;
  }

  .journey-dashboard__timeline-dot {
    border: 2px solid var(--journey-text-primary);
  }

  .journey-dashboard__timeline-line {
    width: 3px;
  }

  .journey-dashboard__map-skill-bar, .journey-dashboard__xp-bar {
    border: 1px solid var(--journey-border-color);
    height: 10px;
  }

  .journey-dashboard__badge {
    border-width: 3px;
  }

  .journey-dashboard__badge:focus-visible {
    box-shadow: 0 0 0 4px var(--journey-color-primary);
  }

  .journey-dashboard__badge-icon {
    border-width: 4px;
  }

  .journey-dashboard__badge-progress {
    border: 1px solid var(--journey-border-color);
    height: 6px;
  }

  .journey-dashboard__story-chapter {
    border: 2px solid var(--journey-border-color);
  }

  .journey-dashboard__story-future {
    border-left-width: 5px;
  }
}

/* [project]/src/styles/popskills-tokens.css [app-client] (css) */
:root {
  --color-text-inverse: #fff;
  --color-text-primary: #070433;
  --color-text-secondary: #374151;
  --color-text-tertiary: #6b7280;
  --color-text-disabled: #9ca3af;
  --color-background-primary: #f6f7f9;
  --color-background-secondary: #e5e7eb;
  --color-background-tertiary: #d1d5db;
  --color-background-inverse: #070433;
  --color-border-light: #d1d5db;
  --color-border-default: #9ca3af;
  --color-border-strong: #6b7280;
  --color-border-focus: #039de3;
  --duration-instant: 0s;
  --duration-fastest: 50ms;
  --duration-faster: .1s;
  --duration-fast: .15s;
  --duration-normal: .2s;
  --duration-slow: .3s;
  --duration-slower: .5s;
  --duration-slowest: .7s;
  --easing-linear: linear;
  --easing-ease: cubic-bezier(.4, 0, .2, 1);
  --easing-ease-in: cubic-bezier(.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, .2, 1);
  --easing-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --easing-spring: cubic-bezier(.34, 1.56, .64, 1);
  --easing-bounce: cubic-bezier(.68, -.55, .265, 1.55);
  --easing-fluid: cubic-bezier(.23, 1, .32, 1);
  --color-dark-background-primary: #0d0b24;
  --color-dark-background-secondary: #151333;
  --color-dark-background-tertiary: #1d1b42;
  --color-dark-elevation-1: #1a1840;
  --color-dark-elevation-2: #22204e;
  --color-dark-elevation-3: #2a285c;
  --color-dark-text-primary: #f6f7f9;
  --color-dark-text-secondary: #d1d5db;
  --color-dark-text-tertiary: #9ca3af;
  --color-dark-text-disabled: #6b7280;
  --color-dark-border-light: #2a285c;
  --color-dark-border-default: #3a3870;
  --color-dark-border-strong: #4a4880;
  --color-dark-primary-300: #33b4ec;
  --color-dark-primary-400: #5cc3f0;
  --color-dark-primary-500: #80d0f4;
  --color-dark-primary-600: #a3ddf7;
  --color-dark-secondary-300: #63dec9;
  --color-dark-secondary-400: #7fe5d3;
  --color-dark-secondary-500: #9feadd;
  --color-dark-secondary-600: #bff0e7;
  --color-dark-accent-300: #f98996;
  --color-dark-accent-400: #fa9fa9;
  --color-dark-accent-500: #fab5bc;
  --color-dark-accent-600: #fbcbcf;
  --color-dark-mentor-300: #ffd633;
  --color-dark-mentor-400: #ffde4d;
  --color-dark-mentor-500: #ffe066;
  --color-dark-mentor-600: #ffe880;
  --color-dark-success-400: #7fe5d3;
  --color-dark-success-500: #9feadd;
  --color-dark-success-600: #bff0e7;
  --color-dark-warning-400: #ffde4d;
  --color-dark-warning-500: #ffe066;
  --color-dark-warning-600: #ffe880;
  --color-dark-error-400: #fa9fa9;
  --color-dark-error-500: #fab5bc;
  --color-dark-error-600: #fbcbcf;
  --color-dark-info-400: #5cc3f0;
  --color-dark-info-500: #80d0f4;
  --color-dark-info-600: #a3ddf7;
  --color-primary-50: #e6f5fd;
  --color-primary-100: #bfe7fa;
  --color-primary-200: #80d0f4;
  --color-primary-300: #33b4ec;
  --color-primary-400: #1aa8e8;
  --color-primary-500: #039de3;
  --color-primary-600: #0289c6;
  --color-primary-700: #016c9b;
  --color-primary-800: #014f70;
  --color-primary-900: #00354d;
  --color-secondary-50: #f2f9f8;
  --color-secondary-100: #cff4ee;
  --color-secondary-200: #9feadd;
  --color-secondary-300: #63dec9;
  --color-secondary-400: #45d7c0;
  --color-secondary-500: #2ed6c5;
  --color-secondary-600: #22b5a7;
  --color-secondary-700: #1a8f85;
  --color-secondary-800: #126a63;
  --color-secondary-900: #0b3f3b;
  --color-accent-50: #ffeff1;
  --color-accent-100: #fed7da;
  --color-accent-200: #fab5bc;
  --color-accent-300: #f98996;
  --color-accent-400: #ff6f7f;
  --color-accent-500: #ff5a6a;
  --color-accent-600: #eb4357;
  --color-accent-700: #c32e42;
  --color-accent-800: #9a1c2f;
  --color-accent-900: #68121d;
  --color-mentor-50: #fff8e1;
  --color-mentor-100: #ffeeb3;
  --color-mentor-200: #ffe066;
  --color-mentor-300: #ffd633;
  --color-mentor-400: #fbd10a;
  --color-mentor-500: #f6cd01;
  --color-mentor-600: #e6b200;
  --color-mentor-700: #e18e00;
  --color-mentor-800: #82580d;
  --color-mentor-900: #30220a;
  --color-pop-dark: #070433;
  --color-pop-light: #f2f4f7;
  --color-success-50: #f2f9f8;
  --color-success-100: #cff4ee;
  --color-success-500: #2ed6c5;
  --color-success-600: #22b5a7;
  --color-success-700: #1a8f85;
  --color-warning-50: #fff8e1;
  --color-warning-100: #ffeeb3;
  --color-warning-500: #f6cd01;
  --color-warning-600: #e6b200;
  --color-warning-700: #e18e00;
  --color-error-50: #ffeff1;
  --color-error-100: #fed7da;
  --color-error-200: #fab5bc;
  --color-error-500: #ff5a6a;
  --color-error-600: #eb4357;
  --color-error-700: #c32e42;
  --color-info-50: #e6f5fd;
  --color-info-100: #bfe7fa;
  --color-info-500: #039de3;
  --color-info-600: #0289c6;
  --color-neutral-50: #f6f7f9;
  --color-neutral-100: #e5e7eb;
  --color-neutral-200: #d1d5db;
  --color-neutral-300: #9ca3af;
  --color-neutral-400: #6b7280;
  --color-neutral-500: #4b5563;
  --color-neutral-600: #374151;
  --color-neutral-700: #1f2937;
  --color-neutral-800: #070433;
  --color-neutral-900: #070433;
  --color-brand-popskills-primary: #039de3;
  --color-brand-popskills-dark: #016c9b;
  --color-brand-popskills-light: #e6f5fd;
  --color-brand-popskills-accent: #80d0f4;
  --color-brand-poplingua-primary: #2ed6c5;
  --color-brand-poplingua-dark: #1a8f85;
  --color-brand-poplingua-light: #f2f9f8;
  --color-brand-poptalent-primary: #ff5a6a;
  --color-brand-poptalent-dark: #c32e42;
  --color-brand-poptalent-light: #ffeff1;
  --color-brand-popmentor-primary: #f6cd01;
  --color-brand-popmentor-dark: #e18e00;
  --color-brand-popmentor-light: #fff8e1;
  --color-brand-pop-dark: #070433;
  --color-brand-pop-light: #f2f4f7;
  --color-theory-cognitive-load: #039de3;
  --color-theory-action: #070433;
  --color-theory-reflection: #2ed6c5;
  --color-theory-celebration: #ff5a6a;
  --color-theory-community: #f6cd01;
  --color-theory-assessment: #22b5a7;
  --color-semantic-background-primary: #f6f7f9;
  --color-semantic-background-secondary: #e5e7eb;
  --color-semantic-background-tertiary: #d1d5db;
  --color-semantic-background-inverse: #070433;
  --color-semantic-text-primary: #070433;
  --color-semantic-text-secondary: #374151;
  --color-semantic-text-tertiary: #6b7280;
  --color-semantic-text-disabled: #9ca3af;
  --color-semantic-text-inverse: #fff;
  --color-semantic-border-light: #d1d5db;
  --color-semantic-border-default: #9ca3af;
  --color-semantic-border-strong: #6b7280;
  --color-semantic-border-focus: #039de3;
  --elevation-0: none;
  --elevation-1: 0 1px 2px 0 #2d32380d;
  --elevation-2: 0 4px 12px #2d323814;
  --elevation-3: 0 8px 24px #2d32381f;
  --elevation-4: 0 12px 32px #2d323826;
  --elevation-5: 0 20px 40px #2d32382e;
  --elevation-6: 0 25px 50px #2d323840;
  --elevation-soft: 0 4px 12px #2d323814;
  --radius-none: 0;
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --opacity-0: 0;
  --opacity-5: .05;
  --opacity-10: .1;
  --opacity-20: .2;
  --opacity-30: .3;
  --opacity-40: .4;
  --opacity-50: .5;
  --opacity-60: .6;
  --opacity-70: .7;
  --opacity-80: .8;
  --opacity-90: .9;
  --opacity-100: 1;
  --animation-duration-instant: 0s;
  --animation-duration-fastest: 50ms;
  --animation-duration-faster: .1s;
  --animation-duration-fast: .15s;
  --animation-duration-normal: .2s;
  --animation-duration-slow: .3s;
  --animation-duration-slower: .5s;
  --animation-duration-slowest: .7s;
  --animation-duration-pop: 1.5s;
  --animation-easing-linear: linear;
  --animation-easing-ease: cubic-bezier(.4, 0, .2, 1);
  --animation-easing-ease-in: cubic-bezier(.4, 0, 1, 1);
  --animation-easing-ease-out: cubic-bezier(0, 0, .2, 1);
  --animation-easing-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animation-easing-spring: cubic-bezier(.34, 1.56, .64, 1);
  --animation-easing-bounce: cubic-bezier(.68, -.55, .265, 1.55);
  --animation-easing-fluid: cubic-bezier(.23, 1, .32, 1);
  --animation-pop-hover-scale: 1.05;
  --animation-pop-press-scale: .95;
  --z-index-hide: -1;
  --z-index-base: 0;
  --z-index-raised: 1;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-overlay: 1200;
  --z-index-modal: 1300;
  --z-index-popover: 1400;
  --z-index-toast: 1500;
  --z-index-tooltip: 1600;
  --z-index-celebration: 1700;
  --grid-columns: 12;
  --grid-gutter-xs: 1rem;
  --grid-gutter-sm: 1.25rem;
  --grid-gutter-md: 1.5rem;
  --grid-gutter-lg: 2rem;
  --grid-gutter-xl: 2.5rem;
  --grid-margin-xs: 1rem;
  --grid-margin-sm: 1.5rem;
  --grid-margin-md: 2rem;
  --grid-margin-lg: 3rem;
  --grid-margin-xl: 4rem;
  --grid-max-width-sm: 640px;
  --grid-max-width-md: 768px;
  --grid-max-width-lg: 1024px;
  --grid-max-width-xl: 1280px;
  --grid-max-width-2xl: 1536px;
  --spacing-0: 0;
  --spacing-1: .25rem;
  --spacing-2: .5rem;
  --spacing-3: .75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --spacing-0-5: .125rem;
  --spacing-1-5: .375rem;
  --spacing-2-5: .625rem;
  --spacing-3-5: .875rem;
  --touch-target: 48px;
  --touch-target-min: 44px;
  --touch-target-comfortable: 56px;
  --touch-spacing: 8px;
  --mobile-page-inset: 16px;
  --mobile-card-padding: 16px;
  --mobile-section-gap: 24px;
  --mobile-component-gap: 12px;
  --mobile-header-height: 56px;
  --mobile-bottom-nav-height: 56px;
  --mobile-fab-offset: 16px;
  --tablet-page-inset: 24px;
  --tablet-card-padding: 20px;
  --tablet-section-gap: 32px;
  --tablet-header-height: 64px;
  --desktop-page-inset: 32px;
  --desktop-card-padding: 24px;
  --desktop-section-gap: 48px;
  --desktop-sidebar-width: 280px;
  --desktop-header-height: 72px;
  --desktop-max-content-width: 1280px;
  --size-xs: 20rem;
  --size-sm: 24rem;
  --size-md: 28rem;
  --size-lg: 32rem;
  --size-xl: 36rem;
  --size-2xl: 42rem;
  --size-3xl: 48rem;
  --size-4xl: 56rem;
  --size-5xl: 64rem;
  --size-6xl: 72rem;
  --size-7xl: 80rem;
  --breakpoint-xs: 375px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --gesture-swipe-threshold: 50px;
  --gesture-swipe-velocity: .3;
  --gesture-pull-to-refresh-threshold: 80px;
  --haptic-light: 10;
  --haptic-medium: 25;
  --haptic-heavy: 50;
  --font-family-primary: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-display: "DM Sans", system-ui, sans-serif;
  --font-family-reading: "DM Sans", Georgia, serif;
  --font-family-monospace: "Fira Code", "Consolas", monospace;
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-fluid-xs: clamp(.7rem, .65rem + .25vw, .75rem);
  --font-size-fluid-sm: clamp(.8rem, .75rem + .25vw, .875rem);
  --font-size-fluid-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --font-size-fluid-lg: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  --font-size-fluid-h4: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --font-size-fluid-h3: clamp(1.25rem, 1.1rem + 1vw, 1.875rem);
  --font-size-fluid-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --font-size-fluid-h1: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
  --font-size-fluid-display: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-line-height-none: 1;
  --font-line-height-tight: 1.25;
  --font-line-height-snug: 1.375;
  --font-line-height-normal: 1.5;
  --font-line-height-relaxed: 1.6;
  --font-line-height-loose: 2;
  --font-letter-spacing-tighter: -.05em;
  --font-letter-spacing-tight: -.025em;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide: .025em;
  --font-letter-spacing-wider: .05em;
  --font-letter-spacing-widest: .1em;
}

/* [project]/src/app/globals.css [app-client] (css) */
*, :before, :after, ::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: #3b82f680;
  --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: ;
}

*, :before, :after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

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

html, :host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
}

body {
  line-height: inherit;
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

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

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

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

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: Fira Code, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

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

button, select {
  text-transform: none;
}

button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: #0000;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

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

progress {
  vertical-align: baseline;
}

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

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

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

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

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

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 {
  margin: 0;
  padding: 0;
  list-style: none;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

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

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

:disabled {
  cursor: default;
}

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

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

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

:root {
  --background: 220 20% 97%;
  --foreground: 245 88% 11%;
  --card: 0 0% 100%;
  --card-foreground: 245 88% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 245 88% 11%;
  --primary: 197 98% 45%;
  --primary-foreground: 0 0% 100%;
  --secondary: 173 67% 51%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 13% 91%;
  --muted-foreground: 220 9% 46%;
  --accent: 197 84% 73%;
  --accent-foreground: 245 88% 11%;
  --destructive: 355 100% 68%;
  --destructive-foreground: 0 0% 100%;
  --success: 173 67% 51%;
  --success-foreground: 0 0% 100%;
  --warning: 50 99% 48%;
  --warning-foreground: 245 88% 11%;
  --info: 197 98% 45%;
  --info-foreground: 0 0% 100%;
  --border: 218 14% 84%;
  --input: 218 14% 84%;
  --ring: 197 98% 45%;
  --radius: .75rem;
  --chart-1: 197 98% 45%;
  --chart-2: 173 67% 51%;
  --chart-3: 355 100% 68%;
  --chart-4: 50 99% 48%;
  --chart-5: 245 88% 11%;
}

.dark {
  --background: 245 52% 9%;
  --foreground: 220 20% 97%;
  --card: 244 45% 17%;
  --card-foreground: 220 20% 97%;
  --popover: 244 45% 17%;
  --popover-foreground: 220 20% 97%;
  --primary: 197 84% 73%;
  --primary-foreground: 245 88% 11%;
  --secondary: 166 66% 77%;
  --secondary-foreground: 245 88% 11%;
  --muted: 243 43% 22%;
  --muted-foreground: 220 9% 62%;
  --accent: 243 43% 22%;
  --accent-foreground: 220 20% 97%;
  --destructive: 354 89% 85%;
  --destructive-foreground: 245 88% 11%;
  --success: 166 66% 77%;
  --success-foreground: 245 88% 11%;
  --warning: 48 100% 63%;
  --warning-foreground: 245 88% 11%;
  --info: 197 84% 73%;
  --info-foreground: 245 88% 11%;
  --border: 243 32% 33%;
  --input: 243 32% 33%;
  --ring: 197 84% 73%;
  --chart-1: 197 84% 73%;
  --chart-2: 166 66% 77%;
  --chart-3: 354 89% 85%;
  --chart-4: 48 100% 63%;
  --chart-5: 220 20% 97%;
}

body {
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: var(--font-family-primary, "DM Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--muted) / .3);
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--muted-foreground) / .3);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--muted-foreground) / .5);
}

* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

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

.skeleton {
  background-color: rgb(var(--muted) / .5);
  border-radius: .25rem;
  animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse;
}

.dark .glass {
  background-color: #0000001a;
  border-color: #ffffff1a;
}

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

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-inset-1 {
  inset: -.25rem;
}

.-inset-2 {
  inset: -.5rem;
}

.inset-0 {
  inset: 0;
}

.inset-1 {
  inset: .25rem;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.inset-y-2 {
  top: .5rem;
  bottom: .5rem;
}

.-bottom-0\.5 {
  bottom: -.125rem;
}

.-bottom-1 {
  bottom: -.25rem;
}

.-bottom-4 {
  bottom: -1rem;
}

.-left-2 {
  left: -.5rem;
}

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

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

.-left-\[9px\] {
  left: -9px;
}

.-right-0\.5 {
  right: -.125rem;
}

.-right-1 {
  right: -.25rem;
}

.-right-2 {
  right: -.5rem;
}

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

.-top-0\.5 {
  top: -.125rem;
}

.-top-1 {
  top: -.25rem;
}

.-top-16 {
  top: -4rem;
}

.-top-2 {
  top: -.5rem;
}

.-top-3 {
  top: -.75rem;
}

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

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

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

.bottom-0 {
  bottom: 0;
}

.bottom-3 {
  bottom: .75rem;
}

.bottom-4 {
  bottom: 1rem;
}

.bottom-6 {
  bottom: 1.5rem;
}

.bottom-8 {
  bottom: 2rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0;
}

.left-1 {
  left: .25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-12 {
  left: 3rem;
}

.left-2 {
  left: .5rem;
}

.left-3 {
  left: .75rem;
}

.left-4 {
  left: 1rem;
}

.left-5 {
  left: 1.25rem;
}

.left-6 {
  left: 1.5rem;
}

.left-8 {
  left: 2rem;
}

.left-\[50\%\] {
  left: 50%;
}

.left-\[75\%\] {
  left: 75%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0;
}

.right-1 {
  right: .25rem;
}

.right-2 {
  right: .5rem;
}

.right-2\.5 {
  right: .625rem;
}

.right-3 {
  right: .75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.right-full {
  right: 100%;
}

.top-0 {
  top: 0;
}

.top-1 {
  top: .25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-12 {
  top: 3rem;
}

.top-2 {
  top: .5rem;
}

.top-2\.5 {
  top: .625rem;
}

.top-3 {
  top: .75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.top-8 {
  top: 2rem;
}

.top-\[50\%\] {
  top: 50%;
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.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-\[100\] {
  z-index: 100;
}

.z-\[120\] {
  z-index: 120;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

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

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

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

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

.m-1 {
  margin: .25rem;
}

.m-auto {
  margin: auto;
}

.-mx-1 {
  margin-left: -.25rem;
  margin-right: -.25rem;
}

.-mx-2 {
  margin-left: -.5rem;
  margin-right: -.5rem;
}

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

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.mx-0\.5 {
  margin-left: .125rem;
  margin-right: .125rem;
}

.mx-1 {
  margin-left: .25rem;
  margin-right: .25rem;
}

.mx-2 {
  margin-left: .5rem;
  margin-right: .5rem;
}

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

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

.my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.my-2 {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

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

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mb-1 {
  margin-bottom: -.25rem;
}

.-mb-12 {
  margin-bottom: -3rem;
}

.-ml-12 {
  margin-left: -3rem;
}

.-mr-16 {
  margin-right: -4rem;
}

.-mt-1 {
  margin-top: -.25rem;
}

.-mt-16 {
  margin-top: -4rem;
}

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

.-mt-px {
  margin-top: -1px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-0\.5 {
  margin-bottom: .125rem;
}

.mb-1 {
  margin-bottom: .25rem;
}

.mb-1\.5 {
  margin-bottom: .375rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: .5rem;
}

.mb-3 {
  margin-bottom: .75rem;
}

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

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

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

.ml-0 {
  margin-left: 0;
}

.ml-0\.5 {
  margin-left: .125rem;
}

.ml-1 {
  margin-left: .25rem;
}

.ml-1\.5 {
  margin-left: .375rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.ml-11 {
  margin-left: 2.75rem;
}

.ml-12 {
  margin-left: 3rem;
}

.ml-2 {
  margin-left: .5rem;
}

.ml-2\.5 {
  margin-left: .625rem;
}

.ml-3 {
  margin-left: .75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.ml-7 {
  margin-left: 1.75rem;
}

.ml-8 {
  margin-left: 2rem;
}

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

.mr-0 {
  margin-right: 0;
}

.mr-0\.5 {
  margin-right: .125rem;
}

.mr-1 {
  margin-right: .25rem;
}

.mr-1\.5 {
  margin-right: .375rem;
}

.mr-2 {
  margin-right: .5rem;
}

.mr-3 {
  margin-right: .75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-0\.5 {
  margin-top: .125rem;
}

.mt-1 {
  margin-top: .25rem;
}

.mt-1\.5 {
  margin-top: .375rem;
}

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

.mt-2 {
  margin-top: .5rem;
}

.mt-3 {
  margin-top: .75rem;
}

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

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

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

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

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

.mt-auto {
  margin-top: auto;
}

.line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.\!flex {
  display: flex !important;
}

.flex {
  display: flex;
}

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

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.\!h-auto {
  height: auto !important;
}

.h-0 {
  height: 0;
}

.h-0\.5 {
  height: .125rem;
}

.h-1 {
  height: .25rem;
}

.h-1\.5 {
  height: .375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: .5rem;
}

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

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3 {
  height: .75rem;
}

.h-3\.5 {
  height: .875rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

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

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

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

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

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

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

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

.h-\[calc\(100vh-4rem\)\] {
  height: calc(100vh - 4rem);
}

.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-32 {
  max-height: 8rem;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-96 {
  max-height: 24rem;
}

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

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

.max-h-\[500px\] {
  max-height: 500px;
}

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

.max-h-\[600px\] {
  max-height: 600px;
}

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

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

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

.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}

.max-h-screen {
  max-height: 100vh;
}

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

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

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

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

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

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

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

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

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

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

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

.min-h-\[60vh\] {
  min-height: 60vh;
}

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

.min-h-\[80vh\] {
  min-height: 80vh;
}

.min-h-\[calc\(100vh-200px\)\] {
  min-height: calc(100vh - 200px);
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0;
}

.w-0\.5 {
  width: .125rem;
}

.w-1 {
  width: .25rem;
}

.w-1\.5 {
  width: .375rem;
}

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

.w-1\/3 {
  width: 33.3333%;
}

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

.w-1\/6 {
  width: 16.6667%;
}

.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: .5rem;
}

.w-2\.5 {
  width: .625rem;
}

.w-2\/3 {
  width: 66.6667%;
}

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

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: .75rem;
}

.w-3\.5 {
  width: .875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-4\/5 {
  width: 80%;
}

.w-4\/6 {
  width: 66.6667%;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-5\/6 {
  width: 83.3333%;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-80 {
  width: 20rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.w-fit {
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0;
}

.min-w-24 {
  min-width: 6rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}

.min-w-full {
  min-width: 100%;
}

.max-w-20 {
  max-width: 5rem;
}

.max-w-24 {
  max-width: 6rem;
}

.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-\[100px\] {
  max-width: 100px;
}

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

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

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

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

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

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

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

.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;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0, .shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.caption-bottom {
  caption-side: bottom;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}

.origin-left {
  transform-origin: 0;
}

.-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-x-24 {
  --tw-translate-x: -6rem;
  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-y-32 {
  --tw-translate-y: -8rem;
  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-1 {
  --tw-translate-x: .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));
}

.translate-x-32 {
  --tw-translate-x: 8rem;
  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-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.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-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  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-\[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));
}

.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% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}

.animate-bounce {
  animation: 1s infinite bounce;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: .2s ease-in-out fade-in;
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

.animate-ping {
  animation: 1s cubic-bezier(0, 0, .2, 1) infinite ping;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: 2s cubic-bezier(.4, 0, .6, 1) infinite pulse;
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: .5s cubic-bezier(.68, -.55, .265, 1.55) scale-in;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.animate-shimmer {
  animation: 2s infinite shimmer;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: .2s ease-in-out slide-in-right;
}

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

.animate-spin {
  animation: 1s linear infinite spin;
}

.cursor-default {
  cursor: default;
}

.cursor-grab {
  cursor: grab;
}

.cursor-help {
  cursor: help;
}

.cursor-move {
  cursor: move;
}

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.touch-none {
  touch-action: none;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.appearance-none {
  appearance: none;
}

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

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

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

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

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

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

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

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

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

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

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

.flex-col-reverse {
  flex-direction: column-reverse;
}

.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;
}

.items-stretch {
  align-items: stretch;
}

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

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

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

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

.gap-0\.5 {
  gap: .125rem;
}

.gap-1 {
  gap: .25rem;
}

.gap-1\.5 {
  gap: .375rem;
}

.gap-2 {
  gap: .5rem;
}

.gap-2\.5 {
  gap: .625rem;
}

.gap-3 {
  gap: .75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

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

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

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

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(.75rem * var(--tw-space-x-reverse));
  margin-left: calc(.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-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

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

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

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

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

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

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

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

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

.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-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-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.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 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: .25rem;
}

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

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: var(--radius);
}

.rounded-md {
  border-radius: calc(var(--radius)  - 2px);
}

.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: calc(var(--radius)  - 4px);
}

.rounded-xl {
  border-radius: .75rem;
}

.rounded-b-full {
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.rounded-b-xl {
  border-bottom-right-radius: .75rem;
  border-bottom-left-radius: .75rem;
}

.rounded-l {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.rounded-r {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.rounded-r-lg {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.rounded-r-xl {
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

.rounded-t-lg {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.rounded-t-sm {
  border-top-left-radius: calc(var(--radius)  - 4px);
  border-top-right-radius: calc(var(--radius)  - 4px);
}

.rounded-t-xl {
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}

.rounded-br-sm {
  border-bottom-right-radius: calc(var(--radius)  - 4px);
}

.rounded-tl-none {
  border-top-left-radius: 0;
}

.rounded-tl-sm {
  border-top-left-radius: calc(var(--radius)  - 4px);
}

.rounded-tr-none {
  border-top-right-radius: 0;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0;
}

.border-2 {
  border-width: 2px;
}

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

.border-8 {
  border-width: 8px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

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

.border-l-2 {
  border-left-width: 2px;
}

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

.border-l-\[6px\] {
  border-left-width: 6px;
}

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

.border-r-4 {
  border-right-width: 4px;
}

.border-r-\[6px\] {
  border-right-width: 6px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-t-\[6px\] {
  border-top-width: 6px;
}

.border-t-\[8px\] {
  border-top-width: 8px;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[\#2ed6c5\] {
  --tw-border-opacity: 1;
  border-color: rgb(46 214 197 / var(--tw-border-opacity, 1));
}

.border-\[\#80d0f4\] {
  --tw-border-opacity: 1;
  border-color: rgb(128 208 244 / var(--tw-border-opacity, 1));
}

.border-\[\#d1d5db\] {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-\[\#f6cd01\] {
  --tw-border-opacity: 1;
  border-color: rgb(246 205 1 / var(--tw-border-opacity, 1));
}

.border-\[\#ff5a6a\] {
  --tw-border-opacity: 1;
  border-color: rgb(255 90 106 / var(--tw-border-opacity, 1));
}

.border-\[couleur\] {
  border-color: couleur;
}

.border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-amber-500 {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-amber-500\/20 {
  border-color: #f59e0b33;
}

.border-amber-600 {
  --tw-border-opacity: 1;
  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-blue-100 {
  --tw-border-opacity: 1;
  border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 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 / var(--tw-border-opacity, 1));
}

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

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

.border-blue-500\/20 {
  border-color: #3b82f633;
}

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

.border-border {
  border-color: hsl(var(--border));
}

.border-current {
  border-color: currentColor;
}

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

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

.border-destructive {
  border-color: hsl(var(--destructive));
}

.border-destructive\/20 {
  border-color: hsl(var(--destructive) / .2);
}

.border-destructive\/50 {
  border-color: hsl(var(--destructive) / .5);
}

.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}

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

.border-emerald-500 {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.border-error\/20 {
  border-color: #ef444433;
}

.border-error\/30 {
  border-color: #ef44444d;
}

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

.border-gray-200 {
  --tw-border-opacity: 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 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

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

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

.border-green-100 {
  --tw-border-opacity: 1;
  border-color: rgb(220 252 231 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

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

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-500\/20 {
  border-color: #22c55e33;
}

.border-green-600 {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.border-input {
  border-color: hsl(var(--input));
}

.border-muted {
  border-color: hsl(var(--muted));
}

.border-muted-foreground\/30 {
  border-color: hsl(var(--muted-foreground) / .3);
}

.border-neutral-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}

.border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}

.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.border-orange-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 237 213 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-orange-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

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

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

.border-orange-500\/20 {
  border-color: #f9731633;
}

.border-orange-600 {
  --tw-border-opacity: 1;
  border-color: rgb(234 88 12 / var(--tw-border-opacity, 1));
}

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

.border-primary {
  border-color: hsl(var(--primary));
}

.border-primary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(224 231 255 / var(--tw-border-opacity, 1));
}

.border-primary-500 {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.border-primary-600 {
  --tw-border-opacity: 1;
  border-color: rgb(91 93 230 / var(--tw-border-opacity, 1));
}

.border-primary\/20 {
  border-color: hsl(var(--primary) / .2);
}

.border-primary\/40 {
  border-color: hsl(var(--primary) / .4);
}

.border-purple-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
}

.border-purple-200 {
  --tw-border-opacity: 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 / var(--tw-border-opacity, 1));
}

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

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

.border-purple-500\/20 {
  border-color: #a855f733;
}

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

.border-red-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 226 226 / var(--tw-border-opacity, 1));
}

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

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

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

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

.border-red-600 {
  --tw-border-opacity: 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 / var(--tw-border-opacity, 1));
}

.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

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

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-500 {
  --tw-border-opacity: 1;
  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.border-success {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.border-success\/30 {
  border-color: #10b9814d;
}

.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}

.border-teal-500 {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}

.border-teal-600 {
  --tw-border-opacity: 1;
  border-color: rgb(13 148 136 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: #0000;
}

.border-violet-200 {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}

.border-warning {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-warning\/20 {
  border-color: #f59e0b33;
}

.border-warning\/30 {
  border-color: #f59e0b4d;
}

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

.border-white\/10 {
  border-color: #ffffff1a;
}

.border-white\/20 {
  border-color: #fff3;
}

.border-white\/30 {
  border-color: #ffffff4d;
}

.border-white\/50 {
  border-color: #ffffff80;
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}

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

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

.border-l-amber-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-l-amber-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.border-l-blue-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

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

.border-l-cyan-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(6 182 212 / var(--tw-border-opacity, 1));
}

.border-l-emerald-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

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

.border-l-green-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-l-indigo-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

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

.border-l-primary-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

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

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

.border-l-teal-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}

.border-l-transparent {
  border-left-color: #0000;
}

.border-l-violet-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}

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

.border-r-transparent {
  border-right-color: #0000;
}

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

.border-t-blue-600 {
  --tw-border-opacity: 1;
  border-top-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

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

.border-t-gray-800 {
  --tw-border-opacity: 1;
  border-top-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
}

.border-t-gray-900 {
  --tw-border-opacity: 1;
  border-top-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.border-t-green-500 {
  --tw-border-opacity: 1;
  border-top-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

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

.border-t-purple-600 {
  --tw-border-opacity: 1;
  border-top-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}

.border-t-transparent {
  border-top-color: #0000;
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#039de3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(3 157 227 / var(--tw-bg-opacity, 1));
}

.bg-\[\#635BFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#bfe7fa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(191 231 250 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e5e7eb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e6f5fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 245 253 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f2f9f8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 249 248 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f6f7f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 247 249 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fff1f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fffef0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 254 240 / var(--tw-bg-opacity, 1));
}

.bg-\[couleur\] {
  background-color: couleur;
}

.bg-accent {
  background-color: hsl(var(--accent));
}

.bg-accent\/50 {
  background-color: hsl(var(--accent) / .5);
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-50\/50 {
  background-color: #fffbeb80;
}

.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10 {
  background-color: #f59e0b1a;
}

.bg-amber-500\/5 {
  background-color: #f59e0b0d;
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-background {
  background-color: hsl(var(--background));
}

.bg-background\/50 {
  background-color: hsl(var(--background) / .5);
}

.bg-background\/95 {
  background-color: hsl(var(--background) / .95);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/30 {
  background-color: #0000004d;
}

.bg-black\/50 {
  background-color: #00000080;
}

.bg-black\/60 {
  background-color: #0009;
}

.bg-black\/80 {
  background-color: #000c;
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

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

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

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

.bg-blue-50\/30 {
  background-color: #eff6ff4d;
}

.bg-blue-50\/50 {
  background-color: #eff6ff80;
}

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

.bg-blue-500\/10 {
  background-color: #3b82f61a;
}

.bg-blue-500\/5 {
  background-color: #3b82f60d;
}

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

.bg-border {
  background-color: hsl(var(--border));
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-current {
  background-color: currentColor;
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}

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

.bg-destructive {
  background-color: hsl(var(--destructive));
}

.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / .1);
}

.bg-destructive\/5 {
  background-color: hsl(var(--destructive) / .05);
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

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

.bg-error\/10 {
  background-color: #ef44441a;
}

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

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

.bg-gray-200\/70 {
  background-color: #e5e7ebb3;
}

.bg-gray-300 {
  --tw-bg-opacity: 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 / var(--tw-bg-opacity, 1));
}

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

.bg-gray-50\/50 {
  background-color: #f9fafb80;
}

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

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

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

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

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

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}

.bg-green-400 {
  --tw-bg-opacity: 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 / var(--tw-bg-opacity, 1));
}

.bg-green-50\/10 {
  background-color: #f0fdf41a;
}

.bg-green-50\/30 {
  background-color: #f0fdf44d;
}

.bg-green-50\/50 {
  background-color: #f0fdf480;
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/10 {
  background-color: #22c55e1a;
}

.bg-green-500\/5 {
  background-color: #22c55e0d;
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}

.bg-indigo-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-muted {
  background-color: hsl(var(--muted));
}

.bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}

.bg-muted\/20 {
  background-color: hsl(var(--muted) / .2);
}

.bg-muted\/30 {
  background-color: hsl(var(--muted) / .3);
}

.bg-muted\/50 {
  background-color: hsl(var(--muted) / .5);
}

.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}

.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}

.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-neutral-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-50\/30 {
  background-color: #fff7ed4d;
}

.bg-orange-50\/50 {
  background-color: #fff7ed80;
}

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

.bg-orange-500\/10 {
  background-color: #f973161a;
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-popover {
  background-color: hsl(var(--popover));
}

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

.bg-primary-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-primary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-primary-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(91 93 230 / var(--tw-bg-opacity, 1));
}

.bg-primary-foreground\/20 {
  background-color: hsl(var(--primary-foreground) / .2);
}

.bg-primary\/10 {
  background-color: hsl(var(--primary) / .1);
}

.bg-primary\/20 {
  background-color: hsl(var(--primary) / .2);
}

.bg-primary\/5 {
  background-color: hsl(var(--primary) / .05);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

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

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50\/50 {
  background-color: #faf5ff80;
}

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

.bg-purple-500\/10 {
  background-color: #a855f71a;
}

.bg-purple-500\/5 {
  background-color: #a855f70d;
}

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

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

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

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

.bg-red-50\/30 {
  background-color: #fef2f24d;
}

.bg-red-50\/50 {
  background-color: #fef2f280;
}

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

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

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

.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

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

.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}

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

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

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-slate-900\/5 {
  background-color: #0f172a0d;
}

.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-success\/10 {
  background-color: #10b9811a;
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}

.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}

.bg-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: #0000;
}

.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}

.bg-violet-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(221 214 254 / var(--tw-bg-opacity, 1));
}

.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

.bg-violet-50\/50 {
  background-color: #f5f3ff80;
}

.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}

.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-warning\/10 {
  background-color: #f59e0b1a;
}

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

.bg-white\/10 {
  background-color: #ffffff1a;
}

.bg-white\/20 {
  background-color: #fff3;
}

.bg-white\/5 {
  background-color: #ffffff0d;
}

.bg-white\/50 {
  background-color: #ffffff80;
}

.bg-white\/60 {
  background-color: #fff9;
}

.bg-white\/70 {
  background-color: #ffffffb3;
}

.bg-white\/80 {
  background-color: #fffc;
}

.bg-white\/90 {
  background-color: #ffffffe6;
}

.bg-white\/95 {
  background-color: #fffffff2;
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-100\/60 {
  background-color: #fef9c399;
}

.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50\/50 {
  background-color: #fefce880;
}

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

.bg-yellow-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50 {
  --tw-bg-opacity: .5;
}

.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-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-\[\#039de3\] {
  --tw-gradient-from: #039de3 var(--tw-gradient-from-position);
  --tw-gradient-to: #039de300 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#e6f5fd\] {
  --tw-gradient-from: #e6f5fd var(--tw-gradient-from-position);
  --tw-gradient-to: #e6f5fd00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#f2f9f8\] {
  --tw-gradient-from: #f2f9f8 var(--tw-gradient-from-position);
  --tw-gradient-to: #f2f9f800 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#f6f7f9\] {
  --tw-gradient-from: #f6f7f9 var(--tw-gradient-from-position);
  --tw-gradient-to: #f6f7f900 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[\#fffef0\] {
  --tw-gradient-from: #fffef0 var(--tw-gradient-from-position);
  --tw-gradient-to: #fffef000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-100 {
  --tw-gradient-from: #fef3c7 var(--tw-gradient-from-position);
  --tw-gradient-to: #fef3c700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-400 {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: #fbbf2400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-50 {
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: #fffbeb00 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: #f59e0b00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-background {
  --tw-gradient-from: hsl(var(--background)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--background) / 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: #0000 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: #dbeafe00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-200 {
  --tw-gradient-from: #bfdbfe var(--tw-gradient-from-position);
  --tw-gradient-to: #bfdbfe00 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: #60a5fa00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-50 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
  --tw-gradient-to: #eff6ff00 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: #3b82f600 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500\/5 {
  --tw-gradient-from: #3b82f60d var(--tw-gradient-from-position);
  --tw-gradient-to: #3b82f600 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: #2563eb00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyan-50 {
  --tw-gradient-from: #ecfeff var(--tw-gradient-from-position);
  --tw-gradient-to: #ecfeff00 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: #06b6d400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-100 {
  --tw-gradient-from: #d1fae5 var(--tw-gradient-from-position);
  --tw-gradient-to: #d1fae500 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-50 {
  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
  --tw-gradient-to: #ecfdf500 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: #10b98100 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: #05966900 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-100 {
  --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
  --tw-gradient-to: #f3f4f600 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: #d1d5db00 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: #9ca3af00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-50 {
  --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
  --tw-gradient-to: #f9fafb00 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: #4b556300 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-700 {
  --tw-gradient-from: #374151 var(--tw-gradient-from-position);
  --tw-gradient-to: #37415100 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: #11182700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-100 {
  --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position);
  --tw-gradient-to: #dcfce700 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: #4ade8000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-50 {
  --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position);
  --tw-gradient-to: #f0fdf400 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: #22c55e00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500\/5 {
  --tw-gradient-from: #22c55e0d var(--tw-gradient-from-position);
  --tw-gradient-to: #22c55e00 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: #16a34a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: #eef2ff00 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: #6366f100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-neutral-50 {
  --tw-gradient-from: #fafafa var(--tw-gradient-from-position);
  --tw-gradient-to: #fafafa00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-300 {
  --tw-gradient-from: #fdba74 var(--tw-gradient-from-position);
  --tw-gradient-to: #fdba7400 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: #fb923c00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-50 {
  --tw-gradient-from: #fff7ed var(--tw-gradient-from-position);
  --tw-gradient-to: #fff7ed00 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: #f9731600 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: #ea580c00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-100 {
  --tw-gradient-from: #fce7f3 var(--tw-gradient-from-position);
  --tw-gradient-to: #fce7f300 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pink-50 {
  --tw-gradient-from: #fdf2f8 var(--tw-gradient-from-position);
  --tw-gradient-to: #fdf2f800 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: #ec489900 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary {
  --tw-gradient-from: hsl(var(--primary)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-100 {
  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
  --tw-gradient-to: #e0e7ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-50 {
  --tw-gradient-from: #eef2ff var(--tw-gradient-from-position);
  --tw-gradient-to: #eef2ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: #6366f100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-600 {
  --tw-gradient-from: #5b5de6 var(--tw-gradient-from-position);
  --tw-gradient-to: #5b5de600 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/5 {
  --tw-gradient-from: hsl(var(--primary) / .05) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-100 {
  --tw-gradient-from: #f3e8ff var(--tw-gradient-from-position);
  --tw-gradient-to: #f3e8ff00 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: #c084fc00 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: #faf5ff00 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: #a855f700 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: #9333ea00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: #f8717100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-50 {
  --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position);
  --tw-gradient-to: #fef2f200 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: #ef444400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-50 {
  --tw-gradient-from: #fff1f2 var(--tw-gradient-from-position);
  --tw-gradient-to: #fff1f200 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: #f8fafc00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-800 {
  --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
  --tw-gradient-to: #1e293b00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: #0f172a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-100 {
  --tw-gradient-from: #ccfbf1 var(--tw-gradient-from-position);
  --tw-gradient-to: #ccfbf100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-50 {
  --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position);
  --tw-gradient-to: #f0fdfa00 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: #14b8a600 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: #0d948800 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: #0000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-violet-50 {
  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
  --tw-gradient-to: #f5f3ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white\/30 {
  --tw-gradient-from: #ffffff4d var(--tw-gradient-from-position);
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-100 {
  --tw-gradient-from: #fef9c3 var(--tw-gradient-from-position);
  --tw-gradient-to: #fef9c300 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: #fde04700 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: #facc1500 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-yellow-50 {
  --tw-gradient-from: #fefce8 var(--tw-gradient-from-position);
  --tw-gradient-to: #fefce800 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: #eab30800 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-\[\#1aa8e8\] {
  --tw-gradient-to: #1aa8e800 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1aa8e8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-background {
  --tw-gradient-to: hsl(var(--background) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--background)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-50 {
  --tw-gradient-to: #eff6ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-50\/30 {
  --tw-gradient-to: #eff6ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eff6ff4d var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-500 {
  --tw-gradient-to: #3b82f600 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-blue-600 {
  --tw-gradient-to: #2563eb00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-cyan-50 {
  --tw-gradient-to: #ecfeff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ecfeff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-cyan-500 {
  --tw-gradient-to: #06b6d400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-emerald-50 {
  --tw-gradient-to: #ecfdf500 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ecfdf5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gray-400 {
  --tw-gradient-to: #9ca3af00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9ca3af var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gray-500 {
  --tw-gradient-to: #6b728000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #6b7280 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-green-50 {
  --tw-gradient-to: #f0fdf400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0fdf4 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-green-500 {
  --tw-gradient-to: #22c55e00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-indigo-50 {
  --tw-gradient-to: #eef2ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #eef2ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-300 {
  --tw-gradient-to: #fdba7400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fdba74 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-400 {
  --tw-gradient-to: #fb923c00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-50 {
  --tw-gradient-to: #fff7ed00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff7ed var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-500 {
  --tw-gradient-to: #f9731600 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f97316 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-200 {
  --tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-50 {
  --tw-gradient-to: #faf5ff00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #faf5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-500 {
  --tw-gradient-to: #a855f700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-purple-600 {
  --tw-gradient-to: #9333ea00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-red-500 {
  --tw-gradient-to: #ef444400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ef4444 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-teal-50 {
  --tw-gradient-to: #f0fdfa00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0fdfa var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-white\/30 {
  --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff4d var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-yellow-400 {
  --tw-gradient-to: #facc1500 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #facc15 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#1aa8e8\] {
  --tw-gradient-to: #1aa8e8 var(--tw-gradient-to-position);
}

.to-\[\#33b4ec\] {
  --tw-gradient-to: #33b4ec var(--tw-gradient-to-position);
}

.to-\[\#bfe7fa\] {
  --tw-gradient-to: #bfe7fa var(--tw-gradient-to-position);
}

.to-\[\#e5e7eb\] {
  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
}

.to-\[\#e6f5fd\] {
  --tw-gradient-to: #e6f5fd var(--tw-gradient-to-position);
}

.to-\[\#fff9d0\] {
  --tw-gradient-to: #fff9d0 var(--tw-gradient-to-position);
}

.to-amber-100 {
  --tw-gradient-to: #fef3c7 var(--tw-gradient-to-position);
}

.to-amber-50 {
  --tw-gradient-to: #fffbeb var(--tw-gradient-to-position);
}

.to-amber-500 {
  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}

.to-amber-600 {
  --tw-gradient-to: #d97706 var(--tw-gradient-to-position);
}

.to-blue-100 {
  --tw-gradient-to: #dbeafe 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 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}

.to-blue-500 {
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb 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-cyan-100 {
  --tw-gradient-to: #cffafe var(--tw-gradient-to-position);
}

.to-cyan-50 {
  --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
}

.to-cyan-50\/20 {
  --tw-gradient-to: #ecfeff33 var(--tw-gradient-to-position);
}

.to-cyan-500 {
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}

.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}

.to-emerald-100 {
  --tw-gradient-to: #d1fae5 var(--tw-gradient-to-position);
}

.to-emerald-50 {
  --tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);
}

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

.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-gray-100 {
  --tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position);
}

.to-gray-200 {
  --tw-gradient-to: #e5e7eb var(--tw-gradient-to-position);
}

.to-gray-50 {
  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
}

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

.to-gray-900 {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.to-green-100 {
  --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position);
}

.to-green-200 {
  --tw-gradient-to: #bbf7d0 var(--tw-gradient-to-position);
}

.to-green-300 {
  --tw-gradient-to: #86efac var(--tw-gradient-to-position);
}

.to-green-50 {
  --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position);
}

.to-green-500 {
  --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}

.to-green-600 {
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-green-700 {
  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
}

.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-indigo-500 {
  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-muted\/20 {
  --tw-gradient-to: hsl(var(--muted) / .2) var(--tw-gradient-to-position);
}

.to-orange-100 {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position);
}

.to-orange-100\/50 {
  --tw-gradient-to: #ffedd580 var(--tw-gradient-to-position);
}

.to-orange-400 {
  --tw-gradient-to: #fb923c var(--tw-gradient-to-position);
}

.to-orange-50 {
  --tw-gradient-to: #fff7ed var(--tw-gradient-to-position);
}

.to-orange-500 {
  --tw-gradient-to: #f97316 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-100 {
  --tw-gradient-to: #fce7f3 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-600 {
  --tw-gradient-to: #db2777 var(--tw-gradient-to-position);
}

.to-primary-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}

.to-primary-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}

.to-primary-50\/30 {
  --tw-gradient-to: #eef2ff4d var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: #5b5de6 var(--tw-gradient-to-position);
}

.to-primary\/70 {
  --tw-gradient-to: hsl(var(--primary) / .7) var(--tw-gradient-to-position);
}

.to-purple-100 {
  --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
}

.to-purple-50 {
  --tw-gradient-to: #faf5ff var(--tw-gradient-to-position);
}

.to-purple-500 {
  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
}

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

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

.to-red-100 {
  --tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);
}

.to-red-400 {
  --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}

.to-red-50 {
  --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position);
}

.to-red-500 {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-rose-100 {
  --tw-gradient-to: #ffe4e6 var(--tw-gradient-to-position);
}

.to-rose-50 {
  --tw-gradient-to: #fff1f2 var(--tw-gradient-to-position);
}

.to-rose-500 {
  --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
}

.to-rose-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}

.to-secondary\/5 {
  --tw-gradient-to: hsl(var(--secondary) / .05) var(--tw-gradient-to-position);
}

.to-slate-100 {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}

.to-slate-50 {
  --tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
}

.to-slate-500 {
  --tw-gradient-to: #64748b var(--tw-gradient-to-position);
}

.to-slate-600 {
  --tw-gradient-to: #475569 var(--tw-gradient-to-position);
}

.to-slate-800 {
  --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
}

.to-slate-900 {
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}

.to-teal-200 {
  --tw-gradient-to: #99f6e4 var(--tw-gradient-to-position);
}

.to-teal-50 {
  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
}

.to-teal-500 {
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
}

.to-teal-500\/5 {
  --tw-gradient-to: #14b8a60d 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-50 {
  --tw-gradient-to: #f5f3ff var(--tw-gradient-to-position);
}

.to-violet-600 {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.to-yellow-100 {
  --tw-gradient-to: #fef9c3 var(--tw-gradient-to-position);
}

.to-yellow-50 {
  --tw-gradient-to: #fefce8 var(--tw-gradient-to-position);
}

.to-yellow-600 {
  --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position);
}

.bg-\[length\:200\%_200\%\] {
  background-size: 200% 200%;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.fill-blue-500 {
  fill: #3b82f6;
}

.fill-current {
  fill: currentColor;
}

.fill-emerald-600 {
  fill: #059669;
}

.fill-foreground {
  fill: hsl(var(--foreground));
}

.fill-gray-900 {
  fill: #111827;
}

.fill-primary {
  fill: hsl(var(--primary));
}

.fill-primary\/20 {
  fill: hsl(var(--primary) / .2);
}

.fill-slate-700 {
  fill: #334155;
}

.fill-white {
  fill: #fff;
}

.fill-yellow-400 {
  fill: #facc15;
}

.fill-yellow-500 {
  fill: #eab308;
}

.stroke-gray-200 {
  stroke: #e5e7eb;
}

.stroke-green-500 {
  stroke: #22c55e;
}

.stroke-muted\/30 {
  stroke: hsl(var(--muted) / .3);
}

.stroke-red-500 {
  stroke: #ef4444;
}

.stroke-yellow-500 {
  stroke: #eab308;
}

.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.\!p-0 {
  padding: 0 !important;
}

.\!p-2 {
  padding: .5rem !important;
}

.p-0 {
  padding: 0;
}

.p-0\.5 {
  padding: .125rem;
}

.p-1 {
  padding: .25rem;
}

.p-1\.5 {
  padding: .375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: .5rem;
}

.p-2\.5 {
  padding: .625rem;
}

.p-3 {
  padding: .75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0\.5 {
  padding-left: .125rem;
  padding-right: .125rem;
}

.px-1 {
  padding-left: .25rem;
  padding-right: .25rem;
}

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

.px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.px-2\.5 {
  padding-left: .625rem;
  padding-right: .625rem;
}

.px-3 {
  padding-left: .75rem;
  padding-right: .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 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

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

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

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

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

.py-3 {
  padding-top: .75rem;
  padding-bottom: .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: 0;
}

.pb-1 {
  padding-bottom: .25rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

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

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: .75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

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

.pl-1 {
  padding-left: .25rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: .5rem;
}

.pl-3 {
  padding-left: .75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-9 {
  padding-left: 2.25rem;
}

.pr-1 {
  padding-right: .25rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-2 {
  padding-right: .5rem;
}

.pr-3 {
  padding-right: .75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-0\.5 {
  padding-top: .125rem;
}

.pt-1 {
  padding-top: .25rem;
}

.pt-2 {
  padding-top: .5rem;
}

.pt-3 {
  padding-top: .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-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: Fira Code, monospace;
}

.font-sans {
  font-family: Inter, system-ui, sans-serif;
}

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

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

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

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

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

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

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

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

.text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -.025em;
}

.tracking-wide {
  letter-spacing: .025em;
}

.tracking-wider {
  letter-spacing: .05em;
}

.tracking-widest {
  letter-spacing: .1em;
}

.text-\[\#00354d\] {
  --tw-text-opacity: 1;
  color: rgb(0 53 77 / var(--tw-text-opacity, 1));
}

.text-\[\#014f70\] {
  --tw-text-opacity: 1;
  color: rgb(1 79 112 / var(--tw-text-opacity, 1));
}

.text-\[\#039de3\] {
  --tw-text-opacity: 1;
  color: rgb(3 157 227 / var(--tw-text-opacity, 1));
}

.text-\[\#070433\] {
  --tw-text-opacity: 1;
  color: rgb(7 4 51 / var(--tw-text-opacity, 1));
}

.text-\[\#2ed6c5\] {
  --tw-text-opacity: 1;
  color: rgb(46 214 197 / var(--tw-text-opacity, 1));
}

.text-\[\#374151\] {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-\[\#6b7280\] {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-\[\#f6cd01\] {
  --tw-text-opacity: 1;
  color: rgb(246 205 1 / var(--tw-text-opacity, 1));
}

.text-\[\#ff5a6a\] {
  --tw-text-opacity: 1;
  color: rgb(255 90 106 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

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

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-card-foreground {
  color: hsl(var(--card-foreground));
}

.text-current {
  color: currentColor;
}

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

.text-cyan-600 {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}

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

.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}

.text-cyan-900 {
  --tw-text-opacity: 1;
  color: rgb(22 78 99 / var(--tw-text-opacity, 1));
}

.text-destructive {
  color: hsl(var(--destructive));
}

.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}

.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.text-error {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.text-foreground\/50 {
  color: hsl(var(--foreground) / .5);
}

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

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

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

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

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

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

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

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

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}

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

.text-green-50 {
  --tw-text-opacity: 1;
  color: rgb(240 253 244 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

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

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.text-indigo-900 {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color: inherit;
}

.text-muted {
  color: hsl(var(--muted));
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / .4);
}

.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / .5);
}

.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / .6);
}

.text-muted-foreground\/80 {
  color: hsl(var(--muted-foreground) / .8);
}

.text-neutral-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
}

.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}

.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

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

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

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

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

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-orange-900 {
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}

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

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

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

.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-pink-900 {
  --tw-text-opacity: 1;
  color: rgb(131 24 67 / var(--tw-text-opacity, 1));
}

.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}

.text-primary {
  color: hsl(var(--primary));
}

.text-primary-100 {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}

.text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-primary-600 {
  --tw-text-opacity: 1;
  color: rgb(91 93 230 / var(--tw-text-opacity, 1));
}

.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}

.text-primary\/70 {
  color: hsl(var(--primary) / .7);
}

.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}

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

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

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

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

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-purple-900 {
  --tw-text-opacity: 1;
  color: rgb(88 28 135 / var(--tw-text-opacity, 1));
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

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

.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}

.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

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

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

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

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

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

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-success {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}

.text-teal-900 {
  --tw-text-opacity: 1;
  color: rgb(19 78 74 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: #0000;
}

.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}

.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}

.text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}

.text-warning {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

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

.text-white\/80 {
  color: #fffc;
}

.text-white\/90 {
  color: #ffffffe6;
}

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

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

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

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

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.text-yellow-900 {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.decoration-yellow-400\/50 {
  text-decoration-color: #facc1580;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-slate-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(100 116 139 / var(--tw-placeholder-opacity, 1));
}

.accent-amber-500 {
  accent-color: #f59e0b;
}

.accent-blue-500 {
  accent-color: #3b82f6;
}

.accent-blue-600 {
  accent-color: #2563eb;
}

.accent-green-500 {
  accent-color: #22c55e;
}

.accent-orange-500 {
  accent-color: #f97316;
}

.accent-orange-600 {
  accent-color: #ea580c;
}

.accent-primary-500 {
  accent-color: #6366f1;
}

.accent-purple-600 {
  accent-color: #9333ea;
}

.accent-red-600 {
  accent-color: #dc2626;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: .1;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: .2;
}

.opacity-25 {
  opacity: .25;
}

.opacity-30 {
  opacity: .3;
}

.opacity-5 {
  opacity: .05;
}

.opacity-50 {
  opacity: .5;
}

.opacity-60 {
  opacity: .6;
}

.opacity-70 {
  opacity: .7;
}

.opacity-75 {
  opacity: .75;
}

.opacity-80 {
  opacity: .8;
}

.opacity-90 {
  opacity: .9;
}

.opacity-95 {
  opacity: .95;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px #00000040;
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-4px_12px_rgba\(0\,0\,0\,0\.15\)\] {
  --tw-shadow: 0 -4px 12px #00000026;
  --tw-shadow-colored: 0 -4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-blue-100 {
  --tw-shadow-color: #dbeafe;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-blue-500\/30 {
  --tw-shadow-color: #3b82f64d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-blue-500\/50 {
  --tw-shadow-color: #3b82f680;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-gray-500\/30 {
  --tw-shadow-color: #6b72804d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-100 {
  --tw-shadow-color: #dcfce7;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-500\/30 {
  --tw-shadow-color: #22c55e4d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-green-600\/25 {
  --tw-shadow-color: #16a34a40;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-orange-500\/30 {
  --tw-shadow-color: #f973164d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-600\/25 {
  --tw-shadow-color: #5b5de640;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-purple-100 {
  --tw-shadow-color: #f3e8ff;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-purple-500\/30 {
  --tw-shadow-color: #a855f74d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-red-500\/30 {
  --tw-shadow-color: #ef44444d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-slate-500\/30 {
  --tw-shadow-color: #64748b4d;
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-yellow-500\/30 {
  --tw-shadow-color: #eab3084d;
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.outline {
  outline-style: solid;
}

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

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

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

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

.ring-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), var(--tw-shadow, 0 0 #0000);
}

.ring-blue-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}

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

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

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

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

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

.ring-green-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity, 1));
}

.ring-neutral-300 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity, 1));
}

.ring-orange-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity, 1));
}

.ring-primary {
  --tw-ring-color: hsl(var(--primary));
}

.ring-primary-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

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

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

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

.ring-yellow-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 240 138 / var(--tw-ring-opacity, 1));
}

.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}

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

.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) !important;
}

.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-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(20px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-\[stroke-dashoffset\] {
  transition-property: stroke-dashoffset;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-opacity {
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-shadow {
  transition-property: box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.transition-transform {
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.duration-100 {
  transition-duration: .1s;
}

.duration-1000 {
  transition-duration: 1s;
}

.duration-150 {
  transition-duration: .15s;
}

.duration-200 {
  transition-duration: .2s;
}

.duration-300 {
  transition-duration: .3s;
}

.duration-500 {
  transition-duration: .5s;
}

.duration-700 {
  transition-duration: .7s;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

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

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

.animate-in {
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}

.fade-in, .fade-in-0 {
  --tw-enter-opacity: 0;
}

.zoom-in-95 {
  --tw-enter-scale: .95;
}

.slide-in-from-bottom-4 {
  --tw-enter-translate-y: 1rem;
}

.slide-in-from-top-1 {
  --tw-enter-translate-y: -.25rem;
}

.slide-in-from-top-2 {
  --tw-enter-translate-y: -.5rem;
}

.duration-100 {
  animation-duration: .1s;
}

.duration-1000 {
  animation-duration: 1s;
}

.duration-150 {
  animation-duration: .15s;
}

.duration-200 {
  animation-duration: .2s;
}

.duration-300 {
  animation-duration: .3s;
}

.duration-500 {
  animation-duration: .5s;
}

.duration-700 {
  animation-duration: .7s;
}

.ease-in-out {
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.ease-linear {
  animation-timing-function: linear;
}

.ease-out {
  animation-timing-function: cubic-bezier(0, 0, .2, 1);
}

.running {
  animation-play-state: running;
}

.paused {
  animation-play-state: paused;
}

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

.file\:bg-transparent::file-selector-button {
  background-color: #0000;
}

.file\:text-sm::file-selector-button {
  font-size: .875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

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

.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}

.first\:mt-0:first-child {
  margin-top: 0;
}

.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(var(--radius)  - 2px);
  border-bottom-left-radius: calc(var(--radius)  - 2px);
}

.last\:mb-0:last-child {
  margin-bottom: 0;
}

.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(var(--radius)  - 2px);
  border-bottom-right-radius: calc(var(--radius)  - 2px);
}

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

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

.last\:border-l-0:last-child {
  border-left-width: 0;
}

.last\:border-r-0:last-child {
  border-right-width: 0;
}

.last\:pb-0:last-child {
  padding-bottom: 0;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -.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));
}

.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-125:hover {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  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\:border-amber-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}

.hover\:border-amber-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

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

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

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

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

.hover\:border-emerald-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

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

.hover\:border-gray-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.hover\:border-green-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

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

.hover\:border-green-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.hover\:border-muted:hover {
  border-color: hsl(var(--muted));
}

.hover\:border-neutral-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}

.hover\:border-neutral-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
}

.hover\:border-orange-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 186 116 / var(--tw-border-opacity, 1));
}

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

.hover\:border-primary:hover {
  border-color: hsl(var(--primary));
}

.hover\:border-primary\/20:hover {
  border-color: hsl(var(--primary) / .2);
}

.hover\:border-primary\/50:hover {
  border-color: hsl(var(--primary) / .5);
}

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

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

.hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

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

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-teal-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));
}

.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}

.hover\:bg-accent\/50:hover {
  background-color: hsl(var(--accent) / .5);
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-500\/20:hover {
  background-color: #f59e0b33;
}

.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-blue-50\/30:hover {
  background-color: #eff6ff4d;
}

.hover\:bg-blue-50\/50:hover {
  background-color: #eff6ff80;
}

.hover\:bg-blue-500\/20:hover {
  background-color: #3b82f633;
}

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

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

.hover\:bg-destructive\/10:hover {
  background-color: hsl(var(--destructive) / .1);
}

.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / .8);
}

.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / .9);
}

.hover\:bg-emerald-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

.hover\:bg-error\/80:hover {
  background-color: #ef4444cc;
}

.hover\:bg-error\/90:hover {
  background-color: #ef4444e6;
}

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

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

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

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

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

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

.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50\/50:hover {
  background-color: #f0fdf480;
}

.hover\:bg-green-500\/20:hover {
  background-color: #22c55e33;
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-indigo-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}

.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / .5);
}

.hover\:bg-neutral-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-orange-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-primary-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-primary\/20:hover {
  background-color: hsl(var(--primary) / .2);
}

.hover\:bg-primary\/80:hover {
  background-color: hsl(var(--primary) / .8);
}

.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / .9);
}

.hover\:bg-purple-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-purple-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-50\/50:hover {
  background-color: #faf5ff80;
}

.hover\:bg-purple-500\/20:hover {
  background-color: #a855f733;
}

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

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

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

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

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

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

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

.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}

.hover\:bg-secondary-foreground\/10:hover {
  background-color: hsl(var(--secondary-foreground) / .1);
}

.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / .8);
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

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

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

.hover\:bg-success\/80:hover {
  background-color: #10b981cc;
}

.hover\:bg-success\/90:hover {
  background-color: #10b981e6;
}

.hover\:bg-warning\/20:hover {
  background-color: #f59e0b33;
}

.hover\:bg-warning\/80:hover {
  background-color: #f59e0bcc;
}

.hover\:bg-warning\/90:hover {
  background-color: #f59e0be6;
}

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

.hover\:bg-white\/15:hover {
  background-color: #ffffff26;
}

.hover\:bg-white\/30:hover {
  background-color: #ffffff4d;
}

.hover\:bg-white\/50:hover {
  background-color: #ffffff80;
}

.hover\:bg-yellow-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-yellow-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: .5;
}

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

.hover\:from-green-600:hover {
  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to: #16a34a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

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

.hover\:text-\[\#0289c6\]:hover {
  --tw-text-opacity: 1;
  color: rgb(2 137 198 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}

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

.hover\:text-blue-600:hover {
  --tw-text-opacity: 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 / var(--tw-text-opacity, 1));
}

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

.hover\:text-destructive:hover {
  color: hsl(var(--destructive));
}

.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}

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

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

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

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

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

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

.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}

.hover\:text-neutral-600:hover {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}

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

.hover\:text-neutral-800:hover {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-neutral-900:hover {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
  color: hsl(var(--primary));
}

.hover\:text-primary-600:hover {
  --tw-text-opacity: 1;
  color: rgb(91 93 230 / var(--tw-text-opacity, 1));
}

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

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

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

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

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

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

.hover\:text-slate-400:hover {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-600:hover {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:opacity-70:hover {
  opacity: .7;
}

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

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-amber-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.focus\:border-black:focus {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

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

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

.focus\:border-emerald-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.focus\:border-gray-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.focus\:border-green-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.focus\:border-green-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
}

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

.focus\:border-orange-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(234 88 12 / var(--tw-border-opacity, 1));
}

.focus\:border-primary:focus {
  border-color: hsl(var(--primary));
}

.focus\:border-primary-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

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

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

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

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

.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}

.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}

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

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

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

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

.focus\:ring-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), var(--tw-shadow, 0 0 #0000);
}

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

.focus\:ring-amber-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity, 1));
}

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

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

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

.focus\:ring-emerald-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity, 1));
}

.focus\:ring-emerald-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.focus\:ring-orange-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity, 1));
}

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

.focus\:ring-primary:focus {
  --tw-ring-color: hsl(var(--primary));
}

.focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

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

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

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

.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}

.focus\:ring-slate-900:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity, 1));
}

.focus\:ring-teal-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:outline-none:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

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

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

.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), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-destructive:focus-visible {
  --tw-ring-color: hsl(var(--destructive));
}

.focus-visible\:ring-emerald-500:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: hsl(var(--primary));
}

.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}

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

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

.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

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

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

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

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

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

.disabled\:bg-neutral-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-neutral-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-slate-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

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

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

.disabled\:text-neutral-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}

.disabled\:no-underline:disabled {
  text-decoration-line: none;
}

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

.disabled\:opacity-40:disabled {
  opacity: .4;
}

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

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

.disabled\:hover\:bg-slate-100:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: .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\: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\:bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

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

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

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

.group:hover .group-hover\:text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-0 {
  opacity: 0;
}

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

.group:hover .group-hover\: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), var(--tw-shadow, 0 0 #0000);
}

.group:hover .group-hover\:ring-blue-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(var(--muted) / .4);
}

.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / .3);
}

.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}

.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}

.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}

.peer:checked ~ .peer-checked\:translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

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

.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: .7;
}

.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: .25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: .25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"], .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --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));
}

.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(var(--background));
}

.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}

.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}

.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}

.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(var(--input));
}

.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}

.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}

.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(var(--muted-foreground));
}

.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: .5;
}

.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: .3s;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: .5s;
}

.data-\[state\=open\]\:animate-in[data-state="open"] {
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}

.data-\[state\=closed\]\:animate-out[data-state="closed"], .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
  animation-name: exit;
  animation-duration: .15s;
}

.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}

.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: .8;
}

.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}

.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -.5rem;
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: .5rem;
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -.5rem;
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: .5rem;
}

.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}

.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}

.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"], .data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}

.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}

.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}

.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}

.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}

.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}

.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}

.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: .3s;
}

.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: .5s;
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.peer[data-state="checked"] ~ .peer-data-\[state\=checked\]\:shadow-md {
  --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
  .supports-\[backdrop-filter\]\:bg-background\/60 {
    background-color: hsl(var(--background) / .6);
  }
}

.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}

.dark\:border-\[\#2a285c\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(42 40 92 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#2ed6c5\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(46 214 197 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#80d0f4\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(128 208 244 / var(--tw-border-opacity, 1));
}

.dark\:border-\[\#f6cd01\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(246 205 1 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
}

.dark\:border-amber-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
}

.dark\:border-blue-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.dark\:border-destructive:is(.dark *) {
  border-color: hsl(var(--destructive));
}

.dark\:border-emerald-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}

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

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-green-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}

.dark\:border-green-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-indigo-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(67 56 202 / var(--tw-border-opacity, 1));
}

.dark\:border-indigo-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(55 48 163 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(194 65 12 / var(--tw-border-opacity, 1));
}

.dark\:border-orange-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(124 45 18 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-border-opacity, 1));
}

.dark\:border-purple-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(107 33 168 / var(--tw-border-opacity, 1));
}

.dark\:border-red-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-red-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(127 29 29 / var(--tw-border-opacity, 1));
}

.dark\:border-rose-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(190 18 60 / var(--tw-border-opacity, 1));
}

.dark\:border-slate-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.dark\:border-teal-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(17 94 89 / var(--tw-border-opacity, 1));
}

.dark\:border-yellow-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(161 98 7 / var(--tw-border-opacity, 1));
}

.dark\:border-yellow-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
}

.dark\:border-l-amber-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.dark\:border-l-cyan-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(34 211 238 / var(--tw-border-opacity, 1));
}

.dark\:border-l-emerald-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

.dark\:border-l-violet-400:is(.dark *) {
  --tw-border-opacity: 1;
  border-left-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}

.dark\:bg-\[\#014f70\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(1 79 112 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#014f70\]\/20:is(.dark *) {
  background-color: #014f7033;
}

.dark\:bg-\[\#0d0b24\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(13 11 36 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#151333\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(21 19 51 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#80d0f4\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(128 208 244 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#f6cd01\]\/20:is(.dark *) {
  background-color: #f6cd0133;
}

.dark\:bg-\[\#ff5a6a\]\/20:is(.dark *) {
  background-color: #ff5a6a33;
}

.dark\:bg-amber-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}

.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: #78350f33;
}

.dark\:bg-amber-900\/40:is(.dark *) {
  background-color: #78350f66;
}

.dark\:bg-amber-950\/20:is(.dark *) {
  background-color: #451a0333;
}

.dark\:bg-amber-950\/30:is(.dark *) {
  background-color: #451a034d;
}

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

.dark\:bg-blue-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-900\/20:is(.dark *) {
  background-color: #1e3a8a33;
}

.dark\:bg-blue-900\/30:is(.dark *) {
  background-color: #1e3a8a4d;
}

.dark\:bg-blue-900\/40:is(.dark *) {
  background-color: #1e3a8a66;
}

.dark\:bg-blue-900\/50:is(.dark *) {
  background-color: #1e3a8a80;
}

.dark\:bg-blue-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(23 37 84 / var(--tw-bg-opacity, 1));
}

.dark\:bg-blue-950\/20:is(.dark *) {
  background-color: #17255433;
}

.dark\:bg-blue-950\/30:is(.dark *) {
  background-color: #1725544d;
}

.dark\:bg-cyan-900\/40:is(.dark *) {
  background-color: #164e6366;
}

.dark\:bg-emerald-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(6 95 70 / var(--tw-bg-opacity, 1));
}

.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: #064e3b33;
}

.dark\:bg-emerald-900\/40:is(.dark *) {
  background-color: #064e3b66;
}

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

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

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

.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: #1f293780;
}

.dark\:bg-gray-800\/60:is(.dark *) {
  background-color: #1f293799;
}

.dark\:bg-gray-800\/70:is(.dark *) {
  background-color: #1f2937b3;
}

.dark\:bg-gray-800\/90:is(.dark *) {
  background-color: #1f2937e6;
}

.dark\:bg-gray-800\/95:is(.dark *) {
  background-color: #1f2937f2;
}

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

.dark\:bg-gray-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
}

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

.dark\:bg-green-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-900\/10:is(.dark *) {
  background-color: #14532d1a;
}

.dark\:bg-green-900\/20:is(.dark *) {
  background-color: #14532d33;
}

.dark\:bg-green-900\/30:is(.dark *) {
  background-color: #14532d4d;
}

.dark\:bg-green-900\/40:is(.dark *) {
  background-color: #14532d66;
}

.dark\:bg-green-900\/50:is(.dark *) {
  background-color: #14532d80;
}

.dark\:bg-green-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(5 46 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-green-950\/10:is(.dark *) {
  background-color: #052e161a;
}

.dark\:bg-green-950\/20:is(.dark *) {
  background-color: #052e1633;
}

.dark\:bg-green-950\/30:is(.dark *) {
  background-color: #052e164d;
}

.dark\:bg-indigo-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
}

.dark\:bg-indigo-900\/20:is(.dark *) {
  background-color: #312e8133;
}

.dark\:bg-indigo-900\/40:is(.dark *) {
  background-color: #312e8166;
}

.dark\:bg-indigo-900\/50:is(.dark *) {
  background-color: #312e8180;
}

.dark\:bg-orange-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(124 45 18 / var(--tw-bg-opacity, 1));
}

.dark\:bg-orange-900\/10:is(.dark *) {
  background-color: #7c2d121a;
}

.dark\:bg-orange-900\/20:is(.dark *) {
  background-color: #7c2d1233;
}

.dark\:bg-orange-900\/40:is(.dark *) {
  background-color: #7c2d1266;
}

.dark\:bg-orange-950\/20:is(.dark *) {
  background-color: #43140733;
}

.dark\:bg-pink-900\/40:is(.dark *) {
  background-color: #83184366;
}

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

.dark\:bg-purple-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
}

.dark\:bg-purple-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
}

.dark\:bg-purple-900\/20:is(.dark *) {
  background-color: #581c8733;
}

.dark\:bg-purple-900\/30:is(.dark *) {
  background-color: #581c874d;
}

.dark\:bg-purple-900\/40:is(.dark *) {
  background-color: #581c8766;
}

.dark\:bg-purple-900\/50:is(.dark *) {
  background-color: #581c8780;
}

.dark\:bg-purple-950\/30:is(.dark *) {
  background-color: #3b07644d;
}

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

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

.dark\:bg-red-900\/10:is(.dark *) {
  background-color: #7f1d1d1a;
}

.dark\:bg-red-900\/20:is(.dark *) {
  background-color: #7f1d1d33;
}

.dark\:bg-red-900\/30:is(.dark *) {
  background-color: #7f1d1d4d;
}

.dark\:bg-red-900\/40:is(.dark *) {
  background-color: #7f1d1d66;
}

.dark\:bg-red-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}

.dark\:bg-red-950\/20:is(.dark *) {
  background-color: #450a0a33;
}

.dark\:bg-rose-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1));
}

.dark\:bg-rose-900\/40:is(.dark *) {
  background-color: #88133766;
}

.dark\:bg-slate-900\/40:is(.dark *) {
  background-color: #0f172a66;
}

.dark\:bg-violet-900\/40:is(.dark *) {
  background-color: #4c1d9566;
}

.dark\:bg-yellow-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1));
}

.dark\:bg-yellow-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
}

.dark\:bg-yellow-900\/10:is(.dark *) {
  background-color: #713f121a;
}

.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color: #713f1233;
}

.dark\:bg-yellow-900\/30:is(.dark *) {
  background-color: #713f124d;
}

.dark\:bg-yellow-900\/40:is(.dark *) {
  background-color: #713f1266;
}

.dark\:bg-yellow-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(66 32 6 / var(--tw-bg-opacity, 1));
}

.dark\:bg-yellow-950\/10:is(.dark *) {
  background-color: #4220061a;
}

.dark\:from-\[\#00354d\]\/30:is(.dark *) {
  --tw-gradient-from: #00354d4d var(--tw-gradient-from-position);
  --tw-gradient-to: #00354d00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#014f70\]:is(.dark *) {
  --tw-gradient-from: #014f70 var(--tw-gradient-from-position);
  --tw-gradient-to: #014f7000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#014f70\]\/20:is(.dark *) {
  --tw-gradient-from: #014f7033 var(--tw-gradient-from-position);
  --tw-gradient-to: #014f7000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#014f70\]\/30:is(.dark *) {
  --tw-gradient-from: #014f704d var(--tw-gradient-from-position);
  --tw-gradient-to: #014f7000 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-\[\#0d0b24\]\/30:is(.dark *) {
  --tw-gradient-from: #0d0b244d var(--tw-gradient-from-position);
  --tw-gradient-to: #0d0b2400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-amber-900\/20:is(.dark *) {
  --tw-gradient-from: #78350f33 var(--tw-gradient-from-position);
  --tw-gradient-to: #78350f00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-amber-900\/30:is(.dark *) {
  --tw-gradient-from: #78350f4d var(--tw-gradient-from-position);
  --tw-gradient-to: #78350f00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-700:is(.dark *) {
  --tw-gradient-from: #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to: #1d4ed800 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-900\/20:is(.dark *) {
  --tw-gradient-from: #1e3a8a33 var(--tw-gradient-from-position);
  --tw-gradient-to: #1e3a8a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-900\/30:is(.dark *) {
  --tw-gradient-from: #1e3a8a4d var(--tw-gradient-from-position);
  --tw-gradient-to: #1e3a8a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-blue-950\/30:is(.dark *) {
  --tw-gradient-from: #1725544d var(--tw-gradient-from-position);
  --tw-gradient-to: #17255400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-cyan-900\/20:is(.dark *) {
  --tw-gradient-from: #164e6333 var(--tw-gradient-from-position);
  --tw-gradient-to: #164e6300 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-emerald-900\/20:is(.dark *) {
  --tw-gradient-from: #064e3b33 var(--tw-gradient-from-position);
  --tw-gradient-to: #064e3b00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-gray-900:is(.dark *) {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: #11182700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-gray-900\/20:is(.dark *) {
  --tw-gradient-from: #11182733 var(--tw-gradient-from-position);
  --tw-gradient-to: #11182700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-gray-900\/30:is(.dark *) {
  --tw-gradient-from: #1118274d var(--tw-gradient-from-position);
  --tw-gradient-to: #11182700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-green-900\/20:is(.dark *) {
  --tw-gradient-from: #14532d33 var(--tw-gradient-from-position);
  --tw-gradient-to: #14532d00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-green-900\/30:is(.dark *) {
  --tw-gradient-from: #14532d4d var(--tw-gradient-from-position);
  --tw-gradient-to: #14532d00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-900\/20:is(.dark *) {
  --tw-gradient-from: #312e8133 var(--tw-gradient-from-position);
  --tw-gradient-to: #312e8100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-900\/30:is(.dark *) {
  --tw-gradient-from: #312e814d var(--tw-gradient-from-position);
  --tw-gradient-to: #312e8100 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-indigo-950\/30:is(.dark *) {
  --tw-gradient-from: #1e1b4b4d var(--tw-gradient-from-position);
  --tw-gradient-to: #1e1b4b00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-orange-900\/20:is(.dark *) {
  --tw-gradient-from: #7c2d1233 var(--tw-gradient-from-position);
  --tw-gradient-to: #7c2d1200 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-orange-950\/30:is(.dark *) {
  --tw-gradient-from: #4314074d var(--tw-gradient-from-position);
  --tw-gradient-to: #43140700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-purple-900\/20:is(.dark *) {
  --tw-gradient-from: #581c8733 var(--tw-gradient-from-position);
  --tw-gradient-to: #581c8700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-purple-900\/30:is(.dark *) {
  --tw-gradient-from: #581c874d var(--tw-gradient-from-position);
  --tw-gradient-to: #581c8700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-purple-950\/30:is(.dark *) {
  --tw-gradient-from: #3b07644d var(--tw-gradient-from-position);
  --tw-gradient-to: #3b076400 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-red-900\/20:is(.dark *) {
  --tw-gradient-from: #7f1d1d33 var(--tw-gradient-from-position);
  --tw-gradient-to: #7f1d1d00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-red-900\/30:is(.dark *) {
  --tw-gradient-from: #7f1d1d4d var(--tw-gradient-from-position);
  --tw-gradient-to: #7f1d1d00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-rose-900\/20:is(.dark *) {
  --tw-gradient-from: #88133733 var(--tw-gradient-from-position);
  --tw-gradient-to: #88133700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-slate-900\/20:is(.dark *) {
  --tw-gradient-from: #0f172a33 var(--tw-gradient-from-position);
  --tw-gradient-to: #0f172a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-teal-900\/30:is(.dark *) {
  --tw-gradient-from: #134e4a4d var(--tw-gradient-from-position);
  --tw-gradient-to: #134e4a00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-yellow-900\/20:is(.dark *) {
  --tw-gradient-from: #713f1233 var(--tw-gradient-from-position);
  --tw-gradient-to: #713f1200 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:from-yellow-900\/30:is(.dark *) {
  --tw-gradient-from: #713f124d var(--tw-gradient-from-position);
  --tw-gradient-to: #713f1200 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:via-\[\#016c9b\]:is(.dark *) {
  --tw-gradient-to: #016c9b00 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #016c9b var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:via-gray-800:is(.dark *) {
  --tw-gradient-to: #1f293700 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.dark\:to-\[\#014f70\]\/30:is(.dark *) {
  --tw-gradient-to: #014f704d var(--tw-gradient-to-position);
}

.dark\:to-\[\#016c9b\]:is(.dark *) {
  --tw-gradient-to: #016c9b var(--tw-gradient-to-position);
}

.dark\:to-\[\#016c9b\]\/20:is(.dark *) {
  --tw-gradient-to: #016c9b33 var(--tw-gradient-to-position);
}

.dark\:to-\[\#016c9b\]\/30:is(.dark *) {
  --tw-gradient-to: #016c9b4d var(--tw-gradient-to-position);
}

.dark\:to-\[\#0289c6\]:is(.dark *) {
  --tw-gradient-to: #0289c6 var(--tw-gradient-to-position);
}

.dark\:to-\[\#151333\]\/30:is(.dark *) {
  --tw-gradient-to: #1513334d var(--tw-gradient-to-position);
}

.dark\:to-amber-900\/20:is(.dark *) {
  --tw-gradient-to: #78350f33 var(--tw-gradient-to-position);
}

.dark\:to-amber-950\/30:is(.dark *) {
  --tw-gradient-to: #451a034d var(--tw-gradient-to-position);
}

.dark\:to-blue-800\/20:is(.dark *) {
  --tw-gradient-to: #1e40af33 var(--tw-gradient-to-position);
}

.dark\:to-blue-800\/30:is(.dark *) {
  --tw-gradient-to: #1e40af4d var(--tw-gradient-to-position);
}

.dark\:to-blue-900:is(.dark *) {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

.dark\:to-blue-900\/20:is(.dark *) {
  --tw-gradient-to: #1e3a8a33 var(--tw-gradient-to-position);
}

.dark\:to-blue-900\/30:is(.dark *) {
  --tw-gradient-to: #1e3a8a4d var(--tw-gradient-to-position);
}

.dark\:to-emerald-900\/20:is(.dark *) {
  --tw-gradient-to: #064e3b33 var(--tw-gradient-to-position);
}

.dark\:to-gray-800\/20:is(.dark *) {
  --tw-gradient-to: #1f293733 var(--tw-gradient-to-position);
}

.dark\:to-gray-800\/30:is(.dark *) {
  --tw-gradient-to: #1f29374d var(--tw-gradient-to-position);
}

.dark\:to-gray-900\/20:is(.dark *) {
  --tw-gradient-to: #11182733 var(--tw-gradient-to-position);
}

.dark\:to-green-800\/20:is(.dark *) {
  --tw-gradient-to: #16653433 var(--tw-gradient-to-position);
}

.dark\:to-green-800\/30:is(.dark *) {
  --tw-gradient-to: #1665344d var(--tw-gradient-to-position);
}

.dark\:to-indigo-800:is(.dark *) {
  --tw-gradient-to: #3730a3 var(--tw-gradient-to-position);
}

.dark\:to-indigo-800\/30:is(.dark *) {
  --tw-gradient-to: #3730a34d var(--tw-gradient-to-position);
}

.dark\:to-indigo-900\/20:is(.dark *) {
  --tw-gradient-to: #312e8133 var(--tw-gradient-to-position);
}

.dark\:to-indigo-900\/30:is(.dark *) {
  --tw-gradient-to: #312e814d var(--tw-gradient-to-position);
}

.dark\:to-indigo-950\/30:is(.dark *) {
  --tw-gradient-to: #1e1b4b4d var(--tw-gradient-to-position);
}

.dark\:to-orange-900\/20:is(.dark *) {
  --tw-gradient-to: #7c2d1233 var(--tw-gradient-to-position);
}

.dark\:to-orange-900\/30:is(.dark *) {
  --tw-gradient-to: #7c2d124d var(--tw-gradient-to-position);
}

.dark\:to-pink-900\/20:is(.dark *) {
  --tw-gradient-to: #83184333 var(--tw-gradient-to-position);
}

.dark\:to-pink-950\/30:is(.dark *) {
  --tw-gradient-to: #5007244d var(--tw-gradient-to-position);
}

.dark\:to-purple-800\/30:is(.dark *) {
  --tw-gradient-to: #6b21a84d var(--tw-gradient-to-position);
}

.dark\:to-purple-900\/20:is(.dark *) {
  --tw-gradient-to: #581c8733 var(--tw-gradient-to-position);
}

.dark\:to-purple-900\/30:is(.dark *) {
  --tw-gradient-to: #581c874d var(--tw-gradient-to-position);
}

.dark\:to-purple-950\/30:is(.dark *) {
  --tw-gradient-to: #3b07644d var(--tw-gradient-to-position);
}

.dark\:to-red-800\/30:is(.dark *) {
  --tw-gradient-to: #991b1b4d var(--tw-gradient-to-position);
}

.dark\:to-red-900\/20:is(.dark *) {
  --tw-gradient-to: #7f1d1d33 var(--tw-gradient-to-position);
}

.dark\:to-rose-900\/20:is(.dark *) {
  --tw-gradient-to: #88133733 var(--tw-gradient-to-position);
}

.dark\:to-slate-900\/20:is(.dark *) {
  --tw-gradient-to: #0f172a33 var(--tw-gradient-to-position);
}

.dark\:to-teal-900\/20:is(.dark *) {
  --tw-gradient-to: #134e4a33 var(--tw-gradient-to-position);
}

.dark\:to-teal-900\/30:is(.dark *) {
  --tw-gradient-to: #134e4a4d var(--tw-gradient-to-position);
}

.dark\:to-violet-900\/20:is(.dark *) {
  --tw-gradient-to: #4c1d9533 var(--tw-gradient-to-position);
}

.dark\:to-yellow-800\/20:is(.dark *) {
  --tw-gradient-to: #854d0e33 var(--tw-gradient-to-position);
}

.dark\:to-yellow-800\/30:is(.dark *) {
  --tw-gradient-to: #854d0e4d var(--tw-gradient-to-position);
}

.dark\:to-yellow-900\/20:is(.dark *) {
  --tw-gradient-to: #713f1233 var(--tw-gradient-to-position);
}

.dark\:text-\[\#2ed6c5\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(46 214 197 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#80d0f4\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(128 208 244 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#9ca3af\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#9feadd\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(159 234 221 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#f6cd01\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(246 205 1 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#f6f7f9\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(246 247 249 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#ffe066\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 224 102 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.dark\:text-blue-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

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

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

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

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

.dark\:text-emerald-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}

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

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

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

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

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-green-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1));
}

.dark\:text-green-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(224 231 255 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(199 210 254 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.dark\:text-orange-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

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

.dark\:text-pink-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(244 114 182 / var(--tw-text-opacity, 1));
}

.dark\:text-purple-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}

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

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

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

.dark\:text-red-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

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

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.dark\:text-rose-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

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

.dark\:text-slate-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-teal-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}

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

.dark\:text-yellow-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.dark\:text-yellow-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

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

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

.dark\:hover\:border-red-800:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

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

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

.dark\:hover\:bg-gray-800\/50:hover:is(.dark *) {
  background-color: #1f293780;
}

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

.dark\:hover\:bg-red-950:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-red-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

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

@media (min-width: 640px) {
  .sm\:-top-3 {
    top: -.75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:mx-2 {
    margin-left: .5rem;
    margin-right: .5rem;
  }

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

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

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

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

  .sm\:mb-3 {
    margin-bottom: .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: .5rem;
  }

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

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

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

  .sm\:mr-3 {
    margin-right: .75rem;
  }

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

  .sm\:mt-1 {
    margin-top: .25rem;
  }

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

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

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

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

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

  .sm\:line-clamp-none {
    -webkit-line-clamp: none;
    -webkit-box-orient: horizontal;
    display: block;
    overflow: visible;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

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

  .sm\:\!grid {
    display: grid !important;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:max-h-96 {
    max-height: 24rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:max-w-xs {
    max-width: 20rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sm\:gap-3 {
    gap: .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(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.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-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse));
  }

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

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

  .sm\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.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\: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));
  }

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

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

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

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

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

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

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

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

  .sm\:p-3 {
    padding: .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: 0;
    padding-right: 0;
  }

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

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

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

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

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

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

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

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

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

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

  .sm\:py-3 {
    padding-top: .75rem;
    padding-bottom: .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-2 {
    padding-bottom: .5rem;
  }

  .sm\:pb-3 {
    padding-bottom: .75rem;
  }

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

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

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

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

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

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

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

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

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

  .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: .875rem;
    line-height: 1.25rem;
  }

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

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

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 768px) {
  .md\:left-auto {
    left: auto;
  }

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

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

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

  .md\:my-3 {
    margin-top: .75rem;
    margin-bottom: .75rem;
  }

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

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

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

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

  .md\:mr-2 {
    margin-right: .5rem;
  }

  .md\:mr-3 {
    margin-right: .75rem;
  }

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

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

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

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

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

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

  .md\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

  .md\:h-7 {
    height: 1.75rem;
  }

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

  .md\:h-\[calc\(100vh-5rem\)\] {
    height: calc(100vh - 5rem);
  }

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

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

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

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

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

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

  .md\:w-7 {
    width: 1.75rem;
  }

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

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

  .md\:w-96 {
    width: 24rem;
  }

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

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

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

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

  .md\:max-w-\[75\%\] {
    max-width: 75%;
  }

  .md\:flex-initial {
    flex: 0 auto;
  }

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

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

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

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

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

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

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

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

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

  .md\:gap-2 {
    gap: .5rem;
  }

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

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

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

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

  .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-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse));
  }

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

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

  .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\:p-3 {
    padding: .75rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .md\:pt-0 {
    padding-top: 0;
  }

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

  .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: .875rem;
    line-height: 1.25rem;
  }

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

  .md\:text-xs {
    font-size: .75rem;
    line-height: 1rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

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

  .lg\:block {
    display: block;
  }

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

  .lg\:hidden {
    display: none;
  }

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

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

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

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

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

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

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

  .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-\[300px_1fr\] {
    grid-template-columns: 300px 1fr;
  }

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

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

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

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

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

  .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\:p-8 {
    padding: 2rem;
  }

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

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

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

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

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

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

@media (min-width: 1280px) {
  .xl\:table-cell {
    display: table-cell;
  }

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

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

@media print {
  .print\:mb-4 {
    margin-bottom: 1rem;
  }

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

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

.\[\&\+div\]\:text-xs + div {
  font-size: .75rem;
  line-height: 1rem;
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
  padding-right: 0;
}

.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
  --tw-translate-y: 2px;
  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));
}

.\[\&\>div\>table\]\:min-w-\[1000px\] > div > table {
  min-width: 1000px;
}

.\[\&\>div\>table\]\:min-w-\[500px\] > div > table {
  min-width: 500px;
}

.\[\&\>div\>table\]\:min-w-\[600px\] > div > table {
  min-width: 600px;
}

.\[\&\>div\>table\]\:min-w-\[800px\] > div > table {
  min-width: 800px;
}

.\[\&\>div\]\:overflow-visible > div {
  overflow: visible;
}

.\[\&\>div\]\:bg-amber-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.\[\&\>div\]\:bg-blue-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.\[\&\>div\]\:bg-green-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.\[\&\>div\]\:bg-orange-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.\[\&\>div\]\:bg-pink-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

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

.\[\&\>div\]\:bg-red-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.\[\&\>div\]\:bg-yellow-500 > div {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.\[\&\>span\]\:line-clamp-1 > span {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div {
  --tw-translate-y: -3px;
  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));
}

.\[\&\>svg\]\:absolute > svg {
  position: absolute;
}

.\[\&\>svg\]\:left-4 > svg {
  left: 1rem;
}

.\[\&\>svg\]\:top-4 > svg {
  top: 1rem;
}

.\[\&\>svg\]\:size-4 > svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:shrink-0 > svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:text-destructive > svg {
  color: hsl(var(--destructive));
}

.\[\&\>svg\]\:text-foreground > svg {
  color: hsl(var(--foreground));
}

.\[\&\>svg\~\*\]\:pl-7 > svg ~ * {
  padding-left: 1.75rem;
}

.\[\&\>tr\]\:last\:border-b-0:last-child > tr {
  border-bottom-width: 0;
}

.\[\&_\.legend\]\:-translate-x-\[100px\] .legend {
  --tw-translate-x: -100px;
  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));
}

.\[\&_\.legend\]\:translate-y-\[70px\] .legend {
  --tw-translate-y: 70px;
  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));
}

.\[\&_a\]\:text-blue-600 a {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}

.\[\&_em\]\:italic em {
  font-style: italic;
}

.\[\&_h1\]\:mb-4 h1 {
  margin-bottom: 1rem;
}

.\[\&_h1\]\:mt-6 h1 {
  margin-top: 1.5rem;
}

.\[\&_h1\]\:text-2xl h1 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.\[\&_h1\]\:font-bold h1 {
  font-weight: 700;
}

.\[\&_h2\]\:mb-3 h2 {
  margin-bottom: .75rem;
}

.\[\&_h2\]\:mt-5 h2 {
  margin-top: 1.25rem;
}

.\[\&_h2\]\:text-xl h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.\[\&_h2\]\:font-semibold h2 {
  font-weight: 600;
}

.\[\&_h3\]\:mb-2 h3 {
  margin-bottom: .5rem;
}

.\[\&_h3\]\:mt-4 h3 {
  margin-top: 1rem;
}

.\[\&_h3\]\:text-lg h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.\[\&_h3\]\:font-medium h3 {
  font-weight: 500;
}

.\[\&_li\]\:mb-1 li {
  margin-bottom: .25rem;
}

.\[\&_ol\]\:mb-3 ol {
  margin-bottom: .75rem;
}

.\[\&_ol\]\:list-decimal ol {
  list-style-type: decimal;
}

.\[\&_ol\]\:pl-5 ol {
  padding-left: 1.25rem;
}

.\[\&_p\]\:mb-3 p {
  margin-bottom: .75rem;
}

.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}

.\[\&_strong\]\:font-semibold strong {
  font-weight: 600;
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:h-auto svg {
  height: auto;
}

.\[\&_svg\]\:w-full svg {
  width: 100%;
}

.\[\&_svg\]\:max-w-full svg {
  max-width: 100%;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_svg\]\:overflow-visible svg {
  overflow: visible;
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0;
}

.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

.\[\&_ul\]\:mb-3 ul {
  margin-bottom: .75rem;
}

.\[\&_ul\]\:list-disc ul {
  list-style-type: disc;
}

.\[\&_ul\]\:pl-5 ul {
  padding-left: 1.25rem;
}

/*# sourceMappingURL=_1ef7232a._.css.map*/