/* alert.css */
@keyframes alert-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert {
  position: relative;
  display: grid;
  width: 100%;
  gap: 0.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;

  animation: alert-enter 250ms cubic-bezier(0.22, 1.1, 0.36, 1) both;
}

.alert:has(> svg) {
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
}

.alert > svg {
  grid-row: span 2;
  translate: 0 0.125rem;
  color: currentColor;
  width: 1rem;
  height: 1rem;
}

.alert:has([data-slot="alert-action"]) {
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
}

.alert:has(> svg):has([data-slot="alert-action"]) {
  grid-template-columns: auto 1fr auto;
  column-gap: 0.5rem;
}

.alert-default {
  background-color: var(--card);
  color: var(--card-foreground);
}

.alert-destructive {
  background-color: color-mix(in oklch, var(--destructive) 5%, var(--card));
  color: var(--destructive);
}

.alert-destructive .alert-description {
  color: color-mix(in oklch, var(--destructive) 90%, transparent);
}

.alert-destructive > svg {
  color: currentColor;
}

.alert-title {
  font-weight: 500;
  line-height: 1.375;
}

.alert:has(> svg) .alert-title {
  grid-column-start: 2;
}

.alert-title a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-title a:hover {
  color: var(--foreground);
}

.alert-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .alert-description {
    text-wrap: pretty;
  }
}

.alert-description a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-description a:hover {
  color: var(--foreground);
}

.alert-description p:not(:last-child) {
  margin-bottom: 1rem;
}

.alert-action {
  grid-column: -2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
}

.dark .alert-destructive {
  background-color: color-mix(in oklch, var(--destructive) 10%, var(--card));
}

@media (prefers-reduced-motion: reduce) {
  .alert {
    animation: none;
  }
}

/* avatar.css */
.avatar {
  position: relative;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 9999px;
  user-select: none;
  vertical-align: middle;
}

.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid var(--border);
  mix-blend-mode: darken;
  pointer-events: none;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
}

.avatar-image[data-error="true"] {
  display: none;
}

.avatar-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--highlight-top), var(--shade-bottom);
}

.avatar-sm .avatar-fallback {
  font-size: 0.75rem;
}

.avatar-lg .avatar-fallback {
  font-size: 1rem;
}

.avatar-image:not([data-error="true"]) ~ .avatar-fallback {
  display: none;
}

.avatar-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow:
    0 0 0 2px var(--background),
    var(--highlight-top),
    var(--shade-bottom);
  user-select: none;
}

.avatar[data-size="sm"] .avatar-badge {
  width: 0.5rem;
  height: 0.5rem;
}
.avatar[data-size="sm"] .avatar-badge svg {
  display: none;
}

.avatar[data-size="default"] .avatar-badge {
  width: 0.625rem;
  height: 0.625rem;
}
.avatar[data-size="default"] .avatar-badge svg {
  width: 0.5rem;
  height: 0.5rem;
}

.avatar[data-size="lg"] .avatar-badge {
  width: 0.75rem;
  height: 0.75rem;
}
.avatar[data-size="lg"] .avatar-badge svg {
  width: 0.5rem;
  height: 0.5rem;
}

.avatar-group {
  display: flex;
}
.avatar-group > .avatar {
  margin-left: -0.5rem;
  box-shadow: 0 0 0 2px var(--background);
}
.avatar-group > .avatar:first-child {
  margin-left: 0;
}

.avatar-group-count {
  position: relative;
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: -0.5rem;
  box-shadow:
    0 0 0 2px var(--background),
    var(--highlight-top),
    var(--shade-bottom);
}

.avatar-group-count svg {
  width: 1rem;
  height: 1rem;
}

.avatar-group:has(.avatar-sm) .avatar-group-count {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}
.avatar-group:has(.avatar-sm) .avatar-group-count svg {
  width: 0.75rem;
  height: 0.75rem;
}

.avatar-group:has(.avatar-lg) .avatar-group-count {
  width: 2.5rem;
  height: 2.5rem;
}
.avatar-group:has(.avatar-lg) .avatar-group-count svg {
  width: 1.25rem;
  height: 1.25rem;
}

.avatar-image {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.avatar-image[data-loaded="true"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .avatar-image {
    transition-duration: 75ms;
    opacity: 1;
  }
}

.dark .avatar::after {
  mix-blend-mode: lighten;
}

/* badge.css */
.badge {
  display: inline-flex;
  height: 1.5rem;
  width: fit-content;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition-property:
    background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --badge-shadow: 0 0 rgba(0, 0, 0, 0);
  box-shadow: var(--badge-shadow);
}

.badge-default,
.badge-secondary {
  --badge-shadow: var(--highlight-top), var(--shade-bottom);
}

.badge:focus-visible,
a:focus-visible > .badge {
  border-color: var(--ring);
  box-shadow:
    var(--badge-shadow),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
  outline: none;
}
a:focus-visible:has(> .badge) {
  outline: none;
}

.badge[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow:
    var(--badge-shadow),
    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.badge svg {
  pointer-events: none;
  width: 0.75rem !important;
  height: 0.75rem !important;
}

.badge:has(> [data-icon="inline-start"]) {
  padding-left: 0.375rem;
}
.badge:has(> [data-icon="inline-end"]) {
  padding-right: 0.375rem;
}

a:has(> .badge) {
  position: relative;
  display: inline-flex;
}
a:has(> .badge)::before {
  content: "";
  position: absolute;
  inset: -0.25rem;
}
a:active > .badge {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.badge-default {
  background-color: var(--primary);
  color: var(--primary-foreground);
}
a:hover > .badge-default {
  background-color: color-mix(in oklch, var(--primary) 80%, transparent);
}

.badge-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}
a:hover > .badge-secondary {
  background-color: color-mix(in oklch, var(--secondary) 80%, transparent);
}

.badge-destructive {
  background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
  color: var(--destructive);
}
.badge-destructive:focus-visible,
a:focus-visible > .badge-destructive {
  box-shadow:
    var(--badge-shadow),
    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}
a:hover > .badge-destructive {
  background-color: color-mix(in oklch, var(--destructive) 25%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition-duration: 75ms;
  }
  a:active > .badge {
    transform: none;
  }
}

.dark .badge-destructive {
  background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
}
.dark a:hover > .badge-destructive {
  background-color: color-mix(in oklch, var(--destructive) 30%, transparent);
}
.dark .badge-destructive:focus-visible,
.dark a:focus-visible > .badge-destructive {
  box-shadow:
    var(--badge-shadow),
    0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}
.dark .badge[aria-invalid="true"] {
  box-shadow:
    var(--badge-shadow),
    0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

/* breadcrumb.css */
.breadcrumb {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  overflow-wrap: break-word;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted-foreground);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb-link {
  color: var(--muted-foreground);
  text-decoration: none;
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumb-link:hover {
  color: var(--foreground);
}

.breadcrumb-page {
  font-weight: 400;
  color: var(--foreground);
}

.breadcrumb-separator {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-separator svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--muted-foreground);
}

.breadcrumb-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
}

.breadcrumb-ellipsis svg {
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

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

.dark .breadcrumb-link:hover {
  color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-link {
    transition-duration: 0ms;
  }
}

/* button.css */
.btn {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  transition-property:
    background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  --btn-shadow: 0 0 rgba(0, 0, 0, 0);
  --btn-shadow-pressed: 0 0 rgba(0, 0, 0, 0);
  --btn-ring: 0 0 rgba(0, 0, 0, 0);
  box-shadow: var(--btn-shadow), var(--btn-ring);
}

.btn-default,
.btn-secondary,
.btn-destructive {
  --btn-shadow: var(--shadow-control);
  --btn-shadow-pressed: var(--shadow-control-pressed);
}

.btn-destructive {
  --btn-shadow: var(--shadow-control-tint);
  --btn-shadow-pressed: var(--shadow-control-tint-pressed);
}

.btn-default {
  --btn-shadow: var(--shadow-control-strong);
  --btn-shadow-pressed: var(--shadow-control-strong-pressed);
}

.btn-secondary,
.btn-destructive {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0) 45%,
    rgba(16, 24, 40, 0.05)
  );
}

.btn:focus-visible {
  border-color: var(--ring);
  --btn-ring: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn[aria-invalid="true"] {
  border-color: var(--destructive);
  --btn-ring: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.btn svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.btn:active:not(:disabled),
.btn.btn-pressed {
  transform: scale(0.97);
  transition-duration: 120ms;

  box-shadow: var(--btn-shadow-pressed), var(--btn-ring);
}

.btn-default {
  background-color: var(--primary);
  color: var(--primary-foreground);

  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0) 55%,
    rgba(16, 24, 40, 0.1)
  );

  text-shadow: 0 1px 1px rgba(16, 24, 40, 0.2);
}
.btn-default:hover {
  background-color: color-mix(in oklch, var(--primary) 80%, transparent);
}

.btn-secondary {
  border-color: var(--border);
  background-color: var(--background);
}
.btn-secondary:hover {
  background-color: var(--muted);
  color: var(--foreground);
}
.btn-secondary[aria-expanded="true"] {
  background-color: var(--muted);
  color: var(--foreground);
}

.btn-ghost {
  background-color: transparent;
}
.btn-ghost:hover {
  background-color: var(--muted);
  color: var(--foreground);
}
.btn-ghost[aria-expanded="true"] {
  background-color: var(--muted);
  color: var(--foreground);
}

.btn-destructive {
  background-color: color-mix(in oklch, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
.btn-destructive:hover {
  background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
}
.btn-destructive:focus-visible {
  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
  --btn-ring: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.btn-link {
  background-color: transparent;
  color: var(--primary);
  text-underline-offset: 4px;
}
.btn-link:hover {
  text-decoration: underline;
}

.btn-size-default {
  height: 2.25rem;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-size-xs {
  height: 1.75rem;
  gap: 0.25rem;
  border-radius: min(var(--radius-md), 10px);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.btn-size-xs svg {
  width: 0.75rem;
  height: 0.75rem;
}

.btn-size-xs::after,
.btn-size-icon-xs::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.btn-size-sm {
  height: 2rem;
  gap: 0.25rem;
  border-radius: min(var(--radius-md), 12px);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.btn-size-sm svg {
  width: 0.875rem;
  height: 0.875rem;
}

.btn-size-lg {
  height: 2.5rem;
  gap: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-size-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.btn-size-icon-xs {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: min(var(--radius-md), 10px);
}
.btn-size-icon-xs svg {
  width: 0.75rem;
  height: 0.75rem;
}

.btn-size-icon-sm {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: min(var(--radius-md), 12px);
}

.btn-size-icon-lg {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.btn.rounded-full {
  border-radius: 9999px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 75ms;
  }
  .btn:active:not(:disabled),
  .btn.btn-pressed {
    transform: none;
  }
}

.dark .btn-secondary {
  border-color: var(--input);
  background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .btn-secondary:hover {
  background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .btn-ghost:hover {
  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}
.dark .btn-destructive {
  background-color: color-mix(in oklch, var(--destructive) 20%, transparent);
}
.dark .btn-destructive:hover {
  background-color: color-mix(in oklch, var(--destructive) 30%, transparent);
}
.dark .btn-destructive:focus-visible {
  --btn-ring: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}
.dark .btn[aria-invalid="true"] {
  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
  --btn-ring: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}
.dark .btn-default {
  text-shadow: none;
}

/* calendar.css */
.cal {
  --cal-cell: 2.2rem;
  --cal-radius: var(--radius-md);
  display: inline-flex;
  flex-direction: column;
  background: var(--background);
  padding: 0.5rem;
  width: fit-content;
  user-select: none;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.cal-nav-btn {
  width: var(--cal-cell);
  height: var(--cal-cell);
}

.cal-title {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  flex: 1;

  font-variant-numeric: tabular-nums;
}

.cal-grid {
  width: 100%;
  border-collapse: collapse;
}

.cal-head {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted-foreground);
  text-align: center;
  width: var(--cal-cell);
  height: var(--cal-cell);
  padding: 0;
}

.cal-cell {
  padding: 1px;
  text-align: center;
}

.cal-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cal-cell);
  height: var(--cal-cell);
  border-radius: var(--cal-radius);
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  outline: none;
  padding: 0;
  font-family: inherit;
  color: var(--foreground);

  font-variant-numeric: tabular-nums;

  --cal-day-shadow: 0 0 rgba(0, 0, 0, 0);
  box-shadow: var(--cal-day-shadow);
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-day:hover:not(:disabled):not([data-selected]) {
  background: var(--muted);
}

.cal-day:focus-visible {
  border-color: var(--ring);
  box-shadow:
    var(--cal-day-shadow),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.cal-day:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.cal-day[data-today]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-day[data-today]:not([data-selected]) {
  font-weight: 500;
}

.cal-day[data-today][data-selected]::after {
  background: var(--primary-foreground);
}

.cal-day[data-selected] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  --cal-day-shadow: var(--highlight-top), var(--shade-bottom);
}

.cal-day[data-selected]:hover {
  background: color-mix(in oklch, var(--primary) 90%, transparent);
}

.cal-day[data-selecting] {
  animation: cal-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cal-pop {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

.cal-day[data-outside] {
  color: var(--muted-foreground);
}

.cal-day[data-outside][data-selected] {
  background: color-mix(in oklch, var(--primary) 60%, transparent);
  color: var(--primary-foreground);
}

.cal-day:disabled {
  color: var(--muted-foreground);
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.cal-day:disabled[data-today]::after {
  background: var(--muted-foreground);
}

.cal[data-direction="next"] .cal-title {
  animation: cal-slide-next 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}
.cal[data-direction="prev"] .cal-title {
  animation: cal-slide-prev 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.cal[data-direction="next"] .cal-week,
.cal[data-direction="prev"] .cal-week {
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.22, 1.1, 0.36, 1);
  animation-fill-mode: backwards;
}
.cal[data-direction="next"] .cal-week {
  animation-name: cal-slide-next;
}
.cal[data-direction="prev"] .cal-week {
  animation-name: cal-slide-prev;
}

.cal[data-direction] .cal-week:nth-child(1) {
  animation-delay: 0ms;
}
.cal[data-direction] .cal-week:nth-child(2) {
  animation-delay: 10ms;
}
.cal[data-direction] .cal-week:nth-child(3) {
  animation-delay: 20ms;
}
.cal[data-direction] .cal-week:nth-child(4) {
  animation-delay: 30ms;
}
.cal[data-direction] .cal-week:nth-child(5) {
  animation-delay: 40ms;
}
.cal[data-direction] .cal-week:nth-child(6) {
  animation-delay: 50ms;
}

@keyframes cal-slide-next {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes cal-slide-prev {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dark .cal-day:hover:not(:disabled):not([data-selected]) {
  background: color-mix(in oklch, var(--muted) 50%, transparent);
}

.dark .cal-day[data-selected] {
  background: var(--primary);
  color: var(--primary-foreground);
}

.dark .cal-day[data-selected]:hover {
  background: color-mix(in oklch, var(--primary) 80%, transparent);
}

.dark .cal-day[data-today]::after {
  background: var(--primary);
}

.dark .cal-day[data-today][data-selected]::after {
  background: var(--primary-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .cal-day {
    transition: none;
  }
  .cal-day:active:not(:disabled) {
    transform: none;
  }
  .cal-day[data-selecting] {
    animation: none;
  }
  .cal[data-direction] .cal-title,
  .cal[data-direction] .cal-week {
    animation: none;
  }
}

/* card.css */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--card-foreground);

  box-shadow: var(--shadow-card);
  outline: none;

  transition-property: box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card:has([data-slot="card-footer"]) {
  padding-bottom: 0;
}

.card:has(> img:first-child) {
  padding-top: 0;
}

.card > img:first-child {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.card > img:last-child {
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.card:focus-visible {
  box-shadow:
    var(--shadow-card),
    0 0 0 1px var(--ring),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.card-interactive:active,
.card-interactive[data-pressed] {
  transform: translateY(0);
  transition-duration: 100ms;
}

.card[data-size="sm"] {
  gap: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.card[data-size="sm"]:has([data-slot="card-footer"]) {
  padding-bottom: 0;
}

.card-header {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.25rem;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding-left: 1rem;
  padding-right: 1rem;
}

.card[data-size="sm"] .card-header {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.card-header:has([data-slot="card-action"]) {
  grid-template-columns: 1fr auto;
}

.card-header:has([data-slot="card-description"]) {
  grid-template-rows: auto auto;
}

.card-header.border-b {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.card[data-size="sm"] .card-header.border-b {
  padding-bottom: 0.75rem;
}

.card-title {
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 500;
}

.card[data-size="sm"] .card-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.card-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.card-action {
  grid-column-start: 2;
  grid-row: span 2 / span 2;
  grid-row-start: 1;
  align-self: start;
  justify-self: end;
}

.card-content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.card[data-size="sm"] .card-content {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  border-top: 1px solid var(--border);
  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
  padding: 1rem;
}

.card[data-size="sm"] .card-footer {
  padding: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition-duration: 0ms;
  }

  .card-interactive:hover {
    transform: none;
  }

  .card-interactive:active,
  .card-interactive[data-pressed] {
    transform: none;
  }
}

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

.carousel {
  outline: none;
}
.carousel:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.carousel-body {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
  -webkit-user-select: none;
  user-select: none;
}
.carousel[data-orientation="horizontal"] .carousel-viewport {
  touch-action: pan-y pinch-zoom;
}
.carousel[data-orientation="vertical"] .carousel-viewport {
  touch-action: pan-x pinch-zoom;
}
.carousel-viewport[data-draggable] {
  cursor: grab;
}
.carousel-viewport[data-dragging] {
  cursor: grabbing;
}

.carousel-content {
  display: flex;
  will-change: transform;
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.carousel[data-orientation="vertical"] .carousel-content {
  flex-direction: column;
}
.carousel-viewport[data-dragging] .carousel-content {
  transition: none;
}

.carousel-item {
  flex: none;
}

.carousel .carousel-prev,
.carousel .carousel-next {
  position: absolute;
  border-radius: 9999px;
  touch-action: manipulation;
  z-index: 1;
}

.carousel[data-orientation="horizontal"] .carousel-prev {
  top: 50%;
  left: -2.5rem;
  transform: translateY(-50%);
}
.carousel[data-orientation="horizontal"] .carousel-next {
  top: 50%;
  right: -2.5rem;
  transform: translateY(-50%);
}
.carousel[data-orientation="horizontal"] .carousel-prev:hover:not(:disabled) {
  transform: translateY(-50%) translateX(-1px);
}
.carousel[data-orientation="horizontal"] .carousel-next:hover:not(:disabled) {
  transform: translateY(-50%) translateX(1px);
}

.carousel[data-orientation="vertical"] .carousel-prev {
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
.carousel[data-orientation="vertical"] .carousel-next {
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
.carousel[data-orientation="vertical"] .carousel-prev:hover:not(:disabled) {
  transform: translateX(-50%) rotate(90deg) translateX(-1px);
}
.carousel[data-orientation="vertical"] .carousel-next:hover:not(:disabled) {
  transform: translateX(-50%) rotate(90deg) translateX(1px);
}

.carousel[data-orientation="vertical"] {
  position: relative;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.75rem;
}
.carousel-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  outline: none;
}

.carousel-dot::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
}
.carousel-dot::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--border);
  transition:
    width 250ms cubic-bezier(0.34, 1.4, 0.64, 1),
    background-color 200ms ease;
}
.carousel-dot:hover::before {
  background-color: var(--muted-foreground);
}
.carousel-dot:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 0;
  border-radius: 9999px;
}
.carousel-dot[data-active]::before {
  width: 1.25rem;
  background-color: var(--foreground);
}

.carousel[data-orientation="vertical"] .carousel-dots {
  position: absolute;
  right: -2rem;
  top: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
}
.carousel[data-orientation="vertical"] .carousel-dot[data-active]::before {
  width: 0.5rem;
  height: 1.25rem;
}

.carousel-counter {
  text-align: center;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.carousel[data-orientation="vertical"] .carousel-counter {
  position: absolute;
  right: -2.5rem;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-top: 0;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-content {
    transition: none;
  }
  .carousel-dot::before {
    transition: none;
  }
  .carousel[data-orientation="horizontal"] .carousel-prev:hover:not(:disabled) {
    transform: translateY(-50%);
  }
  .carousel[data-orientation="horizontal"] .carousel-next:hover:not(:disabled) {
    transform: translateY(-50%);
  }
  .carousel[data-orientation="vertical"] .carousel-prev:hover:not(:disabled) {
    transform: translateX(-50%) rotate(90deg);
  }
  .carousel[data-orientation="vertical"] .carousel-next:hover:not(:disabled) {
    transform: translateX(-50%) rotate(90deg);
  }
}
.dark .carousel-dot::before {
  background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
}
.dark .carousel-dot:hover::before {
  background-color: color-mix(in oklch, var(--foreground) 50%, transparent);
}
.dark .carousel-dot[data-active]::before {
  background-color: var(--foreground);
}

/* chart.css */
.chart {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1rem;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.5;
}

.chart-axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-axis-tick {
  fill: var(--muted-foreground);
  font-size: 0.7rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.chart-bar {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-bar:hover {
  opacity: 0.8;
}

.chart-hit {
  cursor: crosshair;
}
.chart-bar:focus-visible,
.chart-slice:focus-visible,
.chart-hit:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-area {
  opacity: 0.15;
}

.chart-dot {
  stroke-width: 2;
  stroke: var(--background);
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chart-dot-active {
  opacity: 1;
}

.chart-slice {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  stroke: var(--background);
  stroke-width: 2;
}
.chart-slice:hover {
  opacity: 0.8;
}
.chart-donut-label {
  fill: var(--foreground);
  font-size: 1.5rem;
  font-weight: 600;
  dominant-baseline: central;

  font-variant-numeric: tabular-nums;
}
.chart-donut-sublabel {
  fill: var(--muted-foreground);
  font-size: 0.75rem;
  dominant-baseline: central;
}

.chart-tooltip {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  min-width: 8rem;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
  background-color: var(--background);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--foreground);
  box-shadow: var(--shadow-popover);
  visibility: hidden;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    visibility 0s linear 120ms;
}

.chart-tooltip[data-visible] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out,
    visibility 0s linear 0s;
}

.chart-tooltip-label {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.0625rem 0;
}

.chart-tooltip-indicator {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 2px;
}

.chart-tooltip-name {
  color: var(--muted-foreground);
  flex: 1;
}

.chart-tooltip-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.75rem;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}

.chart-legend-color {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 2px;
}

@keyframes chart-bar-enter {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes chart-line-enter {
  from {
    stroke-dashoffset: var(--line-length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chart-slice-enter {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chart-area-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.15;
  }
}

.chart[data-animate] .chart-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: chart-bar-enter 280ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.chart[data-animate] .chart-line {
  stroke-dasharray: var(--line-length);
  stroke-dashoffset: var(--line-length);
  animation: chart-line-enter 300ms ease-out both;
}

.chart[data-animate] .chart-area {
  opacity: 0;
  animation: chart-area-enter 250ms ease-out 80ms both;
}

.chart[data-animate] .chart-slice {
  transform-origin: center;
  animation: chart-slice-enter 250ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.dark .chart-grid-line {
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .chart[data-animate] .chart-bar,
  .chart[data-animate] .chart-line,
  .chart[data-animate] .chart-area,
  .chart[data-animate] .chart-slice {
    animation: none;
  }
  .chart-bar,
  .chart-dot,
  .chart-slice,
  .chart-tooltip {
    transition: none;
  }
  .chart-area {
    opacity: 0.15;
  }
}

/* checkbox.css */
.checkbox-wrapper {
  position: relative;
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.checkbox-input {
  position: absolute;
  inset: -0.5rem -0.75rem;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 1;
}

.checkbox-input:disabled {
  cursor: not-allowed;
}

.checkbox-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 4px;
  border: 1px solid var(--input);
  background: transparent;
  color: inherit;
  box-shadow: var(--shadow-field);
  transition-property:
    color, background-color, border-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-input:not(:disabled):not(:checked):hover + .checkbox-visual {
  border-color: color-mix(in oklch, var(--primary) 50%, var(--input));
}

.checkbox-input:active:not(:disabled) + .checkbox-visual {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.checkbox-input:focus-visible + .checkbox-visual {
  border-color: var(--ring);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.checkbox-input:disabled + .checkbox-visual {
  opacity: 0.5;
}

[data-disabled="true"] .checkbox-input {
  pointer-events: none;
}
[data-disabled="true"] .checkbox-visual {
  opacity: 0.5;
}

.checkbox-input[aria-invalid="true"] + .checkbox-visual {
  border-color: var(--destructive);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.checkbox-input:checked + .checkbox-visual {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--highlight-top), var(--shade-bottom), var(--shadow-field);
}

.checkbox-input[aria-invalid="true"]:checked + .checkbox-visual {
  border-color: var(--primary);
}

.checkbox-indicator {
  display: grid;
  place-content: center;
  color: currentColor;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-indicator svg {
  width: 0.875rem;
  height: 0.875rem;
}

.checkbox-input:not(:checked) + .checkbox-visual .checkbox-indicator {
  opacity: 0;
  transform: scale(0.5);
}

.dark .checkbox-visual {
  background-color: color-mix(in oklch, var(--input) 30%, transparent);
}

.dark .checkbox-input:not(:disabled):not(:checked):hover + .checkbox-visual {
  border-color: color-mix(in oklch, var(--primary) 60%, var(--input));
}

.dark .checkbox-input[aria-invalid="true"] + .checkbox-visual {
  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

.dark .checkbox-input:checked + .checkbox-visual {
  background-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .checkbox-visual {
    transition-duration: 75ms;
  }
  .checkbox-indicator {
    transition: none;
  }
  .checkbox-input:active:not(:disabled) + .checkbox-visual {
    transform: none;
  }
}

/* collapsible.css */
.collapsible {
  border-radius: var(--radius-lg);
  background-color: var(--card);
  color: var(--card-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-card);
}

.collapsible-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  list-style: none;
  outline: none;
  border-radius: var(--radius-lg);
  transition-property: background-color, border-radius;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-trigger::-webkit-details-marker {
  display: none;
}
.collapsible-trigger::marker {
  content: "";
}

.collapsible-trigger:hover {
  background-color: var(--muted);
}

.collapsible-trigger:focus-visible {
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--ring);
}

.collapsible-trigger svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.collapsible-trigger [data-slot="collapsible-chevron"] {
  display: inline-flex;
  transition: transform 250ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.collapsible[open] > .collapsible-trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.collapsible[open] > .collapsible-trigger [data-slot="collapsible-chevron"] {
  transform: rotate(180deg);
}

.collapsible[data-closing] > .collapsible-trigger {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  transition: border-radius 120ms cubic-bezier(0.4, 0, 0.7, 0.2);
}

.collapsible[data-closing]
  > .collapsible-trigger
  [data-slot="collapsible-chevron"] {
  transform: rotate(0deg);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.7, 0.2);
}

.collapsible-content {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 200ms cubic-bezier(0.22, 1.1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

@starting-style {
  .collapsible[open] > .collapsible-content {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.collapsible[data-closing] > .collapsible-content {
  animation: collapsible-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
  transition: none;
}

@keyframes collapsible-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.dark .collapsible-trigger:hover {
  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-trigger,
  .collapsible-trigger [data-slot="collapsible-chevron"],
  .collapsible-content {
    transition-duration: 0ms;
  }
  .collapsible[open]:not([data-closing]) > .collapsible-content,
  .collapsible[data-closing] > .collapsible-content {
    animation: none;
  }
}

/* combobox.css */
.cbox {
  position: relative;
  display: inline-flex;
}

.cbox-input-wrap {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-lg);
  border: 1px solid var(--input);
  background-color: transparent;

  box-shadow: var(--shadow-field);
  transition-property:
    color, background-color, border-color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  height: 2.25rem;
}

.cbox-input-wrap:hover:not(:has(:disabled)) {
  border-color: color-mix(in oklch, var(--ring) 40%, transparent);
}

.cbox-input-wrap:has(.cbox-input:focus-visible) {
  border-color: var(--ring);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.cbox[data-open] .cbox-input-wrap {
  border-color: var(--ring);
  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

.cbox-input-wrap:has(:disabled) {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.cbox-input-wrap[aria-invalid="true"],
.cbox-input-wrap:has([aria-invalid="true"]) {
  border-color: var(--destructive);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.cbox-input {
  flex: 1;
  min-width: 0;
  width: 10rem;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 0.625rem;

  font-size: 1rem;
  line-height: 1.5rem;
  color: inherit;
}

@media (min-width: 768px) {
  .cbox-input {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.cbox-input::placeholder {
  color: var(--muted-foreground);
}

.cbox-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: min(var(--radius-md), 10px);
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  margin-right: 0.125rem;
}

.cbox-trigger svg {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.cbox-trigger,
.cbox-clear {
  position: relative;
}
.cbox-trigger::after,
.cbox-clear::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
}

.cbox-trigger:hover {
  color: var(--foreground);
}

.cbox-trigger:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.cbox[data-open] .cbox-trigger {
  transform: rotate(180deg);
  color: var(--foreground);
}

.cbox-clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: min(var(--radius-md), 10px);
  outline: none;
  margin-right: 0.125rem;
  opacity: 0.5;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cbox-clear svg {
  width: 0.75rem;
  height: 0.75rem;
  pointer-events: none;
}

.cbox-clear:hover {
  color: var(--foreground);
  opacity: 1;
}

.cbox-clear:focus-visible {
  color: var(--foreground);
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.cbox-clear:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 100ms;
}

.cbox[data-has-value] .cbox-clear {
  display: flex;
}

.cbox[data-has-value]:has(.cbox-clear) .cbox-trigger {
  display: none;
}

.cbox-content {
  position: absolute;
  z-index: 50;
  min-width: 100%;
  max-height: 20rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-md);
  background: var(--popover);
  padding: 0.25rem;
  color: var(--popover-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-popover);
  outline: none;

  --cbox-slide: 0px;
  --cbox-base-x: 0px;
  transform: translateX(var(--cbox-base-x));
}

.cbox-content[data-state="closed"] {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.cbox-content[data-side="bottom"] {
  top: calc(100% + 4px);
  transform-origin: top;
  --cbox-slide: -4px;
}
.cbox-content[data-side="top"] {
  bottom: calc(100% + 4px);
  transform-origin: bottom;
  --cbox-slide: 4px;
}

.cbox-content[data-side="bottom"][data-align="start"],
.cbox-content[data-side="top"][data-align="start"] {
  left: 0;
}
.cbox-content[data-side="bottom"][data-align="center"],
.cbox-content[data-side="top"][data-align="center"] {
  left: 50%;
  --cbox-base-x: -50%;
}
.cbox-content[data-side="bottom"][data-align="end"],
.cbox-content[data-side="top"][data-align="end"] {
  right: 0;
}

.cbox-content[data-state="open"] {
  animation: cbox-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.cbox-content[data-closing] {
  pointer-events: none;
  animation: cbox-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes cbox-in {
  from {
    opacity: 0;
    transform: translateX(var(--cbox-base-x)) scale(0.96)
      translateY(var(--cbox-slide));
  }
  to {
    opacity: 1;
    transform: translateX(var(--cbox-base-x)) scale(1) translateY(0);
  }
}

@keyframes cbox-out {
  from {
    opacity: 1;
    transform: translateX(var(--cbox-base-x)) scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(var(--cbox-base-x)) scale(0.97)
      translateY(calc(var(--cbox-slide) * 0.5));
  }
}

.cbox-group {
  padding: 0.125rem 0;
}

.cbox-label {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.cbox-separator + .cbox-group > .cbox-label:first-child,
.cbox-separator + .cbox-label {
  padding-top: 0.375rem;
}

.cbox-item {
  position: relative;
  display: flex;
  cursor: default;
  align-items: center;
  gap: 0.375rem;

  border-radius: calc(var(--radius-md) - 4px);
  padding: 0.3125rem 2rem 0.3125rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  user-select: none;
}

.cbox-item[data-hidden] {
  display: none;
}

.cbox-item:hover:not([data-disabled="true"]):not([data-hidden]) {
  background: var(--accent);
  color: var(--accent-foreground);
  transition:
    background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
    color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cbox-item[data-highlighted] {
  background: var(--accent);
  color: var(--accent-foreground);
}

.cbox-item[data-selected] {
  font-weight: 500;
}

.cbox-item[data-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

.cbox-item svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.cbox-item-text {
  display: flex;
  flex: 1;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.cbox-item-indicator {
  pointer-events: none;
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cbox-item[data-selected] .cbox-item-indicator {
  opacity: 1;
  transform: scale(1);
}

.cbox-item-indicator svg {
  width: 0.875rem;
  height: 0.875rem;
}

.cbox-separator {
  margin: 0.25rem -0.25rem;
  height: 1px;
  background: var(--border);
}

.cbox-empty {
  display: none;
  width: 100%;
  justify-content: center;
  padding: 1.5rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.cbox-content[data-empty] .cbox-empty {
  display: flex;
}

.cbox-group:has([data-slot="combobox-item"]):not(
    :has([data-slot="combobox-item"]:not([data-hidden]))
  ) {
  display: none;
}

.cbox-separator:has(
  + .cbox-group:not(:has([data-slot="combobox-item"]:not([data-hidden])))
) {
  display: none;
}

.cbox-group:not(:has([data-slot="combobox-item"]:not([data-hidden])))
  + .cbox-separator {
  display: none;
}

.dark .cbox-input-wrap {
  border-color: var(--input);
  background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .cbox-input-wrap:hover:not(:has(:disabled)) {
  background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .cbox[data-open] .cbox-input-wrap {
  background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .cbox-input-wrap[aria-invalid="true"],
.dark .cbox-input-wrap:has([aria-invalid="true"]) {
  border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
  box-shadow:
    var(--shadow-field),
    0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .cbox-input-wrap,
  .cbox-trigger,
  .cbox-clear,
  .cbox-item,
  .cbox-item-indicator {
    transition: none;
  }
  .cbox-trigger:active:not(:disabled),
  .cbox-clear:active:not(:disabled) {
    transform: none;
  }
  .cbox-content[data-state="open"],
  .cbox-content[data-closing] {
    animation: none;
  }
}

/* command.css */
.cmd {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--popover);
  padding: 0.25rem;
  color: var(--popover-foreground);
  box-shadow: var(--shadow-popover);
}

.cmd-dialog .dialog-panel {
  max-width: calc(100% - 2rem);
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.cmd-dialog .cmd {
  height: 20rem;

  box-shadow: none;
}

@media (min-width: 640px) {
  .cmd-dialog .dialog-panel {
    max-width: 28rem;
  }
}

.cmd-dialog[open] {
  align-items: flex-start;
  padding-top: 8vh;
}

.cmd-input-wrapper {
  padding: 0.25rem;
  padding-bottom: 0;
}

.cmd-input-group {
  display: flex;
  height: 2rem;
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--input) 30%, transparent);
  background: color-mix(in oklch, var(--input) 30%, transparent);
  padding: 0 0.5rem;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-input-group:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.cmd-input {
  flex: 1;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
}

.cmd-input::placeholder {
  color: var(--muted-foreground);
}

.cmd-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.cmd-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  order: -1;
  padding-right: 0.5rem;
  color: var(--muted-foreground);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-input-icon svg {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-input-group:focus-within .cmd-input-icon {
  color: var(--foreground);
}

.cmd-input-group:focus-within .cmd-input-icon svg {
  opacity: 1;
}

.cmd-list {
  flex: 1;
  min-height: 0;
  max-height: 18rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 0.25rem;
  outline: none;
}

.cmd-empty {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  display: none;
}

.cmd-empty[data-visible] {
  display: block;
  animation: cmd-empty-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes cmd-empty-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cmd-group {
  overflow: hidden;
  padding: 0.25rem;
  color: var(--foreground);
}

.cmd-group[data-hidden] {
  display: none;
}

.cmd-group-heading {
  padding: 0.375rem 0.5rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
}

.cmd-item {
  position: relative;
  display: flex;
  cursor: default;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  border-radius: calc(var(--radius-md) - 4px);
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  user-select: none;
  transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-item:hover[data-highlighted] {
  transition:
    background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
    color 80ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-item[data-hidden] {
  display: none;
}

.cmd-item[data-highlighted] {
  background: var(--muted);
  color: var(--foreground);
}

.cmd-item:active:not([data-disabled="true"]) {
  transform: scale(0.98);
  transition-duration: 60ms;
}

.cmd-item[data-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

.cmd-item svg {
  pointer-events: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  transition: color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-item[data-highlighted] svg {
  color: var(--foreground);
}

.cmd-shortcut {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--muted) 60%, transparent);
  font-size: 0.625rem;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  transition:
    color 80ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cmd-item[data-highlighted] .cmd-shortcut {
  color: var(--foreground);
  border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
}

.cmd-separator {
  margin: 0.25rem -0.25rem;
  height: 1px;
  background: var(--border);
}

.dark .cmd-input-group {
  border-color: color-mix(in oklch, var(--input) 50%, transparent);
  background: color-mix(in oklch, var(--input) 40%, transparent);
}

.dark .cmd-shortcut {
  background: color-mix(in oklch, var(--muted) 40%, transparent);
  border-color: color-mix(in oklch, var(--foreground) 15%, transparent);
}

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

  .cmd-item:hover[data-highlighted] {
    transition: none;
  }
  .cmd-item:active:not([data-disabled="true"]) {
    transform: none;
  }
  .cmd-input-group,
  .cmd-input-icon,
  .cmd-input-icon svg,
  .cmd-item svg,
  .cmd-shortcut {
    transition: none;
  }
  .cmd-empty[data-visible] {
    animation: none;
  }
}

/* dark-mode.css */
/* An inline row that sits wherever the page puts it. It used to pin itself to
   the bottom-right corner in a little card of its own -- but where a control
   lives is the page's decision, not the component's, and its one caller wants
   it in the header beside the title. */
.dark-mode-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dark-mode-toggle .label {
	color: var(--muted-foreground);
	cursor: pointer;
}

.dark-mode-toggle:hover .label {
	color: var(--foreground);
}

.dark-mode-toggle svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* date-picker.css */
.dp-trigger {
	justify-content: flex-start;
	min-width: 15rem;
	font-weight: 400;
}

.dp-trigger-placeholder {
	color: var(--muted-foreground);
}

[data-slot="dp-label"] {
	flex: 1;
	text-align: left;
}

.dp-trigger + [data-slot="popover-content"] {
	width: auto;
	padding: 0.25rem;
}

/* dialog.css */
.dialog:not([open]) {
	display: none;
}
.dialog {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 50;
}
.dialog[open] {
	display: flex;
	align-items: safe center;
	justify-content: center;
}

.dialog::backdrop {
	background: var(--backdrop);
	-webkit-backdrop-filter: blur(var(--backdrop-blur));
	backdrop-filter: blur(var(--backdrop-blur));
}

.dialog-panel {
	position: relative;
	width: 100%;
	max-width: calc(100% - 2rem);
	max-height: calc(100% - 2rem);
	margin: auto;
	overflow-y: auto;
	display: grid;
	gap: 1rem;
	border-radius: var(--radius-xl);
	background: var(--background);
	color: var(--foreground);
	padding: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;

	box-shadow: var(--shadow-modal);
	outline: none;
}

@media (min-width: 640px) {
	.dialog-panel {
		max-width: 24rem;
	}
}

.dialog-close-x {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	border-radius: calc(var(--radius-xl) - 0.5rem);
}
.dialog-close-x::after {
	content: '';
	position: absolute;
	inset: -0.5rem;
}

.dialog-header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dialog-footer {
	margin: 0 -1rem -1rem -1rem;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5rem;
	border-radius: 0 0 var(--radius-xl) var(--radius-xl);
	border-top: 1px solid var(--border);
	background: color-mix(in oklch, var(--muted) 50%, transparent);
	padding: 1rem;
}

@media (min-width: 640px) {
	.dialog-footer {
		flex-direction: row;
		justify-content: flex-end;
	}
}

.dialog-title {
	font-size: 1rem;
	line-height: 1;
	font-weight: 500;
	margin: 0;
}

.dialog-description {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin: 0;
}
.dialog-description a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dialog-description a:hover {
	color: var(--foreground);
}

.dialog[open] .dialog-panel {
	animation: dialog-panel-in 200ms cubic-bezier(0.22, 1.1, 0.36, 1);
}
.dialog[open]::backdrop {
	animation: dialog-backdrop-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

.dialog[data-closing] .dialog-panel {
	pointer-events: none;
	animation: dialog-panel-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
.dialog[data-closing]::backdrop {
	animation: dialog-backdrop-out 100ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes dialog-panel-in {
	from { opacity: 0; transform: scale(0.96) translateY(6px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dialog-panel-out {
	from { opacity: 1; transform: scale(1) translateY(0); }
	to   { opacity: 0; transform: scale(0.97) translateY(3px); }
}
@keyframes dialog-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes dialog-backdrop-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dialog[open] .dialog-panel,
	.dialog[data-closing] .dialog-panel {
		animation: none;
	}
	.dialog[open]::backdrop,
	.dialog[data-closing]::backdrop {
		animation: none;
	}
}

/* drawer.css */
.drawer:not([open]) {
	display: none;
}
.drawer {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;

	overflow: hidden;
	overflow: clip;
	overscroll-behavior: contain;
	z-index: 50;
}
.drawer[open] {
	display: flex;
}

.drawer-bottom[open] {
	align-items: flex-end;
	justify-content: center;
}
.drawer-top[open] {
	align-items: flex-start;
	justify-content: center;
}
.drawer-left[open] {
	align-items: stretch;
	justify-content: flex-start;
}
.drawer-right[open] {
	align-items: stretch;
	justify-content: flex-end;
}

.drawer::backdrop {
	background: var(--backdrop);
	-webkit-backdrop-filter: blur(var(--backdrop-blur));
	backdrop-filter: blur(var(--backdrop-blur));
}

.drawer-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--background);
	color: var(--foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: none;
	overflow-y: auto;

	box-shadow: var(--shadow-modal);
}

.drawer-bottom .drawer-panel {
	width: 100%;
	max-height: 80vh;
	margin-top: 6rem;
	border-top-left-radius: var(--radius-xl);
	border-top-right-radius: var(--radius-xl);
	border-top: 1px solid var(--border);
}

.drawer-top .drawer-panel {
	width: 100%;
	max-height: 80vh;
	margin-bottom: 6rem;
	border-bottom-left-radius: var(--radius-xl);
	border-bottom-right-radius: var(--radius-xl);
	border-bottom: 1px solid var(--border);
}

.drawer-left .drawer-panel {
	height: 100%;
	width: 75%;
	max-width: 24rem;
	border-right: 1px solid var(--border);
	border-top-right-radius: var(--radius-xl);
	border-bottom-right-radius: var(--radius-xl);
}

.drawer-right .drawer-panel {
	height: 100%;
	width: 75%;
	max-width: 24rem;
	border-left: 1px solid var(--border);
	border-top-left-radius: var(--radius-xl);
	border-bottom-left-radius: var(--radius-xl);
}

.drawer-handle {
	display: flex;
	justify-content: center;
	padding: 1rem 0 0.75rem;
	flex-shrink: 0;
	cursor: grab;
	touch-action: none;
}
.drawer-handle:active {
	cursor: grabbing;
}
	.drawer-handle span {
		display: block;
		width: 100px;
		height: 4px;
		border-radius: 9999px;
		background-color: var(--muted-foreground);
		opacity: 0.4;

		transform: scaleX(1);
		transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1) 80ms;
	}

.drawer-close-x {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	border-radius: calc(var(--radius-xl) - 0.5rem);
}
.drawer-close-x::after {
	content: '';
	position: absolute;
	inset: -0.5rem;
}

.drawer-header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;

	opacity: 1;
	transform: translateY(0);
	transition: opacity 150ms ease-out 60ms, transform 150ms ease-out 60ms;
}
.drawer-bottom .drawer-header,
.drawer-top .drawer-header {
	text-align: center;
}
@media (min-width: 768px) {
	.drawer-bottom .drawer-header,
	.drawer-top .drawer-header {
		text-align: left;
	}
}

.drawer-footer {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-top: 1px solid var(--border);
	background: color-mix(in oklch, var(--muted) 50%, transparent);
	padding: 1rem;

	opacity: 1;
	transform: translateY(0);
	transition: opacity 150ms ease-out 100ms, transform 150ms ease-out 100ms;
}

.drawer-title {
	font-size: 1rem;
	line-height: 1;
	font-weight: 500;
	margin: 0;
}

.drawer-description {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin: 0;
}

.drawer-bottom[open] .drawer-panel {
	animation: drawer-slide-up-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
}
.drawer-top[open] .drawer-panel {
	animation: drawer-slide-down-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
}
.drawer-left[open] .drawer-panel {
	animation: drawer-slide-right-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
}
.drawer-right[open] .drawer-panel {
	animation: drawer-slide-left-in 280ms cubic-bezier(0.22, 1.12, 0.36, 1);
}

.drawer[open]::backdrop {
	animation: drawer-backdrop-in 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

.drawer[data-closing] .drawer-panel {
	pointer-events: none;
}
.drawer-bottom[data-closing] .drawer-panel {
	animation: drawer-slide-up-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
.drawer-top[data-closing] .drawer-panel {
	animation: drawer-slide-down-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
.drawer-left[data-closing] .drawer-panel {
	animation: drawer-slide-right-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
.drawer-right[data-closing] .drawer-panel {
	animation: drawer-slide-left-out 150ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

.drawer[data-closing]::backdrop {
	animation: drawer-backdrop-out 100ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes drawer-slide-up-in {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes drawer-slide-up-out {
	from { transform: translateY(var(--drawer-drag-y, 0px)); }
	to   { transform: translateY(100%); }
}
@keyframes drawer-slide-down-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes drawer-slide-down-out {
	from { transform: translateY(0); }
	to   { transform: translateY(-100%); }
}
@keyframes drawer-slide-right-in {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
@keyframes drawer-slide-right-out {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@keyframes drawer-slide-left-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@keyframes drawer-slide-left-out {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

@keyframes drawer-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes drawer-backdrop-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@starting-style {
	.drawer[open] .drawer-header {
		opacity: 0;
		transform: translateY(6px);
	}
	.drawer[open] .drawer-footer {
		opacity: 0;
		transform: translateY(6px);
	}
	.drawer[open] .drawer-handle span {
		transform: scaleX(0.4);
	}
}

.dark .drawer-handle span {
	background-color: var(--muted-foreground);
	opacity: 0.3;
}
.dark .drawer-footer {
	background: color-mix(in oklch, var(--muted) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.drawer[open] .drawer-panel,
	.drawer[data-closing] .drawer-panel {
		animation: none;
	}
	.drawer[open]::backdrop,
	.drawer[data-closing]::backdrop {
		animation: none;
	}
	.drawer-header,
	.drawer-footer {
		transition: none;
	}
	.drawer-handle span {
		transition: none;
	}
}

/* empty.css */
.empty {
	display: flex;
	width: 100%;
	min-width: 0;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	border-radius: var(--radius-xl);
	border: 1px dashed var(--border);
	padding: 1.5rem;
	text-align: center;

	text-wrap: balance;
}

.empty-header {
	display: flex;
	max-width: 24rem;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.empty-media {
	margin-bottom: 0.5rem;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.empty-media svg {
	pointer-events: none;
	flex-shrink: 0;
}

.empty-media-icon {
	display: flex;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	background-color: var(--muted);
	color: var(--foreground);
}

.empty-media-icon svg {
	width: 1rem;
	height: 1rem;
}

.empty-title {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.empty-description {
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--muted-foreground);

	text-wrap: pretty;
}

.empty-description a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.empty-description a:hover {
	color: var(--foreground);
}

.empty-content {
	display: flex;
	width: 100%;
	max-width: 24rem;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	text-wrap: balance;
}

/* error.css */
.error-main {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: 1.5rem;
}

.error-empty {
	max-width: 28rem;
	flex: none;
	border: none;
}

.error-code {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--muted-foreground);
}

/* field.css */
.field-set {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: none;
	margin: 0;
	padding: 0;
}
.field-set:has(> [data-slot="checkbox-group"]),
.field-set:has(> [data-slot="radio-group"]) {
	gap: 0.75rem;
}

.field-legend {
	margin-bottom: 0.375rem;
	font-weight: 500;
	text-wrap: balance;
}
.field-legend[data-variant="label"] {
	font-size: 0.875rem;
	line-height: 1.25rem;
}
.field-legend[data-variant="legend"] {
	font-size: 1rem;
	line-height: 1.5rem;
}

.field-group {
	container-type: inline-size;
	container-name: field-group;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 1.25rem;
}
.field-group .field-group {
	gap: 1rem;
}

.field {
	display: flex;
	width: 100%;
	gap: 0.5rem;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.field[data-invalid="true"],
.field:has([aria-invalid="true"]) {
	color: var(--destructive);
}

.field[data-orientation="vertical"] {
	flex-direction: column;
}
.field[data-orientation="vertical"] > * {
	width: 100%;
}
.field[data-orientation="vertical"] > .sr-only {
	width: auto;
}

.field[data-orientation="horizontal"] {
	flex-direction: row;
	align-items: center;
}
.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) {
	align-items: flex-start;
}
.field[data-orientation="horizontal"] > [data-slot="field-label"],
.field[data-orientation="horizontal"] > [data-slot="field-title"] {
	flex: 1 1 auto;
}
.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) [role="checkbox"],
.field[data-orientation="horizontal"]:has(> [data-slot="field-content"]) [role="radio"] {
	margin-top: 1px;
}

.field[data-orientation="responsive"] {
	flex-direction: column;
}
.field[data-orientation="responsive"] > * {
	width: 100%;
}
.field[data-orientation="responsive"] > .sr-only {
	width: auto;
}
@container field-group (min-width: 28rem) {
	.field[data-orientation="responsive"] {
		flex-direction: row;
		align-items: center;
	}
	.field[data-orientation="responsive"] > * {
		width: auto;
	}
	.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) {
		align-items: flex-start;
	}
	.field[data-orientation="responsive"] > [data-slot="field-label"],
	.field[data-orientation="responsive"] > [data-slot="field-title"] {
		flex: 1 1 auto;
	}
	.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) [role="checkbox"],
	.field[data-orientation="responsive"]:has(> [data-slot="field-content"]) [role="radio"] {
		margin-top: 1px;
	}
}

.field-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.125rem;
	line-height: 1.375;
}

.field-label {
	display: flex;
	width: fit-content;
	gap: 0.5rem;
	line-height: 1.375;
	font-size: 0.875rem;
	font-weight: 500;
	user-select: none;
	cursor: pointer;
	transition-property: opacity, background-color, border-color;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.field[data-disabled="true"] .field-label {
	pointer-events: none;
	opacity: 0.5;
}

.field-label:has(> [data-slot="field"]):has(:checked) {
	border-color: color-mix(in oklch, var(--primary) 30%, transparent);
	background-color: color-mix(in oklch, var(--primary) 5%, transparent);
}
.field-label:has(> [data-slot="field"]) {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	width: 100%;
	flex-direction: column;
}
.field-label > [data-slot="field"] {
	padding: 0.625rem;
}
.dark .field-label:has(> [data-slot="field"]):has(:checked) {
	border-color: color-mix(in oklch, var(--primary) 20%, transparent);
	background-color: color-mix(in oklch, var(--primary) 10%, transparent);
}

.field-title {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.375;
	font-weight: 500;
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.field[data-disabled="true"] .field-title {
	opacity: 0.5;
}

.field-description {
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
	color: var(--muted-foreground);
	text-wrap: pretty;
}
.field[data-orientation="horizontal"] .field-description {
	text-wrap: balance;
}
[data-variant="legend"] + .field-description,
[data-variant="label"] + .field-description {
	margin-top: -0.375rem;
}
.field-description:last-child {
	margin-top: 0;
}
.field-description:nth-last-child(2) {
	margin-top: -0.25rem;
}
.field-description a {
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.field-description a:hover {
	color: var(--primary);
}

.field-separator {
	position: relative;
	margin-top: -0.5rem;
	margin-bottom: -0.5rem;
	height: 1.25rem;
	font-size: 0.875rem;
}
.field-separator-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border: none;
	height: 1px;
	background-color: var(--border);
	margin: 0;
}
.field-separator-content {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	background-color: var(--background);
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	color: var(--muted-foreground);
}
.field-separator-content:empty {
	display: none;
}

.field-error {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--destructive);
}

@media (prefers-reduced-motion: reduce) {
	.field,
	.field-label,
	.field-title,
	.field-description a {
		transition-duration: 75ms;
	}
}

/* icon.css */
.i3d-body {
	opacity: var(--icon-body);
}

#icon-3d .lit {
	stop-opacity: var(--icon-lit);
}

#icon-3d .shade {
	stop-opacity: var(--icon-shade);
}

.icon {
	filter: drop-shadow(0 1px 1px var(--icon-cast));
}

.icon-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* input-group.css */
.input-group {
	position: relative;
	display: flex;
	height: 2.25rem;
	width: 100%;
	min-width: 0;
	align-items: center;
	border-radius: var(--radius-lg);
	border: 1px solid var(--input);
	cursor: text;

	box-shadow: var(--shadow-field);
	transition-property: color, background-color, border-color, box-shadow, opacity;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}

.input-group:has(> textarea),
.input-group.input-group-has-textarea {
	height: auto;
}

.input-group:has(.input-group-control:focus-visible),
.input-group:has(.input-group-control-textarea:focus-visible) {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.input-group:has([aria-invalid="true"]) {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.input-group[data-disabled="true"] {
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
	opacity: 0.5;
	pointer-events: none;
}

.input-group-addon {
	display: flex;
	height: auto;
	cursor: text;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--muted-foreground);
	user-select: none;
	transition-property: color;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group:focus-within .input-group-addon {
	color: var(--foreground);
}

.input-group:has([aria-invalid="true"]) .input-group-addon {
	color: var(--muted-foreground);
}

.input-group[data-disabled="true"] .input-group-addon {
	opacity: 0.5;
}

.input-group-addon svg:not([class*="size-"]) {
	width: 1rem;
	height: 1rem;
}

.input-group-addon-inline-start {
	order: -1;
	padding-left: 0.5rem;
}

.input-group-addon-inline-end {
	order: 999;
	padding-right: 0.5rem;
}

.input-group .input-group-control {
	flex: 1;
	border-radius: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	outline: none;
}

.input-group .input-group-control:focus-visible {
	box-shadow: none;
	border-color: transparent;
}

.input-group .input-group-control:disabled {
	background-color: transparent;
}

.input-group .input-group-control[aria-invalid="true"] {
	box-shadow: none;
}

.input-group:has(> .input-group-addon-inline-start) > .input-group-control {
	padding-left: 0.375rem;
}

.input-group:has(> .input-group-addon-inline-end) > .input-group-control {
	padding-right: 0.375rem;
}

.input-group .input-group-control-textarea {
	flex: 1;
	resize: none;
	border-radius: 0;
	border: 0;
	background-color: transparent;
	padding: 0.5rem 0.625rem;
	box-shadow: none;
	outline: none;
}

.input-group .input-group-control-textarea:focus-visible {
	box-shadow: none;
	border-color: transparent;
}

.input-group .input-group-control-textarea:disabled {
	background-color: transparent;
}

.input-group .input-group-control-textarea[aria-invalid="true"] {
	box-shadow: none;
}

.input-group-btn {
	--btn-shadow: 0 0 rgba(0, 0, 0, 0);
	--btn-shadow-pressed: 0 0 rgba(0, 0, 0, 0);
}

.input-group-btn-size-xs {
	height: 1.5rem;
	gap: 0.25rem;
	border-radius: calc(var(--radius-md) - 3px);
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.input-group-btn-size-xs svg:not([class*="size-"]) {
	width: 0.875rem;
	height: 0.875rem;
}

.btn.input-group-btn-size-xs::after,
.btn.input-group-btn-size-icon-xs::after {
	content: '';
	position: absolute;
	inset: -0.25rem;
}

.input-group-btn-size-sm {
}

.input-group-btn-size-icon-xs {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: calc(var(--radius-md) - 3px);
	padding: 0;
}

.input-group-btn-size-icon-sm {
	width: 2rem;
	height: 2rem;
	padding: 0;
}

.input-group-text {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: inherit;
}

.input-group-text svg {
	pointer-events: none;
}

.input-group-text svg:not([class*="size-"]) {
	width: 1rem;
	height: 1rem;
}

.dark .input-group {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}

.dark .input-group[data-disabled="true"] {
	background-color: color-mix(in oklch, var(--input) 80%, transparent);
}

.dark .input-group:has([aria-invalid="true"]) {
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

.dark .input-group .input-group-control {
	background-color: transparent;
}

.dark .input-group .input-group-control:disabled {
	background-color: transparent;
}

.dark .input-group .input-group-control-textarea {
	background-color: transparent;
}

.dark .input-group .input-group-control-textarea:disabled {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.input-group,
	.input-group-addon {
		transition-duration: 75ms;
	}
}

/* input.css */
.input {
	height: 2.25rem;
	width: 100%;
	min-width: 0;
	border-radius: var(--radius-lg);
	border: 1px solid var(--input);
	background-color: transparent;
	padding: 0.25rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;

	box-shadow: var(--shadow-field);
	transition-property: color, background-color, border-color, box-shadow, opacity;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
}

.input::file-selector-button {
	display: inline-flex;
	height: 1.5rem;
	border: 0;
	background-color: transparent;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: var(--foreground);
}

.input::placeholder {
	color: var(--muted-foreground);
}

.input:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.input:disabled {
	pointer-events: none;
	cursor: not-allowed;
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
	opacity: 0.5;
}

.input[aria-invalid="true"] {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

@media (min-width: 768px) {
	.input {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

.dark .input {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .input:disabled {
	background-color: color-mix(in oklch, var(--input) 80%, transparent);
}
.dark .input[aria-invalid="true"] {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.input {
		transition-duration: 75ms;
	}
}

/* kbd.css */
.kbd {
	pointer-events: none;
	display: inline-flex;
	height: 1.25rem;
	width: fit-content;
	min-width: 1.25rem;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	border-radius: calc(var(--radius) - 4px);
	border: 1px solid var(--border);
	background-color: var(--muted);
	padding-left: 0.375rem;
	padding-right: 0.375rem;

	font-family: var(--font-mono);
	font-variant-numeric: slashed-zero tabular-nums;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--muted-foreground);
	user-select: none;

	box-shadow:
		var(--highlight-top),
		var(--shade-bottom),
		0 1px 0 0 color-mix(in oklch, var(--foreground) 10%, transparent),
		var(--shadow-field);
}

.kbd svg {
	width: 0.75rem;
	height: 0.75rem;
}

[data-slot="tooltip-content"] .kbd {
	border-color: color-mix(in oklch, var(--background) 25%, transparent);
	background-color: color-mix(in oklch, var(--background) 20%, transparent);
	color: var(--background);
	box-shadow: 0 1px 0 0 color-mix(in oklch, var(--background) 15%, transparent);
}

.kbd-group {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.dark .kbd {
	border-color: color-mix(in oklch, var(--foreground) 12%, transparent);
}

.dark [data-slot="tooltip-content"] .kbd {
	border-color: color-mix(in oklch, var(--background) 15%, transparent);
	background-color: color-mix(in oklch, var(--background) 10%, transparent);
	box-shadow: 0 1px 0 0 color-mix(in oklch, var(--background) 8%, transparent);
}

/* label.css */
.label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 500;
	user-select: none;
	transition-property: color, opacity;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-disabled="true"] .label {
	pointer-events: none;
	opacity: 0.5;
}

.input:disabled ~ .label,
.label:has(~ .input:disabled) {
	cursor: not-allowed;
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
	.label {
		transition-duration: 75ms;
	}
}

/* loader.css */
@keyframes loader-tick {
	to { transform: rotate(360deg); }
}
.loader {
	width: 1rem;
	height: 1rem;
	animation: loader-tick 0.96s steps(12, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
	.loader {
		animation-duration: 1.92s;
	}
}

/* menu.css */
.ctxm-trigger {
	user-select: none;
}

.ctxm-content {
	position: fixed;
	z-index: 10000;
	min-width: 12rem;
	max-height: calc(100vh - 2rem);
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: var(--radius-md);
	background: var(--popover);
	padding: 0.25rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;
	transform-origin: top left;
}

.ctxm-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.ctxm-content[data-closing] {
	pointer-events: none;
	animation: ctxm-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes ctxm-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.95);
	}
}

.ctxm-sub-content {
	position: fixed;
	z-index: 10000;
	min-width: 8rem;
	border-radius: var(--radius-md);
	background: var(--popover);
	padding: 0.25rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;
}

.ctxm-sub-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.ctxm-sub-content[data-closing] {
	pointer-events: none;
	animation: menu-sub-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

.ctxm-sub-content[data-side="left"][data-closing] {
	animation-name: menu-sub-out-left;
}

@media (prefers-reduced-motion: reduce) {
	.ctxm-content[data-closing] {
		animation: none;
	}
}

.ddm {
	position: relative;
	display: inline-flex;
}

.ddm-trigger {
	cursor: pointer;
}

.ddm-content {
	position: absolute;
	z-index: 50;
	min-width: 12rem;
	border-radius: var(--radius-md);

	background: var(--popover);
	padding: 0.25rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;

	--ddm-base-x: 0px;
	--ddm-base-y: 0px;
	--ddm-slide-x: 0px;
	--ddm-slide-y: 0px;
	transform: translate(var(--ddm-base-x), var(--ddm-base-y));
}

.ddm-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.ddm-content[data-side="bottom"] {
	top: calc(100% + 4px);
	transform-origin: top;
	--ddm-slide-y: -2px;
}
.ddm-content[data-side="top"] {
	bottom: calc(100% + 4px);
	transform-origin: bottom;
	--ddm-slide-y: 2px;
}
.ddm-content[data-side="left"] {
	right: calc(100% + 4px);
	top: 0;
	transform-origin: right;
	--ddm-slide-x: 2px;
}
.ddm-content[data-side="right"] {
	left: calc(100% + 4px);
	top: 0;
	transform-origin: left;
	--ddm-slide-x: -2px;
}

.ddm-content[data-side="bottom"][data-align="start"],
.ddm-content[data-side="top"][data-align="start"] {
	left: 0;
}
.ddm-content[data-side="bottom"][data-align="center"],
.ddm-content[data-side="top"][data-align="center"] {
	left: 50%;
	--ddm-base-x: -50%;
}
.ddm-content[data-side="bottom"][data-align="end"],
.ddm-content[data-side="top"][data-align="end"] {
	right: 0;
}
.ddm-content[data-side="left"][data-align="start"],
.ddm-content[data-side="right"][data-align="start"] {
	top: 0;
}
.ddm-content[data-side="left"][data-align="center"],
.ddm-content[data-side="right"][data-align="center"] {
	top: 50%;
	--ddm-base-y: -50%;
}
.ddm-content[data-side="left"][data-align="end"],
.ddm-content[data-side="right"][data-align="end"] {
	top: auto;
	bottom: 0;
}

.ddm-content[data-state="open"] {
	animation: ddm-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.ddm-content[data-closing] {
	pointer-events: none;
	animation: ddm-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes ddm-in {
	from {
		opacity: 0;
		transform: translate(var(--ddm-base-x), var(--ddm-base-y))
			scale(0.95)
			translate(var(--ddm-slide-x), var(--ddm-slide-y));
	}
	to {
		opacity: 1;
		transform: translate(var(--ddm-base-x), var(--ddm-base-y))
			scale(1);
	}
}

@keyframes ddm-out {
	from {
		opacity: 1;
		transform: translate(var(--ddm-base-x), var(--ddm-base-y))
			scale(1);
	}
	to {
		opacity: 0;
		transform: translate(var(--ddm-base-x), var(--ddm-base-y))
			scale(0.95)
			translate(
				calc(var(--ddm-slide-x) * 0.5),
				calc(var(--ddm-slide-y) * 0.5)
			);
	}
}

.ddm-sub {
	position: relative;
}

.ddm-sub-content {
	position: absolute;
	z-index: 50;
	min-width: 8rem;
	border-radius: var(--radius-md);
	background: var(--popover);
	padding: 0.25rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;
}

.ddm-sub-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.ddm-sub-content[data-side="right"] {
	left: 100%;
	top: -0.1875rem;
}
.ddm-sub-content[data-side="left"] {
	right: 100%;
	top: -0.1875rem;
}

.ddm-sub-content[data-state="open"] {
	animation: menu-sub-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}
.ddm-sub-content[data-closing] {
	pointer-events: none;
	animation: menu-sub-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

.ddm-sub-content[data-side="left"][data-state="open"] {
	animation-name: menu-sub-in-left;
}
.ddm-sub-content[data-side="left"][data-closing] {
	animation-name: menu-sub-out-left;
}

@media (prefers-reduced-motion: reduce) {
	.ddm-content[data-state="open"],
	.ddm-content[data-closing] {
		animation: none;
	}
}

.ddm-item, .ctxm-item,
.ddm-checkbox-item, .ctxm-checkbox-item,
.ddm-radio-item, .ctxm-radio-item,
.ddm-sub-trigger, .ctxm-sub-trigger {
	position: relative;
	display: flex;
	cursor: default;
	align-items: center;
	gap: 0.375rem;

	border-radius: calc(var(--radius-md) - 4px);
	padding: 0.3125rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: none;
	user-select: none;
}

.ddm-item:hover[data-highlighted], .ctxm-item:hover[data-highlighted],
.ddm-checkbox-item:hover[data-highlighted], .ctxm-checkbox-item:hover[data-highlighted],
.ddm-radio-item:hover[data-highlighted], .ctxm-radio-item:hover[data-highlighted],
.ddm-sub-trigger:hover[data-highlighted], .ctxm-sub-trigger:hover[data-highlighted] {
	transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
		color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ddm-item[data-highlighted], .ctxm-item[data-highlighted],
.ddm-checkbox-item[data-highlighted], .ctxm-checkbox-item[data-highlighted],
.ddm-radio-item[data-highlighted], .ctxm-radio-item[data-highlighted],
.ddm-sub-trigger[data-highlighted], .ctxm-sub-trigger[data-highlighted] {
	background: var(--muted);
	color: var(--foreground);
}

.ddm-item[data-highlighted] svg, .ctxm-item[data-highlighted] svg,
.ddm-checkbox-item[data-highlighted] svg, .ctxm-checkbox-item[data-highlighted] svg,
.ddm-radio-item[data-highlighted] svg, .ctxm-radio-item[data-highlighted] svg,
.ddm-sub-trigger[data-highlighted] svg, .ctxm-sub-trigger[data-highlighted] svg {
	color: var(--foreground);
}
.ddm-item[data-variant="destructive"][data-highlighted] svg,
.ctxm-item[data-variant="destructive"][data-highlighted] svg {
	color: var(--destructive);
}

.ddm-item[data-variant="destructive"],
.ctxm-item[data-variant="destructive"] {
	color: var(--destructive);
}
.ddm-item[data-variant="destructive"][data-highlighted],
.ctxm-item[data-variant="destructive"][data-highlighted] {
	background: color-mix(in oklch, var(--destructive) 10%, transparent);
	color: var(--destructive);
}

.ddm-item[data-inset="true"], .ctxm-item[data-inset="true"],
.ddm-checkbox-item[data-inset="true"], .ctxm-checkbox-item[data-inset="true"],
.ddm-radio-item[data-inset="true"], .ctxm-radio-item[data-inset="true"],
.ddm-sub-trigger[data-inset="true"], .ctxm-sub-trigger[data-inset="true"],
.ddm-label[data-inset="true"], .ctxm-label[data-inset="true"] {
	padding-left: 1.75rem;
}

.ddm-item[data-disabled="true"], .ctxm-item[data-disabled="true"],
.ddm-checkbox-item[data-disabled="true"], .ctxm-checkbox-item[data-disabled="true"],
.ddm-radio-item[data-disabled="true"], .ctxm-radio-item[data-disabled="true"],
.ddm-sub-trigger[data-disabled="true"], .ctxm-sub-trigger[data-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
}

.ddm-item svg, .ctxm-item svg,
.ddm-checkbox-item svg, .ctxm-checkbox-item svg,
.ddm-radio-item svg, .ctxm-radio-item svg,
.ddm-sub-trigger svg, .ctxm-sub-trigger svg {
	pointer-events: none;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.ddm-checkbox-item, .ctxm-checkbox-item,
.ddm-radio-item, .ctxm-radio-item {
	padding-right: 2rem;
}

.ddm-item-indicator, .ctxm-item-indicator {
	pointer-events: none;
	position: absolute;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ddm-checkbox-item[data-checked="true"] .ddm-item-indicator,
.ctxm-checkbox-item[data-checked="true"] .ctxm-item-indicator,
.ddm-radio-item[data-checked="true"] .ddm-item-indicator,
.ctxm-radio-item[data-checked="true"] .ctxm-item-indicator {
	opacity: 1;
	transform: scale(1);
}

.ddm-item-indicator svg, .ctxm-item-indicator svg {
	width: 0.875rem;
	height: 0.875rem;
}

.ddm-sub-trigger, .ctxm-sub-trigger {
	padding-right: 0.375rem;
}

.ddm-sub-trigger > svg:last-child,
.ctxm-sub-trigger > svg:last-child {
	margin-left: auto;
	transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ddm-sub-trigger[data-open="true"] > svg:last-child,
.ctxm-sub-trigger[data-open="true"] > svg:last-child {
	transform: rotate(90deg);
}
.ddm-sub-trigger[data-open="true"],
.ctxm-sub-trigger[data-open="true"] {
	background: var(--muted);
	color: var(--foreground);
}

.ddm-label, .ctxm-label {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted-foreground);
}

.ddm-separator + .ddm-label,
.ctxm-separator + .ctxm-label {
	padding-top: 0.375rem;
}

.ddm-separator, .ctxm-separator {
	margin: 0.25rem -0.25rem;
	height: 1px;
	background: var(--border);
}

.ddm-shortcut, .ctxm-shortcut {
	margin-left: auto;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--muted-foreground);
}
.ddm-item[data-highlighted] .ddm-shortcut,
.ctxm-item[data-highlighted] .ctxm-shortcut,
.ddm-checkbox-item[data-highlighted] .ddm-shortcut,
.ctxm-checkbox-item[data-highlighted] .ctxm-shortcut,
.ddm-radio-item[data-highlighted] .ddm-shortcut,
.ctxm-radio-item[data-highlighted] .ctxm-shortcut,
.ddm-sub-trigger[data-highlighted] .ddm-shortcut,
.ctxm-sub-trigger[data-highlighted] .ctxm-shortcut {
	color: var(--foreground);
}
.ddm-item[data-variant="destructive"][data-highlighted] .ddm-shortcut,
.ctxm-item[data-variant="destructive"][data-highlighted] .ctxm-shortcut {
	color: var(--destructive);
}

.dark .ddm-item[data-variant="destructive"][data-highlighted],
.dark .ctxm-item[data-variant="destructive"][data-highlighted] {
	background: color-mix(in oklch, var(--destructive) 20%, transparent);
}

@keyframes menu-sub-in {
	from { opacity: 0; transform: translateX(-4px) scale(0.97); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes menu-sub-out {
	from { opacity: 1; transform: translateX(0) scale(1); }
	to { opacity: 0; transform: translateX(-4px) scale(0.97); }
}
@keyframes menu-sub-in-left {
	from { opacity: 0; transform: translateX(4px) scale(0.97); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes menu-sub-out-left {
	from { opacity: 1; transform: translateX(0) scale(1); }
	to { opacity: 0; transform: translateX(4px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
	.ddm-item, .ctxm-item,
	.ddm-checkbox-item, .ctxm-checkbox-item,
	.ddm-radio-item, .ctxm-radio-item,
	.ddm-sub-trigger, .ctxm-sub-trigger,
	.ddm-sub-trigger > svg:last-child,
	.ctxm-sub-trigger > svg:last-child,
	.ddm-item-indicator, .ctxm-item-indicator {
		transition: none;
	}

	.ddm-item:hover[data-highlighted], .ctxm-item:hover[data-highlighted],
	.ddm-checkbox-item:hover[data-highlighted], .ctxm-checkbox-item:hover[data-highlighted],
	.ddm-radio-item:hover[data-highlighted], .ctxm-radio-item:hover[data-highlighted],
	.ddm-sub-trigger:hover[data-highlighted], .ctxm-sub-trigger:hover[data-highlighted] {
		transition: none;
	}
	.ddm-sub-content[data-state="open"], .ctxm-sub-content[data-state="open"],
	.ddm-sub-content[data-closing], .ctxm-sub-content[data-closing] {
		animation: none;
	}
}

/* native-select.css */
.native-select-wrapper {
	position: relative;
	width: fit-content;
}
.native-select-wrapper:has(select:disabled) {
	opacity: 0.5;
}

.native-select {
	height: 2.25rem;
	width: 100%;
	min-width: 0;
	appearance: none;
	border-radius: var(--radius-lg);
	border: 1px solid var(--input);
	background-color: transparent;

	box-shadow: var(--shadow-field);
	padding: 0.25rem 2rem 0.25rem 0.625rem;

	font-size: 1rem;
	line-height: 1.5rem;
	transition-property: color, background-color, border-color, box-shadow, opacity;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	user-select: none;
}

.native-select:hover:not(:disabled) {
	border-color: color-mix(in oklch, var(--ring) 40%, transparent);
}

.native-select:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.native-select:disabled {
	pointer-events: none;
	cursor: not-allowed;
}

.native-select[aria-invalid="true"] {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.native-select[data-size="sm"] {
	height: 2rem;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	border-radius: min(var(--radius-md), 10px);
}

@media (min-width: 768px) {
	.native-select {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

.native-select-icon {
	position: absolute;
	top: 50%;
	right: 0.625rem;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
	color: var(--muted-foreground);
	display: flex;
	align-items: center;
	justify-content: center;
	transition-property: color, transform;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.native-select-icon svg {
	width: 1rem;
	height: 1rem;
}

.native-select-wrapper:has(select:hover:not(:disabled)) .native-select-icon {
	color: var(--foreground);
}

.native-select-wrapper:has(select:focus-visible) .native-select-icon {
	color: var(--foreground);
}

.dark .native-select {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .native-select:hover {
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .native-select[aria-invalid="true"] {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.native-select,
	.native-select-icon {
		transition-duration: 75ms;
	}
}

/* pagination.css */
.pagination {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	width: 100%;
	justify-content: center;
}

.pagination-content {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.pagination-link {
	text-decoration: none;
	cursor: pointer;

	font-variant-numeric: tabular-nums;
}

.pagination-link[data-active="true"] {
	font-weight: 600;
	color: var(--foreground);
	pointer-events: none;
	cursor: default;

	background-color: transparent;
	border-color: transparent;
	--btn-shadow: 0 0 rgba(0, 0, 0, 0);
	--btn-shadow-pressed: 0 0 rgba(0, 0, 0, 0);
}

.pagination-link[data-active="true"]::after {
	content: '';
	position: absolute;
	left: 50%;

	top: 50%;
	width: 1.125rem;
	height: 2px;
	transform: translate(-50%, 0.625rem);
	border-radius: 9999px;
	background-color: var(--primary);
}

.pagination-link[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
	cursor: default;
}

.pagination-prev {
	padding-left: 0.375rem;
}
.pagination-next {
	padding-right: 0.375rem;
}

.pagination-prev svg,
.pagination-next svg {
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pagination-prev:not([aria-disabled="true"]):hover svg {
	transform: translateX(-2px);
}
.pagination-next:not([aria-disabled="true"]):hover svg {
	transform: translateX(2px);
}

@media (max-width: 639px) {
	.pagination-text {
		display: none;
	}
}
@media (min-width: 640px) {
	.pagination-text {
		display: block;
	}
}

@media (max-width: 639px) {
	.pagination-link.btn-size-icon {
		width: 2.75rem;
		height: 2.75rem;
	}
	.pagination-prev,
	.pagination-next {
		width: 2.75rem;
		height: 2.75rem;
		padding-left: 0;
		padding-right: 0;
	}
}

.pagination-ellipsis {
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	color: var(--muted-foreground);
}

.pagination-ellipsis svg {
	width: 1rem;
	height: 1rem;
}

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

.dark .pagination-link[aria-disabled="true"] {
	opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
	.pagination-prev svg,
	.pagination-next svg {
		transition: none;
	}
	.pagination-prev:hover svg,
	.pagination-next:hover svg {
		transform: none;
	}
}

/* popover.css */
.popover {
	position: relative;
	display: inline-flex;
}

.popover-trigger {
	cursor: pointer;
}

.popover-content {
	position: absolute;
	z-index: 50;
	width: 18rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	border-radius: var(--radius-lg);
	background: var(--popover);
	padding: 0.625rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;

	--popover-base-x: 0px;
	--popover-base-y: 0px;
	--popover-slide-x: 0px;
	--popover-slide-y: 0px;
	transform: translate(var(--popover-base-x), var(--popover-base-y));
}

.popover-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.popover-content[data-side="bottom"] {
	top: calc(100% + 4px);
	transform-origin: top;
	--popover-slide-y: -4px;
}
.popover-content[data-side="top"] {
	bottom: calc(100% + 4px);
	transform-origin: bottom;
	--popover-slide-y: 4px;
}
.popover-content[data-side="left"] {
	right: calc(100% + 4px);
	top: 0;
	transform-origin: right;
	--popover-slide-x: 4px;
}
.popover-content[data-side="right"] {
	left: calc(100% + 4px);
	top: 0;
	transform-origin: left;
	--popover-slide-x: -4px;
}

.popover-content[data-side="bottom"][data-align="start"],
.popover-content[data-side="top"][data-align="start"] {
	left: 0;
}
.popover-content[data-side="bottom"][data-align="center"],
.popover-content[data-side="top"][data-align="center"] {
	left: 50%;
	--popover-base-x: -50%;
}
.popover-content[data-side="bottom"][data-align="end"],
.popover-content[data-side="top"][data-align="end"] {
	right: 0;
}
.popover-content[data-side="left"][data-align="start"],
.popover-content[data-side="right"][data-align="start"] {
	top: 0;
}
.popover-content[data-side="left"][data-align="center"],
.popover-content[data-side="right"][data-align="center"] {
	top: 50%;
	--popover-base-y: -50%;
}
.popover-content[data-side="left"][data-align="end"],
.popover-content[data-side="right"][data-align="end"] {
	top: auto;
	bottom: 0;
}

.popover-content[data-state="open"] {
	animation: popover-in 180ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.popover-content[data-closing] {
	pointer-events: none;
	animation: popover-out 120ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes popover-in {
	from {
		opacity: 0;
		transform: translate(var(--popover-base-x), var(--popover-base-y))
			scale(0.96)
			translate(var(--popover-slide-x), var(--popover-slide-y));
	}
	to {
		opacity: 1;
		transform: translate(var(--popover-base-x), var(--popover-base-y))
			scale(1);
	}
}

@keyframes popover-out {
	from {
		opacity: 1;
		transform: translate(var(--popover-base-x), var(--popover-base-y))
			scale(1);
	}
	to {
		opacity: 0;
		transform: translate(var(--popover-base-x), var(--popover-base-y))
			scale(0.97)
			translate(
				calc(var(--popover-slide-x) * 0.5),
				calc(var(--popover-slide-y) * 0.5)
			);
	}
}

.popover-header {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	font-size: 0.875rem;
}

.popover-title {
	font-weight: 500;
}

.popover-description {
	color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
	.popover-content[data-state="open"],
	.popover-content[data-closing] {
		animation: none;
	}
}

/* progress.css */
@keyframes progress-shimmer {
	100% {
		transform: translateX(100%);
	}
}

@keyframes progress-indeterminate {
	0% {
		left: -40%;
		width: 40%;
	}
	50% {
		left: 20%;
		width: 50%;
	}
	100% {
		left: 100%;
		width: 40%;
	}
}

.progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.progress-track {
	position: relative;
	display: flex;
	height: 0.375rem;
	width: 100%;
	align-items: center;
	overflow: hidden;
	border-radius: 9999px;
	background-color: var(--muted);

	box-shadow: var(--shadow-well);
}

.progress-indicator {
	position: relative;
	height: 100%;
	border-radius: 9999px;
	background-color: var(--primary);

	box-shadow: var(--highlight-top);
	overflow: hidden;

	transition: width 300ms linear;
}

.progress-indicator::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklch, var(--primary-foreground) 15%, transparent) 40%,
		color-mix(in oklch, var(--primary-foreground) 25%, transparent) 60%,
		transparent 100%
	);

	animation: progress-shimmer 1.5s ease-in-out infinite;
}

.progress[data-state="complete"] .progress-indicator::after {
	animation: none;
	display: none;
}

.progress[data-state="indeterminate"] .progress-indicator {
	position: absolute;
	width: 40%;
	animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.progress[data-state="indeterminate"] .progress-indicator::after {
	animation: none;
	display: none;
}

.progress-label {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
}

.progress-value {
	margin-left: auto;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}

.dark .progress-indicator::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklch, var(--primary-foreground) 8%, transparent) 40%,
		color-mix(in oklch, var(--primary-foreground) 12%, transparent) 60%,
		transparent 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.progress-indicator {
		transition-duration: 75ms;
	}

	.progress-indicator::after {
		animation: none;
		display: none;
	}

	.progress[data-state="indeterminate"] .progress-indicator {
		animation: none;
		width: 50%;
		left: 25%;
	}
}

/* radio-group.css */
.radio-group {
	display: grid;
	width: 100%;
	gap: 0.25rem;
}

.radio-label {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	cursor: pointer;
}

.radio-label-text {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	user-select: none;
}

.radio-wrapper {
	position: relative;
	display: inline-flex;
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.radio-input {
	position: absolute;
	inset: -0.5rem -0.75rem;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	z-index: 1;
}

.radio-input:disabled {
	cursor: not-allowed;
}

.radio-visual {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 1px solid var(--input);
	background: transparent;
	color: inherit;

	box-shadow: var(--shadow-field);
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		color 100ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.radio-input:not(:disabled):not(:checked):hover + .radio-visual {
	border-color: color-mix(in oklch, var(--primary) 50%, var(--input));
}

.radio-input:active:not(:disabled) + .radio-visual {
	transform: scale(0.97);
	transition-duration: 100ms;
}

.radio-input:focus-visible + .radio-visual {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.radio-input:disabled + .radio-visual {
	opacity: 0.5;
}

.radio-label:has(.radio-input:disabled) {
	cursor: not-allowed;
	pointer-events: none;
}
.radio-label:has(.radio-input:disabled) .radio-label-text {
	opacity: 0.5;
}

.radio-input[aria-invalid="true"] + .radio-visual {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.radio-input:checked + .radio-visual {
	border-color: var(--primary);
	background-color: var(--primary);
	color: var(--primary-foreground);
	box-shadow: var(--highlight-top), var(--shade-bottom), var(--shadow-field);
}

.radio-input[aria-invalid="true"]:checked + .radio-visual {
	border-color: var(--primary);
}

.radio-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
}

.radio-dot {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--primary-foreground);
	opacity: 1;
	transform: scale(1);
	transition: opacity 120ms 40ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 200ms 40ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.radio-input:not(:checked) + .radio-visual .radio-dot {
	opacity: 0;
	transform: scale(0);
	transition-delay: 0ms;
}

.dark .radio-visual {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}

.dark .radio-input:not(:disabled):not(:checked):hover + .radio-visual {
	border-color: color-mix(in oklch, var(--primary) 60%, var(--input));
}

.dark .radio-input[aria-invalid="true"] + .radio-visual {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

.dark .radio-input:checked + .radio-visual {
	background-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
	.radio-visual {
		transition-duration: 75ms;
	}
	.radio-dot {
		transition: none;
	}
	.radio-input:active:not(:disabled) + .radio-visual {
		transform: none;
	}
}

/* resizable.css */
.resizable-group {
	display: flex;
	height: 100%;
	width: 100%;
}
.resizable-group-vertical {
	flex-direction: column;
}

.resizable-panel {
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;
}

.resizable-handle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1px;
	background-color: var(--border);
	outline: none;
	cursor: col-resize;
	touch-action: none;
	user-select: none;
	transition: background-color 150ms ease-out;
}

.resizable-handle::after {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	width: 16px;
	transform: translateX(-50%);
}

.resizable-handle:focus-visible {
	background-color: var(--ring);
	box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 30%, transparent);
}

.resizable-handle:hover {
	background-color: color-mix(in oklch, var(--primary) 50%, transparent);
}

.resizable-handle.resizable-handle-active {
	background-color: var(--primary);
	transition-duration: 50ms;
}

.resizable-handle.resizable-handle-at-limit {
	background-color: color-mix(in oklch, var(--primary) 35%, var(--border));
	transition-duration: 100ms;
}

.resizable-handle-vertical {
	width: 100%;
	height: 1px;
	cursor: row-resize;
}
.resizable-handle-vertical::after {
	content: "";
	position: absolute;
	inset: 0;
	top: 50%;
	left: 0;
	width: 100%;
	height: 16px;
	transform: translateY(-50%);
}

body.resizable-dragging-col {
	cursor: col-resize !important;
	user-select: none;
}
body.resizable-dragging-row {
	cursor: row-resize !important;
	user-select: none;
}

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

.dark .resizable-handle:hover {
	background-color: color-mix(in oklch, var(--primary) 60%, transparent);
}
.dark .resizable-handle.resizable-handle-active {
	background-color: var(--primary);
}

/* select.css */
.sel {
	position: relative;
	display: inline-flex;
}

.sel-trigger {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--input);
	background-color: transparent;

	box-shadow: var(--shadow-field);
	padding: 0.5rem 0.5rem 0.5rem 0.625rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	white-space: nowrap;
	transition-property: color, background-color, border-color, box-shadow, opacity, transform;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	user-select: none;
	cursor: pointer;
	height: 2.25rem;
}

.sel-trigger:hover:not(:disabled) {
	border-color: color-mix(in oklch, var(--ring) 40%, transparent);
}

.sel-trigger:active:not(:disabled) {
	transform: scale(0.97);
	transition-duration: 100ms;
}

.sel-trigger:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.sel-trigger[aria-expanded="true"] {
	border-color: var(--ring);
	background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

.sel-trigger:disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

.sel-trigger[aria-invalid="true"] {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.sel-trigger-sm {
	height: 2rem;
	border-radius: min(var(--radius-md), 10px);
}

.sel-trigger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--muted-foreground);
	flex-shrink: 0;
	transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
		color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sel-trigger-icon svg {
	width: 1rem;
	height: 1rem;
}

.sel-trigger:hover:not(:disabled) .sel-trigger-icon {
	color: var(--foreground);
}

.sel-trigger[aria-expanded="true"] .sel-trigger-icon {
	transform: rotate(180deg);
	color: var(--foreground);
}

.sel-value {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.375rem;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sel-value[data-placeholder]:empty::before {
	content: attr(data-placeholder);
	color: var(--muted-foreground);
}

.sel-content {
	position: absolute;
	z-index: 50;
	min-width: 100%;
	max-height: 20rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--radius-md);
	background: var(--popover);
	padding: 0.25rem;
	color: var(--popover-foreground);
	font-size: 0.875rem;
	line-height: 1.25rem;
	box-shadow: var(--shadow-popover);
	outline: none;

	--sel-base-x: 0px;
	--sel-slide: 0px;
	transform: translateX(var(--sel-base-x));
}

.sel-content[data-state="closed"] {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.sel-content[data-side="bottom"] {
	top: calc(100% + 4px);
	transform-origin: top;
	--sel-slide: -4px;
}
.sel-content[data-side="top"] {
	bottom: calc(100% + 4px);
	transform-origin: bottom;
	--sel-slide: 4px;
}

.sel-content[data-side="bottom"][data-align="start"],
.sel-content[data-side="top"][data-align="start"] {
	left: 0;
}
.sel-content[data-side="bottom"][data-align="center"],
.sel-content[data-side="top"][data-align="center"] {
	left: 50%;
	--sel-base-x: -50%;
}
.sel-content[data-side="bottom"][data-align="end"],
.sel-content[data-side="top"][data-align="end"] {
	right: 0;
}

.sel-content[data-state="open"] {
	animation: sel-in 150ms cubic-bezier(0.22, 1.1, 0.36, 1);
}

.sel-content[data-closing] {
	pointer-events: none;
	animation: sel-out 100ms cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}

@keyframes sel-in {
	from {
		opacity: 0;
		transform: translateX(var(--sel-base-x))
			scale(0.96)
			translateY(var(--sel-slide));
	}
	to {
		opacity: 1;
		transform: translateX(var(--sel-base-x))
			scale(1);
	}
}

@keyframes sel-out {
	from {
		opacity: 1;
		transform: translateX(var(--sel-base-x))
			scale(1);
	}
	to {
		opacity: 0;
		transform: translateX(var(--sel-base-x))
			scale(0.97)
			translateY(calc(var(--sel-slide) * 0.5));
	}
}

.sel-group {
	padding: 0.125rem 0;
}

.sel-label {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted-foreground);
}

.sel-separator + .sel-group > .sel-label:first-child,
.sel-separator + .sel-label {
	padding-top: 0.375rem;
}

.sel-item {
	position: relative;
	display: flex;
	cursor: default;
	align-items: center;
	gap: 0.375rem;

	border-radius: calc(var(--radius-md) - 4px);
	padding: 0.3125rem 2rem 0.3125rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: none;
	user-select: none;
}

.sel-item:hover:not([data-disabled="true"]) {
	background: var(--accent);
	color: var(--accent-foreground);
	transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1),
		color 80ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sel-item[data-highlighted] {
	background: var(--accent);
	color: var(--accent-foreground);
}

.sel-item[data-selected] {
	font-weight: 500;
}

.sel-item[data-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
}

.sel-item svg {
	pointer-events: none;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.sel-item-text {
	display: flex;
	flex: 1;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.sel-item-indicator {
	pointer-events: none;
	position: absolute;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sel-item[data-selected] .sel-item-indicator {
	opacity: 1;
	transform: scale(1);
}

.sel-item-indicator svg {
	width: 0.875rem;
	height: 0.875rem;
}

.sel-separator {
	margin: 0.25rem -0.25rem;
	height: 1px;
	background: var(--border);
}

.dark .sel-trigger {
	border-color: var(--input);
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .sel-trigger:hover:not(:disabled) {
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .sel-trigger[aria-expanded="true"] {
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
}
.dark .sel-trigger[aria-invalid="true"] {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.sel-trigger,
	.sel-trigger-icon,
	.sel-item,
	.sel-item-indicator {
		transition: none;
	}
	.sel-trigger:active:not(:disabled) {
		transform: none;
	}
	.sel-content[data-state="open"],
	.sel-content[data-closing] {
		animation: none;
	}
}

/* separator.css */
.separator {
	flex-shrink: 0;
	background-color: var(--border);
	transition: background-color 150ms ease;
}

.separator-horizontal {
	height: 1px;
	width: 100%;
}

.separator-vertical {
	width: 1px;
	align-self: stretch;
}

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

/* sidebar.css */
.shell {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	position: relative;
}

.shell-expand-btn {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 50;
	display: none;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-control);
}
.shell-expand-btn:hover { background: var(--muted); }
.shell[data-sidebar-collapsed] .shell-expand-btn { display: inline-flex; }

.mtb { display: none; }

.shell-body {
	flex: 1;
	min-height: 0;
	display: flex;
}

.sidebar-panel {
	width: 16rem;
	flex-shrink: 0;
	background: var(--card);
	border-right: 1px solid var(--border);
	overflow: visible;
	position: relative;
	z-index: 45;

	transition: width 240ms cubic-bezier(0, 0, 0.2, 1);
}
.content-panel {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	position: relative;
}

.sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: visible;
	gap: 1.5rem;

	width: 16rem;

	transition: opacity 160ms ease-out;
}

.sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem 0;
	flex-shrink: 0;
}
.sidebar-head-actions { display: flex; align-items: center; gap: 0.25rem; }
.sidebar-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sidebar-close-btn { display: none; }

.brand-mark { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-mark-icon { display: inline-flex; color: var(--primary); }
.brand-mark-icon svg { width: 1.35rem; height: 1.35rem; }
.brand-mark-word { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; color: var(--foreground); }

.sidebar-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sidebar-primary {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sb-section { display: flex; flex-direction: column; }
.sb-section-head {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	width: 100%;
	height: 24px;
	padding: 0 0.4rem;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--muted-foreground);
	cursor: pointer;
	transition: color 150ms ease;
}
.sb-section-head:hover { color: var(--foreground); }
.sb-section-title {
	flex: 1;
	min-width: 0;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sb-section-caret { display: inline-flex; flex-shrink: 0; }
.sb-section-caret svg { width: 0.7rem; height: 0.7rem; transition: transform 200ms ease; }
.sb-section[data-collapsed] .sb-section-caret svg { transform: rotate(-90deg); }

.sb-section-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 200ms ease;
}
.sb-section[data-collapsed] .sb-section-body { grid-template-rows: 0fr; }
.sb-section-items {
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sidebar-item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	height: 28px;
	padding: 0 0.4rem;
	border: 0;
	border-radius: var(--radius-md);
	background: none;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--muted-foreground);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms ease;
}
.sidebar-item:hover { color: var(--foreground); }
.sidebar-item-active { color: var(--foreground); }
.sidebar-item-icon { display: inline-flex; flex-shrink: 0; color: currentColor; }
.sidebar-item-icon svg { width: 1rem; height: 1rem; }
.sidebar-item-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-menu {
	width: auto;
	min-width: 12rem;
	padding: 0.3rem;
	gap: 0.125rem;
}
.sidebar-menu-form { margin: 0; display: flex; }
.sidebar-menu-item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	min-height: 2.25rem;
	padding: 0.45rem 0.55rem;
	border: 0;
	border-radius: var(--radius-md);
	background: none;
	color: var(--popover-foreground);
	font-family: inherit;
	font-size: 0.875rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.sidebar-menu-item:hover,
.sidebar-menu-item:focus-visible {
	background: var(--accent);
	outline: none;
}
.sidebar-menu-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.sidebar-dark-light { display: inline-flex; align-items: center; }
.sidebar-dark-dark { display: none; align-items: center; }
.dark .sidebar-dark-light { display: none; }
.dark .sidebar-dark-dark { display: inline-flex; }

.sidebar-threads { display: flex; flex-direction: column; gap: 1px; }
.sidebar-thread-ctx { display: block; position: relative; }

.sidebar-thread-ctx .ctxm-trigger { display: contents; }
.sidebar-thread {
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 0.4rem;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	color: var(--muted-foreground);
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms ease;
}
.sidebar-thread:hover { color: var(--foreground); }
.sidebar-thread-active { color: var(--foreground); }
.sidebar-thread-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-thread-menu-btn {
	position: absolute;
	top: 50%;
	right: 0.2rem;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);

	background: var(--card);
	box-shadow: -0.6rem 0 0.5rem -0.1rem var(--card);
	color: var(--muted-foreground);
	cursor: pointer;
}
.sidebar-thread-menu-btn:hover { color: var(--foreground); }
.sidebar-thread-menu-btn svg { width: 1rem; height: 1rem; }

.sidebar-thread-ctx:hover .sidebar-thread-menu-btn,
.sidebar-thread-menu-btn:focus-visible { display: inline-flex; }
@media (hover: none) { .sidebar-thread-menu-btn { display: inline-flex; } }

.sidebar-account {
	flex-shrink: 0;
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var(--border);
}
.sidebar-account-pop { display: flex; width: 100%; }
.sidebar-account-trigger {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	height: 2.75rem;
	padding: 0 0.5rem;
	border: 0;
	border-radius: var(--radius-md);
	background: none;
	color: var(--foreground);
	text-align: left;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.sidebar-account-trigger:hover { background: var(--muted); }
.sidebar-account-trigger .avatar { flex-shrink: 0; }
.sidebar-account-fb {
	background: var(--primary);
	color: var(--primary-foreground);
	font-weight: 600;
}
.sidebar-account-name {
	flex: 1;
	min-width: 0;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-account-caret { display: inline-flex; color: var(--muted-foreground); flex-shrink: 0; }
.sidebar-account-caret svg { width: 0.9rem; height: 0.9rem; }
.sidebar-account-menu { min-width: 13rem; }

.shell-scrim { display: none; }

.shell[data-sidebar-collapsed] .sidebar-panel {
	width: 0;
	overflow: hidden;
	border-right-color: transparent;

	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.shell[data-sidebar-collapsed] .sidebar { opacity: 0; }
.shell[data-sidebar-collapsed] .shell-expand-btn {
	animation: shell-expand-in 200ms cubic-bezier(0, 0, 0.2, 1);
}
@keyframes shell-expand-in {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: scale(1); }
}

.shell-content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	position: relative;

	overflow-x: clip;
}

@media (max-width: 48rem) {
	.shell-expand-btn { display: none !important; }
	.content-panel { width: 100%; }
	.sidebar-panel {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 60;
		width: 16.5rem;
		transform: translateX(-100%);
		transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: var(--shadow-modal);
	}
	.sidebar { width: 100%; padding-top: env(safe-area-inset-top); }

	.shell[data-sidebar-collapsed] .sidebar-panel {
		display: block;
		width: 16.5rem;
		overflow: visible;
		border-right-color: var(--border);
	}
	.shell[data-sidebar-collapsed] .sidebar { opacity: 1; }
	.shell[data-open] .sidebar-panel { transform: translateX(0); }
	.sidebar-collapse-btn { display: none; }
	.sidebar-close-btn { display: inline-flex; }
	.shell[data-open] .shell-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(0, 0, 0, 0.4);
	}

	.mtb {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		flex-shrink: 0;
		height: calc(3.25rem + env(safe-area-inset-top));
		padding: env(safe-area-inset-top) 0.85rem 0;
		background: var(--background);
		border-bottom: 1px solid var(--border);
	}
	.mtb-brand { display: inline-flex; align-items: center; text-decoration: none; }
	.mtb-actions { display: flex; align-items: center; gap: 0.35rem; }
	.mtb-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 0;
		border-radius: var(--radius-md);
		background: none;
		color: var(--foreground);
		cursor: pointer;
		text-decoration: none;
		transition: background-color 120ms ease;
	}
	.mtb-btn:active { background: var(--muted); }
	.mtb-btn svg { width: 1.2rem; height: 1.2rem; }
	.mtb-account { display: inline-flex; }
	.mtb-avatar-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sidebar-panel,
	.sidebar,
	.mtb,
	.sb-section-body,
	.sb-section-caret svg { transition: none; }
	.shell[data-sidebar-collapsed] .shell-expand-btn { animation: none; }
}

/* skeleton.css */
@keyframes skeleton-shimmer {
	100% {
		transform: translateX(100%);
	}
}

.skeleton {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--muted);
}

.skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklch, var(--background) 40%, transparent) 40%,
		color-mix(in oklch, var(--background) 60%, transparent) 60%,
		transparent 100%
	);
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-circle {
	border-radius: 9999px;
}

@media (prefers-reduced-motion: reduce) {
	.skeleton::after {
		animation: none;
		display: none;
	}
	.skeleton {
		opacity: 0.7;
	}
}

.dark .skeleton::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in oklch, var(--foreground) 5%, transparent) 40%,
		color-mix(in oklch, var(--foreground) 8%, transparent) 60%,
		transparent 100%
	);
}

/* slider.css */
.slider {
	position: relative;
	display: flex;
	width: 100%;
	touch-action: none;
	user-select: none;
	align-items: center;
	height: 1.25rem;
}

.slider-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.slider-input {
	position: absolute;
	inset: -0.5rem 0;
	width: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	z-index: 2;
}

.slider-input:disabled {
	cursor: not-allowed;
}

.slider-track {
	position: relative;
	width: 100%;
	height: 0.25rem;
	overflow: hidden;
	border-radius: 9999px;
	background-color: var(--muted);

	box-shadow: var(--shadow-well);
}

.slider-range {
	position: absolute;
	height: 100%;
	border-radius: 9999px;
	background-color: var(--primary);
}

.slider-thumb {
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 9999px;
	border: 1px solid var(--ring);
	background-color: var(--background);

	box-shadow: var(--shadow-thumb);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
	transition:
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slider:not(.slider-disabled):hover .slider-thumb {
	box-shadow: var(--shadow-thumb), 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
}

.slider-input:focus-visible ~ .slider-thumb {
	box-shadow: var(--shadow-thumb), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.slider-input:active:not(:disabled) ~ .slider-thumb {
	box-shadow: var(--shadow-thumb), 0 0 0 5px color-mix(in oklch, var(--ring) 30%, transparent);
	transform: translateX(-50%) scale(1.05);
	transition-duration: 100ms;
}

.slider-dragging .slider-range,
.slider-dragging .slider-thumb {
	transition: none;
}

.dark .slider-track {
	background-color: color-mix(in oklch, var(--muted) 80%, transparent);
}

.dark .slider-thumb {
	background-color: white;
	border-color: var(--ring);
}

@media (prefers-reduced-motion: reduce) {
	.slider-range {
		transition: none;
	}
	.slider-thumb {
		transition: none;
	}
	.slider-input:active:not(:disabled) ~ .slider-thumb {
		transform: translateX(-50%);
	}
}

/* sound-settings.css */
.sound-settings {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	max-width: 20rem;
}

.sound-settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.sound-settings-volume .slider {
	flex: 1;
}

.sound-settings[data-muted] .sound-settings-volume {
	opacity: 0.5;
}

.sound-settings-value {
	min-width: 2.5rem;
	text-align: right;
	font-size: 0.75rem;
	line-height: 1rem;

	font-variant-numeric: tabular-nums;
	color: var(--muted-foreground);
}

/* switch.css */
.switch-wrapper {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.switch-size-default {
	width: 32px;
	height: 18.4px;
}

.switch-size-sm {
	width: 24px;
	height: 14px;
}

.switch-size-sm .switch-input {
	inset: -0.5625rem -0.75rem;
}

.switch-input {
	position: absolute;
	inset: -0.5rem -0.75rem;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	z-index: 1;
}

.switch-input:disabled {
	cursor: not-allowed;
}

.switch-track {
	display: inline-flex;
	width: 100%;
	height: 100%;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid transparent;
	background-color: var(--input);

	box-shadow: var(--shadow-well);
	transition:
		background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.switch-input:not(:disabled):not(:checked):hover + .switch-track {
	background-color: color-mix(in oklch, var(--input) 80%, var(--foreground));
}

.switch-input:not(:disabled):checked:hover + .switch-track {
	background-color: color-mix(in oklch, var(--primary) 80%, transparent);
}

.switch-input:active:not(:disabled) + .switch-track {
	transform: scale(0.97);
	transition-duration: 100ms;
}

.switch-input:checked + .switch-track {
	background-color: var(--primary);
}

.switch-input:focus-visible + .switch-track {
	border-color: var(--ring);
	box-shadow: var(--shadow-well), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.switch-input:disabled + .switch-track {
	cursor: not-allowed;
	opacity: 0.5;
}

.switch-input[aria-invalid="true"] + .switch-track {
	border-color: var(--destructive);
	box-shadow: var(--shadow-well), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.switch-thumb {
	pointer-events: none;
	display: block;
	border-radius: 9999px;
	background-color: var(--background);

	box-shadow: var(--shadow-thumb);
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.switch-size-default .switch-thumb {
	width: 1rem;
	height: 1rem;
}

.switch-size-sm .switch-thumb {
	width: 0.75rem;
	height: 0.75rem;
}

.switch-input:not(:checked) + .switch-track .switch-thumb {
	transform: translateX(0);
}

.switch-input:checked + .switch-track .switch-thumb {
	transform: translateX(calc(100% - 2px));
}

.dark .switch-track {
	background-color: color-mix(in oklch, var(--input) 80%, transparent);
}

.dark .switch-input:not(:disabled):not(:checked):hover + .switch-track {
	background-color: var(--input);
}

.dark .switch-input:checked + .switch-track {
	background-color: var(--primary);
}

.dark .switch-input:checked + .switch-track .switch-thumb {
	background-color: var(--primary-foreground);
}

.dark .switch-input:not(:checked) + .switch-track .switch-thumb {
	background-color: var(--foreground);
}

.dark .switch-input[aria-invalid="true"] + .switch-track {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-well), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.switch-track {
		transition-duration: 75ms;
	}
	.switch-thumb {
		transition: none;
	}
	.switch-input:active:not(:disabled) + .switch-track {
		transform: none;
	}
}

/* table.css */
.tbl-container {
	position: relative;
	width: 100%;
}
.tbl-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	max-height: inherit;
}

.tbl-container::before,
.tbl-container::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 2rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tbl-container::before {
	left: 0;
	background: linear-gradient(to right, var(--background), transparent);
}
.tbl-container::after {
	right: 0;
	background: linear-gradient(to left, var(--background), transparent);
}
.tbl-container.has-overflow-left::before,
.tbl-container.has-overflow-right::after {
	opacity: 1;
}

.tbl {
	width: 100%;
	caption-side: bottom;
	font-size: 0.875rem;
	line-height: 1.25rem;
	border-collapse: collapse;

	font-variant-numeric: tabular-nums;
}

.tbl-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--background);
	transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tbl-header tr {
	border-bottom: 2px solid var(--border);
}

.tbl-container.has-overflow-top .tbl-header {
	box-shadow: var(--shadow-field);
}

.tbl-body tr:nth-child(even) {
	background-color: color-mix(in oklch, var(--muted) 25%, transparent);
}
.tbl-body tr:last-child {
	border-bottom: 0;
}

.tbl-footer {
	border-top: 2px solid var(--border);
	background-color: color-mix(in oklch, var(--muted) 50%, transparent);
	font-weight: 500;
}
.tbl-footer > tr:last-child {
	border-bottom: 0;
}

.tbl-row {
	border-bottom: 1px solid var(--border);
	transition-property: background-color, color, box-shadow;
	transition-duration: 120ms;
	transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}
.tbl-body .tbl-row:hover {
	background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}
.tbl-row:focus-visible {
	outline: none;
	box-shadow: inset 3px 0 0 var(--ring);
	background-color: color-mix(in oklch, var(--muted) 40%, transparent);
}
.tbl-row[data-state="selected"] {
	background-color: var(--muted);
	box-shadow: inset 3px 0 0 var(--primary);
}

.tbl-head {
	height: 2.75rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	text-align: left;
	vertical-align: middle;
	font-weight: 600;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.025em;
	white-space: nowrap;
	color: var(--muted-foreground);
}
.tbl-head:has([role="checkbox"]) {
	padding-right: 0;
}

.tbl-cell {
	padding: 0.625rem;
	vertical-align: middle;
	white-space: nowrap;
}
.tbl-cell:has([role="checkbox"]) {
	padding-right: 0;
}

.tbl-caption {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--muted-foreground);
}

.dark .tbl-body tr:nth-child(even) {
	background-color: color-mix(in oklch, var(--muted) 15%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.tbl-row,
	.tbl-header,
	.tbl-container::before,
	.tbl-container::after {
		transition-duration: 75ms;
	}
}

/* tabs.css */
.tabs {
	display: flex;
	gap: 0.5rem;
}
.tabs[data-orientation="horizontal"] {
	flex-direction: column;
}

.tabs-list {
	position: relative;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	padding: 3px;
	color: var(--muted-foreground);
}
.tabs[data-orientation="horizontal"] > .tabs-list {
	height: 2.5rem;
}
.tabs[data-orientation="vertical"] > .tabs-list {
	height: fit-content;
	flex-direction: column;
}

.tabs-list-default {
	background-color: var(--muted);
}

.tabs-list-line {
	gap: 0.25rem;
	background-color: transparent;
	border-radius: 0;
}

.tabs-indicator {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	z-index: 0;
}

.tabs-list[data-animated] .tabs-indicator {
	opacity: 1;

	transition:
		transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
		width 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
		height 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tabs-list-default .tabs-indicator {
	border-radius: var(--radius-md);
	background-color: var(--background);
	box-shadow: var(--shadow-raised);
}

.tabs[data-orientation="horizontal"] .tabs-list-line .tabs-indicator {
	top: auto;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 1px;
	background-color: var(--foreground);
}

.tabs[data-orientation="vertical"] .tabs-list-line .tabs-indicator {
	top: 0;
	left: auto;
	right: 0;
	width: 2px;
	border-radius: 1px;
	background-color: var(--foreground);
}

.tabs-trigger {
	position: relative;
	z-index: 1;
	display: inline-flex;
	height: calc(100% - 1px);
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	color: color-mix(in oklch, var(--foreground) 60%, transparent);
	background: none;
	cursor: pointer;
	outline: none;

	transition-property: color, background-color, transform;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs[data-orientation="vertical"] .tabs-trigger {
	width: 100%;
	justify-content: flex-start;
}

.tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]) {
	color: var(--foreground);
}
.tabs-list-line .tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]):not([data-active]) {
	background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

.tabs-trigger:active:not(:disabled):not([aria-disabled="true"]) {
	transform: scale(0.97);
	transition-duration: 100ms;
}

.tabs-trigger:focus-visible {
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
	outline: 1px solid var(--ring);
}
.tabs-trigger:disabled,
.tabs-trigger[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.5;
}
.tabs-trigger svg {
	pointer-events: none;
	flex-shrink: 0;
}
.tabs-trigger svg:not([class*='size-']) {
	width: 1rem;
	height: 1rem;
}

.tabs-list-default .tabs-trigger[data-active] {
	background-color: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-raised);
}
.tabs-list-default[data-animated] .tabs-trigger[data-active] {
	background-color: transparent;
	box-shadow: none;
}

.tabs-list-line .tabs-trigger {
	background-color: transparent;
}
.tabs-list-line .tabs-trigger[data-active] {
	background-color: transparent;
	color: var(--foreground);
	box-shadow: none;
}

.tabs-trigger::after {
	content: "";
	position: absolute;
	background-color: var(--foreground);
	opacity: 0;
	transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs[data-orientation="horizontal"] .tabs-trigger::after {
	left: 0;
	right: 0;
	bottom: -5px;
	height: 2px;
}
.tabs[data-orientation="vertical"] .tabs-trigger::after {
	top: 0;
	bottom: 0;
	right: -4px;
	width: 2px;
}
.tabs-list-line .tabs-trigger[data-active]::after {
	opacity: 1;
}

[data-animated] .tabs-trigger::after {
	display: none;
}

.tabs-content {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: none;
}
.tabs-content:not([data-active]) {
	display: none;
}
.tabs-content[data-active] {
	animation: tabs-content-in 150ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes tabs-content-in {
	from {
		opacity: 0;
		transform: translateY(2px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dark .tabs-trigger {
	color: var(--muted-foreground);
}
.dark .tabs-trigger:hover:not(:disabled):not([aria-disabled="true"]) {
	color: var(--foreground);
}

.dark .tabs-list-default .tabs-trigger[data-active] {
	border-color: var(--border);
	background-color: var(--background);
	color: var(--foreground);
	box-shadow: none;
}
.dark .tabs-list-default[data-animated] .tabs-trigger[data-active] {
	border-color: transparent;
	background-color: transparent;
}
.dark .tabs-list-default .tabs-indicator {
	border: 1px solid var(--border);
	background-color: var(--background);
	box-shadow: none;
}
.dark .tabs-list-line .tabs-trigger[data-active] {
	border-color: transparent;
	background-color: transparent;
	color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
	.tabs-trigger {
		transition-duration: 0ms;
	}
	.tabs-trigger:active:not(:disabled) {
		transform: none;
	}
	.tabs-trigger::after {
		transition-duration: 0ms;
	}
	.tabs-list[data-animated] .tabs-indicator {
		transition: none;
	}
	.tabs-content[data-active] {
		animation: none;
	}
}

/* textarea.css */
.textarea {
	display: flex;
	field-sizing: content;
	min-height: 4rem;
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid var(--input);
	background-color: transparent;
	padding: 0.5rem 0.625rem;
	font-size: 1rem;
	line-height: 1.5rem;

	box-shadow: var(--shadow-field);
	transition-property: color, background-color, border-color, box-shadow, opacity;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	outline: none;
	resize: vertical;
}

.textarea::placeholder {
	color: var(--muted-foreground);
}

.textarea:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.textarea:disabled {
	pointer-events: none;
	cursor: not-allowed;
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
	opacity: 0.5;
}

.textarea[aria-invalid="true"] {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

@media (min-width: 768px) {
	.textarea {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
}

.dark .textarea {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .textarea:disabled {
	background-color: color-mix(in oklch, var(--input) 80%, transparent);
}
.dark .textarea[aria-invalid="true"] {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.textarea {
		transition-duration: 75ms;
	}
}

/* time-picker.css */
.tp {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	user-select: none;
}

.tp-field {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	width: 2rem;
}

.tp-label {
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
	line-height: 1;
	white-space: nowrap;
}

.tp-input {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--input);
	background-color: transparent;

	box-shadow: var(--shadow-field);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--foreground);
	outline: none;
	padding: 0;
	transition-property: border-color, box-shadow, background-color;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-input::placeholder {
	color: var(--muted-foreground);
	font-weight: 400;
}

.tp-input:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.tp-input:disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.5;
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
}

.tp-input[aria-invalid="true"] {
	border-color: var(--destructive);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

.tp-separator {
	font-size: 1rem;
	font-weight: 500;
	color: var(--foreground);
	line-height: 1;
	padding-top: 0.75rem;
}

.tp-period {
	width: 2rem;
	height: 2rem;
	margin-top: 0.75rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--input);
	background-color: transparent;

	box-shadow: var(--shadow-field);
	font-size: 0.75rem;
	font-weight: 600;
	font-family: inherit;
	text-transform: uppercase;

	letter-spacing: 0.05em;
	color: var(--foreground);
	cursor: pointer;
	outline: none;
	padding: 0;
	transition-property: border-color, box-shadow, background-color, color;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.tp-period:hover {
	background-color: var(--muted);
}

.tp-period:focus-visible {
	border-color: var(--ring);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.tp-period:disabled {
	pointer-events: none;
	opacity: 0.5;
}

.dark .tp-input {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .tp-input:disabled {
	background-color: color-mix(in oklch, var(--input) 80%, transparent);
}
.dark .tp-input[aria-invalid="true"] {
	border-color: color-mix(in oklch, var(--destructive) 50%, transparent);
	box-shadow: var(--shadow-field), 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
}
.dark .tp-period {
	background-color: color-mix(in oklch, var(--input) 30%, transparent);
}
.dark .tp-period:hover {
	background-color: color-mix(in oklch, var(--input) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.tp-input,
	.tp-period {
		transition-duration: 75ms;
	}
}

/* toast.css */
.toaster {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 100;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5rem;
	max-width: 24rem;
	width: 100%;
	pointer-events: none;
}

@media (max-width: 480px) {
	.toaster {
		left: 1rem;
		right: 1rem;
		max-width: none;
	}
}

.toast {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background-color: var(--popover);
	color: var(--popover-foreground);
	padding: 0.75rem 2.25rem 0.75rem 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;

	box-shadow: var(--shadow-popover);
	animation: toast-enter 250ms cubic-bezier(0.22, 1.1, 0.36, 1);
	touch-action: pan-x;
	user-select: none;
	will-change: transform, opacity;
	transition: transform 150ms cubic-bezier(0.33, 1, 0.68, 1);
}

.toast[data-swiping] {
	transition: none;
}

.toast[data-dismissing] {
	animation: toast-exit 200ms cubic-bezier(0.33, 0, 0.67, 0) forwards;
}

.toast[data-swipe-dismiss] {
	animation: toast-swipe-exit 150ms cubic-bezier(0.33, 0, 0.67, 0) forwards;
}

.toast:has(.toast-title) {
	align-items: flex-start;
}

.toast > svg:first-child {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.toast:has(.toast-title) > svg:first-child {
	translate: 0 0.125rem;
}

.toast-content {
	flex: 1;
	min-width: 0;
}

.toast-title {
	font-weight: 500;
}

.toast-title + .toast-description {
	margin-top: 0.125rem;
}

.toast-description {
	color: var(--muted-foreground);
}

.toast-close {
	position: absolute;
	right: 0.25rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	border: none;
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 150ms, background-color 150ms;
}

.toast-close svg {
	width: 0.75rem;
	height: 0.75rem;
}

.toast:hover .toast-close {
	opacity: 1;
}

.toast-close:hover {
	background-color: var(--muted);
	opacity: 1;
}

.toast-success > svg:first-child {
	color: var(--success);
}

.toast-info > svg:first-child {
	color: var(--info);
}

.toast-warning {
	background-color: color-mix(in oklch, var(--warning) 5%, var(--popover));
}
.toast-warning > svg:first-child {
	color: var(--warning);
}

.toast-error {
	background-color: color-mix(in oklch, var(--destructive) 5%, var(--popover));
	border-color: color-mix(in oklch, var(--destructive) 25%, var(--border));
}
.toast-error > svg:first-child {
	color: var(--destructive);
}

@keyframes toast-enter {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes toast-exit {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(8px) scale(0.96);
	}
}

@keyframes toast-swipe-exit {
	from {
		opacity: var(--toast-swipe-o, 1);
		transform: translateX(var(--toast-swipe-x, 0px));
	}
	to {
		opacity: 0;
		transform: translateX(110%);
	}
}

.dark .toast-warning {
	background-color: color-mix(in oklch, var(--warning) 8%, var(--popover));
}

.dark .toast-error {
	background-color: color-mix(in oklch, var(--destructive) 10%, var(--popover));
}

@media (prefers-reduced-motion: reduce) {
	.toast {
		animation: none;
		transition: none;
	}
	.toast[data-dismissing],
	.toast[data-swipe-dismiss] {
		animation: none;
		opacity: 0;
	}
}

/* tooltip.css */
.tooltip {
	position: relative;
	display: inline-flex;
	--tooltip-delay: 400ms;
}

.tooltip-trigger {
	display: inline-flex;
	align-items: center;
}

.tooltip-content {
	position: absolute;
	z-index: 50;
	display: inline-flex;
	width: max-content;
	max-width: 20rem;
	align-items: center;
	gap: 0.375rem;
	border-radius: var(--radius-md);
	background-color: var(--foreground);
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	color: var(--background);

	box-shadow: var(--shadow-popover);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;

	transition:
		opacity 100ms cubic-bezier(0.4, 0, 1, 1),
		transform 100ms cubic-bezier(0.4, 0, 1, 1),
		visibility 0s linear 100ms;
}

.tooltip:hover > .tooltip-content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity 150ms cubic-bezier(0, 0, 0.2, 1) var(--tooltip-delay),
		transform 150ms cubic-bezier(0, 0, 0.2, 1) var(--tooltip-delay),
		visibility 0s linear var(--tooltip-delay);
}

.tooltip:focus-within > .tooltip-content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity 150ms cubic-bezier(0, 0, 0.2, 1),
		transform 150ms cubic-bezier(0, 0, 0.2, 1),
		visibility 0s linear 0s;
}

.tooltip[data-tooltip-dismissed] > .tooltip-content {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: none !important;
}

.tooltip-content[data-side="top"] {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0.25rem) scale(0.95);
	margin-bottom: 0.25rem;
}
.tooltip:hover > .tooltip-content[data-side="top"],
.tooltip:focus-within > .tooltip-content[data-side="top"] {
	transform: translateX(-50%) translateY(0) scale(1);
}

.tooltip-content[data-side="bottom"] {
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-0.25rem) scale(0.95);
	margin-top: 0.25rem;
}
.tooltip:hover > .tooltip-content[data-side="bottom"],
.tooltip:focus-within > .tooltip-content[data-side="bottom"] {
	transform: translateX(-50%) translateY(0) scale(1);
}

.tooltip-content[data-side="left"] {
	right: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(0.25rem) scale(0.95);
	margin-right: 0.25rem;
}
.tooltip:hover > .tooltip-content[data-side="left"],
.tooltip:focus-within > .tooltip-content[data-side="left"] {
	transform: translateY(-50%) translateX(0) scale(1);
}

.tooltip-content[data-side="right"] {
	left: 100%;
	top: 50%;
	transform: translateY(-50%) translateX(-0.25rem) scale(0.95);
	margin-left: 0.25rem;
}
.tooltip:hover > .tooltip-content[data-side="right"],
.tooltip:focus-within > .tooltip-content[data-side="right"] {
	transform: translateY(-50%) translateX(0) scale(1);
}

.tooltip-content::after {
	content: '';
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--foreground);
	border-radius: 1px;
	transform: rotate(45deg);
}

.tooltip-content[data-side="top"]::after {
	bottom: -0.25rem;
	left: 50%;
	margin-left: -0.25rem;
}

.tooltip-content[data-side="bottom"]::after {
	top: -0.25rem;
	left: 50%;
	margin-left: -0.25rem;
}

.tooltip-content[data-side="left"]::after {
	right: -0.25rem;
	top: 50%;
	margin-top: -0.25rem;
}

.tooltip-content[data-side="right"]::after {
	left: -0.25rem;
	top: 50%;
	margin-top: -0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.tooltip-content {
		transition-duration: 0ms;
	}
	.tooltip:hover > .tooltip-content {
		transition:
			opacity 0ms linear var(--tooltip-delay),
			transform 0ms linear var(--tooltip-delay),
			visibility 0s linear var(--tooltip-delay);
	}
	.tooltip:focus-within > .tooltip-content {
		transition-duration: 0ms;
	}
}

/* typography.css */
.typo-h1 {
	scroll-margin-top: 5rem;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--foreground);
}

.typo-h2 {
	scroll-margin-top: 5rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.5rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--foreground);
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.typo-h3 {
	scroll-margin-top: 5rem;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--foreground);
}

.typo-h4 {
	scroll-margin-top: 5rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--foreground);
}

.typo-p {
	line-height: 1.75;
	color: var(--foreground);

	text-wrap: pretty;
}
.typo-p + .typo-p {
	margin-top: 1.5rem;
}

.typo-blockquote {
	margin-top: 1.5rem;
	border-left: 2px solid var(--border);
	padding-left: 1.5rem;
	font-style: italic;
	color: var(--foreground);
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.typo-table-wrapper {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	width: 100%;
	overflow-y: auto;
}
.typo-table-wrapper table {
	width: 100%;
}
.typo-table-wrapper thead tr {
	margin: 0;
	border-bottom: 1px solid var(--border);
	padding: 0;
}
.typo-table-wrapper th {
	border-bottom: 1px solid var(--border);
	padding: 0.5rem 1rem;
	text-align: left;
	font-weight: 700;
	color: var(--foreground);
}
.typo-table-wrapper td {
	padding: 0.5rem 1rem;
	text-align: left;
	color: var(--foreground);

	font-variant-numeric: tabular-nums;
}
.typo-table-wrapper tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.typo-table-wrapper tbody tr:last-child {
	border-bottom: 0;
}
.typo-table-wrapper tbody tr:hover {
	background-color: var(--muted);
}

.typo-list {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	margin-left: 1.5rem;
	list-style-type: disc;
}
.typo-list > li {
	margin-top: 0.5rem;
	color: var(--foreground);
}

.typo-code {
	position: relative;
	border-radius: var(--radius-md);
	background-color: var(--muted);
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--foreground);
}

.typo-lead {
	font-size: 1.25rem;
	line-height: 1.75rem;
	color: var(--muted-foreground);
}

.typo-large {
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--foreground);
}

.typo-small {
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 500;
	color: var(--foreground);
}

.typo-muted {
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--muted-foreground);
}

.dark .typo-table-wrapper tbody tr:hover {
	background-color: color-mix(in oklch, var(--muted) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.typo-h2,
	.typo-blockquote,
	.typo-table-wrapper tbody tr {
		transition-duration: 75ms;
	}
}

/* admin.css */
.ad-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ad-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ad-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 46rem;
}

.ad-head-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-control);
  color: var(--foreground);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.ad-head-link:active {
  box-shadow: var(--shadow-well);
  transform: translateY(1px);
}

.ad-head-link .icon {
  width: 1rem;
  height: 1rem;
}

.ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.ad-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--card-foreground);
  text-decoration: none;
}

.ad-card-link:active {
  box-shadow: var(--shadow-well);
  transform: translateY(1px);
}

.ad-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted-foreground);
}

.ad-card-head .icon {
  width: 1rem;
  height: 1rem;
}

.ad-card-label {
  font-size: 0.8125rem;
  font-weight: 500;
}

.ad-card-go {
  margin-left: auto;
  display: inline-flex;
  opacity: 0.5;
}

.ad-card-link:hover .ad-card-go {
  opacity: 1;
}

.ad-card-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ad-card-hint {
  font-size: 0.8125rem;
}

.ad-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 28rem;
}

.ad-search .input-group {
  flex: 1;
}

.ad-search-clear {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
}

.ad-search-clear:hover {
  color: var(--foreground);
}

.ad-table-wrap {
  overflow-x: auto;
}

.ad-table {
  font-size: 0.875rem;
}

.ad-email {
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.ad-flags {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.ad-flag {
  font-size: 0.6875rem;
  white-space: nowrap;
}

.ad-flag .icon {
  width: 0.75rem;
  height: 0.75rem;
}

.ad-col-when {
  color: var(--muted-foreground);
  white-space: nowrap;
}

.ad-never {
  font-style: italic;
}

.ad-pager {
  margin-top: 0.5rem;
}

.ad-pager-at {
  padding: 0 0.75rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ad-empty {
  margin-top: 1rem;
}

/* analytics.css */
.an-page {
  max-width: 74rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.an-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.an-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 44rem;
}

.an-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.an-ranges {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.125rem;
  background: var(--muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-well);
}

.an-range {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.an-range:hover {
  color: var(--foreground);
}

.an-range-on {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-control);
}

.an-range-on:active {
  box-shadow: var(--shadow-field);
}

.an-owner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  box-shadow: var(--shadow-control);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}

.an-owner:hover {
  color: var(--foreground);
}

.an-owner:active {
  box-shadow: var(--shadow-field);
}

.an-owner-on {
  color: var(--foreground);
  border-color: var(--primary);
}

.an-owner svg {
  width: 1rem;
  height: 1rem;
}

.an-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.an-tile-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted-foreground);
}

.an-tile-head svg {
  width: 1rem;
  height: 1rem;
}

.an-tile-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.an-tile-value {
  margin: 0.5rem 0 0.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.an-tile-hint {
  font-size: 0.75rem;
}

.an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}

.an-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.an-card-title svg {
  width: 1.125rem;
  height: 1.125rem;
}

.an-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  overflow: hidden;
}

.an-row-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--muted);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.an-row-name {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-row-link {
  color: inherit;
  text-decoration: none;
}

.an-row-link:hover {
  text-decoration: underline;
}

.an-row-count {
  position: relative;
  min-width: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.an-row-visitors {
  color: var(--muted-foreground);
  min-width: 2.5rem;
}

.an-list-empty {
  font-size: 0.875rem;
}

.an-notes {
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.an-notes-title {
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  padding: 0;
  margin: 1rem 0 0.75rem;
}

.an-notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2.5rem;
  margin: 0;
}

.an-notes-list dt {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.an-notes-list dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.an-dropped,
.an-empty {
  margin: 0;
}

@media (max-width: 40rem) {
  .an-head {
    align-items: stretch;
  }

  .an-ranges {
    width: 100%;
    justify-content: space-between;
  }

  .an-tile-value {
    font-size: 1.75rem;
  }
}

/* auth.css */
.auth-shell {
    max-width: 24rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-providers form,
.auth-providers .btn {
    width: 100%;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-forgot {
    margin-top: -0.75rem;
    font-size: 0.875rem;
}

.auth-settings {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.auth-settings-card [data-slot="card-content"] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.auth-settings-card form {
    width: 100%;
}

.auth-verify-banner [data-slot="alert-description"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.auth-qr {
    display: block;
    width: 220px;
    height: 220px;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-card);
}

.auth-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 32rem) {
    .auth-recovery-codes {
        grid-template-columns: 1fr;
    }
}

/* chat.css */
.chat {
	--chat-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	text-wrap: pretty;
}
.chat-notice {
	margin: auto;
	max-width: 32rem;
	padding: 2rem;
	text-align: center;
	color: var(--muted-foreground);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}
.chat-notice svg { width: 2rem; height: 2rem; }
.chat-notice code { font-family: var(--font-mono); background: var(--muted); padding: 0.1em 0.35em; border-radius: 0.3em; }
.chat-transcript {
	flex: 1;
	padding: 1.5rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.chat-transcript > * { width: 100%; max-width: 48rem; margin: 0 auto; }
.chat-empty { margin: auto; text-align: center; padding: 2rem 1rem; color: var(--muted-foreground); }
.chat-empty-icon { display: inline-flex; color: var(--primary); margin-bottom: 0.75rem; }
.chat-empty-icon svg { width: 2.5rem; height: 2.5rem; }

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

.msg { display: flex; gap: 0.75rem; }
.msg-user { justify-content: flex-end; }
.msg-user .msg-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; max-width: 80%; }
.msg-user .msg-bubble {
	background: var(--muted);
	color: var(--foreground);
	padding: 0.75rem 1rem;
	border-radius: 1.1rem 1.1rem 0.25rem 1.1rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 0.95rem;
}
.msg-queue { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--muted-foreground); font-family: var(--font-mono); }
.msg-queue svg { width: 0.75rem; height: 0.75rem; }
.msg-queued .msg-bubble { opacity: 0.55; }
.msg-assistant { align-items: flex-start; }
.msg-body { min-width: 0; flex: 1; }
.msg-text { overflow-wrap: anywhere; font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; padding-top: 0.25rem; }
.msg-text.msg-text-plain { white-space: pre-wrap; }

.msg-worked { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.72rem; margin-bottom: -0.5rem; }
.msg-worked svg { width: 0.75rem; height: 0.75rem; }
.msg-worked::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

.msg-text > :first-child { margin-top: 0; }
.msg-text > :last-child { margin-bottom: 0; }
.msg-text p, .msg-text ul, .msg-text ol, .msg-text pre, .msg-text blockquote, .msg-text table, .msg-text hr { margin: 0.6em 0; }
.msg-text ul, .msg-text ol { padding-left: 1.3em; }
.msg-text li + li { margin-top: 0.2em; }
.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 { font-weight: 700; line-height: 1.3; margin: 0.8em 0 0.4em; text-wrap: balance; }
.msg-text h1 { font-size: 1.25em; }
.msg-text h2 { font-size: 1.15em; }
.msg-text h3, .msg-text h4 { font-size: 1.05em; }
.msg-text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.msg-text code { font-family: var(--font-mono); font-size: 0.85em; background: var(--muted); padding: 0.1em 0.35em; border-radius: 0.3em; }
.msg-text pre { background: var(--muted); padding: 0.75em 0.9em; border-radius: var(--radius); overflow-x: auto; }
.msg-text pre code { background: none; padding: 0; }
.msg-text blockquote { border-left: 3px solid var(--border); padding-left: 0.8em; color: var(--muted-foreground); }
.msg-text table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
.msg-text th, .msg-text td { border: 1px solid var(--border); padding: 0.35em 0.6em; text-align: left; }
.msg-text .run-md { display: block; }
.msg-text .run-md:empty { display: none; }
.msg-text .run-md > :first-child { margin-top: 0; }
.msg-text .run-md > :last-child { margin-bottom: 0; }

.msg-stream { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.msg-stream > .msg-text { width: 100%; }
.tool-chip { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; max-width: 100%; font-size: 0.78rem; color: var(--muted-foreground); }
.tool-chip-icon { display: inline-flex; flex-shrink: 0; }
.tool-chip-icon svg { width: 0.875rem; height: 0.875rem; }
.tool-chip-name { font-weight: 500; color: var(--foreground); }
.tool-chip-active { animation: chat-chip-pulse 1.3s ease-in-out infinite; }
@keyframes chat-chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .tool-chip-active { animation: none; } }

.chat-chip { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid var(--primary); border-radius: 999px; background: color-mix(in oklab, var(--primary) 8%, transparent); font-size: 0.8rem; font-weight: 500; color: var(--primary); text-decoration: none; transition: background-color var(--chat-transition), transform var(--chat-transition); }
.chat-chip:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
.chat-chip:active { transform: scale(0.97); transition-duration: 120ms; }
.chat-chip svg { width: 0.875rem; height: 0.875rem; }

.msg-copy { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-top: 0.25rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted-foreground); cursor: pointer; opacity: 0; transition: opacity var(--chat-transition), background-color var(--chat-transition), color var(--chat-transition), transform var(--chat-transition); }
.msg-assistant:hover .msg-copy, .msg-copy:focus-visible { opacity: 1; }
.msg-copy:hover { background: var(--muted); color: var(--foreground); }
.msg-copy:active { transform: scale(0.97); transition-duration: 120ms; }
.msg-copy svg { width: 0.875rem; height: 0.875rem; }
.msg-copy-done { display: none; color: var(--primary); }
.msg-copy.is-copied .msg-copy-idle { display: none; }
.msg-copy.is-copied .msg-copy-done { display: inline-flex; }
.msg-copy.is-copied { opacity: 1; }
@media (hover: none) { .msg-copy { opacity: 1; } }

.msg-retry { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; min-height: 2rem; margin-top: 0.5rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--foreground); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background-color var(--chat-transition), transform var(--chat-transition); }
.msg-retry:hover { background: var(--muted); }
.msg-retry:active { transform: scale(0.97); transition-duration: 120ms; }
.msg-retry svg { width: 0.875rem; height: 0.875rem; }

.composer-attachments:empty { display: none; }
.composer-attachments { width: 100%; max-width: 48rem; margin: 0 auto 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.attachment-chip { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); font-size: 0.78rem; color: var(--foreground); }
.attachment-chip svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--muted-foreground); }
.attachment-chip-meta { color: var(--muted-foreground); }
.attachment-chip-remove { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color var(--chat-transition), transform var(--chat-transition); }

.attachment-chip-remove::before { content: ""; position: absolute; inset: -0.5rem; }
.attachment-chip-remove:hover { color: var(--foreground); }
.attachment-chip-remove:active { transform: scale(0.97); transition-duration: 120ms; }

.msg-typing { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem; }
.msg-typing span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--muted-foreground); opacity: 0.4; animation: chat-dot 1.2s ease-in-out infinite; }
.msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.msg-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .msg-typing span { animation: none; } }
.msg-cook { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-foreground); }

.chat-composer { position: sticky; bottom: 0; padding: 0.75rem 1rem 1rem; background: var(--background); }

.composer-box { --composer-pad: 0.5rem; --composer-inner-radius: 0.75rem; width: 100%; max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--input); border-radius: calc(var(--composer-inner-radius) + var(--composer-pad)); padding: var(--composer-pad); background: var(--card); transition: border-color var(--chat-transition), box-shadow var(--chat-transition); }
.composer-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); }
.composer-input.textarea { flex: 1; border: 0; outline: 0; resize: none; field-sizing: fixed; background: transparent; color: var(--foreground); font-size: 1rem; line-height: 1.5; min-height: 3.75rem; max-height: 40vh; border-radius: 0; padding: 0.25rem 0.5rem; }
.composer-input.textarea:focus-visible { box-shadow: none; }

.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.composer-send { flex-shrink: 0; margin-left: auto; }
.composer-send:disabled { opacity: 0.4; }
.composer-icon { display: inline-flex; }
.composer-icon-stop { display: none; }
.composer-icon-stop svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.composer-stop-mode .composer-icon-send { display: none; }
.composer-stop-mode .composer-icon-stop { display: inline-flex; }

.composer-model { flex-shrink: 1; min-width: 0; }
.composer-model-trigger { display: inline-flex; align-items: center; gap: 0.25rem; height: 2rem; max-width: 100%; padding: 0 0.5rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background-color var(--chat-transition), color var(--chat-transition); }
.composer-model-trigger:hover, .composer-model[data-slot="dropdown-menu"] .composer-model-trigger[aria-expanded="true"] { background: var(--muted); color: var(--foreground); }
.composer-model-trigger:active { transform: scale(0.97); }
.composer-model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-model-caret { display: inline-flex; flex-shrink: 0; opacity: 0.7; }
.composer-model-caret svg { width: 0.85rem; height: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .composer-model-trigger:active { transform: none; } }

/* errtrack.css */
.et-page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.et-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.et-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  text-decoration: none;
}

.et-back:hover {
  color: var(--foreground);
}

.et-back svg {
  width: 1rem;
  height: 1rem;
}

.et-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--card);
}

.et-table {
  min-width: 44rem;
}

.et-col-num {
  text-align: right;
  width: 6rem;
}

.et-col-triage {
  width: 1%;
  white-space: nowrap;
}

.et-cell-what {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 34rem;
}

.et-link {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}

.et-link:hover .et-msg {
  text-decoration: underline;
}

.et-msg {
  display: block;
  overflow-wrap: anywhere;
}

.et-source {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  width: fit-content;
}

.et-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.et-when {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  white-space: nowrap;
}

.et-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
}

.et-triage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}

.et-triage-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.et-status {
  gap: 0.3rem;
}

.et-status svg {
  width: 0.875rem;
  height: 0.875rem;
}

@media (max-width: 60rem) {
  .et-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.et-detail-title {
  overflow-wrap: anywhere;
}

.et-detail-triage {
  margin-top: 0.5rem;
}

.et-detail-triage .et-triage {
  justify-content: flex-start;
}

.et-facts,
.et-attrs {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.et-facts dt,
.et-attrs dt {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
}

.et-facts dd,
.et-attrs dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.et-facts {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--muted);
  box-shadow: var(--shadow-well);
}

.et-events {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.et-events-title {
  border: 0;
  padding: 0;
  margin: 0;
}

.et-event-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.et-event-title svg {
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.et-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.et-tag svg {
  width: 0.875rem;
  height: 0.875rem;
}

.et-stack,
.et-attrs-raw {
  margin-top: 1rem;
}

.et-stack summary {
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

.et-stack summary:hover {
  color: var(--foreground);
}

.et-stack pre,
.et-attrs-raw {
  margin-top: 0.75rem;
  padding: 1rem;
  overflow-x: auto;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-well);
}

.et-stack code,
.et-attrs-raw code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre;
}

/* home.css */
/* The portfolio page. One column, one list, nothing that moves on its own. */

.portfolio {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
}

/* --- head ------------------------------------------------------------- */

/* Title left, controls right, one line. The title is allowed to wrap on a
   phone -- "Rodrigo" / "Fernandes" balances cleanly -- which is what keeps the
   controls on the same row instead of pushing them under it. */
.portfolio-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.portfolio-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.portfolio-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-lang:hover {
  color: var(--foreground);
  background-color: var(--accent);
}

.portfolio-lang:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.portfolio-lang svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* The label is small type; the target it answers to is a thumb. */
.portfolio-lang::after {
  content: "";
  position: absolute;
  inset: -0.625rem -0.5rem;
}

.portfolio-lang:active {
  transform: scale(0.97);
  transition-duration: 120ms;
}

.portfolio-head .typo-h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}

.portfolio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 2rem;
}

/* --- projects --------------------------------------------------------- */

.portfolio-projects {
  margin-top: 4rem;
}

.portfolio-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.625rem;
  margin-bottom: 1.25rem;
}

/* The section heading is a label here, not a second title -- the name above
   is the only thing on this page that should read as big. */
.portfolio-section-head .typo-h2 {
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.project-list {
  display: grid;
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project {
  display: block;
  border-radius: var(--radius-xl);
  color: inherit;
  text-decoration: none;
}

/* Depth at rest, and it collapses under the press. No hover lift: a card that
   rises when the pointer crosses it makes the whole list restless, and there
   are seven of them. */
.project .card {
  transition:
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project:hover .card {
  background-color: color-mix(in oklch, var(--accent) 45%, var(--card));
}

/* Shallower than a button's scale(0.97) on purpose: the same ratio on a card
   this wide travels several pixels at each edge and reads as a jump. */
.project:active .card {
  transform: scale(0.99);
  box-shadow: var(--shadow-raised);
  transition-duration: 120ms;
}

.project:focus-visible {
  outline: none;
}

.project:focus-visible .card {
  box-shadow:
    var(--shadow-card),
    0 0 0 1px var(--ring),
    0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.project .card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.project .card-description {
  text-wrap: pretty;
}

/* The arrow belongs to the title, not to the whole header. The component spans
   it down both rows and pins it to the top, which leaves it floating beside the
   description; this puts it back on the title's own row, centred against it.
   Scoped to .project on purpose -- the cockpit's cards still want the default,
   and two classes beat one, so this does not depend on bundle order. */
.project .card-action {
  grid-row: 1;
  align-self: center;
}

.project-out {
  color: var(--muted-foreground);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.project-out svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.project:hover .project-out {
  color: var(--foreground);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.project-host {
  font-family: var(--font-mono);
  color: var(--muted-foreground);
}

@media (max-width: 30rem) {
  .portfolio {
    padding-top: 3rem;
  }

  .portfolio-head .typo-h1 {
    font-size: 2rem;
  }

  .portfolio-links .btn {
    flex: 1 1 auto;
  }

  /* Four buttons and a two-line title leave no room for the word; the
     translate glyph carries it, and the link keeps its accessible name. */
  .portfolio-lang-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .portfolio-controls {
    gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-lang,
  .project .card,
  .project-out {
    transition-duration: 0ms;
  }

  .portfolio-lang:active,
  .project:active .card {
    transform: none;
  }
}