@import "https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@400;700&display=swap";

/* src/context/sidebar.css */
.c-sidebar {
  --sidebar-width: 5rem !important;
  --sidebar-min-width: 5rem !important;
  --sidebar-max-width: 12rem !important;
  position: fixed;
  top: 3.5rem;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-min-width) !important;
  max-width: var(--sidebar-max-width) !important;
  z-index: 9;
}
@media (min-width: 1024px) {
  .c-sidebar {
    transform: translateX(0);
  }
}
.c-sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-bottom: var(--border-w-lg) solid var(--col-outline);
}
.c-sidebar-header h6 {
  margin: 0;
  font-weight: 600;
  font-size: 0.625rem;
  text-align: center;
}
.c-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.c-sidebar-loading-spinner {
  color: var(--col-primary);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.c-sidebar-pin {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: lch(from var(--col-on) l c h / var(--op-disabled));
  transition: color 0.2s;
}
.c-sidebar-pin:hover {
  color: var(--col-on);
}
.c-sidebar-section {
  padding: 0.5rem 0;
  border-bottom: var(--border-w-lg) solid var(--col-outline);
}
.c-sidebar-section:last-of-type {
  border-bottom: none;
  flex: 1;
  overflow-y: auto;
}
.c-sidebar-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  color: lch(from var(--col-on) l c h / var(--op-disabled));
}
.c-sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.c-sidebar-item:hover {
  background: lch(from var(--col-surface) l c h / var(--op-hover));
}
.c-sidebar-item.active {
  background: lch(from var(--col-primary) l c h / var(--op-active));
}
.c-sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--col-primary);
  border-radius: 0 2px 2px 0;
}
.c-sidebar-item-me {
  font-weight: 600;
}
.c-sidebar-item-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  transition: border-radius 0.2s;
}
.c-sidebar-item:hover .c-sidebar-item-avatar {
  border-radius: 35%;
}
.c-sidebar-item.active .c-sidebar-item-avatar {
  border-radius: 35%;
}
.c-sidebar-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  width: 100%;
}
.c-sidebar-item-name {
  font-size: 0.625rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.c-sidebar-item-subtitle {
  font-size: 0.5rem;
  color: lch(from var(--col-on) l c h / var(--op-disabled));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.c-sidebar-item-favorite {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: none;
  border: none;
  padding: 0.125rem;
  cursor: pointer;
  color: lch(from var(--col-on) l c h / var(--op-disabled));
  transition: color 0.2s;
  flex-shrink: 0;
  font-size: 0.75rem;
}
.c-sidebar-item-favorite:hover {
  color: var(--col-warning);
}
.c-sidebar-item-favorite .filled {
  color: var(--col-warning);
  fill: var(--col-warning);
}
.c-sidebar-footer {
  padding: 0.5rem 0.25rem;
  border-top: var(--border-w-lg) solid var(--col-outline);
}
.c-sidebar-add-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.5rem 0.25rem;
  background: lch(from var(--col-surface) l c h / var(--op-hover));
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.625rem;
  color: var(--col-on);
}
.c-sidebar-add-button:hover {
  background: lch(from var(--col-primary) l c h / var(--op-active));
  border-color: var(--col-primary);
  color: var(--col-primary);
}
.c-sidebar.switching {
  pointer-events: none;
  opacity: 0.6;
}
.c-sidebar-item .c-badge {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  font-size: 0.5rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  .c-sidebar {
    bottom: 4.5rem;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease;
  }
  .c-sidebar.open {
    transform: translateX(0) !important;
  }
}

/* ../node_modules/.pnpm/yet-another-react-lightbox@3.25.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@1_ivg3hh57xipv4udduouwtod65u/node_modules/yet-another-react-lightbox/dist/styles.css */
.yarl__fullsize {
  height: 100%;
  width: 100%;
}
.yarl__relative {
  position: relative;
}
.yarl__portal {
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);
  z-index: var(--yarl__portal_zindex,9999);
}
.yarl__portal_open {
  opacity: 1;
}
.yarl__container {
  background-color: var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));
  bottom: 0;
  left: 0;
  outline: none;
  overflow: hidden;
  overscroll-behavior: var(--yarl__controller_overscroll_behavior,contain);
  position: absolute;
  right: 0;
  top: 0;
  touch-action: var(--yarl__controller_touch_action,none);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.yarl__carousel {
  align-content: center;
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  height: 100%;
  justify-content: center;
  opacity: var(--yarl__pull_opacity,1);
  transform: translate(var(--yarl__swipe_offset,0), var(--yarl__pull_offset,0));
  width: calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%));
}
.yarl__carousel_with_slides {
  -moz-column-gap: calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);
  column-gap: calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);
}
.yarl__flex_center {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.yarl__slide {
  flex: 1;
  overflow: hidden;
  padding: calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);
  position: relative;
}
[dir=rtl] .yarl__slide {
  --yarl__direction:-1;
}
.yarl__slide_image {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  touch-action: var(--yarl__controller_touch_action,none);
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.yarl__slide_image_cover {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
.yarl__slide_image_loading {
  opacity: 0;
}
@media screen and (min-width: 800px) {
  .yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
  }
}
.yarl__slide_placeholder {
  left: 50%;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.yarl__slide_loading {
  animation: yarl__delayed_fadein 1s linear;
  color: var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));
}
.yarl__slide_loading line {
  animation: yarl__stroke_opacity 1s linear infinite;
}
.yarl__slide_loading line:first-of-type {
  animation-delay: -1.875s;
}
.yarl__slide_loading line:nth-of-type(2) {
  animation-delay: -1.75s;
}
.yarl__slide_loading line:nth-of-type(3) {
  animation-delay: -1.625s;
}
.yarl__slide_loading line:nth-of-type(4) {
  animation-delay: -1.5s;
}
.yarl__slide_loading line:nth-of-type(5) {
  animation-delay: -1.375s;
}
.yarl__slide_loading line:nth-of-type(6) {
  animation-delay: -1.25s;
}
.yarl__slide_loading line:nth-of-type(7) {
  animation-delay: -1.125s;
}
.yarl__slide_loading line:nth-of-type(8) {
  animation-delay: -1s;
}
.yarl__slide_error {
  color: var(--yarl__slide_icon_error_color,red);
  height: var(--yarl__slide_icon_error_size,48px);
  width: var(--yarl__slide_icon_error_size,48px);
}
@media (prefers-reduced-motion) {
  .yarl__portal,
  .yarl__slide {
    transition: unset;
  }
  .yarl__slide_loading,
  .yarl__slide_loading line {
    animation: unset;
  }
}
.yarl__toolbar {
  bottom: auto;
  display: flex;
  justify-content: flex-end;
  left: auto;
  padding: var(--yarl__toolbar_padding,8px);
  position: absolute;
  right: 0;
  top: 0;
}
[dir=rtl] .yarl__toolbar {
  bottom: auto;
  left: 0;
  right: auto;
  top: 0;
}
.yarl__icon {
  height: var(--yarl__icon_size,32px);
  width: var(--yarl__icon_size,32px);
}
.yarl__button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--yarl__button_background_color,transparent);
  border: var(--yarl__button_border,0);
  color: var(--yarl__color_button,hsla(0,0%,100%,.8));
  cursor: pointer;
  filter: var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));
  line-height: 0;
  margin: var(--yarl__button_margin,0);
  outline: none;
  padding: var(--yarl__button_padding,8px);
  -webkit-tap-highlight-color: transparent;
}
.yarl__button:focus {
  color: var(--yarl__color_button_active,#fff);
}
.yarl__button:focus:not(:focus-visible) {
  color: var(--yarl__color_button,hsla(0,0%,100%,.8));
}
.yarl__button:focus-visible {
  color: var(--yarl__color_button_active,#fff);
}
@media (hover: hover) {
  .yarl__button:focus-visible:hover,
  .yarl__button:focus:hover,
  .yarl__button:hover {
    color: var(--yarl__color_button_active,#fff);
  }
}
.yarl__button:disabled {
  color: var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));
  cursor: default;
}
.yarl__navigation_next,
.yarl__navigation_prev {
  padding: var(--yarl__navigation_button_padding,24px 16px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.yarl__navigation_prev {
  left: 0;
}
[dir=rtl] .yarl__navigation_prev {
  left: unset;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
}
.yarl__navigation_next {
  right: 0;
}
[dir=rtl] .yarl__navigation_next {
  left: 0;
  right: unset;
  transform: translateY(-50%) rotate(180deg);
}
.yarl__no_scroll {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
@keyframes yarl__delayed_fadein {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes yarl__stroke_opacity {
  0% {
    stroke-opacity: 1;
  }
  to {
    stroke-opacity: .125;
  }
}

/* ../node_modules/.pnpm/yet-another-react-lightbox@3.25.0_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@1_ivg3hh57xipv4udduouwtod65u/node_modules/yet-another-react-lightbox/dist/plugins/thumbnails/thumbnails.css */
.yarl__thumbnails {
  display: flex;
  height: 100%;
}
.yarl__thumbnails_bottom,
.yarl__thumbnails_end .yarl__thumbnails_track,
.yarl__thumbnails_start .yarl__thumbnails_track,
.yarl__thumbnails_top {
  flex-direction: column;
}
.yarl__thumbnails_wrapper {
  flex: 1;
  position: relative;
}
.yarl__thumbnails_container {
  background-color: var(--yarl__thumbnails_container_background_color,var(--yarl__color_backdrop,#000));
  flex: 0 0 auto;
  overflow: hidden;
  padding: var(--yarl__thumbnails_container_padding,16px);
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.yarl__thumbnails_vignette {
  pointer-events: none;
  position: absolute;
  --yarl__thumbnails_vignette_size:12%;
}
@media (min-width: 1200px) {
  .yarl__thumbnails_vignette {
    --yarl__thumbnails_vignette_size:8%;
  }
}
@media (min-width: 2000px) {
  .yarl__thumbnails_vignette {
    --yarl__thumbnails_vignette_size:5%;
  }
}
.yarl__thumbnails_bottom .yarl__thumbnails_vignette,
.yarl__thumbnails_top .yarl__thumbnails_vignette {
  background:
    linear-gradient(
      to right,
      var(--yarl__color_backdrop,#000) 0,
      transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),
      var(--yarl__color_backdrop,#000) 100%);
  height: 100%;
  left: 0;
  right: 0;
}
.yarl__thumbnails_end .yarl__thumbnails_vignette,
.yarl__thumbnails_start .yarl__thumbnails_vignette {
  background:
    linear-gradient(
      to bottom,
      var(--yarl__color_backdrop,#000) 0,
      transparent var(--yarl__thumbnails_vignette_size,12%) calc(100% - var(--yarl__thumbnails_vignette_size, 12%)),
      var(--yarl__color_backdrop,#000) 100%);
  bottom: 0;
  top: 0;
  width: 100%;
}
.yarl__thumbnails_track {
  gap: var(--yarl__thumbnails_thumbnail_gap,16px);
  outline: none;
}
.yarl__thumbnails_thumbnail {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--yarl__thumbnails_thumbnail_background,#000);
  border-color: var(--yarl__thumbnails_thumbnail_border_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));
  border-radius: var(--yarl__thumbnails_thumbnail_border_radius,4px);
  border-style: var(--yarl__thumbnails_thumbnail_border_style,solid);
  border-width: var(--yarl__thumbnails_thumbnail_border,1px);
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  box-sizing: content-box;
  height: var(--yarl__thumbnails_thumbnail_height,80px);
  outline: none;
  overflow: hidden;
  padding: var(--yarl__thumbnails_thumbnail_padding,4px);
  position: relative;
  width: var(--yarl__thumbnails_thumbnail_width,120px);
}
.yarl__thumbnails_thumbnail_active {
  border-color: var(--yarl__thumbnails_thumbnail_active_border_color,var(--yarl__color_button_active,#fff));
}
.yarl__thumbnails_thumbnail_fadein {
  animation: yarl__thumbnails_thumbnail_fadein var(--yarl__thumbnails_thumbnail_fadein_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadein_delay,0s) forwards;
  opacity: 0;
}
.yarl__thumbnails_thumbnail_fadeout {
  animation: yarl__thumbnails_thumbnail_fadeout var(--yarl__thumbnails_thumbnail_fadeout_duration,.5s) ease-in-out var(--yarl__thumbnails_thumbnail_fadeout_delay,0s) forwards;
  cursor: unset;
}
.yarl__thumbnails_thumbnail_placeholder {
  cursor: unset;
  visibility: hidden;
}
.yarl__thumbnails_thumbnail:focus {
  box-shadow: var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px);
}
.yarl__thumbnails_thumbnail:focus:not(:focus-visible) {
  box-shadow: unset;
}
.yarl__thumbnails_thumbnail:focus-visible {
  box-shadow: var(--yarl__thumbnails_thumbnail_focus_box_shadow,#000 0 0 0 2px,var(--yarl__color_button,hsla(0,0%,100%,.8)) 0 0 0 4px);
}
.yarl__thumbnails_thumbnail_icon {
  color: var(--yarl__thumbnails_thumbnail_icon_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));
  filter: var(--yarl__thumbnails_thumbnail_icon_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));
  height: var(--yarl__thumbnails_thumbnail_icon_size,32px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: var(--yarl__thumbnails_thumbnail_icon_size,32px);
}
@keyframes yarl__thumbnails_thumbnail_fadein {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes yarl__thumbnails_thumbnail_fadeout {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ../node_modules/.pnpm/react-photo-album@3.2.1_@types+react@19.2.7_react@19.2.1/node_modules/react-photo-album/dist/styles/rows.css */
.react-photo-album {
  display: flex;
}
.react-photo-album,
.react-photo-album * {
  box-sizing: border-box;
}
.react-photo-album--track {
  align-items: flex-start;
  display: flex;
}
.react-photo-album--photo {
  padding: calc(var(--react-photo-album--padding)*1px);
  position: relative;
}
.react-photo-album--image {
  aspect-ratio: var(--react-photo-album--photo-width)/var(--react-photo-album--photo-height);
  display: block;
  height: auto;
  width: 100%;
}
.react-photo-album--button {
  background: initial;
  border: initial;
  cursor: pointer;
}
.react-photo-album--rows {
  flex-direction: column;
  row-gap: calc(var(--react-photo-album--spacing)*1px);
}
.react-photo-album--rows .react-photo-album--track {
  justify-content: space-between;
  --react-photo-album--track-gaps:calc(var(--react-photo-album--spacing)*(var(--react-photo-album--track-size) - 1) + var(--react-photo-album--padding)*2*var(--react-photo-album--track-size));
}
.react-photo-album--rows .react-photo-album--photo {
  width: calc((100% - var(--react-photo-album--track-gaps)*1px)/(var(--react-photo-album--container-width) - var(--react-photo-album--track-gaps))*var(--react-photo-album--photo-width) + 2px*var(--react-photo-album--padding));
}

/* ../libs/react/src/components.css */
:root {
  --c-primary: var(--col-primary);
  --c-secondary: var(--col-secondary);
  --c-accent: var(--col-accent);
  --c-error: var(--col-error);
  --c-warning: var(--col-warning);
  --c-success: var(--col-success);
  --c-bg-primary: var(--col-container-low);
  --c-bg-secondary: var(--col-container);
  --c-bg-hover: var(--col-container-high);
  --c-primary-bg: var(--col-container-primary);
  --c-hover-bg: var(--col-container-high);
  --c-text-primary: var(--col-on-container);
  --c-text-secondary: var(--col-on-surface);
  --c-border: var(--col-outline);
  --c-border-color: var(--col-outline);
  --c-border-radius: var(--radius-sm);
  --c-shadow-sm: var(--shadow-sm);
  --c-shadow-md: var(--shadow-md);
  --c-shadow-lg: var(--shadow-lg);
}
.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;
}
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-tooltip, 800);
  padding: 0.5rem 1rem;
  background: var(--col-primary);
  color: var(--col-on-primary);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.c-profile-card {
  display: flex;
  text-align: left;
  .picture {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
  }
  .picture.small {
    width: 2rem;
    height: 2rem;
  }
  .picture.tiny {
    width: 1.5rem;
    height: 1.5rem;
  }
  .pos-relative .picture.tiny {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid var(--col-surface, #000);
  }
  .body {
    display: flex;
    flex-direction: column;
    margin: 0.1rem 0 0.1rem 0.5rem;
  }
}
.c-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  &.small {
    width: 2rem;
    height: 2rem;
  }
}
.c-markdown {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0.5rem 0;
  }
  p {
    margin: 0.5rem 0;
  }
  strong {
    color: var(--col-em);
  }
}
#popper-container {
  z-index: var(--z-popover, 700);
}
.c-loading-spinner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.c-loading-spinner-svg {
  animation: c-loading-spinner-rotate 1s linear infinite;
}
.c-loading-spinner-track {
  stroke: var(--col-bg-emph, rgba(128, 128, 128, 0.2));
}
.c-loading-spinner-indicator {
  stroke: var(--col-primary, currentColor);
  transform-origin: center;
  animation: c-loading-spinner-dash 1.5s ease-in-out infinite;
}
.c-loading-spinner.secondary .c-loading-spinner-indicator {
  stroke: var(--col-secondary);
}
.c-loading-spinner.accent .c-loading-spinner-indicator {
  stroke: var(--col-accent);
}
.c-loading-spinner.success .c-loading-spinner-indicator {
  stroke: var(--col-success);
}
.c-loading-spinner.warning .c-loading-spinner-indicator {
  stroke: var(--col-warning);
}
.c-loading-spinner.error .c-loading-spinner-indicator {
  stroke: var(--col-error);
}
.c-loading-spinner.xs .c-loading-spinner-svg {
  width: 1rem;
  height: 1rem;
}
.c-loading-spinner.sm .c-loading-spinner-svg {
  width: 1.5rem;
  height: 1.5rem;
}
.c-loading-spinner.md .c-loading-spinner-svg {
  width: 2rem;
  height: 2rem;
}
.c-loading-spinner.lg .c-loading-spinner-svg {
  width: 3rem;
  height: 3rem;
}
.c-loading-spinner.xl .c-loading-spinner-svg {
  width: 4rem;
  height: 4rem;
}
.c-loading-spinner-label {
  font-size: 0.875rem;
  color: var(--col-txt-secondary, currentColor);
}
@keyframes c-loading-spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes c-loading-spinner-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.c-skeleton {
  background: var(--col-bg-emph, rgba(128, 128, 128, 0.15));
  border-radius: var(--radius-sm);
}
.c-skeleton--text {
  height: 1em;
  width: 100%;
  margin: 0.25em 0;
}
.c-skeleton--circle {
  border-radius: 50%;
}
.c-skeleton--rect {
  border-radius: 0;
}
.c-skeleton--rounded {
  border-radius: var(--radius-md);
}
.c-skeleton--animate {
  animation: c-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes c-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.c-skeleton-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-skeleton-card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.c-skeleton-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.c-skeleton-card-header-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.c-skeleton-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.c-skeleton-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-inline-edit-form {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.c-inline-edit-form .c-input {
  flex: 1;
  min-width: 0;
}
.c-inline-edit-form .c-button {
  flex-shrink: 0;
}
.c-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-filter-bar.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}
.c-filter-bar-item-label {
  flex: 1;
}
.c-filter-bar-item-badge {
  margin-left: auto;
}
.c-filter-bar-divider {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid var(--col-border, rgba(128, 128, 128, 0.2));
}
.c-filter-bar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.c-filter-bar-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--col-txt-secondary, rgba(128, 128, 128, 0.8));
  padding: 0.5rem 0.75rem 0.25rem;
}
.c-filter-bar-search {
  margin-top: 0.5rem;
}
.c-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: var(--space-2);
}
.c-empty-state--sm {
  padding: 1rem;
  gap: 0.5rem;
}
.c-empty-state--lg {
  padding: 3rem;
  gap: 1rem;
}
.c-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--col-txt-secondary, rgba(128, 128, 128, 0.6));
}
.c-empty-state--sm .c-empty-state-icon {
  font-size: 1.5rem;
}
.c-empty-state--md .c-empty-state-icon {
  font-size: 2.5rem;
}
.c-empty-state--lg .c-empty-state-icon {
  font-size: 3.5rem;
}
.c-empty-state-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--col-txt, currentColor);
}
.c-empty-state--sm .c-empty-state-title {
  font-size: 1rem;
}
.c-empty-state--lg .c-empty-state-title {
  font-size: 1.25rem;
}
.c-empty-state-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--col-txt-secondary, rgba(128, 128, 128, 0.8));
  max-width: 24rem;
}
.c-empty-state--sm .c-empty-state-description {
  font-size: 0.75rem;
  max-width: 18rem;
}
.c-empty-state--lg .c-empty-state-description {
  font-size: 1rem;
  max-width: 30rem;
}
.c-empty-state-action {
  margin-top: 0.5rem;
}
.c-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--col-container-low);
  border-radius: var(--radius-control);
}
.c-toolbar.compact {
  padding: var(--space-1);
  gap: var(--space-1);
}
.c-toolbar-divider {
  width: 1px;
  height: 1.5rem;
  background: var(--col-outline);
  margin: 0 var(--space-1);
}
.c-toolbar-spacer {
  flex: 1;
}
.c-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0;
}
.c-toolbar-group > .c-button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.c-toolbar-group > .c-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid var(--col-outline);
}
.c-menu {
  position: fixed;
  background: var(--col-surface);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover, 1000);
  min-width: 12rem;
  padding: var(--space-1);
  overflow: hidden;
}
.c-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--col-on-surface);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}
.c-menu-item:hover {
  background: var(--col-container-low);
}
.c-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.c-menu-item.danger {
  color: var(--col-error);
}
.c-menu-item.danger:hover {
  background: rgba(var(--col-rgb-error, 239 68 68), 0.1);
}
.c-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  flex-shrink: 0;
}
.c-menu-item-label {
  flex: 1;
}
.c-menu-item-shortcut {
  font-size: var(--text-xs);
  color: var(--col-secondary);
  margin-left: auto;
}
.c-menu-divider {
  height: 1px;
  background: var(--col-outline);
  margin: var(--space-1) 0;
}
.c-menu-header {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--col-secondary);
}
.c-action-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: lch(from var(--col-shadow) l c h / 0.4);
  backdrop-filter: blur(var(--blur-radius));
  z-index: var(--z-modal, 600);
  opacity: 0;
  transition: opacity var(--duration-normal, 0.3s) var(--ease-default);
  display: flex;
  align-items: flex-end;
}
.c-action-sheet-backdrop.show {
  opacity: 1;
}
.c-action-sheet {
  width: 100%;
  background-color: lch(from var(--col-container) l c h / var(--op-panel, 0.95));
  backdrop-filter: blur(var(--blur-radius));
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  box-shadow: var(--shadow-lg), inset 0px 0px 1rem var(--col-frost);
  transform: translateY(100%);
  transition: transform var(--duration-normal, 0.3s) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom, 0);
  max-height: 80vh;
  overflow-y: auto;
  color: var(--col-on-container);
}
.c-action-sheet.show {
  transform: translateY(0);
}
.c-action-sheet-header {
  padding: var(--p-panel, 1rem);
  text-align: center;
  border-bottom: var(--border-w-sm, 1px) solid var(--col-outline);
}
.c-action-sheet-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--col-txt-muted, var(--col-on-container));
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-action-sheet-content {
  padding: var(--space-2, 0.5rem) 0;
}
.c-action-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3, 0.75rem) var(--p-panel, 1rem);
  border: none;
  background: transparent;
  color: var(--col-on-container);
  font-size: var(--text-base, 1rem);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast, 0.15s) var(--ease-default);
}
.c-action-sheet-item:active {
  background: lch(from var(--col-container-low) l c h / 0.5);
}
.c-action-sheet-item:disabled {
  opacity: var(--op-disabled, 0.5);
  cursor: not-allowed;
}
.c-action-sheet-item.danger {
  color: var(--col-error);
}
.c-action-sheet-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  font-size: 1.25rem;
}
.c-action-sheet-item-label {
  flex: 1;
}
.c-action-sheet-divider {
  height: var(--border-w-sm, 1px);
  background: var(--col-outline);
  margin: var(--space-2, 0.5rem) 0;
}
.c-tag-input {
  position: relative;
}
.c-tag-input.inline {
  display: inline-flex;
}
.c-tag-input-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--col-container-low);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-control);
  min-height: 2.5rem;
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.c-tag-input-field:focus-within {
  border-color: var(--col-primary);
  box-shadow: 0 0 0 2px rgba(var(--col-rgb-primary, 99 102 241), 0.2);
}
.c-tag-input-field input {
  flex: 1;
  min-width: 4rem;
  border: none;
  background: transparent;
  color: var(--col-on-surface);
  font-size: var(--text-sm);
  padding: 0;
  outline: none;
}
.c-tag-input-field input::placeholder {
  color: var(--col-secondary);
}
.c-tag-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--col-surface);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-popover, 1000);
  list-style: none;
  padding: var(--space-1);
  margin-bottom: 0;
}
.c-tag-input-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}
.c-tag-input-suggestion:hover,
.c-tag-input-suggestion.highlighted {
  background: var(--col-container-low);
}
.c-tag-input-suggestion-count {
  font-size: var(--text-xs);
  color: var(--col-secondary);
}
.c-tag-input-suggestion-new {
  font-size: var(--text-xs);
  color: var(--col-primary);
  font-style: italic;
}
.c-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.c-accordion.borderless {
  border: none;
  gap: var(--space-1);
}
.c-accordion.compact .c-accordion-header {
  padding: var(--space-2);
}
.c-accordion-item {
  border-bottom: 1px solid var(--col-outline);
}
.c-accordion.borderless .c-accordion-item {
  border-bottom: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.c-accordion-item:last-child {
  border-bottom: none;
}
.c-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border: none;
  background: transparent;
  color: var(--col-on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.c-accordion-header:hover {
  background: var(--col-container-low);
}
.c-accordion-header-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.c-accordion-icon {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.c-accordion-item.open .c-accordion-icon {
  transform: rotate(90deg);
}
.c-accordion-content {
  display: none;
  padding: 0 var(--space-3) var(--space-3);
}
.c-accordion-item.open .c-accordion-content {
  display: block;
}

/* src/apps/files/files.css */
.c-drop-zone {
  height: 100%;
}
.c-drop-zone-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(var(--col-rgb-accent), 0.1);
  border: 2px dashed var(--col-accent);
  border-radius: var(--rad-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}
.c-drop-zone-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--col-accent);
  font-weight: 500;
}
.c-upload-panel {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 20rem;
  max-width: calc(100vw - var(--space-4));
  background: var(--col-surface);
  border: var(--border-w-lg, 1px) solid var(--col-outline);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--blur-radius));
  z-index: var(--z-toast);
  overflow: hidden;
  animation: upload-panel-slide-in var(--anim-toast) forwards;
}
@keyframes upload-panel-slide-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.c-upload-panel.collapsed {
  width: auto;
  min-width: 14rem;
}
.c-upload-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--col-container-low);
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-default);
}
.c-upload-panel-header:hover {
  background: var(--col-container);
}
.c-upload-panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--col-on);
}
.c-upload-panel-icon {
  flex-shrink: 0;
}
.c-upload-panel-icon.success {
  color: var(--col-success);
}
.c-upload-panel-icon.error {
  color: var(--col-error);
}
.c-upload-panel > .c-progress {
  border-radius: 0;
}
.c-upload-panel-list {
  max-height: 15rem;
  overflow-y: auto;
  padding: var(--space-2);
}
.c-upload-panel-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--col-outline);
}
.c-upload-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}
.c-upload-item:hover {
  background: var(--col-container-low);
}
.c-upload-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--col-secondary);
}
.c-upload-item.complete .c-upload-item-icon {
  color: var(--col-success);
}
.c-upload-item.error .c-upload-item-icon {
  color: var(--col-error);
}
.c-upload-item.queued .c-upload-item-icon {
  color: var(--col-outline);
}
.c-upload-item-content {
  flex: 1;
  min-width: 0;
}
.c-upload-item-name {
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--col-on);
}
.c-upload-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--col-secondary);
}
.c-upload-item-error {
  color: var(--col-error);
}
.c-upload-item-remove {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.c-upload-item:hover .c-upload-item-remove {
  opacity: 1;
}
.c-file-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--col-container-low);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.c-file-card:hover {
  background: var(--col-container-mid, var(--col-container-secondary));
}
.c-file-card.accent {
  background: var(--col-container-primary);
  outline: 2px solid var(--col-primary);
}
.c-file-card-icon {
  position: relative;
  flex-shrink: 0;
  font-size: 1.75rem;
  color: var(--col-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--col-container);
  border-radius: var(--radius-sm);
}
.c-file-card-access-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  color: var(--col-on-surface);
  background: rgba(var(--col-rgb-surface), 0.7);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.8;
}
.c-file-card-access-badge svg {
  width: 1rem;
  height: 1rem;
}
.c-file-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-file-card-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  line-height: 1.3;
}
.c-file-card-name .text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-file-card-favorite {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--col-warning);
}
.c-file-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--col-txt-muted);
}
.c-file-card-meta-date {
  min-width: 5rem;
}
.c-file-card-tags {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.c-file-card-tags-more {
  font-size: var(--text-xs);
  color: var(--col-txt-muted);
  padding: 0 var(--space-1);
}
.c-file-card-info {
  flex-shrink: 0;
  align-self: center;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.c-file-card:hover .c-file-card-info {
  opacity: 0.8;
}
.c-file-card-info:hover {
  opacity: 1 !important;
}
.c-file-card-open {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.c-file-card:hover .c-file-card-open {
  opacity: 0.8;
}
.c-file-card-open:hover {
  opacity: 1 !important;
}
.c-file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--col-bg-emph);
  border-radius: var(--rad);
  min-height: 10rem;
  max-height: 16rem;
  overflow: hidden;
}
.c-file-preview-image {
  max-width: 100%;
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--rad);
}
.c-file-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--col-txt-muted);
  padding: 2rem;
}
.c-context-menu {
  position: fixed;
  background: var(--col-bg);
  border: 1px solid var(--col-border);
  border-radius: var(--rad);
  box-shadow: var(--sh-lg);
  z-index: 1000;
  min-width: 12rem;
  padding: 0.25rem;
  overflow: hidden;
}
.c-context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--col-txt);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  border-radius: var(--rad-sm);
}
.c-context-menu-item:hover {
  background: var(--col-bg-hover);
}
.c-context-menu-item.danger {
  color: var(--col-txt-danger, #ef4444);
}
.c-context-menu-item.danger:hover {
  background: var(--col-bg-danger, rgba(239, 68, 68, 0.1));
}
.c-context-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  flex-shrink: 0;
}
.c-context-menu-label {
  flex: 1;
}
.c-context-menu-shortcut {
  font-size: 0.75rem;
  color: var(--col-txt-muted);
}
.c-context-menu-divider {
  height: 1px;
  background: var(--col-border);
  margin: 0.25rem 0;
}
.c-folder-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.c-folder-picker-dialog {
  background: var(--col-bg);
  border-radius: var(--rad-lg);
  box-shadow: var(--sh-xl);
  width: 24rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}
.c-folder-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--col-border);
}
.c-folder-picker-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.c-folder-picker-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--col-txt-muted);
  cursor: pointer;
  border-radius: var(--rad);
}
.c-folder-picker-close:hover {
  background: var(--col-bg-hover);
  color: var(--col-txt);
}
.c-folder-picker-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  min-height: 12rem;
  max-height: 20rem;
}
.c-folder-picker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  color: var(--col-txt-muted);
}
.c-folder-picker-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: var(--rad-sm);
  cursor: pointer;
}
.c-folder-picker-item:hover {
  background: var(--col-bg-hover);
}
.c-folder-picker-item.selected {
  background: var(--col-accent);
  color: var(--col-txt-on-accent);
}
.c-folder-picker-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.c-folder-picker-icon {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}
.c-folder-picker-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-folder-picker-empty {
  color: var(--col-txt-muted);
  font-size: 0.875rem;
  font-style: italic;
  padding: 0.25rem 0;
}
.c-folder-picker-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid var(--col-border);
}
.c-file-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-2);
}
.c-file-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--col-container-low);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.c-file-grid-item:hover {
  background: var(--col-container-mid, var(--col-container-secondary));
  transform: translateY(-2px);
}
.c-file-grid-item.accent {
  background: var(--col-container-primary);
  outline: 2px solid var(--col-primary);
}
.c-file-grid-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--col-container);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.c-file-grid-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-file-grid-thumb-icon {
  font-size: 2.5rem;
  color: var(--col-secondary);
}
.c-file-grid-favorite {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: 0.875rem;
  color: var(--col-warning);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 2px;
  line-height: 1;
}
.c-file-grid-access-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: var(--col-on-surface);
  background: rgba(var(--col-rgb-surface), 0.7);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.8;
}
.c-file-grid-access-badge svg {
  width: 1rem;
  height: 1rem;
}
.c-file-grid-name {
  width: 100%;
  text-align: center;
}
.c-file-grid-name-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}
.c-file-grid-info {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  opacity: 0.7;
  background: rgba(var(--col-rgb-surface), 0.8);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.c-file-grid-info:hover {
  opacity: 1;
}
.c-file-grid-item {
  position: relative;
}

/* src/apps/viewer/viewer.css */
.c-file-viewer {
  position: fixed;
  inset: 0;
  background: lch(from var(--color-neutral) 4 calc(c * 0.2) h);
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal, 600);
}
.c-file-viewer-toolbar {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: lch(from var(--col-container) l c h / var(--op-panel, 0.85));
  backdrop-filter: blur(var(--blur-radius, 12px));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--col-frost);
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 10;
  max-width: calc(100vw - var(--space-4));
}
.c-file-viewer-toolbar.hidden {
  opacity: 0;
  pointer-events: none;
}
.c-file-viewer-toolbar-filename {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--col-on-container);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
}
.c-file-viewer-toolbar-divider {
  width: 1px;
  height: 1.5rem;
  background: var(--col-outline);
}
.c-file-viewer-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-4);
}
.c-file-viewer-video-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.c-file-viewer-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  background: #000;
}
.c-file-viewer-video-fullscreen {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.c-file-viewer-video-container:hover .c-file-viewer-video-fullscreen {
  opacity: 1;
}
.c-file-viewer-pdf-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 1000px;
}
.c-file-viewer-pdf {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--col-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}
.c-file-viewer-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--col-on-surface);
  text-align: center;
}
.c-file-viewer-error-icon {
  font-size: 4rem;
  color: var(--col-error);
}
@media (max-width: 640px) {
  .c-file-viewer-toolbar {
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
    max-width: none;
  }
  .c-file-viewer-toolbar-filename {
    max-width: 10rem;
  }
  .c-file-viewer-content {
    padding: var(--space-2);
  }
}

/* ../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.core.css */
.ql-container {
  box-sizing: border-box;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
}
@supports (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}
.ql-editor ol {
  padding-left: 1.5em;
}
.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}
.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}
.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "\2022";
}
.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "\2611";
}
.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "\2610";
}
@supports (counter-set:none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}
.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}
.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: .3em;
  margin-right: -1.5em;
  text-align: left;
}
.ql-editor table {
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  outline: none;
}
.ql-editor .ql-code-block-container {
  font-family: monospace;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-editor .ql-font-monospace {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-editor .ql-size-small {
  font-size: .75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-ui {
  position: absolute;
}
.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}

/* ../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.bubble.css */
.ql-container {
  box-sizing: border-box;
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
  cursor: pointer;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
}
@supports (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor p,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor table {
  border-collapse: collapse;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}
.ql-editor ol {
  padding-left: 1.5em;
}
.ql-editor li {
  list-style-type: none;
  padding-left: 1.5em;
  position: relative;
}
.ql-editor li > .ql-ui:before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: .3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
  color: #777;
}
.ql-editor li[data-list=bullet] > .ql-ui:before {
  content: "\2022";
}
.ql-editor li[data-list=checked] > .ql-ui:before {
  content: "\2611";
}
.ql-editor li[data-list=unchecked] > .ql-ui:before {
  content: "\2610";
}
@supports (counter-set:none) {
  .ql-editor li[data-list] {
    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list] {
    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered] {
  counter-increment: list-0;
}
.ql-editor li[data-list=ordered] > .ql-ui:before {
  content: counter(list-0, decimal) ". ";
}
.ql-editor li[data-list=ordered].ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
  content: counter(list-1, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-1 {
    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
  content: counter(list-2, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-2 {
    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
  content: counter(list-3, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-3 {
    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
  content: counter(list-4, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-set: list-5 list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-4 {
    counter-reset: list-5 list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
  content: counter(list-5, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-set: list-6 list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-5 {
    counter-reset: list-6 list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
  content: counter(list-6, decimal) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-set: list-7 list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-6 {
    counter-reset: list-7 list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
  content: counter(list-7, lower-alpha) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-set: list-8 list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-7 {
    counter-reset: list-8 list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
  content: counter(list-8, lower-roman) ". ";
}
@supports (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-set: list-9;
  }
}
@supports not (counter-set:none) {
  .ql-editor li[data-list].ql-indent-8 {
    counter-reset: list-9;
  }
}
.ql-editor li[data-list=ordered].ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
  content: counter(list-9, decimal) ". ";
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
  margin-left: .3em;
  margin-right: -1.5em;
  text-align: left;
}
.ql-editor table {
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  outline: none;
}
.ql-editor .ql-code-block-container {
  font-family: monospace;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-editor .ql-font-monospace {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-editor .ql-size-small {
  font-size: .75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-ui {
  position: absolute;
}
.ql-editor.ql-blank::before {
  color: rgba(0, 0, 0, 0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-bubble.ql-toolbar:after,
.ql-bubble .ql-toolbar:after {
  clear: both;
  content: "";
  display: table;
}
.ql-bubble.ql-toolbar button,
.ql-bubble .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-bubble.ql-toolbar button svg,
.ql-bubble .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-bubble.ql-toolbar button:active:hover,
.ql-bubble .ql-toolbar button:active:hover {
  outline: none;
}
.ql-bubble.ql-toolbar input.ql-image[type=file],
.ql-bubble .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-bubble.ql-toolbar button:hover,
.ql-bubble .ql-toolbar button:hover,
.ql-bubble.ql-toolbar button:focus,
.ql-bubble .ql-toolbar button:focus,
.ql-bubble.ql-toolbar button.ql-active,
.ql-bubble .ql-toolbar button.ql-active,
.ql-bubble.ql-toolbar .ql-picker-label:hover,
.ql-bubble .ql-toolbar .ql-picker-label:hover,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
.ql-bubble.ql-toolbar .ql-picker-item:hover,
.ql-bubble .ql-toolbar .ql-picker-item:hover,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
  color: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-stroke,
.ql-bubble .ql-toolbar button:hover .ql-stroke,
.ql-bubble.ql-toolbar button:focus .ql-stroke,
.ql-bubble .ql-toolbar button:focus .ql-stroke,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #fff;
}
@media (pointer: coarse) {
  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
    color: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #ccc;
  }
}
.ql-bubble {
  box-sizing: border-box;
}
.ql-bubble * {
  box-sizing: border-box;
}
.ql-bubble .ql-hidden {
  display: none;
}
.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
  visibility: hidden;
}
.ql-bubble .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-bubble .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-bubble .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-bubble .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-bubble .ql-formats:after {
  clear: both;
  content: "";
  display: table;
}
.ql-bubble .ql-stroke {
  fill: none;
  stroke: #ccc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-bubble .ql-stroke-miter {
  fill: none;
  stroke: #ccc;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-bubble .ql-fill,
.ql-bubble .ql-stroke.ql-fill {
  fill: #ccc;
}
.ql-bubble .ql-empty {
  fill: none;
}
.ql-bubble .ql-even {
  fill-rule: evenodd;
}
.ql-bubble .ql-thin,
.ql-bubble .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-bubble .ql-transparent {
  opacity: .4;
}
.ql-bubble .ql-direction svg:last-child {
  display: none;
}
.ql-bubble .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-bubble .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-bubble .ql-editor h1 {
  font-size: 2em;
}
.ql-bubble .ql-editor h2 {
  font-size: 1.5em;
}
.ql-bubble .ql-editor h3 {
  font-size: 1.17em;
}
.ql-bubble .ql-editor h4 {
  font-size: 1em;
}
.ql-bubble .ql-editor h5 {
  font-size: .83em;
}
.ql-bubble .ql-editor h6 {
  font-size: .67em;
}
.ql-bubble .ql-editor a {
  text-decoration: underline;
}
.ql-bubble .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-bubble .ql-editor code,
.ql-bubble .ql-editor .ql-code-block-container {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-bubble .ql-editor .ql-code-block-container {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-bubble .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-bubble .ql-editor .ql-code-block-container {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-bubble .ql-editor img {
  max-width: 100%;
}
.ql-bubble .ql-picker {
  color: #ccc;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-bubble .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-bubble .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-bubble .ql-picker-options {
  background-color: #444;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-bubble .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
  color: #777;
  z-index: 2;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-bubble .ql-color-picker,
.ql-bubble .ql-icon-picker {
  width: 28px;
}
.ql-bubble .ql-color-picker .ql-picker-label,
.ql-bubble .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-label svg,
.ql-bubble .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-bubble .ql-icon-picker .ql-picker-options {
  padding: 4px 0;
}
.ql-bubble .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-bubble .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0;
  width: 16px;
}
.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""])::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""])::before {
  content: attr(data-label);
}
.ql-bubble .ql-picker.ql-header {
  width: 98px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
  content: "Normal";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "Heading 1";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "Heading 2";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "Heading 3";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "Heading 4";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "Heading 5";
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "Heading 6";
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: .83em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: .67em;
}
.ql-bubble .ql-picker.ql-font {
  width: 108px;
}
.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
  content: "Sans Serif";
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: "Serif";
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: "Monospace";
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family:
    Georgia,
    Times New Roman,
    serif;
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family:
    Monaco,
    Courier New,
    monospace;
}
.ql-bubble .ql-picker.ql-size {
  width: 98px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
  content: "Normal";
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: "Small";
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: "Large";
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: "Huge";
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-code-block-container {
  position: relative;
}
.ql-code-block-container .ql-ui {
  right: 5px;
  top: 5px;
}
.ql-bubble .ql-toolbar .ql-formats {
  margin: 8px 12px 8px 0;
}
.ql-bubble .ql-toolbar .ql-formats:first-child {
  margin-left: 12px;
}
.ql-bubble .ql-color-picker svg {
  margin: 1px;
}
.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
.ql-bubble .ql-color-picker .ql-picker-item:hover {
  border-color: #fff;
}
.ql-bubble .ql-tooltip {
  background-color: #444;
  border-radius: 25px;
  color: #fff;
}
.ql-bubble .ql-tooltip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: " ";
  display: block;
  left: 50%;
  margin-left: -6px;
  position: absolute;
}
.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  border-bottom: 6px solid #444;
  top: -6px;
}
.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
  border-top: 6px solid #444;
  bottom: -6px;
}
.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
  display: block;
}
.ql-bubble .ql-tooltip.ql-editing .ql-formats {
  visibility: hidden;
}
.ql-bubble .ql-tooltip-editor {
  display: none;
}
.ql-bubble .ql-tooltip-editor input[type=text] {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
}
.ql-bubble .ql-tooltip-editor a {
  top: 10px;
  position: absolute;
  right: 20px;
}
.ql-bubble .ql-tooltip-editor a:before {
  color: #ccc;
  content: "\d7";
  font-size: 16px;
  font-weight: bold;
}
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close) {
  position: relative;
  white-space: nowrap;
}
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before {
  background-color: #444;
  border-radius: 15px;
  top: -5px;
  font-size: 12px;
  color: #fff;
  content: attr(href);
  font-weight: normal;
  overflow: hidden;
  padding: 5px 15px;
  text-decoration: none;
  z-index: 1;
}
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after {
  border-top: 6px solid #444;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 0;
  content: " ";
  height: 0;
  width: 0;
}
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::before,
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close)::after {
  left: 0;
  margin-left: 50%;
  position: absolute;
  transform: translate(-50%, -100%);
  transition: visibility 0s ease 200ms;
  visibility: hidden;
}
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::before,
.ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover::after {
  visibility: visible;
}

/* ../node_modules/.pnpm/react-image-crop@11.0.10_react@19.2.1/node_modules/react-image-crop/dist/ReactCrop.css */
@keyframes marching-ants {
  0% {
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
  }
  to {
    background-position:
      20px 0,
      -20px 100%,
      0 -20px,
      100% 20px;
  }
}
:root {
  --rc-drag-handle-size: 12px;
  --rc-drag-handle-mobile-size: 24px;
  --rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);
  --rc-drag-bar-size: 6px;
  --rc-border-color: rgba(255, 255, 255, .7);
  --rc-focus-color: #0088ff;
}
.ReactCrop {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  max-width: 100%;
}
.ReactCrop *,
.ReactCrop *:before,
.ReactCrop *:after {
  box-sizing: border-box;
}
.ReactCrop--disabled,
.ReactCrop--locked {
  cursor: inherit;
}
.ReactCrop__child-wrapper {
  overflow: hidden;
  max-height: inherit;
}
.ReactCrop__child-wrapper > img,
.ReactCrop__child-wrapper > video {
  display: block;
  max-width: 100%;
  max-height: inherit;
}
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img,
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {
  touch-action: none;
}
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
  touch-action: none;
}
.ReactCrop__crop-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  width: calc(100% + .5px);
  height: calc(100% + .5px);
}
.ReactCrop__crop-selection {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
  cursor: move;
}
.ReactCrop--disabled .ReactCrop__crop-selection {
  cursor: inherit;
}
.ReactCrop--circular-crop .ReactCrop__crop-selection {
  border-radius: 50%;
}
.ReactCrop--circular-crop .ReactCrop__crop-selection:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border: 1px solid var(--rc-border-color);
  opacity: .3;
}
.ReactCrop--no-animate .ReactCrop__crop-selection {
  outline: 1px dashed white;
}
.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
  animation: marching-ants 1s;
  background-image:
    linear-gradient(
      to right,
      #fff 50%,
      #444 50%),
    linear-gradient(
      to right,
      #fff 50%,
      #444 50%),
    linear-gradient(
      to bottom,
      #fff 50%,
      #444 50%),
    linear-gradient(
      to bottom,
      #fff 50%,
      #444 50%);
  background-size:
    10px 1px,
    10px 1px,
    1px 10px,
    1px 10px;
  background-position:
    0 0,
    0 100%,
    0 0,
    100% 0;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y;
  color: #fff;
  animation-play-state: running;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ReactCrop__crop-selection:focus {
  outline: 2px solid var(--rc-focus-color);
  outline-offset: -1px;
}
.ReactCrop--invisible-crop .ReactCrop__crop-mask,
.ReactCrop--invisible-crop .ReactCrop__crop-selection {
  display: none;
}
.ReactCrop__rule-of-thirds-vt:before,
.ReactCrop__rule-of-thirds-vt:after,
.ReactCrop__rule-of-thirds-hz:before,
.ReactCrop__rule-of-thirds-hz:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff6;
}
.ReactCrop__rule-of-thirds-vt:before,
.ReactCrop__rule-of-thirds-vt:after {
  width: 1px;
  height: 100%;
}
.ReactCrop__rule-of-thirds-vt:before {
  left: 33.3333333333%;
}
.ReactCrop__rule-of-thirds-vt:after {
  left: 66.6666666667%;
}
.ReactCrop__rule-of-thirds-hz:before,
.ReactCrop__rule-of-thirds-hz:after {
  width: 100%;
  height: 1px;
}
.ReactCrop__rule-of-thirds-hz:before {
  top: 33.3333333333%;
}
.ReactCrop__rule-of-thirds-hz:after {
  top: 66.6666666667%;
}
.ReactCrop__drag-handle {
  position: absolute;
  width: var(--rc-drag-handle-size);
  height: var(--rc-drag-handle-size);
  background-color: var(--rc-drag-handle-bg-colour);
  border: 1px solid var(--rc-border-color);
}
.ReactCrop__drag-handle:focus {
  background: var(--rc-focus-color);
}
.ReactCrop .ord-nw {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nw-resize;
}
.ReactCrop .ord-n {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: n-resize;
}
.ReactCrop .ord-ne {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: ne-resize;
}
.ReactCrop .ord-e {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  cursor: e-resize;
}
.ReactCrop .ord-se {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  cursor: se-resize;
}
.ReactCrop .ord-s {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: s-resize;
}
.ReactCrop .ord-sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  cursor: sw-resize;
}
.ReactCrop .ord-w {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: w-resize;
}
.ReactCrop__disabled .ReactCrop__drag-handle {
  cursor: inherit;
}
.ReactCrop__drag-bar {
  position: absolute;
}
.ReactCrop__drag-bar.ord-n {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--rc-drag-bar-size);
  transform: translateY(-50%);
}
.ReactCrop__drag-bar.ord-e {
  right: 0;
  top: 0;
  width: var(--rc-drag-bar-size);
  height: 100%;
  transform: translate(50%);
}
.ReactCrop__drag-bar.ord-s {
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--rc-drag-bar-size);
  transform: translateY(50%);
}
.ReactCrop__drag-bar.ord-w {
  top: 0;
  left: 0;
  width: var(--rc-drag-bar-size);
  height: 100%;
  transform: translate(-50%);
}
.ReactCrop--new-crop .ReactCrop__drag-bar,
.ReactCrop--new-crop .ReactCrop__drag-handle,
.ReactCrop--fixed-aspect .ReactCrop__drag-bar,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
  display: none;
}
@media (pointer: coarse) {
  .ReactCrop .ord-n,
  .ReactCrop .ord-e,
  .ReactCrop .ord-s,
  .ReactCrop .ord-w {
    display: none;
  }
  .ReactCrop__drag-handle {
    width: var(--rc-drag-handle-mobile-size);
    height: var(--rc-drag-handle-mobile-size);
  }
}

/* src/profile/profile.css */
.c-profile-pic-container {
  width: 10rem;
  position: absolute;
  left: 2rem;
  bottom: 0rem;
}
.c-profile-pic {
  width: 10rem;
  border-radius: 50%;
  border: 0.5rem solid var(--col-bg);
}
.c-profile-header {
  padding-bottom: 5rem;
}
.c-profile-cover {
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}
.c-profile-title {
  padding-left: 2rem;
}
.c-overlay-icon {
  display: flex;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  & > svg {
    height: 2rem;
  }
}
.ql-container {
  font-size: 1rem;
}
.ql-editor {
  padding: 0;
  &.ql-blank::before {
    color: var(--col-on);
    opacity: 0.6;
  }
}
@media screen and (max-width: 768px) {
  .c-profile-pic {
    width: 8rem;
    left: 2rem;
    bottom: 4rem;
  }
  .c-profile-pic {
    width: 8rem;
  }
  .c-profile-header {
    padding-bottom: 4rem;
  }
}

/* ../local/opalui/dist/opalui.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--col-frost) transparent;
  scrollbar-width: thin;
}
body {
  overflow-x: hidden;
  --col-bg: var(--col-surface);
  --col-on: var(--col-on-surface);
  --col-em: var(--col-em-surface);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
h1,
h2,
h3 {
  color: var(--col-em);
}
button {
  padding: 0;
}
ul {
  margin: 0;
  padding-inline-start: 0;
}
a,
a:link,
a:visited {
  text-decoration: none;
  color: var(--col-on);
}
a[disabled] {
  pointer-events: none;
  opacity: var(--op-disabled);
  cursor: not-allowed;
}
hr {
  border: 1px solid var(--col-on);
}
details summary::marker {
  content: none;
}
*::-webkit-scrollbar {
  width: 0.25rem;
  background: var(--col-primary);
}
*::-webkit-scrollbar-thumb {
  width: 0.25rem;
  background: var(--col-frost);
  box-shadow: none;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece {
  background: var(--col-on-primary);
}
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-sidebar: 400;
  --z-modal-backdrop: 500;
  --z-modal: 600;
  --z-popover: 700;
  --z-tooltip: 800;
  --z-toast: 900;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --anim-stagger-base: 50ms;
  --anim-page-enter: 400ms var(--ease-out);
  --anim-hover: 200ms var(--ease-out);
  --anim-press: 150ms var(--ease-in-out);
  --anim-modal: 300ms var(--ease-spring);
  --anim-toast: 300ms var(--ease-out);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --size-xs: 1.5rem;
  --size-sm: 2rem;
  --size-md: 2.5rem;
  --size-lg: 3rem;
  --size-xl: 4rem;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--col-focus, var(--col-primary));
  --min-touch-target: 44px;
}
body {
  --color-primary: lch(35 60 250);
  --color-secondary: lch(from var(--color-primary) l calc(c / 2) h);
  --color-accent: lch(from var(--color-primary) l c calc(h + 180));
  --color-neutral: lch(35 20 250);
  --color-error: lch(35 50 25);
  --color-warning: lch(35 50 80);
  --color-success: lch(35 50 155);
  --op-panel: 1;
  --op-button: 1;
  --op-disabled: 0.5;
  --col-shadow: lch(0 0 0 / 0.15);
  --col-frost: lch(100 0 0 / 0.15);
  --col-focus: var(--col-primary);
  --col-outline: lch(from var(--color-neutral) l c h / 0.3);
  --sh-focus: 0.25rem;
  --col-primary-m2: lch(from var(--col-primary) calc(l - 30) calc(c * 0.3) h);
  --col-primary-m1: lch(from var(--col-primary) calc(l - 15) calc(c * 0.8) h);
  --col-primary: lch(from var(--color-primary) 35 c h);
  --col-primary-p1: lch(from var(--col-primary) calc(l + 15) c h);
  --col-primary-p2: lch(from var(--col-primary) calc(l + 30) c h);
  --col-primary-p3: lch(from var(--col-primary) calc(l + 45) calc(c * 0.8) h);
  --col-primary-p4: lch(from var(--col-primary) calc(l + 60) calc(c * 0.3) h);
  --col-secondary-m2: lch(from var(--col-secondary) calc(l - 30) calc(c * 0.3) h);
  --col-secondary-m1: lch(from var(--col-secondary) calc(l - 15) calc(c * 0.8) h);
  --col-secondary: lch(from var(--color-secondary) 35 c h);
  --col-secondary-p1: lch(from var(--col-secondary) calc(l + 15) c h);
  --col-secondary-p2: lch(from var(--col-secondary) calc(l + 30) c h);
  --col-secondary-p3: lch(from var(--col-secondary) calc(l + 45) calc(c * 0.8) h);
  --col-secondary-p4: lch(from var(--col-secondary) calc(l + 60) calc(c * 0.3) h);
  --col-accent-m2: lch(from var(--col-accent) calc(l - 30) calc(c * 0.3) h);
  --col-accent-m1: lch(from var(--col-accent) calc(l - 15) calc(c * 0.8) h);
  --col-accent: lch(from var(--color-accent) 35 c h);
  --col-accent-p1: lch(from var(--col-accent) calc(l + 15) c h);
  --col-accent-p2: lch(from var(--col-accent) calc(l + 30) c h);
  --col-accent-p3: lch(from var(--col-accent) calc(l + 45) calc(c * 0.8) h);
  --col-accent-p4: lch(from var(--col-accent) calc(l + 60) calc(c * 0.3) h);
  --col-neutral-m2: lch(from var(--color-neutral) calc(l - 30) calc(c * 0.3) h);
  --col-neutral-m1: lch(from var(--color-neutral) calc(l - 15) calc(c * 0.8) h);
  --col-neutral: lch(from var(--color-neutral) l c h);
  --col-neutral-p1: lch(from var(--color-neutral) calc(l + 15) c h);
  --col-neutral-p2: lch(from var(--color-neutral) calc(l + 30) c h);
  --col-neutral-p3: lch(from var(--color-neutral) calc(l + 45) calc(c * 0.8) h);
  --col-neutral-p4: lch(from var(--color-neutral) calc(l + 60) calc(c * 0.3) h);
  --col-error-m2: lch(from var(--color-error) calc(l - 30) calc(c * 0.3) h);
  --col-error-m1: lch(from var(--color-error) calc(l - 15) calc(c * 0.8) h);
  --col-error: lch(from var(--color-error) 35 c h);
  --col-error-p1: lch(from var(--color-error) calc(l + 15) c h);
  --col-error-p2: lch(from var(--color-error) calc(l + 30) c h);
  --col-error-p3: lch(from var(--color-error) calc(l + 45) calc(c * 0.8) h);
  --col-error-p4: lch(from var(--color-error) calc(l + 60) calc(c * 0.3) h);
  --col-warning-m2: lch(from var(--color-warning) calc(l - 30) calc(c * 0.3) h);
  --col-warning-m1: lch(from var(--color-warning) calc(l - 15) calc(c * 0.8) h);
  --col-warning: lch(from var(--color-warning) 35 c h);
  --col-warning-p1: lch(from var(--color-warning) calc(l + 15) c h);
  --col-warning-p2: lch(from var(--color-warning) calc(l + 30) c h);
  --col-warning-p3: lch(from var(--color-warning) calc(l + 45) calc(c * 0.8) h);
  --col-warning-p4: lch(from var(--color-warning) calc(l + 60) calc(c * 0.3) h);
  --col-success-m2: lch(from var(--color-success) calc(l - 30) calc(c * 0.3) h);
  --col-success-m1: lch(from var(--color-success) calc(l - 15) calc(c * 0.8) h);
  --col-success: lch(from var(--color-success) 35 c h);
  --col-success-p1: lch(from var(--color-success) calc(l + 15) c h);
  --col-success-p2: lch(from var(--color-success) calc(l + 30) c h);
  --col-success-p3: lch(from var(--color-success) calc(l + 45) calc(c * 0.8) h);
  --col-success-p4: lch(from var(--color-success) calc(l + 60) calc(c * 0.3) h);
  --col-on-primary: lch(from var(--col-primary) calc(l + 60) calc(c * 0.3) h);
  --col-on-secondary: lch(from var(--col-secondary) calc(l + 60) calc(c * 0.3) h);
  --col-on-accent: lch(from var(--col-accent) calc(l + 60) calc(c * 0.3) h);
  --col-on-neutral: lch(from var(--color-neutral) calc(l + 60) calc(c * 0.3) h);
  --col-on-error: lch(from var(--color-error) calc(l + 60) c h);
  --col-on-warning: lch(from var(--color-warning) calc(l + 60) c h);
  --col-on-success: lch(from var(--color-success) calc(l + 60) c h);
  --col-em-primary: lch(from var(--col-primary) calc(l + 65) calc(c * 0.3) h);
  --col-em-secondary: lch(from var(--col-secondary) calc(l + 65) calc(c * 0.3) h);
  --col-em-accent: lch(from var(--col-accent) calc(l + 65) calc(c * 0.3) h);
  --col-em-neutral: lch(from var(--color-neutral) calc(l + 65) calc(c * 0.3) h);
  --col-em-error: lch(from var(--color-error) calc(l + 65) c h);
  --col-em-warning: lch(from var(--color-warning) calc(l + 65) c h);
  --col-em-success: lch(from var(--color-success) calc(l + 65) c h);
  --col-surface: lch(from var(--color-neutral) 92 calc(c * 0.3) h);
  --col-container-low: lch(from var(--color-neutral) 88 calc(c * 0.4) h);
  --col-container: lch(from var(--color-neutral) 83 calc(c * 0.5) h);
  --col-container-high: lch(from var(--color-neutral) 78 calc(c * 0.6) h);
  --col-container-primary: lch(from var(--color-primary) 90 calc(c * 0.5) h);
  --col-container-secondary: lch(from var(--color-secondary) 90 calc(c * 0.5) h);
  --col-container-accent: lch(from var(--color-accent) 90 calc(c * 0.5) h);
  --col-container-error: lch(from var(--color-error) 90 calc(c * 0.5) h);
  --col-container-warning: lch(from var(--color-warning) 90 calc(c * 0.5) h);
  --col-container-success: lch(from var(--color-success) 90 calc(c * 0.5) h);
  --col-on-surface: lch(from var(--color-neutral) 39 c h);
  --col-on-container-low: lch(from var(--color-neutral) 35 c h);
  --col-on-container: lch(from var(--color-neutral) 30 c h);
  --col-on-container-high: lch(from var(--color-neutral) 25 c h);
  --col-on-container-primary: lch(from var(--color-primary) 30 c h);
  --col-on-container-secondary: lch(from var(--color-secondary) 30 c h);
  --col-on-container-accent: lch(from var(--color-accent) 30 c h);
  --col-on-container-error: lch(from var(--color-error) 30 c h);
  --col-on-container-warning: lch(from var(--color-warning) 30 c h);
  --col-on-container-success: lch(from var(--color-success) 30 c h);
  --col-em-surface: lch(from var(--color-neutral) 29 c h);
  --col-em-container-low: lch(from var(--color-neutral) 25 c h);
  --col-em-container: lch(from var(--color-neutral) 20 c h);
  --col-em-container-high: lch(from var(--color-neutral) 15 c h);
  --col-em-container-primary: lch(from var(--color-primary) 20 c h);
  --col-em-container-secondary: lch(from var(--color-secondary) 20 c h);
  --col-em-container-accent: lch(from var(--color-accent) 20 c h);
  --col-em-container-error: lch(from var(--color-error) 20 c h);
  --col-em-container-warning: lch(from var(--color-warning) 20 c h);
  --col-em-container-success: lch(from var(--color-success) 20 c h);
}
body.dark {
  --color-primary: lch(68 60 250);
  --color-secondary: lch(from var(--color-primary) l calc(c / 2) h);
  --color-accent: lch(from var(--color-primary) l c calc(h + 180));
  --col-shadow: lch(0 0 0 / 0.3);
  --col-frost: lch(100 0 0 / 0.1);
  --col-outline: lch(from var(--color-neutral) calc(l + 30) c h / 0.3);
  --col-primary-m2: lch(from var(--col-primary) calc(l + 30) calc(c * 0.3) h);
  --col-primary-m1: lch(from var(--col-primary) calc(l + 15) calc(c * 0.8) h);
  --col-primary: lch(from var(--color-primary) 65 c h);
  --col-primary-p1: lch(from var(--col-primary) calc(l - 15) c h);
  --col-primary-p2: lch(from var(--col-primary) calc(l - 30) c h);
  --col-primary-p3: lch(from var(--col-primary) calc(l - 45) calc(c * 0.8) h);
  --col-primary-p4: lch(from var(--col-primary) calc(l - 60) calc(c * 0.3) h);
  --col-secondary-m2: lch(from var(--col-secondary) calc(l + 30) calc(c * 0.3) h);
  --col-secondary-m1: lch(from var(--col-secondary) calc(l + 15) calc(c * 0.8) h);
  --col-secondary: lch(from var(--color-secondary) 65 c h);
  --col-secondary-p1: lch(from var(--col-secondary) calc(l - 15) c h);
  --col-secondary-p2: lch(from var(--col-secondary) calc(l - 30) c h);
  --col-secondary-p3: lch(from var(--col-secondary) calc(l - 45) calc(c * 0.8) h);
  --col-secondary-p4: lch(from var(--col-secondary) calc(l - 60) calc(c * 0.3) h);
  --col-accent-m2: lch(from var(--col-accent) calc(l + 30) calc(c * 0.3) h);
  --col-accent-m1: lch(from var(--col-accent) calc(l + 15) calc(c * 0.8) h);
  --col-accent: lch(from var(--color-accent) 65 c h);
  --col-accent-p1: lch(from var(--col-accent) calc(l - 15) c h);
  --col-accent-p2: lch(from var(--col-accent) calc(l - 30) c h);
  --col-accent-p3: lch(from var(--col-accent) calc(l - 45) calc(c * 0.8) h);
  --col-accent-p4: lch(from var(--col-accent) calc(l - 60) calc(c * 0.3) h);
  --col-neutral-m2: lch(from var(--color-neutral) calc(l + 30) calc(c * 0.3) h);
  --col-neutral-m1: lch(from var(--color-neutral) calc(l + 15) calc(c * 0.8) h);
  --col-neutral-p1: lch(from var(--color-neutral) calc(l - 15) c h);
  --col-neutral-p2: lch(from var(--color-neutral) calc(l - 30) c h);
  --col-neutral-p3: lch(from var(--color-neutral) calc(l - 45) calc(c * 0.8) h);
  --col-neutral-p4: lch(from var(--color-neutral) calc(l - 60) calc(c * 0.3) h);
  --col-error: lch(from var(--color-error) 65 c h);
  --col-error-m2: lch(from var(--col-error) calc(l + 30) calc(c * 0.3) h);
  --col-error-m1: lch(from var(--col-error) calc(l + 15) calc(c * 0.8) h);
  --col-error-p1: lch(from var(--col-error) calc(l - 15) c h);
  --col-error-p2: lch(from var(--col-error) calc(l - 30) c h);
  --col-error-p3: lch(from var(--col-error) calc(l - 45) calc(c * 0.8) h);
  --col-error-p4: lch(from var(--col-error) calc(l - 60) calc(c * 0.3) h);
  --col-warning: lch(from var(--color-warning) 65 c h);
  --col-warning-m2: lch(from var(--col-warning) calc(l + 30) calc(c * 0.3) h);
  --col-warning-m1: lch(from var(--col-warning) calc(l + 15) calc(c * 0.8) h);
  --col-warning-p1: lch(from var(--col-warning) calc(l - 15) c h);
  --col-warning-p2: lch(from var(--col-warning) calc(l - 30) c h);
  --col-warning-p3: lch(from var(--col-warning) calc(l - 45) calc(c * 0.8) h);
  --col-warning-p4: lch(from var(--col-warning) calc(l - 60) calc(c * 0.3) h);
  --col-success: lch(from var(--color-success) 65 c h);
  --col-success-m2: lch(from var(--col-success) calc(l + 30) calc(c * 0.3) h);
  --col-success-m1: lch(from var(--col-success) calc(l + 15) calc(c * 0.8) h);
  --col-success-p1: lch(from var(--col-success) calc(l - 15) c h);
  --col-success-p2: lch(from var(--col-success) calc(l - 30) c h);
  --col-success-p3: lch(from var(--col-success) calc(l - 45) calc(c * 0.8) h);
  --col-success-p4: lch(from var(--col-success) calc(l - 60) calc(c * 0.3) h);
  --col-on-primary: lch(from var(--col-primary) calc(l - 60) calc(c * 0.3) h);
  --col-on-secondary: lch(from var(--col-secondary) calc(l - 60) calc(c * 0.3) h);
  --col-on-accent: lch(from var(--col-accent) calc(l - 60) calc(c * 0.3) h);
  --col-on-neutral: lch(from var(--color-neutral) calc(l - 60) calc(c * 0.3) h);
  --col-on-error: lch(from var(--color-error) calc(l - 60) c h);
  --col-on-warning: lch(from var(--color-warning) calc(l - 60) c h);
  --col-on-success: lch(from var(--color-success) calc(l - 60) c h);
  --col-em-primary: lch(from var(--col-primary) calc(l - 65) calc(c * 0.3) h);
  --col-em-secondary: lch(from var(--col-secondary) calc(l - 65) calc(c * 0.3) h);
  --col-em-accent: lch(from var(--col-accent) calc(l - 65) calc(c * 0.3) h);
  --col-em-neutral: lch(from var(--color-neutral) calc(l - 65) calc(c * 0.3) h);
  --col-em-error: lch(from var(--color-error) calc(l - 65) c h);
  --col-em-warning: lch(from var(--color-warning) calc(l - 65) c h);
  --col-em-success: lch(from var(--color-success) calc(l - 65) c h);
  --col-surface: lch(from var(--color-neutral) 4 calc(c * 0.2) h);
  --col-container-low: lch(from var(--color-neutral) 11 calc(c * 0.3) h);
  --col-container: lch(from var(--color-neutral) 17 calc(c * 0.5) h);
  --col-container-high: lch(from var(--color-neutral) 23 calc(c * 0.6) h);
  --col-container-primary: lch(from var(--color-primary) 17 calc(c * 0.5) h);
  --col-container-secondary: lch(from var(--color-secondary) 17 calc(c * 0.5) h);
  --col-container-accent: lch(from var(--color-accent) 17 calc(c * 0.5) h);
  --col-container-error: lch(from var(--color-error) 17 calc(c * 0.5) h);
  --col-container-warning: lch(from var(--color-warning) 17 calc(c * 0.5) h);
  --col-container-success: lch(from var(--color-success) 17 calc(c * 0.5) h);
  --col-on-surface: lch(from var(--color-neutral) 61 c h);
  --col-on-container-low: lch(from var(--color-neutral) 65 c h);
  --col-on-container: lch(from var(--color-neutral) 70 c h);
  --col-on-container-high: lch(from var(--color-neutral) 75 c h);
  --col-on-container-primary: lch(from var(--color-primary) 70 c h);
  --col-on-container-secondary: lch(from var(--color-secondary) 70 c h);
  --col-on-container-accent: lch(from var(--color-accent) 70 c h);
  --col-on-container-error: lch(from var(--color-error) 70 c h);
  --col-on-container-warning: lch(from var(--color-warning) 70 c h);
  --col-on-container-success: lch(from var(--color-success) 70 c h);
  --col-em-surface: lch(from var(--color-neutral) 71 c h);
  --col-em-container-low: lch(from var(--color-neutral) 75 c h);
  --col-em-container: lch(from var(--color-neutral) 80 c h);
  --col-em-container-high: lch(from var(--color-neutral) 85 c h);
  --col-em-container-primary: lch(from var(--color-primary) 80 c h);
  --col-em-container-secondary: lch(from var(--color-secondary) 80 c h);
  --col-em-container-accent: lch(from var(--color-accent) 80 c h);
  --col-em-container-error: lch(from var(--color-error) 80 c h);
  --col-em-container-warning: lch(from var(--color-warning) 80 c h);
  --col-em-container-success: lch(from var(--color-success) 80 c h);
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-slide-left {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fade-slide-right {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes scale-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}
@keyframes scale-spring {
  from {
    opacity: 0;
    scale: 0.9;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-in-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-out-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-out-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-out-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}
@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes hover-lift {
  from {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
  }
  to {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
}
.animate-fade-in {
  animation: fade-in var(--anim-page-enter) both;
}
.animate-fade-slide-up {
  animation: fade-slide-up var(--anim-page-enter) both;
}
.animate-fade-slide-down {
  animation: fade-slide-down var(--anim-page-enter) both;
}
.animate-fade-slide-left {
  animation: fade-slide-left var(--anim-page-enter) both;
}
.animate-fade-slide-right {
  animation: fade-slide-right var(--anim-page-enter) both;
}
.animate-scale-in {
  animation: scale-in var(--anim-page-enter) both;
}
.animate-scale-spring {
  animation: scale-spring var(--anim-modal) both;
}
.animate-zoom-in {
  animation: zoom-in var(--anim-page-enter) both;
}
.animate-fade-out {
  animation: fade-out var(--duration-fast) var(--ease-in) both;
}
.animate-scale-out {
  animation: scale-out var(--duration-fast) var(--ease-in) both;
}
.animate-slide-in-up {
  animation: slide-in-up var(--anim-page-enter) both;
}
.animate-slide-in-down {
  animation: slide-in-down var(--anim-page-enter) both;
}
.animate-slide-in-left {
  animation: slide-in-left var(--anim-page-enter) both;
}
.animate-slide-in-right {
  animation: slide-in-right var(--anim-page-enter) both;
}
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}
.animate-bounce {
  animation: bounce 1s infinite;
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-shake {
  animation: shake 0.5s ease-in-out;
}
.animate-wiggle {
  animation: wiggle 0.3s ease-in-out;
}
.stagger-1 {
  animation-delay: calc(var(--anim-stagger-base) * 1);
}
.stagger-2 {
  animation-delay: calc(var(--anim-stagger-base) * 2);
}
.stagger-3 {
  animation-delay: calc(var(--anim-stagger-base) * 3);
}
.stagger-4 {
  animation-delay: calc(var(--anim-stagger-base) * 4);
}
.stagger-5 {
  animation-delay: calc(var(--anim-stagger-base) * 5);
}
.stagger-6 {
  animation-delay: calc(var(--anim-stagger-base) * 6);
}
.stagger-7 {
  animation-delay: calc(var(--anim-stagger-base) * 7);
}
.stagger-8 {
  animation-delay: calc(var(--anim-stagger-base) * 8);
}
.transition-none {
  transition: none;
}
.transition-all {
  transition: all var(--duration-normal) var(--ease-default);
}
.transition-colors {
  transition:
    color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}
.transition-opacity {
  transition: opacity var(--duration-fast) var(--ease-default);
}
.transition-transform {
  transition: transform var(--duration-fast) var(--ease-default);
}
.transition-shadow {
  transition: box-shadow var(--duration-fast) var(--ease-default);
}
.hover-lift {
  transition: transform var(--anim-hover), box-shadow var(--anim-hover);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hover-scale {
  transition: transform var(--anim-hover);
}
.hover-scale:hover {
  transform: scale(1.02);
}
.hover-glow {
  transition: box-shadow var(--anim-hover);
}
.hover-glow:hover {
  box-shadow: 0 0 20px lch(from var(--col-primary) l c h / 0.3);
}
.focus-ring {
  transition: outline-offset var(--duration-fast) var(--ease-out);
}
.focus-ring:focus-visible {
  outline: 2px solid var(--col-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.w-auto {
  width: auto !important;
}
.w-100 {
  width: 100% !important;
}
.w-50 {
  width: 50% !important;
}
.w-min-0 {
  min-width: 0 !important;
}
.w-min-100 {
  min-width: 100% !important;
}
.w-max-100 {
  max-width: 100% !important;
}
.h-auto {
  height: auto !important;
}
.h-100 {
  height: 100% !important;
}
.h-min-0 {
  min-height: 0 !important;
}
.h-min-100 {
  min-height: 100% !important;
}
.h-max-100 {
  max-height: 100% !important;
}
.d-flex {
  display: flex !important;
}
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}
.float-none {
  float: none !important;
}
.pos-relative {
  position: relative !important;
}
.pos-absolute {
  position: absolute !important;
}
.pos-fixed {
  position: fixed !important;
}
.pos-sticky {
  position: sticky !important;
}
.top-0 {
  top: 0 !important;
}
.top-50 {
  top: 50% !important;
}
.top-100 {
  top: 100% !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.bottom-50 {
  bottom: 50% !important;
}
.bottom-100 {
  bottom: 100% !important;
}
.left-0 {
  left: 0 !important;
}
.left-50 {
  left: 50% !important;
}
.left-100 {
  left: 100% !important;
}
.right-0 {
  right: 0 !important;
}
.right-50 {
  right: 50% !important;
}
.right-100 {
  right: 100% !important;
}
.overflow-visible {
  overflow: visible !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-scroll {
  overflow: scroll !important;
}
.overflow-x-hidden {
  overflow-x: hidden !important;
}
.overflow-y-hidden {
  overflow-y: hidden !important;
}
.overflow-x-scroll {
  overflow-x: scroll !important;
}
.overflow-y-scroll {
  overflow-y: scroll !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.scroll-smooth {
  scroll-behavior: smooth !important;
}
.cursor-default {
  cursor: default !important;
}
.cursor-pointer {
  cursor: pointer !important;
}
.cursor-text {
  cursor: text !important;
}
.object-fit-cover {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}
.object-fit-contain {
  -o-object-fit: contain !important;
  object-fit: contain !important;
}
.m-auto {
  margin: auto !important;
}
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
.m-3 {
  margin: 1rem !important;
}
.m-4 {
  margin: 2rem !important;
}
.m-5 {
  margin: 4rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}
.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}
.mx-4 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}
.mx-5 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
.my-5 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.ms-auto {
  margin-left: auto !important;
}
.ms-1 {
  margin-left: 0.25rem !important;
}
.ms-2 {
  margin-left: 0.5rem !important;
}
.ms-3 {
  margin-left: 1rem !important;
}
.ms-4 {
  margin-left: 2rem !important;
}
.ms-5 {
  margin-left: 4rem !important;
}
.me-auto {
  margin-right: auto !important;
}
.me-1 {
  margin-right: 0.25rem !important;
}
.me-2 {
  margin-right: 0.5rem !important;
}
.me-3 {
  margin-right: 1rem !important;
}
.me-4 {
  margin-right: 2rem !important;
}
.me-5 {
  margin-right: 4rem !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 2rem !important;
}
.mt-5 {
  margin-top: 4rem !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 2rem !important;
}
.mb-5 {
  margin-bottom: 4rem !important;
}
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-3 {
  padding: 1rem !important;
}
.p-4 {
  padding: 2rem !important;
}
.p-5 {
  padding: 4rem !important;
}
.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-4 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.px-5 {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.py-5 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.ps-1 {
  padding-left: 0.25rem !important;
}
.ps-2 {
  padding-left: 0.5rem !important;
}
.ps-3 {
  padding-left: 1rem !important;
}
.ps-4 {
  padding-left: 2rem !important;
}
.ps-5 {
  padding-left: 4rem !important;
}
.pe-1 {
  padding-right: 0.25rem !important;
}
.pe-2 {
  padding-right: 0.5rem !important;
}
.pe-3 {
  padding-right: 1rem !important;
}
.pe-4 {
  padding-right: 2rem !important;
}
.pe-5 {
  padding-right: 4rem !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 2rem !important;
}
.pt-5 {
  padding-top: 4rem !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 2rem !important;
}
.pb-5 {
  padding-bottom: 4rem !important;
}
.border-on {
  border-color: var(--col-on) !important;
}
.border-em {
  border-color: var(--col-em) !important;
}
.border-dashed {
  border-style: dashed !important;
}
.border-radius-0 {
  border-radius: 0 !important;
}
.border-radius-sm {
  border-radius: var(--border-radius-sm) !important;
}
.border-radius-lg {
  border-radius: var(--border-radius-lg) !important;
}
.border-round {
  border-radius: 50% !important;
}
.border-0 {
  border: 0 !important;
}
.border-1 {
  border: 0.5rem;
}
.border-2 {
  border: 1rem;
}
.border-3 {
  border: 2rem;
}
.border-4 {
  border: 4rem;
}
.border-end-0 {
  border-right: 0 !important;
}
.border-end-1 {
  border-right: 1px !important;
}
.border-end-2 {
  border-right: 2px !important;
}
.border-start-0 {
  border-left: 0 !important;
}
.border-start-1 {
  border-left: 1px !important;
}
.border-start-2 {
  border-left: 2px !important;
}
.text-emph {
  color: var(--col-em) !important;
}
.text-disabled {
  color: lch(from var(--col-on) l c h / var(--op-disabled)) !important;
}
.text-primary {
  color: var(--col-primary) !important;
}
.text-secondary {
  color: var(--col-secondary) !important;
}
.text-accent {
  color: var(--col-accent) !important;
}
.text-success {
  color: var(--col-success) !important;
}
.text-em-success {
  color: var(--col-em-success) !important;
}
.text-warning {
  color: var(--col-warning) !important;
}
.text-error {
  color: var(--col-error) !important;
}
.bg {
  color: var(--col-on) !important;
  background-color: var(--col-bg) !important;
}
.bg-low {
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
}
.bg-mid {
  --col-bg: var(--col-container);
  --col-on: var(--col-on-container);
  --col-em: var(--col-em-container);
}
.bg-high {
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
}
.bg-primary {
  --col-bg: var(--col-primary);
  --col-on: var(--col-on-primary);
  --col-em: var(--col-em-primary);
}
.bg-secondary {
  --col-bg: var(--col-secondary);
  --col-on: var(--col-on-secondary);
  --col-em: var(--col-em-secondary);
}
.bg-accent {
  --col-bg: var(--col-accent);
  --col-on: var(--col-on-accent);
  --col-em: var(--col-em-accent);
}
.bg-neutral {
  --col-bg: var(--col-neutral);
  --col-on: var(--col-on-neutral);
  --col-em: var(--col-em-neutral);
}
.bg-success {
  --col-bg: var(--col-success);
  --col-on: var(--col-on-success);
  --col-em: var(--col-em-success);
}
.bg-warning {
  --col-bg: var(--col-warning);
  --col-on: var(--col-on-warning);
  --col-em: var(--col-em-warning);
}
.bg-error {
  --col-bg: var(--col-error);
  --col-on: var(--col-on-error);
  --col-em: var(--col-em-error);
}
.bg-container-primary {
  --col-bg: var(--col-container-primary);
  --col-on: var(--col-on-container-primary);
  --col-em: var(--col-em-container-primary);
}
.bg-container-secondary {
  --col-bg: var(--col-container-secondary);
  --col-on: var(--col-on-container-secondary);
  --col-em: var(--col-em-container-secondary);
}
.bg-container-accent {
  --col-bg: var(--col-container-accent);
  --col-on: var(--col-on-container-accent);
  --col-em: var(--col-em-container-accent);
}
.bg-container-success {
  --col-bg: var(--col-container-success);
  --col-on: var(--col-on-container-success);
  --col-em: var(--col-em-container-success);
}
.bg-container-warning {
  --col-bg: var(--col-container-warning);
  --col-on: var(--col-on-container-warning);
  --col-em: var(--col-em-container-warning);
}
.bg-container-error {
  --col-bg: var(--col-container-error);
  --col-on: var(--col-on-container-error);
  --col-em: var(--col-em-container-error);
}
.bg-shadow {
  background-color: #00000080 !important;
  backdrop-filter: blur(var(--blur-radius)) !important;
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-justify {
  text-align: justify !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}
.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.text-wrap {
  white-space: normal !important;
}
.text-nowrap {
  white-space: nowrap !important;
}
.text-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.text-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.text-clamp-4 {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.font-light {
  font-weight: 300 !important;
}
.font-normal {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-bold {
  font-weight: 700 !important;
}
.text-xs {
  font-size: 0.75rem !important;
}
.text-sm {
  font-size: 0.875rem !important;
}
.text-base {
  font-size: 1rem !important;
}
.text-lg {
  font-size: 1.125rem !important;
}
.text-xl {
  font-size: 1.25rem !important;
}
.text-2xl {
  font-size: 1.5rem !important;
}
.text-3xl {
  font-size: 1.875rem !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-fill {
  flex: 1 1 0 !important;
}
.flex-order-start {
  order: -1 !important;
}
.flex-order-end {
  order: 99 !important;
}
.f-none {
  flex: none !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.justify-content-evenly {
  justify-content: space-evenly !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.align-items-end {
  align-items: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-baseline {
  align-items: baseline !important;
}
.align-items-stretch {
  align-items: stretch !important;
}
.align-self-start {
  align-self: flex-start !important;
}
.align-self-end {
  align-self: flex-end !important;
}
.align-self-center {
  align-self: center !important;
}
.align-self-baseline {
  align-self: baseline !important;
}
.align-self-stretch {
  align-self: stretch !important;
}
.align-content-start {
  align-content: flex-start !important;
}
.align-content-end {
  align-content: flex-end !important;
}
.align-content-center {
  align-content: center !important;
}
.align-content-between {
  align-content: space-between !important;
}
.align-content-around {
  align-content: space-around !important;
}
.align-content-stretch {
  align-content: stretch !important;
}
.g-0 {
  gap: 0 !important;
  --gap: 0 !important;
}
.g-1 {
  gap: 0.25rem !important;
  --gap: 0.25rem !important;
}
.g-2 {
  gap: 0.5rem !important;
  --gap: 0.5rem !important;
}
.g-3 {
  gap: 1rem !important;
  --gap: 1rem !important;
}
.g-4 {
  gap: 2rem !important;
  --gap: 2rem !important;
}
.g-5 {
  gap: 4rem !important;
  --gap: 4rem !important;
}
.gx-0 {
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
}
.gx-1 {
  -moz-column-gap: 0.25rem !important;
  column-gap: 0.25rem !important;
}
.gx-2 {
  -moz-column-gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}
.gx-3 {
  -moz-column-gap: 1rem !important;
  column-gap: 1rem !important;
}
.gx-4 {
  -moz-column-gap: 2rem !important;
  column-gap: 2rem !important;
}
.gx-5 {
  -moz-column-gap: 4rem !important;
  column-gap: 4rem !important;
}
.gy-0 {
  row-gap: 0 !important;
}
.gy-1 {
  row-gap: 0.25rem !important;
}
.gy-2 {
  row-gap: 0.5rem !important;
}
.gy-3 {
  row-gap: 1rem !important;
}
.gy-4 {
  row-gap: 2rem !important;
}
.gy-5 {
  row-gap: 4rem !important;
}
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
.m-transition {
  transition: opacity 0.2s ease;
}
.m-transition.fade-out {
  opacity: 0;
}
.animate-rotate-cw {
  animation: rotate-cw 2s linear infinite;
}
@keyframes rotate-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.z-1 {
  z-index: 1 !important;
}
.z-2 {
  z-index: 2 !important;
}
.z-3 {
  z-index: 3 !important;
}
.z-4 {
  z-index: 4 !important;
}
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.opacity-100 {
  opacity: 1 !important;
}
.pointer-events-none {
  pointer-events: none !important;
}
.pointer-events-auto {
  pointer-events: auto !important;
}
.select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
.select-text {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}
.select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}
.aspect-square {
  aspect-ratio: 1 / 1 !important;
}
.aspect-video {
  aspect-ratio: 16 / 9 !important;
}
.aspect-4-3 {
  aspect-ratio: 4 / 3 !important;
}
.object-cover {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}
.object-contain {
  -o-object-fit: contain !important;
  object-fit: contain !important;
}
.object-fill {
  -o-object-fit: fill !important;
  object-fit: fill !important;
}
.object-none {
  -o-object-fit: none !important;
  object-fit: none !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
.shadow-none {
  box-shadow: none !important;
}
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
.ring-0 {
  box-shadow: 0 0 0 0 transparent !important;
}
.ring-1 {
  box-shadow: 0 0 0 1px var(--col-outline) !important;
}
.ring-2 {
  box-shadow: 0 0 0 2px var(--col-outline) !important;
}
.ring-primary {
  box-shadow: 0 0 0 2px var(--col-primary) !important;
}
.ring-focus {
  box-shadow: 0 0 0 var(--sh-focus) var(--col-focus) !important;
}
@media screen and (max-width: 767px) {
  .sm\:d-none {
    display: none !important;
  }
  .sm\:d-block {
    display: block !important;
  }
  .sm\:d-flex {
    display: flex !important;
  }
  .sm\:d-grid {
    display: grid !important;
  }
  .sm\:flex-column {
    flex-direction: column !important;
  }
  .sm\:flex-row {
    flex-direction: row !important;
  }
  .sm\:text-center {
    text-align: center !important;
  }
  .sm\:text-left {
    text-align: left !important;
  }
  .sm\:w-100 {
    width: 100% !important;
  }
  .sm\:w-auto {
    width: auto !important;
  }
  .sm\:p-0 {
    padding: 0 !important;
  }
  .sm\:p-1 {
    padding: 0.25rem !important;
  }
  .sm\:p-2 {
    padding: 0.5rem !important;
  }
  .sm\:p-3 {
    padding: 1rem !important;
  }
  .sm\:m-0 {
    margin: 0 !important;
  }
  .sm\:mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sm\:g-1 {
    gap: 0.25rem !important;
  }
  .sm\:g-2 {
    gap: 0.5rem !important;
  }
  .sm\:g-3 {
    gap: 1rem !important;
  }
}
@media screen and (min-width: 768px) {
  .md\:d-none {
    display: none !important;
  }
  .md\:d-block {
    display: block !important;
  }
  .md\:d-flex {
    display: flex !important;
  }
  .md\:d-grid {
    display: grid !important;
  }
  .md\:d-inline-flex {
    display: inline-flex !important;
  }
  .md\:flex-column {
    flex-direction: column !important;
  }
  .md\:flex-row {
    flex-direction: row !important;
  }
  .md\:text-center {
    text-align: center !important;
  }
  .md\:text-left {
    text-align: left !important;
  }
  .md\:text-right {
    text-align: right !important;
  }
  .md\:w-100 {
    width: 100% !important;
  }
  .md\:w-50 {
    width: 50% !important;
  }
  .md\:w-auto {
    width: auto !important;
  }
  .md\:p-0 {
    padding: 0 !important;
  }
  .md\:p-1 {
    padding: 0.25rem !important;
  }
  .md\:p-2 {
    padding: 0.5rem !important;
  }
  .md\:p-3 {
    padding: 1rem !important;
  }
  .md\:p-4 {
    padding: 2rem !important;
  }
  .md\:m-0 {
    margin: 0 !important;
  }
  .md\:mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .md\:g-1 {
    gap: 0.25rem !important;
  }
  .md\:g-2 {
    gap: 0.5rem !important;
  }
  .md\:g-3 {
    gap: 1rem !important;
  }
  .md\:g-4 {
    gap: 2rem !important;
  }
  .md\:justify-content-start {
    justify-content: flex-start !important;
  }
  .md\:justify-content-end {
    justify-content: flex-end !important;
  }
  .md\:justify-content-center {
    justify-content: center !important;
  }
  .md\:justify-content-between {
    justify-content: space-between !important;
  }
  .md\:align-items-start {
    align-items: flex-start !important;
  }
  .md\:align-items-center {
    align-items: center !important;
  }
  .md\:align-items-end {
    align-items: flex-end !important;
  }
}
@media screen and (min-width: 1200px) {
  .lg\:d-none {
    display: none !important;
  }
  .lg\:d-block {
    display: block !important;
  }
  .lg\:d-flex {
    display: flex !important;
  }
  .lg\:d-grid {
    display: grid !important;
  }
  .lg\:d-inline-flex {
    display: inline-flex !important;
  }
  .lg\:flex-column {
    flex-direction: column !important;
  }
  .lg\:flex-row {
    flex-direction: row !important;
  }
  .lg\:text-center {
    text-align: center !important;
  }
  .lg\:text-left {
    text-align: left !important;
  }
  .lg\:text-right {
    text-align: right !important;
  }
  .lg\:w-100 {
    width: 100% !important;
  }
  .lg\:w-50 {
    width: 50% !important;
  }
  .lg\:w-auto {
    width: auto !important;
  }
  .lg\:p-0 {
    padding: 0 !important;
  }
  .lg\:p-1 {
    padding: 0.25rem !important;
  }
  .lg\:p-2 {
    padding: 0.5rem !important;
  }
  .lg\:p-3 {
    padding: 1rem !important;
  }
  .lg\:p-4 {
    padding: 2rem !important;
  }
  .lg\:p-5 {
    padding: 4rem !important;
  }
  .lg\:m-0 {
    margin: 0 !important;
  }
  .lg\:mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .lg\:g-1 {
    gap: 0.25rem !important;
  }
  .lg\:g-2 {
    gap: 0.5rem !important;
  }
  .lg\:g-3 {
    gap: 1rem !important;
  }
  .lg\:g-4 {
    gap: 2rem !important;
  }
  .lg\:g-5 {
    gap: 4rem !important;
  }
  .lg\:justify-content-start {
    justify-content: flex-start !important;
  }
  .lg\:justify-content-end {
    justify-content: flex-end !important;
  }
  .lg\:justify-content-center {
    justify-content: center !important;
  }
  .lg\:justify-content-between {
    justify-content: space-between !important;
  }
  .lg\:align-items-start {
    align-items: flex-start !important;
  }
  .lg\:align-items-center {
    align-items: center !important;
  }
  .lg\:align-items-end {
    align-items: flex-end !important;
  }
}
.c-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  --gap: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  &.fluid {
    max-width: 100%;
  }
}
.c-container > .row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  position: relative;
  gap: 0 !important;
  margin: 0 calc(var(--gap) / -2);
  & > .col,
  & > [class^=col-],
  & > [class*=" col-"] {
    margin: 0 calc(var(--gap) / 2);
  }
  &:not(:last-child) {
    margin-bottom: var(--gap);
  }
}
.c-container > .row > .col {
  flex: 0 0 calc(100% - var(--gap));
  max-width: calc(100% - var(--gap));
}
.c-container > .row > .col-1 {
  flex: 0 0 calc(100% / 12 - var(--gap));
  max-width: calc(100% / 12 - var(--gap));
}
.c-container > .row > .col-2 {
  flex: 0 0 calc(200% / 12 - var(--gap));
  max-width: calc(200% / 12 - var(--gap));
}
.c-container > .row > .col-3 {
  flex: 0 0 calc(300% / 12 - var(--gap));
  max-width: calc(300% / 12 - var(--gap));
}
.c-container > .row > .col-4 {
  flex: 0 0 calc(400% / 12 - var(--gap));
  max-width: calc(400% / 12 - var(--gap));
}
.c-container > .row > .col-5 {
  flex: 0 0 calc(500% / 12 - var(--gap));
  max-width: calc(500% / 12 - var(--gap));
}
.c-container > .row > .col-6 {
  flex: 0 0 calc(600% / 12 - var(--gap));
  max-width: calc(600% / 12 - var(--gap));
}
.c-container > .row > .col-7 {
  flex: 0 0 calc(700% / 12 - var(--gap));
  max-width: calc(700% / 12 - var(--gap));
}
.c-container > .row > .col-8 {
  flex: 0 0 calc(800% / 12 - var(--gap));
  max-width: calc(800% / 12 - var(--gap));
}
.c-container > .row > .col-9 {
  flex: 0 0 calc(900% / 12 - var(--gap));
  max-width: calc(900% / 12 - var(--gap));
}
.c-container > .row > .col-10 {
  flex: 0 0 calc(1000% / 12 - var(--gap));
  max-width: calc(1000% / 12 - var(--gap));
}
.c-container > .row > .col-11 {
  flex: 0 0 calc(1100% / 12 - var(--gap));
  max-width: calc(1100% / 12 - var(--gap));
}
.c-container > .row > .col-12 {
  flex: 0 0 calc(1200% / 12 - var(--gap));
  max-width: calc(1200% / 12 - var(--gap));
}
@media screen and (min-width: 768px) {
  .c-container > .row {
    & > .col-md-1 {
      flex: 0 0 calc(100% / 12 - var(--gap));
      max-width: calc(100% / 12 - var(--gap));
    }
    & > .col-md-2 {
      flex: 0 0 calc(200% / 12 - var(--gap));
      max-width: calc(200% / 12 - var(--gap));
    }
    & > .col-md-3 {
      flex: 0 0 calc(300% / 12 - var(--gap));
      max-width: calc(300% / 12 - var(--gap));
    }
    & > .col-md-4 {
      flex: 0 0 calc(400% / 12 - var(--gap));
      max-width: calc(400% / 12 - var(--gap));
    }
    & > .col-md-5 {
      flex: 0 0 calc(500% / 12 - var(--gap));
      max-width: calc(500% / 12 - var(--gap));
    }
    & > .col-md-6 {
      flex: 0 0 calc(600% / 12 - var(--gap));
      max-width: calc(600% / 12 - var(--gap));
    }
    & > .col-md-7 {
      flex: 0 0 calc(700% / 12 - var(--gap));
      max-width: calc(700% / 12 - var(--gap));
    }
    & > .col-md-8 {
      flex: 0 0 calc(800% / 12 - var(--gap));
      max-width: calc(800% / 12 - var(--gap));
    }
    & > .col-md-9 {
      flex: 0 0 calc(900% / 12 - var(--gap));
      max-width: calc(900% / 12 - var(--gap));
    }
    & > .col-md-10 {
      flex: 0 0 calc(1000% / 12 - var(--gap));
      max-width: calc(1000% / 12 - var(--gap));
    }
    & > .col-md-11 {
      flex: 0 0 calc(1100% / 12 - var(--gap));
      max-width: calc(1100% / 12 - var(--gap));
    }
    & > .col-md-12 {
      flex: 0 0 calc(1200% / 12 - var(--gap));
      max-width: calc(1200% / 12 - var(--gap));
    }
  }
  .c-dialog {
    width: 768px;
  }
}
@media screen and (min-width: 1200px) {
  .c-container > .row {
    & > .col-lg-1 {
      flex: 0 0 calc(100% / 12 - var(--gap));
      max-width: calc(100% / 12 - var(--gap));
    }
    & > .col-lg-2 {
      flex: 0 0 calc(200% / 12 - var(--gap));
      max-width: calc(200% / 12 - var(--gap));
    }
    & > .col-lg-3 {
      flex: 0 0 calc(300% / 12 - var(--gap));
      max-width: calc(300% / 12 - var(--gap));
    }
    & > .col-lg-4 {
      flex: 0 0 calc(400% / 12 - var(--gap));
      max-width: calc(400% / 12 - var(--gap));
    }
    & > .col-lg-5 {
      flex: 0 0 calc(500% / 12 - var(--gap));
      max-width: calc(500% / 12 - var(--gap));
    }
    & > .col-lg-6 {
      flex: 0 0 calc(600% / 12 - var(--gap));
      max-width: calc(600% / 12 - var(--gap));
    }
    & > .col-lg-7 {
      flex: 0 0 calc(700% / 12 - var(--gap));
      max-width: calc(700% / 12 - var(--gap));
    }
    & > .col-lg-8 {
      flex: 0 0 calc(800% / 12 - var(--gap));
      max-width: calc(800% / 12 - var(--gap));
    }
    & > .col-lg-9 {
      flex: 0 0 calc(900% / 12 - var(--gap));
      max-width: calc(900% / 12 - var(--gap));
    }
    & > .col-lg-10 {
      flex: 0 0 calc(1000% / 12 - var(--gap));
      max-width: calc(1000% / 12 - var(--gap));
    }
    & > .col-lg-11 {
      flex: 0 0 calc(1100% / 12 - var(--gap));
      max-width: calc(1100% / 12 - var(--gap));
    }
    & > .col-lg-12 {
      flex: 0 0 calc(1200% / 12 - var(--gap));
      max-width: calc(1200% / 12 - var(--gap));
    }
  }
}
@media screen and (max-width: 767px) {
  .c-container > .row .sm-hide-dyn {
    transition: transform .2s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    &:not(.show, .hide-left, .hide-right) {
      display: none;
    }
    &.hide-left,
    &.hide-right {
      transition: transform .2s ease-in-out;
    }
    &.hide-left:not(.show) {
      transform: translateX(-100%);
    }
    &.hide-right:not(.show) {
      transform: translateX(100%);
    }
  }
  .c-dialog {
    width: 100%;
  }
  .sm-hide {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .c-container > .row .md-hide-dyn {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    &:not(.show, .hide-left, .hide-right) {
      display: none;
    }
    &.hide-left,
    &.hide-right {
      transition: transform .2s ease-in-out;
    }
    &.hide-left:not(.show) {
      transform: translateX(-100%);
    }
    &.hide-right:not(.show) {
      transform: translateX(100%);
    }
  }
  .md-hide {
    display: none !important;
  }
}
@media screen and (min-width: 1200px) {
  .c-container > .row .lg-hide-dyn {
    transition: transform .2s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    &:not(.show, .hide-left, .hide-right) {
      display: none;
    }
    &.hide-left:not(.show) {
      transform: translateX(-100%);
    }
    &.hide-right:not(.show) {
      transform: translateX(100%);
    }
  }
  .lg-hide {
    display: none !important;
  }
}
.c-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 1rem);
}
.c-stack.compact {
  --stack-gap: 0.5rem;
}
.c-stack.loose {
  --stack-gap: 2rem;
}
.c-stack.none {
  --stack-gap: 0;
}
.c-stack.recursive > * {
  --stack-gap: inherit;
}
.c-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 0.5rem);
  align-items: center;
}
.c-cluster.start {
  justify-content: flex-start;
}
.c-cluster.center {
  justify-content: center;
}
.c-cluster.end {
  justify-content: flex-end;
}
.c-cluster.between {
  justify-content: space-between;
}
.c-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--split-gap, 1rem);
}
.c-split > :last-child {
  margin-left: auto;
}
.c-split.nowrap {
  flex-wrap: nowrap;
}
.c-center {
  display: grid;
  place-items: center;
  min-height: var(--center-min-height, auto);
}
.c-center.viewport {
  --center-min-height: 100vh;
}
.c-center.intrinsic {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-center.text {
  text-align: center;
}
.c-sidebar-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap, 1rem);
}
.c-sidebar-layout > :first-child {
  flex-basis: var(--sidebar-target-width, 16rem);
  flex-grow: 1;
}
.c-sidebar-layout > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--content-min-width, 50%);
}
.c-sidebar-layout.right {
  flex-direction: row-reverse;
}
.c-grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
}
.c-grid.cols-1 {
  grid-template-columns: repeat(1, 1fr);
}
.c-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.c-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.c-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.c-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.c-grid.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
.c-grid.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr));
}
.c-grid.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
}
.c-grid > .span-2 {
  grid-column: span 2;
}
.c-grid > .span-3 {
  grid-column: span 3;
}
.c-grid > .span-4 {
  grid-column: span 4;
}
.c-grid > .span-full {
  grid-column: 1 / -1;
}
.c-grid > .row-span-2 {
  grid-row: span 2;
}
.c-grid > .row-span-3 {
  grid-row: span 3;
}
.c-cover {
  display: flex;
  flex-direction: column;
  min-height: var(--cover-height, 100vh);
  padding: var(--cover-padding, 1rem);
}
.c-cover > * {
  margin-top: 0;
  margin-bottom: 0;
}
.c-cover > :first-child:not(.centered) {
  margin-bottom: auto;
}
.c-cover > :last-child:not(.centered) {
  margin-top: auto;
}
.c-cover > .centered {
  margin-top: auto;
  margin-bottom: auto;
}
.c-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio, 16 / 9);
}
.c-aspect > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.c-aspect.square {
  --aspect-ratio: 1 / 1;
}
.c-aspect.video {
  --aspect-ratio: 16 / 9;
}
.c-aspect.portrait {
  --aspect-ratio: 3 / 4;
}
.c-aspect.wide {
  --aspect-ratio: 21 / 9;
}
.c-aspect.photo {
  --aspect-ratio: 4 / 3;
}
.c-aspect.contain > * {
  -o-object-fit: contain;
  object-fit: contain;
}
.c-aspect.fill > * {
  -o-object-fit: fill;
  object-fit: fill;
}
.c-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, 1rem);
}
.c-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}
.c-reel {
  display: flex;
  gap: var(--reel-gap, 1rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.c-reel::-webkit-scrollbar {
  display: none;
}
.c-reel > * {
  flex: 0 0 var(--reel-item-width, auto);
}
.c-reel.show-scrollbar {
  scrollbar-width: thin;
}
.c-reel.show-scrollbar::-webkit-scrollbar {
  display: block;
  height: 0.5rem;
}
.c-reel.snap {
  scroll-snap-type: x mandatory;
}
.c-reel.snap > * {
  scroll-snap-align: start;
}
.c-imposter {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
}
.c-imposter > * {
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
}
@media screen and (max-width: 767px) {
  .c-grid.cols-2,
  .c-grid.cols-3,
  .c-grid.cols-4,
  .c-grid.cols-5,
  .c-grid.cols-6 {
    grid-template-columns: 1fr;
  }
  .c-grid.sm\:cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-sidebar-layout > :last-child {
    min-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .c-grid.md\:cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .c-grid.md\:cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-grid.md\:cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .c-grid.lg\:cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .c-grid.lg\:cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .c-grid.lg\:cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .c-grid.lg\:cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
.c-avatar {
  --avatar-size: 2.5rem;
  --avatar-border-radius: 50%;
  --avatar-bg: var(--col-primary);
  --avatar-color: var(--col-on-primary);
  --avatar-font-size: calc(var(--avatar-size) / 2.5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-border-radius);
  background: var(--avatar-bg);
  color: var(--avatar-color);
  font-size: var(--avatar-font-size);
  font-weight: 600;
  line-height: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-shrink: 0;
  & img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    border-radius: inherit;
  }
}
.c-avatar.xs {
  --avatar-size: 1.5rem;
}
.c-avatar.sm {
  --avatar-size: 2rem;
}
.c-avatar.md {
  --avatar-size: 2.5rem;
}
.c-avatar.lg {
  --avatar-size: 3rem;
}
.c-avatar.xl {
  --avatar-size: 4rem;
}
.c-avatar.square {
  --avatar-border-radius: 0;
}
.c-avatar.rounded {
  --avatar-border-radius: 0.5rem;
}
.c-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  border: calc(var(--avatar-size) / 16) solid var(--col-surface);
  background: var(--col-neutral);
  &.online {
    background: var(--col-success);
  }
  &.offline {
    background: var(--col-neutral-m1);
  }
  &.busy {
    background: var(--col-error);
  }
  &.away {
    background: var(--col-warning);
  }
}
.c-avatar-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: var(--col-error);
  color: var(--col-on-error);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border: calc(2rem / 16) solid var(--col-surface);
}
.c-avatar.ring {
  box-shadow: 0 0 0 calc(2rem / 16) var(--col-primary);
}
.c-avatar.ring-secondary {
  box-shadow: 0 0 0 calc(2rem / 16) var(--col-secondary);
}
.c-avatar.ring-success {
  box-shadow: 0 0 0 calc(2rem / 16) var(--col-success);
}
.c-avatar-group {
  display: inline-flex;
  flex-direction: row;
  & .c-avatar {
    margin-left: calc(var(--avatar-size) / -4);
    border: calc(2rem / 16) solid var(--col-surface);
    transition: transform 0.2s, z-index 0s;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      transform: translateY(-0.25rem);
      z-index: 10;
    }
  }
  &.reverse {
    flex-direction: row-reverse;
    & .c-avatar {
      margin-left: 0;
      margin-right: calc(var(--avatar-size) / -4);
      &:first-child {
        margin-right: 0;
      }
    }
  }
}
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  min-width: 1.25rem;
  min-height: 1.25rem;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: var(--col-secondary);
  color: var(--col-on-secondary);
}
.c-badge.positioned {
  position: absolute;
  transform: translate(-50%, -50%);
}
.c-badge.tl {
  top: 0;
  left: 0;
}
.c-badge.tr {
  top: 0;
  left: 100%;
}
.c-badge.bl {
  top: 100%;
  left: 0;
}
.c-badge.br {
  top: 100%;
  left: 100%;
}
.c-badge.xs {
  font-size: 0.625rem;
  min-width: 1rem;
  min-height: 1rem;
  padding: 0.125rem 0.25rem;
}
.c-badge.sm {
  font-size: 0.6875rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  padding: 0.1875rem 0.375rem;
}
.c-badge.lg {
  font-size: 0.875rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0.375rem 0.75rem;
}
.c-badge.xl {
  font-size: 1rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.5rem 1rem;
}
.c-badge.primary {
  background-color: var(--col-primary);
  color: var(--col-on-primary);
}
.c-badge.secondary {
  background-color: var(--col-secondary);
  color: var(--col-on-secondary);
}
.c-badge.accent {
  background-color: var(--col-accent);
  color: var(--col-on-accent);
}
.c-badge.neutral {
  background-color: var(--col-neutral);
  color: var(--col-on-neutral);
}
.c-badge.error {
  background-color: var(--col-error);
  color: var(--col-on-error);
}
.c-badge.warning {
  background-color: var(--col-warning);
  color: var(--col-on-warning);
}
.c-badge.success {
  background-color: var(--col-success);
  color: var(--col-on-success);
}
.c-badge.container-primary {
  background-color: var(--col-container-primary);
  color: var(--col-on-container-primary);
}
.c-badge.container-secondary {
  background-color: var(--col-container-secondary);
  color: var(--col-on-container-secondary);
}
.c-badge.container-accent {
  background-color: var(--col-container-accent);
  color: var(--col-on-container-accent);
}
.c-badge.container-error {
  background-color: var(--col-container-error);
  color: var(--col-on-container-error);
}
.c-badge.container-warning {
  background-color: var(--col-container-warning);
  color: var(--col-on-container-warning);
}
.c-badge.container-success {
  background-color: var(--col-container-success);
  color: var(--col-on-container-success);
}
.c-badge.outline {
  background-color: transparent;
  border: 1px solid currentColor;
}
.c-badge.outline.primary {
  color: var(--col-primary);
}
.c-badge.outline.secondary {
  color: var(--col-secondary);
}
.c-badge.outline.accent {
  color: var(--col-accent);
}
.c-badge.outline.error {
  color: var(--col-error);
}
.c-badge.outline.warning {
  color: var(--col-warning);
}
.c-badge.outline.success {
  color: var(--col-success);
}
.c-badge.dot {
  width: 0.5rem;
  height: 0.5rem;
  min-width: 0.5rem;
  min-height: 0.5rem;
  padding: 0;
  font-size: 0;
}
.c-badge.dot.sm {
  width: 0.375rem;
  height: 0.375rem;
  min-width: 0.375rem;
  min-height: 0.375rem;
}
.c-badge.dot.lg {
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
}
.c-badge.dot.pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.2);
  }
}
.c-badge.dot:not(.positioned).pulse {
  animation: badge-pulse-inline 2s ease-in-out infinite;
}
@keyframes badge-pulse-inline {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}
.c-badge.square {
  border-radius: var(--border-radius-sm, 0.25rem);
}
.c-badge.rounded {
  border-radius: var(--border-radius-lg, 0.5rem);
}
.c-badge.with-icon {
  gap: 0.25rem;
}
.c-badge.with-icon > svg,
.c-badge.with-icon > img {
  width: 1em;
  height: 1em;
}
.c-hbox {
  display: flex;
  gap: var(--gap);
}
.c-vbox {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.c-hbox.wrap,
.c-vbox.wrap {
  flex-wrap: wrap;
}
.c-hbox > .fill,
.c-vbox > .fill {
  flex: 1;
}
.c-group {
  align-self: start;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  --gap: 0.5rem;
  gap: var(--gap);
}
.c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  border-radius: var(--radius-control);
  border: 0px;
  box-shadow: inset 0px 0px 1rem var(--col-frost);
  --btn-height: var(--size-md);
  height: var(--btn-height);
  padding: 0 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  --col-bg: var(--col-secondary);
  --col-on: var(--col-on-secondary);
  --col-em: var(--col-em-secondary);
  background-color: lch(from var(--col-bg) l c h / var(--op-button));
  color: var(--col-on);
  transition:
    color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  &:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: inset 0px 0px 1rem var(--col-frost), var(--shadow-md);
  }
  &:active:not([disabled]) {
    transform: translateY(0);
    box-shadow: inset 0px 0px 1rem var(--col-frost);
  }
  &.clicked {
    background-color: lch(from var(--col-on) l c h);
    color: var(--col-bg);
  }
  &.link {
    background: none;
    border-color: transparent;
    box-shadow: none;
    color: var(--col-secondary);
    &:hover:not([disabled]):not(.active) {
      transform: none;
      background: var(--col-container-low);
      box-shadow: none;
    }
    &.active {
      color: var(--col-primary);
      background: var(--col-container-primary);
    }
  }
  &.compact {
    --btn-height: var(--size-xs);
    font-size: 0.75rem;
    padding: 0 0.5rem;
  }
  &.small {
    --btn-height: var(--size-sm);
    font-size: 0.75rem;
    padding: 0 0.75rem;
  }
  &.large {
    --btn-height: var(--size-lg);
    font-size: 1.5rem;
    padding: 0 1.5rem;
  }
  &.float {
    position: fixed;
    bottom: 0;
    right: 0;
    border-radius: 3rem;
    height: auto;
    padding: 1rem;
    z-index: 10;
  }
  &.icon {
    aspect-ratio: 1;
    width: auto;
    padding: 0;
  }
  &.pill {
    border-radius: var(--radius-full);
  }
  &[disabled] {
    opacity: var(--op-disabled);
    cursor: not-allowed;
  }
  &:focus-visible {
    outline: none;
    box-shadow: inset 0px 0px 1rem var(--col-frost), 0px 0px 1rem var(--col-focus);
  }
  &.active {
    background: var(--col-container-secondary);
    color: var(--col-on-container-secondary);
  }
  &.primary {
    --col-bg: var(--col-primary);
    --col-on: var(--col-on-primary);
    --col-em: var(--col-em-primary);
  }
  &.primary.active {
    background: var(--col-container-primary);
    color: var(--col-on-container-primary);
  }
  &.container-primary {
    --col-bg: var(--col-container-primary);
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
  }
  &.container-primary.active {
    background: var(--col-primary);
    color: var(--col-on-primary);
  }
  &.secondary {
    --col-bg: var(--col-secondary);
    --col-on: var(--col-on-secondary);
    --col-em: var(--col-em-secondary);
  }
  &.secondary.active {
    background: var(--col-container-secondary);
    color: var(--col-on-container-secondary);
  }
  &.container-secondary {
    --col-bg: var(--col-container-secondary);
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
  }
  &.container-secondary.active {
    background: var(--col-secondary);
    color: var(--col-on-secondary);
  }
  &.accent {
    --col-bg: var(--col-accent);
    --col-on: var(--col-on-accent);
    --col-em: var(--col-em-accent);
  }
  &.accent.active {
    background: var(--col-container-accent);
    color: var(--col-on-container-accent);
  }
  &.container-accent {
    --col-bg: var(--col-container-accent);
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
  }
  &.container-accent.active {
    background: var(--col-accent);
    color: var(--col-on-accent);
  }
  &.error {
    background-color: var(--col-error);
    color: var(--col-on-error);
  }
  &.container-error {
    background-color: var(--col-container-error);
    color: var(--col-on-container-error);
  }
  &.warning {
    background-color: var(--col-warning);
    color: var(--col-on-warning);
  }
  &.container-warning {
    background-color: var(--col-container-warning);
    color: var(--col-on-container-warning);
  }
  &.success {
    background-color: var(--col-success);
    color: var(--col-on-success);
  }
  &.container-success {
    background-color: var(--col-container-success);
    color: var(--col-on-container-success);
  }
  .separator {
    align-self: stretch;
    margin: 0.25rem 0.5rem;
    border-right: 1px dashed var(--col-on);
    cursor: default;
  }
}
.c-link {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--col-em);
  transition: color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-out);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  &:hover:not([disabled]) {
    transform: scale(1.05);
  }
  &:active:not([disabled]) {
    transform: scale(0.98);
  }
  &.text {
    -webkit-text-decoration: dotted;
    text-decoration: dotted;
    text-decoration-line: underline;
  }
  &.primary {
    color: var(--col-primary);
  }
  &.secondary {
    color: var(--col-secondary);
  }
  &.accent {
    color: var(--col-accent);
  }
  &.error {
    color: var(--col-error);
  }
  &.warning {
    color: var(--col-warning);
  }
  &.success {
    color: var(--col-success);
  }
  &[disabled] {
    opacity: var(--op-disabled);
    cursor: not-allowed;
  }
  &:focus-visible {
    outline: none;
    box-shadow: inset 0px 0px 1rem var(--col-frost), 0px 0px var(--sh-focus) var(--col-focus);
  }
  &.clicked {
    color: var(--col-focus);
  }
}
.c-dropdown {
  position: relative;
  display: inline-block;
}
.c-dropdown > summary {
  display: flex;
  cursor: pointer;
  list-style: none;
}
.c-dropdown > summary::-webkit-details-marker {
  display: none;
}
details.c-dropdown:not([open]) > :last-child {
  display: none;
}
details.c-dropdown[open] > :last-child {
  display: block;
  position: absolute;
  left: 0;
  white-space: nowrap;
  z-index: var(--z-dropdown, 100);
  margin-top: 0.5rem;
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  backdrop-filter: blur(var(--blur-radius));
  color: var(--col-on);
  box-shadow: inset 0px 0px 1rem var(--col-shadow);
  animation: fade-slide-down var(--duration-fast) var(--ease-out) both;
  transform-origin: top center;
}
details.c-dropdown.low[open] > :last-child {
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
}
details.c-dropdown.mid[open] > :last-child {
  --col-bg: var(--col-container);
  --col-on: var(--col-on-container);
  --col-em: var(--col-em-container);
}
details.c-dropdown.high[open] > :last-child {
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
}
details.c-dropdown.primary[open] > :last-child {
  --col-bg: var(--col-container-primary);
  --col-on: var(--col-on-container-primary);
  --col-em: var(--col-em-container-primary);
}
details.c-dropdown.secondary[open] > :last-child {
  --col-bg: var(--col-container-secondary);
  --col-on: var(--col-on-container-secondary);
  --col-em: var(--col-em-container-secondary);
}
details.c-dropdown.accent[open] > :last-child {
  --col-bg: var(--col-container-accent);
  --col-on: var(--col-on-container-accent);
  --col-em: var(--col-em-container-accent);
}
details.c-dropdown.error[open] > :last-child {
  --col-bg: var(--col-container-error);
  --col-on: var(--col-on-container-error);
  --col-em: var(--col-em-container-error);
}
details.c-dropdown.warning[open] > :last-child {
  --col-bg: var(--col-container-warning);
  --col-on: var(--col-on-container-warning);
  --col-em: var(--col-em-container-warning);
}
details.c-dropdown.success[open] > :last-child {
  --col-bg: var(--col-container-success);
  --col-on: var(--col-on-container-success);
  --col-em: var(--col-em-container-success);
}
.c-dropdown.up[open] > :last-child {
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  animation: fade-slide-up var(--duration-fast) var(--ease-out) both;
  transform-origin: bottom center;
}
.c-dropdown.right[open] > :last-child {
  left: auto;
  right: 0;
}
.c-fieldset {
  border: 1px solid lch(from var(--col-secondary) l c h / var(--op-disabled));
  padding: var(--p-fieldset);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-fieldset > legend {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.c-input,
.c-select,
.c-input-group {
  border-radius: var(--radius-control);
  border: var(--border-w-sm) solid var(--col-secondary);
  background: var(--col-container);
  color: var(--col-on-container);
  min-height: 2.5rem;
  box-shadow: inset 0px 0px 1rem var(--col-frost);
  width: 100%;
}
.c-input,
.c-select {
  padding: 0.5rem 0.5rem;
}
.c-select > option {
  color: var(--col-on-surface);
  background: var(--col-surface);
}
.c-input:focus-visible,
.c-select:focus-visible {
  outline: none;
  box-shadow: inset 0px 0px 1rem var(--col-frost), 0px 0px var(--sh-focus) var(--col-focus);
}
input.c-input[type=color] {
  padding: 0.1rem;
  min-height: calc(1rem + 2 * 0.5rem);
}
textarea.c-input {
  resize: none;
}
textarea.c-input.resize {
  resize: vertical;
}
.c-input-group {
  display: flex;
  align-items: stretch;
  > * {
    margin: auto;
  }
  > .c-input {
    border: none;
  }
  > .c-dropdown > * > .c-input {
    border: none;
    background: none;
  }
}
.c-input-group:focus-within {
  box-shadow: inset 0px 0px 1rem var(--col-frost), 0px 0px var(--sh-focus) var(--col-focus);
}
.c-input-group > .c-input:focus-visible,
.c-input-group > .c-select:focus-visible {
  box-shadow: none;
}
.c-input-group > *,
.c-input-group > .c-dropdown > * > input {
  border-width: var(--border-w-sm);
  box-shadow: none;
}
.c-input-group > *:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.c-input-group > *:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.c-toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 1.25rem;
  width: 2.25rem;
  border-radius: 1rem;
  background: var(--col-bg);
  color: var(--col-on);
  cursor: pointer;
  display: inline-block;
  position: relative;
  --col-bg: var(--col-secondary);
  --col-on: var(--col-on-secondary);
  --col-em: var(--col-em-secondary);
  &.primary {
    --col-bg: var(--col-primary);
    --col-on: var(--col-on-primary);
    --col-em: var(--col-em-primary);
  }
  &.secondary {
    --col-bg: var(--col-secondary);
    --col-on: var(--col-on-secondary);
    --col-em: var(--col-em-secondary);
  }
  &.accent {
    --col-bg: var(--col-accent);
    --col-on: var(--col-on-accent);
    --col-em: var(--col-em-accent);
  }
  &.error {
    --col-bg: var(--col-error);
    --col-on: var(--col-on-error);
    --col-em: var(--col-em-error);
  }
  &.warning {
    --col-bg: var(--col-warning);
    --col-on: var(--col-on-warning);
    --col-em: var(--col-em-warning);
  }
  &.success {
    --col-bg: var(--col-success);
    --col-on: var(--col-on-success);
    --col-em: var(--col-em-success);
  }
}
.c-toggle:after {
  border-radius: 1rem;
  content: "";
  display: block;
  height: 1rem;
  width: 1rem;
  margin: 0.125rem;
  position: absolute;
  left: 0;
  background: var(--col-on);
  transition: all .2s ease-out;
}
.c-toggle:checked:after {
  left: 1rem;
  background: var(--col-em);
}
.c-settings-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  padding-bottom: 0.5rem;
}
.c-settings-field > span,
.c-settings-field > label {
  flex: 1 1 auto;
  min-width: 0;
}
.c-settings-field .c-input,
.c-settings-field .c-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  max-width: 200px;
}
.c-settings-field .c-toggle {
  flex: 0 0 auto;
}
.c-settings-field .c-input[type=password],
.c-settings-field .c-input[type=text] {
  max-width: 250px;
}
.c-settings-section {
  margin-bottom: 1.5rem;
}
.c-settings-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: lch(from var(--col-on) l c h / 0.6);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--border-w-sm) solid var(--col-outline);
}
.c-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(var(--blur-radius));
  z-index: var(--z-modal, 600);
}
.c-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in var(--duration-fast) var(--ease-out) both;
}
.c-modal.show > .c-dialog {
  animation: scale-spring var(--anim-modal) both;
}
.c-modal.closing {
  animation: fade-out var(--duration-fast) var(--ease-in) both;
}
.c-modal.closing > .c-dialog {
  animation: scale-out var(--duration-fast) var(--ease-in) both;
}
.c-modal > .c-dialog {
  position: relative;
  width: auto;
  max-width: 60rem;
}
.c-dialog {
  border: 0;
}
.c-nav {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--col-bg);
  color: var(--col-on);
  backdrop-filter: blur(var(--blur-radius));
  border-radius: var(--border-radius-lg);
  z-index: 9;
  margin: 0;
  padding: var(--p-nav);
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
  &.emph {
    box-shadow: inset 0px 0px 2rem var(--col-frost);
  }
  a {
    text-decoration: none;
  }
  &.low {
    --col-on: var(--col-on-container-low);
    --col-em: var(--col-em-container-low);
    --col-bg: var(--col-container-low);
  }
  &.mid {
    --col-on: var(--col-on-container);
    --col-em: var(--col-em-container);
    --col-bg: var(--col-container);
  }
  &.high {
    --col-on: var(--col-on-container-high);
    --col-em: var(--col-em-container-high);
    --col-bg: var(--col-container-high);
  }
  &.primary {
    --col-bg: var(--col-container-primary);
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
  }
  &.secondary {
    --col-bg: var(--col-container-secondary);
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
  }
  &.accent {
    --col-bg: var(--col-container-accent);
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
  }
  &.error {
    --col-bg: var(--col-container-error);
    --col-on: var(--col-on-container-error);
    --col-em: var(--col-em-container-error);
  }
  &.warning {
    --col-bg: var(--col-container-warning);
    --col-on: var(--col-on-container-warning);
    --col-em: var(--col-em-container-warning);
  }
  &.success {
    --col-bg: var(--col-container-success);
    --col-on: var(--col-on-container-success);
    --col-em: var(--col-em-container-success);
  }
}
.c-nav-group {
  display: flex;
  align-items: center;
  margin: 0;
  & li {
    display: flex;
  }
}
.c-nav.vertical,
.c-nav.flex-column,
.c-nav-group.vertical,
.c-nav-group.flex-column {
  flex-direction: column;
  align-items: stretch;
}
ul.c-nav {
  li {
    list-style: none;
    hr {
      margin: 0;
    }
  }
}
.c-nav-item,
.c-nav-link {
  display: flex;
  align-items: center;
  --gap: .5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  background: none;
  color: var(--col-on);
  padding: 0;
  gap: var(--gap);
  transition:
    color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-out);
  &:hover:not([disabled]) {
    color: var(--col-em);
  }
  &:active:not([disabled]) {
    transform: scale(0.98);
  }
  &[disabled] {
    opacity: var(--op-disabled);
    cursor: not-allowed;
  }
}
.c-nav > .c-nav-item,
.c-nav-group > .c-nav-item,
.c-nav > li > .c-nav-item,
.c-nav-group > li > .c-nav-item {
  margin: 0 var(--p-nav-item-x);
}
.c-nav.vertical > .c-nav-item,
.c-nav-group.vertical > .c-nav-item,
.c-nav.vertical > li > .c-nav-item,
.c-nav-group.vertical > li > .c-nav-item {
  margin: var(--p-nav-item-y) 0;
  width: 100%;
}
.c-nav-item.active,
.c-nav-link.active {
  color: var(--col-primary);
}
.c-nav-item:focus-visible,
.c-nav-link:focus-visible {
  outline: none;
  box-shadow: inset 0px 0px 1rem var(--col-frost), 0px 0px var(--sh-focus) var(--col-focus);
}
.c-nav-item.h-small,
.c-nav-link.h-small {
  width: 4rem;
  overflow: hidden;
}
.c-nav-link.vertical {
  flex-direction: column;
}
.c-panel {
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--blur-radius));
  border-radius: var(--border-radius-lg);
  padding: var(--p-panel);
  gap: var(--gap);
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  color: var(--col-on);
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
  &.emph {
    box-shadow: inset 0px 0px 2rem var(--col-frost);
  }
  &.interactive {
    cursor: pointer;
  }
  &.interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  &.interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
  &.primary {
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
    --col-bg: var(--col-container-primary);
  }
  &.secondary {
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
    --col-bg: var(--col-container-secondary);
  }
  &.accent {
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
    --col-bg: var(--col-container-accent);
  }
  &.low {
    --col-on: var(--col-on-container-low);
    --col-em: var(--col-em-container-low);
    --col-bg: var(--col-container-low);
  }
  &.mid {
    --col-on: var(--col-on-container);
    --col-em: var(--col-em-container);
    --col-bg: var(--col-container);
  }
  &.high {
    --col-on: var(--col-on-container-high);
    --col-em: var(--col-em-container-high);
    --col-bg: var(--col-container-high);
  }
  &.error {
    --col-on: var(--col-on-container-error);
    --col-em: var(--col-em-container-error);
    --col-bg: var(--col-container-error);
  }
  &.warning {
    --col-on: var(--col-on-container-warning);
    --col-em: var(--col-em-container-warning);
    --col-bg: var(--col-container-warning);
  }
  &.success {
    --col-on: var(--col-on-container-success);
    --col-em: var(--col-em-container-success);
    --col-bg: var(--col-container-success);
  }
  .body {
    flex: 1;
  }
}
.c-panel :where(.c-panel) {
  --col-bg: var(--col-container);
  --col-on: var(--col-on-container);
  --col-em: var(--col-em-container);
  box-shadow: var(--shadow-sm);
}
.c-panel .c-panel :where(.c-panel) {
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
  box-shadow: var(--shadow-md);
}
.c-panel.mid {
  box-shadow: var(--shadow-sm);
}
.c-panel.high {
  box-shadow: var(--shadow-md);
}
.c-panel.mid.emph {
  box-shadow: inset 0px 0px 2rem var(--col-frost), var(--shadow-sm);
}
.c-panel.high.emph {
  box-shadow: inset 0px 0px 2rem var(--col-frost), var(--shadow-md);
}
.c-card {
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(var(--blur-radius));
  border-radius: var(--border-radius-md);
  padding: var(--space-3);
  gap: var(--gap);
  position: relative;
  --col-bg: var(--col-container);
  --col-on: var(--col-on-container);
  --col-em: var(--col-em-container);
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  color: var(--col-on);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  &.interactive {
    cursor: pointer;
  }
  &.interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  &.interactive:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }
  &.interactive:focus-visible {
    outline: none;
    box-shadow: var(--shadow-sm), 0px 0px var(--sh-focus) var(--col-focus);
  }
  &.primary {
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
    --col-bg: var(--col-container-primary);
  }
  &.secondary {
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
    --col-bg: var(--col-container-secondary);
  }
  &.accent {
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
    --col-bg: var(--col-container-accent);
  }
  &.error {
    --col-on: var(--col-on-container-error);
    --col-em: var(--col-em-container-error);
    --col-bg: var(--col-container-error);
  }
  &.warning {
    --col-on: var(--col-on-container-warning);
    --col-em: var(--col-em-container-warning);
    --col-bg: var(--col-container-warning);
  }
  &.success {
    --col-on: var(--col-on-container-success);
    --col-em: var(--col-em-container-success);
    --col-bg: var(--col-container-success);
  }
  &.low {
    --col-on: var(--col-on-container-low);
    --col-em: var(--col-em-container-low);
    --col-bg: var(--col-container-low);
    box-shadow: none;
  }
  &.mid {
    --col-on: var(--col-on-container);
    --col-em: var(--col-em-container);
    --col-bg: var(--col-container);
    box-shadow: var(--shadow-sm);
  }
  &.high {
    --col-on: var(--col-on-container-high);
    --col-em: var(--col-em-container-high);
    --col-bg: var(--col-container-high);
    box-shadow: var(--shadow-md);
  }
}
.c-sidebar {
  --sidebar-width: 16rem;
  --sidebar-min-width: 12rem;
  --sidebar-max-width: 24rem;
  --sidebar-transition: transform 0.3s ease-in-out;
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  min-width: var(--sidebar-min-width);
  max-width: var(--sidebar-max-width);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar, 400);
  transition: var(--sidebar-transition);
  overflow: hidden;
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  backdrop-filter: blur(var(--blur-radius));
  color: var(--col-on);
  border-right: var(--border-w-lg) solid var(--col-outline);
  &.left {
    left: 0;
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }
  &.right {
    right: 0;
    border-right: none;
    border-left: var(--border-w-lg) solid var(--col-outline);
    transform: translateX(var(--sidebar-width));
  }
  &.open {
    transform: translateX(0);
  }
  &.pinned {
    transform: translateX(0);
  }
  &.low {
    --col-bg: var(--col-container-low);
    --col-on: var(--col-on-container-low);
    --col-em: var(--col-em-container-low);
  }
  &.mid {
    --col-bg: var(--col-container);
    --col-on: var(--col-on-container);
    --col-em: var(--col-em-container);
  }
  &.high {
    --col-bg: var(--col-container-high);
    --col-on: var(--col-on-container-high);
    --col-em: var(--col-em-container-high);
  }
  &.primary {
    --col-bg: var(--col-container-primary);
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
  }
  &.secondary {
    --col-bg: var(--col-container-secondary);
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
  }
  &.accent {
    --col-bg: var(--col-container-accent);
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
  }
  &.error {
    --col-bg: var(--col-container-error);
    --col-on: var(--col-on-container-error);
    --col-em: var(--col-em-container-error);
  }
  &.warning {
    --col-bg: var(--col-container-warning);
    --col-on: var(--col-on-container-warning);
    --col-em: var(--col-em-container-warning);
  }
  &.success {
    --col-bg: var(--col-container-success);
    --col-on: var(--col-on-container-success);
    --col-em: var(--col-em-container-success);
  }
}
.c-sidebar-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--p-panel);
}
.c-sidebar-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.25rem;
  cursor: ew-resize;
  background: transparent;
  transition: background 0.2s;
  z-index: 10;
  .c-sidebar.left & {
    right: 0;
  }
  .c-sidebar.right & {
    left: 0;
  }
  &:hover,
  &:active {
    background: var(--col-primary);
  }
}
.c-sidebar.resizing {
  transition: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  & .c-sidebar-resize-handle {
    background: var(--col-primary);
  }
}
.c-sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lch(from var(--col-on) l c h / 0.5);
  backdrop-filter: blur(2px);
  z-index: calc(var(--z-sidebar, 400) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  &.show {
    opacity: 1;
    pointer-events: auto;
  }
}
.c-sidebar-toggle {
  position: absolute;
  top: 1rem;
  background: var(--col-surface);
  border: var(--border-w-lg) solid var(--col-outline);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: calc(var(--z-sidebar, 400) + 1);
  transition: transform 0.2s;
  .c-sidebar.left & {
    right: -1rem;
  }
  .c-sidebar.right & {
    left: -1rem;
  }
  &:hover {
    background: var(--col-container);
  }
  .c-sidebar:not(.open) & {
    transform: rotate(180deg);
  }
}
@media (max-width: 767px) {
  .c-sidebar {
    position: fixed;
    &.pinned {
      position: fixed;
      transform: translateX(calc(-1 * var(--sidebar-width)));
      &.open {
        transform: translateX(0);
      }
    }
    &.right.pinned {
      transform: translateX(var(--sidebar-width));
      &.open {
        transform: translateX(0);
      }
    }
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .c-sidebar {
  }
}
@media (min-width: 1024px) {
  .c-sidebar.auto-pin {
    transform: translateX(0);
  }
}
.c-sidebar-header,
.c-sidebar-footer {
  padding: var(--p-panel);
  border-bottom: var(--border-w-lg) solid var(--col-outline);
  flex-shrink: 0;
}
.c-sidebar-footer {
  border-bottom: none;
  border-top: var(--border-w-lg) solid var(--col-outline);
}
.c-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  & .c-nav-item {
    width: 100%;
    text-align: left;
    margin-bottom: 0.25rem;
  }
}
.c-sidebar-section {
  margin-bottom: 1.5rem;
  &:last-child {
    margin-bottom: 0;
  }
}
.c-sidebar-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: lch(from var(--col-on) l c h / var(--op-disabled));
  padding: 0.5rem 0;
  margin: 0;
}
.c-sidebar.collapsed {
  --sidebar-width: 4rem;
  --sidebar-min-width: 4rem;
  & .c-sidebar-content {
    padding: 0.5rem;
  }
  & .c-sidebar-section-title,
  & .c-nav-item-text {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  & .c-nav-item {
    justify-content: center;
  }
}
.c-tabs {
  display: flex;
  align-items: center;
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  backdrop-filter: blur(var(--blur-radius));
  color: var(--col-on);
  border-radius: var(--border-radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
  &.low {
    --col-bg: var(--col-container-low);
    --col-on: var(--col-on-container-low);
    --col-em: var(--col-em-container-low);
  }
  &.mid {
    --col-bg: var(--col-container);
    --col-on: var(--col-on-container);
    --col-em: var(--col-em-container);
  }
  &.high {
    --col-bg: var(--col-container-high);
    --col-on: var(--col-on-container-high);
    --col-em: var(--col-em-container-high);
  }
  &.primary {
    --col-bg: var(--col-container-primary);
    --col-on: var(--col-on-container-primary);
    --col-em: var(--col-em-container-primary);
  }
  &.secondary {
    --col-bg: var(--col-container-secondary);
    --col-on: var(--col-on-container-secondary);
    --col-em: var(--col-em-container-secondary);
  }
  &.accent {
    --col-bg: var(--col-container-accent);
    --col-on: var(--col-on-container-accent);
    --col-em: var(--col-em-container-accent);
  }
  &.error {
    --col-bg: var(--col-container-error);
    --col-on: var(--col-on-container-error);
    --col-em: var(--col-em-container-error);
  }
  &.warning {
    --col-bg: var(--col-container-warning);
    --col-on: var(--col-on-container-warning);
    --col-em: var(--col-em-container-warning);
  }
  &.success {
    --col-bg: var(--col-container-success);
    --col-on: var(--col-on-container-success);
    --col-em: var(--col-em-container-success);
  }
}
.c-tab {
  border: none;
  border-bottom: var(--border-w-lg) solid transparent;
  background: none;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--col-on);
  transition: color 0.3s, border-color 0.3s;
  &:hover {
    color: var(--col-em);
  }
  &.active {
    color: var(--col-em);
    border-color: var(--col-em);
  }
}
.c-tag {
  display: flex;
  align-items: center;
  border-radius: var(--border-radius-lg);
  border: var(--border-w-sm) solid var(--col-secondary);
  box-shadow: inset 0px 0px 1rem var(--col-frost);
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: lch(from var(--col-secondary) l c h / var(--op-button));
  color: var(--col-on-secondary);
  transition: color 0.3s, background-color 0.3s;
  &.primary {
    background-color: var(--col-primary);
    color: var(--col-on-primary);
  }
  &.secondary {
    background-color: var(--col-secondary);
    color: var(--col-on-secondary);
  }
  &.accent {
    background-color: var(--col-accent);
    color: var(--col-on-accent);
  }
  &.error {
    background-color: var(--col-error);
    color: var(--col-on-error);
  }
  &.warning {
    background-color: var(--col-warning);
    color: var(--col-on-warning);
  }
  &.success {
    background-color: var(--col-success);
    color: var(--col-on-success);
  }
}
.c-tag.small {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
}
.c-tag.large {
  font-size: 1.5rem;
  padding: 0.5rem 1.5rem;
}
.c-tag-list {
  display: flex;
  --gap: 0.25rem;
  flex-flow: row wrap;
  gap: var(--gap);
}
.c-toast-container {
  position: fixed;
  z-index: var(--z-toast, 900);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  max-width: 24rem;
  &.top-left {
    top: 0;
    left: 0;
  }
  &.top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  &.top-right {
    top: 0;
    right: 0;
  }
  &.bottom-left {
    bottom: 0;
    left: 0;
  }
  &.bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  &.bottom-right {
    bottom: 0;
    right: 0;
  }
  &.middle-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &.middle-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  &.middle-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.c-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--border-radius-lg);
  background: var(--col-surface);
  border: var(--border-w-lg) solid var(--col-outline);
  box-shadow: 0 4px 12px lch(from var(--col-on) l c h / 0.1), 0 0 0 1px lch(from var(--col-on) l c h / 0.05);
  backdrop-filter: blur(var(--blur-radius));
  min-width: 18rem;
  max-width: 100%;
  animation: toast-slide-in 0.3s ease-out;
  &.success {
    --toast-color: var(--col-success);
    border-color: var(--col-success);
  }
  &.error {
    --toast-color: var(--col-error);
    border-color: var(--col-error);
  }
  &.warning {
    --toast-color: var(--col-warning);
    border-color: var(--col-warning);
  }
  &.info {
    --toast-color: var(--col-secondary);
    border-color: var(--col-secondary);
  }
}
.c-toast-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--toast-color, var(--col-on));
}
.c-toast-content {
  flex: 1;
  min-width: 0;
}
.c-toast-title {
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--col-on);
}
.c-toast-message {
  margin: 0;
  color: lch(from var(--col-on) l c h / 0.8);
  font-size: 0.875rem;
  line-height: 1.4;
}
.c-toast-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.c-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: lch(from var(--col-on) l c h / 0.5);
  cursor: pointer;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  transition: background 0.2s, color 0.2s;
  &:hover {
    background: lch(from var(--col-on) l c h / 0.1);
    color: var(--col-on);
  }
}
.c-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: lch(from var(--col-on) l c h / 0.1);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow: hidden;
  &::after {
    content: "";
    display: block;
    height: 100%;
    background: var(--toast-color, var(--col-primary));
    animation: toast-progress var(--toast-duration, 5s) linear;
  }
}
.c-toast.with-progress {
  padding-bottom: calc(1rem + 3px);
  position: relative;
}
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 10rem;
    margin-bottom: 0.5rem;
  }
  to {
    opacity: 0;
    transform: translateY(-1rem);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
.c-toast.dismissing {
  animation: toast-slide-out 0.3s ease-in forwards;
}
.c-toast-container.bottom-left .c-toast,
.c-toast-container.bottom-center .c-toast,
.c-toast-container.bottom-right .c-toast {
  animation: toast-slide-in-bottom 0.3s ease-out;
}
@keyframes toast-slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.c-toast-container.bottom-left .c-toast.dismissing,
.c-toast-container.bottom-center .c-toast.dismissing,
.c-toast-container.bottom-right .c-toast.dismissing {
  animation: toast-slide-out-bottom 0.3s ease-in forwards;
}
@keyframes toast-slide-out-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
    max-height: 10rem;
    margin-bottom: 0.5rem;
  }
  to {
    opacity: 0;
    transform: translateY(1rem);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 767px) {
  .c-toast-container {
    left: 0;
    right: 0;
    max-width: 100%;
    transform: none !important;
    &.top-center,
    &.bottom-center,
    &.middle-center {
      left: 0;
    }
  }
  .c-toast {
    min-width: 0;
  }
}
.c-fab {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  z-index: var(--z-fixed, 300);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  text-decoration: none;
  font-size: 1.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-shadow: 0 4px 12px lch(from var(--col-neutral) l c h / 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  --col-bg: var(--col-secondary);
  --col-on: var(--col-on-secondary);
  background-color: var(--col-bg);
  color: var(--col-on);
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px lch(from var(--col-neutral) l c h / 0.4);
  }
  &:focus-visible {
    outline: none;
    box-shadow: 0 4px 12px lch(from var(--col-neutral) l c h / 0.3), 0 0 0 3px var(--col-focus);
  }
  &.primary {
    --col-bg: var(--col-primary);
    --col-on: var(--col-on-primary);
  }
  &.accent {
    --col-bg: var(--col-accent);
    --col-on: var(--col-on-accent);
  }
  &.small {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  &.large {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {
  .c-fab {
    bottom: 2rem;
  }
}
.c-popper {
  background-color: lch(from var(--col-bg) l c h / var(--op-panel));
  backdrop-filter: blur(var(--blur-radius));
  color: var(--col-on);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg), inset 0px 0px 1rem var(--col-shadow);
  z-index: var(--z-popover, 700);
  animation: scale-in var(--duration-fast) var(--ease-out) both;
  transform-origin: top left;
}
.c-popper.low {
  --col-bg: var(--col-container-low);
  --col-on: var(--col-on-container-low);
  --col-em: var(--col-em-container-low);
}
.c-popper.mid {
  --col-bg: var(--col-container);
  --col-on: var(--col-on-container);
  --col-em: var(--col-em-container);
}
.c-popper.high {
  --col-bg: var(--col-container-high);
  --col-on: var(--col-on-container-high);
  --col-em: var(--col-em-container-high);
}
.c-popper.primary {
  --col-bg: var(--col-container-primary);
  --col-on: var(--col-on-container-primary);
  --col-em: var(--col-em-container-primary);
}
.c-popper.secondary {
  --col-bg: var(--col-container-secondary);
  --col-on: var(--col-on-container-secondary);
  --col-em: var(--col-em-container-secondary);
}
.c-popper.accent {
  --col-bg: var(--col-container-accent);
  --col-on: var(--col-on-container-accent);
  --col-em: var(--col-em-container-accent);
}
.c-progress {
  --progress-height: 0.5rem;
  --progress-bg: var(--col-secondary-p3);
  --progress-fill: var(--col-primary);
  --progress-radius: var(--radius-full, 9999px);
  position: relative;
  width: 100%;
  height: var(--progress-height);
  background-color: var(--progress-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
}
.c-progress-bar,
.c-progress > .bar {
  height: 100%;
  background-color: var(--progress-fill);
  border-radius: inherit;
  transition: width 0.3s ease;
}
.c-progress.xs {
  --progress-height: 0.25rem;
}
.c-progress.sm {
  --progress-height: 0.375rem;
}
.c-progress.md {
  --progress-height: 0.5rem;
}
.c-progress.lg {
  --progress-height: 0.75rem;
}
.c-progress.xl {
  --progress-height: 1rem;
}
.c-progress.primary {
  --progress-fill: var(--col-primary);
}
.c-progress.secondary {
  --progress-fill: var(--col-secondary);
}
.c-progress.accent {
  --progress-fill: var(--col-accent);
}
.c-progress.success {
  --progress-fill: var(--col-success);
}
.c-progress.warning {
  --progress-fill: var(--col-warning);
}
.c-progress.error {
  --progress-fill: var(--col-error);
}
.c-progress.indeterminate .c-progress-bar,
.c-progress.indeterminate > .bar {
  width: 30% !important;
  animation: progress-indeterminate 1.5s infinite ease-in-out;
}
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
.c-progress.striped .c-progress-bar,
.c-progress.striped > .bar {
  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent);
  background-size: 1rem 1rem;
}
.c-progress.striped.animated .c-progress-bar,
.c-progress.striped.animated > .bar {
  animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}
.c-progress.square {
  --progress-radius: 0;
}
.c-progress.rounded {
  --progress-radius: var(--border-radius-sm, 0.25rem);
}
.c-progress.with-label {
  --progress-height: 1.25rem;
}
.c-progress.with-label .c-progress-bar,
.c-progress.with-label > .bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
}
.c-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--col-on-primary);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.c-progress-stack {
  display: flex;
  width: 100%;
  height: var(--progress-height, 0.5rem);
  background-color: var(--col-secondary-p3);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}
.c-progress-stack > * {
  height: 100%;
  transition: width 0.3s ease;
}
.c-progress-stack > .primary {
  background-color: var(--col-primary);
}
.c-progress-stack > .secondary {
  background-color: var(--col-secondary);
}
.c-progress-stack > .accent {
  background-color: var(--col-accent);
}
.c-progress-stack > .success {
  background-color: var(--col-success);
}
.c-progress-stack > .warning {
  background-color: var(--col-warning);
}
.c-progress-stack > .error {
  background-color: var(--col-error);
}
.c-progress-ring {
  --ring-size: 3rem;
  --ring-stroke: 0.25rem;
  --ring-progress: 0;
  --ring-color: var(--col-primary);
  --ring-bg: var(--col-secondary-p3);
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
}
.c-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.c-progress-ring circle {
  fill: none;
  stroke-width: var(--ring-stroke);
  stroke-linecap: round;
}
.c-progress-ring .ring-bg {
  stroke: var(--ring-bg);
}
.c-progress-ring .ring-fill {
  stroke: var(--ring-color);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--ring-progress));
  transition: stroke-dashoffset 0.3s ease;
}
.c-progress-ring.sm {
  --ring-size: 2rem;
  --ring-stroke: 0.1875rem;
}
.c-progress-ring.lg {
  --ring-size: 4rem;
  --ring-stroke: 0.375rem;
}
.c-progress-ring.xl {
  --ring-size: 6rem;
  --ring-stroke: 0.5rem;
}
.c-progress-ring.primary {
  --ring-color: var(--col-primary);
}
.c-progress-ring.secondary {
  --ring-color: var(--col-secondary);
}
.c-progress-ring.accent {
  --ring-color: var(--col-accent);
}
.c-progress-ring.success {
  --ring-color: var(--col-success);
}
.c-progress-ring.warning {
  --ring-color: var(--col-warning);
}
.c-progress-ring.error {
  --ring-color: var(--col-error);
}
.c-progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ring-size) / 4);
  font-weight: 600;
  color: var(--col-on);
}
.c-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.875rem;
}
.c-table th,
.c-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--col-outline);
}
.c-table th {
  font-weight: 600;
  background-color: var(--col-container-low);
  color: var(--col-on-container-low);
  white-space: nowrap;
}
.c-table td {
  color: var(--col-on);
}
.c-table.striped tbody tr:nth-child(odd) {
  background-color: var(--col-container-low);
}
.c-table.striped tbody tr:nth-child(odd) td {
  color: var(--col-on-container-low);
}
.c-table.hoverable tbody tr {
  transition: background-color 0.15s ease;
}
.c-table.hoverable tbody tr:hover {
  background-color: var(--col-container);
}
.c-table.hoverable tbody tr:hover td {
  color: var(--col-on-container);
}
.c-table.bordered {
  border: 1px solid var(--col-outline);
}
.c-table.bordered th,
.c-table.bordered td {
  border: 1px solid var(--col-outline);
}
.c-table.borderless th,
.c-table.borderless td {
  border: none;
}
.c-table.compact th,
.c-table.compact td {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}
.c-table.comfortable th,
.c-table.comfortable td {
  padding: 1rem 1.25rem;
}
.c-table.fixed {
  table-layout: fixed;
}
.c-table.sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 10;
}
.c-table.sticky-header th {
  background-color: var(--col-container-high);
}
.c-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.c-table-responsive .c-table {
  min-width: 100%;
}
.c-table tr.selected {
  background-color: var(--col-container-primary) !important;
}
.c-table tr.selected td {
  color: var(--col-on-container-primary);
}
.c-table tr.success {
  background-color: var(--col-container-success) !important;
}
.c-table tr.success td {
  color: var(--col-on-container-success);
}
.c-table tr.warning {
  background-color: var(--col-container-warning) !important;
}
.c-table tr.warning td {
  color: var(--col-on-container-warning);
}
.c-table tr.error {
  background-color: var(--col-container-error) !important;
}
.c-table tr.error td {
  color: var(--col-on-container-error);
}
.c-table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: background-color 0.15s ease;
}
.c-table th.sortable:hover {
  background-color: var(--col-container);
}
.c-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;
  vertical-align: middle;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  opacity: 0.3;
}
.c-table th.sortable.asc::after {
  border-bottom: 0.3rem solid currentColor;
  opacity: 1;
}
.c-table th.sortable.desc::after {
  border-top: 0.3rem solid currentColor;
  opacity: 1;
}
.c-table .text-right {
  text-align: right;
}
.c-table .text-center {
  text-align: center;
}
.c-table .text-left {
  text-align: left;
}
.c-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.c-table .truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-table-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--col-secondary);
}
.c-table-empty td {
  border: none !important;
}
.c-spinner {
  --spinner-size: 2rem;
  --spinner-border: 0.1875rem;
  --spinner-color: var(--col-primary);
  --spinner-track: var(--col-outline);
  display: inline-block;
  width: var(--spinner-size);
  height: var(--spinner-size);
  border: var(--spinner-border) solid var(--spinner-track);
  border-top-color: var(--spinner-color);
  border-radius: 50%;
  animation: spinner-rotate 0.75s linear infinite;
}
@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
.c-spinner.xs {
  --spinner-size: 1rem;
  --spinner-border: 0.125rem;
}
.c-spinner.sm {
  --spinner-size: 1.5rem;
  --spinner-border: 0.125rem;
}
.c-spinner.md {
  --spinner-size: 2rem;
  --spinner-border: 0.1875rem;
}
.c-spinner.lg {
  --spinner-size: 3rem;
  --spinner-border: 0.25rem;
}
.c-spinner.xl {
  --spinner-size: 4rem;
  --spinner-border: 0.3125rem;
}
.c-spinner.primary {
  --spinner-color: var(--col-primary);
}
.c-spinner.secondary {
  --spinner-color: var(--col-secondary);
}
.c-spinner.accent {
  --spinner-color: var(--col-accent);
}
.c-spinner.success {
  --spinner-color: var(--col-success);
}
.c-spinner.warning {
  --spinner-color: var(--col-warning);
}
.c-spinner.error {
  --spinner-color: var(--col-error);
}
.c-spinner.neutral {
  --spinner-color: var(--col-neutral);
}
.c-spinner.light {
  --spinner-color: white;
  --spinner-track: rgba(255, 255, 255, 0.2);
}
.c-spinner.dark {
  --spinner-color: var(--col-neutral-m2);
  --spinner-track: rgba(0, 0, 0, 0.1);
}
.c-spinner-dots {
  --dot-size: 0.5rem;
  --dot-color: var(--col-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.c-spinner-dots > span {
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--dot-color);
  border-radius: 50%;
  animation: spinner-bounce 1.4s infinite ease-in-out both;
}
.c-spinner-dots > span:nth-child(1) {
  animation-delay: -0.32s;
}
.c-spinner-dots > span:nth-child(2) {
  animation-delay: -0.16s;
}
@keyframes spinner-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.c-spinner-dots.sm {
  --dot-size: 0.375rem;
}
.c-spinner-dots.lg {
  --dot-size: 0.75rem;
  gap: 0.375rem;
}
.c-spinner-dots.primary {
  --dot-color: var(--col-primary);
}
.c-spinner-dots.secondary {
  --dot-color: var(--col-secondary);
}
.c-spinner-dots.accent {
  --dot-color: var(--col-accent);
}
.c-spinner-dots.success {
  --dot-color: var(--col-success);
}
.c-spinner-dots.warning {
  --dot-color: var(--col-warning);
}
.c-spinner-dots.error {
  --dot-color: var(--col-error);
}
.c-spinner-pulse {
  --pulse-size: 2rem;
  --pulse-color: var(--col-primary);
  width: var(--pulse-size);
  height: var(--pulse-size);
  background-color: var(--pulse-color);
  border-radius: 50%;
  animation: spinner-pulse 1.5s ease-in-out infinite;
}
@keyframes spinner-pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
.c-spinner-pulse.sm {
  --pulse-size: 1.5rem;
}
.c-spinner-pulse.lg {
  --pulse-size: 3rem;
}
.c-spinner-pulse.primary {
  --pulse-color: var(--col-primary);
}
.c-spinner-pulse.secondary {
  --pulse-color: var(--col-secondary);
}
.c-spinner-pulse.accent {
  --pulse-color: var(--col-accent);
}
.c-spinner-bar {
  --bar-height: 0.25rem;
  --bar-color: var(--col-primary);
  width: 100%;
  height: var(--bar-height);
  background-color: var(--col-outline);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}
.c-spinner-bar::after {
  content: "";
  display: block;
  width: 30%;
  height: 100%;
  background-color: var(--bar-color);
  border-radius: inherit;
  animation: spinner-bar 1.5s ease-in-out infinite;
}
@keyframes spinner-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
.c-spinner-bar.primary {
  --bar-color: var(--col-primary);
}
.c-spinner-bar.secondary {
  --bar-color: var(--col-secondary);
}
.c-spinner-bar.accent {
  --bar-color: var(--col-accent);
}
.c-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lch(from var(--col-surface) l c h / 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
}
.c-loading-overlay.with-text {
  flex-direction: column;
  gap: 1rem;
}
.c-loading-text {
  font-size: 0.875rem;
  color: var(--col-secondary);
}
.c-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--border-radius-lg, 0.5rem);
  border: 1px solid var(--col-outline);
  background-color: var(--col-container-low);
  color: var(--col-on-container-low);
}
.c-alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
}
.c-alert-icon > svg {
  width: 100%;
  height: 100%;
}
.c-alert-content {
  flex: 1;
  min-width: 0;
}
.c-alert-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.c-alert-message {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.9;
}
.c-alert-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.c-alert-close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  margin: -0.25rem -0.25rem -0.25rem 0;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm, 0.25rem);
  color: currentColor;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background-color 0.15s;
}
.c-alert-close:hover {
  opacity: 1;
  background-color: var(--col-outline);
}
.c-alert-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--col-focus);
  outline-offset: 2px;
}
.c-alert-close > svg {
  width: 100%;
  height: 100%;
}
.c-alert.info {
  background-color: var(--col-container-primary);
  border-color: var(--col-primary);
  color: var(--col-on-container-primary);
}
.c-alert.info .c-alert-icon {
  color: var(--col-primary);
}
.c-alert.success {
  background-color: var(--col-container-success);
  border-color: var(--col-success);
  color: var(--col-on-container-success);
}
.c-alert.success .c-alert-icon {
  color: var(--col-success);
}
.c-alert.warning {
  background-color: var(--col-container-warning);
  border-color: var(--col-warning);
  color: var(--col-on-container-warning);
}
.c-alert.warning .c-alert-icon {
  color: var(--col-warning);
}
.c-alert.error {
  background-color: var(--col-container-error);
  border-color: var(--col-error);
  color: var(--col-on-container-error);
}
.c-alert.error .c-alert-icon {
  color: var(--col-error);
}
.c-alert.filled.info {
  background-color: var(--col-primary);
  border-color: var(--col-primary);
  color: var(--col-on-primary);
}
.c-alert.filled.info .c-alert-icon {
  color: var(--col-on-primary);
}
.c-alert.filled.success {
  background-color: var(--col-success);
  border-color: var(--col-success);
  color: var(--col-on-success);
}
.c-alert.filled.success .c-alert-icon {
  color: var(--col-on-success);
}
.c-alert.filled.warning {
  background-color: var(--col-warning);
  border-color: var(--col-warning);
  color: var(--col-on-warning);
}
.c-alert.filled.warning .c-alert-icon {
  color: var(--col-on-warning);
}
.c-alert.filled.error {
  background-color: var(--col-error);
  border-color: var(--col-error);
  color: var(--col-on-error);
}
.c-alert.filled.error .c-alert-icon {
  color: var(--col-on-error);
}
.c-alert.outline {
  background-color: transparent;
}
.c-alert.outline.info {
  border-color: var(--col-primary);
  color: var(--col-primary);
}
.c-alert.outline.success {
  border-color: var(--col-success);
  color: var(--col-success);
}
.c-alert.outline.warning {
  border-color: var(--col-warning);
  color: var(--col-warning);
}
.c-alert.outline.error {
  border-color: var(--col-error);
  color: var(--col-error);
}
.c-alert.compact {
  padding: 0.75rem;
  gap: 0.5rem;
}
.c-alert.compact .c-alert-icon {
  width: 1rem;
  height: 1rem;
}
.c-alert.compact .c-alert-title {
  font-size: 0.875rem;
  margin-bottom: 0;
}
.c-alert.compact .c-alert-message {
  font-size: 0.8125rem;
}
.c-alert.inline {
  align-items: center;
  padding: 0.5rem 0.75rem;
}
.c-alert.inline .c-alert-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.c-alert.inline .c-alert-title {
  margin-bottom: 0;
}
.c-alert.inline .c-alert-message {
  font-size: inherit;
}
.c-alert.banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 0.75rem 1rem;
}
.c-alert.dismissing {
  animation: alert-dismiss 0.2s ease-out forwards;
}
@keyframes alert-dismiss {
  to {
    opacity: 0;
    transform: translateX(1rem);
  }
}
.c-alert-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-tooltip {
  position: relative;
  display: inline-block;
}
.c-tooltip::before,
.c-tooltip::after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-tooltip, 800);
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.c-tooltip::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  background-color: var(--col-container-high);
  color: var(--col-on-container-high);
  border-radius: var(--border-radius-sm, 0.25rem);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.c-tooltip::before {
  content: "";
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.25rem solid transparent;
  border-top-color: var(--col-container-high);
}
.c-tooltip:hover::before,
.c-tooltip:hover::after,
.c-tooltip:focus::before,
.c-tooltip:focus::after,
.c-tooltip:focus-within::before,
.c-tooltip:focus-within::after {
  visibility: visible;
  opacity: 1;
}
.c-tooltip.bottom::after {
  bottom: auto;
  top: calc(100% + 0.5rem);
}
.c-tooltip.bottom::before {
  bottom: auto;
  top: calc(100% + 0.25rem);
  border-top-color: transparent;
  border-bottom-color: var(--col-container-high);
}
.c-tooltip.left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 0.5rem);
  transform: translateY(-50%);
}
.c-tooltip.left::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 0.25rem);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: var(--col-container-high);
}
.c-tooltip.right::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 0.5rem);
  transform: translateY(-50%);
}
.c-tooltip.right::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 0.25rem);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: var(--col-container-high);
}
.c-tooltip.start::after {
  left: 0;
  transform: none;
}
.c-tooltip.start::before {
  left: 1rem;
  transform: none;
}
.c-tooltip.end::after {
  left: auto;
  right: 0;
  transform: none;
}
.c-tooltip.end::before {
  left: auto;
  right: 1rem;
  transform: none;
}
.c-tooltip.dark::after {
  background-color: var(--col-neutral-m2);
  color: white;
}
.c-tooltip.dark::before {
  border-top-color: var(--col-neutral-m2);
}
.c-tooltip.dark.bottom::before {
  border-top-color: transparent;
  border-bottom-color: var(--col-neutral-m2);
}
.c-tooltip.dark.left::before {
  border-top-color: transparent;
  border-left-color: var(--col-neutral-m2);
}
.c-tooltip.dark.right::before {
  border-top-color: transparent;
  border-right-color: var(--col-neutral-m2);
}
.c-tooltip.primary::after {
  background-color: var(--col-primary);
  color: var(--col-on-primary);
}
.c-tooltip.primary::before {
  border-top-color: var(--col-primary);
}
.c-tooltip.primary.bottom::before {
  border-top-color: transparent;
  border-bottom-color: var(--col-primary);
}
.c-tooltip.error::after {
  background-color: var(--col-error);
  color: var(--col-on-error);
}
.c-tooltip.error::before {
  border-top-color: var(--col-error);
}
.c-tooltip.error.bottom::before {
  border-top-color: transparent;
  border-bottom-color: var(--col-error);
}
.c-tooltip.sm::after {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.c-tooltip.lg::after {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.c-tooltip.multiline::after {
  white-space: normal;
  width: -moz-max-content;
  width: max-content;
  max-width: 250px;
  text-align: left;
}
.c-tooltip.animated::after,
.c-tooltip.animated::before {
  transform-origin: bottom center;
}
.c-tooltip.animated::after {
  transform: translateX(-50%) scale(0.95);
}
.c-tooltip.animated:hover::after,
.c-tooltip.animated:focus::after {
  transform: translateX(-50%) scale(1);
}
.c-tooltip.animated.bottom::after {
  transform-origin: top center;
}
.c-tooltip.delay::before,
.c-tooltip.delay::after {
  transition-delay: 0.3s;
}
.c-tooltip.always-visible::before,
.c-tooltip.always-visible::after {
  visibility: visible;
  opacity: 1;
}
.c-skeleton {
  --skeleton-bg: var(--col-container-low);
  --skeleton-highlight: var(--col-container);
  --skeleton-radius: var(--border-radius-sm, 0.25rem);
  background-color: var(--skeleton-bg);
  border-radius: var(--skeleton-radius);
  animation: skeleton-pulse 2s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.c-skeleton.text {
  height: 1em;
  width: 100%;
}
.c-skeleton.text-sm {
  height: 0.875em;
  width: 100%;
}
.c-skeleton.text-lg {
  height: 1.25em;
  width: 100%;
}
.c-skeleton.heading {
  height: 1.5em;
  width: 60%;
}
.c-skeleton.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.c-skeleton.avatar.xs {
  width: 1.5rem;
  height: 1.5rem;
}
.c-skeleton.avatar.sm {
  width: 2rem;
  height: 2rem;
}
.c-skeleton.avatar.lg {
  width: 3rem;
  height: 3rem;
}
.c-skeleton.avatar.xl {
  width: 4rem;
  height: 4rem;
}
.c-skeleton.button {
  height: 2.5rem;
  width: 6rem;
  border-radius: 1.25rem;
}
.c-skeleton.button.sm {
  height: 2rem;
  width: 4rem;
}
.c-skeleton.button.lg {
  height: 3rem;
  width: 8rem;
}
.c-skeleton.image {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--border-radius-lg, 0.5rem);
}
.c-skeleton.image.square {
  aspect-ratio: 1 / 1;
}
.c-skeleton.image.portrait {
  aspect-ratio: 3 / 4;
}
.c-skeleton.icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--border-radius-sm, 0.25rem);
  flex-shrink: 0;
}
.c-skeleton.badge {
  width: 3rem;
  height: 1.25rem;
  border-radius: var(--radius-full, 9999px);
}
.c-skeleton.wave {
  background:
    linear-gradient(
      90deg,
      var(--skeleton-bg) 0%,
      var(--skeleton-highlight) 50%,
      var(--skeleton-bg) 100%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s linear infinite;
}
@keyframes skeleton-wave {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
.c-skeleton.static {
  animation: none;
}
.c-skeleton.w-25 {
  width: 25%;
}
.c-skeleton.w-50 {
  width: 50%;
}
.c-skeleton.w-75 {
  width: 75%;
}
.c-skeleton.w-100 {
  width: 100%;
}
.c-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.c-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--border-radius-lg, 0.5rem);
  background-color: var(--col-container-low);
}
.c-skeleton-card .c-skeleton {
  --skeleton-bg: var(--col-container);
  --skeleton-highlight: var(--col-container-high);
}
.c-skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.c-skeleton-list-item .c-skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-skeleton-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.c-skeleton-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-skeleton-table-row {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--col-outline);
}
.c-skeleton-table-row > .c-skeleton {
  flex: 1;
}
.c-skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.c-skeleton-paragraph > .c-skeleton:last-child {
  width: 70%;
}
.c-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--col-container-low);
  border-radius: var(--radius-control);
  & .c-button {
    --btn-height: var(--size-sm);
    background: none;
    box-shadow: none;
    color: var(--col-secondary);
    &:hover:not([disabled]):not(.active) {
      transform: none;
      background: var(--col-container-low);
      box-shadow: none;
    }
    &.active {
      color: var(--col-primary);
      background: var(--col-container-primary);
    }
    &[disabled] {
      opacity: var(--op-disabled);
      cursor: not-allowed;
    }
  }
  & .c-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0;
    & .c-button {
      border-radius: 0;
      &:first-child {
        border-radius: var(--radius-control) 0 0 var(--radius-control);
      }
      &:last-child {
        border-radius: 0 var(--radius-control) var(--radius-control) 0;
      }
      &:only-child {
        border-radius: var(--radius-control);
      }
    }
  }
}
.c-toolbar-divider {
  border-left: 1px solid var(--col-outline);
  padding-left: var(--space-2);
  margin-left: var(--space-1);
}
.c-toolbar-spacer {
  flex: 1;
}
.c-toolbar.compact {
  padding: var(--space-1);
  gap: 0;
  & .c-button {
    --btn-height: var(--size-xs);
  }
}
.c-menu {
  position: fixed;
  background: var(--col-bg);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-1);
  overflow: hidden;
}
.c-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--col-txt);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
  &:hover:not([disabled]) {
    background: var(--col-container-low);
  }
  &:focus-visible {
    outline: none;
    background: var(--col-container-low);
    box-shadow: inset 0 0 0 2px var(--col-focus);
  }
  &.danger {
    color: var(--col-error);
    &:hover:not([disabled]) {
      background: lch(from var(--col-error) l c h / 0.1);
    }
  }
  &[disabled] {
    opacity: var(--op-disabled);
    cursor: not-allowed;
  }
}
.c-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  flex-shrink: 0;
  color: var(--col-secondary);
}
.c-menu-item-label {
  flex: 1;
}
.c-menu-item-shortcut {
  font-size: var(--text-xs);
  color: var(--col-txt-muted);
  margin-left: var(--space-3);
}
.c-menu-divider {
  height: 1px;
  background: var(--col-outline);
  margin: var(--space-1) 0;
}
.c-menu-header {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--col-txt-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.c-tag-input {
  position: relative;
}
.c-tag-input-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-control);
  background: var(--col-bg);
  min-height: var(--size-md);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
  &:focus-within {
    border-color: var(--col-primary);
    box-shadow: 0 0 0 2px lch(from var(--col-primary) l c h / 0.2);
  }
  & input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-sm);
    min-width: 6rem;
    color: var(--col-txt);
    &::-moz-placeholder {
      color: var(--col-txt-muted);
    }
    &::placeholder {
      color: var(--col-txt-muted);
    }
  }
}
.c-tag-input-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--col-bg);
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 12rem;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  list-style: none;
  padding: var(--space-1);
  margin: var(--space-1) 0 0 0;
}
.c-tag-input-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
  &:hover,
  &.highlighted {
    background: var(--col-container-low);
  }
}
.c-tag-input-suggestion-new {
  color: var(--col-txt-muted);
  font-size: var(--text-xs);
  margin-left: auto;
}
.c-tag-input.inline {
  & .c-tag-input-field {
    border: none;
    padding: 0;
    min-height: auto;
    background: transparent;
    &:focus-within {
      box-shadow: none;
    }
  }
}
.c-accordion {
  border: 1px solid var(--col-outline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.c-accordion-item {
  border-bottom: 1px solid var(--col-outline);
  &:last-child {
    border-bottom: none;
  }
}
.c-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3);
  border: none;
  background: transparent;
  color: var(--col-txt);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-default);
  &:hover {
    background: var(--col-container-low);
  }
  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--col-focus);
  }
}
.c-accordion-icon {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
  color: var(--col-secondary);
}
.c-accordion-item.open .c-accordion-icon {
  transform: rotate(90deg);
}
.c-accordion-content {
  padding: 0 var(--space-3) var(--space-3);
  display: none;
}
.c-accordion-item.open .c-accordion-content {
  display: block;
}
.c-accordion.borderless {
  border: none;
  border-radius: 0;
  & .c-accordion-item {
    border: none;
  }
  & .c-accordion-header {
    padding: var(--space-2) 0;
  }
  & .c-accordion-content {
    padding: 0 0 var(--space-2);
  }
}
.c-accordion.compact {
  & .c-accordion-header {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
  & .c-accordion-content {
    padding: 0 var(--space-2) var(--space-2);
  }
}

/* ../local/opalui/themes/opaque.css */
body.theme-opaque {
  --border-w-lg: calc(2rem / 16);
  --border-w-sm: calc(1rem / 16);
  --border-radius-lg: 0.5rem;
  --border-radius-sm: 0.25rem;
  --blur-radius: 0;
  --p-nav: 0.5rem;
  --p-nav-item-y: 0.5rem;
  --p-nav-item-x: 0.5rem;
  --p-panel: 1rem;
  --p-fieldset: 0.5rem 1rem;
  --m-container: 0.5rem;
  --m-button-y: 0.5rem;
  --m-button-r: 0.5rem;
  --g-grid: 1rem;
  --sh-focus: 0.25rem;
  font-family: "Roboto", sans-serif;
  color: var(--col-on);
  background-color: var(--col-container-low);
  transition: background-color 0.3s, color 0.2s;
}
body.theme-opaque.light {
  --color-primary: lch(45 60 250);
  --color-frost: lch(100 0 0 / 0.1);
  --color-focus: var(--col-primary);
}
body.theme-opaque.dark {
  --color-primary: lch(68 50 250);
  --color-frost: lch(100 0 0 / 0.15);
  --color-focus: lch(100 0 0 / 0.5);
}
body.theme-opaque h1,
body.theme-opaque h2,
body.theme-opaque h3,
body.theme-opaque h4,
body.theme-opaque h5,
body.theme-opaque h6 {
  font-family: "Oswald", sans-serif;
}

/* ../local/opalui/themes/glass.css */
body.theme-glass {
  --border-w-lg: calc(2rem / 16);
  --border-w-sm: calc(1rem / 16);
  --border-radius-lg: 0.5rem;
  --border-radius-sm: 0.25rem;
  --blur-radius: 1.5rem;
  --glass-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --p-nav: 0.5rem;
  --p-nav-item-y: 0.5rem;
  --p-nav-item-x: 0.5rem;
  --p-panel: 1rem;
  --p-fieldset: 0.5rem 1rem;
  --m-container: 0.5rem;
  --m-button-y: 0.5rem;
  --m-button-r: 0.5rem;
  --g-grid: 1rem;
  --sh-focus: 0.25rem;
  --op-panel: 0.75 !important;
  --op-button: 0.8 !important;
  font-family: "Roboto", sans-serif;
  color: var(--col-on);
  transition: background-color 0.3s, color 0.2s;
}
body.theme-glass .c-panel {
  box-shadow: var(--glass-glow), var(--glass-shadow);
  border: var(--glass-border);
}
body.theme-glass .c-panel.emph {
  box-shadow:
    var(--glass-glow),
    var(--glass-shadow),
    inset 0px 0px 2rem var(--col-frost);
}
body.theme-glass .c-nav {
  box-shadow: var(--glass-glow), var(--glass-shadow);
  border: var(--glass-border);
}
body.theme-glass .c-modal > .c-dialog {
  box-shadow: var(--glass-glow), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
body.theme-glass .c-toast {
  box-shadow: var(--glass-glow), 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.theme-glass details.c-dropdown[open] > :last-child {
  box-shadow:
    var(--glass-glow),
    var(--glass-shadow),
    inset 0px 0px 1rem var(--col-shadow);
}
body.theme-glass.light {
  --color-primary: lch(68 50 250);
  --color-frost: lch(100 0 0 / 0.25);
  --color-focus: lch(100 0 0);
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    var(--glass-noise),
    linear-gradient(
      135deg,
      lch(88 8 250) 0%,
      lch(90 6 280) 50%,
      lch(87 10 230) 100%);
  background-attachment: fixed;
  background-blend-mode: overlay, normal;
  min-height: 100vh;
}
body.theme-glass.dark {
  --color-primary: lch(68 50 250);
  --color-frost: lch(100 0 0 / 0.12);
  --color-focus: lch(100 0 0);
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    var(--glass-noise),
    linear-gradient(
      135deg,
      lch(12 10 250) 0%,
      lch(15 8 280) 50%,
      lch(10 12 230) 100%);
  background-attachment: fixed;
  background-blend-mode: overlay, normal;
  min-height: 100vh;
}
body.theme-glass h1,
body.theme-glass h2,
body.theme-glass h3,
body.theme-glass h4,
body.theme-glass h5,
body.theme-glass h6 {
  font-family: "Oswald", sans-serif;
}

/* src/style.css */
html,
body {
  height: 100%;
}
p {
  margin: 0;
  padding: 0;
  line-height: 1.42;
}
.ql-editor:focus-visible {
  box-shadow: inset 0px 0px 1rem var(--col-bg-emph), 0px 0px var(--sh-focus) var(--col-focus);
}
body {
  overflow: hidden;
}
#app {
  height: 100%;
  overflow: hidden;
}
.c-logo {
  max-width: 16rem;
}
.c-logo.circle,
.c-logo.line {
  color: #e98a54;
}
.c-logo.slow .circle.main {
  animation: 3s infinite normal c-logo-1;
}
.c-logo.slow .circle.small {
  animation: 3s infinite normal c-logo-3;
}
.c-logo.slow .line {
  animation: 3s infinite normal c-logo-2;
}
.c-logo.fast .circle.main {
  animation: 0.3s infinite normal c-logo-1;
}
.c-logo.fast .circle.small {
  animation: 0.3s infinite normal c-logo-3;
}
.c-logo.fast .line {
  animation: 0.3s infinite normal c-logo-2;
}
@keyframes c-logo-1 {
  from {
    fill: #e98a54;
  }
  20% {
    fill: #e98a54;
  }
  23% {
    fill: #fff;
  }
  29% {
    fill: #e98a54;
  }
}
@keyframes c-logo-2 {
  from {
    fill: #e98a54;
  }
  23% {
    fill: #e98a54;
  }
  26% {
    fill: #fff;
  }
  32% {
    fill: #e98a54;
  }
}
@keyframes c-logo-3 {
  from {
    fill: #e98a54;
  }
  26% {
    fill: #e98a54;
  }
  29% {
    fill: #fff;
  }
  35% {
    fill: #e98a54;
  }
}
.c-menu-ex {
  .c-nav {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1rem;
    max-width: calc(20rem + 2rem);
    max-height: calc(16rem + 2rem);
    overflow-y: auto;
    margin: 0 auto;
    flex-flow: row wrap;
    z-index: 8;
    transition: transform 0.3s ease;
    &.open {
      transform: translate(0, 0);
    }
    .c-nav-link {
      height: 4rem;
      justify-content: center;
    }
  }
}
.c-nav.nav-top {
  z-index: 10;
  & > .c-nav-link > h6,
  & > .c-nav-group > .c-nav-link > h6 {
    font-size: 0.83rem;
  }
  .c-menu-ex .c-nav {
    top: 4rem;
    transform: translate(0, -10rem);
    &.open {
      transform: translate(0, 0);
    }
  }
}
.c-nav.nav-bottom {
  z-index: 10;
  .c-menu-ex .c-nav {
    bottom: 4.5rem;
    transform: translate(0, 10rem);
    &.open {
      transform: translate(0, 0);
    }
  }
  .c-nav-link {
    width: 4rem;
  }
}
.c-app {
  border: 4px solid #f80;
  iframe {
    border: 0px;
  }
  &.untrusted {
    border: 4px solid red;
  }
  &.trusted {
    border: 4px solid green;
  }
}
.c-thumbnail {
  height: 3rem;
}
.c-image-overlay-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: auto;
}
.c-msg.local {
  max-width: 90%;
  align-self: flex-end;
}
.c-msg.remote {
  max-width: 90%;
  align-self: flex-start;
}
.c-msg p {
  margin: 0;
}
.c-profile-card .tag .warn {
  color: var(--col-txt-danger);
}
.c-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  transition: margin-left 0.3s ease;
  --sidebar-width: 5rem;
}
.c-layout.with-sidebar {
  margin-left: var(--sidebar-width);
}
@media (min-width: 1024px) {
  .c-layout.with-sidebar {
    margin-left: var(--sidebar-width);
  }
}
@media (max-width: 1023px) {
  .c-layout.with-sidebar {
    margin-left: 0;
  }
}
.c-success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.c-success-icon {
  width: 5rem;
  height: 5rem;
  color: var(--col-success, #22c55e);
  margin-bottom: 0.75rem;
}
.c-step-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--bd-radius);
  background: var(--col-bg-2);
  border: 1px solid var(--col-border);
}
.c-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--col-primary);
  color: white;
  font-weight: bold;
  flex-shrink: 0;
}
.c-step-content {
  flex: 1;
}
.c-info-tip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--bd-radius);
  background: var(--col-bg-2);
  border: 1px solid var(--col-border);
}
.c-info-tip-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--col-warning, #f59e0b);
}
/*!
 * OpalUI v0.14.1 | MIT License | https://github.com/szilu/opalui
 */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*! Bundled license information:

quill/dist/quill.core.css:
quill/dist/quill.bubble.css:
  (*!
   * Quill Editor v2.0.3
   * https://quilljs.com
   * Copyright (c) 2017-2024, Slab
   * Copyright (c) 2014, Jason Chen
   * Copyright (c) 2013, salesforce.com
   *)
*/
/*# sourceMappingURL=index.css.map */