/* design tokens — migrated from app/templates/base.j2 - 26.06.2026 */

/* account shell design tokens — eco header, split layout, sidebar - 16.07.2026 05:55 */

:root {
  --account-split-sidebar-bg:       var(--eco-header-bg);
  --account-split-main-bg:          var(--surface-subtle);
  --space-sidebar-panel-w:          320px;
  --account-split-sidebar-w:        var(--space-sidebar-panel-w);
  /* account nav row — sp-sidebar__tab olcegi (36px / 1rem / 8px) - 16.07.2026 03:15 */
  --account-sidebar-nav-icon-size:  1rem;
  --account-sidebar-nav-row-h:      2.25rem;
  --account-sidebar-nav-gap:        0.5rem;
  --account-sidebar-nav-px:         0.5rem;
  /* dinamik icerik inset — top/left/bottom/right ayni - 16.07.2026 03:25 */
  --account-split-inner-pad:        1.5rem;
  --account-split-inner-pad-x:      var(--account-split-inner-pad);
  --account-split-main-content-max-w: 64.25rem;
  --sidebar-hover-bg:  color-mix(in srgb, var(--foreground)  5%, transparent);
  --sidebar-active-bg: color-mix(in srgb, var(--foreground)  9%, transparent);
  --sidebar-active-fg: var(--foreground);
  --sidebar-item-r: 9px;
  --sidebar-r: 14px;
  --eco-header-h:             64px;
  --eco-header-control:       36px;
  --eco-header-pad:           calc((var(--eco-header-h) - var(--eco-header-control)) / 2);
  --account-static-sidebar-w: 64px;
  --sidebar-m:                var(--eco-header-pad);
  --sidebar-gap:              var(--eco-header-pad);
  --sidebar-gap-tight:        calc(var(--eco-header-pad) / 4);
  --account-sidebar-inner-x:  var(--eco-header-pad);
  /* eco header logosu ile nav ikon sol hizasi: inset + nav-px = eco-header-pad - 16.07.2026 04:15 */
  --split-sidebar-inset-x:      calc(var(--eco-header-pad) - var(--account-sidebar-nav-px));
  --split-sidebar-inset-y:      0.6875rem;
  --split-sidebar-inset-bottom: 0.375rem;
  --rail-btn-size:            calc(var(--account-static-sidebar-w) - (var(--eco-header-pad) * 2));
  --rail-btn-radius:          var(--sidebar-item-r);
  /* aktif rail item kosesi — pasiften biraz daha yumuşak - 16.07.2026 06:34 */
  --rail-btn-radius-active:   12px;
  --rail-btn-icon-size:       1.0625rem;
  --rail-hover-bg:            color-mix(in srgb, var(--foreground) 4%, transparent);
  --rail-active-bg:           color-mix(in srgb, var(--foreground) 7%, transparent);
  --eco-header-bg:            #ffffff;
  --eco-header-border:        var(--border);
  --eco-icon-color:           rgba(23, 23, 23, 0.50);
  --eco-icon-hover:           rgba(23, 23, 23, 0.92);
  --eco-text-color:           rgba(23, 23, 23, 0.82);
  --eco-btn-hover-bg:         rgba(0, 0, 0, 0.06);
  --eco-btn-active-bg:        rgba(0, 0, 0, 0.09);
  --eco-products-bg:          rgba(0, 0, 0, 0.06);
  --eco-products-border:      rgba(0, 0, 0, 0.10);
  --eco-products-hover-bg:    rgba(0, 0, 0, 0.10);
  --eco-products-hover-border:rgba(0, 0, 0, 0.15);
  --eco-products-open-bg:     rgba(0, 0, 0, 0.12);
  --eco-products-open-border: rgba(0, 0, 0, 0.18);
  --eco-user-bg:              rgba(0, 0, 0, 0.04);
  --eco-user-border:          rgba(0, 0, 0, 0.10);
  --eco-user-hover-bg:        rgba(0, 0, 0, 0.08);
  --eco-user-hover-border:    rgba(0, 0, 0, 0.16);
  --eco-user-open-bg:         rgba(0, 0, 0, 0.10);
  --eco-user-open-border:     rgba(0, 0, 0, 0.20);
  --eco-avatar-outline:       rgba(0, 0, 0, 0.14);
  --eco-search-bg:            rgba(0, 0, 0, 0.04);
  --eco-search-border:        rgba(0, 0, 0, 0.10);
  --eco-search-focus-bg:      rgba(0, 0, 0, 0.06);
  --eco-search-focus-border:  rgba(0, 0, 0, 0.18);
  --eco-search-icon:          rgba(23, 23, 23, 0.36);
  --eco-search-icon-focus:    rgba(23, 23, 23, 0.60);
  --eco-search-text:          rgba(23, 23, 23, 0.90);
  --eco-search-placeholder:   rgba(23, 23, 23, 0.32);
  --eco-kbd-color:            rgba(23, 23, 23, 0.48);
  --eco-kbd-bg:               rgba(0, 0, 0, 0.06);
  --eco-kbd-border:           rgba(0, 0, 0, 0.12);
  --eco-logo-sep:             rgba(0, 0, 0, 0.10);
}

.dark {
  --account-split-main-bg:    var(--background);
  --sidebar-hover-bg:  color-mix(in srgb, var(--foreground)  7%, transparent);
  --sidebar-active-bg: color-mix(in srgb, var(--foreground) 12%, transparent);
  --rail-hover-bg:     color-mix(in srgb, var(--foreground) 6%, transparent);
  --rail-active-bg:    color-mix(in srgb, var(--foreground) 10%, transparent);
  --eco-header-bg:            #09090d;
  --eco-header-border:        rgba(255, 255, 255, 0.08);
  --eco-icon-color:           rgba(255, 255, 255, 0.62);
  --eco-icon-hover:           rgba(255, 255, 255, 0.96);
  --eco-text-color:           rgba(255, 255, 255, 0.86);
  --eco-btn-hover-bg:         rgba(255, 255, 255, 0.08);
  --eco-btn-active-bg:        rgba(255, 255, 255, 0.11);
  --eco-products-bg:          rgba(255, 255, 255, 0.08);
  --eco-products-border:      rgba(255, 255, 255, 0.10);
  --eco-products-hover-bg:    rgba(255, 255, 255, 0.13);
  --eco-products-hover-border:rgba(255, 255, 255, 0.16);
  --eco-products-open-bg:     rgba(255, 255, 255, 0.15);
  --eco-products-open-border: rgba(255, 255, 255, 0.20);
  --eco-user-bg:              rgba(255, 255, 255, 0.06);
  --eco-user-border:          rgba(255, 255, 255, 0.12);
  --eco-user-hover-bg:        rgba(255, 255, 255, 0.10);
  --eco-user-hover-border:    rgba(255, 255, 255, 0.18);
  --eco-user-open-bg:         rgba(255, 255, 255, 0.12);
  --eco-user-open-border:     rgba(255, 255, 255, 0.22);
  --eco-avatar-outline:       rgba(255, 255, 255, 0.18);
  --eco-search-bg:            rgba(255, 255, 255, 0.07);
  --eco-search-border:        rgba(255, 255, 255, 0.10);
  --eco-search-focus-bg:      rgba(255, 255, 255, 0.10);
  --eco-search-focus-border:  rgba(255, 255, 255, 0.20);
  --eco-search-icon:          rgba(255, 255, 255, 0.40);
  --eco-search-icon-focus:    rgba(255, 255, 255, 0.65);
  --eco-search-text:          rgba(255, 255, 255, 0.88);
  --eco-search-placeholder:   rgba(255, 255, 255, 0.32);
  --eco-kbd-color:            rgba(255, 255, 255, 0.48);
  --eco-kbd-bg:               rgba(255, 255, 255, 0.10);
  --eco-kbd-border:           rgba(255, 255, 255, 0.16);
  --eco-logo-sep:             rgba(255, 255, 255, 0.10);
}

/* account shell root layout, preload, spa transitions - 24.06.2026 12:00 */

html.account-shell-root {
  height: 100%;
  height: 100dvh;
}

html.account-shell-root body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html.account-shell-root body > main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
}

html.account-shell-root .account-split__scroll {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#account-main-content.account-main--hide-subtitles [data-account-subtitle] {
  display: none !important;
}

.account-preload .eco-header,
.account-preload #account-static-sidebar,
.account-preload .account-split-outer,
.account-preload #mobileOverlay {
  visibility: hidden;
}

.account-preload .account-desktop-sidebar {
  transition: none !important;
}

#account-main-content {
  transition: opacity 150ms ease;
}

#account-main-content.account-content-leaving {
  opacity: 0;
}

#account-nav-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 20;
  pointer-events: none;
}

#account-nav-loader.account-nav-loader--active {
  opacity: 1;
}

#account-nav-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--foreground);
  opacity: 0.35;
  transition: width 280ms ease-out;
}

/* tema degisimi sirasinda transition kapali - 26.06.2026 */

/* scrollbar utilities from cpds — kept in base layer - 26.06.2026 */

/* cengel logo dark mode — migrated from cengel_logo_dark.j2 - 16.07.2026 04:44 */

/* eco header transparent logo — soft ink mark + token tile, saf #fff/#000 yok - 16.07.2026 04:44 */

.eco-header-logo-mark {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--foreground) 7%, var(--eco-header-bg));
  border: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent);
}

.eco-header-logo-mark--lg {
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
}

.eco-header-logo-mark__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* #fff → soft ink (~#171717 foreground) - 16.07.2026 04:44 */
  filter: invert(1) brightness(0.09);
}

html.dark .eco-header-logo-mark__img {
  /* #fff → soft zinc (~#e4e4e7 foreground) - 16.07.2026 04:44 */
  filter: brightness(0.89);
}

/* phosphor icon fixes — migrated from phosphor_bold_head.j2 - 26.06.2026 */

/* pass nav rail — pasif full round, hover hafif koseli, aktif 12px - 16.07.2026 06:38 */

/* eco header widget dropdown — soft elevation + open transform - 16.07.2026 06:43 */

.eco-header-dropdown {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--foreground) 11%, transparent),
    0 2px 8px color-mix(in srgb, var(--foreground) 6%, transparent);
  opacity: 0;
  transform: scale(0.96) translateY(0.35rem);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.eco-header-dropdown--from-tr {
  transform-origin: top right;
}

.eco-header-dropdown--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.dark .eco-header-dropdown {
  box-shadow:
    0 10px 32px color-mix(in srgb, #000 48%, transparent),
    0 2px 10px color-mix(in srgb, #000 32%, transparent);
}

.eco-header-dropdown > iframe {
  display: block;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .eco-header-dropdown {
    transition: none;
    transform: none;
    will-change: auto;
  }

  .eco-header-dropdown--open {
    transform: none;
  }
}

/* eco header search — sayfa genisligine gore akiskan - 16.07.2026 05:55 */

.eco-header-search {
  --eco-search-side-reserve: 18rem;
  --eco-search-max: 36.25rem;
  /* once control-4px (32); +6px → 38 - 16.07.2026 05:55 */
  height: calc(var(--eco-header-control) + 2px);
  width: min(
    var(--eco-search-max),
    max(14rem, calc(100% - var(--eco-search-side-reserve)))
  );
  max-width: 100%;
  transition:
    width 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms ease,
    border-color 150ms ease;
}

/* genis ekran: search biraz daha buyusun - 16.07.2026 05:55 */

@media (min-width: 1440px) {
  .eco-header-search {
    --eco-search-max: 40rem;
    --eco-search-side-reserve: 20rem;
  }
}

@media (min-width: 1680px) {
  .eco-header-search {
    --eco-search-max: 44rem;
    --eco-search-side-reserve: 22rem;
  }
}

/* orta: logo+actions icin daha fazla yer birak - 16.07.2026 05:55 */

@media (max-width: 1280px) {
  .eco-header-search {
    --eco-search-max: 28rem;
    --eco-search-side-reserve: 17rem;
  }
}

@media (max-width: 1100px) {
  .eco-header-search {
    --eco-search-max: 22rem;
    --eco-search-side-reserve: 16rem;
  }

  .eco-header-search__shortcut {
    display: none;
  }
}

.eco-header-search__shortcut {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 150ms ease;
}

.eco-header-search:focus-within .eco-header-search__shortcut {
  opacity: 0;
}

/* kisayol kbd — daha okunur chip - 16.07.2026 05:55 */

.eco-header-search__kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--eco-kbd-color);
  background: var(--eco-kbd-bg);
  border: 1px solid var(--eco-kbd-border);
  border-radius: 0.3125rem;
}

@media (prefers-reduced-motion: reduce) {
  .eco-header-search {
    transition: background-color 150ms ease, border-color 150ms ease;
  }

  .eco-header-search__shortcut {
    transition: none;
  }
}

/* eco header action buttons + unread dots - 16.07.2026 06:10 */

.eco-header-action {
  position: relative;
  flex-shrink: 0;
  isolation: isolate;
}

.eco-header-action__btn {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--eco-header-control) + 2px);
  height: calc(var(--eco-header-control) + 2px);
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  color: var(--eco-icon-color);
  cursor: pointer;
  text-decoration: none;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.eco-header-action__btn:hover {
  color: var(--eco-icon-hover);
  background: var(--eco-btn-hover-bg);
}

.eco-header-action__btn:active {
  background: var(--eco-btn-active-bg);
}

.eco-header-action__icon {
  position: relative;
  z-index: 0;
  font-size: 1.1875rem;
  line-height: 1;
  display: block;
}

/* unread dot — simgenin uzerinde kalsin (hover dahil) - 16.07.2026 06:10 */

.eco-header-action__badge {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  z-index: 2;
  display: none;
  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  border: 2px solid var(--eco-header-bg);
  background: #ef4444;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.eco-header-action__badge[data-active="true"] {
  display: block;
}

/* eco header user — sadece avatar - 16.07.2026 06:23 */

.eco-header-user {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.eco-header-user__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--eco-header-control) + 2px);
  height: calc(var(--eco-header-control) + 2px);
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0.5625rem;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color 120ms ease;
}

.eco-header-user__btn:hover {
  background: var(--eco-btn-hover-bg);
}

.eco-header-user__btn:active,
.eco-header-user__btn[aria-expanded="true"] {
  background: var(--eco-btn-active-bg);
}

.eco-header-user__avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  flex-shrink: 0;
  transition: opacity 120ms ease;
}

.eco-header-user__btn:hover .eco-header-user__avatar,
.eco-header-user__btn[aria-expanded="true"] .eco-header-user__avatar {
  opacity: 0.92;
}

.eco-header-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.eco-header-end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
  z-index: 1;
}

/* eco header notification inbox shell - 16.07.2026 15:20 */

.eco-notif-menu {
  display: flex;
  flex-direction: column;
  max-height: min(28rem, calc(100vh - var(--eco-header-h) - 1.5rem));
  overflow: visible;
  color: var(--foreground);
}

.eco-notif-menu[hidden] {
  display: none;
}

.eco-notif-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.eco-notif-menu__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
}

.eco-notif-menu__more {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.eco-notif-menu__more[data-overflow-open="1"] {
  z-index: var(--z-pass-context, 10080);
}

.eco-notif-menu__more .pass-menu.pass-menu--anchored,
.eco-notif-menu__more [data-overflow-dropdown-panel],
.eco-notif-more-panel {
  z-index: var(--z-pass-context, 10080);
  width: -moz-max-content;
  width: max-content;
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 1.5rem));
}

.eco-notif-menu__more .board-context-menu__item {
  white-space: nowrap;
}

.eco-notif-menu__more .board-context-menu__item:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* kompakt ghost trigger — account_overflow override - 16.07.2026 15:20 */

.eco-notif-menu__more [data-overflow-dropdown-trigger],
.eco-notif-menu__more-trigger {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.eco-notif-menu__more [data-overflow-dropdown-trigger]:hover,
.eco-notif-menu__more [data-overflow-dropdown-trigger][aria-expanded="true"],
.eco-notif-menu__more-trigger:hover,
.eco-notif-menu__more-trigger[aria-expanded="true"] {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.eco-notif-menu__more [data-overflow-dropdown-trigger] i,
.eco-notif-menu__more-trigger i {
  font-size: 1.125rem;
  line-height: 1;
}

.eco-notif-menu__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.eco-notif-menu__status {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.eco-notif-menu__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 7.5rem;
}

.eco-notif-menu__loading--more {
  padding: 0.75rem 1rem;
  min-height: 0;
}

.eco-notif-menu__scroll-foot {
  display: block;
  min-height: 1px;
}

.eco-notif-menu__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid #e5e5e5;
  border-top-color: #171717;
  animation: eco-notif-spin 0.75s linear infinite;
}

.eco-notif-menu__spinner--sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

html.dark .eco-notif-menu__spinner {
  border-color: #26262c;
  border-top-color: #e4e4e7;
}

@keyframes eco-notif-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-menu__spinner {
    animation: none;
    border-top-color: #171717;
    opacity: 0.7;
  }

  html.dark .eco-notif-menu__spinner {
    border-top-color: #e4e4e7;
  }
}

.eco-notif-menu__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

.eco-notif-menu__empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.eco-notif-menu__empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 15rem;
}

.eco-notif-menu__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
}

.eco-notif-menu__empty-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-menu__more [data-overflow-dropdown-trigger],
  .eco-notif-menu__more-trigger {
    transition: none;
  }
}

/* eco header notification list items - 16.07.2026 15:51 */

.eco-notif-item {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  transition: background-color 120ms ease;
}

.eco-notif-item:last-child {
  border-bottom: 0;
}

.eco-notif-item:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.eco-notif-item--unread {
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.eco-notif-item--unread:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.eco-notif-item__media {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.eco-notif-item__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.eco-notif-item__avatar-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  line-height: 0;
}

.eco-notif-item__avatar-btn:hover {
  opacity: 0.88;
}

.eco-notif-item__avatar--provider {
  border-radius: 0.5625rem;
}

.eco-notif-item__provider-badge-wrap {
  position: absolute;
  right: -0.125rem;
  bottom: -0.125rem;
  width: 1.0625rem;
  height: 1.0625rem;
  display: block;
  line-height: 0;
  cursor: default;
}

.eco-notif-item__provider-badge {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 0.3125rem;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--background);
  border: 1.5px solid var(--background);
  box-sizing: border-box;
  pointer-events: none;
}

.eco-notif-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.eco-notif-item__title {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--foreground);
}

.eco-notif-item__body-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-item__body-text--quote {
  margin-top: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-left: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  border-radius: 0 0.5rem 0.5rem 0;
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
  -webkit-line-clamp: 4;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.eco-notif-item__actor-name {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.eco-notif-item__actor-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.eco-notif-item__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.0625rem;
  font-size: 0.6875rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.eco-notif-item__provider {
  font-weight: 600;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-item__unread-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--foreground);
  flex-shrink: 0;
}

.eco-notif-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.eco-notif-item__action {
  margin: 0;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  border-radius: 0.5rem;
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.eco-notif-item__action:hover {
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
}

.eco-notif-item__action--primary {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.eco-notif-item__action--primary:hover {
  background: color-mix(in srgb, var(--foreground) 88%, transparent);
  border-color: transparent;
}

.eco-notif-item__action:disabled {
  opacity: 0.5;
  cursor: default;
}

.eco-notif-item__action:disabled:hover {
  background: var(--background);
}

.eco-notif-item__action--primary:disabled:hover {
  background: var(--foreground);
  border-color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  .eco-notif-item,
  .eco-notif-item__action {
    transition: none;
  }
}

/* eco header notification embed card - 16.07.2026 15:55 */

.eco-notif-embed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  transition: background-color 120ms ease, border-color 120ms ease;
}

a.eco-notif-embed {
  cursor: pointer;
}

a.eco-notif-embed:hover {
  background: color-mix(in srgb, var(--foreground) 4.5%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 16%, var(--border));
}

.eco-notif-embed__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 7.5rem;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  overflow: hidden;
}

.eco-notif-embed__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.eco-notif-embed__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5625rem 0.625rem 0.625rem;
  min-width: 0;
}

.eco-notif-embed__site {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.eco-notif-embed__favicon {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.eco-notif-embed__type {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

.eco-notif-embed__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-embed__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-notif-embed--message .eco-notif-embed__preview {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.eco-notif-embed--message .eco-notif-embed__channel {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.eco-notif-embed--message .eco-notif-embed__site {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.eco-notif-embed--message .eco-notif-embed__media {
  max-height: 6.5rem;
  aspect-ratio: 16 / 10;
}

.eco-notif-embed__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 0.75rem;
  margin: 0.25rem 0 0;
}

.eco-notif-embed__field {
  min-width: 0;
}

.eco-notif-embed__field dt {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.eco-notif-embed__field dd {
  margin: 0.0625rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-embed__author {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.eco-notif-embed__author-avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.eco-notif-embed__attachments {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

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

/* eco header mention mesaj preview — kompakt ann-card - 16.07.2026 19:10 */

.eco-notif-msg-preview {
  display: block;
  margin-top: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.eco-notif-msg-frame {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: color-mix(in srgb, var(--foreground) 2.5%, var(--background));
  overflow: hidden;
  min-width: 0;
}

.eco-notif-msg-origin {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  margin: 0;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 3.5%, transparent);
  overflow: hidden;
}

.eco-notif-msg-origin .bm-card__origin-logo {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.1875rem;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.eco-notif-msg-origin .bm-card__origin-icon {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  flex-shrink: 0;
}

.eco-notif-msg-origin .bm-card__origin-space,
.eco-notif-msg-origin .bm-card__origin-channel {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-msg-origin .bm-card__origin-space {
  max-width: 8rem;
}

.eco-notif-msg-origin .bm-card__origin-channel {
  flex-shrink: 1;
  min-width: 0;
}

.eco-notif-msg-origin a.bm-card__origin-space:hover,
.eco-notif-msg-origin a.bm-card__origin-channel:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.eco-notif-msg-origin .bm-card__origin-sep {
  font-size: 0.625rem;
  color: color-mix(in srgb, var(--foreground) 35%, transparent);
  flex-shrink: 0;
}

.eco-notif-msg-frame .bm-card__msg-list.ann-feed__list {
  display: block;
  margin: 0;
  padding: 0.5rem 0.625rem 0.5625rem;
  min-width: 0;
}

.eco-notif-msg-frame .ann-card {
  --ann-avatar-size: 1.75rem;
  --ann-avatar-gap: 0.5rem;
  --ann-msg-size: 0.8125rem;
  --ann-msg-line: 1.4;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  gap: var(--ann-avatar-gap);
}

.eco-notif-msg-frame .ann-card:hover {
  background: transparent;
}

.eco-notif-msg-frame .ann-card__avatar {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
}

.eco-notif-msg-frame .ann-card__header-row {
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
  margin-bottom: 0.125rem;
}

.eco-notif-msg-frame .ann-card__name {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-notif-msg-frame .ann-card__time,
.eco-notif-msg-frame .ann-card__edited,
.eco-notif-msg-frame .pass-bot-tag {
  flex-shrink: 0;
  font-size: 0.625rem;
  white-space: nowrap;
}

.eco-notif-msg-frame .ann-card__content {
  font-size: var(--ann-msg-size);
  line-height: var(--ann-msg-line);
  word-break: break-word;
}

.eco-notif-msg-frame .ann-card__content:not(:has(.ann-card__media)) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.eco-notif-msg-frame .ann-card__media {
  margin-top: 0.375rem;
  max-height: 5.5rem;
  overflow: hidden;
  border-radius: 0.375rem;
}

.eco-notif-msg-frame .ann-card__media-item {
  max-height: 5.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.eco-notif-msg-frame .ann-card__reacts-row,
.eco-notif-msg-frame .ann-card__hover-bar,
.eco-notif-msg-frame .ann-link-preview {
  display: none;
}

.eco-notif-msg-frame .bm-card__msg-missing {
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

/* account main channel layout — extracted from legacy cpds - 24.06.2026 17:00 */

/* kanal sohbet — compose ve feed alt boslugu - 01.07.2026 21:00 */

/* kilitli / yetki yok compose satiri - 16.07.2026 14:57 */

/* kanal compose — dar alanda placeholder ellipsis, mention gizleme, scrollbar gizle - 16.07.2026 02:27 */

/* kanal compose — markdown onizleme (code/del/markers) - 16.07.2026 04:45 */

/* kanal compose — medya ek onizleme seridi - 16.07.2026 02:47 */

/* pass-media-lightbox.css'e tasindi — bu dosya yalnizca geriye uyumluluk icin - 14.07.2026 10:25 */

/* pass-media-lightbox — tam ekran gorsel/video; nav + zoom - 14.07.2026 10:25 */

/* focus, toast, mobile menu, session row, animations — extracted from legacy cpds - 24.06.2026 17:00 */

/* pass toast — sag ust bildirim (normal / warn / error) - 16.07.2026 07:20 */

/* full-page account initial loader — logo + indeterminate bar - 30.06.2026 12:00 */

.initial-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0ms linear 220ms;
}

html.dark .initial-loader {
  background: #0f0f13;
}

.initial-loader.initial-loader--leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.initial-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.initial-loader__brand {
  display: flex;
  align-items: center;
}

.initial-loader__logo-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  animation: initial-loader-brand-in 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.dark .initial-loader__logo-wrap {
  background: #26262c;
  border-color: #3f3f46;
}

.initial-loader__logo {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.initial-loader__bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  background: #e5e5e5;
  overflow: hidden;
  animation: initial-loader-brand-in 420ms cubic-bezier(0.4, 0, 0.2, 1) 70ms both;
}

html.dark .initial-loader__bar {
  background: #26262c;
}

.initial-loader__bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #171717;
  will-change: transform;
  animation: initial-loader-bar-indeterminate 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

html.dark .initial-loader__bar-fill {
  background: #e4e4e7;
}

@keyframes initial-loader-brand-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

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

@keyframes initial-loader-bar-indeterminate {
  0% {
    transform: translateX(-105%) scaleX(0.55);
  }

  45% {
    transform: translateX(15%) scaleX(0.85);
  }

  100% {
    transform: translateX(260%) scaleX(0.55);
  }
}

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

  .initial-loader__logo-wrap,
    .initial-loader__bar,
    .initial-loader__bar-fill {
    animation: none;
  }
}

/* auth sayfa zemini, kart, footer, koyu tema bilesenleri - 24.06.2026 15:00 */

.auth-page-no-select .auth-btn-primary {
  background-color: var(--brand-500, #4c1753);
}

.auth-surface-card img[src*="logo.png"],
.auth-surface-card img[src^="/applications/"][src$="/logo"],
.auth-surface-card img[src*="media.cengel.co/applications/"] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
}

.auth-page-shell {
  background-image: url('/static/vectors/abstract-background.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.auth-surface-card {
  box-shadow: 0px 5px 20px 1px #00000063;
}

.auth-footer-bar {
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.dark .auth-page-no-select .auth-surface-card {
  background-color: #0f0f13 !important;
  border: 1px solid #3f3f46;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65) !important;
}

html.dark .auth-page-no-select .auth-btn-primary {
  background-color: #e4e4e7 !important;
  background-image: none !important;
  color: #18181b !important;
  border-color: transparent !important;
}

html.dark .auth-page-no-select .auth-btn-primary:hover:not(:disabled) {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
}

html.dark .auth-page-no-select .auth-btn-primary:active:not(:disabled) {
  background-color: #d4d4d8 !important;
  color: #09090b !important;
}

html.dark .auth-page-no-select .auth-btn-primary:focus-visible {
  --tw-ring-offset-color: #18181b !important;
  --tw-ring-color: rgba(244, 244, 245, 0.45) !important;
}

html.dark .auth-page-no-select .auth-btn-primary:disabled {
  opacity: 0.5 !important;
}

html.dark .auth-page-no-select .auth-btn-secondary {
  background-color: #27272a !important;
  border-color: #71717a !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-btn-secondary:hover:not(:disabled) {
  background-color: #3f3f46 !important;
  border-color: #a1a1aa !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select #passkeyLoginBtn.auth-btn-secondary {
  background-color: #27272a !important;
  border-color: #52525b !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select #passkeyLoginBtn.auth-btn-secondary:hover:not(:disabled) {
  background-color: #3f3f46 !important;
  border-color: #71717a !important;
  color: #ffffff !important;
}

html.dark .auth-footer-bar {
  background: rgba(9, 9, 11, 0.88) !important;
  border-top-color: rgba(63, 63, 70, 0.9) !important;
}

html.dark .auth-footer-bar a,
html.dark .auth-footer-bar span {
  color: rgba(212, 212, 216, 0.92) !important;
}

html.dark .auth-page-no-select img[src*="logo.png"] {
  filter: invert(1);
}

html.auth-bg-image-off .auth-page-no-select {
  background-image: none !important;
  background-attachment: scroll !important;
}

html:not(.dark).auth-bg-image-off .auth-page-no-select {
  background-color: #e8eaef !important;
}

html:not(.dark).auth-bg-image-off .auth-page-no-select .auth-surface-card {
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 24px rgba(15, 23, 42, 0.07),
        0 20px 48px rgba(15, 23, 42, 0.06) !important;
}

html.dark.auth-bg-image-off .auth-page-no-select {
  background-color: #0f0f13 !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar a,
html:not(.dark).auth-bg-image-off .auth-footer-bar span {
  color: rgba(51, 65, 85, 0.92) !important;
}

html:not(.dark).auth-bg-image-off .auth-footer-bar a:hover {
  color: rgba(15, 23, 42, 0.95) !important;
}

html.dark.auth-bg-image-off .auth-footer-bar {
  background: #0f0f13 !important;
  border-top-color: rgba(63, 63, 70, 0.85) !important;
}

html.dark.auth-bg-image-off .auth-footer-bar a,
html.dark.auth-bg-image-off .auth-footer-bar span {
  color: rgba(228, 228, 231, 0.95) !important;
}

/* auth form field pseudo-states — auth-field hook gerekli - 24.06.2026 15:00 */

.auth-page-no-select input.auth-field:not([class*="h-"]):not([class*="min-h-"]),
.auth-page-no-select select.auth-field {
  min-height: 44px;
  box-sizing: border-box;
}

.auth-page-no-select input.auth-field,
.auth-page-no-select textarea.auth-field,
.auth-page-no-select select.auth-field {
  outline: 1px solid transparent;
  outline-offset: 0;
  transition:
        border-color 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s ease,
        outline-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) .auth-page-no-select .auth-field:-moz-placeholder-shown:hover:not(:focus), html:not(.dark) .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:hover:not(:focus) {
  border-color: #e5e5e5;
  background-color: #fafafa;
}

html:not(.dark) .auth-page-no-select .auth-field:placeholder-shown:hover:not(:focus),
html:not(.dark) .auth-page-no-select textarea.auth-field:placeholder-shown:hover:not(:focus) {
  border-color: #e5e5e5;
  background-color: #fafafa;
}

html:not(.dark) .auth-page-no-select .auth-field:focus,
html:not(.dark) .auth-page-no-select select.auth-field:focus,
html:not(.dark) .auth-page-no-select textarea.auth-field:focus {
  border-color: #a3a3a3;
  background-color: #f5f5f5;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: none;
}

html:not(.dark) .auth-page-no-select .auth-field:focus-visible,
html:not(.dark) .auth-page-no-select select.auth-field:focus-visible,
html:not(.dark) .auth-page-no-select textarea.auth-field:focus-visible {
  outline-color: rgba(64, 64, 64, 0.38);
}

@media (prefers-reduced-motion: reduce) {
  .auth-page-no-select input.auth-field,
    .auth-page-no-select textarea.auth-field,
    .auth-page-no-select select.auth-field {
    transition: none;
  }
}

html.dark .auth-page-no-select {
  color-scheme: dark;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:not(:focus):not(:hover), html.dark .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:not(:focus):not(:hover) {
  background-color: #111116 !important;
  border-color: #3f3f46 !important;
  color: #71717a !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus):not(:hover),
html.dark .auth-page-no-select textarea.auth-field:placeholder-shown:not(:focus):not(:hover),
html.dark .auth-page-no-select select.auth-field:invalid:not(:focus):not(:hover) {
  background-color: #111116 !important;
  border-color: #3f3f46 !important;
  color: #71717a !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus)::-moz-placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:not(:focus)::placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:not(:focus)::placeholder {
  color: #52525b !important;
  opacity: 1;
}

html.dark .auth-page-no-select .auth-field:-moz-placeholder-shown:hover:not(:focus), html.dark .auth-page-no-select textarea.auth-field:-moz-placeholder-shown:hover:not(:focus) {
  background-color: #1c1c24 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:placeholder-shown:hover:not(:focus),
html.dark .auth-page-no-select textarea.auth-field:placeholder-shown:hover:not(:focus),
html.dark .auth-page-no-select select.auth-field:invalid:hover:not(:focus) {
  background-color: #1c1c24 !important;
  border-color: #52525b !important;
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:not(:-moz-placeholder-shown):not(:focus):not(:hover), html.dark .auth-page-no-select textarea.auth-field:not(:-moz-placeholder-shown):not(:focus):not(:hover) {
  background-color: #1e1e26 !important;
  border-color: #5c5c68 !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-field:not(:placeholder-shown):not(:focus):not(:hover),
html.dark .auth-page-no-select textarea.auth-field:not(:placeholder-shown):not(:focus):not(:hover),
html.dark .auth-page-no-select select.auth-field:valid:not(:focus):not(:hover) {
  background-color: #1e1e26 !important;
  border-color: #5c5c68 !important;
  color: #f4f4f5 !important;
}

html.dark .auth-page-no-select .auth-field:not(:-moz-placeholder-shown):hover:not(:focus), html.dark .auth-page-no-select textarea.auth-field:not(:-moz-placeholder-shown):hover:not(:focus) {
  background-color: #2a2a34 !important;
  border-color: #6b6b78 !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-field:not(:placeholder-shown):hover:not(:focus),
html.dark .auth-page-no-select textarea.auth-field:not(:placeholder-shown):hover:not(:focus),
html.dark .auth-page-no-select select.auth-field:valid:hover:not(:focus) {
  background-color: #2a2a34 !important;
  border-color: #6b6b78 !important;
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-field:focus,
html.dark .auth-page-no-select select.auth-field:focus,
html.dark .auth-page-no-select textarea.auth-field:focus {
  background-color: #25252c !important;
  border-color: #73737c !important;
  color: #fafafa !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

html.dark .auth-page-no-select .auth-field:focus-visible,
html.dark .auth-page-no-select select.auth-field:focus-visible,
html.dark .auth-page-no-select textarea.auth-field:focus-visible {
  outline-color: rgba(212, 212, 216, 0.55) !important;
}

html.dark .auth-page-no-select .auth-field:focus::-moz-placeholder {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-field:focus::placeholder {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select input.auth-field,
html.dark .auth-page-no-select textarea.auth-field {
  caret-color: #e4e4e7;
}

html.dark .auth-page-no-select input.auth-field:-webkit-autofill,
html.dark .auth-page-no-select input.auth-field:-webkit-autofill:hover,
html.dark .auth-page-no-select input.auth-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f4f5 !important;
  box-shadow: inset 0 0 0 1000px #1e1e26 !important;
  border-color: #5c5c68 !important;
  -webkit-transition: background-color 99999s ease-out;
  transition: background-color 99999s ease-out;
}

/* auth koyu tema yardimci bilesenleri — oauth, sihirbaz, checkbox - 24.06.2026 15:00 */

html.dark .auth-page-no-select .auth-strength-track {
  background-color: #3f3f46 !important;
}

html.dark .auth-page-no-select .auth-checkbox {
  background-color: #27272a !important;
  border-color: #52525b !important;
}

html.dark .auth-page-no-select .auth-inset {
  background-color: rgba(39, 39, 42, 0.55) !important;
  border: 1px solid #3f3f46;
}

html.dark .auth-page-no-select .auth-inset .text-gray-900,
html.dark .auth-page-no-select .auth-inset .font-medium.text-gray-900 {
  color: #fafafa !important;
}

html.dark .auth-page-no-select .auth-inset .text-gray-600,
html.dark .auth-page-no-select .auth-inset .text-xs.text-gray-600 {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-text-gray-700 {
  color: #d4d4d8 !important;
}

html.dark .auth-page-no-select .auth-icon-link {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select .auth-purple-tile {
  background-color: rgba(88, 28, 135, 0.25) !important;
}

html.dark .auth-page-no-select .auth-purple-tile .text-purple-600 {
  color: #c084fc !important;
}

html.dark .auth-page-no-select a.text-purple-600 {
  color: #c084fc !important;
}

html.dark .auth-page-no-select .auth-amber-box {
  background-color: rgba(120, 53, 15, 0.35) !important;
  border-color: #b45309 !important;
}

html.dark .auth-page-no-select .auth-amber-box .text-amber-700,
html.dark .auth-page-no-select .auth-amber-box .text-amber-600 {
  color: #fcd34d !important;
}

html.dark .auth-page-no-select .auth-amber-box .text-amber-600.ph-clock {
  color: #fbbf24 !important;
}

html.dark .auth-page-no-select .auth-wizard-muted {
  color: #a1a1aa !important;
}

html.dark .auth-page-no-select code.auth-code-block,
html.dark .auth-page-no-select .auth-code-block {
  background-color: #09090b !important;
  border-color: #3f3f46 !important;
  color: #e4e4e7 !important;
}

html.dark .auth-page-no-select .auth-wizard-choice {
  background-color: #09090b !important;
  border-color: #3f3f46 !important;
}

html.dark .auth-page-no-select .auth-wizard-choice p.font-bold {
  color: #fafafa !important;
}

html.dark .auth-page-no-select .peer:checked + .auth-wizard-choice {
  background-color: rgba(88, 28, 135, 0.28) !important;
  border-color: #a855f7 !important;
}

html.dark .auth-page-no-select .auth-alert-info {
  background-color: rgba(30, 58, 138, 0.4) !important;
  border-color: #1e40af !important;
}

html.dark .auth-page-no-select .auth-alert-info p,
html.dark .auth-page-no-select .auth-alert-info .text-blue-800 {
  color: #bfdbfe !important;
}

html.dark .auth-page-no-select .auth-alert-success {
  background-color: rgba(20, 83, 45, 0.25) !important;
  border-color: #166534 !important;
  color: #bbf7d0;
}

html.dark .auth-page-no-select .auth-alert-success > i.ph-bold {
  color: #86efac !important;
}

html.dark .auth-page-no-select .auth-alert-success p {
  color: #bbf7d0 !important;
}

.auth-form-system-theme {
  accent-color: AccentColor;
}

html:not(.dark) .auth-form-system-theme {
  color-scheme: light;
}

html.dark .auth-form-system-theme {
  color-scheme: dark;
}

/* auth page user-select — extracted from legacy cpds - 24.06.2026 17:00 */

/* profil dis baglanti satirlari — js ile olusturulur, mobil sarma + surukleme hayaleti - 24.06.2026 16:30 */

/* datepicker component — extracted from legacy cpds - 24.06.2026 17:00 */

/* account field dropdown panel ac/kapa animasyonu - 30.06.2026 12:00 */

/* language picker panel — extracted from legacy cpds - 24.06.2026 17:00 */

/* overflow menu row z-index — extracted from legacy cpds - 24.06.2026 17:00 */

/* 2fa social profile layout — extracted from legacy cpds - 24.06.2026 17:00 */

/* pass kullanici karti popover — security sosyal onizleme ile birebir - 16.07.2026 04:42 */

/* pass-user-card locked/loader/trigger — popover'dan ayrildi - 15.07.2026 23:00 */

/* pass-user-card activity karti — cover + detay + spotify timeline - 15.07.2026 23:58 */

/* pass-user-card dusunce balonu — custom status, avatarin sag yaninda - 16.07.2026 05:22 */

/* pass-user-card space rolleri — chip satiri, spacing - 16.07.2026 06:32 */

/* pass kullanici karti — arkadaslik aksiyonlari - 17.07.2026 01:10 */

/* pass-tooltip — tek birlesik tooltip; rail motion modeli - 16.07.2026 05:36 */

/* herkese acik sosyal profil — tam sayfa pass-user-card genisletmesi - 30.06.2026 23:45 */

/* misc-login.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-register.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-profile-cropper.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-settings.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-notifications.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-password.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* misc-language-selector.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* space wizard step anim + invite list - 17.07.2026 01:00 */

/* space create wizard panel — orta-buyuk pass_modal - 17.07.2026 01:00 */

/* space wizard logo + erisim alanlari - 17.07.2026 01:00 */

/* misc-admin-table.css — extracted from legacy cpds - 24.06.2026 17:00 */

/* uye paneli basligi — kanal ve sekme varyantlari - 16.07.2026 07:05 */

/* space members panel — panel layout, grup, toggle - 15.07.2026 22:40 */

/* space member row — uye satiri, presence dot, rich presence - 16.07.2026 00:05 */

/* rich presence modal — panel/icerik (shell: pass-modal) - 16.07.2026 06:00 */

.rich-presence-modal.hidden {
  display: none !important;
}

body.rich-presence-modal-open {
  overflow: hidden;
}

/* icerik kendi scrollunu acmasin — kart boya gore uzar - 16.07.2026 06:00 */

.rich-presence-modal__panel {
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  overflow: hidden;
}

.rich-presence-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 0.75rem;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.rich-presence-modal__header-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.rich-presence-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.rich-presence-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.rich-presence-modal__close:hover .rich-presence-modal__close-inner {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.rich-presence-modal__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 18px 20px;
}

.rich-presence-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 0.5rem;
  padding: 14px 20px 18px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.rich-presence-modal__btn {
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}

.rich-presence-modal__btn--ghost {
  border-color: var(--border, #e5e5e5);
  background: transparent;
  color: inherit;
}

.dark .rich-presence-modal__btn--ghost {
  border-color: #3f3f46;
}

.rich-presence-modal__btn--primary {
  background: var(--ink, #171717);
  color: var(--background, #ffffff);
}

.dark .rich-presence-modal__btn--primary {
  background: #e4e4e7;
  color: #0f0f13;
}

.rich-presence-modal__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* rich presence modal form — composer, sure, hizli secim - 15.07.2026 20:20 */

.rich-presence-modal__composer {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.rich-presence-modal__emoji-btn {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: var(--surface-subtle, #f5f5f5);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.dark .rich-presence-modal__emoji-btn {
  border-color: #3f3f46;
  background: #18181b;
}

.rich-presence-modal__emoji-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.rich-presence-modal__emoji-img {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.rich-presence-modal__emoji-placeholder {
  font-size: 1.25rem;
  opacity: 0.45;
  line-height: 1;
}

.rich-presence-modal__input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* input + select ayni height/border/radius/font - 15.07.2026 20:20 */

.rich-presence-modal__input,
.rich-presence-modal__dropdown-trigger {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: transparent;
  color: inherit;
  font-size: 0.9375rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.rich-presence-modal__input {
  padding-right: 3rem;
}

.dark .rich-presence-modal__input,
.dark .rich-presence-modal__dropdown-trigger {
  border-color: #3f3f46;
}

.rich-presence-modal__input:focus,
.rich-presence-modal__dropdown-trigger[aria-expanded="true"] {
  border-color: var(--ink, #171717);
}

.dark .rich-presence-modal__input:focus,
.dark .rich-presence-modal__dropdown-trigger[aria-expanded="true"] {
  border-color: #a1a1aa;
}

.rich-presence-modal__count {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  opacity: 0.45;
  pointer-events: none;
}

.rich-presence-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rich-presence-modal__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.45;
}

.rich-presence-modal__dropdown {
  position: relative;
}

.rich-presence-modal__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
}

.rich-presence-modal__dropdown-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 2;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 0.75rem;
  background: var(--background, #ffffff);
  max-height: 12rem;
  overflow: auto;
}

.dark .rich-presence-modal__dropdown-panel {
  border-color: #3f3f46;
  background: #18181b;
}

.rich-presence-modal__dropdown-panel[hidden] {
  display: none !important;
}

.rich-presence-modal__dropdown-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}

.rich-presence-modal__dropdown-option:hover,
.rich-presence-modal__dropdown-option[aria-selected="true"] {
  background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.06));
}

.rich-presence-modal__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.rich-presence-modal__preset {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}

.rich-presence-modal__preset:hover {
  background: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.06));
}

.rich-presence-modal__preset-emoji {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rich-presence-modal__preset-emoji-img {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.rich-presence-modal__preset-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* role color picker — extracted from legacy cpds - 24.06.2026 17:00 */

/* spaces sidebar tree lines — extracted from legacy cpds - 24.06.2026 17:00 */

/* spaces list pinned grid, meta badges, pin control — /spaces - 16.07.2026 18:58 */

/* /spaces home accordion + discover - 17.07.2026 01:40 */

/* spaces sidebar footer self panel + status menu - 16.07.2026 19:41 */

/* sp-sidebar shell and modals part 1 — extracted from legacy cpds - 24.06.2026 17:00 */

/* space tab / kanal form modallari — panel/icerik (shell: pass-modal) - 16.07.2026 14:25 */

/* sp-sidebar sekmeleri — discord kanal listesi hizasi - 01.07.2026 13:45 */

/* space sidebar header menu ve kategori + - 01.07.2026 22:00 */

/* space settings layout — extracted from legacy cpds - 24.06.2026 17:00 */

/* ayarlar > uye rolleri, erisim segmented control, rol sirasi — space-settings.css'ten ayrildi - 06.07.2026 18:15 */

/* ayarlar > uyeler tablo grid — table etiketi yok - 07.07.2026 01:40 */

/* space settings modal — panel/icerik (shell: pass-modal) - 16.07.2026 06:00 */

/* paylasilan modal shell — backdrop / stage / panel + minimal pop - 16.07.2026 06:05 */

/* dis baglanti uyari — lead + embed slot (panel layout account-confirm-modal) - 16.07.2026 05:55 */

.ext-link-modal__lead {
  text-wrap: pretty;
}

.ext-link-modal__embed {
  margin-top: 1.25rem;
  text-align: left;
}

/* ayarlar > depolama ve plan kartlari — modal.css'ten ayrildi - 06.07.2026 18:15 */

/* board viewport and toolbar — extracted from legacy cpds - 24.06.2026 17:00 */

/* board boxes and context — extracted from legacy cpds - 24.06.2026 17:00 */

/* board activity panel — extracted from legacy cpds - 24.06.2026 17:00 */

/* pass context menu — soft elevation + placement transform - 16.07.2026 06:57 */

/* audit log page — extracted from legacy cpds - 30.06.2026 12:00 */

/* space general hero, stats, banner - 01.07.2026 14:00 */

/* space general activity cards - 01.07.2026 14:00 */

/* space general details panel and actions - 30.06.2026 12:00 */

/* ann-channel-feed.css - 24.06.2026 17:45 */

/* mesaj tarih bolucusu — pill etiket, avatar hizasinda cizgi - 14.07.2026 07:56 */

/* okunmamis mesaj bolucu — avatar hizasinda, tarih bolucusunden daha parlak - 14.07.2026 07:56 */

/* pass-bot-tag — bot/sistem rozeti; kart vurgusunda da okunur - 16.07.2026 16:41 */

/* mesaj inline duzenleme — compose input row ile ayni bilesen - 02.07.2026 15:05 */

/* mesaj tepkileri — pill, animasyon, hover - 03.07.2026 06:20 */

/* link onizleme embed — summary (sag thumb) / summary_large_image - 16.07.2026 06:34 */

.ann-link-preview {
  position: relative;
  margin-top: 0.35rem;
  margin-bottom: 0;
  padding: 0.35rem 0.75rem 0.35rem 0.75rem;
  border-left: 4px solid var(--ann-link-preview-accent, #6b7280);
  border-radius: 0 0.25rem 0.25rem 0;
  max-width: 32rem;
  background: color-mix(
    in srgb,
    var(--ann-link-preview-accent, #6b7280) 4%,
    transparent
  );
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ann-link-preview:hover,
.ann-link-preview:focus-within {
  background: color-mix(
    in srgb,
    var(--ann-link-preview-accent, #6b7280) 7%,
    transparent
  );
}

.dark .ann-link-preview {
  background: color-mix(
    in srgb,
    var(--ann-link-preview-accent, #6b7280) 6%,
    transparent
  );
}

.dark .ann-link-preview:hover,
.dark .ann-link-preview:focus-within {
  background: color-mix(
    in srgb,
    var(--ann-link-preview-accent, #6b7280) 10%,
    transparent
  );
}

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

.ann-link-preview__inner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ann-link-preview__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ann-link-preview__site {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.ann-link-preview__favicon {
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.ann-link-preview__site-name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground, #171717);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .ann-link-preview__site-name {
  color: var(--foreground, #e4e4e7);
}

.ann-link-preview__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground, #171717);
  text-decoration: none;
  word-break: break-word;
}

.ann-link-preview__title:hover {
  text-decoration: underline;
}

.dark .ann-link-preview__title {
  color: var(--foreground, #e4e4e7);
}

.ann-link-preview__description {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #171717) 62%, transparent);
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .ann-link-preview__description {
  color: color-mix(in srgb, var(--foreground, #e4e4e7) 68%, transparent);
}

.ann-link-preview--summary .ann-link-preview__inner {
  flex-direction: row;
  align-items: stretch;
  gap: 0.75rem;
}

.ann-link-preview--summary .ann-link-preview__body {
  flex: 1;
}

.ann-link-preview--summary .ann-link-preview__thumb-btn {
  flex-shrink: 0;
  width: 5.5rem;
  min-height: 4.5rem;
  align-self: stretch;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 0.375rem;
  overflow: hidden;
}

.ann-link-preview--summary .ann-link-preview__thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 4.5rem;
  max-height: 5.5rem;
  border-radius: 0.375rem;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.ann-link-preview--large .ann-link-preview__inner {
  flex-direction: column;
}

.ann-link-preview--large .ann-link-preview__image-btn {
  display: block;
  margin: 0.35rem 0 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  max-width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}

.ann-link-preview--large .ann-link-preview__image {
  display: block;
  max-width: 100%;
  max-height: 18rem;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.ann-card--continued .ann-link-preview {
  margin-top: 0.25rem;
}

/* pass-mention — kullanici/kanal/url; sadece renk, bold/appearance yok - 16.07.2026 03:55 */

.pass-mention {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #3d4ff0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button.pass-mention,
a.pass-mention {
  font-weight: 400;
}

a.pass-mention,
a.pass-mention:hover,
a.pass-mention:focus,
a.pass-mention:focus-visible,
.ann-markdown a.pass-mention,
.ann-markdown a.pass-mention:hover {
  text-decoration: none;
  color: #3d4ff0;
  background: transparent;
}

.dark .ann-markdown a.pass-mention,
.dark .ann-markdown a.pass-mention:hover {
  color: #aeb6ff;
  background: transparent;
}

.pass-mention:hover {
  background: transparent;
  color: #2a38d4;
}

.dark .pass-mention {
  background: transparent;
  color: #aeb6ff;
}

.dark .pass-mention:hover {
  background: transparent;
  color: #d4d8ff;
}

.pass-mention-menu {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 8px;
  background: var(--background, #fff);
  padding: 4px;
}

.pass-mention-menu.hidden {
  display: none;
}

.pass-mention-menu__title {
  padding: 8px 10px 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground, #000) 50%, transparent);
}

.pass-mention-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  padding: 8px 10px;
  text-align: left;
}

.pass-mention-menu__item:hover,
.pass-mention-menu__item--active {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.pass-mention-menu__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.pass-mention-menu__hint {
  margin-left: auto;
  flex-shrink: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.pass-mention-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

/* notr ikon zemin — secili satirdan ayri kalsin - 16.07.2026 03:55 */

.pass-mention-menu__avatar--all,
.pass-mention-menu__avatar--tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground, #000) 10%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
  font-size: 0.9375rem;
}

.pass-mention-menu__item:hover .pass-mention-menu__avatar--all,
.pass-mention-menu__item--active .pass-mention-menu__avatar--all,
.pass-mention-menu__item:hover .pass-mention-menu__avatar--tab,
.pass-mention-menu__item--active .pass-mention-menu__avatar--tab {
  background: color-mix(in srgb, var(--foreground, #000) 16%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

/* pass-emoji — twemoji gorselleri ve mesaj tooltip - 16.07.2026 05:28 */

.pass-emoji {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin: 0 0.05em;
  vertical-align: -0.2em;
  -o-object-fit: contain;
     object-fit: contain;
}

/* mesaj emoji tooltip — emoji solda, ad ve kod sagda - 15.07.2026 23:42 */

.pass-emoji-wrap {
  position: relative;
  display: inline-block;
  vertical-align: -0.2em;
  line-height: 0;
  outline: none;
}

.pass-emoji-wrap > .pass-emoji {
  margin: 0;
}

.pass-emoji-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: -moz-max-content;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: var(--sidebar-item-r, 8px);
  background: var(--background, #fff);
  color: var(--foreground, #000);
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.25rem);
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 160ms ease;
}

.pass-emoji-tooltip__emoji {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.pass-emoji-tooltip__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 auto;
}

.pass-emoji-tooltip__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: normal;
}

.pass-emoji-tooltip__code {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  white-space: nowrap;
}

.pass-emoji-wrap:hover .pass-emoji-tooltip,
.pass-emoji-wrap:focus-visible .pass-emoji-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* user-card floating — ayni tooltip bileseni, fixed konum - 16.07.2026 05:28 */

.pass-emoji-tooltip.pass-emoji-tooltip--floating {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 10200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.25rem);
}

.pass-emoji-tooltip.pass-emoji-tooltip--floating.pass-emoji-tooltip--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pass-emoji-tooltip,
    .pass-emoji-tooltip--floating {
    transition: none;
  }
}

/* yalnizca emoji mesaji — en fazla 3, 2.5x boyut - 15.07.2026 23:42 */

.ann-markdown--emoji-lg .pass-emoji {
  width: 3.125em;
  height: 3.125em;
}

.ann-markdown--emoji-lg .pass-emoji-wrap {
  vertical-align: -0.35em;
}

/* pass emoji picker — kabuk, grid, viewport max - 16.07.2026 05:32 */

.pass-emoji-picker {
  position: fixed;
  z-index: 12010;
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 448px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 14px;
  background: var(--background, #fff);
  overflow: visible;
  opacity: 0;
  transform: scale(0.98);
  transform-origin: top center;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  /* user popover ile ayni yukselme - 16.07.2026 05:32 */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

.dark .pass-emoji-picker {
  box-shadow: 0 4px 18px color-mix(in srgb, black 35%, transparent);
}

.pass-emoji-picker:not(.hidden) {
  opacity: 1;
  transform: scale(1);
}

/* uste acilis — transform-origin alt kenar - 15.07.2026 23:42 */

.pass-emoji-picker--above {
  transform-origin: bottom center;
}

.pass-emoji-picker.hidden {
  display: none;
}

.pass-emoji-picker__head {
  padding: 12px 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  border-radius: 14px 14px 0 0;
  background: var(--background, #fff);
  flex-shrink: 0;
}

.pass-emoji-picker__search-wrap {
  position: relative;
  display: block;
}

.pass-emoji-picker__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
  pointer-events: none;
  transition: color 140ms ease-out;
}

.pass-emoji-picker__search-wrap:focus-within .pass-emoji-picker__search-icon {
  color: color-mix(in srgb, var(--foreground, #000) 62%, transparent);
}

.pass-emoji-picker__search {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 10px;
  padding: 0.625rem 0.75rem 0.625rem 2.375rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: var(--foreground, #000);
  box-sizing: border-box;
  outline: none;
  transition:
        border-color 140ms ease-out,
        background-color 140ms ease-out;
}

.pass-emoji-picker__search::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.pass-emoji-picker__search::placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.pass-emoji-picker__search:hover {
  border-color: color-mix(in srgb, var(--foreground, #000) 16%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
}

.pass-emoji-picker__search:focus {
  border-color: color-mix(in srgb, var(--foreground, #000) 24%, transparent);
  background: var(--background, #fff);
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  outline-offset: 1px;
}

.pass-emoji-picker__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  margin-right: 2px;
  cursor: pointer;
  opacity: 0.45;
  background:
        linear-gradient(45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%);
  color: color-mix(in srgb, var(--foreground, #000) 70%, transparent);
}

.pass-emoji-picker__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: visible;
  background: var(--background, #fff);
}

.pass-emoji-picker__tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 3px;
  padding: 8px 10px;
  overflow: visible;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  flex-shrink: 0;
  background: var(--background, #fff);
}

.pass-emoji-picker__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  border: none;
  border-radius: 9px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: background 120ms ease-out;
}

.pass-emoji-picker__tab:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
}

.pass-emoji-picker__tab--active {
  background: color-mix(in srgb, var(--foreground, #000) 9%, transparent);
}

.pass-emoji-picker__tab-icon {
  display: block;
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: opacity 120ms ease-out;
}

.pass-emoji-picker__tab:hover .pass-emoji-picker__tab-icon {
  opacity: 0.72;
}

.pass-emoji-picker__tab--active .pass-emoji-picker__tab-icon {
  opacity: 1;
}

.pass-emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 10px 6px 10px 10px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .pass-emoji-picker {
    transition: none;
    transform: none;
  }

  .pass-emoji-picker__grid {
    scroll-behavior: auto;
  }
}

/* pass emoji picker — emoji hucre, onizleme, suggest - 16.07.2026 05:36 */

.pass-emoji-picker__loading {
  grid-column: 1 / -1;
  align-self: center;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

.pass-emoji-picker__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: background 100ms ease-out;
}

.pass-emoji-picker__emoji .pass-emoji {
  width: 34px;
  height: 34px;
  margin: 0;
}

.pass-emoji-picker__emoji:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.pass-emoji-picker__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 0;
  margin: 0;
  padding: 12px;
  text-align: center;
}

.pass-emoji-picker__empty-icon {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 12px;
}

.pass-emoji-picker__empty-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground, #000);
}

.pass-emoji-picker__empty-sub {
  margin: 6px 0 0;
  max-width: 220px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.pass-emoji-picker__preview {
  flex-shrink: 0;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 0 0 14px 14px;
}

.pass-emoji-picker__preview-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
}

.pass-emoji-picker__preview-inner--empty {
  visibility: hidden;
}

.pass-emoji-picker__preview-emoji {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.pass-emoji-picker__preview-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pass-emoji-picker__preview-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pass-emoji-picker__preview-code {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  white-space: nowrap;
}

.pass-emoji-suggest {
  position: fixed;
  z-index: 12005;
  max-height: min(240px, calc(100dvh - 16px));
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 8px;
  background: var(--background, #fff);
  padding: 4px;
}

.pass-emoji-suggest.hidden {
  display: none;
}

.pass-emoji-suggest__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  padding: 8px 10px;
  text-align: left;
}

.pass-emoji-suggest__item--active,
.pass-emoji-suggest__item:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.pass-emoji-suggest__label {
  font-weight: 500;
}

/* emoji picker ve oneri — compose baglami - 01.07.2026 18:00 */

.pass-emoji-picker {
  border-radius: 12px;
}

.pass-emoji-picker__head {
  border-radius: 12px 12px 0 0;
}

.pass-emoji-picker__preview {
  border-radius: 0 0 12px 12px;
}

.pass-emoji-suggest {
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
}

.pass-emoji-suggest__item {
  border-radius: 8px;
  padding: 9px 10px;
  gap: 10px;
}

.pass-emoji-suggest__item .pass-emoji {
  width: 22px;
  height: 22px;
}

.pass-emoji-suggest__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.pass-emoji-suggest__item--active .pass-emoji-suggest__label,
.pass-emoji-suggest__item:hover .pass-emoji-suggest__label {
  color: var(--foreground, #000);
}

/* mention / unread sidebar — kategori + ile ayni sag hiza - 16.07.2026 18:35 */

.sp-sidebar__tab {
  --sp-tab-trailing-slot: calc(0.875rem + 4px);
  /* .sp-sidebar__cat-add - 16.07.2026 18:35 */
}

.sp-sidebar__tab-mention {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  height: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ed4245;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.sp-sidebar__tab-mention[hidden] {
  display: none;
}

.sp-sidebar__tab--active .sp-sidebar__tab-mention {
  display: none;
}

/* discord-tarzi okunmamis nokta — kategori + ile ayni sag hiza - 16.07.2026 18:35 */

.sp-sidebar__tab-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  height: var(--sp-tab-trailing-slot, calc(0.875rem + 4px));
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.sp-sidebar__tab-unread::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.dark .sp-sidebar__tab-unread::before {
  background: color-mix(in srgb, var(--foreground) 78%, transparent);
}

.sp-sidebar__tab-unread[hidden] {
  display: none;
}

.sp-sidebar__tab--active .sp-sidebar__tab-unread {
  display: none;
}

.spaces-sb-mention-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ed4245;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

.spaces-sb-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

/* pass rail sag-alt sayi rozeti — koseden hafif tasan - 16.07.2026 19:56 */

.pass-rail-item__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  border: 2px solid var(--eco-header-bg, #ffffff);
  background: #ed4245;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  pointer-events: none;
}

html.dark .pass-rail-item__badge {
  border-color: var(--eco-header-bg, #0f0f13);
}

.pass-rail-item__badge[hidden] {
  display: none !important;
}

.pass-mention--all {
  cursor: default;
  background: transparent;
  color: #dc2626;
  font-weight: 400;
}

.dark .pass-mention--all {
  background: transparent;
  color: #f87171;
}

/* space channel intro — feed basi hos geldin blogu - 24.06.2026 21:15 */

/* kanal intro aksiyon kartlari — aciklama, izinler, webhook - 30.06.2026 22:15 */

/* kanal intro karsilama onizlemesi — gercek mesaj karti gorunumu - 01.07.2026 20:15 */

/* sistem mesajlari — sola yasli, satir ici tarih damgasi, actor hover - 16.07.2026 06:24 */

/* sistem hesabi mesajlari — normal kart gibi; accent serit/hover yok - 17.07.2026 01:00 */

/* root mesaj alti yanit kutusu — plan formu - 05.07.2026 07:30 */

.reply-starter-wrap {
  margin-top: 8px;
}

.reply-starter {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.reply-starter:hover {
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
}

.reply-starter__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
}

.reply-starter__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reply-starter__preview {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground, #000);
  word-break: break-word;
}

.reply-starter__meta {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

/* kanal yanit split-pane — sol kanal / sag yanit - 05.07.2026 07:05 */

.ann-page--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
}

.ann-page--split > .ann-feed-pane,
.ann-page--split > .ann-reply-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ann-reply-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

.ann-reply-pane[hidden] {
  display: none !important;
}

.ann-reply-pane .ann-feed-pane {
  flex: 1;
  min-height: 0;
}

.ann-reply-pane__header {
  flex-shrink: 0;
  position: relative;
  padding-right: calc(var(--account-sidebar-inner-x, 12px) + 30px + 8px);
  overflow: visible;
}

.ann-reply-pane__header.space-members-panel__header {
  overflow: visible;
}

.ann-reply-pane__head {
  flex: 1;
  min-width: 0;
}

.ann-reply-pane__meta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-reply-pane__actions {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 6px;
  z-index: var(--z-pass-context, 10080);
}

.ann-reply-pane__actions .pass-menu.pass-menu--anchored {
  z-index: var(--z-pass-context, 10080);
}

.ann-reply-pane__close {
  position: absolute;
  right: var(--account-sidebar-inner-x, 12px);
  top: 50%;
  transform: translateY(-50%);
}

.ann-card--reply-root .ann-card__hover-bar [data-msg-reply] {
  display: none;
}

.ann-reply-pane .ann-card:not(.ann-card--reply-root) .ann-card__hover-bar [data-msg-reply] {
  display: none;
}

.ann-page--split .ann-feed-pane--dimmed,
.ann-page--split .ann-reply-pane--dimmed {
  opacity: 0.58;
  transition: opacity 140ms ease-out;
}

.ann-page--split .ann-feed-pane--focused,
.ann-page--split .ann-reply-pane--focused {
  opacity: 1;
}

/* mesaj/bookmark gorsel — dinamik boyut, loader = medya kutusu - 14.07.2026 09:27 */

/* pass-video-player — kabuk, video, overlay - 16.07.2026 02:13 */

/* pass-video-player — kontrol bari, scrubber, butonlar - 16.07.2026 00:43 */

/* ann-channel-card.css - 24.06.2026 17:45 */

/* ann-markdown — mesaj icerik tipografi (code/pre/del/strong) - 16.07.2026 04:38 */

/* mesaj kod blogu — satir numaralari - 16.07.2026 06:49 */

/* ann-compose.css - 24.06.2026 17:45 */

/* kanal webhook modali — genis split layout + empty - 16.07.2026 13:19 */

/* kanal webhook — full-width ayar formu + token - 16.07.2026 13:28 */

/* messages dm page — extracted from legacy cpds - 24.06.2026 17:00 */

/* bookmarks sayfasi stilleri — pinterest tarzi masonry feed - 12.07.2026 20:03 */

/* bookmarks hero — arama motoru / ai prompt compose estetiginde merkezi giris - 10.07.2026 05:10 */

/* mesaj bookmark karti — gomulu ann-card frame - 17.07.2026 01:08 */

/* link bookmark karti — ortak kart ritmine uyar, tip-ozel override yok - 12.07.2026 20:46 */

/* bookmark karti meta — kaydedilme + paylasan footer - 17.07.2026 01:08 */

/* staff admin split shell - 24.06.2026 17:00 */

/* developers-shell-1 — hud controls + shell chrome - 16.07.2026 17:30 */

/* developers-shell-2 — doc typography + code shell - 16.07.2026 18:40 */

/* developers-shell-3 — code copy + prism tokens - 16.07.2026 18:30 */

/* developers-shell-http — http/uri prism token colors + presence swatches - 16.07.2026 19:40 */

/* developers-shell-4 — docs tables - 16.07.2026 18:32 */

/* developers-shell-5 — futuristic chrome + mobile - 16.07.2026 16:17 */

/* developers-shell-6 — sidebar nav + drawer + footer - 16.07.2026 17:40 */

/* developers-shell-1 — hud header - 16.07.2026 17:30 */

/* developers-shell-8 — interaction polish (futurist, flat) - 16.07.2026 18:16 */

/* developers-shell-9 — flat doc sections + chips - 16.07.2026 18:55 */

/* developers-shell-10 — footer pin + columns (header chrome) - 16.07.2026 20:00 */

/* developers-shell-11 — footer base + custom scrollbars - 16.07.2026 20:05 */

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

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

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

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

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

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

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

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter, Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

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

:root {
  --background: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #f5f5f5;
  --foreground: #171717;
  --ink-muted: #737373;
  --ink-400: #a3a3a3;
  --ink-500: #737373;
  --ink-600: #525252;
  --ink-700: #404040;
  --ink-900: #0a0a0a;
  --border: #e5e5e5;
  --brand-50: #faf8fb;
  --brand-100: #f3eef5;
  --brand-200: #e8d9eb;
  --brand-300: #d4b8d8;
  --brand-400: #b88bc0;
  --brand-500: #4c1753;
  --brand-600: #3d1250;
  --brand-700: #2e0d3d;
  --brand-800: #1f0829;
  --brand-900: #0f0415;
  --cengel-scroll-size: 8px;
  --cengel-scroll-size-thin: 6px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: color-mix(in srgb, var(--foreground) 22%, transparent);
  --cengel-scroll-thumb-hover: color-mix(in srgb, var(--foreground) 40%, transparent);
  --z-dropdown: 120;
  --z-board-ui: 200;
  --z-pass-context: 10080;
  --z-popover: 10090;
  --z-user-card: 10090;
  --z-user-card-nested: 10100;
  /* emoji picker (12010) uzerinde - 16.07.2026 05:36 */
  --z-tooltip: 12020;
  /* tipografi olcegi — bir kademe yukari (13px→14px vb.) - 01.07.2026 15:00 */
  --text-3xs: 0.75rem;
  --text-2xs: 0.8125rem;
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1rem;
}

.dark {
  --background: #0f0f13;
  --surface: #0f0f13;
  --surface-subtle: #17171c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --ink-400: #a1a1aa;
  --ink-500: #a1a1aa;
  --ink-600: #d4d4d8;
  --ink-700: #e4e4e7;
  --ink-900: #ffffff;
  --border: #26262c;
  --brand-50: #0f0f13;
  --brand-100: #17171c;
  --brand-200: #26262c;
  --brand-300: #3f3f46;
  --brand-400: #71717a;
  --brand-500: #a1a1aa;
  --brand-600: #e4e4e7;
  --brand-700: #f4f4f5;
  --brand-800: #fafafa;
  --brand-900: #ffffff;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  touch-action: pan-x pan-y;
}

hr {
  border-color: var(--border);
}

.dark input[type="checkbox"]:not(:checked) {
  background-color: var(--surface-subtle) !important;
  border-color: var(--border) !important;
}

.dark input[type="checkbox"]:checked {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}

.dark input[type="checkbox"]:checked::before {
  border-color: #000000 !important;
}

.dark .bg-brand-600 {
  color: #000000 !important;
}

.dark .bg-brand-600:hover {
  background-color: var(--brand-700) !important;
}

.dark .text-ink-600,
  .dark .text-ink-500 {
  color: #a1a1aa !important;
}

.dark .hover\:bg-ink-50:hover {
  background-color: var(--surface-subtle) !important;
}

html.cengel-theme-switch-instant,
  html.cengel-theme-switch-instant *,
  html.cengel-theme-switch-instant *::before,
  html.cengel-theme-switch-instant *::after {
  transition: none !important;
  animation: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
}

html::-webkit-scrollbar {
  width: var(--cengel-scroll-size);
  height: var(--cengel-scroll-size);
}

html::-webkit-scrollbar-track {
  background: var(--cengel-scroll-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

html.dark img[src*="assets/logo.png"] {
  filter: invert(1);
}

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

.container {
  width:       100%;
}

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

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

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

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

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

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

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

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

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

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

.cengel-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
}

.cengel-scroll::-webkit-scrollbar {
  width: var(--cengel-scroll-size);
  height: var(--cengel-scroll-size);
}

.cengel-scroll::-webkit-scrollbar-track {
  background: var(--cengel-scroll-track);
}

.cengel-scroll::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.cengel-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

.cengel-scroll--thin {
  --cengel-scroll-size: var(--cengel-scroll-size-thin);
}

.cengel-scroll--thin::-webkit-scrollbar-track {
  margin: 0.5rem 0;
}

/* scrollbar gizli — hoverda gorunur - 24.06.2026 14:00 */

.cengel-scroll-hover {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.cengel-scroll-hover:hover {
  scrollbar-color: var(--cengel-scroll-thumb) var(--cengel-scroll-track);
}

.cengel-scroll-hover::-webkit-scrollbar {
  width: var(--cengel-scroll-size-thin);
}

.cengel-scroll-hover::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}

.cengel-scroll-hover:hover::-webkit-scrollbar-thumb {
  background-color: var(--cengel-scroll-thumb);
}

.cengel-scroll-hover:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--cengel-scroll-thumb-hover);
}

.ph,
  .ph-bold,
  .ph-fill {
  font-weight: normal !important;
  font-synthesis: none;
}

@keyframes ph-spin {
  to {
    transform: rotate(360deg);
  }
}

.ph-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: ph-spin 0.85s linear infinite;
}

.widget-ph {
  font-size: 1.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.widget-ph-sm {
  font-size: 1rem;
}

.widget-ph-lg {
  font-size: 1.25rem;
}

.dark .widget-ph-muted {
  color: var(--ink-muted);
}

.widget-ph-muted {
  color: var(--ink-muted);
}

/* account split layout, uf-badge — shell wrappers migrated to utilities - 24.06.2026 12:00 */

.uf-badge {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  cursor: pointer;
}

.uf-badge__img {
  cursor: pointer;
}

.uf-badge__tip {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 10;
  margin-bottom: 0.6875rem;
  display: flex;
  min-width: -moz-max-content;
  min-width: max-content;
  max-width: 14rem;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: none;
}

.uf-badge:hover .uf-badge__tip,
.uf-badge:focus-within .uf-badge__tip {
  opacity: 1;
  visibility: visible;
}

.uf-badge__bubble {
  display: block;
  padding: 0.375rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--foreground) 10%, transparent),
                0 1px 3px color-mix(in srgb, var(--foreground) 6%, transparent);
}

.dark .uf-badge__bubble {
  box-shadow: 0 2px 14px color-mix(in srgb, #000 45%, transparent),
                0 1px 4px color-mix(in srgb, #000 35%, transparent);
}

.account-split-inner {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  align-items: stretch;
}

#account-static-sidebar {
  width: var(--account-static-sidebar-w);
  max-width: var(--account-static-sidebar-w);
  min-width: var(--account-static-sidebar-w);
  overflow: visible;
}

#account-static-sidebar > div:first-child {
  width: var(--account-static-sidebar-w);
  height: var(--account-static-sidebar-w);
  min-height: var(--account-static-sidebar-w);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#account-nav-rail {
  width: 100%;
  max-width: var(--account-static-sidebar-w);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .account-desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--account-split-sidebar-w);
    min-width: var(--account-split-sidebar-w);
    max-width: var(--account-split-sidebar-w);
    min-height: 100%;
    align-self: stretch;
    top: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--eco-header-border);
    overflow: hidden;
  }

  .account-desktop-sidebar .sidebar-bottom {
    flex-shrink: 0;
    margin-top: auto;
  }

  .account-desktop-sidebar > nav {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* spaces-sb-inner ile ayni ust/yatay bosluk — logo baslangic hizasi - 16.07.2026 04:10 */

  .account-desktop-sidebar .sidebar-nav-inner {
    padding: var(--split-sidebar-inset-y) var(--split-sidebar-inset-x) var(--split-sidebar-inset-bottom);
  }
}

.account-nav-rail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* rail tamamı tek scroll — cubuk gizli - 17.07.2026 00:48 */

#account-nav-rail {
  gap: var(--sidebar-gap-tight);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#account-nav-rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* help ustunde soft fade — scroll icerik yumusak kaybolur - 17.07.2026 00:54 */

.account-nav-rail-bottom {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--eco-header-pad) var(--eco-header-pad);
  background: var(--eco-header-bg, #ffffff);
}

.account-nav-rail-bottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(
        to top,
        var(--eco-header-bg, #ffffff) 0%,
        color-mix(in srgb, var(--eco-header-bg, #ffffff) 55%, transparent) 45%,
        transparent 100%
    );
}

.pass-rail-item {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-btn-size);
  height: var(--rail-btn-size);
  flex-shrink: 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  -webkit-font-smoothing: antialiased;
  overflow: visible;
}

/* tasan rozet altindaki rail itemin ustunde kalsin - 16.07.2026 19:55 */

.pass-rail-item:has(> .pass-rail-item__badge:not([hidden])) {
  z-index: 2;
}

.pass-rail-item__icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  transition: background-color 160ms ease, border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pass-rail-item__icon {
  font-size: var(--rail-btn-icon-size);
  line-height: 1;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 160ms ease, color 160ms ease;
}

.pass-rail-item__icon--fill {
  opacity: 0;
  pointer-events: none;
}

.pass-rail-item__icon--outline,
.pass-rail-item__icon--solo {
  opacity: 1;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

.pass-rail-item:hover .pass-rail-item__icon-wrap {
  background: var(--rail-hover-bg);
}

.pass-rail-item:not([data-rail-active="true"]):hover .pass-rail-item__icon-wrap {
  border-radius: 16px;
}

.pass-rail-item--space:not([data-rail-active="true"]):hover .pass-rail-space-avatar {
  border-radius: 16px;
}

.pass-rail-item:hover .pass-rail-item__icon--outline,
.pass-rail-item:hover .pass-rail-item__icon--solo {
  color: color-mix(in srgb, var(--foreground, #000) 86%, transparent);
}

.pass-rail-item:focus-visible {
  outline: none;
}

.pass-rail-item:focus-visible .pass-rail-item__icon-wrap {
  background: var(--rail-hover-bg);
}

.pass-rail-item[data-rail-active="true"] .pass-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-active);
  background: var(--rail-active-bg);
}

.pass-rail-item[data-rail-active="true"] .pass-rail-item__icon--outline {
  opacity: 0;
}

.pass-rail-item[data-rail-active="true"] .pass-rail-item__icon--fill {
  opacity: 1;
  color: var(--foreground, #000);
}

.pass-rail-item[data-rail-variant="outline"][data-rail-active="true"] .pass-rail-item__icon--outline {
  opacity: 1;
  color: var(--foreground, #000);
}

.pass-rail-item[data-rail-variant="outline"][data-rail-active="true"] .pass-rail-item__icon--fill {
  opacity: 0;
}

.pass-rail-item[data-rail-active="true"]:hover .pass-rail-item__icon-wrap {
  background: color-mix(in srgb, var(--foreground, #000) 9%, transparent);
}

/* rail spaces kapsayici — acilinca bg alta dogru genisler, item boyutu sabit - 16.07.2026 06:34 */

.pass-rail-spaces-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail-btn-size);
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
  transition: background-color 200ms ease, border-radius 200ms ease;
}

.pass-rail-spaces-group:has([data-rail-spaces-expanded="true"]) {
  /* rozet payi + space arasi gap ayni oran - 16.07.2026 20:10 */
  --pass-rail-badge-gutter: 6px;
  --pass-rail-spaces-gap: var(--pass-rail-badge-gutter);
  gap: var(--pass-rail-spaces-gap);
  width: calc(var(--rail-btn-size) + (var(--pass-rail-badge-gutter) * 2));
  padding: var(--pass-rail-spaces-gap) 0;
  box-sizing: border-box;
  border-radius: var(--rail-btn-radius-active);
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
}

html.dark .pass-rail-spaces-group:has([data-rail-spaces-expanded="true"]) {
  background: color-mix(in srgb, var(--foreground, #fff) 8%, transparent);
}

.pass-rail-spaces {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pass-rail-spaces[data-rail-spaces-expanded="true"] {
  grid-template-rows: 1fr;
}

.pass-rail-spaces__clip {
  overflow: hidden;
  min-height: 0;
  width: 100%;
}

.pass-rail-spaces__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pass-rail-spaces-gap, var(--sidebar-gap-tight));
  width: 100%;
  overflow: visible;
}

.pass-rail-spaces[data-rail-spaces-expanded="true"] .pass-rail-spaces__inner > .pass-rail-item--space:last-child {
  margin-bottom: var(--pass-rail-spaces-gap, 6px);
}

.pass-rail-spaces[data-rail-spaces-expanded="false"] .pass-rail-spaces__inner {
  pointer-events: none;
}

.pass-rail-item--space .pass-rail-item__icon-wrap {
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
}

/* collapse: kapali → toplam spaces ikonunda; acik → space rozetleri, toplam gizlenir - 16.07.2026 19:50 */

.pass-rail-spaces[data-rail-spaces-expanded="false"] .pass-rail-item__badge {
  display: none !important;
}

.pass-rail-spaces-group:has([data-rail-spaces-expanded="true"]) > .pass-rail-item > [data-rail-badge="spaces"] {
  display: none !important;
}

.pass-rail-item--space[data-rail-active="true"] .pass-rail-item__icon-wrap {
  border-radius: var(--rail-btn-radius-active);
}

.pass-rail-space-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  font-size: var(--rail-btn-icon-size);
  line-height: 1;
  color: var(--av-fg, var(--foreground, #000));
  background: var(--av-bg, color-mix(in srgb, var(--foreground, #000) 10%, transparent));
  transition: border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pass-rail-item--space[data-rail-active="true"] .pass-rail-space-avatar {
  border-radius: var(--rail-btn-radius-active);
}

.pass-rail-space-avatar--logo {
  overflow: hidden;
}

.pass-rail-space-avatar__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

html.dark .pass-rail-space-avatar {
  color: var(--av-fg-d, var(--av-fg, var(--foreground, #fff)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground, #fff) 16%, transparent)));
}

@media (prefers-reduced-motion: reduce) {
  .pass-rail-item__icon-wrap,
    .pass-rail-space-avatar,
    .pass-rail-spaces,
    .pass-rail-spaces-group {
    transition: none;
  }
}

/* account sidebar sections, footer user, mobile — collapse removed - 16.07.2026 04:10 */

aside a, aside button, aside p, aside span,
#mobileSidebar a, #mobileSidebar button, #mobileSidebar p, #mobileSidebar span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sidebar-header {
  height: var(--eco-header-h);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--eco-header-pad);
  padding-right: var(--eco-header-pad);
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-link {
  transition: opacity 120ms ease;
}

.sidebar-logo-link:hover {
  opacity: 0.75;
}

.sidebar-logo-text {
  color: var(--foreground);
}

.sidebar-logo-products-btn {
  width: var(--eco-header-control);
  height: var(--eco-header-control);
  color: var(--ink-500);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.sidebar-logo-products-btn:hover {
  color: var(--foreground);
  background: var(--background);
  border-color: color-mix(in srgb, var(--border) 60%, var(--foreground));
}

.dark .sidebar-logo-products-btn {
  background: var(--background);
}

.dark .sidebar-logo-products-btn:hover {
  background: var(--surface-subtle);
}

.sidebar-user-section {
  padding-left: var(--account-sidebar-inner-x);
  padding-right: var(--account-sidebar-inner-x);
  padding-bottom: var(--sidebar-gap);
}

.sidebar-user-card {
  border-radius: var(--sidebar-item-r);
  overflow: hidden;
  width: 100%;
}

.sidebar-bottom-user-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.6875rem;
  width: 100%;
  text-align: left;
  transition: background-color 120ms ease;
  border-radius: var(--sidebar-item-r);
}

.sidebar-bottom-user-btn:hover {
  background-color: var(--sidebar-hover-bg);
}

.sidebar-bottom-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}

.sidebar-bottom-user-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 0.0625rem;
}

.sidebar-bottom-user-chevron {
  font-size: 0.875rem;
  color: var(--ink-muted);
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.sidebar-bottom-user-btn:hover .sidebar-bottom-user-chevron {
  opacity: 0.9;
}

.sidebar-bottom-user-btn[aria-expanded="true"] .sidebar-bottom-user-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sidebar-gap-tight) * 2);
  padding: calc(var(--sidebar-gap) * 0.75) var(--account-sidebar-inner-x);
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sidebar-bottom {
  border-top-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

@media (min-width: 1024px) {
  .account-desktop-sidebar .sidebar-bottom {
    padding-left: var(--split-sidebar-inset-x);
    padding-right: var(--split-sidebar-inset-x);
    padding-top: calc(var(--split-sidebar-inset-y) * 0.75);
    padding-bottom: var(--split-sidebar-inset-bottom);
  }

  /* desktop nav olcegi — tokenlar sp-sidebar__tab ile es - 16.07.2026 04:10 */

  .account-desktop-sidebar .account-sidebar-nav-link {
    min-height: var(--account-sidebar-nav-row-h);
    height: var(--account-sidebar-nav-row-h);
    gap: var(--account-sidebar-nav-gap);
    padding-left: var(--account-sidebar-nav-px);
    padding-right: var(--account-sidebar-nav-px);
  }

  .account-desktop-sidebar .account-sidebar-nav-icon,
    .account-desktop-sidebar .account-sidebar-nav-affix {
    width: var(--account-sidebar-nav-icon-size);
    height: var(--account-sidebar-nav-icon-size);
  }

  .account-desktop-sidebar .account-sidebar-nav-icon {
    font-size: var(--account-sidebar-nav-icon-size);
  }
}

#mobileSidebar {
  display: flex !important;
  flex-direction: column !important;
}

#mobileSidebarNav {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}

#mobileOverlay {
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.nav-section {
  margin-top: 0.6875rem;
}

.nav-section:first-child {
  margin-top: 0;
}

.nav-section--overview {
  margin-top: 0;
  margin-bottom: var(--sidebar-gap-tight);
}

.nav-section__label {
  margin: 0;
  padding: 0.375rem var(--account-sidebar-nav-px) 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.28;
  line-height: 1;
}

.dark .nav-section__label {
  opacity: 0.36;
}

.nav-section__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* account nav icon — sp-sidebar__tab ile ayni 1rem olcek - 16.07.2026 04:10 */

.account-sidebar-nav-icon,
.account-sidebar-nav-affix {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.account-sidebar-nav-icon {
  font-size: 1rem;
}

/* account: fixed unsaved-changes bar (profile, notifications, …) - 17.05.2026 01:05 */

:root {
  --app-content-bottom-pad: 5rem;
}

#account-main-content,
#staff-main-content,
.app-page-content {
  padding-bottom: calc(var(--app-content-bottom-pad) + env(safe-area-inset-bottom, 0px));
}

/* anons sayfasinda padding sifirlama — compose icin tam yukseklik gerekli - 23.06.2026 21:15 */

#account-main-content.account-main--channel {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  background: var(--background, #fff);
  /* feed ve compose ayni sutun genisligini paylasir; ortak atadan tanimlanir
       cunku .ann-page ve .ann-compose kardes elemanlardir. discord/slack gibi
       tam genislik icin sinir yok, sadece yan bosluk (--ch-chat-side-pad) var - 01.07.2026 20:30 */
  --ch-chat-column-max: none;
  --ch-chat-side-pad: 20px;
}

/* channel: dis scroll kapali, feed icinde kaydir - 24.06.2026 20:30 */

.account-split__scroll:has(#account-main-content.account-main--channel) {
  overflow: hidden;
  align-items: stretch;
  background: var(--background, #fff);
}

.account-split__scroll:has(#account-main-content.account-main--channel) > .account-split__content-pad {
  max-width: none;
  width: 100%;
  padding: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#account-main-content.account-main--channel .ann-feed-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#account-main-content.account-main--channel .ann-page--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-direction: row;
}

#account-main-content.account-main--channel .ann-page--split .ann-feed-pane,
#account-main-content.account-main--channel .ann-page--split .ann-reply-pane {
  min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

#account-main-content.account-main--channel .ann-reply-pane .ann-feed,
#account-main-content.account-main--channel .ann-reply-pane .ann-compose {
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply {
  padding: 16px 0 24px;
  margin: 0 0 12px;
  width: 100%;
  max-width: var(--ch-chat-column-max);
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 10px;
  gap: 6px;
  letter-spacing: -0.02em;
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__type-icon {
  font-size: 1.25rem;
}

#account-main-content.account-main--channel .ann-reply-pane .ch-channel-intro--reply .ch-channel-intro__lead {
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-bottom: 6px;
}

#account-main-content.account-main--channel .ann-reply-pane .ann-feed__list .ann-card {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: calc(var(--ch-chat-side-pad) + 0.5rem);
  padding-right: calc(var(--ch-chat-side-pad) + 0.5rem);
  border-radius: 0;
}

#account-main-content.account-main--channel .ann-feed {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-left: var(--ch-chat-side-pad);
  padding-right: var(--ch-chat-side-pad);
}

#account-main-content.account-main--channel .ann-compose {
  position: static;
  flex-shrink: 0;
}

/* feed + compose ayni tam genislik sutunu paylasir - 24.06.2026 22:00 */

#account-main-content.account-main--channel .ch-channel-intro,
#account-main-content.account-main--channel .ann-feed__list,
#account-main-content.account-main--channel .ann-feed__loading,
#account-main-content.account-main--channel .ann-feed__empty {
  width: 100%;
  max-width: var(--ch-chat-column-max);
}

#account-main-content.account-main--channel .ch-channel-intro {
  padding: 15px 0 0;
}

#account-main-content.account-main--channel .ann-compose__box-wrap {
  max-width: var(--ch-chat-column-max);
  width: 100%;
  margin: 0;
}

/* mesaj hover ve mention vurgusu feed tam genisliginde — yan bosluk telafi - 14.07.2026 08:29 */

#account-main-content.account-main--channel .ann-feed__list .ann-card {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: calc(var(--ch-chat-side-pad) + 0.5rem);
  padding-right: calc(var(--ch-chat-side-pad) + 0.5rem);
  border-radius: 0;
}

/* tarih / yeni mesajlar boluculeri avatar sol kenari ile ayni hizada - 14.07.2026 08:29 */

#account-main-content.account-main--channel .ann-feed__list .msg-date-divider,
#account-main-content.account-main--channel .ann-feed__list .msg-unread-divider {
  margin-left: calc(-1 * var(--ch-chat-side-pad));
  margin-right: calc(-1 * var(--ch-chat-side-pad));
  padding-left: calc(var(--ch-chat-side-pad) + 0.5rem);
  padding-right: calc(var(--ch-chat-side-pad) + 0.5rem);
}

#account-main-content.account-main--channel .ann-feed__list .msg-date-divider::before {
  left: calc(var(--ch-chat-side-pad) + 0.5rem);
  right: calc(var(--ch-chat-side-pad) + 0.5rem);
}

#account-main-content.account-main--channel .ann-feed__list .ann-card--mentioned::before {
  left: 0;
}

#account-main-content.account-main--channel .ann-feed__spacer {
  height: 12px;
}

#account-main-content.account-main--channel .ann-feed:not(.ann-feed--empty) {
  padding-bottom: 8px;
}

#account-main-content.account-main--channel .ann-compose::before {
  display: none;
}

#account-main-content.account-main--channel .ann-compose {
  padding: 12px var(--ch-chat-side-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--background, #fff);
  border-top: none;
}

/* kanaldaki kullanicilar — compose kutusunun biraz uzerinde - 05.07.2026 04:30 */

#account-main-content.account-main--channel .ann-compose__viewers {
  transform: translateY(calc(-50% - 5px));
}

#account-main-content.account-main--channel .ann-compose__viewer-btn {
  position: relative;
}

#account-main-content.account-main--channel .ann-compose__viewer-btn--typing .ann-compose__viewer-avatar {
  animation: ch-viewer-typing-pulse 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-color: color-mix(in srgb, var(--foreground, #000) 36%, transparent);
}

#account-main-content.account-main--channel .ann-compose__viewer-typing-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  animation: ch-viewer-typing-ring 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes ch-viewer-typing-pulse {
  0%,
    100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes ch-viewer-typing-ring {
  0%,
    100% {
    opacity: 0.35;
    transform: scale(1);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #account-main-content.account-main--channel .ann-compose__viewer-btn--typing .ann-compose__viewer-avatar,
    #account-main-content.account-main--channel .ann-compose__viewer-typing-ring {
    animation: none;
  }
}

/* kutunun disinda, sag alt kisayol ipucu - 01.07.2026 20:35 */

#account-main-content.account-main--channel .ann-compose__hint {
  margin: 4px 2px 0;
  text-align: right;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
}

#account-main-content.account-main--channel .ann-compose__box {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2.5%, var(--background, #fff));
  transition:
        border-color 150ms ease-out,
        background-color 150ms ease-out;
}

#account-main-content.account-main--channel .ann-compose__box:focus-within {
  border-color: color-mix(in srgb, var(--foreground, #000) 24%, transparent);
  background: var(--background, #fff);
}

/* tek padding katmani — arac ve metin ayni yukseklikte hizalanir - 02.07.2026 03:10 */

#account-main-content.account-main--channel .ann-compose__input-row {
  --ch-compose-tool: 36px;
  --ch-compose-line: 20px;
  --ch-compose-pad-y: calc((var(--ch-compose-tool) - var(--ch-compose-line)) / 2);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

#account-main-content.account-main--channel .ann-compose__textarea-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

#account-main-content.account-main--channel .ann-compose__preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: var(--ch-compose-pad-y, 8px) 0;
  max-height: 230px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: inherit;
  font-style: inherit;
  line-height: var(--ch-compose-line, 20px);
  letter-spacing: normal;
  text-rendering: inherit;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  color: var(--foreground, #000);
}

/* pill gorunumu — ekstra margin/padding yok, imlec hizasi bozulmasin - 03.07.2026 01:45 */

#account-main-content.account-main--channel .ann-compose__preview .pass-mention,
#account-main-content.account-main--channel .ann-compose__preview .pass-mention--all,
#account-main-content.account-main--channel .ann-compose__preview .pass-mention--url {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  pointer-events: none;
  cursor: text;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#account-main-content.account-main--channel .ann-compose__preview .pass-emoji,
#account-main-content.account-main--channel .ann-compose__preview .pass-emoji--compose {
  display: inline;
  width: 1em;
  height: 1em;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: -0.075em;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.pass-mention,
#account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.pass-mention:hover {
  color: #3d4ff0;
  text-decoration: none;
}

.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.pass-mention,
.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown a.pass-mention:hover {
  color: #aeb6ff;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.pass-mention,
#account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.pass-mention--url {
  color: #3d4ff0;
  background: transparent;
  font-weight: 400;
}

#account-main-content.account-main--channel .ann-compose__preview .pass-mention--all {
  color: #dc2626;
  background: transparent;
  font-weight: 400;
}

.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.pass-mention,
.dark #account-main-content.account-main--channel .ann-compose__preview.ann-markdown span.pass-mention--url {
  color: #aeb6ff;
  background: transparent;
}

.dark #account-main-content.account-main--channel .ann-compose__preview .pass-mention--all {
  color: #f87171;
  background: transparent;
}

#account-main-content.account-main--channel .ann-compose__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  min-height: var(--ch-compose-tool, 36px);
  max-height: 230px;
  padding: var(--ch-compose-pad-y, 8px) 0;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: inherit;
  font-style: inherit;
  line-height: var(--ch-compose-line, 20px);
  letter-spacing: normal;
  text-rendering: inherit;
  resize: none;
  overflow-y: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
  color: var(--foreground, #000);
  -webkit-text-fill-color: var(--foreground, #000);
  caret-color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__textarea--preview {
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__textarea::-moz-placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-text-fill-color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  opacity: 1;
}

#account-main-content.account-main--channel .ann-compose__textarea::placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-text-fill-color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  opacity: 1;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder .pass-mention,
#account-main-content.account-main--channel .ann-compose__preview--placeholder .pass-mention--all,
#account-main-content.account-main--channel .ann-compose__preview--placeholder .pass-mention--url,
#account-main-content.account-main--channel .ann-compose__preview--placeholder a {
  color: inherit;
  background: transparent;
  text-decoration: none;
}

#account-main-content.account-main--channel .ann-compose__preview .pass-emoji-token {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
  color: inherit;
}

#account-main-content.account-main--channel .ann-compose__charcount {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--background, #fff);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__charcount--danger {
  color: #ef4444;
}

#account-main-content.account-main--channel .ann-compose__toolbar-left,
#account-main-content.account-main--channel .ann-compose__toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#account-main-content.account-main--channel .ann-compose__tool-btn {
  width: var(--ch-compose-tool, 36px);
  height: var(--ch-compose-tool, 36px);
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
  cursor: pointer;
  transition:
        background-color 140ms ease-out,
        border-color 140ms ease-out,
        color 140ms ease-out,
        opacity 140ms ease-out;
}

#account-main-content.account-main--channel .ann-compose__tool-btn--attach {
  border-color: color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
}

#account-main-content.account-main--channel .ann-compose__tool-btn--attach:hover {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
}

#account-main-content.account-main--channel .ann-compose__tool-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  outline-offset: 1px;
}

#account-main-content.account-main--channel .ann-compose__tool-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__tool-btn[aria-expanded='true'] {
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  color: var(--foreground, #000);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send {
  opacity: 0.42;
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready {
  opacity: 1;
  background: var(--foreground, #000);
  color: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:hover {
  background: color-mix(in srgb, var(--foreground, #000) 86%, var(--background, #fff));
  color: var(--background, #fff);
}

#account-main-content.account-main--channel .ann-compose__tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

#account-main-content.account-main--channel .ann-compose__tool-btn--send.ann-compose__tool-btn--ready:disabled {
  opacity: 0.38;
}

#account-main-content.account-main--channel .ann-compose__send-form {
  display: contents;
}

#account-main-content.account-main--channel .ann-compose__locked:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ch-compose-tool, 36px);
  padding: var(--ch-compose-pad-y, 8px) 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

#account-main-content.account-main--channel .ann-compose__locked i {
  flex-shrink: 0;
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* normal compose satiri ile ayni olcu — disabled / not-allowed hali - 16.07.2026 14:57 */

#account-main-content.account-main--channel .ann-compose__box:has(.ann-compose__locked--no-permission) {
  cursor: not-allowed;
  opacity: 0.72;
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission {
  --ch-compose-tool: 36px;
  --ch-compose-line: 20px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: calc(var(--ch-compose-tool) + 16px);
  padding: 8px 10px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: var(--ch-compose-line);
  color: var(--ink-muted, color-mix(in srgb, var(--foreground, #000) 52%, transparent));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ch-compose-tool);
  height: var(--ch-compose-tool);
  margin-top: 0;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

#account-main-content.account-main--channel .ann-compose__locked--no-permission .ann-compose__locked-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

#account-main-content.account-main--channel .ann-compose__input-row {
  container-type: inline-size;
  container-name: compose-row;
}

/* bosken tek satir + ... — yazarken normal wrap geri gelir - 16.07.2026 02:27 */

#account-main-content.account-main--channel .ann-compose__textarea:-moz-placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea::-moz-placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__textarea::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#account-main-content.account-main--channel .ann-compose__preview--placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* scroll calisir, cubuk gorunmez - 16.07.2026 02:27 */

#account-main-content.account-main--channel .ann-compose__textarea,
#account-main-content.account-main--channel .ann-compose__preview {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#account-main-content.account-main--channel .ann-compose__textarea::-webkit-scrollbar,
#account-main-content.account-main--channel .ann-compose__preview::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@container compose-row (max-width: 420px) {
  [data-mention-trigger] {
    display: none;
  }
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown p {
  margin: 0;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown strong {
  font-weight: 700;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown em {
  font-style: italic;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown del {
  text-decoration: line-through;
}

#account-main-content.account-main--channel .ann-compose__preview.ann-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  padding: 0 3px;
  border-radius: 3px;
}

#account-main-content.account-main--channel .ann-compose__preview .ann-code-block--compose {
  display: block;
  white-space: pre-wrap;
}

#account-main-content.account-main--channel .ann-compose__preview .pass-md-mark {
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  font-weight: 400;
  font-style: normal;
}

/* :not([hidden]) sart kosulmazsa flex, [hidden] ozniteligini eziyor ve
   medya yokken de serit bos halde acik gorunuyordu - 01.07.2026 23:55 */

#account-main-content.account-main--channel .ann-compose__media-list:not([hidden]) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* preview ile compose arasindaki ayirici - 16.07.2026 03:33 */
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
}

#account-main-content.account-main--channel .ann-compose__media-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#account-main-content.account-main--channel .ann-media-item {
  position: relative;
  flex-shrink: 0;
  height: 96px;
  width: auto;
  min-width: 72px;
  max-width: 168px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

#account-main-content.account-main--channel .ann-media-item[data-url]:not([data-url=""]) {
  cursor: pointer;
}

#account-main-content.account-main--channel .ann-media-item__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#account-main-content.account-main--channel .ann-media-item--video-thumb video.ann-media-item__img {
  pointer-events: none;
  background: #111;
}

/* video thumbnail fallback — url yokken film ikonu + dosya adi - 15.07.2026 23:57 */

#account-main-content.account-main--channel .ann-media-item--video {
  display: flex;
  width: auto;
  min-width: 72px;
  max-width: 168px;
  aspect-ratio: unset;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
}

#account-main-content.account-main--channel .ann-media-item__video-icon {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

#account-main-content.account-main--channel .ann-media-item__name {
  max-width: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

/* yukleme placeholder — medya yok, sadece spinner; kare sabit oran - 16.07.2026 03:05 */

#account-main-content.account-main--channel .ann-media-item--busy {
  aspect-ratio: 1;
  min-width: 96px;
  max-width: 96px;
  width: 96px;
  background: color-mix(in srgb, var(--foreground, #000) 6%, var(--background, #fff));
  cursor: default;
}

#account-main-content.account-main--channel .ann-media-item__spinner {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--foreground, #000) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  animation: ann-media-spin 700ms linear infinite;
}

@keyframes ann-media-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #account-main-content.account-main--channel .ann-media-item__spinner {
    animation-duration: 1400ms;
  }
}

/* video play rozeti — ortada, her zaman gorunur - 16.07.2026 02:47 */

#account-main-content.account-main--channel .ann-media-item__play-badge {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#account-main-content.account-main--channel .ann-media-item__play-badge i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.875rem;
}

/* gif etiketi — sol alt kose - 16.07.2026 02:47 */

#account-main-content.account-main--channel .ann-media-item__gif-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  pointer-events: none;
  text-transform: uppercase;
}

/* buyutme ipucu — gorsele tiklayinca lightbox acilir - 16.07.2026 02:47 */

#account-main-content.account-main--channel .ann-media-item__zoom-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000 28%, transparent);
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

#account-main-content.account-main--channel .ann-media-item:hover .ann-media-item__zoom-hint {
  opacity: 1;
}

/* sil butonu — her zaman gorunur, hover kirmizi - 16.07.2026 02:47 */

#account-main-content.account-main--channel .ann-media-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

#account-main-content.account-main--channel .ann-media-item__remove:hover {
  background: #ef4444;
}

#account-main-content.account-main--channel .ann-media-item__remove:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

.pass-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}

.pass-media-lightbox--open {
  opacity: 1;
  pointer-events: auto;
}

.pass-media-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
}

/* hidden attribute display: block kurali tarafindan ezilmesin - 15.07.2026 23:13 */

.pass-media-lightbox__img[hidden],
.pass-media-lightbox__video-stage[hidden] {
  display: none;
}

/* video player host — lightbox icinde genisler - 15.07.2026 23:13 */

.pass-media-lightbox__video-stage {
  display: block;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
}

.pass-media-lightbox__img {
  display: block;
  max-width: min(88vw, 1200px);
  max-height: 88vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* kapat butonu — soft outline x, sag ust - 14.07.2026 11:17 */

.pass-media-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
  z-index: 1;
}

.pass-media-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.pass-media-lightbox__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* ok navigasyon butonlari — sol/sag kenar, dikey ortalanmis - 16.07.2026 02:47 */

.pass-media-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
  z-index: 2;
}

.pass-media-lightbox__nav--prev {
  left: 1rem;
}

.pass-media-lightbox__nav--next {
  right: 1rem;
}

.pass-media-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.pass-media-lightbox__nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.pass-media-lightbox__nav:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

/* [hidden] js tarafindan yonetilir - 16.07.2026 02:47 */

.pass-media-lightbox__nav[hidden] {
  display: none;
}

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

  .pass-media-lightbox__img {
    transition: none;
  }
}

/* oturum satiri alt metin (tiklama ile goreli/mutlak) - 25.05.2026 17:15 */

.session-activity-time {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Animation Utilities */

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Glass Effect Enhancement */

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Focus: branded outline for interactive chrome — not form fields (no outline on inputs) */

:focus-visible {
  outline: 2px solid var(--brand-500, #4c1753);
  outline-offset: 2px;
}

input,
textarea,
select {
  outline: none;
}

input:focus,
input:focus-visible,
input:active,
textarea:focus,
textarea:focus-visible,
textarea:active,
select:focus,
select:focus-visible,
select:active {
  outline: none !important;
  outline-offset: 0;
}

/* Tailwind focus ring: no ring-offset gap on native fields */

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  --tw-ring-offset-width: 0px !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* Toast enter/leave handled in pass-toast.css - 16.07.2026 07:17 */

/* Mobile Menu Transition */

#mobileSidebar {
  transition: transform 0.2s ease-out;
}

#mobileOverlay {
  transition: opacity 0.2s ease-out;
}

/* ── Spinner animasyon (Phosphor ph-spinner-gap icin) ─────────────────────── */

/* 21.06.2026 06:03 */

@keyframes cengel-spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: cengel-spin 0.75s linear infinite;
}

.pass-toast-host {
  position: fixed;
  top: 1.25rem;
  right: 1rem;
  left: 1rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  max-width: 22rem;
  margin-left: auto;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
}

@media (min-width: 640px) {
  .pass-toast-host {
    left: auto;
    right: 1.5rem;
  }
}

.pass-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8125rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-left-width: 1px;
  background: var(--background, #fff);
  color: var(--foreground, #000);
  box-shadow:
        0 8px 28px color-mix(in srgb, var(--foreground, #000) 11%, transparent),
        0 2px 8px color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  opacity: 0;
  transform: translateX(0.75rem) scale(0.98);
  transition:
        opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .pass-toast {
  box-shadow:
        0 10px 32px color-mix(in srgb, #000 48%, transparent),
        0 2px 10px color-mix(in srgb, #000 32%, transparent);
}

.pass-toast--open {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.pass-toast--leaving {
  opacity: 0;
  transform: translateX(0.75rem) scale(0.98);
}

.pass-toast__icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.pass-toast--normal .pass-toast__icon {
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
}

.pass-toast--warn .pass-toast__icon {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #d97706;
}

.pass-toast--error .pass-toast__icon {
  background: color-mix(in srgb, #e54d2e 14%, transparent);
  color: #e54d2e;
}

.pass-toast__body {
  flex: 1;
  min-width: 0;
}

.pass-toast__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

.pass-toast__close {
  flex-shrink: 0;
  width: auto;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 999px;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.pass-toast__close:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  color: var(--foreground, #000);
}

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

  .pass-toast--leaving {
    transform: none;
  }
}

/* auth sayfa ortak stilleri - 24.06.2026 15:00 */

.auth-page-no-select,
.auth-page-no-select * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.auth-page-no-select input:not([type="hidden"]),
.auth-page-no-select textarea,
.auth-page-no-select select {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.profile-social-row {
  min-width: 0;
}

@media (max-width: 639px) {
  .profile-social-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .profile-social-row [data-drag-handle] {
    order: 1;
  }

  .profile-social-row [data-social-remove] {
    order: 2;
    margin-left: auto;
  }

  .profile-social-row input[data-social-label] {
    order: 3;
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100% !important;
  }

  .profile-social-row input[data-social-url] {
    order: 4;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* surukleme hayaleti position:fixed; tek satir kalsin - 24.06.2026 16:30 */

  .profile-social-row.profile-social-row--drag-ghost {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .profile-social-row.profile-social-row--drag-ghost [data-drag-handle] {
    order: 0 !important;
  }

  .profile-social-row.profile-social-row--drag-ghost [data-social-remove] {
    order: 0 !important;
    margin-left: 0 !important;
  }

  .profile-social-row.profile-social-row--drag-ghost input[data-social-label] {
    order: 0 !important;
    flex: 0 1 180px !important;
    max-width: 240px !important;
    width: auto !important;
  }

  .profile-social-row.profile-social-row--drag-ghost input[data-social-url] {
    order: 0 !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* tak-çalıştır tarih seçici bileşeni (app/templates/components/datepicker.j2) */

.datepicker {
  padding: 0.9375rem 1rem 1rem;
}

.datepicker__header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.9375rem;
}

/* tek başlık butonu: "Mayıs 2013" veya "2013" - 25.05.2026 13:55 */

.datepicker__title-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  border: 0;
  background: transparent;
  padding: 0.3125rem 0.6875rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground, #171717);
  cursor: pointer;
  transition: background-color 0.12s ease-out;
  white-space: nowrap;
}

.datepicker__title-btn:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.datepicker__title-caret {
  font-size: 0.6875rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
  transition: transform 0.15s ease-out;
}

/* ay/yıl görünümünde caret döner - 25.05.2026 13:55 */

.datepicker__title-btn[data-view="months"] .datepicker__title-caret,
.datepicker__title-btn[data-view="years"] .datepicker__title-caret {
  transform: rotate(-90deg);
}

.datepicker__nav-btn {
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  font-size: 0.9375rem;
}

.datepicker__nav-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground, #171717) 7%, transparent);
  color: var(--foreground, #171717);
}

.datepicker__nav-btn--disabled,
.datepicker__nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

/* hafta başlık satırı - 25.05.2026 13:55 */

.datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.25rem;
}

.datepicker__weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
  padding: 0.1875rem 0;
}

/* gün hücreleri — daire şeklinde, sabit boyut - 25.05.2026 13:55 */

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.125rem;
}

.datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  margin: 0 auto;
  font-size: 0.875rem;
  font-weight: 500;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  color: var(--foreground, #171717);
}

.datepicker__day--default:hover,
.datepicker__day--today:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 7%, transparent);
}

.datepicker__day--selected {
  background: var(--foreground, #171717);
  color: var(--background, #ffffff);
  font-weight: 600;
}

/* bugün indikatörü: halka çizgisi - 25.05.2026 13:55 */

.datepicker__day--today {
  outline: 1.5px solid color-mix(in srgb, var(--foreground, #171717) 35%, transparent);
  outline-offset: -1.5px;
  font-weight: 600;
}

.datepicker__day--outside,
.datepicker__day--disabled {
  cursor: default;
  opacity: 0.22;
  pointer-events: none;
}

/* ay ve yıl seçim ızgaraları - 25.05.2026 13:55 */

.datepicker__month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

.datepicker__years-scroll {
  max-height: 11rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.datepicker__year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

.datepicker__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
  color: var(--foreground, #171717);
}

.datepicker__pick--selected {
  background: var(--foreground, #171717);
  color: var(--background, #ffffff);
  font-weight: 600;
}

.datepicker__pick--disabled {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

/* alt bilgi: temizle bağlantısı - 25.05.2026 13:55 */

.datepicker__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.8125rem;
  padding-top: 0.6875rem;
  border-top: 1px solid var(--border, #e5e5e5);
}

.datepicker__clear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
  cursor: pointer;
  transition: color 0.12s ease-out;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
}

.datepicker__clear:hover {
  color: var(--foreground, #171717);
  text-decoration-color: color-mix(in srgb, var(--foreground, #171717) 30%, transparent);
}

.account-field-dropdown__panel {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.98) translateY(-0.25rem);
  transform-origin: top left;
  pointer-events: none;
  transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out,
        visibility 0s linear 0.18s;
}

.account-field-dropdown__panel--open {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out,
        visibility 0s;
}

.account-field-dropdown__trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
}

.account-field-dropdown__option {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.account-field-dropdown__option:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.account-field-dropdown__option:focus {
  outline: none;
}

.account-field-dropdown__option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 25%, transparent);
  outline-offset: 1px;
}

/* dil seçici paneli (app/templates/components/language_picker.j2) - 25.05.2026 14:00 */

.language-picker__panel {
  right: 0;
  left: 0;
  z-index: var(--z-dropdown, 120);
  margin-top: 0.375rem;
  min-width: 100%;
  width: max(100%, 14rem);
  overflow: hidden;
}

.language-picker {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
}

.language-picker__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.6875rem 0.8125rem;
  border: 0;
  border-radius: 0.6875rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out;
}

.language-picker__option:hover:not(.language-picker__option--selected) {
  background: color-mix(in srgb, var(--foreground, #171717) 6%, transparent);
}

.language-picker__option:focus {
  outline: none;
}

.language-picker__option:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #171717) 25%, transparent);
  outline-offset: 1px;
}

/* seçili dil yalnızca arka plan ile belirtilir - 25.05.2026 14:10 */

.language-picker__option--selected {
  background: var(--foreground, #171717);
}

.language-picker__option--selected:hover {
  background: var(--foreground, #171717);
}

.language-picker__text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
}

.language-picker__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground, #171717);
}

.language-picker__sublabel {
  font-size: 0.875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
}

.language-picker__option--selected .language-picker__label {
  color: var(--background, #ffffff);
}

.language-picker__option--selected .language-picker__sublabel {
  color: color-mix(in srgb, var(--background, #ffffff) 65%, transparent);
}

.language-picker--saving .language-picker__option {
  pointer-events: none;
  opacity: 0.6;
}

/* overflow menü açık liste satırı — alttaki satırlar paneli kapatmasın - 06.06.2026 21:15 */

.overflow-menu-row--open {
  position: relative;
  z-index: 30;
}

/* guvenlik: sosyal profil — onizleme kapaliyken sol tam genislik - 30.05.2026 07:15 */

.security-social-profile__layout {
  display: flex;
  flex-direction: column;
}

.security-social-profile__layout--single .security-social-profile__controls {
  width: 100%;
  border-right: none;
}

.security-social-profile__layout--single .security-social-profile__preview,
.security-social-profile--inactive .security-social-profile__preview {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
}

.security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__preview {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .security-social-profile__layout:not(.security-social-profile__layout--single) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
  }

  .security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__controls {
    border-right: 1px solid var(--border);
  }

  .security-social-profile__layout:not(.security-social-profile__layout--single) .security-social-profile__preview {
    border-top-width: 0;
  }
}

.pass-user-card {
  position: fixed;
  z-index: var(--z-user-card, 10090);
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}

/* acilis yonu — data-placement konumlayicidan - 16.07.2026 04:42 */

.pass-user-card[data-placement="above"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom left;
}

.pass-user-card[data-placement="left"] {
  transform: scale(0.97) translateX(4px);
  transform-origin: top right;
}

.pass-user-card[data-placement="right"] {
  transform: scale(0.97) translateX(-4px);
  transform-origin: top left;
}

.pass-user-card[data-placement="below"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
}

.pass-user-card--secondary {
  z-index: var(--z-user-card-nested, 10100);
}

.pass-user-card--open,
.pass-user-card--open[data-placement] {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translate(0, 0);
  pointer-events: auto;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
}

/* scroll kilidi: overflow degistirme — scrollbar kaybolunca flex reflow / uye listesi blink - 16.07.2026 07:09 */

html.pass-user-card-scroll-lock .account-split__scroll,
html.pass-user-card-scroll-lock .sp-sidebar__nav,
html.pass-user-card-scroll-lock .space-members-panel__scroll {
  overscroll-behavior: none;
}

html.pass-user-card-scroll-lock .ann-feed {
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .pass-user-card,
    .pass-user-card--open {
    transition: none;
    transform: none;
  }
}

.pass-user-card__panel {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: inherit;
  /* hafif yukselme — popover ayrissin - 16.07.2026 03:30 */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .pass-user-card__panel {
  box-shadow: 0 4px 18px color-mix(in srgb, black 35%, transparent);
}

.pass-user-card__panel--state {
  /* dolu karta yakin ebat — acilista ziplama olmasin - 16.07.2026 03:59 */
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  box-sizing: border-box;
}

/* bubble icin ekstra dikey alan; avatar 5px daha yukari - 16.07.2026 02:15 */

.pass-user-card__banner {
  height: 108px;
  width: 100%;
  flex-shrink: 0;
}

.pass-user-card__panel-body {
  margin-top: -53px;
  padding: 0 20px 20px;
}

.pass-user-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 86px;
  height: 86px;
}

.pass-user-card__avatar-wrap .presence-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 4px solid var(--background);
  background: #6b7280;
  z-index: 1;
  cursor: default;
}

.pass-user-card__avatar-wrap .presence-dot--online {
  background: #22c55e;
}

.pass-user-card__avatar-wrap .presence-dot--working {
  background: #259bfc;
}

.pass-user-card__avatar-wrap .presence-dot--idle {
  background: #f59e0b;
}

.pass-user-card__avatar-wrap .presence-dot--dnd {
  background: #ef4444;
}

.pass-user-card__avatar-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  text-decoration: none;
}

.pass-user-card__avatar {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid var(--background);
  box-sizing: border-box;
  background: var(--surface-subtle, #f5f5f5);
  display: block;
  flex-shrink: 0;
  transition: filter 120ms ease;
}

.pass-user-card__avatar-link:hover .pass-user-card__avatar {
  /* opacity saydamlastirir; brightness opak kalir - 16.07.2026 16:00 */
  filter: brightness(0.88);
}

.pass-user-card__identity {
  margin-top: 12px;
}

.pass-user-card__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, var(--foreground));
}

.pass-user-card__name--link {
  text-decoration: none;
  color: var(--ink, var(--foreground));
  cursor: pointer;
}

.pass-user-card__name--link:hover {
  text-decoration: none;
  opacity: 0.88;
}

.pass-user-card__badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

.pass-user-card__badge {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  cursor: default;
}

.pass-user-card__badge-wrap {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

/* username — display name altinda; hover yalniz metin genisligi - 16.07.2026 03:05 */

.pass-user-card__handle {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
}

.dark .pass-user-card__handle {
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.pass-user-card__handle--link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.pass-user-card__handle--link:hover {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  text-decoration: none;
}

.dark .pass-user-card__handle--link:hover {
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.pass-user-card__about {
  margin-top: 12px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--ink, var(--foreground));
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* website / konum — about altinda sade inline meta - 16.07.2026 02:42 */

.pass-user-card__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 0.35em;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
}

.pass-user-card__meta-link {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.pass-user-card__meta-link:hover {
  color: var(--ink, var(--foreground));
}

.pass-user-card__meta-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* orta nokta — satira orantili yan bosluk - 16.07.2026 02:42 */

.pass-user-card__meta-sep {
  flex-shrink: 0;
  margin: 0 0.4em;
  opacity: 0.45;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.pass-user-card__meta-line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
}

.pass-user-card__created-by {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--ink, var(--foreground));
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.pass-user-card__created-by:hover {
  opacity: 0.88;
}

.pass-user-card__restricted {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.pass-user-card__locked {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3%, transparent));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.pass-user-card__lock-icon {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.pass-user-card__lock-copy {
  min-width: 0;
  flex: 1;
}

.pass-user-card__lock-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.pass-user-card__lock-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.pass-user-card__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

.pass-user-card__loader-spin {
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.pass-user-card__loader--error {
  color: var(--ink, var(--foreground));
}

[data-user-card-trigger],
[data-webhook-card-trigger] {
  cursor: pointer;
}

.ann-card__name--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.ann-card__name--trigger:not(.ann-card__name--role) {
  color: inherit;
}

.ann-card__name--trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ann-card__avatar-btn {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}

.ann-card__avatar-btn:hover .ann-card__avatar {
  opacity: 0.88;
}

.pass-user-card__activity-card {
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3.5%, transparent));
  min-width: 0;
}

/* cover — 72px kare, badge sag alta - 15.07.2026 23:58 */

.pass-user-card__activity-media {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  align-self: flex-start;
}

.pass-user-card__activity-cover {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: var(--border);
}

.pass-user-card__activity-cover--empty {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.pass-user-card__activity-provider-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border: 1px solid var(--border);
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.pass-user-card__activity-provider-badge img {
  width: 14px;
  height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

/* body — cover ile ayni yukseklik, ust metin + alt player - 15.07.2026 23:58 */

.pass-user-card__activity-body {
  flex: 1;
  min-width: 0;
  height: 72px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

.pass-user-card__activity-label {
  margin: 0 0 4px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
  flex-shrink: 0;
}

.pass-user-card__activity-name {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 0;
}

a.pass-user-card__activity-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pass-user-card__activity-details,
.pass-user-card__activity-album {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 0;
}

.pass-user-card__activity-album {
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 45%, transparent));
}

/* spotify'da album player ile cakisir, gizle - 15.07.2026 23:58 */

[data-activity-provider="spotify"] .pass-user-card__activity-album {
  display: none;
}

/* spotify timeline — cover alt kenarina hizali - 15.07.2026 23:58 */

.pass-user-card__activity-player {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

.pass-user-card__activity-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.pass-user-card__activity-track-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ink, var(--foreground));
  opacity: 0.65;
}

.pass-user-card__activity-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 48%, transparent));
  font-variant-numeric: tabular-nums;
}

/* banner (108px) ile body kesismi; bubble asagida, noktalar yukarida - 16.07.2026 05:22 */

.pass-user-card__thought {
  position: absolute;
  top: 92px;
  left: 118px;
  z-index: 20;
  display: block;
  max-width: 172px;
  pointer-events: none;
}

/* popover ile ayni zemin; shadow daha belirgin - 16.07.2026 05:22 */

.pass-user-card__thought-bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.5rem 0.8125rem;
  border-radius: 18px;
  border: none;
  background: var(--background);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--foreground) 18%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink, var(--foreground));
  pointer-events: auto;
}

.dark .pass-user-card__thought-bubble {
  box-shadow: 0 3px 14px color-mix(in srgb, black 48%, transparent);
}

.pass-user-card__thought-emoji {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
  cursor: default;
}

.pass-user-card__thought-emoji .pass-emoji-wrap {
  pointer-events: auto;
}

/* nested tooltip gizle — floating body uzerinde - 16.07.2026 05:22 */

.pass-user-card__thought-emoji .pass-emoji-tooltip {
  display: none !important;
}

.pass-user-card__thought-emoji .pass-emoji,
.pass-user-card__thought-emoji-img {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}

.pass-user-card__thought-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* kuyruk noktalari — banner/avatar kesimine dogru sol-ust - 16.07.2026 05:22 */

.pass-user-card__thought-tail {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border-radius: 999px;
  border: none;
  background: var(--background);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--foreground) 16%, transparent);
}

.dark .pass-user-card__thought-tail {
  box-shadow: 0 2px 7px color-mix(in srgb, black 42%, transparent);
}

.pass-user-card__thought-tail--1 {
  width: 12px;
  height: 12px;
  left: 6px;
  top: -6px;
}

.pass-user-card__thought-tail--2 {
  width: 7px;
  height: 7px;
  left: -4px;
  top: -16px;
}

/* panel-body 20px gutterini asarak tam genislik border ve ic padding - 14.07.2026 18:10 */

.pass-user-card__roles {
  margin: 0.75rem -20px 0;
  padding: 0.75rem 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* kilitli profil kutusu zaten borderli — ikinci cizgiyi kaldir - 14.07.2026 18:10 */

.pass-user-card__locked + .pass-user-card__roles {
  border-top: none;
  margin-top: 0.75rem;
  padding-top: 0;
}

/* restricted notunun borderi yeterli — cift cizgi olmasin - 14.07.2026 18:10 */

.pass-user-card__restricted + .pass-user-card__roles {
  border-top: none;
  margin-top: 0.5rem;
  padding-top: 0;
}

.pass-user-card__roles-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  margin: 0 0 0.5rem;
}

.pass-user-card__roles .sp-settings-role-chips {
  margin-top: 0;
  flex-wrap: wrap;
}

/* chip padding +1px — sadece user-card - 16.07.2026 06:32 */

.pass-user-card__roles .sp-settings-role-chip {
  padding: calc(0.125rem + 1px) calc(0.375rem + 1px);
}

/* carpi ayri buton; chip tiklanmaz, yanlis kaldirma riski yok - 16.07.2026 06:51 */

.pass-user-card__roles .sp-settings-role-chip--removable {
  position: relative;
  overflow: hidden;
  cursor: default;
}

.pass-user-card__roles .sp-settings-role-chip--removable:hover {
  background: color-mix(in srgb, var(--role-color, #6b7280) 15%, transparent);
}

.pass-user-card__role-remove {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0 5px 5px 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  cursor: pointer;
  color: var(--role-color, #6b7280);
  background: color-mix(in srgb, var(--role-color, #6b7280) 32%, var(--background));
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.pass-user-card__role-remove i {
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
}

.pass-user-card__roles .sp-settings-role-chip--removable:hover .pass-user-card__role-remove,
.pass-user-card__roles .sp-settings-role-chip--removable:focus-within .pass-user-card__role-remove {
  opacity: 1;
  pointer-events: auto;
}

.pass-user-card__role-remove:hover,
.pass-user-card__role-remove:focus-visible {
  background: color-mix(in srgb, var(--role-color, #6b7280) 48%, var(--background));
  color: color-mix(in srgb, var(--role-color, #6b7280) 85%, #000);
  outline: none;
}

.pass-user-card__actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.pass-user-card__restricted + .pass-user-card__actions {
  margin-top: 12px;
}

.pass-user-card__friend-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pass-user-card__friend-actions[data-status="pending_incoming"] {
  flex-direction: row;
  gap: 8px;
}

.pass-user-card__friend-actions[data-status="pending_incoming"] .pass-user-card__friend-btn {
  flex: 1;
  min-width: 0;
}

.pass-user-card__friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  width: 100%;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--ink, var(--foreground));
  color: var(--background);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
        background-color 140ms ease,
        color 140ms ease,
        border-color 140ms ease,
        opacity 120ms ease;
}

.pass-user-card__friend-btn:hover {
  opacity: 0.9;
}

.pass-user-card__friend-btn:active:not(:disabled) {
  opacity: 0.82;
  transform: scale(0.985);
}

.pass-user-card__friend-btn:focus-visible {
  outline: 2px solid var(--ink, var(--foreground));
  outline-offset: 2px;
}

.pass-user-card__friend-btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.pass-user-card__friend-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.pass-user-card__friend-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pass-user-card__friend-btn--muted {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
  color: var(--ink, var(--foreground));
  border-color: var(--border);
}

.pass-user-card__friend-btn--muted:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.pass-user-card__friend-btn--pending .pass-user-card__friend-icon {
  opacity: 0.72;
}

.pass-user-card__friend-btn--danger {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: #dc2626;
  border-color: color-mix(in srgb, #ef4444 32%, var(--border));
}

.pass-user-card__friend-btn--danger:hover {
  opacity: 1;
  background: color-mix(in srgb, #ef4444 16%, transparent);
}

.dark .pass-user-card__friend-btn--danger {
  color: #f87171;
  background: color-mix(in srgb, #ef4444 14%, transparent);
  border-color: color-mix(in srgb, #ef4444 36%, var(--border));
}

.dark .pass-user-card__friend-btn--danger:hover {
  background: color-mix(in srgb, #ef4444 22%, transparent);
}

.pass-user-card__friend-actions--busy {
  pointer-events: none;
}

.pass-user-card__friend-btn.hidden {
  display: none;
}

.pass-user-card__friend-btn.\!hidden {
  display: none !important;
}

.pass-tooltip--floating {
  position: fixed;
  /* emoji picker (12010) uzerinde gorunsun - 16.07.2026 05:36 */
  z-index: var(--z-tooltip, 12020);
  max-width: 14rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--sidebar-item-r, 9px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--foreground) 10%, transparent);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 160ms ease;
}

html.dark .pass-tooltip--floating {
  box-shadow: 0 2px 10px color-mix(in srgb, black 40%, transparent);
}

/* placement transform baslangiclari — her yerde 0.25rem kayma - 16.07.2026 03:24 */

.pass-tooltip--floating[data-placement="top"] {
  transform: translateX(-50%) translateY(0.25rem);
  transform-origin: bottom center;
}

.pass-tooltip--floating[data-placement="bottom"] {
  transform: translateX(-50%) translateY(-0.25rem);
  transform-origin: top center;
}

.pass-tooltip--floating[data-placement="left"] {
  transform: translateY(-50%) translateX(0.25rem);
  transform-origin: right center;
}

.pass-tooltip--floating[data-placement="right"] {
  transform: translateY(-50%) translateX(-0.25rem);
  transform-origin: left center;
}

.pass-tooltip--floating.pass-tooltip--open {
  opacity: 1;
  visibility: visible;
}

.pass-tooltip--floating.pass-tooltip--open[data-placement="top"],
.pass-tooltip--floating.pass-tooltip--open[data-placement="bottom"] {
  transform: translateX(-50%) translateY(0);
}

.pass-tooltip--floating.pass-tooltip--open[data-placement="left"],
.pass-tooltip--floating.pass-tooltip--open[data-placement="right"] {
  transform: translateY(-50%) translateX(0);
}

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

.social-profile-public {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100vh - 5rem);
  padding: 2.5rem 1rem 3rem;
}

.social-profile-public__inner {
  width: 100%;
  max-width: 400px;
}

.social-profile-public__panel {
  width: 100%;
}

.social-profile-public__panel .pass-user-card__about {
  display: block;
  overflow: visible;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
  word-break: break-word;
}

.social-profile-public__tenure {
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 50%, transparent));
}

.social-profile-public__links {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-profile-public__link-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink, var(--foreground));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-profile-public__link-chip:hover {
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3%, transparent));
}

.social-profile-public__stats {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.social-profile-public__stat-value {
  font-weight: 600;
  color: var(--ink, var(--foreground));
}

.social-profile-public__stat-label {
  margin-left: 4px;
  font-size: 0.875rem;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__restricted {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__mutual {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.social-profile-public__friend-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.social-profile-public__follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--ink, var(--foreground));
  color: var(--background);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.social-profile-public__follow-btn:hover {
  opacity: 0.92;
}

.social-profile-public__follow-btn--muted {
  background: var(--surface-subtle, color-mix(in srgb, var(--foreground) 3%, transparent));
  color: var(--ink, var(--foreground));
}

.social-profile-public__sign-in-hint {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted, color-mix(in srgb, var(--foreground) 55%, transparent));
}

.social-profile-public__badges .uf-badge {
  margin-left: 4px;
}

.social-profile-public__badges .uf-badge__img {
  width: 22px;
  height: 22px;
  max-height: 22px;
}

@media (max-width: 639px) {
  .social-profile-public {
    min-height: calc(100vh - 4rem);
    padding: 1.5rem 1rem 2.5rem;
  }
}

/* --- app/templates/login.j2 --- */

/* Passkey waiting screen — soft pulse rings */

@keyframes passkey-pulse {
  0%   {
    transform: scale(1);
    opacity: 0.18;
  }

  70%  {
    transform: scale(2);
    opacity: 0;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.passkey-pulse-ring {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  border: 1px solid rgba(76, 23, 83, 0.35);
  /* theme purple */
  opacity: 0;
  animation: passkey-pulse 2.8s ease-out infinite;
}

.passkey-pulse-ring--delay {
  animation-delay: 1.4s;
}

.dark .passkey-pulse-ring {
  border-color: rgba(192, 132, 252, 0.28);
  /* dark-mode purple accent */
}

/* Password step: instant show/hide; avoid clipping rings / uneven edges */

#loginPasswordStep {
  display: grid;
  grid-template-rows: 0fr;
  pointer-events: none;
  width: 100%;
  min-width: 0;
}

#loginPasswordStep.login-password-step--open {
  grid-template-rows: 1fr;
  pointer-events: auto;
}

#loginPasswordStep .login-password-step-inner {
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#loginPasswordStep.login-password-step--open .login-password-step-inner {
  overflow: visible;
}

/* --- app/templates/register.j2 --- */

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* --- app/templates/account/profile.j2 --- */

.cropper-container {
  direction: ltr;
}

.cropper-view-box {
  outline: 2px solid var(--foreground);
  outline-offset: -2px;
}

.cropper-face {
  background-color: transparent;
}

.cropper-line {
  background-color: var(--foreground);
  opacity: 0.4;
}

.cropper-point {
  background-color: var(--foreground);
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
}

.cropper-modal {
  background-color: rgba(0,0,0,0.05) !important;
}

.cropper-bg, .cropper-drag-box {
  background-color: transparent !important;
}

.cropper-container > img {
  opacity: 1 !important;
}

#dropZone.drag-over {
  border-color: var(--foreground);
  background-color: var(--surface-subtle);
}

/* --- app/templates/account/settings.j2 --- */

#passkeysLoading[hidden],
#passkeysEmpty[hidden],
#passkeysListArea[hidden] {
  display: none !important;
}

/* Switch toggle animation fix */

.email-verification-modal__icon {
  animation: none;
}

.verification-code-digits {
  position: relative;
}

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

.switch-container input[type="checkbox"]:checked ~ div .switch-toggle {
  transform: translateX(24px);
}

.passkey-wizard-pulse {
  animation: passkeyWizardPulse 1.5s ease-in-out infinite;
}

@keyframes passkeyWizardPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.88;
    transform: scale(1.02);
  }
}

@keyframes accountModalSpinnerSpin {
  to {
    transform: rotate(360deg);
  }
}

.account-modal-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid #e5e5e5;
  border-top-color: #171717;
  animation: accountModalSpinnerSpin 0.75s linear infinite;
}

html.dark .account-modal-spinner {
  border-color: #26262c;
  border-top-color: #e4e4e7;
}

/* --- app/templates/account/notifications.j2 --- */

/* baslik ve alt baslik tek satir, ellipsis - 16.05.2026 23:58 */

.notif-pref-row__copy {
  min-width: 0;
}

.notif-pref-row__title,
.notif-pref-row__subtitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.notif-pref-row__subtitle {
  margin-top: 0.25rem;
}

/* kanal butonu: renkler tailwind token; yalnizca olcu - 17.05.2026 01:12 */

.notif-channel-btn[aria-expanded="true"] {
  background: var(--surface-subtle);
}

.notif-channel-btn[aria-expanded="true"] .notif-caret {
  transform: rotate(180deg);
}

.notif-channel-btn--has-channels {
  max-width: min(100%, 18rem);
}

.notif-channels-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-channel-btn--has-channels .notif-channels-label {
  max-width: 14.5rem;
}

/* dropdown check: tema foreground/background - 17.05.2026 01:12 */

.notif-channel-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--foreground) 8%, var(--background));
  transition: background-color 150ms ease;
}

.notif-channel-check--checked {
  background: color-mix(in srgb, var(--foreground) 14%, var(--background));
}

.notif-channel-check__icon {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--foreground);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
}

.notif-channel-check__icon[hidden] {
  display: none !important;
}

.notif-channel-check--checked .notif-channel-check__icon {
  opacity: 1;
  transform: scale(1);
}

.notif-channel-check:not(.notif-channel-check--checked) .notif-channel-check__icon {
  opacity: 0;
  transform: scale(0.7);
}

/* --- app/templates/account/password.j2 --- */

@keyframes keyFloat {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }

  50%       {
    transform: translateY(-8px) rotate(4deg);
  }
}

/* --- app/templates/components/language_selector.j2 --- */

/*
  Alt menü satırları tam genişlikte üst üste: Arka plan ilk sırada olduğundan,
  açık panel alttaki Dil/Tema satırlarının altında kalıp tıklanamaz oluyordu.
  Açık satır (tetikleyicide aria-expanded=true) üstte yığılsın.
*/

[data-language-selector-dropdown] > div.flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
  z-index: 25;
}

@keyframes wzFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

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

.wz-step-enter {
  animation: wzFadeIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

.space-wizard-invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.space-wizard-invite-list__item button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 45%, transparent);
  outline-offset: 1px;
}

.space-wizard-modal__panel {
  width: min(100%, 36rem);
  max-height: calc(100vh - 32px);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background, #fff);
}

.space-wizard-modal__header {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border, #e5e5e5);
}

.space-wizard-modal__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.space-wizard-modal__title {
  margin: 0;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground, #171717);
}

.space-wizard-modal__dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.space-wizard-modal__dot {
  height: 0.3125rem;
  flex: 1 1 0%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground, #171717) 12%, transparent);
  transition: flex 400ms ease, background-color 400ms ease;
}

.space-wizard-modal__dot--active {
  flex: 2.4 1 0%;
  background: var(--foreground, #171717);
}

.space-wizard-modal__dot--done {
  background: color-mix(in srgb, var(--foreground, #171717) 45%, transparent);
}

.space-wizard-modal__error {
  flex-shrink: 0;
  padding: 1rem 1.5rem 0;
}

.space-wizard-modal__step,
.space-wizard-modal__success {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 1.75rem;
}

.space-wizard-modal__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.space-wizard-modal__intro-icon {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.space-wizard-modal__intro-copy {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  max-width: 22rem;
}

.space-wizard-modal__intro-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground, #171717);
}

.space-wizard-modal__intro-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
}

.space-wizard-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.space-wizard-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.space-wizard-modal__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
}

.space-wizard-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border, #e5e5e5);
  background: transparent;
  color: var(--foreground, #171717);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 140ms ease;
}

.space-wizard-modal__input:focus {
  border-color: color-mix(in srgb, var(--foreground, #171717) 40%, transparent);
}

.space-wizard-modal__input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.space-wizard-modal__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
}

.space-wizard-modal__email-row {
  display: flex;
  gap: 0.5rem;
}

.space-wizard-modal__email-row .space-wizard-modal__input {
  flex: 1 1 0%;
  min-width: 0;
}

.space-wizard-modal__banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground, #171717) 60%, transparent);
}

.space-wizard-modal__banner i {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.space-wizard-modal__banner p {
  margin: 0;
}

.space-wizard-modal__banner--warn {
  border-color: color-mix(in srgb, #ca8a04 35%, var(--border, #e5e5e5));
  background: color-mix(in srgb, #ca8a04 8%, transparent);
  color: #a16207;
}

html.dark .space-wizard-modal__banner--warn {
  color: #facc15;
}

.space-wizard-modal__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.space-wizard-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border, #e5e5e5);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.space-wizard-modal__btn--primary {
  border-color: var(--foreground, #171717);
  background: var(--foreground, #171717);
  color: var(--background, #fff);
}

.space-wizard-modal__btn--primary:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 88%, transparent);
  border-color: color-mix(in srgb, var(--foreground, #171717) 88%, transparent);
}

.space-wizard-modal__btn--ghost {
  background: transparent;
  color: var(--foreground, #171717);
  flex-shrink: 0;
}

.space-wizard-modal__btn--ghost:hover {
  background: color-mix(in srgb, var(--foreground, #171717) 5%, transparent);
}

.space-wizard-modal__btn--grow {
  flex: 1 1 0%;
}

.space-wizard-modal__form > .space-wizard-modal__btn--primary {
  margin-top: 0.25rem;
  width: 100%;
}

.space-wizard-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.space-wizard-modal__success-icon {
  display: block;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.space-wizard-modal__success-title {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground, #171717);
}

.space-wizard-modal__success-desc {
  margin: 0 0 1.5rem;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground, #171717) 55%, transparent);
}

.space-wizard-modal__success .space-wizard-modal__btn--primary {
  width: 100%;
  max-width: 18rem;
}

.space-wizard-logo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border, #e5e5e5);
  background: color-mix(in srgb, var(--foreground, #171717) 3%, transparent);
}

.space-wizard-logo__preview {
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.125rem;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background, #fff);
}

.space-wizard-logo__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.space-wizard-logo__fallback {
  width: 2.75rem;
  height: 2.75rem;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  opacity: 0.92;
}

.space-wizard-logo__side {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1 1 0%;
  min-width: 0;
}

.space-wizard-logo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.space-wizard-logo__upload {
  margin: 0;
  cursor: pointer;
}

.space-wizard-access {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}

.space-wizard-access__option {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.125rem 0.875rem 1rem;
  border-radius: 1rem;
  text-align: center;
  border: 2px solid var(--border, #e5e5e5);
  background: transparent;
  color: var(--foreground, #171717);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-wizard-access__option:hover {
  border-color: color-mix(in srgb, var(--foreground, #171717) 28%, transparent);
  background: color-mix(in srgb, var(--foreground, #171717) 3%, transparent);
}

.space-wizard-access__icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.space-wizard-access__option--active {
  border-color: var(--foreground, #171717);
  background: color-mix(in srgb, var(--foreground, #171717) 4%, transparent);
}

.space-wizard-access__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  pointer-events: none;
}

.space-wizard-access__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.space-wizard-access__desc {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #171717) 50%, transparent);
}

@media (max-width: 480px) {
  .space-wizard-logo {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .space-wizard-logo__preview {
    margin: 0 auto;
  }

  .space-wizard-logo__actions {
    justify-content: center;
  }

  .space-wizard-access {
    flex-direction: column;
  }

  .space-wizard-access__option {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }

  .space-wizard-access__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .space-wizard-access__text {
    align-items: flex-start;
  }
}

/* --- app/templates/admin/system_status.j2 --- */

/* Custom table styling - dark mode compatible */

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 0.9375rem;
}

.dark .custom-table {
  background: var(--surface);
  border-color: var(--border);
}

.custom-table thead {
  background: #ffffff;
}

.dark .custom-table thead {
  background: var(--surface);
}

.custom-table thead tr {
  border-bottom: 1px solid #e5e7eb !important;
}

.dark .custom-table thead tr {
  border-bottom-color: var(--border) !important;
}

.custom-table thead th {
  padding: 0.8125rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9375rem;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb !important;
}

.dark .custom-table thead th {
  color: var(--foreground);
  background: var(--surface);
  border-right-color: var(--border);
  border-bottom-color: var(--border) !important;
}

.custom-table thead th:last-child {
  border-right: none;
}

.custom-table tbody tr {
  border-bottom: 1px solid #e5e7eb !important;
  transition: background-color 0.15s ease;
}

.dark .custom-table tbody tr {
  border-bottom-color: var(--border) !important;
}

.custom-table tbody tr:first-child {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr:first-child {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:first-child td {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr:first-child td {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:last-child {
  border-bottom: none !important;
}

/* Ensure all rows have horizontal borders */

.custom-table tbody tr + tr {
  border-top: 1px solid #e5e7eb !important;
}

.dark .custom-table tbody tr + tr {
  border-top-color: var(--border) !important;
}

.custom-table tbody tr:hover {
  background: #f9fafb;
}

.dark .custom-table tbody tr:hover {
  background: var(--surface-subtle);
}

.custom-table tbody td {
  padding: 0.8125rem 1rem;
  color: #374151;
  vertical-align: top;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.dark .custom-table tbody td {
  color: var(--foreground);
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}

.custom-table tbody td:last-child {
  border-right: none;
}

.custom-table tbody tr:last-child td {
  border-bottom: none !important;
}

.custom-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

.custom-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .table-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .table-wrapper .custom-table {
    min-width: 600px;
  }
}

.space-members-panel__header {
  display: flex;
  align-items: center;
  gap: calc(var(--eco-header-pad) * 0.5);
  height: var(--eco-header-h);
  min-height: var(--eco-header-h);
  max-height: var(--eco-header-h);
  padding: 0 var(--account-sidebar-inner-x);
  padding-right: calc(var(--account-sidebar-inner-x) + 30px + 8px);
  border-bottom: 1px solid var(--eco-header-border);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.space-members-panel__header--channel {
  align-items: center;
}

.space-members-panel__channel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

.space-members-panel__channel-icon {
  width: 1rem;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  text-align: center;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.dark .space-members-panel__channel-icon {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.space-members-panel__channel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.0625rem;
}

.space-members-panel__channel-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--foreground);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-members-panel__channel-topic {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease;
}

.dark .space-members-panel__channel-topic {
  color: color-mix(in srgb, var(--foreground) 54%, transparent);
}

.space-members-panel__channel-topic:hover {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
  text-decoration: underline;
}

.space-members-panel__channel-topic:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 45%, transparent);
  outline-offset: 1px;
  border-radius: 2px;
}

.space-members-panel__topic-modal-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.space-members-panel__icon {
  font-size: 1rem;
  color: var(--foreground);
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

.space-members-panel__tab-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  opacity: 0.88;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ac/kapa dugmesi — cerceveli kutu; display:flex [hidden] ustune yazar - 01.07.2026 21:25 */

.space-members-panel__toggle-btn:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 2%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  cursor: pointer;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}

.space-members-panel__toggle-btn:hover {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  color: var(--foreground);
}

.space-members-panel__toggle-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 30%, transparent);
  outline-offset: 1px;
}

.space-members-panel__toggle-btn i {
  font-size: 1rem;
  line-height: 1;
}

.space-members-panel {
  display: none;
  /* mobilde gizli - 21.06.2026 05:59 */
  width: var(--space-sidebar-panel-w, 320px);
  min-width: var(--space-sidebar-panel-w, 320px);
  max-width: var(--space-sidebar-panel-w, 320px);
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background-color: var(--eco-header-bg);
  border-left: 1px solid var(--eco-header-border);
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
  .space-members-panel {
    display: flex;
  }
}

/* sutun sarmalayici — kapaliyken genislik sifir, panel gizli, toggle sabit - 01.07.2026 21:25 */

.space-members-panel-column {
  display: none;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

@media (min-width: 1024px) {
  .space-members-panel-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-self: stretch;
  }

  .space-members-panel-column--collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
  }

  .space-members-panel-column--collapsed .space-members-panel {
    display: none !important;
  }
}

/* toggle — header sag ust kosesinde sabit, panel acik/kapali ayni nokta - 01.07.2026 21:25 */

.space-members-panel__toggle-anchor {
  position: absolute;
  top: calc((var(--eco-header-h) - 30px) / 2);
  right: var(--account-sidebar-inner-x);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* scroll + body — ust bosluk panel basliginden ayrilir - 30.06.2026 07:00 */

.space-members-panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.space-members-panel__body {
  display: flex;
  flex-direction: column;
  /* gap — gizli gruplar flex disina dusunce bosluk kalmasin - 15.07.2026 18:07 */
  gap: calc(var(--sidebar-gap) * 1.5);
  padding-top: calc(var(--sidebar-gap) * 1.25);
  padding-bottom: calc(var(--sidebar-gap) * 0.75);
}

/* grup: sol sidebar nav-section ile ayni - 15.07.2026 18:07 */

.space-member-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}

/* display:flex [hidden] ustune yazar — bos gruplari tamamen cikar - 15.07.2026 18:07 */

.space-member-group[hidden] {
  display: none !important;
}

/* basliksiz grup (rol atanmamis + sahip) - 21.06.2026 05:59 */

.space-member-group--plain {
  margin-top: 0;
}

/* grup baslik: sol sidebar nav-section__label ile ayni - 21.06.2026 05:59 */

.space-member-group__label {
  margin: 0;
  padding: 0 0 calc(var(--sidebar-gap-tight) * 2) var(--account-sidebar-inner-x);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--foreground);
  opacity: 0.38;
  line-height: 1;
}

.dark .space-member-group__label {
  opacity: 0.45;
}

.space-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  margin: 0 calc(var(--account-sidebar-inner-x) - 0.5rem);
  border-radius: var(--sidebar-item-r);
  transition: background-color 0.12s;
  cursor: pointer;
  color: var(--foreground);
  text-decoration: none;
}

.space-member-row:hover {
  background-color: var(--sidebar-hover-bg);
}

.space-member-row__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.space-member-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  transition: opacity 0.12s;
}

/* presence dot — border zemin rengi (--presence-dot-border) - 16.07.2026 19:25 */

.presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--presence-dot-border, var(--sidebar-bg, var(--eco-header-bg, #ffffff)));
  background: #6b7280;
  z-index: 1;
  cursor: default;
}

.presence-dot--online  {
  background: #22c55e;
}

.presence-dot--working {
  background: #259bfc;
}

.presence-dot--idle    {
  background: #f59e0b;
}

.presence-dot--dnd     {
  background: #ef4444;
}

.space-members-panel {
  --presence-dot-border: var(--eco-header-bg);
}

.space-members-panel .presence-dot {
  border-color: var(--presence-dot-border, var(--eco-header-bg));
}

.space-member-row__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.space-member-row__name {
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.15;
  transition: color 0.12s, opacity 0.12s;
  letter-spacing: -0.005em;
}

/* rich presence durum satiri — offline grupta css ile gizlenir - 16.07.2026 00:05 */

.space-member-row__status {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  /* koyu notr — bir tik acik - 16.07.2026 00:10 */
  color: #71717a;
  opacity: 1;
  overflow: hidden;
}

.dark .space-member-row__status {
  color: #a1a1aa;
}

.space-member-row__status[hidden] {
  display: none !important;
}

.space-member-group[data-presence-group="offline"] .space-member-row__status {
  display: none !important;
}

.space-member-row__status-emoji {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 0;
}

.space-member-row__status-emoji .pass-emoji,
.space-member-row__status-emoji-img {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: 0;
}

.space-member-row__status-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.space-member-row__status-text--listening {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.space-member-row__status-track {
  font-weight: 600;
  color: #52525b;
}

.dark .space-member-row__status-track {
  color: #d4d4d8;
}

/* ozel rol rengi — foreground ile karistir, tema uyumlu - 24.06.2026 17:00 */

.space-member-row__name--role {
  --member-role-color: #6b7280;
  opacity: 1;
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground));
}

.dark .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 58%, var(--foreground));
}

.space-member-row:hover .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 88%, var(--foreground));
}

.dark .space-member-row:hover .space-member-row__name--role {
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground));
}

/* cevrimdisi — daha soluk gorunum - 01.07.2026 12:00 */

.space-member-group[data-presence-group="offline"] .space-member-row {
  opacity: 0.52;
  transition: opacity 0.12s, background-color 0.12s;
}

.dark .space-member-group[data-presence-group="offline"] .space-member-row {
  opacity: 0.58;
}

.space-member-group[data-presence-group="offline"] .space-member-row:hover {
  opacity: 0.78;
  background-color: var(--sidebar-hover-bg);
}

.space-member-group[data-presence-group="offline"] .space-member-row__avatar {
  opacity: 0.65;
}

.space-member-group[data-presence-group="offline"] .space-member-row:hover .space-member-row__avatar {
  opacity: 0.85;
}

.space-member-group[data-presence-group="offline"] .space-member-row__name,
.space-member-group[data-presence-group="offline"] .space-member-row__name--role {
  color: var(--foreground);
  opacity: 1;
}

/* ── Role Color Picker ─────────────────────────────────────────────────────── */

.role-perm-row.role-perm--checked {
  background-color: var(--surface-subtle);
  border-color: var(--ink);
}

.role-perm-row.role-perm--checked .role-perm-check {
  background-color: var(--ink);
  border-color: var(--ink);
}

.role-perm-row.role-perm--checked .role-perm-check i {
  display: block;
  color: var(--background);
}

.role-color-btn.role-color--selected {
  border-color: var(--ink) !important;
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.role-perm-group__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin: 0 0 0.375rem;
}

.roles-list__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.6875rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: left;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.roles-list__item:hover {
  background: var(--surface-subtle);
}

.roles-list__item--active {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.roles-list__item--dragging {
  opacity: 0.45;
}

.roles-list__handle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  cursor: grab;
}

.roles-list__handle--locked {
  cursor: not-allowed;
  opacity: 0.35;
}

.roles-list__handle-spacer {
  width: 1.25rem;
  flex: none;
}

.roles-list__dot {
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.roles-list__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roles-list__lock {
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  flex-shrink: 0;
}

/* ─── Space sidebar tabs ─────────────────────────────────────── */

/*
 * hiyerarsi sistemi:
 *  - space satiri: yuvarlak → squircle animasyonu olan 36x36 renkli ikon
 *  - sekmeler: space ikon merkezinden (x=26px) baslayan ince dikey agac cizgisi
 *  - sekme ikonu: daima squircle 28x28, nötr (renksiz) — space ikonundan net ayrilir
 * - 21.06.2026 06:36
 */

/* liyi agac cizgisi icin referans noktasi yap - 21.06.2026 06:36 */

.spaces-sb-list > li {
  position: relative;
}

/* dikey agac cizgisi: space ikonunun merkez ekseni (x = 8+18 = 26px) - 21.06.2026 06:36 */

.spaces-sb-list > li > .spaces-sb-tabs::before {
  content: '';
  position: absolute;
  left: 26px;
  top: -4px;
  bottom: 14px;
  width: 1.5px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
  pointer-events: none;
}

.dark .spaces-sb-list > li > .spaces-sb-tabs::before {
  background: color-mix(in srgb, var(--foreground) 18%, transparent);
}

.spaces-sb-tabs {
  list-style: none;
  margin: 0;
  /* ust/sag 8px esit; sol agac cizgisi icin ek bosluk - 21.06.2026 06:40 */
  padding: 8px 8px 8px 38px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
}

/* sekme satiri: ikon + label, kapsayici kutu yok - 21.06.2026 14:23 */

.spaces-sb-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--foreground);
  background-color: transparent;
  transition: background-color 120ms ease;
}

.spaces-sb-tab:hover {
  background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.dark .spaces-sb-tab:hover {
  background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.spaces-sb-tab--active {
  background-color: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.dark .spaces-sb-tab--active {
  background-color: color-mix(in srgb, var(--foreground) 13%, transparent);
}

.spaces-sb-tab__icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
  transition: color 120ms ease;
}

.dark .spaces-sb-tab__icon {
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.spaces-sb-tab:hover .spaces-sb-tab__icon {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.spaces-sb-tab--active .spaces-sb-tab__icon {
  color: var(--foreground);
}

.spaces-sb-tab__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.50;
  transition: opacity 120ms ease;
}

.dark .spaces-sb-tab__label {
  opacity: 0.60;
}

.spaces-sb-tab:hover .spaces-sb-tab__label,
.spaces-sb-tab--active .spaces-sb-tab__label {
  opacity: 1;
}

.spaces-sb-tab--active .spaces-sb-tab__label {
  font-weight: 600;
}

.space-pins-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8125rem;
}

.space-item--grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  padding: 1rem 1rem 1.125rem;
  border-radius: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
  transition: background 120ms ease, border-color 120ms ease;
}

.space-item--grid:hover {
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.space-item__link--grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8125rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.space-item__grid-body {
  width: 100%;
}

.space-item__grid-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.6875rem;
}

.space-item__link {
  text-decoration: none;
  color: inherit;
}

/* sahip / uye / pin meta satiri - 16.07.2026 18:58 */

.space-item__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.space-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.75rem;
  padding: 0 0.5625rem;
  border-radius: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
}

.space-item__badge i {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.88;
}

.space-item__badge--owner {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  background: color-mix(in srgb, var(--foreground) 5.5%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.space-item__badge--owner i {
  opacity: 1;
}

.space-item__badge--members {
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-variant-numeric: tabular-nums;
}

.space-item__badge--status {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.space-item__badge--pending {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 28%, transparent);
}

html.dark .space-item__badge--pending {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border-color: color-mix(in srgb, #f59e0b 32%, transparent);
}

.space-item__badge--muted {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.space-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  padding: 0;
  border-radius: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.space-pin-btn i {
  font-size: 0.8125rem;
  line-height: 1;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.space-pin-btn:hover:not(:disabled) {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.space-pin-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 2px;
}

.space-pin-btn--active {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
}

.space-pin-btn--active i {
  transform: rotate(-24deg);
}

.space-pin-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.space-item--grid .space-pin-btn {
  position: absolute;
  top: 0.8125rem;
  right: 0.8125rem;
}

.space-item--grid .space-item__badge {
  display: inline-flex;
}

@media (max-width: 640px) {
  /* mobilde sahip yazisi gizle, taç ikonu kalsin - 16.07.2026 18:58 */

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

  .space-item__badge--owner {
    position: relative;
    width: 1.75rem;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .space-pins-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-pin-btn,
    .space-pin-btn i {
    transition: none;
  }
}

.space-item--accordion {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.space-item__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  min-width: 0;
}

.space-item__summary:hover {
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.space-item__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  flex-shrink: 0;
  transition: transform 160ms ease, color 120ms ease, background 120ms ease;
}

.space-item__expand:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
  color: var(--foreground);
}

.space-item--accordion.is-open .space-item__expand-icon {
  transform: rotate(180deg);
}

.space-item__expand-icon {
  display: block;
  font-size: 0.875rem;
  transition: transform 160ms ease;
}

.space-item__avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.space-item__avatar-wrap .spaces-sb-mention-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
}

.space-item__title--unread {
  font-weight: 700;
}

.space-item__panel {
  padding: 0 1.25rem 0.875rem 3.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
}

.space-item__panel[hidden] {
  display: none;
}

.space-home-channels {
  list-style: none;
  margin: 0.625rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.space-home-channel__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.625rem;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

.space-home-channel__link:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.space-home-channel__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}

.space-home-channel--unread .space-home-channel__dot {
  background: var(--foreground);
}

.space-home-channel__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-home-channel--unread .space-home-channel__name {
  color: var(--foreground);
  font-weight: 600;
}

.space-home-channel__mention,
.space-home-channel__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.space-home-channel__mention {
  background: #dc2626;
  color: #fff;
}

.space-home-channel__count {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
}

.space-home-channels__empty {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.space-item--discover:hover {
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.space-discover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease;
}

.space-discover-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
}

.space-discover-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.space-discover-btn--primary {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.space-discover-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground) 88%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.space-discover-btn--pending {
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
}

.space-discover-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.5rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 120ms ease, border-color 120ms ease;
}

.space-discover-more:hover {
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
}

#spaces-sidebar {
  --sidebar-bg: var(--account-split-sidebar-bg);
  --presence-dot-border: var(--account-split-sidebar-bg);
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  /* space header ile ayni yatay inset - 16.07.2026 19:41 */
  --spaces-sb-user-pad-x: var(--sp-sidebar-inset-x);
}

/* liste: spaces-sb-inner px-2 - 16.07.2026 19:41 */

#spaces-sidebar:has([data-spaces-sb-inner]) {
  --spaces-sb-user-pad-x: 0.5rem;
}

.spaces-sb-user {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem var(--spaces-sb-user-pad-x);
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: var(--account-split-sidebar-bg);
}

html.dark .spaces-sb-user {
  border-top-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* menu acikken sidebar clip kesmesin - 16.07.2026 19:41 */

#spaces-sidebar:has(.spaces-sb-user [aria-expanded="true"]) {
  overflow: visible;
}

.spaces-sb-user__row {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  /* space: inset disarda — avatar header ile hizali - 16.07.2026 20:01 */
  padding: 0.25rem 0;
  gap: 0.625rem;
  min-height: 2.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  cursor: default;
  font: inherit;
  text-align: left;
  color: inherit;
}

.spaces-sb-user__row:hover {
  background-color: var(--sidebar-hover-bg);
}

/* liste satirlari p-2 ile ayni - 16.07.2026 19:41 */

#spaces-sidebar:has([data-spaces-sb-inner]) .spaces-sb-user__row {
  padding: 0.5rem;
  gap: 0.6875rem;
  min-height: 2.625rem;
}

.spaces-sb-user .space-member-row__avatar-wrap,
.spaces-sb-user .space-member-row__avatar {
  width: 36px;
  height: 36px;
}

.spaces-sb-user .space-member-row__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.spaces-sb-user .space-member-row__status {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.spaces-sb-user .space-member-row__meta {
  gap: 0.125rem;
}

.spaces-sb-user .presence-dot {
  border-color: var(--presence-dot-border, var(--account-split-sidebar-bg));
}

.spaces-sb-user .space-member-row__status[data-listening="1"] {
  display: none !important;
}

/* sag aksiyonlar: presence menu + rich presence - 16.07.2026 20:01 */

.spaces-sb-user__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
  margin-left: auto;
}

.spaces-sb-user__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.spaces-sb-user__btn i {
  font-size: 0.9375rem;
  line-height: 1;
}

.spaces-sb-user__btn:hover {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.spaces-sb-user__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
  outline-offset: 1px;
}

.spaces-sb-user__btn[aria-expanded="true"] {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.spaces-sb-user__btn[aria-expanded="true"] i.ph-caret-up {
  transform: rotate(180deg);
}

.spaces-sb-user__btn i.ph-caret-up {
  transition: transform 160ms ease;
}

.spaces-sb-user__activity {
  min-width: 0;
  width: 100%;
}

.spaces-sb-user__activity[hidden] {
  display: none !important;
}

.spaces-sb-user__activity .pass-user-card__activity-card {
  margin-top: 0;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.75rem;
}

.spaces-sb-user__activity .pass-user-card__activity-media,
.spaces-sb-user__activity .pass-user-card__activity-cover {
  width: 48px;
  height: 48px;
}

.spaces-sb-user__activity .pass-user-card__activity-cover {
  border-radius: 0.5rem;
}

.spaces-sb-user__activity .pass-user-card__activity-body {
  height: 48px;
}

.spaces-sb-user__activity .pass-user-card__activity-label {
  margin-bottom: 0.1875rem;
  font-size: 0.5625rem;
}

.spaces-sb-user__activity .pass-user-card__activity-name {
  font-size: 0.75rem;
}

.spaces-sb-user__activity .pass-user-card__activity-details {
  margin-top: 0.125rem;
  font-size: 0.625rem;
}

.spaces-sb-user__activity .pass-user-card__activity-player {
  padding-top: 0.25rem;
  gap: 0.1875rem;
}

.spaces-sb-user__activity .pass-user-card__activity-provider-badge {
  width: 16px;
  height: 16px;
  right: -4px;
  bottom: -4px;
  border-radius: 4px;
}

.spaces-sb-user__activity .pass-user-card__activity-provider-badge img {
  width: 12px;
  height: 12px;
}

/* status menu ogesi — renkli nokta + etiket - 16.07.2026 19:41 */

.spaces-sb-status-item {
  gap: 0.625rem;
}

.spaces-sb-status-item__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b7280;
}

.spaces-sb-status-item__dot.presence-dot--online {
  background: #22c55e;
}

.spaces-sb-status-item__dot.presence-dot--idle {
  background: #f59e0b;
}

.spaces-sb-status-item__dot.presence-dot--dnd {
  background: #ef4444;
}

.spaces-sb-status-item__dot.presence-dot--offline {
  background: #6b7280;
}

.spaces-sb-status-item[aria-checked="true"] {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* ── space'e ozgu sidebar (sp-sidebar) ────────────────────────── */

/* kapsayici: dividerlar kenardan kenara - 21.06.2026 15:45 */

.sp-sidebar {
  /* cengel rail logosu (36px) ile sol kenar hizasi - 01.07.2026 20:15 */
  --sp-sidebar-inset-x: calc((var(--account-static-sidebar-w) - 36px) / 2);
  --sp-sidebar-inset-y: var(--split-sidebar-inset-y);
  --sp-cat-title-gap: 4px;
  /* discord kanal listesi: dis kapsayici + satir icerigi - 01.07.2026 23:45 */
  --sp-channel-pad-x: var(--sp-sidebar-inset-x);
  --sp-channel-row-x: 0px;
  --sp-tab-row-pad-x: 0.5rem;
  --sp-tab-row-margin-x: calc(var(--sp-channel-pad-x) - var(--sp-tab-row-pad-x));
  --sp-add-tab-bg: var(--foreground);
  --sp-add-tab-fg: var(--background);
  --sp-add-tab-bg-hover: color-mix(in srgb, var(--foreground) 90%, var(--background));
  --sp-add-tab-bg-active: color-mix(in srgb, var(--foreground) 84%, var(--background));
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* overflow menu: ust kapsayicilarda kirpma kaldir, panel ustte kalsin - 02.07.2026 01:00 */

#spaces-sidebar.account-desktop-sidebar:has(.sp-sidebar [data-overflow-open="1"]) {
  overflow: visible;
  z-index: var(--z-pass-context, 10080);
}

.sp-sidebar:has([data-overflow-open="1"]) {
  overflow: visible;
}

.sp-sidebar__header {
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sp-sidebar__header:has([data-overflow-open="1"]) {
  overflow: visible;
  z-index: var(--z-pass-context, 10080);
}

.sp-sidebar__space-row .sp-sidebar__space-link {
  flex: 1;
  min-width: 0;
}

/* tam genislik ayrac: sol/saga bitisik - 21.06.2026 15:45 */

.sp-sidebar__divider {
  height: 1px;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sp-sidebar__divider {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* aktif space satiri - 21.06.2026 15:45 */

.sp-sidebar__space-link {
  display: block;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}

.sp-sidebar__space-link:hover {
  background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.dark .sp-sidebar__space-link:hover {
  background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-sidebar__space-link--active,
.sp-sidebar__space-link--active:hover {
  background-color: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.dark .sp-sidebar__space-link--active,
.dark .sp-sidebar__space-link--active:hover {
  background-color: color-mix(in srgb, var(--foreground) 13%, transparent);
}

.sp-sidebar__space-link--active .sp-sidebar__name {
  opacity: 1;
}

.sp-sidebar__space {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0;
}

.sp-sidebar__space [data-space-avatar-icon] {
  border-radius: inherit;
}

/* space avatar: logo veya renkli planet — radius hover rail ile ayni - 16.07.2026 18:58 */

.space-avatar--has-logo {
  overflow: hidden;
}

.space-avatar__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: inherit;
}

.space-avatar--card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  overflow: hidden;
  font-size: 1.125rem;
  border-radius: 50%;
  color: var(--av-fg, var(--foreground));
  background: var(--av-bg, color-mix(in srgb, var(--foreground) 10%, transparent));
  transition: border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1), filter 160ms ease;
}

.dark .space-avatar--card {
  color: var(--av-fg-d, var(--av-fg, var(--foreground)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground) 16%, transparent)));
}

.space-avatar--settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  overflow: hidden;
  font-size: 1.0625rem;
  border-radius: 12px;
  color: var(--av-fg, var(--foreground));
  background: var(--av-bg, color-mix(in srgb, var(--foreground) 10%, transparent));
}

.dark .space-avatar--settings {
  color: var(--av-fg-d, var(--av-fg, var(--foreground)));
  background: var(--av-bg-d, var(--av-bg, color-mix(in srgb, var(--foreground) 16%, transparent)));
}

.space-item:hover .space-avatar--card {
  border-radius: 14px;
  filter: saturate(1.15) brightness(1.04);
}

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

/* sidebar space list avatar radius gecisi - 16.07.2026 18:58 */

[data-spaces-sb-list] [data-space-avatar-icon] {
  transition: border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1), filter 160ms ease;
}

/* spaces liste chevron - 16.07.2026 18:58 */

.space-item__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 32%, transparent);
  transition: color 120ms ease, transform 120ms ease;
}

.space-item__chevron i {
  font-size: 0.9375rem;
  line-height: 1;
}

.space-item:hover .space-item__chevron {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  transform: translateX(1px);
}

/* space metin grubu - 21.06.2026 15:45 */

.sp-sidebar__space-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.sp-sidebar__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
}

.sp-sidebar__sub {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

/* sekmeler nav wrapper — scroll tabs, add butonu altta sabit - 30.06.2026 20:00 */

.sp-sidebar__nav {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sp-sidebar__tabs {
  --sp-tab-list-pad-x: var(--sp-channel-pad-x, var(--sp-sidebar-inset-x));
  --sp-tab-icon-col: 1rem;
  --sp-tab-icon-gap: 8px;
  --sp-section-gap: 14px;
  list-style: none;
  margin: 0;
  padding: var(--sp-sidebar-inset-y) 0;
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-section-gap);
  box-sizing: border-box;
}

.sp-sidebar__tabs > .sp-sidebar__tab-item,
.sp-sidebar__tabs > .sp-sidebar__cat-item,
.sp-sidebar__tabs > .sp-sidebar__uncat-group {
  min-width: 0;
  max-width: 100%;
}

.sp-sidebar__uncat-list,
.sp-sidebar__cat-children {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* yeni sekme — primary cta, logo hizasi, tasima yok - 02.07.2026 01:30 */

.sp-sidebar__add-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin:
        var(--sp-sidebar-inset-y)
        var(--sp-channel-pad-x)
        var(--split-sidebar-inset-bottom, 0.375rem);
  flex-shrink: 0;
  min-height: 38px;
  min-width: 0;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--sidebar-item-r, 9px);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--sp-add-tab-bg) 88%, var(--sp-add-tab-fg));
  background: var(--sp-add-tab-bg);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--sp-add-tab-fg);
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease;
}

.sp-sidebar__add-tab:hover {
  background: var(--sp-add-tab-bg-hover);
  border-color: color-mix(in srgb, var(--sp-add-tab-bg-hover) 90%, var(--sp-add-tab-fg));
}

.sp-sidebar__add-tab:active {
  background: var(--sp-add-tab-bg-active);
  border-color: color-mix(in srgb, var(--sp-add-tab-bg-active) 90%, var(--sp-add-tab-fg));
}

.sp-sidebar__add-tab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
}

.dark .sp-sidebar__add-tab:focus-visible {
  outline-color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-sidebar__add-tab i {
  font-size: 1.0625rem;
  line-height: 1;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.94;
}

.sp-sidebar__add-tab:hover i,
.sp-sidebar__add-tab:active i {
  opacity: 1;
}

/* drag state — boyut sabit - 30.06.2026 22:00 */

.sp-sidebar__tab-item {
  cursor: grab;
  list-style: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

.sp-sidebar__tab-item > .sp-sidebar__tab {
  max-width: none;
}

.sp-sidebar__tab-item--dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.sp-sidebar__tab-item--over > .sp-sidebar__tab {
  background: var(--sidebar-hover-bg);
}

.dark .sp-sidebar__tab-item--over > .sp-sidebar__tab {
  background: var(--sidebar-hover-bg);
}

/* kategori — bolum araligi ust listedeki gap ile ayni - 01.07.2026 14:00 */

.sp-sidebar__cat-item {
  list-style: none;
  margin: 0;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.sp-sidebar__cat-item + .sp-sidebar__cat-item {
  margin-top: 2px;
}

.sp-sidebar__uncat-group {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
}

.sp-sidebar__cat-item--dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.sp-sidebar__cat-header {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.sp-sidebar__cat-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.dark .sp-sidebar__cat-label {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-sidebar__cat-caret {
  flex-shrink: 0;
  width: 0.8125rem;
  font-size: 0.6875rem;
  line-height: 1;
  text-align: center;
  transition: transform 0.15s ease, color 100ms ease;
  color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.sp-sidebar__cat-item--collapsed .sp-sidebar__cat-caret {
  transform: rotate(-90deg);
}

.sp-sidebar__cat-item:not(.sp-sidebar__cat-item--collapsed) .sp-sidebar__cat-caret {
  transform: rotate(0deg);
}

.sp-sidebar__cat-children {
  list-style: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* display:flex [hidden] ustune yazar — sinif ile kapat - 30.06.2026 21:30 */

.sp-sidebar__cat-item--collapsed > .sp-sidebar__cat-children {
  display: none;
}

/* kategorisiz kume — ek yatay bosluk yok - 01.07.2026 13:45 */

.sp-sidebar__uncat-list {
  list-style: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-sizing: border-box;
}

/* kategorisiz drop hedefi — surukleme sirasinda hafif vurgu - 01.07.2026 13:00 */

.sp-sidebar__tabs--dragging .sp-sidebar__uncat-list--over {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-radius: 4px;
}

.dark .sp-sidebar__tabs--dragging .sp-sidebar__uncat-list--over {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
}

/* kategori hedefi — kasitli hover sonrasi arka plan - 30.06.2026 23:45 */

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--collapsed .sp-sidebar__cat-children {
  display: none;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over .sp-sidebar__cat-children {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-radius: 4px;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over > .sp-sidebar__cat-header {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-radius: 4px;
}

.sp-sidebar__tabs--dragging .sp-sidebar__cat-item--over > .sp-sidebar__cat-header .sp-sidebar__cat-label {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

/* surukleme sirasinda link tiklamasi engelle - 30.06.2026 12:00 */

.sp-sidebar__tab-item--dragging > .sp-sidebar__tab,
.sp-sidebar__tabs:has(.sp-sidebar__tab-item--dragging) .sp-sidebar__tab-item--child > .sp-sidebar__tab {
  pointer-events: none;
}

/* surukleme cizgisi — layout kaymasi yok - 01.07.2026 13:00 */

.sp-sidebar__tabs {
  position: relative;
}

.sp-sidebar__dnd-line {
  position: absolute;
  left: var(--sp-tab-row-margin-x);
  right: var(--sp-tab-row-margin-x);
  height: 2px;
  margin: 0;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--foreground) 55%, transparent);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 80ms ease;
}

.sp-sidebar__dnd-line--visible {
  opacity: 1;
}

/* yanit sekmeleri — parent kanal altinda, rail cizgileri tabs dosyasinda - 06.07.2026 05:00 */

.sp-sidebar__reply-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.space-tab-modal__panel {
  width: 100%;
  max-width: 400px;
  border-radius: 18px;
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  overflow: hidden;
}

.space-tab-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-tab-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.space-tab-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  transition: background 120ms ease, color 120ms ease;
}

.space-tab-modal__close:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.space-tab-modal__body {
  padding: 18px 20px 20px;
}

.space-tab-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.space-tab-modal__field + .space-tab-modal__field {
  margin-top: 16px;
}

.space-tab-modal__field + .space-tab-modal__error {
  margin-top: 12px;
}

.space-tab-modal__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.space-tab-modal__label {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-family: Arial, sans-serif;
}

.space-tab-modal__body > .space-tab-modal__label {
  margin-bottom: 6px;
}

.space-tab-modal__label--section {
  margin-top: 16px;
}

.space-tab-modal__count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  font-variant-numeric: tabular-nums;
}

.space-tab-modal__count--near {
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.space-tab-modal__count--full {
  color: #dc2626;
}

.space-tab-modal__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.space-tab-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  color: var(--foreground);
  font-size: 0.9375rem;
  font-family: Arial, sans-serif;
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.space-tab-modal__input::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground) 36%, transparent);
  opacity: 1;
}

.space-tab-modal__input::placeholder {
  color: color-mix(in srgb, var(--foreground) 36%, transparent);
  opacity: 1;
}

.space-tab-modal__input:focus {
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  background: transparent;
}

.space-tab-modal__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.space-tab-type-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.space-tab-type-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
  font-family: Arial, sans-serif;
}

.space-tab-type-card--selected {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.space-tab-type-card__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--foreground);
}

.space-tab-type-card__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.space-tab-type-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.space-tab-type-card__desc {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.space-tab-modal__error {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: #dc2626;
  font-family: Arial, sans-serif;
}

.space-tab-modal__error.hidden {
  display: none;
}

.space-tab-modal__error.\!hidden {
  display: none !important;
}

.space-tab-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.space-tab-modal__field + .space-tab-modal__actions,
.space-tab-modal__error + .space-tab-modal__actions {
  margin-top: 16px;
}

.space-tab-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 42px;
  padding: 0 1.125rem;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: Arial, sans-serif;
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.space-tab-modal__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.space-tab-modal__btn--ghost {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  background: transparent;
  color: var(--foreground);
}

.space-tab-modal__btn--ghost:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.space-tab-modal__btn--primary {
  border: none;
  background: var(--foreground);
  color: var(--background);
}

.space-tab-modal__btn--primary:hover {
  opacity: 0.9;
}

.space-tab-type-card--disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* satir: uye paneli space-member-row ile ayni overflow bg (sol/sag simetrik) - 02.07.2026 00:30 */

.sp-sidebar__tab {
  display: flex;
  align-items: center;
  gap: var(--sp-tab-icon-gap, 8px);
  min-height: 36px;
  min-width: 0;
  width: auto;
  margin: 0 var(--sp-tab-row-margin-x, calc(var(--sp-channel-pad-x, 14px) - var(--sp-tab-row-pad-x, 0.5rem)));
  padding: 6px var(--sp-tab-row-pad-x, 0.5rem);
  border-radius: var(--sidebar-item-r, 9px);
  text-decoration: none;
  color: var(--foreground);
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 120ms ease, color 100ms ease;
}

.sp-sidebar__tab:hover {
  background-color: var(--sidebar-hover-bg);
  color: color-mix(in srgb, var(--foreground) 88%, transparent);
}

.dark .sp-sidebar__tab:hover {
  color: color-mix(in srgb, var(--foreground) 92%, transparent);
}

.sp-sidebar__tab--active,
.sp-sidebar__tab--active:hover {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg, var(--foreground));
}

.dark .sp-sidebar__tab--active,
.dark .sp-sidebar__tab--active:hover {
  background-color: var(--sidebar-active-bg);
}

/* ikon kolonu — kategori yazisi ile ayni sol ray (channel-row-x) - 01.07.2026 23:45 */

.sp-sidebar__tab-icon {
  width: var(--sp-tab-icon-col, 1rem);
  min-width: var(--sp-tab-icon-col, 1rem);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  text-align: left;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  transition: color 100ms ease;
}

.dark .sp-sidebar__tab-icon {
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-sidebar__tab:hover .sp-sidebar__tab-icon {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
}

.sp-sidebar__tab--active .sp-sidebar__tab-icon {
  color: var(--foreground);
}

.sp-sidebar__tab-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  transition: color 100ms ease;
}

.dark .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.sp-sidebar__tab:hover .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
}

.sp-sidebar__tab--active .sp-sidebar__tab-label {
  font-weight: 500;
  color: var(--foreground);
}

/* okunmamis — parlak metin - 30.06.2026 23:15 */

.sp-sidebar__tab--unread .sp-sidebar__tab-label {
  font-weight: 500;
  color: var(--foreground);
}

.dark .sp-sidebar__tab--unread .sp-sidebar__tab-label {
  color: var(--foreground);
}

.sp-sidebar__tab--unread .sp-sidebar__tab-icon {
  color: var(--foreground);
}

.dark .sp-sidebar__tab--unread .sp-sidebar__tab-icon {
  color: var(--foreground);
}

.sp-sidebar__tab--active .sp-sidebar__tab-mention {
  display: none;
}

/* yanit thread agaci — parent kanal basligindan dallanan rail - 16.07.2026 17:25 */

.sp-sidebar__tab-item:has(> .sp-sidebar__reply-children > .sp-sidebar__tab-item--reply-child) {
  --sp-reply-thread-rail: color-mix(in srgb, var(--foreground) 16%, transparent);
  --sp-reply-thread-radius: 8px;
  --sp-reply-thread-stroke: 1.5px;
  --sp-reply-thread-stub: 0.6875rem;
  --sp-reply-thread-cap: 8px;
}

.dark .sp-sidebar__tab-item:has(> .sp-sidebar__reply-children > .sp-sidebar__tab-item--reply-child) {
  --sp-reply-thread-rail: color-mix(in srgb, var(--foreground) 24%, transparent);
}

.sp-sidebar__reply-children {
  --sp-reply-rail-x: calc(
        var(--sp-tab-row-margin-x, 0.5rem) + var(--sp-tab-row-pad-x, 0.5rem) + (var(--sp-tab-icon-col, 1rem) / 2)
    );
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

/* parent stub kaldirildi — ilk cocuk rail'i yukari uzar, cift stroke olmaz - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child {
  position: relative;
}

/* dikey govde — ara elemanlarda tam yukseklik; ilk cocuk parent'a kadar uzar - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) - var(--sp-reply-thread-stroke) / 2);
  top: 0;
  width: var(--sp-reply-thread-stroke);
  background: var(--sp-reply-thread-rail);
  pointer-events: none;
}

.sp-sidebar__tab-item--reply-child:first-child::before {
  top: calc(-1 * var(--sp-reply-thread-cap, 8px));
}

.sp-sidebar__tab-item--reply-child:not(:last-child)::before {
  bottom: 0;
}

/* son eleman: L tek parca (::after); ::before yok — kesişim kararmasi olmaz - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:last-child::before {
  content: none;
}

/* ara elemanlar — govdenin sag kenarindan cikan dal (ust uste binmez) - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) + var(--sp-reply-thread-stroke) / 2);
  top: 50%;
  width: calc(var(--sp-reply-thread-stub) - var(--sp-reply-thread-stroke) / 2);
  height: var(--sp-reply-thread-stroke);
  background: var(--sp-reply-thread-rail);
  transform: translateY(-50%);
  pointer-events: none;
}

/* son eleman — tek L: dikey + yuvarlak donus + yatay (cift stroke yok) - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:last-child::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-reply-rail-x) - var(--sp-reply-thread-stroke) / 2);
  top: 0;
  width: calc(var(--sp-reply-thread-stub) + var(--sp-reply-thread-stroke) / 2);
  height: calc(50% + var(--sp-reply-thread-stroke) / 2);
  box-sizing: border-box;
  border-left: var(--sp-reply-thread-stroke) solid var(--sp-reply-thread-rail);
  border-bottom: var(--sp-reply-thread-stroke) solid var(--sp-reply-thread-rail);
  border-bottom-left-radius: var(--sp-reply-thread-radius);
  pointer-events: none;
}

/* tek yanit: L parent stub yerine yukari uzar - 16.07.2026 17:25 */

.sp-sidebar__tab-item--reply-child:first-child:last-child::after {
  top: calc(-1 * var(--sp-reply-thread-cap, 8px));
  height: calc(50% + var(--sp-reply-thread-cap, 8px) + var(--sp-reply-thread-stroke) / 2);
}

.sp-sidebar__tab-item--reply-child:has(.sp-sidebar__tab--active)::before,
.sp-sidebar__tab-item--reply-child:has(.sp-sidebar__tab--unread)::before {
  background: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-sidebar__tab-item--reply-child:not(:last-child):has(.sp-sidebar__tab--active)::after,
.sp-sidebar__tab-item--reply-child:not(:last-child):has(.sp-sidebar__tab--unread)::after {
  background: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-sidebar__tab-item--reply-child:last-child:has(.sp-sidebar__tab--active)::after,
.sp-sidebar__tab-item--reply-child:last-child:has(.sp-sidebar__tab--unread)::after {
  border-left-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  border-bottom-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

/* pill arka plani yalnizca etiketin oldugu alanda — agac cizgilerinin ustune binmez - 06.07.2026 05:10 */

.sp-sidebar__tab--reply-thread {
  min-height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0.375rem;
  margin-left: calc(var(--sp-reply-rail-x) + var(--sp-reply-thread-stub, 0.6875rem) + 0.25rem);
}

.sp-sidebar__tab--reply-thread .sp-sidebar__tab-icon--empty {
  display: none;
}

.sp-sidebar__tab--reply-thread .sp-sidebar__tab-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 46%, transparent);
}

.dark .sp-sidebar__tab--reply-thread .sp-sidebar__tab-label {
  color: color-mix(in srgb, var(--foreground) 54%, transparent);
}

.sp-sidebar__tab--reply-thread:hover .sp-sidebar__tab-label,
.sp-sidebar__tab--reply-thread.sp-sidebar__tab--active .sp-sidebar__tab-label,
.sp-sidebar__tab--reply-thread.sp-sidebar__tab--unread .sp-sidebar__tab-label {
  color: var(--foreground);
}

.sp-sidebar__tab-icon--empty {
  display: inline-block;
  width: 1rem;
  flex-shrink: 0;
}

.sp-sidebar__header-body {
  padding: var(--sp-sidebar-inset-y) var(--sp-sidebar-inset-x);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.sp-sidebar__header-body:has([data-overflow-open="1"]) {
  overflow: visible;
}

.sp-sidebar__space-row:has([data-overflow-open="1"]) {
  overflow: visible;
}

/* header space logosu — tam 36x36, container ile birebir - 01.07.2026 21:30 */

.sp-sidebar__header-body .sp-sidebar__space-avatar {
  flex: 0 0 36px;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  font-size: 1.0625rem;
}

.sp-sidebar__header-body .sp-sidebar__space-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
}

.sp-sidebar__space-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.sp-sidebar__header-menu {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  z-index: 1;
}

.sp-sidebar__header-menu[data-overflow-open="1"] {
  z-index: var(--z-pass-context, 10080);
}

.sp-sidebar__header-menu .pass-menu.pass-menu--anchored,
.sp-sidebar__header-menu [data-overflow-dropdown-panel] {
  z-index: var(--z-pass-context, 10080);
}

.sp-sidebar__nav-divider {
  height: 1px;
  width: 100%;
  margin: var(--sp-sidebar-inset-y) 0 0;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.dark .sp-sidebar__nav-divider {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.sp-sidebar__cat-header {
  justify-content: space-between;
  gap: 8px;
  padding: 2px var(--sp-channel-pad-x, var(--sp-sidebar-inset-x)) 6px;
  min-height: 26px;
  box-sizing: border-box;
}

.sp-sidebar__cat-title {
  display: flex;
  align-items: center;
  gap: var(--sp-cat-title-gap, 4px);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sp-sidebar__cat-title:hover .sp-sidebar__cat-label,
.sp-sidebar__cat-title:hover .sp-sidebar__cat-caret,
.sp-sidebar__cat-title:focus-visible .sp-sidebar__cat-label,
.sp-sidebar__cat-title:focus-visible .sp-sidebar__cat-caret {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.sp-sidebar__cat-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  outline-offset: 2px;
}

.sp-sidebar__cat-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-sidebar__cat-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: 2px;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 38%, transparent);
  cursor: pointer;
  transition: color 100ms ease, background-color 100ms ease;
}

.sp-sidebar__cat-add:hover {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-sidebar__cat-add:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 18%, transparent);
  outline-offset: 1px;
}

.sp-sidebar__cat-add i {
  font-size: 0.875rem;
  line-height: 1;
}

/* ── space settings layout ───────────────────────────────────── */

.sp-settings {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sp-settings__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sp-settings__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sp-settings__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
}

.sp-settings__subtitle {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin: 0;
}

.sp-settings__layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .sp-settings__layout {
    grid-template-columns: 1fr;
  }
}

.sp-settings__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-settings__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 120ms ease;
}

.sp-settings__nav-item:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings__nav-item--active {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
}

.sp-settings__nav-icon {
  font-size: 1rem;
  opacity: 0.55;
}

.sp-settings__nav-item--active .sp-settings__nav-icon {
  opacity: 1;
}

.sp-settings-panel {
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  overflow: hidden;
}

.sp-settings-panel--danger {
  border-color: color-mix(in srgb, #dc2626 25%, transparent);
}

.sp-settings-panel__head {
  padding: 1.375rem 1.625rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-panel__head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.sp-settings-panel__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-panel__desc {
  font-size: 0.9375rem;
  margin: 0.375rem 0 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-panel__body {
  padding: 1.625rem;
}

.sp-settings-panel [hidden] {
  display: none !important;
}

.sp-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.sp-settings-form--readonly .sp-settings-panel__body {
  gap: 1.125rem;
}

.sp-settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sp-settings-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  font-size: 0.9375rem;
  transition: border-color 140ms ease;
}

.sp-settings-input:focus {
  outline: 2px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  outline-offset: 1px;
}

.sp-settings-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sp-settings-input--search {
  padding-left: 2.25rem;
}

.sp-settings-readonly {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-hint {
  font-size: 0.875rem;
  margin: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.sp-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.9375rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.sp-settings-btn--primary {
  background: var(--foreground);
  color: var(--background);
}

.sp-settings-btn--primary:hover {
  opacity: 0.88;
}

.sp-settings-btn--secondary {
  background: transparent;
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
  color: var(--foreground);
}

.sp-settings-btn--ghost {
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
}

.sp-settings-btn--danger {
  background: transparent;
  border-color: color-mix(in srgb, #dc2626 35%, transparent);
  color: #dc2626;
}

.sp-settings-divider {
  margin: 0;
  border: none;
  height: 1px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-logo-row {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}

.sp-settings-logo-row--tall {
  align-items: flex-start;
  gap: 1.25rem;
}

.sp-settings-logo-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.sp-settings-logo-preview {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-settings-logo-preview--lg {
  width: 88px;
  height: 88px;
  border-radius: 18px;
}

.sp-settings-logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sp-settings-logo-fallback {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-logo-preview--lg .sp-settings-logo-fallback {
  font-size: 2rem;
}

.sp-settings-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sp-settings-field--status {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sp-settings-field__status-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sp-settings-field--status .sp-settings-toggle {
  margin-top: 0;
  flex-shrink: 0;
}

.sp-settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sp-settings-subsection + .sp-settings-subsection {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-subtitle {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-settings-list-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-settings-list-avatar-btn {
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}

.sp-settings-list-avatar-btn:hover .sp-settings-list-avatar-img {
  opacity: 0.88;
}

.sp-settings-list-avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-member-row__name-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sp-member-row__name-trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sp-settings-list-avatar--mail {
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-list-main {
  flex: 1;
  min-width: 0;
}

.sp-settings-list-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.sp-settings-list-meta {
  font-size: 0.875rem;
  margin: 0.125rem 0 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-member-row__join-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.sp-member-row__join-meta span {
  white-space: nowrap;
}

.sp-settings-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.sp-settings-overflow-trigger {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.sp-settings-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-settings-search-row {
  position: relative;
}

.sp-settings-search-icon {
  position: absolute;
  left: 0.8125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.sp-settings-textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}

.sp-settings-hint--tight {
  margin-top: 0.25rem;
}

.sp-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--foreground);
}

.sp-settings-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
  transition: background-color 150ms ease-out;
}

.sp-settings-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--background);
  transition: transform 150ms ease-out;
}

.sp-settings-toggle--on .sp-settings-toggle__track {
  background: var(--foreground);
}

.sp-settings-toggle--on .sp-settings-toggle__thumb {
  transform: translateX(20px);
}

.sp-settings-toggle__label {
  font-size: 0.875rem;
  font-weight: 600;
}

.sp-settings-tab-order {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sp-settings-tab-row {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.6875rem 0.8125rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-tab-row--draggable {
  cursor: grab;
}

.sp-settings-tab-drag {
  opacity: 0.35;
}

.sp-settings-tab-icon {
  opacity: 0.55;
}

.sp-settings-tab-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
}

.sp-settings-tab-badge {
  font-size: 0.75rem;
  opacity: 0.5;
}

.sp-settings-notice {
  display: flex;
  gap: 0.5rem;
  padding: 0.8125rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.sp-settings-dns-box {
  padding: 0.8125rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-settings-danger-block {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #dc2626 20%, transparent);
}

.sp-settings-danger-block + .sp-settings-danger-block {
  margin-top: 0.8125rem;
}

.sp-settings-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
}

.sp-settings-empty-state__icon {
  width: 5.5rem;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sp-settings-empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  color: var(--foreground);
}

.sp-settings-empty-state__desc {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: 0.375rem 0 0;
  max-width: 20rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-empty-state__action {
  margin-top: 1.25rem;
}

.sp-settings-dropdown {
  position: relative;
}

.sp-settings-dropdown__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6875rem 0.9375rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  font-size: 0.9375rem;
  cursor: pointer;
}

.sp-settings-dropdown__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown, 120);
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-settings-dropdown__option {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6875rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-size: 0.875rem;
  cursor: pointer;
}

.sp-settings-dropdown__option:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.sp-settings-modal.hidden {
  display: none;
}

.sp-settings-modal.\!hidden {
  display: none !important;
}

.sp-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.sp-settings-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 24rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
}

.sp-settings-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-modal__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.sp-settings-modal__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.sp-settings-modal__body {
  padding: 1.25rem;
}

.sp-settings-modal__subtitle {
  font-size: 0.875rem;
  margin: 0 0 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* tum roller cikartilinca container gizlenir - 06.07.2026 23:55 */

.sp-settings-role-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
  margin-top: 0.25rem;
}

.sp-settings-role-chips--empty:not(:has([data-sp-role-add])) {
  display: none;
}

.sp-settings-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  border: none;
  cursor: default;
  background: color-mix(in srgb, var(--role-color, #6b7280) 15%, transparent);
  color: var(--role-color, #6b7280);
}

.sp-settings-role-chip--removable {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.sp-settings-role-chip--removable i {
  font-size: 0.625rem;
  opacity: 0.7;
}

.sp-settings-role-chip--removable:hover {
  background: color-mix(in srgb, var(--role-color, #6b7280) 26%, transparent);
}

.sp-settings-role-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  cursor: pointer;
  font-size: 0.6875rem;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.sp-settings-role-add:hover {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-role-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--role-color, #6b7280);
}

/* rol secici popover — reaksiyon secici ile ayni ankorlu davranis - 06.07.2026 18:00 */

.sp-settings-role-popover {
  position: fixed;
  z-index: 10200;
  max-height: 280px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
}

.sp-settings-role-popover.hidden {
  display: none;
}

.sp-settings-role-popover.\!hidden {
  display: none !important;
}

.sp-settings-role-popover__list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-settings-role-popover__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background-color 120ms ease;
}

.sp-settings-role-popover__item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-settings-role-popover__item--pending {
  opacity: 0.5;
  pointer-events: none;
}

.sp-settings-role-popover__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-settings-role-popover__check {
  font-size: 0.875rem;
  opacity: 0;
  flex-shrink: 0;
}

.sp-settings-role-popover__item--checked .sp-settings-role-popover__check {
  opacity: 1;
}

.sp-settings-role-popover__empty {
  padding: 0.75rem 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

/* iki secenekli erisim kontrolu — davet / kesfedilebilir - 06.07.2026 17:45 */

.sp-settings-segmented {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-settings-segmented__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.sp-settings-segmented__option:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.sp-settings-segmented__option i {
  font-size: 1.125rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  transition: color 140ms ease;
}

.sp-settings-segmented__option--active {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.sp-settings-segmented__option--active i {
  color: var(--foreground);
}

.sp-settings-segmented__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.sp-settings-segmented__title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.sp-settings-segmented__desc {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-segmented--horizontal {
  flex-direction: row;
  gap: 0.75rem;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__option {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  min-height: 8.5rem;
  justify-content: center;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__option i {
  margin-top: 0;
  font-size: 1.625rem;
}

.sp-settings-segmented--horizontal .sp-settings-segmented__text {
  align-items: center;
}

@media (max-width: 640px) {
  .sp-settings-segmented--horizontal {
    flex-direction: column;
  }

  .sp-settings-segmented--horizontal .sp-settings-segmented__option {
    min-height: 0;
  }
}

/* roller accordion — tum roller (uye dahil) tek kalip - 07.07.2026 05:50 */

/* ── liste kapsayici ──────────────────────────────────────────────────── */

.sp-roles-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.sp-roles-accordion__list {
  list-style: none;
  margin: 0;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  transition: border-color 200ms ease;
}

/* siralamada degisiklik oldugunda dis cerceve amber'e donus - 07.07.2026 06:36 */

.sp-roles-accordion--order-dirty .sp-roles-accordion__list {
  border-color: color-mix(in srgb, #f59e0b 60%, transparent);
  outline: 2px dashed color-mix(in srgb, #f59e0b 45%, transparent);
  outline-offset: 2px;
}

.sp-roles-accordion__park {
  width: 100%;
  margin-top: 2px;
}

/* ── satir ────────────────────────────────────────────────────────────── */

.sp-roles-accordion__entry {
  width: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
  background: var(--background);
  transition: border-color 180ms ease, background-color 180ms ease;
  overflow: hidden;
}

.sp-roles-accordion__entry.overflow-menu-row--open,
.sp-roles-accordion__entry:has([data-overflow-open="1"]) {
  position: relative;
  z-index: 50;
  overflow: visible;
}

.sp-roles-accordion__entry--active {
  border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
}

.sp-roles-accordion__entry--dirty {
  border-color: color-mix(in srgb, #f59e0b 55%, transparent);
}

.sp-roles-accordion__entry--dirty .sp-roles-accordion__title-name {
  font-style: italic;
}

/* ── satir iç düzeni ──────────────────────────────────────────────────── */

.sp-roles-accordion__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
  min-height: 3.75rem;
}

.sp-roles-accordion__hit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.375rem 0.5rem 0.25rem;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 140ms ease;
}

.sp-roles-accordion__hit:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.sp-roles-accordion__main {
  flex: 1;
  min-width: 0;
  padding-right: 0.25rem;
}

.sp-roles-accordion__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex-wrap: wrap;
}

.sp-roles-accordion__meta {
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.sp-roles-accordion__meta-part {
  line-height: 1.4;
}

.sp-roles-accordion__meta-dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 999px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground) 22%, transparent);
  align-self: center;
}

.sp-roles-accordion__meta-dot--inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.3rem;
}

/* ── araçlar: overflow + caret ────────────────────────────────────────── */

.sp-roles-accordion__menu {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.sp-roles-accordion__overflow-wrap {
  position: relative;
  display: flex;
}

.sp-roles-accordion__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 30%, transparent);
  transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1), color 140ms ease;
}

.sp-roles-accordion__caret i {
  font-size: 0.875rem;
  line-height: 1;
}

.sp-roles-accordion__entry--active .sp-roles-accordion__caret {
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* satir yuksekligine oranli handle boyutu - 07.07.2026 06:23 */

.sp-roles-accordion__hit .roles-list__handle {
  width: 1.5rem;
  height: 1.5rem;
}

.sp-roles-accordion--expanded .roles-list__handle {
  cursor: not-allowed;
  opacity: 0.35;
}

/* ── panel açılma ─────────────────────────────────────────────────────── */

.sp-roles-accordion__panel {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
  padding: 0;
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  animation: sp-roles-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

.sp-roles-accordion__entry .sp-roles-accordion__panel {
  border-radius: 0 0 9px 9px;
}

.sp-roles-accordion__panel.hidden {
  display: none;
}

.sp-roles-accordion__panel.\!hidden {
  display: none !important;
}

@keyframes sp-roles-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.96);
  }

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

/* ── form içi ─────────────────────────────────────────────────────────── */

.sp-roles-accordion__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* scroll kenara yapisik, icerik ic padding ile - 07.07.2026 06:40 */

.sp-roles-accordion__form-body {
  max-height: 22rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.sp-roles-accordion__form-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.125rem;
}

/* ad + renk yan yana */

.sp-roles-accordion__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.sp-roles-accordion__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sp-roles-accordion__color-row {
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.sp-roles-accordion__swatch {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  transition: background-color 100ms ease;
}

.sp-roles-accordion__color-input {
  flex: 1;
  min-width: 0;
  font-family: monospace !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.03em;
}

/* varsayilan uye rolu — yalnizca ad/renk kilitli, geri kalan her sey ayni kalip - 07.07.2026 05:50 */

.sp-roles-accordion__field-lock-icon {
  display: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
  pointer-events: none;
}

.sp-roles-accordion__fields--locked #roleNameInput,
.sp-roles-accordion__fields--locked #roleColorInput {
  padding-right: 2.25rem;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__field-lock-icon {
  display: inline-flex;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__swatch {
  opacity: 0.55;
}

.sp-roles-accordion__fields--locked .sp-roles-accordion__preset-dot:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* renk önayar noktaları */

.sp-roles-accordion__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-top: 0.5rem;
}

.sp-roles-accordion__preset-dot {
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.sp-roles-accordion__preset-dot:hover {
  transform: scale(1.15);
}

.sp-roles-accordion__preset-dot.role-color--selected {
  border-color: color-mix(in srgb, var(--foreground) 45%, transparent);
  transform: scale(1.1);
}

/* ── yetkiler ─────────────────────────────────────────────────────────── */

.sp-roles-accordion__perm-section {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-roles-accordion__perm-groups {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sp-roles-accordion__perm-group {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 1.5%, var(--background));
  padding: 0.75rem 0.875rem 0.875rem;
}

.sp-roles-accordion__perm-group-label {
  margin: 0 0 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.sp-roles-accordion__perm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem;
}

@media (min-width: 500px) {
  .sp-roles-accordion__perm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* yetki satırı — secili olmayanlarda da border - 07.07.2026 06:40 */

.sp-roles-accordion__perm-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: var(--background);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.sp-roles-accordion__perm-row:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 16%, transparent);
}

.sp-roles-accordion__perm-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 30%, transparent);
  outline-offset: 1px;
}

.role-perm-row.role-perm--checked.sp-roles-accordion__perm-row {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
}

/* checkbox kutusu */

.sp-role-perm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 24%, transparent);
  background: var(--background);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.sp-role-perm-check__icon {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--background);
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.role-perm-row.role-perm--checked .sp-role-perm-check {
  background: var(--foreground);
  border-color: var(--foreground);
}

.role-perm-row.role-perm--checked .sp-role-perm-check__icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.sp-roles-accordion__perm-label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--foreground);
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  .sp-roles-accordion__fields {
    grid-template-columns: 1fr;
  }

  .sp-roles-accordion__form-inner {
    padding: 1rem 0.875rem;
  }

  .sp-roles-accordion__item {
    min-height: 3.25rem;
    padding: 0.25rem 0.375rem 0.25rem 0.25rem;
  }
}

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

  .sp-role-perm-check__icon {
    transition: none;
    transform: none !important;
  }

  .sp-roles-accordion__caret {
    transition: transform 0ms;
  }
}

.sp-members-grid-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-members-grid {
  --sp-members-cols: minmax(10.5rem, 1.6fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(9rem, 1.8fr) 2.25rem;
  min-width: 36rem;
}

.sp-members-grid__head,
.sp-members-grid__row {
  display: grid;
  grid-template-columns: var(--sp-members-cols);
  align-items: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.sp-members-grid__head {
  padding: 0.625rem 0.9375rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-members-grid__head-cell {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.sp-members-grid__body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-members-grid__row {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-members-grid__row:last-child {
  border-bottom: none;
}

.sp-members-grid__row:hover {
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.sp-members-grid__cell {
  min-width: 0;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.sp-members-grid__cell--date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sp-members-grid__cell--empty {
  color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.sp-members-grid__cell--actions {
  display: flex;
  justify-content: flex-end;
}

.sp-members-grid__person {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
}

.sp-members-grid__avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

.sp-members-grid__avatar-btn:hover .sp-members-grid__avatar-img {
  opacity: 0.88;
}

.sp-members-grid__avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sp-members-grid__person-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.sp-members-grid__cell--roles .sp-settings-role-chips {
  margin-top: 0;
}

.sp-members-grid__cell--roles .sp-settings-role-chips--empty:not(:has([data-sp-role-add])) {
  display: none;
}

body.space-settings-modal-open {
  overflow: hidden;
}

.space-settings-modal__panel {
  display: flex;
  flex-direction: column;
  width: 1320px;
  height: 860px;
  max-width: min(1320px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: var(--background);
  overflow: hidden;
}

.space-settings-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-settings-modal__header-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  letter-spacing: -0.01em;
}

.space-settings-modal__close {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.space-settings-modal__close-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.space-settings-modal__close:hover .space-settings-modal__close-inner {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.space-settings-modal__body {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 760px) {
  .space-settings-modal__panel {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  .space-settings-modal__body {
    grid-template-columns: 1fr;
  }

  .space-settings-modal__sidebar {
    display: none;
  }
}

/* sidebar yatay bosluk kaldirildi — nav butonlari kenara tasarak "bleed" gorunumu alir,
   ic hizalama space-block ve nav-item paddingleriyle sağlanir - 06.07.2026 17:45 */

.space-settings-modal__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
  padding: 20px 0;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
  overflow-y: auto;
}

.space-settings-modal__space {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-settings-modal__space-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.space-settings-modal__space-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-settings-modal__space-meta {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.space-settings-modal__space-domain-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  max-width: 100%;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: #2563eb;
  text-decoration: none;
  transition: color 120ms ease;
}

.space-settings-modal__space-domain-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-settings-modal__space-domain-link i {
  flex-shrink: 0;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.space-settings-modal__space-domain-link:hover {
  color: #1d4ed8;
}

.dark .space-settings-modal__space-domain-link {
  color: #60a5fa;
}

.dark .space-settings-modal__space-domain-link:hover {
  color: #93c5fd;
}

.space-settings-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 6px;
}

.space-settings-modal__nav-group-label {
  margin: 0 0 8px;
  padding: 0 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.space-settings-modal__nav-group--danger .space-settings-modal__nav-group-label {
  color: color-mix(in srgb, #dc2626 70%, var(--foreground));
}

.space-settings-modal__nav-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.space-settings-modal__nav-item {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1), color 160ms ease;
}

.space-settings-modal__nav-item:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--foreground);
}

.space-settings-modal__nav-item--active {
  background: color-mix(in srgb, var(--foreground) 9%, transparent);
  color: var(--foreground);
}

.space-settings-modal__nav-item--danger {
  color: color-mix(in srgb, #dc2626 82%, var(--foreground));
}

.space-settings-modal__nav-item--danger.space-settings-modal__nav-item--active,
.space-settings-modal__nav-item--danger:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #dc2626;
}

.space-settings-modal__nav-icon {
  font-size: 1rem;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 160ms ease;
}

.space-settings-modal__nav-item--active .space-settings-modal__nav-icon {
  opacity: 1;
}

.space-settings-modal__nav-item--danger .space-settings-modal__nav-icon {
  opacity: 1;
  color: inherit;
}

.space-settings-modal__content-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.space-settings-modal__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 32px 32px;
  transition: opacity 140ms ease;
}

.space-settings-modal__content--pending {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.space-settings-modal__loader,
.space-settings-modal__loader-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-settings-modal__loader {
  min-height: 160px;
  padding: 2rem 0;
}

.space-settings-modal__loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--background) 72%, transparent);
}

.space-settings-modal__loader-bar {
  width: 180px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.space-settings-modal__loader-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--foreground);
  animation: space-settings-loader-indeterminate 1.35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes space-settings-loader-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.6);
  }

  50% {
    transform: translateX(60%) scaleX(1);
  }

  100% {
    transform: translateX(220%) scaleX(0.6);
  }
}

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

  .space-settings-modal__loader-bar-fill {
    animation: none;
    width: 40%;
    transform: none;
  }
}

/* modal icinde panel basligi fragment ile gelir — statik ust baslik yok - 07.07.2026 06:15 */

.space-settings-modal .sp-settings-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.space-settings-modal .sp-settings-panel__head {
  border-bottom: none;
  padding: 0 0 1.375rem;
}

.space-settings-modal .sp-settings-panel__title {
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
}

.space-settings-modal .sp-settings-panel__desc {
  margin-top: 0.375rem;
}

.space-settings-modal .sp-settings-panel__head--row {
  align-items: center;
  gap: 1.25rem;
}

.space-settings-modal .sp-settings-panel__body {
  padding: 0;
}

.space-settings-modal__error {
  margin: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* ayarlar modali icindeki rol modali ustte kalsin - 24.06.2026 02:50 */

.space-settings-modal #rolesModal {
  z-index: 10080;
}

.space-settings-modal__content-wrap--general-edit .space-settings-modal__content {
  padding-bottom: 5.5rem;
}

/* rol overflow menusu scroll kirpmasini onle - 07.07.2026 03:25 */

.space-settings-modal__content:has(.sp-roles-accordion [data-overflow-open="1"]) {
  overflow: visible;
}

.pass-modal {
  position: fixed;
  inset: 0;
}

.pass-modal.hidden {
  display: none;
}

.pass-modal.\!hidden {
  display: none !important;
}

.pass-modal__backdrop {
  position: fixed;
  inset: 0;
}

.pass-modal__stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.pass-modal__panel {
  position: relative;
  pointer-events: auto;
  transform-origin: center center;
}

.pass-modal:not(.hidden) .pass-modal__backdrop {
  animation: pass-modal-backdrop-in 160ms ease-out both;
}

.pass-modal:not(.hidden) .pass-modal__panel {
  animation: pass-modal-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pass-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pass-modal-panel-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

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

@media (prefers-reduced-motion: reduce) {
  .pass-modal:not(.hidden) .pass-modal__backdrop,
  .pass-modal:not(.hidden) .pass-modal__panel {
    animation: none;
  }
}

/* ortali onay / bilgi karti - 16.07.2026 06:05 */

.pass-modal__panel--card {
  width: 100%;
  max-width: 28rem;
  border-radius: 1.5rem;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--background);
  padding: 2rem;
  text-align: center;
}

.pass-modal__panel--card-lg {
  max-width: 32rem;
}

.pass-modal__panel--card .ann-link-preview {
  margin-top: 0;
  margin-bottom: 0;
  max-width: 100%;
}

.pass-modal__panel--card .ann-link-preview__title {
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

.sp-settings-storage-summary {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.sp-settings-storage-summary__value {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-settings-storage-summary__quota {
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-storage-summary__meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-storage-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.sp-settings-storage-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foreground);
  transition: width 200ms ease;
}

.sp-settings-storage-bar__fill--warn {
  background: #dc2626;
}

.sp-settings-plan-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.sp-settings-plan-card__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.sp-settings-plan-card__name {
  margin: 0.375rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.sp-settings-plan-card__meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.sp-settings-plan-limits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}

.sp-settings-plan-limits__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1rem;
  font-size: 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.sp-settings-plan-limits__row:last-child {
  border-bottom: none;
}

.sp-settings-plan-limits__row strong {
  font-weight: 700;
  color: var(--foreground);
}

/* board canvas sayfasi — Apple Freeform benzeri sonsuz tuval - 23.06.2026 16:50 */

/* #board-root: account_content icindeki placeholder, gorsel degil - 23.06.2026 16:50 */

.board-root {
  display: none;
}

/* board viewport: js ile konumlandirilir (board-init.js positionViewport) - 23.06.2026 17:00 */

.board-viewport {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  background-color: #f5f5f7;
  background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
  background-size: var(--board-grid-px, 24px) var(--board-grid-px, 24px);
  background-position: var(--board-bg-x, 0px) var(--board-bg-y, 0px);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.board-viewport.board-is-dragging {
  cursor: grabbing;
}

.dark .board-viewport {
  background-color: #1c1c1e;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* board canvas: 4500x4500 sanal alan - 23.06.2026 16:50 */

.board-canvas {
  position: absolute;
  width: 4500px;
  height: 4500px;
  transform-origin: 0 0;
  will-change: transform;
}

/* kenar vignette'leri: o yonde kutu varsa mavi ton - 23.06.2026 16:50 */

.board-vignette {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.board-vignette--show {
  opacity: 1;
}

.board-vignette--disabled {
  opacity: 0 !important;
  transition: none !important;
}

.board-vignette--top    {
  inset: 0 0 auto 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(59,130,246,0.16), transparent);
}

.board-vignette--bottom {
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(to top,   rgba(59,130,246,0.16), transparent);
}

.board-vignette--left   {
  inset: 0 auto 0 0;
  width: 80px;
  background: linear-gradient(to right, rgba(59,130,246,0.16), transparent);
}

.board-vignette--right  {
  inset: 0 0 0 auto;
  width: 80px;
  background: linear-gradient(to left,  rgba(59,130,246,0.16), transparent);
}

/* toolbar: viewport sag ust kosesi — js ile hesaplanan --board-vp-top kullanilir - 23.06.2026 17:00 */

.board-toolbar {
  position: fixed;
  top: calc(var(--board-vp-top, 64px) + 1rem);
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
}

.board-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 65%, transparent);
  cursor: pointer;
  font-size: 1rem;
  transition: background 120ms ease, color 120ms ease;
}

.board-toolbar__btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  color: var(--foreground, #000);
}

.board-toolbar__btn--toggle[aria-pressed="false"] {
  opacity: 0.45;
}

.board-toolbar__sep {
  height: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  margin: 2px 4px;
}

/* board box: suruklenen kutu - 23.06.2026 16:50 */

.board-box {
  position: absolute;
  min-width: 200px;
  max-width: 600px;
  border-radius: 12px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
}

.dark .board-box {
  background: color-mix(in srgb, var(--background, #000) 85%, white);
  border-color: color-mix(in srgb, var(--foreground, #fff) 14%, transparent);
}

.board-box--dragging {
  opacity: 0.92;
}

/* kutu renk tonlari — tema ile uyumlu - 23.06.2026 21:00 */

.board-box--color-muted {
  background: color-mix(in srgb, var(--foreground, #000) 5%, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground, #000) 14%, transparent);
}

.board-box--color-blue {
  background: color-mix(in srgb, #85cfff 13%, var(--background, #fff));
  border-color: color-mix(in srgb, #85cfff 32%, transparent);
}

.board-box--color-warm {
  background: color-mix(in srgb, #ffb86c 11%, var(--background, #fff));
  border-color: color-mix(in srgb, #ffb86c 28%, transparent);
}

.dark .board-box--color-muted {
  background: color-mix(in srgb, var(--foreground, #fff) 6%, var(--background, #0f0f13));
}

.dark .board-box--color-blue {
  background: color-mix(in srgb, #85cfff 10%, var(--background, #0f0f13));
  border-color: color-mix(in srgb, #85cfff 24%, transparent);
}

.dark .board-box--color-warm {
  background: color-mix(in srgb, #ffb86c 9%, var(--background, #0f0f13));
  border-color: color-mix(in srgb, #ffb86c 22%, transparent);
}

/* box header: surukleme tutamagi - 23.06.2026 21:00 */

.board-box__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.board-box__title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.board-box__title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}

.board-box__title-edit {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  transition: background 120ms ease, color 120ms ease;
}

.board-box__header:hover .board-box__title-edit {
  display: flex;
}

.board-box__title-edit:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

.board-box__title-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  text-transform: capitalize;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  padding: 0 0 1px;
}

.board-box__header-activity {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.board-box__header-activity:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

/* box body - 23.06.2026 17:30 */

.board-box__body {
  padding: 10px;
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
  min-height: 0;
}

.board-box__md-editor {
  height: 100%;
}

/* md text box — editor + preview - 23.06.2026 17:10 */

.board-box__md-editor {
  display: block;
  width: 100%;
  min-height: 80px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--foreground, #000);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  padding: 0;
  box-sizing: border-box;
}

.board-box__md-preview {
  min-height: 60px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--foreground, #000);
  word-break: break-word;
  font-family: Arial, sans-serif;
  cursor: text;
}

.board-box__md-placeholder {
  opacity: 0.35;
  font-style: italic;
}

.board-box__md-preview .md-br {
  display: block;
  height: 0.5em;
}

.board-box__md-preview p  {
  margin: 0 0 0.35em;
}

.board-box__md-preview p:last-child {
  margin-bottom: 0;
}

.board-box__md-preview h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.5em 0 0.25em;
  line-height: 1.25;
}

.board-box__md-preview h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0.5em 0 0.2em;
  line-height: 1.3;
}

.board-box__md-preview h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.4em 0 0.15em;
}

.board-box__md-preview code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.875rem;
}

.dark .board-box__md-preview code {
  background: color-mix(in srgb, var(--foreground, #fff) 10%, transparent);
}

.board-box__md-preview pre {
  margin: 0.4em 0;
  border-radius: 6px;
  overflow: auto;
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
}

.board-box__md-preview pre code {
  background: none;
  padding: 8px 12px;
  display: block;
  font-size: 0.875rem;
}

.board-box__md-preview strong {
  font-weight: 700;
}

.board-box__md-preview em  {
  font-style: italic;
}

.board-box__md-preview a   {
  color: #2563eb;
  text-decoration: underline;
}

.dark .board-box__md-preview a {
  color: #60a5fa;
}

.board-box__md-preview ul, .board-box__md-preview ol {
  margin: 0.25em 0 0.35em;
  padding-left: 1.4em;
}

.board-box__md-preview li  {
  margin: 0.15em 0;
}

.board-box__md-preview hr  {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  margin: 0.5em 0;
}

/* resize handle — sag (genislik) ve alt (yukseklik) - 23.06.2026 17:30 */

.board-box__resize-handle {
  position: absolute;
  z-index: 2;
}

.board-box__resize-handle--right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
}

.board-box__resize-handle--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 7px;
  cursor: row-resize;
}

.board-box__resize-handle--right::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--foreground, #000) 0%, transparent);
  transition: background 140ms ease;
}

.board-box__resize-handle--bottom::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 18px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--foreground, #000) 0%, transparent);
  transition: background 140ms ease;
}

.board-box:hover .board-box__resize-handle::after {
  background: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
}

.board-box__resize-handle:hover::after, .board-box__resize-handle:active::after {
  background: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* snap kilavuz cizgileri — canvas uzerine absolute konumlanir - 23.06.2026 17:30 */

.board-guide {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  background: #3b82f6;
}

.board-guide--v {
  width: 1px;
}

.board-guide--h {
  height: 1px;
}

/* todo list box - 23.06.2026 16:50 */

.board-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.board-todo-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
}

.board-todo-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}

.board-todo-check--done {
  background: color-mix(in srgb, var(--foreground, #000) 70%, transparent);
  border-color: transparent;
}

.board-todo-check--done::after {
  content: '';
  display: block;
  width: 9px;
  height: 6px;
  border-left: 2px solid var(--background, #fff);
  border-bottom: 2px solid var(--background, #fff);
  transform: rotate(-45deg) translate(1px, -1px);
}

.board-todo-label {
  font-size: 0.9375rem;
  flex: 1;
  outline: none;
  min-width: 0;
  color: var(--foreground, #000);
  font-family: Arial, sans-serif;
}

.board-todo-label--done {
  text-decoration: line-through;
  opacity: 0.45;
}

.board-todo-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  padding: 0 2px;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

.board-todo-item:hover .board-todo-delete {
  opacity: 1;
}

.board-todo-add {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  margin-top: 4px;
  width: 100%;
}

.board-todo-add:hover {
  color: var(--foreground, #000);
}

/* image box - 23.06.2026 16:50 */

.board-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.board-image-wrap img {
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
  -o-object-fit: contain;
     object-fit: contain;
}

.board-image-url-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.board-image-url-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.875rem;
  background: transparent;
  color: var(--foreground, #000);
  outline: none;
  font-family: Arial, sans-serif;
}

.board-image-url-input:focus {
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
}

.board-image-apply-btn {
  align-self: flex-end;
  border: none;
  background: color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--foreground, #000);
  transition: background 120ms ease;
}

.board-image-apply-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 14%, transparent);
}

/* aktivite paneli: viewport sol ust kosesi — js ile hesaplanan variable kullanilir - 23.06.2026 17:00 */

.board-activity-panel {
  position: fixed;
  top: calc(var(--board-vp-top, 64px) + 1rem);
  left: calc(var(--board-vp-left, 64px) + 1rem);
  z-index: 200;
  width: 260px;
  border-radius: 14px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  display: none;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
}

.board-activity-panel--open {
  display: flex;
}

.board-activity-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  flex-shrink: 0;
}

.board-activity-panel__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.board-activity-panel__close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.board-activity-panel__close:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.board-activity-panel__list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-activity-item {
  font-size: 0.875rem;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
}

.board-activity-item__action {
  font-weight: 700;
  text-transform: capitalize;
}

.board-activity-item__time {
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* sag tik context menu — board + pass global - 16.07.2026 06:57 */

:is(.board-context-menu, .pass-context-menu, .pass-menu) {
  z-index: var(--z-pass-context, 10080);
  min-width: 220px;
  border-radius: 12px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  box-shadow:
        0 8px 28px color-mix(in srgb, var(--foreground, #000) 11%, transparent),
        0 2px 8px color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
  transition:
        opacity 180ms ease-out,
        transform 180ms ease-out,
        visibility 0s linear 180ms;
}

.dark :is(.board-context-menu, .pass-context-menu, .pass-menu) {
  box-shadow:
        0 10px 32px color-mix(in srgb, #000 48%, transparent),
        0 2px 10px color-mix(in srgb, #000 32%, transparent);
}

:is(.board-context-menu, .pass-context-menu):not(.pass-menu--anchored),
.pass-menu.pass-menu--fixed {
  position: fixed;
}

.pass-menu.pass-menu--anchored {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 200;
  transform-origin: top right;
}

/* acilis yonu — data-placement konumlayicidan - 16.07.2026 06:57 */

:is(.board-context-menu, .pass-context-menu, .pass-menu)[data-placement="below"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top left;
}

:is(.board-context-menu, .pass-context-menu, .pass-menu)[data-placement="below-end"] {
  transform: scale(0.97) translateY(4px);
  transform-origin: top right;
}

:is(.board-context-menu, .pass-context-menu, .pass-menu)[data-placement="above"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom left;
}

:is(.board-context-menu, .pass-context-menu, .pass-menu)[data-placement="above-end"] {
  transform: scale(0.97) translateY(-4px);
  transform-origin: bottom right;
}

.pass-menu--measuring,
.pass-menu--closing {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  transition: none !important;
}

:is(
    .board-context-menu.pass-menu--open,
    .board-context-menu.board-context-menu--open,
    .pass-context-menu.pass-menu--open,
    .pass-context-menu.board-context-menu--open,
    .pass-menu.pass-menu--open
),
:is(
    .board-context-menu.pass-menu--open,
    .board-context-menu.board-context-menu--open,
    .pass-context-menu.pass-menu--open,
    .pass-context-menu.board-context-menu--open,
    .pass-menu.pass-menu--open
)[data-placement] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translate(0, 0);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  :is(.board-context-menu, .pass-context-menu, .pass-menu),
    :is(
        .board-context-menu.pass-menu--open,
        .board-context-menu.board-context-menu--open,
        .pass-context-menu.pass-menu--open,
        .pass-context-menu.board-context-menu--open,
        .pass-menu.pass-menu--open
    ) {
    transition: none;
    transform: none;
  }
}

.board-context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--foreground, #000);
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
  width: 100%;
  transition: background 100ms ease;
}

.board-context-menu__item > i {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
}

.board-context-menu__item:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

/* display:flex [hidden] ustune yazar — gizli menu ogeleri - 16.07.2026 07:03 */

.board-context-menu__item[hidden],
.board-context-menu__divider[hidden] {
  display: none !important;
}

.board-context-menu__item--danger {
  color: #e54d2e;
}

.board-context-menu__item--danger > i {
  color: color-mix(in srgb, #e54d2e 70%, transparent);
}

.board-context-menu__item--danger:hover {
  background: rgba(229,77,46,0.08);
}

.board-context-menu__divider {
  height: 1px;
  margin: 4px -6px;
  flex-shrink: 0;
  align-self: stretch;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
}

.board-context-menu__section {
  margin: 2px 10px 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
  font-family: Arial, sans-serif;
}

.board-context-menu__colors {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 6px;
}

.board-context-menu__color {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 100ms ease, transform 100ms ease;
}

.board-context-menu__color--active {
  border-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  transform: scale(1.06);
}

.board-context-menu__color--default {
  background: var(--background, #fff);
  border-color: color-mix(in srgb, var(--foreground, #000) 18%, transparent);
}

.board-context-menu__color--muted {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
}

.board-context-menu__color--blue {
  background: color-mix(in srgb, #85cfff 45%, var(--background, #fff));
}

.board-context-menu__color--warm {
  background: color-mix(in srgb, #ffb86c 42%, var(--background, #fff));
}

/* hareket gunlugu sayfasi - 30.06.2026 12:00 */

.audit-page {
  max-width: 780px;
  margin: 0 auto;
}

.audit-log-panel {
  min-height: 220px;
  position: relative;
}

.audit-log-loading[hidden],
.audit-log-empty[hidden],
.audit-log-list[hidden],
.audit-log-more-wrap[hidden] {
  display: none !important;
}

.audit-log-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8125rem;
  padding: 3.5rem 1.5rem;
}

.audit-log-loading__label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  border-top-color: var(--foreground);
  animation: ann-spin 0.7s linear infinite;
}

.audit-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
}

.audit-log-empty i {
  font-size: 2rem;
  color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.audit-log-empty__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

.audit-log-empty__desc {
  margin: 0;
  max-width: 24rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-list {
  display: flex;
  flex-direction: column;
}

.audit-log-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9375rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-row:last-child {
  border-bottom: none;
}

.audit-log-row__icon {
  flex-shrink: 0;
}

.audit-log-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  display: block;
}

.audit-log-avatar--bot,
.audit-log-avatar--system {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-log-row__body {
  flex: 1;
  min-width: 0;
}

.audit-log-row__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8125rem;
}

.audit-log-row__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.audit-log-row__inline-roles {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
}

.audit-log-row__actor {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.audit-log-row__actor--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.audit-log-row__actor--trigger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-log-avatar-btn {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
}

.audit-log-avatar-btn:hover .audit-log-avatar {
  opacity: 0.88;
}

.audit-log-entity--trigger {
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.audit-log-entity--trigger:hover .audit-log-entity__label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.audit-log-row__msg {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 68%, transparent);
}

.audit-log-row__time {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
  white-space: nowrap;
}

.audit-log-row__meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.audit-log-row__details {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.audit-log-detail-line {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  line-height: 1.45;
}

.audit-log-detail-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  margin-top: 0.375rem;
}

.audit-log-order-list {
  margin: 0.125rem 0 0;
  padding-left: 1.25rem;
  list-style: decimal;
}

.audit-log-order-item {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  line-height: 1.5;
}

.audit-log-meta-chip {
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
}

.audit-log-meta-preview {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  font-style: italic;
}

.audit-log-more-wrap {
  display: flex;
  justify-content: center;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-more-btn {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--foreground);
  transition: background-color 0.15s ease;
}

.audit-log-more-btn:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.audit-log-more-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* zengin hareket gunlugu satirlari - 07.07.2026 00:50 */

.audit-log-list--rich .audit-log-row--rich {
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}

.audit-log-scroll-sentinel {
  width: 100%;
  height: 1px;
  flex-shrink: 0;
  pointer-events: none;
}

.audit-log-scroll-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.125rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.audit-log-scroll-footer[hidden] {
  display: none !important;
}

.audit-log-scroll-footer .audit-log-spinner {
  width: 18px;
  height: 18px;
}

.audit-log-row__subjects {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.audit-log-entity {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.5625rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  max-width: 100%;
}

.audit-log-entity__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-entity__avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.audit-log-entity__avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-size: 0.75rem;
}

.audit-log-entity__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--audit-role-color, #6b7280);
}

.audit-log-entity__icon {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  flex-shrink: 0;
}

.audit-log-entity--rename .audit-log-entity__arrow {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.audit-log-entity--channel {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.audit-log-entity--role {
  background: color-mix(in srgb, var(--audit-role-color, #6b7280) 12%, transparent);
  border-color: color-mix(in srgb, var(--audit-role-color, #6b7280) 22%, transparent);
}

.audit-log-entity--role .audit-log-entity__label {
  color: var(--audit-role-color, #6b7280);
}

.sp-settings-audit__body {
  padding: 0;
}

.sp-settings-audit__panel {
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  overflow: hidden;
}

.space-settings-modal .sp-settings-audit .sp-settings-panel__head {
  display: none;
}

.space-settings-modal .sp-settings-audit__body {
  padding: 0;
}

/* sekme sirasi audit gorunumu - 07.07.2026 01:20 */

.audit-tab-order {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.625rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.audit-tab-order__section-label {
  margin: 0 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.audit-tab-order__move-list {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.audit-tab-order__move {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
}

.audit-tab-order__pos-change {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  flex-shrink: 0;
}

.audit-tab-order__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.3125rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.audit-tab-order__pos--new {
  background: color-mix(in srgb, var(--foreground) 14%, transparent);
  color: var(--foreground);
}

.audit-tab-order__pos-arrow {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.audit-tab-order__tab {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  flex: 1;
}

.audit-tab-order__tab-icon {
  font-size: 0.9375rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
}

.audit-tab-order__tab-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-tab-order__replaced {
  font-size: 0.75rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.audit-tab-order__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audit-tab-order__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.audit-tab-order__item--moved {
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.audit-tab-order__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
}

.audit-tab-order__item-icon {
  font-size: 0.875rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.audit-tab-order__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-tab-order__moved-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.space-general {
  padding: 28px 24px 44px;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.space-general__hero {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.space-general__avatar {
  flex-shrink: 0;
}

.space-general__avatar .space-avatar--card {
  width: 56px;
  height: 56px;
  min-width: 56px;
  font-size: 1.25rem;
  border-radius: 14px;
}

.space-general__hero-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-top: 0.0625rem;
}

.space-general__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__domain {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin: 0;
  font-size: 0.8125rem;
  font-family: ui-monospace, monospace;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
}

.space-general__domain i {
  font-size: 0.875rem;
  line-height: 1;
}

.space-general__domain i.is-verified {
  color: #16a34a;
}

.space-general__domain i.is-unverified {
  color: #d97706;
}

.space-general__description {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
}

.space-general__description--empty {
  font-style: italic;
  color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.space-general__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.space-general__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
  background: transparent;
}

.space-general__stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--foreground);
}

.space-general__stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 46%, transparent);
}

.space-general__banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 0.9375rem;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.dark .space-general__banner {
  border-color: color-mix(in srgb, #fcd34d 28%, transparent);
  background: color-mix(in srgb, #b45309 14%, transparent);
  color: #fcd34d;
}

.space-general__banner i {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.space-general__banner-body {
  min-width: 0;
  flex: 1;
}

.space-general__banner-title {
  margin: 0 0 0.1875rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.space-general__banner-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.88;
}

@media (max-width: 540px) {
  .space-general {
    padding: 20px 16px 36px;
  }

  .space-general__stats {
    grid-template-columns: 1fr;
  }
}

.space-general__activity {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.space-general__activity-head {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.space-general__activity-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.space-general__activity-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
}

.space-general__activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.space-general__activity-item {
  margin: 0;
}

.space-general__activity-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
  background: transparent;
  text-decoration: none;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.space-general__activity-card:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 14%, transparent);
}

.space-general__activity-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.space-general__activity-icon {
  font-size: 0.9375rem;
  line-height: 1;
  color: color-mix(in srgb, var(--foreground) 68%, transparent);
}

.space-general__activity-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.space-general__activity-name {
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__activity-meta {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--foreground) 44%, transparent);
}

.space-general__activity-badges {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  flex-shrink: 0;
}

.space-general__activity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.space-general__activity-badge--unread {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.dark .space-general__activity-badge--unread {
  color: #93c5fd;
  background: color-mix(in srgb, #1d4ed8 16%, transparent);
  border-color: color-mix(in srgb, #93c5fd 22%, transparent);
}

.space-general__activity-badge--mention {
  color: #ffffff;
  background: #dc2626;
  border: 1px solid #dc2626;
  min-width: 1.125rem;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
}

.space-general__activity-empty {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: transparent;
}

.space-general__activity-empty-icon {
  font-size: 1rem;
  line-height: 1;
  color: #16a34a;
  flex-shrink: 0;
}

.space-general__activity-empty-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 54%, transparent);
}

.space-general__panel {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.space-general__panel-head {
  padding: 0.9375rem 1.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.space-general__panel-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

.space-general__rows {
  margin: 0;
}

.space-general__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
}

.space-general__row:last-child {
  border-bottom: none;
}

.space-general__row-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.space-general__row-hint {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
}

.space-general__row-value {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  flex-shrink: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.space-general__row-value--mono {
  font-family: ui-monospace, monospace;
  font-weight: 500;
}

.space-general__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.space-general__action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.9375rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: var(--foreground);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.space-general__action:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
}

.space-general__action i {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 540px) {
  .space-general__row {
    flex-direction: column;
    gap: 0.375rem;
  }

  .space-general__row-value {
    max-width: none;
    text-align: left;
  }
}

/* anons kanali stilleri - 23.06.2026 21:30 */

/* anons sayfa — tam genislik, dis scroll - 23.06.2026 22:30 */

.ann-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--background, #fff);
}

.ann-feed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 0 16px;
}

.ann-feed__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  width: 100%;
}

/* az mesaj varken icerigi compose'a yasla — yukari bosluk buyur - 24.06.2026 02:27 */

.ann-feed__grow-spacer {
  flex: 1 1 auto;
  min-height: 0;
}

.ann-feed--empty .ann-feed__grow-spacer {
  display: none;
}

.ann-feed--loading .ann-feed__inner {
  display: none;
}

.ann-feed--loading .ann-feed__loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 120px;
}

.ann-feed:not(.ann-feed--empty) {
  padding-top: 16px;
}

.ann-feed__list {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

/* son mesaj ile compose arasi bosluk - 23.06.2026 22:05 */

.ann-feed__spacer {
  height: 16px;
  flex-shrink: 0;
}

.ann-feed__loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
  max-width: 760px;
  margin: 0 auto;
}

.ann-feed__history-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
  max-width: 760px;
  margin: 0 auto;
}

.ann-feed__history-loading[hidden] {
  display: none !important;
}

.ann-feed__loading[hidden] {
  display: none !important;
}

.ann-feed__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-top-color: var(--foreground, #000);
  animation: ann-spin 0.7s linear infinite;
}

@keyframes ann-spin {
  to {
    transform: rotate(360deg);
  }
}

.ann-feed__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 80px 0;
  max-width: 760px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  text-align: center;
}

.ann-feed__empty-icon {
  font-size: 3rem;
}

.ann-feed__empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  margin: 0;
}

.ann-feed__empty-sub {
  font-size: 0.9375rem;
  margin: 0;
  max-width: 280px;
}

/* kart — discord tarzi oranti: 40px avatar, 16px gap, ortak satir ritmi - 14.07.2026 08:29 */

.ann-card {
  --ann-avatar-size: 2.5rem;
  --ann-avatar-gap: 1rem;
  --ann-msg-size: 0.9375rem;
  --ann-msg-line: 1.375;
  --ann-avatar-nudge: 0.125rem;
  display: flex;
  align-items: flex-start;
  gap: var(--ann-avatar-gap);
  padding: 0.125rem 0.5rem 0.25rem;
  border-radius: 6px;
  position: relative;
  transition: background 0.1s;
}

.ann-card:hover {
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
}

/* mention/etkilenme vurgusu — sari ton + sol kenarda discord tarzi serit - 01.07.2026 21:10 */

.ann-card--mentioned {
  position: relative;
  background: color-mix(in srgb, #f5c518 14%, transparent);
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.ann-card--mentioned::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f5c518;
}

.ann-card--mentioned:hover {
  background: color-mix(in srgb, #f5c518 20%, transparent);
}

.dark .ann-card--mentioned {
  background: color-mix(in srgb, #f5c518 11%, transparent);
}

.dark .ann-card--mentioned:hover {
  background: color-mix(in srgb, #f5c518 16%, transparent);
}

/* bookmark deep link vurgusu - 09.07.2026 15:05 */

.ann-card--jump-highlight {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  transition: background-color 400ms ease;
}

.dark .ann-card--jump-highlight {
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}

/* mesaj gruplari arasi bosluk — stack icinde yok - 14.07.2026 08:29 */

.ann-card:not(.ann-card--continued) {
  margin-top: 1.0625rem;
}

.ann-feed__list > .ann-card:first-child {
  margin-top: 0;
}

.ann-card--stack-head {
  padding-bottom: 0;
}

.ann-card--stack-head .ann-card__content {
  margin-bottom: 0;
}

.ann-card--stack-head + .ann-card--continued,
.ann-card--continued + .ann-card--continued {
  margin-top: 0;
}

.ann-card--continued {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
  align-items: flex-start;
}

.ann-card--continued .ann-card__content {
  margin-bottom: 0;
  padding: 0;
  font-size: var(--ann-msg-size);
  line-height: var(--ann-msg-line);
}

.ann-card--continued .ann-markdown p,
.ann-card--continued .ann-markdown p:first-child,
.ann-card--continued .ann-markdown p:last-child {
  margin: 0;
}

.ann-card--continued:last-child {
  padding-bottom: 0.125rem;
}

.ann-card--stack-head:last-child {
  padding-bottom: 0.125rem;
}

/* compact avatar kolonu — devam mesajlarinda satir yuksekligi kadar - 14.07.2026 08:29 */

.ann-card__avatar-col--compact {
  width: var(--ann-avatar-size);
  padding-top: 0;
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.ann-card__avatar-col--compact .ann-card__hover-time {
  position: static;
  inset: auto;
  height: auto;
  padding-right: 2px;
  line-height: var(--ann-msg-line);
  font-size: 0.625rem;
  justify-content: flex-end;
}

/* gizli avatar artik kullanilmiyor — geriye uyumluluk - 24.06.2026 02:27 */

.ann-card__avatar--hidden {
  display: none;
}

/* avatar ustu isim satiriyla hizali; ofset sabit kalir - 14.07.2026 08:29 */

.ann-card__avatar-col {
  flex-shrink: 0;
  width: var(--ann-avatar-size);
  padding-top: var(--ann-avatar-nudge);
  position: relative;
  align-self: flex-start;
}

/* continued mesajda sol kisimda hover'da saat goster - 24.06.2026 02:27 */

.ann-card__hover-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 500;
  pointer-events: none;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  opacity: 0;
  transition: opacity 0.12s;
  white-space: nowrap;
}

.ann-card--continued:hover .ann-card__hover-time {
  opacity: 1;
}

/* mesaj icerigi secilelebilir olmali - 24.06.2026 02:27 */

.ann-card__content {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.ann-card__body-col {
  flex: 1;
  min-width: 0;
  position: relative;
}

.ann-card__avatar {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: block;
}

.ann-card__avatar--webhook {
  width: var(--ann-avatar-size);
  height: var(--ann-avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

/* hover eylem cubugu — sag ustte, tek kapsul - 05.07.2026 05:05 */

.ann-card__hover-bar {
  position: absolute;
  top: -16px;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}

.ann-card__hover-bar-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 1px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  background: var(--background, #fff);
}

.ann-card__hover-bar .ann-card__hbtn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
}

.ann-card__hover-bar .ann-card__hbtn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.msg-date-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 6px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.msg-date-divider::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  pointer-events: none;
}

.msg-date-divider__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: var(--background, #fff);
  color: color-mix(in srgb, var(--foreground, #000) 50%, transparent);
}

.msg-date-divider + .ann-card {
  margin-top: 0;
}

.ann-card + .msg-date-divider {
  margin-top: 0.25rem;
}

.msg-unread-divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.msg-unread-divider__line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, #ef4444 55%, transparent);
}

.msg-unread-divider__label {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ef4444;
  white-space: nowrap;
}

.msg-unread-divider + .ann-card {
  margin-top: 0;
}

.ann-card + .msg-unread-divider {
  margin-top: 0.25rem;
}

.pass-bot-tag {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 4px;
  /* background ile karisik — mention/sistem tint ustunde seffaf kalmaz - 16.07.2026 16:41 */
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 16%, var(--background, #fff));
  background: color-mix(in srgb, var(--foreground, #000) 10%, var(--background, #fff));
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--foreground, #000) 68%, var(--background, #fff));
  vertical-align: middle;
  line-height: 1.4;
  text-transform: uppercase;
}

.pass-user-card__name .pass-bot-tag {
  margin-left: 6px;
}

/* header gap zaten 0.375rem — ekstra margin yok (tarihle ayni ara) - 16.07.2026 16:41 */

.ann-card__header-row .pass-bot-tag {
  margin-left: 0;
}

.pass-bot-tag--preview {
  text-transform: capitalize;
  letter-spacing: 0.02em;
  font-size: 0.5rem;
}

.ann-card--editing {
  background: color-mix(in srgb, var(--foreground, #000) 3%, transparent);
}

.ann-card--editing .ann-card__hover-bar {
  opacity: 0;
  pointer-events: none;
}

.ann-card__edited {
  font-size: 0.6875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-card__edit {
  margin-top: 2px;
}

#account-main-content.account-main--channel .ann-compose--inline-edit {
  position: static;
  padding: 0;
  background: transparent;
}

#account-main-content.account-main--channel .ann-compose--inline-edit::before {
  display: none;
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview.ann-markdown {
  line-height: var(--ch-compose-line, 20px);
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .pass-mention,
#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .pass-mention--all,
#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .pass-mention--url {
  margin: 0;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

#account-main-content.account-main--channel .ann-compose--inline-edit .ann-compose__preview .pass-emoji--compose {
  width: 1em;
  height: 1em;
  max-width: none;
  max-height: none;
  vertical-align: -0.075em;
  margin: 0;
}

.ann-card__edit-hints {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 2px 0;
}

.ann-card__edit-hint {
  margin: 0;
  font-size: 0.6875rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
}

.ann-card__edit-hint--right {
  margin-left: auto;
  text-align: right;
}

@keyframes ann-react-pill-in {
  from {
    opacity: 0;
    transform: scale(0.84);
  }

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

@keyframes ann-react-pill-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.84);
  }
}

@keyframes ann-react-pill-pulse {
  0%, 100% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.06);
  }
}

@keyframes ann-react-row-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

@keyframes ann-react-row-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes ann-react-count-bump {
  0%, 100% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.2);
  }
}

.ann-card__reacts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 0;
}

.ann-card__reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ann-card__react-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transform: scale(1);
  transform-origin: center center;
  transition:
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__react-pill:hover {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  color: var(--foreground, #000);
  transform: scale(1.04);
}

.ann-card__react-pill:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

.ann-card__react-pill--active {
  border-color: color-mix(in srgb, #5865f2 45%, transparent);
  background: color-mix(in srgb, #5865f2 14%, var(--background, #fff));
  color: #5865f2;
}

.ann-card__react-pill--active:hover {
  border-color: color-mix(in srgb, #5865f2 58%, transparent);
  background: color-mix(in srgb, #5865f2 20%, var(--background, #fff));
  color: #5865f2;
}

.dark .ann-card__react-pill--active {
  border-color: color-mix(in srgb, #5865f2 55%, transparent);
  background: color-mix(in srgb, #5865f2 22%, var(--background, #fff));
  color: #dee0fc;
}

.dark .ann-card__react-pill--active:hover {
  border-color: color-mix(in srgb, #5865f2 68%, transparent);
  background: color-mix(in srgb, #5865f2 28%, var(--background, #fff));
  color: #eef0ff;
}

.ann-card__react-pill--enter {
  animation: ann-react-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ann-card__react-pill--leave {
  animation: ann-react-pill-out 170ms ease-in both;
  pointer-events: none;
}

.ann-card__react-pill--pulse {
  animation: ann-react-pill-pulse 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__reacts-row--enter {
  animation: ann-react-row-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ann-card__reacts-row--leave {
  animation: ann-react-row-out 190ms ease-in both;
  pointer-events: none;
}

.ann-card__react-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ann-card__react-emoji {
  width: 18px;
  height: 18px;
  vertical-align: 0;
}

.ann-card__react-count {
  display: inline-block;
  line-height: 1;
  min-width: 0.65em;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  transform-origin: center center;
}

.ann-card__react-count--bump {
  animation: ann-react-count-bump 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card__react-add-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition:
        opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ann-card:hover .ann-card__react-add-inline {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.ann-card__react-add-inline:hover {
  background: color-mix(in srgb, var(--foreground, #000) 8%, var(--background, #fff));
  border-color: color-mix(in srgb, var(--foreground, #000) 20%, transparent);
  color: var(--foreground, #000);
  transform: scale(1.05);
}

.ann-card__react-add-inline:active {
  transform: scale(0.96);
  transition-duration: 80ms;
}

.ann-card__react-add-inline .ph-smiley {
  font-size: 1rem;
}

.ann-card__hbtn[data-msg-react-add] .ph-smiley,
.ann-card__hbtn[data-msg-edit] .ph-pencil-simple,
.ann-card__hbtn[data-msg-delete] .ph-trash {
  font-size: 1rem;
}

.ann-card__hover-bar .ann-card__hbtn--danger:hover {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 8%, transparent);
}

.ann-card__react-pill .pass-emoji-wrap {
  vertical-align: 0;
}

.ann-card__react-pill .pass-emoji-tooltip {
  z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
  .ann-card__react-pill--enter,
    .ann-card__react-pill--leave,
    .ann-card__react-pill--pulse,
    .ann-card__reacts-row--enter,
    .ann-card__reacts-row--leave,
    .ann-card__react-count--bump {
    animation: none;
  }

  .ann-card__react-pill,
    .ann-card__react-add-inline {
    transition:
            background-color 120ms ease-out,
            border-color 120ms ease-out,
            color 120ms ease-out;
  }

  .ann-card__react-pill:hover,
    .ann-card__react-pill:active,
    .ann-card__react-add-inline:hover,
    .ann-card__react-add-inline:active {
    transform: none;
  }

  .ann-card:hover .ann-card__react-add-inline {
    transform: none;
  }
}

.ann-feed--empty .ann-feed__inner {
  min-height: 100%;
}

.ann-feed--empty {
  padding-top: 16px;
  padding-bottom: 8px;
}

.ann-feed--empty .ch-channel-intro {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 15px;
}

.ann-feed--empty .ann-feed__spacer {
  display: none;
}

.ch-channel-intro {
  width: 100%;
  margin: 0;
  padding: 15px 16px 0;
  flex-shrink: 0;
}

.ch-channel-intro__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--foreground, #000);
}

.ch-channel-intro__type-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--foreground, #000) 42%, transparent);
}

.dark .ch-channel-intro__type-icon {
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.ch-channel-intro__lead {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--foreground, #000) 68%, transparent);
}

.ch-channel-intro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.ch-channel-intro__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 46%, transparent);
}

.ch-channel-intro__meta-item i {
  font-size: 1rem;
  flex-shrink: 0;
}

.ch-channel-intro__hint {
  display: none;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
}

.ann-feed--empty .ch-channel-intro__hint {
  display: inline-flex;
}

.ch-channel-intro__lead + .ch-channel-intro__actions {
  margin-top: 4px;
}

.ch-channel-intro__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 2px 0 7px;
}

@media (min-width: 640px) {
  .ch-channel-intro__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ch-channel-intro__action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 112px;
  padding: 14px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 14px;
  background: var(--background, #fff);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ch-channel-intro__action-card:hover {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
}

.ch-channel-intro__action-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  outline-offset: 2px;
}

.ch-channel-intro__action-icon {
  width: 36px;
  height: 36px;
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

.ch-channel-intro__action-label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground, #000);
}

.ch-channel-intro__action-hint {
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 52%, transparent);
}

.ch-channel-intro__topic-input {
  min-height: 96px;
  resize: vertical;
}

.ch-channel-intro__welcome {
  margin: 4px 0 0;
}

.ch-channel-intro__welcome[hidden] {
  display: none !important;
}

.ch-channel-intro__welcome:not([hidden]) {
  display: block;
}

/* .ann-card zaten hover arka planini kendi kurallarindan alir; onizleme
   burada gercek mesaj karti ile birebir ayni gorunmeli - 01.07.2026 20:15 */

.ch-channel-intro__welcome-card {
  padding: 4px 6px;
}

/* gonder butonu — icerigin altinda hafif, kutu/toolbar olmadan bir aksiyon - 01.07.2026 20:15 */

.ch-channel-intro__welcome-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 65%, transparent);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
        background-color 140ms ease-out,
        color 140ms ease-out,
        border-color 140ms ease-out;
}

.ch-channel-intro__welcome-send:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
  border-color: color-mix(in srgb, var(--foreground, #000) 26%, transparent);
}

.ch-channel-intro__welcome-send:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  outline-offset: 1px;
}

.ch-channel-intro__welcome-send:disabled {
  opacity: 0.5;
  cursor: default;
}

.ann-card--system {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0.75rem 0 0.25rem;
  border: 0;
  background: transparent;
}

.ann-card--system:hover {
  background: transparent;
}

.ann-card--system + .ann-card:not(.ann-card--system):not(.ann-card--continued) {
  margin-top: 1rem;
}

.ann-card:not(.ann-card--system) + .ann-card--system {
  margin-top: 1rem;
}

.ann-card__system-text {
  margin: 0;
  max-width: 100%;
  font-size: 0.8125rem;
  line-height: 1.375;
  text-align: left;
  color: color-mix(in srgb, var(--foreground, #000) 48%, transparent);
}

.ann-card__system-actor {
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 62%, transparent);
}

.ann-card__system-actor--trigger,
.ann-card__system-actor.ann-card__name--trigger {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
  cursor: pointer;
  text-align: left;
}

.ann-card__system-actor--trigger:hover,
.ann-card__system-actor--trigger:focus-visible,
.ann-card__system-actor.ann-card__name--trigger:hover,
.ann-card__system-actor.ann-card__name--trigger:focus-visible {
  color: var(--foreground, #171717);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

.dark .ann-card__system-actor--trigger:hover,
.dark .ann-card__system-actor--trigger:focus-visible,
.dark .ann-card__system-actor.ann-card__name--trigger:hover,
.dark .ann-card__system-actor.ann-card__name--trigger:focus-visible {
  color: var(--foreground, #e4e4e7);
}

.ann-card__system-time {
  display: inline;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.375;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  white-space: nowrap;
  cursor: default;
}

.ann-card__system-time:hover,
.ann-card__system-time:focus-visible {
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  outline: none;
}

[data-msg-media] {
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-subtle, #f5f5f5) 88%, transparent);
}

[data-msg-media].is-loading:not([data-msg-media-sized]) {
  width: min(100%, 12rem);
  min-height: 30px;
}

[data-msg-media].is-error {
  width: min(100%, 10rem);
  min-height: 30px;
}

.msg-media__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-media__loader::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-top-color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  animation: msg-media-spin 0.7s linear infinite;
}

[data-msg-media].is-loaded .msg-media__loader,
[data-msg-media].is-error .msg-media__loader {
  display: none;
}

[data-msg-media] img[data-msg-media-img],
[data-msg-media] img.msg-media__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  transition: opacity 160ms ease;
  vertical-align: top;
}

[data-msg-media].is-loaded img[data-msg-media-img],
[data-msg-media].is-loaded img.msg-media__img {
  opacity: 1;
  cursor: pointer;
}

[data-msg-media].is-error img[data-msg-media-img],
[data-msg-media].is-error img.msg-media__img {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .msg-media__loader::before {
    animation: none;
    border-top-color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  }

  [data-msg-media] img[data-msg-media-img],
    [data-msg-media] img.msg-media__img {
    transition: none;
  }
}

@keyframes msg-media-spin {
  to {
    transform: rotate(360deg);
  }
}

.pass-video-player {
  position: relative;
  display: block;
  width: 100%;
  max-height: 320px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}

.pass-media-lightbox .pass-video-player {
  max-height: 88vh;
  max-width: min(88vw, 1200px);
  border-radius: 10px;
  cursor: default;
}

.pass-video-player:fullscreen,
.pass-video-player:-webkit-full-screen {
  max-height: 100vh;
  max-width: 100vw;
  border-radius: 0;
}

.pass-video-player__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: top;
}

.pass-media-lightbox .pass-video-player__video {
  max-height: 88vh;
}

.pass-video-player:fullscreen .pass-video-player__video,
.pass-video-player:-webkit-full-screen .pass-video-player__video {
  max-height: 100vh;
  height: 100%;
  object-fit: contain;
}

/* overlay — click toggle; sadece pointer-events icin - 16.07.2026 00:37 */

.pass-video-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: auto;
}

/* merkez ikonu — duraklatildiginda parlak, hover'da solar - 16.07.2026 00:37 */

.pass-video-player__big-icon {
  font-size: 2.25rem;
  color: #ffffff;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  line-height: 1;
}

.pass-video-player[data-playing="0"] .pass-video-player__big-icon {
  opacity: 0.88;
}

/* hover'da merkez ikonu silinir — kontroller devreye girer - 16.07.2026 00:37 */

.pass-video-player:hover .pass-video-player__big-icon,
.pass-video-player:focus-within .pass-video-player__big-icon {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pass-video-player__big-icon {
    transition: none;
  }
}

/* bar: solid bg yok, alttan yukari gradient fade - 16.07.2026 00:43 */

.pass-video-player__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 2rem 0.625rem 0.5rem;
  background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.22) 45%,
        rgba(0, 0, 0, 0) 100%
    );
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* hover/focus → bar belirginlesir - 16.07.2026 00:43 */

.pass-video-player:hover .pass-video-player__bar,
.pass-video-player:focus-within .pass-video-player__bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* touch: oynarken ve henuz idle degil → goster - 16.07.2026 00:43 */

.pass-video-player[data-playing="1"][data-idle="0"] .pass-video-player__bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* touch idle: hover yoksa gizle — hover varsa usteki kural kazanir - 16.07.2026 00:43 */

.pass-video-player[data-playing="1"][data-idle="1"] .pass-video-player__bar {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* timeline — full width, kalin cizgi - 16.07.2026 00:43 */

.pass-video-player__scrub-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 18px;
  min-width: 0;
  cursor: pointer;
}

.pass-video-player__track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  transition: height 140ms ease;
}

.pass-video-player__scrub-wrap:hover .pass-video-player__track {
  height: 6px;
}

.pass-video-player__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 999px;
  transition: width 80ms linear;
}

/* native range — gorunmez, sadece interaction icin - 16.07.2026 00:43 */

.pass-video-player__scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.pass-video-player__scrub:focus-visible ~ .pass-video-player__track {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

/* alt satir — play, sure, mute, fullscreen - 16.07.2026 00:43 */

.pass-video-player__actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 28px;
}

.pass-video-player__spacer {
  flex: 1;
  min-width: 0;
}

.pass-video-player__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color 120ms ease, opacity 120ms ease;
}

.pass-video-player__btn:hover {
  color: #ffffff;
}

.pass-video-player__btn:focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* sure — play yaninda - 16.07.2026 00:43 */

.pass-video-player__time {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-family: Arial, sans-serif;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  letter-spacing: 0.02em;
  padding: 0 0.25rem;
}

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

  .pass-video-player__btn {
    transition: none;
  }

  .pass-video-player__track {
    transition: none;
  }

  .pass-video-player__track-fill {
    transition: none;
  }
}

.ann-card:hover .ann-card__hover-bar {
  opacity: 1;
  pointer-events: auto;
}

.ann-card__hbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  font-size: 0.95rem;
  transition: background 0.1s, color 0.1s;
}

.ann-card__hbtn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.ann-card__hbtn--like.ann-card__hbtn--active {
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 30%, transparent);
}

/* dropdown - 23.06.2026 22:25 */

.ann-card__dropdown {
  position: absolute;
  top: 28px;
  right: 0;
  min-width: 168px;
  background: var(--background, #fff);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  border-radius: 10px;
  padding: 4px;
  z-index: 100;
}

.ann-card__dditem {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  border-radius: 7px;
  text-align: left;
  color: color-mix(in srgb, var(--foreground, #000) 75%, transparent);
  transition: background 0.1s, color 0.1s;
}

.ann-card__dditem:hover {
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  color: var(--foreground, #000);
}

.ann-card__dditem--danger {
  color: #ef4444;
}

.ann-card__dditem--danger:hover {
  background: color-mix(in srgb, #ef4444 6%, transparent);
  color: #ef4444;
}

.ann-card__ddsep {
  height: 1px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  margin: 3px 0;
}

/* header + icerik — ayni font/satir ritmi, ekstra ara yok - 14.07.2026 08:29 */

.ann-card__header-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin: 0;
  min-height: calc(var(--ann-msg-size, 0.9375rem) * var(--ann-msg-line, 1.375));
  line-height: var(--ann-msg-line, 1.375);
}

.ann-card__name {
  font-size: var(--ann-msg-size, 0.9375rem);
  font-weight: 700;
  line-height: var(--ann-msg-line, 1.375);
}

.ann-card__name--role {
  --member-role-color: #6b7280;
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground, #000));
}

.dark .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 58%, var(--foreground, #000));
}

.ann-card:hover .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 88%, var(--foreground, #000));
}

.dark .ann-card:hover .ann-card__name--role {
  color: color-mix(in srgb, var(--member-role-color) 72%, var(--foreground, #000));
}

.ann-card__time {
  font-size: 0.75rem;
  line-height: var(--ann-msg-line, 1.375);
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-card__badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.ann-card__content {
  font-size: var(--ann-msg-size, 0.9375rem);
  line-height: var(--ann-msg-line, 1.375);
  margin: 0;
  padding: 0;
  color: var(--foreground, #000);
}

.ann-card__content.ann-markdown {
  color: var(--foreground, #000);
}

.ann-card__content.ann-markdown a.pass-mention,
.ann-card__content.ann-markdown a.pass-mention:hover {
  color: #3d4ff0;
  text-decoration: none;
}

.dark .ann-card__content.ann-markdown a.pass-mention,
.dark .ann-card__content.ann-markdown a.pass-mention:hover {
  color: #aeb6ff;
}

/* gorsel cerceve — boyut media-frame js + msg-media-frame.css - 14.07.2026 08:54 */

.ann-card__media {
  display: block;
  margin: 4px 0 0;
  max-width: min(100%, 420px);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 80%, transparent);
}

.ann-card__content > .ann-card__media:first-child {
  margin-top: 0;
}

.ann-card__media-item {
  display: block;
  border-radius: 10px;
  vertical-align: top;
}

.ann-card__media > video.ann-card__media-item {
  max-width: 100%;
  max-height: 320px;
  min-height: 30px;
  width: auto;
  height: 100%;
}

/* footer: sadece begenmisse liked badge gozukur - 23.06.2026 22:25 */

.ann-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  min-height: 0;
}

.ann-card__liked-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
  color: color-mix(in srgb, #ef4444 55%, transparent);
}

.ann-card__liked-badge--active {
  display: flex;
  color: #ef4444;
}

.ann-card__comments {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  margin-top: 10px;
}

/* yorum thread alani — twitter tarz dikey cizgi + bubble - 23.06.2026 22:30 */

.ann-comments {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
}

/* her yorum: avatar sol kolonu + icerik sag kolonu - 23.06.2026 22:30 */

.ann-comment {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding: 5px 0;
}

/* dikey thread cizgisi: son yorum haric gosterilir - 23.06.2026 22:30 */

.ann-comment__line-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.ann-comment__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  position: relative;
  z-index: 1;
}

.ann-comment__thread-line {
  width: 2px;
  flex: 1;
  min-height: 8px;
  background: color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  margin-top: 2px;
}

.ann-comment:last-child .ann-comment__thread-line {
  display: none;
}

/* icerik kolonu - 23.06.2026 22:30 */

.ann-comment__content-col {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
}

.ann-comment__meta-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.ann-comment__name {
  font-size: 0.875rem;
  font-weight: 700;
}

.ann-comment__time {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
}

.ann-comment__delete {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
  display: flex;
  transition: opacity 0.1s;
}

.ann-comment:hover .ann-comment__delete {
  opacity: 1;
}

.ann-comment__delete:hover {
  color: #ef4444;
}

/* bubble mesaj - 23.06.2026 22:30 */

.ann-comment__bubble {
  display: inline-block;
  max-width: 100%;
  background: color-mix(in srgb, var(--foreground, #000) 5%, transparent);
  border-radius: 0 10px 10px 10px;
  padding: 7px 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  word-break: break-word;
}

/* yorum input satiri - 23.06.2026 22:30 */

.ann-comment-input {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 4px;
}

.ann-comment-input__avatar-col {
  flex-shrink: 0;
  width: 28px;
}

.ann-comment-input__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  display: block;
}

.ann-comment-input__right {
  flex: 1;
  display: flex;
  gap: 6px;
}

.ann-comment-input__field {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9375rem;
  background: transparent;
  color: var(--foreground, #000);
  outline: none;
  transition: border-color 0.15s;
}

.ann-comment-input__field:focus {
  border-color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

.ann-comment-input__send {
  border: none;
  background: var(--foreground, #000);
  color: var(--background, #fff);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.ann-comment-input__send:hover {
  opacity: 0.82;
}

.ann-comment-input__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* yazıyor gostergesi - 23.06.2026 23:45 */

.ann-compose__typing {
  padding: 0 1rem 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted, #666);
  min-height: 1.25rem;
}

/* kanalda aktif kullanici avatarlari — compose kutusu sag ust sinirinda - 24.06.2026 19:15 */

.ann-compose__box-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 14px auto 0;
}

.ann-compose__viewers {
  position: absolute;
  top: 0;
  right: 16px;
  z-index: 2;
  transform: translateY(-50%);
}

.ann-compose__viewers-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.ann-compose__viewer-btn {
  position: relative;
  display: block;
  flex-shrink: 0;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}

.ann-compose__viewer-btn:first-child {
  margin-left: 0;
}

.ann-compose__viewer-avatar {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  background: var(--background, #fff);
}

.ann-compose__viewer-btn:hover .ann-compose__viewer-avatar {
  border-color: color-mix(in srgb, var(--foreground, #000) 22%, transparent);
}

.ann-markdown strong {
  font-weight: 700;
}

.ann-markdown em {
  font-style: italic;
}

.ann-markdown h1,.ann-markdown h2,.ann-markdown h3 {
  font-weight: 700;
  margin: 8px 0 4px;
}

.ann-markdown h1 {
  font-size: 1.2rem;
}

.ann-markdown h2 {
  font-size: 1.05rem;
}

.ann-markdown h3 {
  font-size: 0.95rem;
}

.ann-markdown p {
  margin: 0.2em 0;
}

.ann-markdown p:first-child {
  margin-top: 0;
}

.ann-markdown p:last-child {
  margin-bottom: 0;
}

.ann-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
}

.ann-markdown pre code {
  font-size: 0.8125rem;
  background: transparent;
  padding: 0;
}

.ann-markdown del {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.ann-markdown a {
  color: var(--foreground, #000);
  text-decoration: underline;
}

.ann-markdown ul {
  padding-left: 20px;
}

.ann-markdown li {
  list-style: disc;
  margin: 2px 0;
}

.ann-markdown ol {
  padding-left: 20px;
}

.ann-markdown ol li {
  list-style: decimal;
  margin: 2px 0;
}

.ann-markdown blockquote {
  margin: 4px 0;
  padding: 6px 12px;
  border-left: 3px solid color-mix(in srgb, var(--foreground, #000) 18%, transparent);
  color: color-mix(in srgb, var(--foreground, #000) 72%, transparent);
}

.ann-markdown blockquote p {
  margin: 2px 0;
}

.ann-markdown hr {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  margin: 8px 0;
}

.ann-code-block {
  margin: 4px 0 2px;
  max-width: min(100%, 36rem);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 9%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--foreground, #000) 4%, var(--background, #fff));
  overflow: hidden;
}

.ann-code-block__body {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ann-code-block__gutter {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 6px 6px 6px 8px;
  min-width: 1.75rem;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: pre;
  border-right: 1px solid color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.ann-code-block__pre {
  margin: 0;
  padding: 6px 8px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  white-space: pre;
}

.ann-code-block__pre code {
  display: block;
  padding: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--foreground, #000);
  white-space: inherit;
}

/* syntax token renkleri — kompakt palette - 16.07.2026 04:52 */

.ann-code-block .token.comment {
  color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  font-style: italic;
}

.ann-code-block .token.string,
.ann-code-block .token.char,
.ann-code-block .token.attr-value {
  color: #059669;
}

.ann-code-block .token.keyword {
  color: #4f46e5;
}

.ann-code-block .token.number,
.ann-code-block .token.boolean {
  color: #d97706;
}

.ann-code-block .token.function,
.ann-code-block .token.class-name {
  color: #2563eb;
}

.ann-code-block .token.property,
.ann-code-block .token.attr-name {
  color: #0d9488;
}

.ann-code-block .token.tag {
  color: #dc2626;
}

.ann-code-block .token.selector {
  color: #c026d3;
}

.ann-code-block .token.punctuation {
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
}

.dark .ann-code-block .token.string,
.dark .ann-code-block .token.char,
.dark .ann-code-block .token.attr-value {
  color: #34d399;
}

.dark .ann-code-block .token.keyword {
  color: #a5b4fc;
}

.dark .ann-code-block .token.number,
.dark .ann-code-block .token.boolean {
  color: #fbbf24;
}

.dark .ann-code-block .token.function,
.dark .ann-code-block .token.class-name {
  color: #60a5fa;
}

.dark .ann-code-block .token.property,
.dark .ann-code-block .token.attr-name {
  color: #2dd4bf;
}

.dark .ann-code-block .token.tag {
  color: #f87171;
}

.dark .ann-code-block .token.selector {
  color: #e879f9;
}

/* compose onizleme — caret hizasi icin sade - 16.07.2026 04:52 */

.ann-code-block--compose {
  margin: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ann-code-block--compose code {
  display: inline;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: inherit;
  line-height: inherit;
  background: transparent;
  padding: 0;
}

.ann-markdown > pre:not(.ann-code-block),
.ann-markdown pre:not(.ann-code-block__pre):not(.ann-code-block--compose) {
  margin: 4px 0 0;
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  border-radius: 6px;
  padding: 6px 8px;
  overflow-x: auto;
  white-space: pre;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ann-compose__viewer-avatar:first-child {
  margin-left: 0;
}

.ann-compose__box-wrap:has(.ann-compose__box:focus-within) .ann-compose__viewer-avatar {
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
}

/* compose — sayfanin altina yapisan, discord tarz - 23.06.2026 21:55 */

.ann-compose {
  position: sticky;
  bottom: 0;
  z-index: 10;
  /* solid arka plan — altindaki icerik burayi gecemez - 23.06.2026 21:55 */
  background: var(--background, #fff);
  border-top: none;
  padding: 0 16px 16px;
}

/* ::before compose baslamadan 32px yukari cekilerek sadece gecis bolgesinde fade olusturur - 23.06.2026 21:55 */

.ann-compose::before {
  content: '';
  display: block;
  height: 32px;
  margin: -32px -16px 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--background, #fff));
}

.ann-compose__box {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 11%, transparent);
  border-radius: 16px;
  overflow: hidden;
  background: var(--background, #fff);
  transition: border-color 0.15s;
}

.ann-compose__box:focus-within {
  border-color: color-mix(in srgb, var(--foreground, #000) 28%, transparent);
}

.ann-compose__textarea-wrap {
  position: relative;
}

.ann-compose__textarea {
  width: 100%;
  min-height: 120px;
  max-height: 250px;
  resize: none;
  border: none;
  outline: none;
  padding: 16px 16px 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  background: transparent;
  color: var(--foreground, #000);
  font-family: inherit;
  box-sizing: border-box;
  display: block;
  overflow-y: auto;
}

.ann-compose__textarea::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

.ann-compose__textarea::placeholder {
  color: color-mix(in srgb, var(--foreground, #000) 30%, transparent);
}

/* devre disi textarea - yetki yokken - 23.06.2026 23:53 */

.ann-compose__textarea--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  min-height: 56px;
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

.ann-compose__textarea--disabled::-moz-placeholder {
  font-style: italic;
}

.ann-compose__textarea--disabled::placeholder {
  font-style: italic;
}

.ann-compose__preview {
  padding: 16px 16px 10px;
  min-height: 120px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* :not([hidden]) olmadan author-normal display kurali UA'nin [hidden]{display:none}
   kuralini eziyor, medya yokken serit yine de acik gozukuyordu - 01.07.2026 23:55 */

.ann-compose__media-list:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 10px;
}

.ann-compose__file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 8%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--foreground, #000) 2%, var(--background, #fff));
}

.ann-compose__file-name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-compose__file-type,
.ann-compose__file-size {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground, #000) 45%, transparent);
}

.ann-compose__file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 35%, transparent);
  transition: background 0.1s, color 0.1s;
}

.ann-compose__file-remove:hover {
  background: color-mix(in srgb, #ef4444 8%, transparent);
  color: #ef4444;
}

.ann-compose__meta {
  padding: 8px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 1.5%, var(--background, #fff));
}

.ann-compose__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ann-compose__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--foreground, #000) 65%, transparent);
}

.ann-compose__check:hover {
  color: var(--foreground, #000);
}

.ann-compose__check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--foreground, #000);
}

.ann-compose__datetime {
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 12%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.875rem;
  background: transparent;
  color: var(--foreground, #000);
  outline: none;
}

.ann-compose__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--foreground, #000) 6%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 1.5%, var(--background, #fff));
}

.ann-compose__toolbar-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ann-compose__toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ann-compose__tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 38%, transparent);
  transition: background 0.1s, color 0.1s;
  font-size: 1rem;
}

.ann-compose__tool-btn:hover {
  background: color-mix(in srgb, var(--foreground, #000) 7%, transparent);
  color: var(--foreground, #000);
}

.ann-compose__charcount {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--foreground, #000) 32%, transparent);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ann-compose__charcount--over {
  color: #ef4444;
}

.ann-compose__submit {
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 14%, transparent);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ann-compose__submit:hover {
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  color: var(--foreground, #000);
  border-color: color-mix(in srgb, var(--foreground, #000) 24%, transparent);
}

.ann-compose__submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* surukle-birak aktif durumu - 24.06.2026 02:00 */

.ann-compose--drag .ann-compose__box {
  border-color: color-mix(in srgb, var(--foreground, #000) 40%, transparent);
  background: color-mix(in srgb, var(--foreground, #000) 3%, var(--background, #fff));
}

.ann-load-more {
  display: block;
  margin: 4px auto 12px;
  border: 1px solid color-mix(in srgb, var(--foreground, #000) 10%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground, #000) 55%, transparent);
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

.ann-load-more:hover {
  background: color-mix(in srgb, var(--foreground, #000) 4%, transparent);
  color: var(--foreground, #000);
}

/* webhook yonetim modali - 23.06.2026 22:30 */

.ann-wh-panel {
  width: min(920px, calc(100vw - 32px));
  max-width: min(920px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 48px));
  max-height: min(640px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
}

.ann-wh-modal__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.ann-wh-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
}

.ann-wh-loader[hidden] {
  display: none !important;
}

.ann-wh-loader .space-settings-modal__loader {
  min-height: 0;
  padding: 0;
}

.ann-wh-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  gap: 0;
}

.ann-wh-empty-state[hidden] {
  display: none !important;
}

.ann-wh-empty-state__icon {
  width: 5.5rem;
  height: 5.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ann-wh-empty-state__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.ann-wh-empty-state__desc {
  margin: 0.375rem 0 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-empty-state__action {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 11rem;
}

.ann-wh-empty-state__action i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
}

.ann-wh-split[hidden] {
  display: none !important;
}

.ann-wh-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.ann-wh-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.ann-wh-side__foot {
  padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.ann-wh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: Arial, sans-serif;
  color: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ann-wh-item:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.ann-wh-item--active {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
}

.ann-wh-item--draft {
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
}

.ann-wh-item--draft.ann-wh-item--active {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

.ann-wh-item--draft .ann-wh-item__name {
  font-style: italic;
  font-weight: 600;
}

.ann-wh-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ann-wh-item__logo {
  width: 32px;
  height: 32px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ann-wh-item__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.ann-wh-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.ann-wh-item__name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-wh-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  .ann-wh-panel {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }

  .ann-wh-split {
    grid-template-columns: 1fr;
    grid-template-rows: 180px minmax(0, 1fr);
  }

  .ann-wh-side {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  }
}

.ann-wh-detail-idle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.ann-wh-detail-idle[hidden] {
  display: none !important;
}

.ann-wh-detail-idle__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 0;
}

.ann-wh-edit-form[hidden] {
  display: none !important;
}

.ann-wh-edit-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

.ann-wh-edit-form__grid .space-tab-modal__field {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.ann-wh-edit-form__grid .space-tab-modal__input {
  width: 100%;
}

/* notr outline — sidebar olustur + kaydet idle - 16.07.2026 13:22 */

.ann-wh-modal__add,
.ann-wh-edit-form__save--idle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.ann-wh-modal__add {
  width: 100%;
  min-height: 40px;
}

.ann-wh-modal__add:hover:not(:disabled):not(.ann-wh-modal__add--locked),
.ann-wh-edit-form__save--idle:hover:not(:disabled) {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.ann-wh-modal__add:disabled,
.ann-wh-modal__add--locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.ann-wh-modal__add i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-edit-form__save--idle {
  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent) !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--foreground) 62%, transparent) !important;
}

.ann-wh-edit-form__save--idle:disabled {
  opacity: 1;
  cursor: default;
}

.ann-wh-edit-form__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ann-wh-edit-form__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ann-wh-edit-form__avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.ann-wh-edit-form__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 45%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-edit-form__title {
  margin: 0.125rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
}

.ann-wh-token {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
}

.ann-wh-token[hidden] {
  display: none !important;
}

.ann-wh-token__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ann-wh-token__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 52%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-token__regen {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  transition: color 120ms ease;
}

.ann-wh-token__regen:hover:not(:disabled) {
  color: var(--foreground);
}

.ann-wh-token__regen:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ann-wh-token__ready {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ann-wh-token__ready[hidden],
.ann-wh-token__missing[hidden] {
  display: none !important;
}

.ann-wh-token__code {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.ann-wh-token__sublabel {
  margin: 2px 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-token__row--token .ann-wh-token__code {
  font-size: 0.6875rem;
}

.ann-wh-token__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.ann-wh-copy-btn {
  flex-shrink: 0;
  width: 40px;
  min-height: 40px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.ann-wh-copy-btn:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.ann-wh-copy-btn i {
  font-size: 1rem;
  line-height: 1;
}

.ann-wh-token__missing-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--foreground) 58%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
}

.ann-wh-info[hidden] {
  display: none !important;
}

.ann-wh-info__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ann-wh-info__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 48%, transparent);
  font-family: Arial, sans-serif;
}

.ann-wh-info__value {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-wh-info__row--creator .ann-wh-info__value {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.ann-wh-creator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: opacity 120ms ease;
}

.ann-wh-creator:hover {
  opacity: 0.82;
}

.ann-wh-creator:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--foreground) 28%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.ann-wh-creator__avatar {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.ann-wh-creator__name {
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  font-family: Arial, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-wh-edit-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}

.ann-wh-edit-form__save,
.ann-wh-edit-form__delete {
  min-width: 6.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ann-wh-btn-danger {
  border: none !important;
  background: #dc2626 !important;
  color: #fff !important;
}

.ann-wh-btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}

@media (max-width: 720px) {
  .ann-wh-edit-form__grid,
    .ann-wh-info {
    grid-template-columns: 1fr;
  }

  .ann-wh-edit-form__actions {
    justify-content: stretch;
  }

  .ann-wh-edit-form__save,
    .ann-wh-edit-form__delete {
    flex: 1;
    min-width: 0;
  }
}

/* messages page - 23.06.2026 22:56 */

.messages-shell {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.messages-sidebar {
  width: 260px;
  min-width: 220px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid color-mix(in srgb, var(--foreground,#000) 8%, transparent);
  flex-shrink: 0;
  overflow: hidden;
}

.messages-sidebar__header {
  padding: 14px 14px 10px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--foreground,#000) 55%, transparent);
  text-transform: uppercase;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dm-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: 0.9375rem;
  color: var(--foreground,#000);
  transition: background 0.12s;
}

.dm-list__item:hover {
  background: color-mix(in srgb, var(--foreground,#000) 5%, transparent);
}

.dm-list__item--active {
  background: color-mix(in srgb, var(--foreground,#000) 8%, transparent);
  font-weight: 600;
}

.dm-list__icon {
  font-size: 1rem;
  color: color-mix(in srgb, var(--foreground,#000) 40%, transparent);
  flex-shrink: 0;
}

.dm-list__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-list__empty {
  padding: 12px 10px;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground,#000) 40%, transparent);
}

/* chat main area */

.messages-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages-main__header {
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground,#000) 8%, transparent);
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-feed__loading,.msg-feed__empty,.msg-feed__error {
  margin: auto;
  text-align: center;
  color: color-mix(in srgb, var(--foreground,#000) 40%, transparent);
  font-size: 0.9375rem;
}

.msg-item {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.msg-item--own {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-bubble {
  padding: 7px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--foreground,#000) 6%, transparent);
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 100%;
  word-break: break-word;
}

.msg-item--own .msg-bubble {
  background: color-mix(in srgb, var(--accent,#6366f1) 12%, transparent);
}

.msg-meta {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--foreground,#000) 40%, transparent);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.msg-author {
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground,#000) 70%, transparent);
}

.msg-time {
  font-size: 0.7rem;
}

.msg-edited {
  font-size: 0.7rem;
  font-style: italic;
}

.msg-deleted {
  font-style: italic;
  color: color-mix(in srgb, var(--foreground,#000) 38%, transparent);
  font-size: 0.9375rem;
}

.msg-text {
  white-space: pre-wrap;
}

.msg-reply-ref {
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--foreground,#000) 45%, transparent);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
  padding-left: 2px;
}

.msg-image {
  max-width: 280px;
  max-height: 240px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.msg-video {
  max-width: 280px;
  border-radius: 8px;
  display: block;
}

.msg-file {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--accent,#6366f1);
}

.msg-spin {
  animation: msg-spin 1s linear infinite;
  display: inline-block;
}

@keyframes msg-spin {
  to {
    transform: rotate(360deg);
  }
}

/* typing indicator */

.msg-typing-bar {
  padding: 4px 16px 6px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--foreground,#000) 45%, transparent);
  min-height: 22px;
}

/* compose */

.msg-compose-wrap {
  border-top: 1px solid color-mix(in srgb, var(--foreground,#000) 8%, transparent);
  padding: 10px 16px 12px;
  flex-shrink: 0;
}

.msg-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: color-mix(in srgb, var(--foreground,#000) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--foreground,#000) 10%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
  transition: border-color 0.15s;
}

.msg-compose:focus-within {
  border-color: color-mix(in srgb, var(--foreground,#000) 22%, transparent);
}

.msg-compose__emoji-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: color-mix(in srgb, var(--foreground,#000) 50%, transparent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 120ms ease-out, background 120ms ease-out;
}

.msg-compose__emoji-btn:hover {
  color: var(--foreground,#000);
  background: color-mix(in srgb, var(--foreground,#000) 7%, transparent);
}

.msg-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9375rem;
  color: var(--foreground,#000);
  resize: none;
  max-height: 150px;
  min-height: 22px;
  line-height: 1.45;
  font-family: inherit;
}

.msg-input::-moz-placeholder {
  color: color-mix(in srgb, var(--foreground,#000) 35%, transparent);
}

.msg-input::placeholder {
  color: color-mix(in srgb, var(--foreground,#000) 35%, transparent);
}

.msg-send-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  color: color-mix(in srgb, var(--foreground,#000) 50%, transparent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.12s, background 0.12s;
}

.msg-send-btn:hover {
  color: var(--foreground,#000);
  background: color-mix(in srgb, var(--foreground,#000) 7%, transparent);
}

/* empty / no channel selected */

.messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  color: color-mix(in srgb, var(--foreground,#000) 35%, transparent);
  font-size: 0.9375rem;
}

.messages-empty__icon {
  font-size: 2.5rem;
}

/* presence indicator dot - 23.06.2026 22:56 */

.dm-presence {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--background, #fff);
}

.dm-list__icon {
  position: relative;
}

.dm-presence--online {
  background: #22c55e;
}

.dm-presence--working {
  background: #259bfc;
}

.dm-presence--idle {
  background: #f59e0b;
}

.dm-presence--dnd {
  background: #ef4444;
}

.dm-presence--invisible,.dm-presence--offline {
  background: #9ca3af;
}

/* ── sayfa kapsayicisi ─────────────────────────────────────────── */

.bm-root {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* sayfa genelindeki 64rem icerik sinirini kaldir — masonry tam genislik kullanir,
   yan bosluk (--account-split-inner-pad-x) korunarak hizali kalir - 08.07.2026 05:30 */

.account-split__scroll:has(#account-main-content.account-main--bookmarks) > .account-split__content-pad {
  max-width: none;
  width: 100%;
}

/* ── toolbar — filtreler artik hero altinda merkezde - 10.07.2026 05:10 */

.bm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bm-toolbar--center {
  justify-content: center;
}

/* ── manuel url ekleme formu (varsayilan, hero disinda kullanilirsa) ────── */

.bm-add-form {
  flex: 1 1 320px;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 0.375rem 0 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--background);
  transition: border-color 140ms ease;
}

.bm-add-form:focus-within {
  border-color: color-mix(in srgb, var(--foreground) 35%, transparent);
}

.bm-add-form__icon {
  font-size: 1.0625rem;
  flex-shrink: 0;
  color: var(--ink-muted);
  pointer-events: none;
}

.bm-add-form__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  height: 100%;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--foreground);
  outline: none;
  font-family: inherit;
}

.bm-add-form__input::-moz-placeholder {
  color: var(--ink-muted);
}

.bm-add-form__input::placeholder {
  color: var(--ink-muted);
}

.bm-add-form__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.125rem;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 120ms ease, transform 100ms ease;
  white-space: nowrap;
}

.bm-add-form__btn:hover {
  opacity: 0.85;
}

.bm-add-form__btn:active {
  transform: scale(0.97);
}

/* ── filtre sekmeleri — dolu-aktif segment gorunumu - 08.07.2026 05:40 */

.bm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--surface-subtle);
  flex-shrink: 0;
}

.bm-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.bm-filter-btn:hover {
  color: var(--foreground);
}

.bm-filter-btn--active {
  background: var(--background);
  color: var(--foreground);
}

/* ── masonry feed — daha genis kartlar, daha az sutun - 10.07.2026 05:15 */

.bm-feed {
  -moz-columns: 5 280px;
       columns: 5 280px;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.bm-feed:empty {
  display: none;
}

@media (max-width: 1400px) {
  .bm-feed {
    -moz-columns: 4 260px;
         columns: 4 260px;
  }
}

@media (max-width: 1024px) {
  .bm-feed {
    -moz-columns: 3 240px;
         columns: 3 240px;
  }
}

@media (max-width: 640px) {
  .bm-feed {
    -moz-columns: 2 160px;
         columns: 2 160px;
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
}

/* pin karti — ortak yuzey ve spacing - 17.07.2026 01:08 */

.bm-card {
  --bm-card-pad: 0.875rem;
  --bm-corner-inset: 0.75rem;
  --bm-chip-h: 28px;
  position: relative;
  z-index: 0;
  display: inline-block;
  width: 100%;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--background);
  overflow: visible;
  transition: border-color 160ms ease;
}

.bm-card:hover {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

.bm-card:has(.bm-card__menu[data-pass-menu-open="1"]),
.bm-card:has(.bm-card__menu-trigger[aria-expanded="true"]) {
  z-index: 1000;
}

.bm-card [data-overflow-dropdown-panel] {
  z-index: 10100;
}

/* medya — summary_large_image ustte tam genislik - 12.07.2026 22:51 */

.bm-card__media {
  position: relative;
  display: block;
  width: 100%;
  background: var(--surface-subtle);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.bm-card__img {
  width: 100%;
  height: auto;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.bm-card__media-action {
  position: absolute;
  top: var(--bm-corner-inset);
  right: var(--bm-corner-inset);
  z-index: 2;
}

.bm-card__media-action .bm-card__menu-trigger {
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  color: var(--foreground);
  opacity: 1;
}

/* kaynak rozeti — tek urun chip - 14.07.2026 07:50 */

.bm-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  box-sizing: border-box;
  height: var(--bm-chip-h);
  padding: 0 0.625rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--foreground);
  text-decoration: none;
  flex-shrink: 0;
}

.bm-card__badge i {
  font-size: 0.6875rem;
  line-height: 1;
  flex-shrink: 0;
}

.bm-card__media .bm-card__badge {
  position: absolute;
  top: var(--bm-corner-inset);
  left: var(--bm-corner-inset);
}

.bm-card__badge--inline {
  position: static;
}

/* ust satir — origin meta veya urun rozeti + menu - 16.07.2026 07:35 */

.bm-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--bm-chip-h);
}

.bm-card__top-start {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}

.bm-card__origin-row {
  min-width: 0;
}

.bm-card__origin {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  min-width: 0;
  overflow: hidden;
}

.bm-card__origin-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.bm-card__origin-icon {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.bm-card__origin-space {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}

a.bm-card__origin-space:hover {
  color: var(--foreground);
}

.bm-card__origin-sep {
  font-size: 0.6875rem;
  color: var(--ink-muted);
  opacity: 0.45;
  flex-shrink: 0;
}

.bm-card__origin-channel {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

a.bm-card__origin-channel:hover {
  color: var(--foreground);
}

/* uc nokta overflow menusu - 12.07.2026 22:51 */

.bm-card__menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.bm-card__menu-trigger {
  width: var(--bm-chip-h);
  height: var(--bm-chip-h);
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
  font-size: 1rem;
}

.bm-card:hover .bm-card__menu-trigger,
.bm-card__menu[data-pass-menu-open="1"] .bm-card__menu-trigger {
  opacity: 1;
}

.bm-card__menu-trigger:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

/* govde — large / summary / message / link ayni padding ve gap - 17.07.2026 01:08 */

.bm-card__body {
  padding: var(--bm-card-pad);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bm-card__main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.bm-card--summary .bm-card__main {
  align-items: center;
}

.bm-card__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}

.bm-card__title-link {
  text-decoration: none;
}

.bm-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.bm-card__title-link:hover .bm-card__title {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.bm-card__desc {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* summary thumb — tum summary kartlarda ayni olcu - 17.07.2026 01:08 */

.bm-card__thumb-wrap {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-subtle);
}

.bm-card__thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ── bos durum ──────────────────────────────────────────────────── */

/* column-span: all — masonry sutunlarina sikismasin, tam genislik kaplasin - 08.07.2026 05:30 */

.bm-empty {
  -moz-column-span: all;
       column-span: all;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--background);
}

.bm-empty__icon {
  width: 5rem;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1.25rem;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.bm-empty__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}

.bm-empty__desc {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0.375rem 0 0;
  max-width: 28rem;
}

/* ── yukleniyor noktalari ──────────────────────────────────────── */

.bm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 2rem;
}

.bm-loading[hidden] {
  display: none;
}

.bm-loading__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 30%, transparent);
  animation: bm-dot-pulse 1.2s ease-in-out infinite;
}

.bm-loading__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.bm-loading__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bm-dot-pulse {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* ── sentinel (infinite scroll referans noktasi) ───────────────── */

.bm-sentinel {
  height: 1px;
}

@media (max-width: 640px) {
  .bm-filters {
    justify-content: center;
  }
}

.bm-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  padding: 3.5rem 1.5rem 3rem;
}

/* nokta deseni — board viewport ile ayni teknik, duz doku (gradient degil) - 10.07.2026 05:10 */

.bm-hero__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--foreground) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 0%, transparent 75%);
}

.bm-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.bm-hero__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}

.bm-hero__subtitle {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
  max-width: 26rem;
}

/* compose kutusu — buyutulmus, merkezi, ai prompt bar tarzi - 10.07.2026 05:10 */

.bm-add-form--hero {
  flex: none;
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 0.4375rem 0 1.25rem;
  border-radius: 18px;
  background: var(--background);
  border: 1px solid var(--border);
}

.bm-add-form--hero:focus-within {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.bm-add-form--hero .bm-add-form__icon {
  font-size: 1.1875rem;
}

.bm-add-form--hero .bm-add-form__input {
  font-size: 0.9375rem;
}

.bm-add-form--hero .bm-add-form__btn {
  height: 40px;
  padding: 0 1.375rem;
  border-radius: 12px;
  font-size: 0.8438rem;
}

@media (max-width: 640px) {
  .bm-hero {
    padding: 2.75rem 1.25rem 2.25rem;
    border-radius: 20px;
  }

  .bm-hero__title {
    font-size: 1.5rem;
  }

  .bm-add-form--hero {
    height: 52px;
    border-radius: 16px;
  }
}

/* kart ici mesaj kabugu — cift border yok, soft yuzey - 17.07.2026 01:08 */

.bm-card__msg-frame {
  padding: 0.375rem 0.5rem;
  border-radius: 10px;
  border: 0;
  background: var(--surface-subtle);
  min-width: 0;
  overflow: visible;
}

.bm-card__msg-list.ann-feed__list {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.bm-card__msg-frame .ann-card {
  margin: 0;
  padding: 0.25rem 0.125rem;
  background: transparent;
  border: none;
}

.bm-card__msg-frame .ann-card:hover {
  background: transparent;
}

/* dar sutunda tarih alt satira dusmesin - 17.07.2026 01:08 */

.bm-card__msg-frame .ann-card__header-row {
  flex-wrap: nowrap;
  align-items: baseline;
  min-width: 0;
}

.bm-card__msg-frame .ann-card__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-card__msg-frame .ann-card__time,
.bm-card__msg-frame .ann-card__edited,
.bm-card__msg-frame .pass-bot-tag {
  flex-shrink: 0;
  white-space: nowrap;
}

/* mesaj metni — 6 satir trim; gorsel boyutu korunur - 17.07.2026 01:08 */

.bm-card__msg-frame .ann-card__content:not(:has(.ann-card__media)) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.bm-card__msg-missing {
  margin: 0;
  padding: 0.375rem 0.125rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.bm-card--message {
  overflow: visible;
}

.bm-card--link .bm-card__desc {
  -webkit-line-clamp: 4;
}

.bm-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.625rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
}

.bm-card__shared {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3125rem 0.4375rem;
  min-width: 0;
  flex: 1 1 auto;
}

.bm-card__shared-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.bm-card__attribution {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.bm-card__attr-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.bm-card__attr-name {
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.bm-card__attr-name:hover,
.bm-card__attr-name--trigger:hover {
  color: color-mix(in srgb, var(--foreground) 72%, transparent);
}

.bm-card__attr-name--trigger {
  cursor: pointer;
}

.bm-card__attribution .pass-bot-tag {
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: 0.5625rem;
}

.bm-card__saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--ink-muted);
}

.bm-card__saved > i {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.85;
}

.bm-card__saved-label {
  font-size: 0.6875rem;
  font-weight: 500;
}

.bm-card__saved-time {
  font-size: 0.6875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--foreground) 62%, transparent);
  cursor: default;
  white-space: nowrap;
}

.bm-card__saved-time:hover,
.bm-card__saved-time:focus-visible {
  color: var(--foreground);
  outline: none;
}

/* --- admin-shell --- */

/* Staff: wider content column for tables */

.staff-split-outer {
  --account-split-main-content-max-w: 72rem;
  --account-split-sidebar-bg: var(--background);
  --account-split-main-bg: var(--surface-subtle);
  --account-split-sidebar-w: 18rem;
  --account-split-inner-pad: 1.5rem;
  --account-split-inner-pad-x: var(--account-split-inner-pad);
  --account-sidebar-inner-x: 0.8125rem;
  --sidebar-hover-bg: color-mix(in srgb, var(--foreground) 5%, transparent);
  --sidebar-active-bg: color-mix(in srgb, var(--foreground) 9%, transparent);
  --sidebar-active-fg: var(--foreground);
  --sidebar-item-r: 9px;
}

.staff-split-outer.dark,
.dark .staff-split-outer {
  --account-split-sidebar-bg: var(--surface-subtle);
  --account-split-main-bg: var(--background);
}

.staff-split-outer.account-split-outer {
  position: relative;
  min-height: 100vh;
  background-color: var(--account-split-main-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.staff-split-outer.account-split-outer input,
.staff-split-outer.account-split-outer textarea,
.staff-split-outer.account-split-outer select,
.staff-split-outer.account-split-outer button {
  font-family: inherit;
}

.staff-split-outer.account-split-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--account-split-sidebar-w);
  background-color: var(--account-split-sidebar-bg);
  pointer-events: none;
}

.staff-split-outer .account-split-inner {
  position: relative;
  z-index: 1;
}

.staff-split-outer .account-split__main {
  background-color: var(--account-split-main-bg);
}

.staff-split-outer .account-split__main-content-max {
  max-width: var(--account-split-main-content-max-w);
}

.staff-split-outer .account-split__content-pad {
  padding: var(--account-split-inner-pad);
}

.staff-split-outer .account-split__sidebar {
  background-color: var(--account-split-sidebar-bg);
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .staff-split-outer .account-desktop-sidebar .sidebar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--account-split-sidebar-w);
    background: var(--account-split-sidebar-bg);
    border-right: 1px solid var(--border);
    z-index: 20;
  }

  .staff-split-outer .account-desktop-sidebar > nav {
    overflow-y: auto;
  }

  .staff-split-outer .sidebar-nav-inner {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 0;
    padding-bottom: 3rem;
  }
}

.staff-split-outer .account-desktop-sidebar nav::-webkit-scrollbar,
.staff-split-outer #mobileSidebarNav::-webkit-scrollbar {
  width: 3px;
}

.staff-split-outer .account-desktop-sidebar nav::-webkit-scrollbar-track,
.staff-split-outer #mobileSidebarNav::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.5rem 0;
}

.staff-split-outer .account-desktop-sidebar nav::-webkit-scrollbar-thumb,
.staff-split-outer #mobileSidebarNav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}

.staff-split-outer .account-desktop-sidebar nav::-webkit-scrollbar-thumb:hover,
.staff-split-outer #mobileSidebarNav::-webkit-scrollbar-thumb:hover {
  background: var(--ink-400);
}

.staff-split-outer .account-desktop-sidebar nav,
.staff-split-outer #mobileSidebarNav {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.staff-split-outer aside a, .staff-split-outer aside button, .staff-split-outer aside p, .staff-split-outer aside span,
.staff-split-outer #mobileSidebar a, .staff-split-outer #mobileSidebar button, .staff-split-outer #mobileSidebar p, .staff-split-outer #mobileSidebar span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sidebar-header {
  border-bottom: 1px solid var(--border);
}

.sidebar-logo-link {
  transition: opacity 120ms ease;
}

.sidebar-logo-link:hover {
  opacity: 0.75;
}

.sidebar-logo-text {
  color: var(--foreground);
}

.sidebar-logo-products-btn {
  color: var(--ink-500);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.sidebar-logo-products-btn:hover {
  color: var(--foreground);
  background: var(--background);
  border-color: color-mix(in srgb, var(--border) 60%, var(--foreground));
}

.dark .sidebar-logo-products-btn {
  background: var(--background);
}

.dark .sidebar-logo-products-btn:hover {
  background: var(--surface-subtle);
}

.sidebar-user-section {
  margin-top: 0.6875rem;
  padding-left: var(--account-sidebar-inner-x);
  padding-right: var(--account-sidebar-inner-x);
}

.sidebar-user-card {
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  width: 100%;
}

.sidebar-bottom-user-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0.5rem 0.8125rem;
  width: 100%;
  text-align: left;
  transition: background-color 120ms ease;
}

.sidebar-bottom-user-btn:hover {
  background-color: var(--sidebar-hover-bg);
}

.sidebar-bottom-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}

.sidebar-bottom-user-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 0.0625rem;
}

.sidebar-bottom-user-chevron {
  font-size: 0.875rem;
  color: var(--ink-muted);
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.sidebar-bottom-user-btn:hover .sidebar-bottom-user-chevron {
  opacity: 0.9;
}

.sidebar-bottom-user-btn[aria-expanded="true"] .sidebar-bottom-user-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sidebar-bottom-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.3rem;
  overflow: hidden;
}

.sidebar-bottom-footer a {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-400);
  text-decoration: none;
  transition: color 120ms ease;
  white-space: nowrap;
  min-width: 0;
}

.sidebar-bottom-footer a:hover {
  color: var(--foreground);
}

.sidebar-bottom-footer__dot {
  font-size: 0.625rem;
  color: var(--ink-400);
  opacity: 0.45;
  line-height: 1;
}

.sidebar-bottom-footer__spacer {
  flex: 1;
}

.sidebar-bottom-version {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
  opacity: 0.4;
  white-space: nowrap;
}

#mobileSidebar {
  display: flex !important;
  flex-direction: column !important;
}

#mobileSidebarNav {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}

#mobileSidebar .sidebar-bottom {
  flex-shrink: 0;
  margin-top: auto;
}

#messageContainer .pointer-events-auto {
  pointer-events: auto;
}

.staff-split-outer .nav-section {
  margin-top: 0.9375rem;
}

.staff-split-outer .nav-section:first-child {
  margin-top: 0;
}

.staff-split-outer .nav-section--overview {
  margin-top: 0;
  margin-bottom: 0.375rem;
}

.staff-split-outer .nav-section__label {
  margin: 0;
  padding: 0 var(--account-sidebar-inner-x) 0.25rem var(--account-sidebar-inner-x);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0.5;
}

.staff-split-outer .nav-section__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.staff-split-outer .nav-item {
  position: relative;
  color: var(--ink-600);
  text-decoration: none;
  transition: color 120ms ease;
  overflow: visible;
}

.staff-split-outer .nav-item__icon {
  color: var(--ink-500);
  transition: color 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.staff-split-outer .nav-item--idle::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sidebar-hover-bg);
  border-radius: var(--sidebar-item-r);
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 0;
}

.staff-split-outer .nav-item--idle:hover {
  color: var(--foreground);
}

.staff-split-outer .nav-item--idle:hover::before {
  opacity: 1;
}

.staff-split-outer .nav-item--idle:hover .nav-item__icon {
  color: var(--foreground);
}

.staff-split-outer .nav-item__label {
  position: relative;
  z-index: 1;
}

.staff-split-outer .nav-item__icon--trailing {
  font-size: 0.75rem;
  opacity: 0.35;
  transition: opacity 120ms ease;
  position: relative;
  z-index: 1;
}

.staff-split-outer .nav-item--idle:hover .nav-item__icon--trailing {
  opacity: 0.65;
}

.staff-split-outer .nav-item--active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  font-weight: 600;
  border-radius: var(--sidebar-item-r);
}

.staff-split-outer .nav-item--active .nav-item__icon  {
  color: var(--foreground);
}

.staff-split-outer .nav-item--active .nav-item__label {
  color: inherit;
  position: relative;
  z-index: 1;
}

#staff-main-content {
  transition: opacity 150ms ease;
}

.dev-hud-user {
  position: relative;
}

.dev-hud-avatar {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 140ms ease;
}

.dev-hud-user button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.dev-hud-user button[aria-expanded="true"] .dev-hud-avatar,
    .dev-hud-user:hover .dev-hud-avatar {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.dev-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  transition: background-color 140ms ease, border-color 140ms ease;
}

.dev-menu-btn:hover {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

@media (min-width: 1024px) {
  .dev-menu-btn {
    display: none;
  }
}

.dev-auth-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color 140ms ease;
}

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

.dev-btn-primary--sm {
  min-height: 2.15rem;
  padding: 0 0.9rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

.dev-shell__body {
  padding-top: 3.75rem;
}

.dev-sidebar {
  top: 3.75rem;
  height: calc(100vh - 3.75rem);
}

.dev-page-head {
  margin-bottom: 1.75rem;
}

.dev-page-head__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .dev-page-head {
    margin-bottom: 2rem;
  }

  .dev-page-head__row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.dev-page-head__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--foreground);
}

.dev-page-head__lead {
  margin: 0;
  max-width: 36rem;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 640px) {
  .dev-page-head__lead {
    font-size: 1.05rem;
  }
}

.dev-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dev-header,
    .dev-footer,
    .dev-sidebar,
    .dev-sidebar *,
    #mobileSidebar,
    #mobileSidebar * {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.dev-sidebar input,
    .dev-sidebar textarea,
    .dev-sidebar code,
    .dev-sidebar pre,
    #mobileSidebar input,
    #mobileSidebar textarea,
    #mobileSidebar code,
    #mobileSidebar pre {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
}

.dev-nav-group--auth {
  gap: 0.5rem;
}

.dev-nav-link--danger {
  color: #dc2626;
}

.dark .dev-nav-link--danger {
  color: #f87171;
}

.dev-nav-link--danger:hover {
  background: color-mix(in srgb, #dc2626 8%, transparent);
  color: #b91c1c;
}

.dev-nav-account {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem 0.625rem;
}

.dev-nav-account__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.dev-nav-account__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.dev-nav-account__name,
    .dev-nav-account__handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-nav-account__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.dev-nav-account__handle {
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.dev-shell .doc_content {
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dev-shell .doc_content h1,
    .dev-shell .doc_content h2,
    .dev-shell .doc_content h3,
    .dev-shell .doc_content h4,
    .dev-shell .doc_content h5 {
  font-family: Inter, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: var(--foreground);
  font-weight: 600;
  margin-top: 0;
}

.dev-shell .doc_content h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 0.75rem;
}

.dev-shell .doc_content h1 + p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 40rem;
}

.dev-shell .doc_content h2 {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: 1rem;
}

.dev-shell .doc_content h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  margin-bottom: 0.875rem;
}

.dev-shell .doc_content h4 {
  margin: 1.25rem 0 0.7rem;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.dev-shell .doc_content h5 {
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-bottom: 0.65rem;
}

.dev-shell .doc_content p {
  color: var(--ink-muted);
  line-height: 1.65;
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
}

.dev-shell .doc_content p:last-child {
  margin-bottom: 0;
}

.dev-shell .doc_content ul,
    .dev-shell .doc_content ol {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.dev-shell .doc_content ul:last-child,
    .dev-shell .doc_content ol:last-child {
  margin-bottom: 0;
}

.dev-shell .doc_content li {
  margin: 0.35rem 0;
}

.dev-shell .doc_content strong {
  color: var(--foreground);
  font-weight: 600;
}

.dev-shell .doc_content ul li::marker,
    .dev-shell .doc_content ol li::marker {
  color: var(--ink-muted);
}

.dev-shell .doc_content a:not([class*="dev-"]):not(.copy-button) {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--foreground) 32%, transparent);
  transition: text-decoration-color 140ms ease;
}

.dev-shell .doc_content a:not([class*="dev-"]):not(.copy-button):hover {
  text-decoration-color: var(--foreground);
}

.dev-shell .doc_content code:not(pre code) {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  color: var(--foreground);
  padding: 0.12rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.84em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
}

.dev-shell .doc_content .code-block-wrapper {
  margin: 0 0 1rem;
}

.dev-shell .doc_content .custom-table,
    .dev-shell .doc_content .overflow-x-auto:has(.custom-table) {
  margin-bottom: 0.25rem;
}

.dev-shell .doc_content .scroll-mt-24 {
  scroll-margin-top: 5.25rem;
}

pre {
  overflow: visible;
  max-height: none;
}

pre code {
  background: transparent;
  padding: 0 !important;
}

.code-block-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.code-block-wrapper pre {
  margin: 0;
  border-radius: 0.75rem;
  padding: 0;
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border);
  overflow: hidden;
  max-height: none;
  display: flex;
  flex-direction: column;
  min-width: 100%;
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--foreground) 3%, var(--surface-subtle));
  border-bottom: 1px solid var(--border);
  border-radius: 0.75rem 0.75rem 0 0;
}

/* step timeline - 16.07.2026 18:40 */

.dev-shell .doc_content .relative .flex.items-start .flex-shrink-0 > div {
  background: var(--foreground);
  color: var(--background);
  box-shadow: none;
}

.dev-shell .doc_content .relative:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -1.5rem;
  width: 1px;
  background: var(--border);
  z-index: 0;
}

@media (min-width: 640px) {
  .dev-shell .doc_content .relative:not(:last-child)::after {
    left: 1.5rem;
  }
}

/* prism default theme artiklari (operator bg, text-shadow) - 16.07.2026 18:30 */

.code-block-wrapper code[class*="language-"],
    .code-block-wrapper pre[class*="language-"],
    .code-block-wrapper code[class*="language-"] *,
    .code-block-wrapper pre[class*="language-"] * {
  text-shadow: none !important;
}

.code-block-wrapper .token {
  background: none !important;
  background-color: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.code-language-label {
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: Inter, Arial, sans-serif;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
  font-weight: 500;
  font-family: Inter, Arial, sans-serif;
}

.copy-button:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.copy-button:active {
  background: var(--border);
}

.copy-button.copied {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.code-block-content {
  padding: 0;
  background: var(--surface-subtle);
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.code-block-content-wrapper {
  display: flex;
  align-items: stretch;
}

.code-line-numbers {
  padding: 1rem 0.875rem 1rem 0.75rem;
  background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: right;
  min-width: 2.75rem;
  white-space: pre;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.code-block-content code {
  display: block;
  padding: 1rem 1.25rem 1rem 1rem !important;
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: transparent !important;
  flex: 1;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

.code-block-wrapper pre code {
  color: var(--foreground);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.code-block-wrapper pre[class*="language-"] {
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border);
}

.code-block-wrapper pre[class*="language-"] code {
  color: var(--foreground);
  background: transparent !important;
}

.code-block-wrapper .token.comment,
    .code-block-wrapper .token.prolog,
    .code-block-wrapper .token.doctype,
    .code-block-wrapper .token.cdata {
  color: var(--ink-muted);
}

.code-block-wrapper .token.punctuation,
    .code-block-wrapper .token.operator,
    .code-block-wrapper .token.entity,
    .code-block-wrapper .token.url {
  color: var(--ink-muted);
}


    .code-block-wrapper .token.\!url {
  color: var(--ink-muted) !important;
}

.code-block-wrapper .token.property,
    .code-block-wrapper .token.tag,
    .code-block-wrapper .token.boolean,
    .code-block-wrapper .token.number,
    .code-block-wrapper .token.constant,
    .code-block-wrapper .token.symbol,
    .code-block-wrapper .token.deleted {
  color: #dc2626;
}

.code-block-wrapper .token.selector,
    .code-block-wrapper .token.attr-name,
    .code-block-wrapper .token.string,
    .code-block-wrapper .token.char,
    .code-block-wrapper .token.builtin,
    .code-block-wrapper .token.inserted {
  color: #059669;
}


    .code-block-wrapper .token.\!inserted {
  color: #059669 !important;
}

.code-block-wrapper .token.atrule,
    .code-block-wrapper .token.attr-value,
    .code-block-wrapper .token.keyword,
    .code-block-wrapper .token.function,
    .code-block-wrapper .token.class-name {
  color: #2563eb;
}

.code-block-wrapper .token.regex,
    .code-block-wrapper .token.important,
    .code-block-wrapper .token.variable {
  color: #ea580c;
}


    .code-block-wrapper .token.\!important {
  color: #ea580c !important;
}

.dark .code-block-wrapper .token.property,
    .dark .code-block-wrapper .token.tag,
    .dark .code-block-wrapper .token.boolean,
    .dark .code-block-wrapper .token.number,
    .dark .code-block-wrapper .token.constant,
    .dark .code-block-wrapper .token.symbol,
    .dark .code-block-wrapper .token.deleted {
  color: #f87171;
}

.dark .code-block-wrapper .token.selector,
    .dark .code-block-wrapper .token.attr-name,
    .dark .code-block-wrapper .token.string,
    .dark .code-block-wrapper .token.char,
    .dark .code-block-wrapper .token.builtin,
    .dark .code-block-wrapper .token.inserted {
  color: #34d399;
}


    .dark .code-block-wrapper .token.\!inserted {
  color: #34d399 !important;
}

.dark .code-block-wrapper .token.atrule,
    .dark .code-block-wrapper .token.attr-value,
    .dark .code-block-wrapper .token.keyword,
    .dark .code-block-wrapper .token.function,
    .dark .code-block-wrapper .token.class-name {
  color: #93c5fd;
}

.dark .code-block-wrapper .token.regex,
    .dark .code-block-wrapper .token.important,
    .dark .code-block-wrapper .token.variable {
  color: #fb923c;
}


    .dark .code-block-wrapper .token.\!important {
  color: #fb923c !important;
}

.code-block-wrapper .token.method,
    .code-block-wrapper .token.header-name,
    .code-block-wrapper .token.scheme,
    .code-block-wrapper .token.http-version {
  color: #2563eb;
}

.code-block-wrapper .token.key,
    .code-block-wrapper .token.attr-name {
  color: #0891b2;
}

.code-block-wrapper .token.\!key {
  color: #0891b2 !important;
}

.code-block-wrapper .token.value,
    .code-block-wrapper .token.attr-value,
    .code-block-wrapper .token.status-code {
  color: #059669;
}

.code-block-wrapper .token.\!value {
  color: #059669 !important;
}

.code-block-wrapper .token.path,
    .code-block-wrapper .token.host,
    .code-block-wrapper .token.request-target,
    .code-block-wrapper .token.url {
  color: #64748b;
}

.code-block-wrapper .token.\!path {
  color: #64748b !important;
}


    .code-block-wrapper .token.\!host {
  color: #64748b !important;
}


    .code-block-wrapper .token.\!url {
  color: #64748b !important;
}

.code-block-wrapper .token.query-delimiter,
    .code-block-wrapper .token.pair-delimiter,
    .code-block-wrapper .token.path-separator,
    .code-block-wrapper .token.scheme-delimiter,
    .code-block-wrapper .token.authority-delimiter {
  color: var(--ink-muted);
}

.dark .code-block-wrapper .token.method,
    .dark .code-block-wrapper .token.header-name,
    .dark .code-block-wrapper .token.scheme,
    .dark .code-block-wrapper .token.http-version {
  color: #93c5fd;
}

.dark .code-block-wrapper .token.key,
    .dark .code-block-wrapper .token.attr-name {
  color: #67e8f9;
}

.dark .code-block-wrapper .token.\!key {
  color: #67e8f9 !important;
}

.dark .code-block-wrapper .token.value,
    .dark .code-block-wrapper .token.attr-value,
    .dark .code-block-wrapper .token.status-code {
  color: #6ee7b7;
}

.dark .code-block-wrapper .token.\!value {
  color: #6ee7b7 !important;
}

.dark .code-block-wrapper .token.path,
    .dark .code-block-wrapper .token.host,
    .dark .code-block-wrapper .token.request-target,
    .dark .code-block-wrapper .token.url {
  color: #94a3b8;
}

.dark .code-block-wrapper .token.\!path {
  color: #94a3b8 !important;
}


    .dark .code-block-wrapper .token.\!host {
  color: #94a3b8 !important;
}


    .dark .code-block-wrapper .token.\!url {
  color: #94a3b8 !important;
}

/* presence status dots in docs — bg via inline hex - 16.07.2026 19:40 */

.dev-shell .dev-presence-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #26262c;
  vertical-align: middle;
}

.dev-shell .bg-surface.border-border {
  border-color: var(--border) !important;
}

/* tablo shell — kod bloklariyla ayni dil - 16.07.2026 18:32 */

.dev-shell .custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 0.8125rem;
  min-width: 100%;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.dev-shell .table-wrapper,
    .dev-shell div.overflow-x-auto:has(.custom-table),
    .dev-shell div.overflow-x-auto {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
}

@media (max-width: 640px) {
  .dev-shell .table-wrapper,
        .dev-shell div.overflow-x-auto:has(.custom-table),
        .dev-shell div.overflow-x-auto {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0;
  }

  .dev-shell .table-wrapper .custom-table,
        .dev-shell div.overflow-x-auto:has(.custom-table) .custom-table,
        .dev-shell div.overflow-x-auto .custom-table {
    min-width: 560px;
  }
}

.dev-shell .custom-table thead {
  background: color-mix(in srgb, var(--foreground) 4%, var(--surface-subtle));
}

.dev-shell .custom-table thead tr {
  border-bottom: none !important;
  background: transparent !important;
}

.dev-shell .custom-table thead th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}

.dev-shell .custom-table thead tr.bg-ink-50,
    .dev-shell .custom-table thead tr.dark\:bg-surface-subtle,
    .dev-shell .custom-table thead tr.border-b-2 {
  background: transparent !important;
  border-bottom: none !important;
}

.dev-shell .custom-table tbody tr {
  border: none !important;
  background: transparent;
  transition: background-color 140ms ease;
}

.dev-shell .custom-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.dev-shell .custom-table tbody tr:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
}

.dev-shell .custom-table tbody tr.hover\:bg-ink-50\/50:hover,
    .dev-shell .custom-table tbody tr.dark\:hover\:bg-surface-subtle\/50:hover,
    .dev-shell .custom-table tbody tr.dark\:hover\:bg-surface-subtle:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent) !important;
}

.dev-shell .custom-table tbody td {
  padding: 0.8rem 1rem;
  color: var(--ink-muted);
  vertical-align: middle;
  border: none !important;
  line-height: 1.45;
  font-size: 0.8125rem;
}

.dev-shell .custom-table tbody td:first-child,
    .dev-shell .custom-table tbody td.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--foreground);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-ligatures: none;
}

/* tip / status chip — renkli, flat dark-safe - 16.07.2026 18:42 */

.dev-shell .custom-table td span.rounded,
    .dev-shell .custom-table td span.rounded-lg,
    .dev-shell .custom-table td span[class*="rounded"] {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  line-height: 1.3;
  text-transform: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* string / post — blue - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-blue-100 {
  background: color-mix(in srgb, #60a5fa 18%, var(--background)) !important;
  color: #93c5fd !important;
  border-color: color-mix(in srgb, #60a5fa 28%, transparent) !important;
}

/* yes / required / get — green - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-green-100 {
  background: color-mix(in srgb, #34d399 16%, var(--background)) !important;
  color: #6ee7b7 !important;
  border-color: color-mix(in srgb, #34d399 28%, transparent) !important;
}

/* number / boolean — violet - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-ink-100 {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

/* array / object — indigo - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-indigo-100 {
  background: color-mix(in srgb, #818cf8 16%, var(--background)) !important;
  color: #a5b4fc !important;
  border-color: color-mix(in srgb, #818cf8 28%, transparent) !important;
}

/* recommended / optional — amber - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-yellow-100,
    .dev-shell .custom-table td span.bg-amber-100 {
  background: color-mix(in srgb, #fbbf24 14%, var(--background)) !important;
  color: #fcd34d !important;
  border-color: color-mix(in srgb, #fbbf24 26%, transparent) !important;
}

/* no / muted — zinc - 16.07.2026 18:42 */

.dev-shell .custom-table td span.bg-gray-100 {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .custom-table td span.bg-red-100,
    .dev-shell .custom-table td span.bg-purple-100 {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}

.dark input[type="checkbox"]:not(:checked) {
  background-color: var(--surface-subtle);
  border-color: var(--border);
}

.dark input[type="checkbox"]:checked {
  background-color: var(--foreground);
  border-color: var(--foreground);
}

/* nokta grid — svg pattern, css gradient yok - 16.07.2026 18:05 */

.dev-main {
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23171717' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.dark .dev-main {
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.06'/%3E%3C/svg%3E");
}

.dev-eyebrow {
  margin: 0 0 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-eyebrow--tight {
  margin-bottom: 0.4rem;
}

.dev-hero__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--foreground);
}

.dev-hero__lead {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.dev-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.dev-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Inter, Arial, sans-serif;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.dev-btn-ghost:hover {
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
  background: var(--surface-subtle);
}

.dev-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 0.5rem;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Inter, Arial, sans-serif;
  border: 1px solid var(--foreground);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.dev-btn-primary:hover {
  opacity: 1;
}

.dev-panel {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
}

.dev-panel__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-panel__hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.dev-steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dev-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.dev-steps li > i {
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--foreground);
  opacity: 0.55;
}

.dev-steps li > span {
  min-width: 0;
}

.dev-steps a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .dev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
  }

  .dev-panel {
    padding: 1.5rem 1.6rem;
  }
}

.dev-card {
  position: relative;
  display: block;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.3rem 1.35rem;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.dev-card:hover {
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.dev-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: 0.95rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface-subtle);
  color: var(--foreground);
  font-size: 1.05rem;
}

.dev-card__title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-card__desc {
  margin: 0;
  padding-right: 1.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.dev-card__go {
  position: absolute;
  right: 1.05rem;
  bottom: 1.05rem;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.dev-card:hover .dev-card__go {
  opacity: 1;
  transform: translateX(0);
  color: var(--foreground);
}

/* nokta grid koyu chrome uzerine (header/sidebar her zaman dark) - 16.07.2026 18:08 */

.dev-sidebar {
  border-right: 1px solid var(--border);
  background-color: #0f0f13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

.dev-sidebar__head,
    .dev-drawer__head {
  padding: 1rem 1rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.dev-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dev-sidebar__kicker,
    .dev-drawer__kicker {
  margin: 0 0 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-sidebar__title,
    .dev-drawer__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.dev-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  background: var(--surface-subtle);
  color: var(--ink-muted);
  transition: color 140ms ease, border-color 140ms ease;
}

.dev-drawer__close:hover {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
}

/* nav stack — tek spacing sistemi - 16.07.2026 17:40 */

.dev-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
}

.dev-nav-item {
  min-width: 0;
}

.dev-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.dev-nav-link > span:not(.dev-nav-caret) {
  flex: 1;
  min-width: 0;
}

.dev-nav-link i:first-child {
  width: 1rem;
  flex-shrink: 0;
  font-size: 0.9375rem;
  line-height: 1;
  text-align: center;
  color: inherit;
}

.dev-nav-link:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  color: var(--foreground);
}

.dev-nav-item.active > .dev-nav-link,
    a.dev-nav-link.active {
  background: var(--surface-subtle);
  color: var(--foreground);
  font-weight: 600;
}

.dev-nav-item.\!active > .dev-nav-link,
    a.dev-nav-link.\!active {
  background: var(--surface-subtle) !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.dev-nav-caret {
  flex-shrink: 0;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1;
  opacity: 0.65;
  transition: transform 160ms ease;
}

.dev-nav-soon {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--surface-subtle);
}

.dev-nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.125rem 0 0.25rem;
}

.dev-nav-sublink {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0.3125rem 0.625rem 0.3125rem 1.75rem;
  border-radius: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 140ms ease, color 140ms ease;
}

.dev-nav-sublink:hover {
  background: var(--surface-subtle);
  color: var(--foreground);
}

.dev-nav-sublink.section-active {
  color: var(--foreground);
  font-weight: 600;
  background: var(--surface-subtle);
}

.dev-nav-section {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0.625rem;
  margin: 0 0 0.375rem;
}

.dev-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.dev-shell {
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, Arial, sans-serif;
  color-scheme: dark;
}

.dark .dev-shell {
  background: var(--background);
}

/* koyu chrome: header + sidebar (light/dark ayni) - 16.07.2026 18:08 */

.dev-header,
    .dev-sidebar,
    #mobileSidebar {
  background-color: #0f0f13;
  color: #e4e4e7;
  --background: #0f0f13;
  --surface: #0f0f13;
  --surface-subtle: #17171c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --ink-400: #a1a1aa;
  --ink-500: #a1a1aa;
  --ink-600: #d4d4d8;
  --ink-700: #e4e4e7;
  --ink-900: #ffffff;
  --border: #26262c;
  --brand-50: #0f0f13;
  --brand-100: #17171c;
  --brand-200: #26262c;
  --brand-300: #3f3f46;
  --brand-400: #71717a;
  --brand-500: #a1a1aa;
  --brand-600: #e4e4e7;
  --brand-700: #f4f4f5;
  --brand-800: #fafafa;
  --brand-900: #ffffff;
}

.dev-header {
  height: 3.75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.dev-header__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.dev-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  padding: 0 0.85rem;
}

@media (min-width: 640px) {
  .dev-header__inner {
    padding: 0 1.25rem;
  }
}

.dev-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  text-decoration: none;
}

.dev-brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  /* koyu chrome ile ayni dil — beyaz mark - 16.07.2026 18:20 */
  background: #1c1c22;
  border: 1px solid #3f3f46;
  border-radius: 0.5rem;
  overflow: hidden;
}

.dev-brand__mark img {
  width: 1.55rem;
  height: 1.55rem;
  -o-object-fit: contain;
     object-fit: contain;
  filter: none;
}

.dev-brand__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.12rem;
}

.dev-brand__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.dev-brand__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--foreground);
}

.dev-brand__meta {
  margin-top: 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-header__mid {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .dev-header__mid {
    display: flex;
  }
}

.dev-header__path {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.dev-header__path em {
  font-style: normal;
  color: var(--foreground);
}

.dev-header__end {
  display: none;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dev-header__end {
    display: flex;
  }
}

.dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dev-chip__dot {
  width: 0.35rem;
  height: 0.35rem;
  background: var(--foreground);
  animation: dev-chip-pulse 1.6s ease-in-out infinite;
}

@keyframes dev-chip-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

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

.dev-hud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  transition: background-color 140ms ease, border-color 140ms ease;
  cursor: pointer;
}

.dev-hud-btn:hover,
    .dev-hud-btn[aria-expanded="true"] {
  background: var(--surface-subtle);
  border-color: color-mix(in srgb, var(--foreground) 32%, transparent);
}

.dev-hud-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* brand — koyu chrome ile entegre aydinlik mark - 16.07.2026 18:16 */

.dev-brand {
  transition: opacity 160ms ease;
}

.dev-brand:hover .dev-brand__mark {
  border-color: #71717a;
  background: #26262c;
}

.dev-brand:hover .dev-brand__name {
  color: #ffffff;
}

.dev-brand__mark {
  background: #1c1c22;
  border: 1px solid #3f3f46;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.dev-brand__mark img {
  filter: none;
  transition: transform 160ms ease;
}

.dev-brand:hover .dev-brand__mark img {
  transform: scale(1.04);
}

/* chip live — soft zinc pulse - 16.07.2026 18:16 */

.dev-chip {
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.dev-chip:hover {
  border-color: color-mix(in srgb, var(--foreground) 36%, transparent);
  color: var(--foreground);
  background: var(--surface-subtle);
}

.dev-chip__dot {
  border-radius: 1px;
}

/* hud btn active press - 16.07.2026 18:16 */

.dev-hud-btn:active,
    .dev-menu-btn:active {
  transform: translateY(1px);
}

/* primary / ghost refined motion - 16.07.2026 18:16 */

.dev-btn-primary,
    .dev-btn-ghost {
  position: relative;
  letter-spacing: -0.01em;
  transition:
            background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
            border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
            color 160ms cubic-bezier(0.4, 0, 0.2, 1),
            transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dev-btn-primary:hover {
  opacity: 1;
  background: var(--background);
  color: var(--foreground);
  transform: translateY(-1px);
}

.dev-btn-primary:active,
    .dev-btn-ghost:active {
  transform: translateY(0);
}

.dev-btn-ghost:hover {
  border-color: color-mix(in srgb, var(--foreground) 40%, transparent);
  background: color-mix(in srgb, var(--foreground) 4.5%, var(--background));
  transform: translateY(-1px);
}

.dev-btn-primary:focus-visible,
    .dev-btn-ghost:focus-visible,
    .dev-hud-btn:focus-visible,
    .dev-menu-btn:focus-visible,
    .dev-card:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

/* cards — surface lift + icon invert - 16.07.2026 18:20 */

.dev-card {
  background: color-mix(in srgb, var(--foreground) 2.2%, var(--background));
  transition:
            border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
            background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
            transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dev-card:hover {
  background: color-mix(in srgb, var(--foreground) 5%, var(--background));
  border-color: color-mix(in srgb, var(--foreground) 38%, transparent);
}

.dev-card__icon {
  transition:
            background-color 180ms ease,
            color 180ms ease,
            border-color 180ms ease;
}

.dev-card:hover .dev-card__icon {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.dev-card__title {
  transition: letter-spacing 180ms ease;
}

.dev-card:hover .dev-card__title {
  letter-spacing: -0.01em;
}

.dev-card__go {
  transition:
            opacity 180ms ease,
            transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
            color 180ms ease;
}

.dev-card:hover .dev-card__go {
  transform: translateX(2px);
}

/* panels — quiet hover - 16.07.2026 18:20 */

.dev-panel {
  position: relative;
  background: color-mix(in srgb, var(--foreground) 1.6%, var(--background));
  transition: border-color 180ms ease, background-color 180ms ease;
}

.dev-panel:hover {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
}

@media (min-width: 1024px) {
  .dev-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* hero accent + mobile overflow - 16.07.2026 18:16 */

.dev-hero {
  position: relative;
  padding-top: 0.25rem;
}

.dev-hero::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1.1rem;
  background: var(--foreground);
}

@media (max-width: 640px) {
  main.dev-main, main .doc_content {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  .code-block-wrapper, .table-wrapper, div.overflow-x-auto:has(.custom-table) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dev-brand__mark img,
        .dev-btn-primary,
        .dev-btn-ghost,
        .dev-card,
        .dev-card__icon,
        .dev-card__go {
    transition: none;
    transform: none;
  }
}

/* flat sections — nested card yok - 16.07.2026 18:55 */

.dev-shell .doc_content .dev-section,
    .dev-shell .doc_content .bg-surface.rounded-xl,
    .dev-shell .doc_content .bg-surface.rounded-2xl,
    .dev-shell .doc_content .bg-surface.border,
    .dev-shell .doc_content .bg-surface.border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.dev-shell .doc_content .dev-section:last-child,
    .dev-shell .doc_content > .space-y-5 > .bg-surface:last-child,
    .dev-shell .doc_content > .space-y-6 > .bg-surface:last-child,
    .dev-shell .doc_content > .space-y-8 > .bg-surface:last-child,
    .dev-shell .doc_content > .dev-doc-stack > .dev-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.dev-shell .doc_content .dev-doc-stack,
    .dev-shell .doc_content > .space-y-5,
    .dev-shell .doc_content > .space-y-6,
    .dev-shell .doc_content > .space-y-8,
    .dev-shell .doc_content > div.space-y-5,
    .dev-shell .doc_content > div.space-y-6,
    .dev-shell .doc_content > div.space-y-8 {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}

.dev-shell .doc_content > .space-y-5 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > .space-y-6 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > .space-y-8 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-5 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-6 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

/* section titles - 16.07.2026 18:55 */

.dev-shell .doc_content .dev-section > .flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}

.dev-shell .doc_content .dev-section > h2,
    .dev-shell .doc_content .bg-surface > h2,
    .dev-shell .doc_content .dev-section > h3,
    .dev-shell .doc_content .bg-surface > h3,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}

.dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

.dev-shell .doc_content .dev-section__lead {
  margin: -0.35rem 0 1.15rem;
  max-width: 40rem;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.dev-shell .doc_content .dev-callout {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.dev-shell .doc_content .dev-callout strong {
  color: var(--foreground);
}

/* method / type / status chips — renkli - 16.07.2026 18:42 */

.dev-shell .doc_content span.bg-green-100,
    .dev-shell .doc_content span.bg-blue-100,
    .dev-shell .doc_content span.bg-amber-100,
    .dev-shell .doc_content span.bg-yellow-100,
    .dev-shell .doc_content span.bg-red-100,
    .dev-shell .doc_content span.bg-purple-100,
    .dev-shell .doc_content span.bg-indigo-100,
    .dev-shell .doc_content span.bg-ink-100,
    .dev-shell .doc_content span.bg-gray-100 {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dev-shell .doc_content span.bg-blue-100 {
  background: color-mix(in srgb, #60a5fa 18%, var(--background)) !important;
  color: #93c5fd !important;
  border-color: color-mix(in srgb, #60a5fa 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-green-100 {
  background: color-mix(in srgb, #34d399 16%, var(--background)) !important;
  color: #6ee7b7 !important;
  border-color: color-mix(in srgb, #34d399 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-ink-100 {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-indigo-100 {
  background: color-mix(in srgb, #818cf8 16%, var(--background)) !important;
  color: #a5b4fc !important;
  border-color: color-mix(in srgb, #818cf8 28%, transparent) !important;
}

.dev-shell .doc_content span.bg-yellow-100,
    .dev-shell .doc_content span.bg-amber-100 {
  background: color-mix(in srgb, #fbbf24 14%, var(--background)) !important;
  color: #fcd34d !important;
  border-color: color-mix(in srgb, #fbbf24 26%, transparent) !important;
}

.dev-shell .doc_content span.bg-gray-100 {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .doc_content span.bg-red-100,
    .dev-shell .doc_content span.bg-purple-100 {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}

/* callout boxes flatten - 16.07.2026 18:55 */

.dev-shell .doc_content .bg-amber-50,
    .dev-shell .doc_content .bg-blue-50,
    .dev-shell .doc_content .bg-green-50,
    .dev-shell .doc_content .bg-red-50 {
  background: color-mix(in srgb, var(--foreground) 3.5%, var(--background)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  color: var(--ink-muted) !important;
}

.dev-shell .doc_content .border-l-4 {
  border-left-width: 2px !important;
  border-left-color: var(--foreground) !important;
  padding-left: 1rem !important;
  margin: 0.75rem 0;
}

.dev-shell .doc_content ul.space-y-2,
    .dev-shell .doc_content ol.space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.dev-shell .doc_content ul.space-y-2 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content ol.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

.dev-shell .doc_content ul.space-y-2 > li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  line-height: 1.5;
}

.dev-shell .doc_content ul.space-y-2 > li > i {
  margin: 0.15rem 0 0 !important;
  color: var(--foreground);
  opacity: 0.75;
  flex-shrink: 0;
}

.dev-shell .doc_content ol.list-decimal {
  padding-left: 1.25rem;
  list-style: decimal;
}

.dev-shell .doc_content > .dev-page-head {
  margin-bottom: 1.75rem;
}

.dev-shell .doc_content > .dev-hero {
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .dev-shell .doc_content > .dev-page-head {
    margin-bottom: 2rem;
  }

  .dev-shell .doc_content > .dev-hero {
    margin-bottom: 2.5rem;
  }
}

.dev-shell .doc_content > .dev-grid,
    .dev-shell .doc_content > .dev-panel {
  margin-bottom: 1.15rem;
}

.dev-shell .doc_content > .dev-panel:last-child,
    .dev-shell .doc_content > .dev-grid:last-child {
  margin-bottom: 0;
}

/* dis body>main flex-1 — shell parenti doldurup footer'i alta iter - 16.07.2026 19:55 */

.dev-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100vh;
}

.dev-shell__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.dev-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.dev-main > .doc_content {
  flex: 1 1 auto;
}

.dev-footer {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: #0f0f13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e4e4e7' fill-opacity='0.045'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  color: #e4e4e7;
  border-top: 1px solid #26262c;
  --background: #0f0f13;
  --surface-subtle: #17171c;
  --foreground: #e4e4e7;
  --ink-muted: #a1a1aa;
  --border: #26262c;
}

.dev-footer__inner {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 1.35rem;
}

@media (min-width: 640px) {
  .dev-footer__inner {
    padding: 2rem 1.5rem 1.5rem;
  }
}

.dev-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .dev-footer__grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 0.7fr));
    gap: 2rem;
    align-items: start;
  }
}

.dev-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.dev-footer__blurb {
  margin: 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #a1a1aa;
}

.dev-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.dev-footer__label {
  margin: 0 0 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #71717a;
}

.dev-footer__link {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 140ms ease;
}

.dev-footer__link:hover {
  color: #fafafa;
}

.dev-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #26262c;
  background: #17171c;
}

@media (min-width: 768px) {
  .dev-footer__base {
    flex-direction: row;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.dev-footer__copy {
  font-size: 0.75rem;
  color: #71717a;
}

.dev-footer__social {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dev-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid #26262c;
  border-radius: 0.5rem;
  background: #0f0f13;
  color: #a1a1aa;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}

.dev-footer__social-btn i {
  font-size: 1.05rem;
  line-height: 1;
}

.dev-footer__social-btn:hover {
  color: #e4e4e7;
  border-color: #3f3f46;
}

/* custom scroll — koyu hud; sayfa + sidebar + kod/tablo - 16.07.2026 20:05 */

html:has(.dev-shell) {
  --cengel-scroll-size: 6px;
  --cengel-scroll-size-thin: 5px;
  --cengel-scroll-track: transparent;
  --cengel-scroll-thumb: #3f3f46;
  --cengel-scroll-thumb-hover: #71717a;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

html:has(.dev-shell)::-webkit-scrollbar-track {
  background: transparent;
}

html:has(.dev-shell)::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

html:has(.dev-shell)::-webkit-scrollbar-thumb:hover {
  background-color: #71717a;
}

html:has(.dev-shell)::-webkit-scrollbar-corner {
  background: transparent;
}

.dev-sidebar,
    #mobileSidebar,
    .dev-shell .code-block-wrapper,
    .dev-shell div.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}

.dev-sidebar::-webkit-scrollbar,
    #mobileSidebar::-webkit-scrollbar,
    .dev-shell .code-block-wrapper::-webkit-scrollbar,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.dev-sidebar::-webkit-scrollbar-track,
    #mobileSidebar::-webkit-scrollbar-track,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-track,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-track {
  background: transparent;
}

.dev-sidebar::-webkit-scrollbar-thumb,
    #mobileSidebar::-webkit-scrollbar-thumb,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-thumb,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.dev-sidebar::-webkit-scrollbar-thumb:hover,
    #mobileSidebar::-webkit-scrollbar-thumb:hover,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-thumb:hover,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background-color: #71717a;
}

.dev-sidebar::-webkit-scrollbar-corner,
    #mobileSidebar::-webkit-scrollbar-corner,
    .dev-shell .code-block-wrapper::-webkit-scrollbar-corner,
    .dev-shell div.overflow-x-auto::-webkit-scrollbar-corner {
  background: transparent;
}

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

.pointer-events-none {
  pointer-events:       none;
}

.pointer-events-auto {
  pointer-events:       auto;
}

.\!visible {
  visibility:       visible !important;
}

.visible {
  visibility:       visible;
}

.invisible {
  visibility:       hidden;
}

.collapse {
  visibility:       collapse;
}

.static {
  position:       static;
}

.fixed {
  position:       fixed;
}

.absolute {
  position:       absolute;
}

.relative {
  position:       relative;
}

.sticky {
  position:       sticky;
}

.inset-0 {
  inset:       0px;
}

.inset-x-0 {
  left:       0px;
  right:       0px;
}

.inset-y-0 {
  top:       0px;
  bottom:       0px;
}

.-right-1 {
  right:       -0.25rem;
}

.-top-1 {
  top:       -0.25rem;
}

.bottom-0 {
  bottom:       0px;
}

.bottom-6 {
  bottom:       1.5rem;
}

.left-0 {
  left:       0px;
}

.left-1\/2 {
  left:       50%;
}

.left-3 {
  left:       0.75rem;
}

.left-4 {
  left:       1rem;
}

.right-0 {
  right:       0px;
}

.right-4 {
  right:       1rem;
}

.right-\[15px\] {
  right:       15px;
}

.top-0 {
  top:       0px;
}

.top-1\/2 {
  top:       50%;
}

.top-24 {
  top:       6rem;
}

.top-4 {
  top:       1rem;
}

.top-\[15px\] {
  top:       15px;
}

.top-full {
  top:       100%;
}

.isolate {
  isolation:       isolate;
}

.z-0 {
  z-index:       0;
}

.z-10 {
  z-index:       10;
}

.z-30 {
  z-index:       30;
}

.z-40 {
  z-index:       40;
}

.z-50 {
  z-index:       50;
}

.z-\[10000\] {
  z-index:       10000;
}

.z-\[10001\] {
  z-index:       10001;
}

.z-\[10002\] {
  z-index:       10002;
}

.z-\[10003\] {
  z-index:       10003;
}

.z-\[10050\] {
  z-index:       10050;
}

.z-\[10051\] {
  z-index:       10051;
}

.z-\[10052\] {
  z-index:       10052;
}

.z-\[10055\] {
  z-index:       10055;
}

.z-\[10060\] {
  z-index:       10060;
}

.z-\[10070\] {
  z-index:       10070;
}

.z-\[10080\] {
  z-index:       10080;
}

.z-\[100\] {
  z-index:       100;
}

.z-\[110\] {
  z-index:       110;
}

.z-\[12000\] {
  z-index:       12000;
}

.z-\[13000\] {
  z-index:       13000;
}

.z-\[130\] {
  z-index:       130;
}

.z-\[1\] {
  z-index:       1;
}

.z-\[200\] {
  z-index:       200;
}

.z-\[2\] {
  z-index:       2;
}

.z-\[60\] {
  z-index:       60;
}

.z-\[70\] {
  z-index:       70;
}

.z-\[9998\] {
  z-index:       9998;
}

.z-\[9999\] {
  z-index:       9999;
}

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

.col-start-2 {
  grid-column-start:       2;
}

.row-span-2 {
  grid-row:       span 2 / span 2;
}

.-m-2 {
  margin:       -0.5rem;
}

.m-0 {
  margin:       0px;
}

.m-6 {
  margin:       1.5rem;
}

.-mx-6 {
  margin-left:       -1.5rem;
  margin-right:       -1.5rem;
}

.mx-1 {
  margin-left:       0.25rem;
  margin-right:       0.25rem;
}

.mx-1\.5 {
  margin-left:       0.375rem;
  margin-right:       0.375rem;
}

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

.mx-3 {
  margin-left:       0.75rem;
  margin-right:       0.75rem;
}

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

.my-2 {
  margin-top:       0.5rem;
  margin-bottom:       0.5rem;
}

.my-8 {
  margin-top:       2rem;
  margin-bottom:       2rem;
}

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

.\!mt-2 {
  margin-top:       0.5rem !important;
}

.-mb-px {
  margin-bottom:       -1px;
}

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

.-mr-1\.5 {
  margin-right:       -0.375rem;
}

.-mt-0\.5 {
  margin-top:       -0.125rem;
}

.-mt-16 {
  margin-top:       -4rem;
}

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

.-mt-\[44px\] {
  margin-top:       -44px;
}

.mb-0 {
  margin-bottom:       0px;
}

.mb-0\.5 {
  margin-bottom:       0.125rem;
}

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

.mb-1\.5 {
  margin-bottom:       0.375rem;
}

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

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

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

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

.mb-5 {
  margin-bottom:       1.25rem;
}

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

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

.ml-0 {
  margin-left:       0px;
}

.ml-0\.5 {
  margin-left:       0.125rem;
}

.ml-1 {
  margin-left:       0.25rem;
}

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

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

.ml-4 {
  margin-left:       1rem;
}

.ml-\[22px\] {
  margin-left:       22px;
}

.ml-auto {
  margin-left:       auto;
}

.mr-1 {
  margin-right:       0.25rem;
}

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

.mr-3 {
  margin-right:       0.75rem;
}

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

.mt-0\.5 {
  margin-top:       0.125rem;
}

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

.mt-1\.5 {
  margin-top:       0.375rem;
}

.mt-2 {
  margin-top:       0.5rem;
}

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

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

.mt-5 {
  margin-top:       1.25rem;
}

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

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

.mt-auto {
  margin-top:       auto;
}

.mt-px {
  margin-top:       1px;
}

.box-border {
  box-sizing:       border-box;
}

.line-clamp-2 {
  overflow:       hidden;
  display:       -webkit-box;
  -webkit-box-orient:       vertical;
  -webkit-line-clamp:       2;
}

.line-clamp-3 {
  overflow:       hidden;
  display:       -webkit-box;
  -webkit-box-orient:       vertical;
  -webkit-line-clamp:       3;
}

.\!block {
  display:       block !important;
}

.block {
  display:       block;
}

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

.inline {
  display:       inline;
}

.flex {
  display:       flex;
}

.inline-flex {
  display:       inline-flex;
}

.table {
  display:       table;
}

.\!grid {
  display:       grid !important;
}

.grid {
  display:       grid;
}

.contents {
  display:       contents;
}

.\!hidden {
  display:       none !important;
}

.hidden {
  display:       none;
}

.aspect-square {
  aspect-ratio:       1 / 1;
}

.h-0\.5 {
  height:       0.125rem;
}

.h-1 {
  height:       0.25rem;
}

.h-1\.5 {
  height:       0.375rem;
}

.h-10 {
  height:       2.5rem;
}

.h-11 {
  height:       2.75rem;
}

.h-12 {
  height:       3rem;
}

.h-14 {
  height:       3.5rem;
}

.h-16 {
  height:       4rem;
}

.h-2 {
  height:       0.5rem;
}

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

.h-20 {
  height:       5rem;
}

.h-24 {
  height:       6rem;
}

.h-28 {
  height:       7rem;
}

.h-32 {
  height:       8rem;
}

.h-36 {
  height:       9rem;
}

.h-4 {
  height:       1rem;
}

.h-48 {
  height:       12rem;
}

.h-5 {
  height:       1.25rem;
}

.h-6 {
  height:       1.5rem;
}

.h-7 {
  height:       1.75rem;
}

.h-8 {
  height:       2rem;
}

.h-9 {
  height:       2.25rem;
}

.h-\[1\.1875rem\] {
  height:       1.1875rem;
}

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

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

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

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

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

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

.h-\[4\.5rem\] {
  height:       4.5rem;
}

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

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

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

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

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

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

.h-\[min\(700px\2c 85vh\)\] {
  height:       min(700px, 85vh);
}

.h-\[var\(--eco-header-h\)\] {
  height:       var(--eco-header-h);
}

.h-full {
  height:       100%;
}

.h-px {
  height:       1px;
}

.max-h-40 {
  max-height:       10rem;
}

.max-h-56 {
  max-height:       14rem;
}

.max-h-72 {
  max-height:       18rem;
}

.max-h-\[26px\] {
  max-height:       26px;
}

.max-h-\[400px\] {
  max-height:       400px;
}

.max-h-\[600px\] {
  max-height:       600px;
}

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

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

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

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

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

.max-h-\[min\(22rem\2c 70vh\)\] {
  max-height:       min(22rem, 70vh);
}

.max-h-\[min\(700px\2c 85vh\)\] {
  max-height:       min(700px, 85vh);
}

.min-h-0 {
  min-height:       0px;
}

.min-h-9 {
  min-height:       2.25rem;
}

.min-h-\[1\.25rem\] {
  min-height:       1.25rem;
}

.min-h-\[1\.75rem\] {
  min-height:       1.75rem;
}

.min-h-\[12rem\] {
  min-height:       12rem;
}

.min-h-\[1rem\] {
  min-height:       1rem;
}

.min-h-\[3\.5rem\] {
  min-height:       3.5rem;
}

.min-h-\[3rem\] {
  min-height:       3rem;
}

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

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

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

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

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

.min-h-\[4rem\] {
  min-height:       4rem;
}

.min-h-\[var\(--eco-header-h\)\] {
  min-height:       var(--eco-header-h);
}

.min-h-full {
  min-height:       100%;
}

.min-h-screen {
  min-height:       100vh;
}

.w-0 {
  width:       0px;
}

.w-1 {
  width:       0.25rem;
}

.w-10 {
  width:       2.5rem;
}

.w-11 {
  width:       2.75rem;
}

.w-12 {
  width:       3rem;
}

.w-14 {
  width:       3.5rem;
}

.w-16 {
  width:       4rem;
}

.w-2 {
  width:       0.5rem;
}

.w-20 {
  width:       5rem;
}

.w-24 {
  width:       6rem;
}

.w-28 {
  width:       7rem;
}

.w-36 {
  width:       9rem;
}

.w-4 {
  width:       1rem;
}

.w-48 {
  width:       12rem;
}

.w-5 {
  width:       1.25rem;
}

.w-52 {
  width:       13rem;
}

.w-6 {
  width:       1.5rem;
}

.w-7 {
  width:       1.75rem;
}

.w-72 {
  width:       18rem;
}

.w-8 {
  width:       2rem;
}

.w-80 {
  width:       20rem;
}

.w-9 {
  width:       2.25rem;
}

.w-\[1\.1875rem\] {
  width:       1.1875rem;
}

.w-\[13rem\] {
  width:       13rem;
}

.w-\[14rem\] {
  width:       14rem;
}

.w-\[15rem\] {
  width:       15rem;
}

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

.w-\[18rem\] {
  width:       18rem;
}

.w-\[20rem\] {
  width:       20rem;
}

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

.w-\[4\.5rem\] {
  width:       4.5rem;
}

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

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

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

.w-\[calc\(100\%-45px\)\] {
  width:       calc(100% - 45px);
}

.w-\[min\(100\%\2c 340px\)\] {
  width:       min(100%, 340px);
}

.w-\[min\(20rem\2c calc\(100vw-2rem\)\)\] {
  width:       min(20rem, calc(100vw - 2rem));
}

.w-\[min\(320px\2c calc\(100vw-1\.5rem\)\)\] {
  width:       min(320px, calc(100vw - 1.5rem));
}

.w-\[min\(360px\2c calc\(100vw-1\.5rem\)\)\] {
  width:       min(360px, calc(100vw - 1.5rem));
}

.w-\[min\(380px\2c calc\(100vw-1\.5rem\)\)\] {
  width:       min(380px, calc(100vw - 1.5rem));
}

.w-\[min\(400px\2c calc\(100vw-1\.5rem\)\)\] {
  width:       min(400px, calc(100vw - 1.5rem));
}

.w-\[var\(--space-sidebar-panel-w\)\] {
  width:       var(--space-sidebar-panel-w);
}

.w-auto {
  width:       auto;
}

.w-fit {
  width:       -moz-fit-content;
  width:       fit-content;
}

.w-full {
  width:       100%;
}

.min-w-0 {
  min-width:       0px;
}

.min-w-9 {
  min-width:       2.25rem;
}

.min-w-\[1\.1875rem\] {
  min-width:       1.1875rem;
}

.min-w-\[1\.5rem\] {
  min-width:       1.5rem;
}

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

.min-w-\[280px\] {
  min-width:       280px;
}

.min-w-\[300px\] {
  min-width:       300px;
}

.min-w-\[60px\] {
  min-width:       60px;
}

.min-w-\[88px\] {
  min-width:       88px;
}

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

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

.max-w-4xl {
  max-width:       56rem;
}

.max-w-5xl {
  max-width:       64rem;
}

.max-w-6xl {
  max-width:       1152px;
}

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

.max-w-\[14rem\] {
  max-width:       14rem;
}

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

.max-w-\[85vw\] {
  max-width:       85vw;
}

.max-w-\[calc\(100vw-1\.5rem\)\] {
  max-width:       calc(100vw - 1.5rem);
}

.max-w-\[var\(--account-split-main-content-max-w\)\] {
  max-width:       var(--account-split-main-content-max-w);
}

.max-w-\[var\(--account-split-main-content-max-w\2c 64\.25rem\)\] {
  max-width:       var(--account-split-main-content-max-w,64.25rem);
}

.max-w-full {
  max-width:       100%;
}

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

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

.max-w-sm {
  max-width:       24rem;
}

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

.max-w-xs {
  max-width:       20rem;
}

.flex-1 {
  flex:       1 1 0%;
}

.flex-shrink {
  flex-shrink:       1;
}

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

.shrink {
  flex-shrink:       1;
}

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

.flex-grow {
  flex-grow:       1;
}

.basis-0 {
  flex-basis:       0px;
}

.border-collapse {
  border-collapse:       collapse;
}

.origin-top {
  transform-origin:       top;
}

.origin-top-left {
  transform-origin:       top left;
}

.origin-top-right {
  transform-origin:       top right;
}

.-translate-x-1\/2 {
  --tw-translate-x:       -50%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x:       -100%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1 {
  --tw-translate-y:       -0.25rem;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y:       -50%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x:       0px;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x:       1.25rem;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x:       100%;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y:       0px;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y:       0.25rem;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate:       180deg;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-100 {
  --tw-scale-x:       1;
  --tw-scale-y:       1;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x:       .95;
  --tw-scale-y:       .95;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.97\] {
  --tw-scale-x:       0.97;
  --tw-scale-y:       0.97;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[0\.98\] {
  --tw-scale-x:       0.98;
  --tw-scale-y:       0.98;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity:       .5;
  }
}

.animate-pulse {
  animation:       pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform:       rotate(360deg);
  }
}

.animate-spin {
  animation:       spin 1s linear infinite;
}

.cursor-default {
  cursor:       default;
}

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

.cursor-pointer {
  cursor:       pointer;
}

.cursor-text {
  cursor:       text;
}

.touch-pan-y {
  --tw-pan-y:       pan-y;
  touch-action:       var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom);
}

.select-none {
  -webkit-user-select:       none;
     -moz-user-select:       none;
          user-select:       none;
}

.select-text {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.select-all {
  -webkit-user-select:       all;
     -moz-user-select:       all;
          user-select:       all;
}

.resize-none {
  resize:       none;
}

.resize {
  resize:       both;
}

.scroll-mt-24 {
  scroll-margin-top:       6rem;
}

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

.list-inside {
  list-style-position:       inside;
}

.list-decimal {
  list-style-type:       decimal;
}

.list-disc {
  list-style-type:       disc;
}

.list-none {
  list-style-type:       none;
}

.appearance-none {
  -webkit-appearance:       none;
     -moz-appearance:       none;
          appearance:       none;
}

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

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

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

.grid-cols-\[2rem_1fr\] {
  grid-template-columns:       2rem 1fr;
}

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

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

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

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

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

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

.items-baseline {
  align-items:       baseline;
}

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

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

.justify-center {
  justify-content:       center;
}

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

.gap-0 {
  gap:       0px;
}

.gap-0\.5 {
  gap:       0.125rem;
}

.gap-1 {
  gap:       0.25rem;
}

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

.gap-2 {
  gap:       0.5rem;
}

.gap-2\.5 {
  gap:       0.625rem;
}

.gap-3 {
  gap:       0.75rem;
}

.gap-4 {
  gap:       1rem;
}

.gap-5 {
  gap:       1.25rem;
}

.gap-6 {
  gap:       1.5rem;
}

.gap-8 {
  gap:       2rem;
}

.gap-\[0\.4375rem\] {
  gap:       0.4375rem;
}

.gap-\[0\.875rem\] {
  gap:       0.875rem;
}

.gap-\[1\.50rem\] {
  gap:       1.50rem;
}

.gap-\[11px\] {
  gap:       11px;
}

.gap-px {
  gap:       1px;
}

.gap-x-1\.5 {
  -moz-column-gap:       0.375rem;
       column-gap:       0.375rem;
}

.gap-x-3 {
  -moz-column-gap:       0.75rem;
       column-gap:       0.75rem;
}

.gap-x-4 {
  -moz-column-gap:       1rem;
       column-gap:       1rem;
}

.gap-y-0 {
  row-gap:       0px;
}

.gap-y-0\.5 {
  row-gap:       0.125rem;
}

.gap-y-2 {
  row-gap:       0.5rem;
}

.gap-y-4 {
  row-gap:       1rem;
}

.gap-y-5 {
  row-gap:       1.25rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse:       0;
  border-top-width:       calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:       calc(1px * var(--tw-divide-y-reverse));
}

.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color:       var(--border);
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity:       1;
  border-color:       rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self:       flex-start;
}

.self-center {
  align-self:       center;
}

.overflow-hidden {
  overflow:       hidden;
}

.overflow-visible {
  overflow:       visible;
}

.overflow-x-auto {
  overflow-x:       auto;
}

.overflow-y-auto {
  overflow-y:       auto;
}

.overflow-x-hidden {
  overflow-x:       hidden;
}

.overscroll-none {
  overscroll-behavior:       none;
}

.truncate {
  overflow:       hidden;
  text-overflow:       ellipsis;
  white-space:       nowrap;
}

.text-ellipsis {
  text-overflow:       ellipsis;
}

.whitespace-nowrap {
  white-space:       nowrap;
}

.whitespace-pre-wrap {
  white-space:       pre-wrap;
}

.text-wrap {
  text-wrap:       wrap;
}

.break-words {
  overflow-wrap:       break-word;
}

.break-all {
  word-break:       break-all;
}

.rounded {
  border-radius:       0.25rem;
}

.rounded-2xl {
  border-radius:       16px;
}

.rounded-3xl {
  border-radius:       24px;
}

.rounded-\[0\.75rem\] {
  border-radius:       0.75rem;
}

.rounded-\[1\.25rem\] {
  border-radius:       1.25rem;
}

.rounded-\[10px\] {
  border-radius:       10px;
}

.rounded-\[11px\] {
  border-radius:       11px;
}

.rounded-\[13px\] {
  border-radius:       13px;
}

.rounded-\[2rem\] {
  border-radius:       2rem;
}

.rounded-\[9px\] {
  border-radius:       9px;
}

.rounded-\[inherit\] {
  border-radius:       inherit;
}

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

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

.rounded-md {
  border-radius:       0.375rem;
}

.rounded-sm {
  border-radius:       0.125rem;
}

.rounded-xl {
  border-radius:       12px;
}

.rounded-t-3xl {
  border-top-left-radius:       24px;
  border-top-right-radius:       24px;
}

.rounded-t-\[2rem\] {
  border-top-left-radius:       2rem;
  border-top-right-radius:       2rem;
}

.border {
  border-width:       1px;
}

.border-0 {
  border-width:       0px;
}

.border-2 {
  border-width:       2px;
}

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

.border-\[3px\] {
  border-width:       3px;
}

.border-b {
  border-bottom-width:       1px;
}

.border-b-2 {
  border-bottom-width:       2px;
}

.border-l {
  border-left-width:       1px;
}

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

.border-r {
  border-right-width:       1px;
}

.border-t {
  border-top-width:       1px;
}

.border-dashed {
  border-style:       dashed;
}

.border-\[var\(--eco-header-border\)\] {
  border-color:       var(--eco-header-border);
}

.border-\[var\(--eco-products-border\)\] {
  border-color:       var(--eco-products-border);
}

.border-\[var\(--eco-search-border\)\] {
  border-color:       var(--eco-search-border);
}

.border-amber-200 {
  --tw-border-opacity:       1;
  border-color:       rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-amber-500\/20 {
  border-color:       rgb(245 158 11 / 0.2);
}

.border-amber-500\/30 {
  border-color:       rgb(245 158 11 / 0.3);
}

.border-background {
  border-color:       var(--background);
}

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

.border-border {
  border-color:       var(--border);
}

.border-brand-100 {
  border-color:       var(--brand-100);
}

.border-brand-500 {
  border-color:       var(--brand-500);
}

.border-brand-700 {
  border-color:       var(--brand-700);
}

.border-emerald-500\/20 {
  border-color:       rgb(16 185 129 / 0.2);
}

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

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

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

.border-green-200 {
  --tw-border-opacity:       1;
  border-color:       rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity:       1;
  border-color:       rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity:       1;
  border-color:       rgb(34 197 94 / var(--tw-border-opacity, 1));
}

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

.border-green-600 {
  --tw-border-opacity:       1;
  border-color:       rgb(22 163 74 / var(--tw-border-opacity, 1));
}

.border-ink {
  border-color:       var(--foreground);
}

.border-ink-900 {
  --tw-border-opacity:       1;
  border-color:       rgb(15 23 42 / var(--tw-border-opacity, 1));
}

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

.border-red-100 {
  --tw-border-opacity:       1;
  border-color:       rgb(254 226 226 / var(--tw-border-opacity, 1));
}

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

.border-red-300 {
  --tw-border-opacity:       1;
  border-color:       rgb(252 165 165 / var(--tw-border-opacity, 1));
}

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

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

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

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

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

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

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

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

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

.border-zinc-200\/60 {
  border-color:       rgb(228 228 231 / 0.6);
}

.border-t-ink {
  border-top-color:       var(--foreground);
}

.border-t-transparent {
  border-top-color:       transparent;
}

.border-t-white {
  --tw-border-opacity:       1;
  border-top-color:       rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#4c1753\] {
  --tw-bg-opacity:       1;
  background-color:       rgb(76 23 83 / var(--tw-bg-opacity, 1));
}

.bg-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_12\%\2c var\(--background\)\)\] {
  background-color:       color-mix(in srgb,var(--account-changes-accent) 12%,var(--background));
}

.bg-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_45\%\2c \#121212\)\] {
  background-color:       color-mix(in srgb,var(--account-changes-accent) 45%,#121212);
}

.bg-\[color-mix\(in_srgb\2c var\(--foreground\)_8\%\2c transparent\)\] {
  background-color:       color-mix(in srgb,var(--foreground) 8%,transparent);
}

.bg-\[var\(--account-split-main-bg\)\] {
  background-color:       var(--account-split-main-bg);
}

.bg-\[var\(--account-split-sidebar-bg\)\] {
  background-color:       var(--account-split-sidebar-bg);
}

.bg-\[var\(--av-bg\2c color-mix\(in_srgb\2c var\(--foreground\)_10\%\2c transparent\)\)\] {
  background-color:       var(--av-bg,color-mix(in srgb,var(--foreground) 10%,transparent));
}

.bg-\[var\(--eco-header-bg\)\] {
  background-color:       var(--eco-header-bg);
}

.bg-\[var\(--eco-products-bg\)\] {
  background-color:       var(--eco-products-bg);
}

.bg-\[var\(--eco-search-bg\)\] {
  background-color:       var(--eco-search-bg);
}

.bg-amber-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity:       1;
  background-color:       rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-amber-500 {
  --tw-bg-opacity:       1;
  background-color:       rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-amber-500\/10 {
  background-color:       rgb(245 158 11 / 0.1);
}

.bg-background {
  background-color:       var(--background);
}

.bg-black\/20 {
  background-color:       rgb(0 0 0 / 0.2);
}

.bg-black\/25 {
  background-color:       rgb(0 0 0 / 0.25);
}

.bg-black\/40 {
  background-color:       rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color:       rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color:       rgb(0 0 0 / 0.6);
}

.bg-blue-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

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

.bg-blue-500\/10 {
  background-color:       rgb(59 130 246 / 0.1);
}

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

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

.bg-border {
  background-color:       var(--border);
}

.bg-brand-100 {
  background-color:       var(--brand-100);
}

.bg-brand-50 {
  background-color:       var(--brand-50);
}

.bg-brand-500 {
  background-color:       var(--brand-500);
}

.bg-brand-600 {
  background-color:       var(--brand-600);
}

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

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

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

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

.bg-green-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity:       1;
  background-color:       rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity:       1;
  background-color:       rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/10 {
  background-color:       rgb(34 197 94 / 0.1);
}

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

.bg-green-600 {
  --tw-bg-opacity:       1;
  background-color:       rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-200 {
  --tw-bg-opacity:       1;
  background-color:       rgb(199 210 254 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity:       1;
  background-color:       rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-ink {
  background-color:       var(--foreground);
}

.bg-ink-500 {
  --tw-bg-opacity:       1;
  background-color:       rgb(100 116 139 / var(--tw-bg-opacity, 1));
}

.bg-ink-900 {
  --tw-bg-opacity:       1;
  background-color:       rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-ink-900\/20 {
  background-color:       rgb(15 23 42 / 0.2);
}

.bg-ink-900\/40 {
  background-color:       rgb(15 23 42 / 0.4);
}

.bg-ink-900\/50 {
  background-color:       rgb(15 23 42 / 0.5);
}

.bg-ink-900\/60 {
  background-color:       rgb(15 23 42 / 0.6);
}

.bg-orange-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

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

.bg-purple-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity:       1;
  background-color:       rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

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

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

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

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

.bg-red-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

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

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

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

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

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

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

.bg-red-900\/30 {
  background-color:       rgb(127 29 29 / 0.3);
}

.bg-surface {
  background-color:       var(--surface);
}

.bg-surface-subtle {
  background-color:       var(--surface-subtle);
}

.bg-teal-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-200 {
  --tw-bg-opacity:       1;
  background-color:       rgb(153 246 228 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color:       transparent;
}

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

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

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

.bg-yellow-100 {
  --tw-bg-opacity:       1;
  background-color:       rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-200 {
  --tw-bg-opacity:       1;
  background-color:       rgb(254 240 138 / var(--tw-bg-opacity, 1));
}

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

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

.bg-yellow-900\/30 {
  background-color:       rgb(113 63 18 / 0.3);
}

.bg-zinc-900\/55 {
  background-color:       rgb(24 24 27 / 0.55);
}

.bg-zinc-950\/45 {
  background-color:       rgb(9 9 11 / 0.45);
}

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

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

.from-blue-500 {
  --tw-gradient-from:       #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-brand-500 {
  --tw-gradient-from:       var(--brand-500) var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.from-red-500 {
  --tw-gradient-from:       #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.to-brand-600 {
  --tw-gradient-to:       var(--brand-600) var(--tw-gradient-to-position);
}

.to-green-600 {
  --tw-gradient-to:       #16a34a var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to:       #dc2626 var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to:       #fff var(--tw-gradient-to-position);
}

.object-contain {
  -o-object-fit:       contain;
     object-fit:       contain;
}

.object-cover {
  -o-object-fit:       cover;
     object-fit:       cover;
}

.p-0 {
  padding:       0px;
}

.p-1 {
  padding:       0.25rem;
}

.p-12 {
  padding:       3rem;
}

.p-2 {
  padding:       0.5rem;
}

.p-2\.5 {
  padding:       0.625rem;
}

.p-3 {
  padding:       0.75rem;
}

.p-3\.5 {
  padding:       0.875rem;
}

.p-4 {
  padding:       1rem;
}

.p-5 {
  padding:       1.25rem;
}

.p-6 {
  padding:       1.5rem;
}

.p-8 {
  padding:       2rem;
}

.p-\[var\(--account-split-inner-pad\)\] {
  padding:       var(--account-split-inner-pad);
}

.p-\[var\(--eco-header-pad\)\] {
  padding:       var(--eco-header-pad);
}

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

.px-0\.5 {
  padding-left:       0.125rem;
  padding-right:       0.125rem;
}

.px-1 {
  padding-left:       0.25rem;
  padding-right:       0.25rem;
}

.px-1\.5 {
  padding-left:       0.375rem;
  padding-right:       0.375rem;
}

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

.px-2\.5 {
  padding-left:       0.625rem;
  padding-right:       0.625rem;
}

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

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

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

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

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

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

.px-\[var\(--account-split-inner-pad-x\)\] {
  padding-left:       var(--account-split-inner-pad-x);
  padding-right:       var(--account-split-inner-pad-x);
}

.px-\[var\(--account-split-inner-pad-x\2c 1\.5rem\)\] {
  padding-left:       var(--account-split-inner-pad-x,1.5rem);
  padding-right:       var(--account-split-inner-pad-x,1.5rem);
}

.py-0\.5 {
  padding-top:       0.125rem;
  padding-bottom:       0.125rem;
}

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

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

.py-10 {
  padding-top:       2.5rem;
  padding-bottom:       2.5rem;
}

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

.py-16 {
  padding-top:       4rem;
  padding-bottom:       4rem;
}

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

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

.py-20 {
  padding-top:       5rem;
  padding-bottom:       5rem;
}

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

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

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

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

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

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

.pb-1 {
  padding-bottom:       0.25rem;
}

.pb-1\.5 {
  padding-bottom:       0.375rem;
}

.pb-10 {
  padding-bottom:       2.5rem;
}

.pb-2 {
  padding-bottom:       0.5rem;
}

.pb-20 {
  padding-bottom:       5rem;
}

.pb-3 {
  padding-bottom:       0.75rem;
}

.pb-4 {
  padding-bottom:       1rem;
}

.pb-5 {
  padding-bottom:       1.25rem;
}

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

.pb-8 {
  padding-bottom:       2rem;
}

.pb-\[1rem\] {
  padding-bottom:       1rem;
}

.pb-\[5px\] {
  padding-bottom:       5px;
}

.pb-\[6\.5rem\] {
  padding-bottom:       6.5rem;
}

.pb-\[calc\(5rem\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
  padding-bottom:       calc(5rem + env(safe-area-inset-bottom,0px));
}

.pl-0 {
  padding-left:       0px;
}

.pl-10 {
  padding-left:       2.5rem;
}

.pl-11 {
  padding-left:       2.75rem;
}

.pl-12 {
  padding-left:       3rem;
}

.pl-3 {
  padding-left:       0.75rem;
}

.pl-8 {
  padding-left:       2rem;
}

.pr-0 {
  padding-right:       0px;
}

.pr-12 {
  padding-right:       3rem;
}

.pr-2 {
  padding-right:       0.5rem;
}

.pr-3 {
  padding-right:       0.75rem;
}

.pr-4 {
  padding-right:       1rem;
}

.pr-5 {
  padding-right:       1.25rem;
}

.pt-0 {
  padding-top:       0px;
}

.pt-0\.5 {
  padding-top:       0.125rem;
}

.pt-1 {
  padding-top:       0.25rem;
}

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

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

.pt-4 {
  padding-top:       1rem;
}

.pt-5 {
  padding-top:       1.25rem;
}

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

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

.text-center {
  text-align:       center;
}

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

.align-middle {
  vertical-align:       middle;
}

.font-\[Arial\2c Helvetica\2c sans-serif\] {
  font-family:       Arial,Helvetica,sans-serif;
}

.font-\[inherit\] {
  font-family:       inherit;
}

.font-mono {
  font-family:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

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

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

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

.text-\[0\.625rem\] {
  font-size:       0.625rem;
}

.text-\[0\.6875rem\] {
  font-size:       0.6875rem;
}

.text-\[0\.75rem\] {
  font-size:       0.75rem;
}

.text-\[0\.875rem\] {
  font-size:       0.875rem;
}

.text-\[0\.9375rem\] {
  font-size:       0.9375rem;
}

.text-\[1\.05rem\] {
  font-size:       1.05rem;
}

.text-\[1\.0625rem\] {
  font-size:       1.0625rem;
}

.text-\[1\.125rem\] {
  font-size:       1.125rem;
}

.text-\[1\.15rem\] {
  font-size:       1.15rem;
}

.text-\[1\.25rem\] {
  font-size:       1.25rem;
}

.text-\[1\.375rem\] {
  font-size:       1.375rem;
}

.text-\[1\.3rem\] {
  font-size:       1.3rem;
}

.text-\[10px\] {
  font-size:       10px;
}

.text-\[11px\] {
  font-size:       11px;
}

.text-\[13px\] {
  font-size:       13px;
}

.text-\[15px\] {
  font-size:       15px;
}

.text-\[1rem\] {
  font-size:       1rem;
}

.text-\[9px\] {
  font-size:       9px;
}

.text-\[calc\(0\.5625rem\+1px\)\] {
  font-size:       calc(0.5625rem + 1px);
}

.text-\[calc\(0\.875rem\+2px\)\] {
  font-size:       calc(0.875rem + 2px);
}

.text-\[calc\(2px\+1\.0625rem\)\] {
  font-size:       calc(2px + 1.0625rem);
}

.text-\[calc\(4px\+1\.0625rem\)\] {
  font-size:       calc(4px + 1.0625rem);
}

.text-base {
  font-size:       0.9375rem;
  line-height:       1.5rem;
}

.text-lg {
  font-size:       1.0625rem;
  line-height:       1.625rem;
}

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

.text-xl {
  font-size:       1.1875rem;
  line-height:       1.75rem;
}

.text-xs {
  font-size:       0.8125rem;
  line-height:       1.125rem;
}

.font-bold {
  font-weight:       700;
}

.font-medium {
  font-weight:       500;
}

.font-normal {
  font-weight:       400;
}

.font-semibold {
  font-weight:       600;
}

.uppercase {
  text-transform:       uppercase;
}

.lowercase {
  text-transform:       lowercase;
}

.capitalize {
  text-transform:       capitalize;
}

.italic {
  font-style:       italic;
}

.tabular-nums {
  --tw-numeric-spacing:       tabular-nums;
  font-variant-numeric:       var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-\[1\.2\] {
  line-height:       1.2;
}

.leading-\[1\.3\] {
  line-height:       1.3;
}

.leading-\[1\.45\] {
  line-height:       1.45;
}

.leading-none {
  line-height:       1;
}

.leading-normal {
  line-height:       1.5;
}

.leading-relaxed {
  line-height:       1.625;
}

.leading-snug {
  line-height:       1.375;
}

.leading-tight {
  line-height:       1.25;
}

.tracking-\[-0\.01em\] {
  letter-spacing:       -0.01em;
}

.tracking-\[-0\.02em\] {
  letter-spacing:       -0.02em;
}

.tracking-\[0\.01em\] {
  letter-spacing:       0.01em;
}

.tracking-\[0\.08em\] {
  letter-spacing:       0.08em;
}

.tracking-\[0\.2em\] {
  letter-spacing:       0.2em;
}

.tracking-\[0\.3em\] {
  letter-spacing:       0.3em;
}

.tracking-\[0\.4em\] {
  letter-spacing:       0.4em;
}

.tracking-\[0\.5em\] {
  letter-spacing:       0.5em;
}

.tracking-tight {
  letter-spacing:       -0.025em;
}

.tracking-wide {
  letter-spacing:       0.025em;
}

.tracking-wider {
  letter-spacing:       0.05em;
}

.text-\[\#18a7ba\] {
  --tw-text-opacity:       1;
  color:       rgb(24 167 186 / var(--tw-text-opacity, 1));
}

.text-\[\#4c1753\] {
  --tw-text-opacity:       1;
  color:       rgb(76 23 83 / var(--tw-text-opacity, 1));
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_38\%\2c transparent\)\] {
  color:       color-mix(in srgb,var(--foreground) 38%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_45\%\2c transparent\)\] {
  color:       color-mix(in srgb,var(--foreground) 45%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_55\%\2c transparent\)\] {
  color:       color-mix(in srgb,var(--foreground) 55%,transparent);
}

.text-\[color-mix\(in_srgb\2c var\(--foreground\)_62\%\2c transparent\)\] {
  color:       color-mix(in srgb,var(--foreground) 62%,transparent);
}

.text-\[rgb\(202\2c 138\2c 4\)\] {
  --tw-text-opacity:       1;
  color:       rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-\[rgb\(22\2c 163\2c 74\)\] {
  --tw-text-opacity:       1;
  color:       rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-\[var\(--av-fg\2c var\(--foreground\)\)\] {
  color:       var(--av-fg,var(--foreground));
}

.text-\[var\(--eco-icon-hover\)\] {
  color:       var(--eco-icon-hover);
}

.text-\[var\(--eco-search-icon\)\] {
  color:       var(--eco-search-icon);
}

.text-\[var\(--eco-search-text\)\] {
  color:       var(--eco-search-text);
}

.text-\[var\(--eco-text-color\)\] {
  color:       var(--eco-text-color);
}

.text-amber-500 {
  --tw-text-opacity:       1;
  color:       rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity:       1;
  color:       rgb(217 119 6 / var(--tw-text-opacity, 1));
}

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

.text-amber-800 {
  --tw-text-opacity:       1;
  color:       rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-background {
  color:       var(--background);
}

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

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

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

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

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

.text-border {
  color:       var(--border);
}

.text-brand-600 {
  color:       var(--brand-600);
}

.text-emerald-600 {
  --tw-text-opacity:       1;
  color:       rgb(5 150 105 / var(--tw-text-opacity, 1));
}

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

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

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

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

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

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

.text-green-300 {
  --tw-text-opacity:       1;
  color:       rgb(134 239 172 / var(--tw-text-opacity, 1));
}

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

.text-green-500 {
  --tw-text-opacity:       1;
  color:       rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity:       1;
  color:       rgb(22 163 74 / var(--tw-text-opacity, 1));
}

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

.text-green-800 {
  --tw-text-opacity:       1;
  color:       rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity:       1;
  color:       rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity:       1;
  color:       rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color:       inherit;
}

.text-ink {
  color:       var(--foreground);
}

.text-ink-400 {
  --tw-text-opacity:       1;
  color:       rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-ink-500 {
  --tw-text-opacity:       1;
  color:       rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-ink-600 {
  --tw-text-opacity:       1;
  color:       rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-ink-700 {
  --tw-text-opacity:       1;
  color:       rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-ink-900 {
  --tw-text-opacity:       1;
  color:       rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  color:       var(--ink-muted);
}

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

.text-orange-600 {
  --tw-text-opacity:       1;
  color:       rgb(234 88 12 / var(--tw-text-opacity, 1));
}

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

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

.text-purple-800 {
  --tw-text-opacity:       1;
  color:       rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity:       1;
  color:       rgb(252 165 165 / var(--tw-text-opacity, 1));
}

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

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

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

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

.text-red-800 {
  --tw-text-opacity:       1;
  color:       rgb(153 27 27 / var(--tw-text-opacity, 1));
}

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

.text-surface {
  color:       var(--surface);
}

.text-teal-600 {
  --tw-text-opacity:       1;
  color:       rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-violet-700 {
  --tw-text-opacity:       1;
  color:       rgb(109 40 217 / var(--tw-text-opacity, 1));
}

.text-violet-800 {
  --tw-text-opacity:       1;
  color:       rgb(91 33 182 / var(--tw-text-opacity, 1));
}

.text-violet-900 {
  --tw-text-opacity:       1;
  color:       rgb(76 29 149 / var(--tw-text-opacity, 1));
}

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

.text-yellow-300 {
  --tw-text-opacity:       1;
  color:       rgb(253 224 71 / var(--tw-text-opacity, 1));
}

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

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

.text-yellow-600 {
  --tw-text-opacity:       1;
  color:       rgb(202 138 4 / var(--tw-text-opacity, 1));
}

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

.text-yellow-800 {
  --tw-text-opacity:       1;
  color:       rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.text-zinc-400 {
  --tw-text-opacity:       1;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.text-zinc-500 {
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.text-zinc-600 {
  --tw-text-opacity:       1;
  color:       rgb(82 82 91 / var(--tw-text-opacity, 1));
}

.text-zinc-800 {
  --tw-text-opacity:       1;
  color:       rgb(39 39 42 / var(--tw-text-opacity, 1));
}

.text-zinc-900 {
  --tw-text-opacity:       1;
  color:       rgb(24 24 27 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line:       underline;
}

.no-underline {
  text-decoration-line:       none;
}

.decoration-border {
  text-decoration-color:       var(--border);
}

.underline-offset-2 {
  text-underline-offset:       2px;
}

.antialiased {
  -webkit-font-smoothing:       antialiased;
  -moz-osx-font-smoothing:       grayscale;
}

.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

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

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

.placeholder-ink-400::-moz-placeholder {
  --tw-placeholder-opacity:       1;
  color:       rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.placeholder-ink-400::placeholder {
  --tw-placeholder-opacity:       1;
  color:       rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}

.opacity-0 {
  opacity:       0;
}

.opacity-100 {
  opacity:       1;
}

.opacity-35 {
  opacity:       0.35;
}

.opacity-40 {
  opacity:       0.4;
}

.opacity-50 {
  opacity:       0.5;
}

.opacity-60 {
  opacity:       0.6;
}

.opacity-70 {
  opacity:       0.7;
}

.opacity-80 {
  opacity:       0.8;
}

.opacity-90 {
  opacity:       0.9;
}

.shadow {
  --tw-shadow:       0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow:       0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:       0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow:       0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow:       0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:       0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.outline {
  outline-style:       solid;
}

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

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

.ring-zinc-200\/90 {
  --tw-ring-color:       rgb(228 228 231 / 0.9);
}

.blur {
  --tw-blur:       blur(8px);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale:       grayscale(100%);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert:       invert(100%);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur:       blur(2px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur:       blur(12px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur:       blur(4px);
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter:       var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[background-color\2c border-color\] {
  transition-property:       background-color,border-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[background-color\2c color\] {
  transition-property:       background-color,color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-color\2c background-color\] {
  transition-property:       border-color,background-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-color\] {
  transition-property:       border-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[border-radius\2c filter\] {
  transition-property:       border-radius,filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[color\2c background-color\] {
  transition-property:       color,background-color;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[filter\] {
  transition-property:       filter;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[margin\] {
  transition-property:       margin;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c transform\2c visibility\] {
  transition-property:       opacity,transform,visibility;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c transform\] {
  transition-property:       opacity,transform;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-\[opacity\2c visibility\] {
  transition-property:       opacity,visibility;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

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

.transition-colors {
  transition-property:       color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

.transition-opacity {
  transition-property:       opacity;
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:       150ms;
}

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

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

.duration-150 {
  transition-duration:       150ms;
}

.duration-200 {
  transition-duration:       200ms;
}

.duration-300 {
  transition-duration:       300ms;
}

.duration-\[120ms\] {
  transition-duration:       120ms;
}

.duration-\[160ms\] {
  transition-duration:       160ms;
}

.duration-\[180ms\] {
  transition-duration:       180ms;
}

.ease-in {
  transition-timing-function:       cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function:       cubic-bezier(0, 0, 0.2, 1);
}

.\[-ms-overflow-style\:none\] {
  -ms-overflow-style:       none;
}

.\[scrollbar-width\:none\] {
  scrollbar-width:       none;
}

.dark .hover\:text-ink-600:hover {
  color: #a1a1aa !important;
}

.dev-shell .custom-table thead .hover\:bg-ink-50:hovertr {
  background: transparent !important;
  border-bottom: none !important;
}

.dev-shell .custom-table td .hover\:bg-ink-100:hoverspan {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .custom-table td .hover\:bg-gray-100:hoverspan {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .custom-table td .hover\:bg-red-100:hoverspan {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}


    .dev-shell .doc_content .hover\:bg-red-100:hoverspan {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


    .dev-shell .doc_content .hover\:bg-ink-100:hoverspan {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


    .dev-shell .doc_content .hover\:bg-gray-100:hoverspan {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dev-shell .doc_content .hover\:bg-ink-100:hoverspan {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

.dev-shell .doc_content .hover\:bg-gray-100:hoverspan {
  background: color-mix(in srgb, var(--foreground) 8%, var(--background)) !important;
  color: var(--ink-muted) !important;
  border-color: var(--border) !important;
}

.dev-shell .doc_content .hover\:bg-red-100:hoverspan {
  background: color-mix(in srgb, #f87171 14%, var(--background)) !important;
  color: #fca5a5 !important;
  border-color: color-mix(in srgb, #f87171 26%, transparent) !important;
}


    .dev-shell .doc_content .hover\:bg-green-50:hover {
  background: color-mix(in srgb, var(--foreground) 3.5%, var(--background)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  color: var(--ink-muted) !important;
}


    .dev-shell .doc_content .hover\:bg-red-50:hover {
  background: color-mix(in srgb, var(--foreground) 3.5%, var(--background)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  color: var(--ink-muted) !important;
}

.dev-shell .custom-table td .group:hover .group-hover\:bg-ink-100span {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}


    .dev-shell .doc_content .group\/sb:hover .group-hover\/sb\:rounded-xl.bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content .group:hover .group-hover\:bg-ink-100span {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dev-shell .doc_content .group:hover .group-hover\:bg-ink-100span {
  background: color-mix(in srgb, #a78bfa 16%, var(--background)) !important;
  color: #c4b5fd !important;
  border-color: color-mix(in srgb, #a78bfa 28%, transparent) !important;
}

#messageContainer .data-\[visible\=true\]\:pointer-events-auto[data-visible="true"] {
  pointer-events: auto;
}


    .dev-shell .doc_content .group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:rounded-xl.bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.dev-shell .dark\:bg-surface:is(.dark *).border-border {
  border-color: var(--border) !important;
}

.dev-shell .dark\:border-border:is(.dark *).bg-surface {
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).rounded-xl,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).rounded-2xl,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).border,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *).border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content .dark\:border-border:is(.dark *).bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content > .space-y-5 > .dark\:bg-surface:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-6 > .dark\:bg-surface:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-8 > .dark\:bg-surface:is(.dark *):last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > h3,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}


    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:bg-surface:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

.dev-shell .dark\:hover\:bg-surface:hover:is(.dark *).border-border {
  border-color: var(--border) !important;
}

.dev-shell .dark\:hover\:border-border:hover:is(.dark *).bg-surface {
  border-color: var(--border) !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).rounded-xl,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).rounded-2xl,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).border,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *).border-border {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content .dark\:hover\:border-border:hover:is(.dark *).bg-surface {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 2rem !important;
  margin: 0 0 2rem !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}


    .dev-shell .doc_content > .space-y-5 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-6 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child,
    .dev-shell .doc_content > .space-y-8 > .dark\:hover\:bg-surface:hover:is(.dark *):last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > div.flex.items-center.justify-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem !important;
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > h3,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--foreground);
}


    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dark\:hover\:bg-surface:hover:is(.dark *) > .flex.items-center.justify-between > h3 {
  margin: 0 !important;
}

@media (min-width: 640px) {
  [data-language-selector-dropdown] > div.sm\:flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  [data-language-selector-dropdown] > div.sm\:flex-col.flex > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  .dev-shell .doc_content .relative .sm\:flex.items-start .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .relative .sm\:items-start.flex .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .relative .flex.items-start .sm\:flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  
    .dev-shell .doc_content .sm\:rounded-2xl.bg-surface {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 2rem !important;
    margin: 0 0 2rem !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8 > .bg-surface:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8,
    .dev-shell .doc_content > div.sm\:space-y-8 {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  
    .dev-shell .doc_content > .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]),
    .dev-shell .doc_content > div.sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.sm\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.sm\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .dev-section > div.sm\:justify-between.flex.items-center,
    .dev-shell .doc_content .bg-surface > div.sm\:justify-between.flex.items-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .sm\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .sm\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .dev-section > .sm\:justify-between.flex.items-center > h3,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h2,
    .dev-shell .doc_content .bg-surface > .sm\:justify-between.flex.items-center > h3 {
    margin: 0 !important;
  }
}

@media (min-width: 768px) {
  .md\:hidden.pass-user-card__friend-btn {
    display: none;
  }

  .md\:hidden.space-tab-modal__error {
    display: none;
  }

  .md\:hidden.sp-settings-modal {
    display: none;
  }

  .md\:hidden.sp-settings-role-popover {
    display: none;
  }

  .md\:hidden.sp-roles-accordion__panel {
    display: none;
  }

  .md\:hidden.pass-modal {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden.pass-user-card__friend-btn {
    display: none;
  }

  [data-language-selector-dropdown] > div.lg\:flex.flex-col > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  [data-language-selector-dropdown] > div.lg\:flex-col.flex > .relative:has(> button[aria-expanded="true"]) {
    z-index: 25;
  }

  .lg\:hidden.space-tab-modal__error {
    display: none;
  }

  .lg\:hidden.sp-settings-modal {
    display: none;
  }

  .lg\:hidden.sp-settings-role-popover {
    display: none;
  }

  .lg\:hidden.sp-roles-accordion__panel {
    display: none;
  }

  .lg\:hidden.pass-modal {
    display: none;
  }

  .dev-shell .doc_content .relative .lg\:flex.items-start .flex-shrink-0 > div {
    background: var(--foreground);
    color: var(--background);
    box-shadow: none;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:flex.items-center.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:flex.items-center.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .dev-section > div.lg\:items-center.flex.justify-between,
    .dev-shell .doc_content .bg-surface > div.lg\:items-center.flex.justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem !important;
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 0 1rem !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    font-weight: 650;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--foreground);
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:flex.items-center.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:flex.items-center.justify-between > h3 {
    margin: 0 !important;
  }

  .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .dev-section > .lg\:items-center.flex.justify-between > h3,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h2,
    .dev-shell .doc_content .bg-surface > .lg\:items-center.flex.justify-between > h3 {
    margin: 0 !important;
  }
}

.\[\&\.hidden\]\:\!hidden.hidden.pass-user-card__friend-btn {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.space-tab-modal__error {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-settings-modal {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-settings-role-popover {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.sp-roles-accordion__panel {
  display: none !important;
}

.\[\&\.hidden\]\:\!hidden.hidden.pass-modal {
  display: none !important;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.pass-user-card__friend-btn::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.space-tab-modal__error::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.sp-settings-modal::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.sp-settings-role-popover::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.sp-roles-accordion__panel::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden.pass-modal::-webkit-scrollbar {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.pass-user-card__friend-btn::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.space-tab-modal__error::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-settings-modal::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-settings-role-popover::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.sp-roles-accordion__panel::-webkit-search-cancel-button {
  display: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden.pass-modal::-webkit-search-cancel-button {
  display: none;
}

.placeholder\:text-\[var\(--eco-search-placeholder\)\]::-moz-placeholder {
  color:       var(--eco-search-placeholder);
}

.placeholder\:text-\[var\(--eco-search-placeholder\)\]::placeholder {
  color:       var(--eco-search-placeholder);
}

.first\:rounded-t-\[13px\]:first-child {
  border-top-left-radius:       13px;
  border-top-right-radius:       13px;
}

.last\:rounded-b-\[13px\]:last-child {
  border-bottom-right-radius:       13px;
  border-bottom-left-radius:       13px;
}

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

.focus-within\:border-\[var\(--eco-search-focus-border\)\]:focus-within {
  border-color:       var(--eco-search-focus-border);
}

.focus-within\:bg-\[var\(--eco-search-focus-bg\)\]:focus-within {
  background-color:       var(--eco-search-focus-bg);
}

.hover\:scale-105:hover {
  --tw-scale-x:       1.05;
  --tw-scale-y:       1.05;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--foreground\)\)\]:hover {
  border-color:       color-mix(in srgb,var(--border) 50%,var(--foreground));
}

.hover\:border-\[color-mix\(in_srgb\2c var\(--foreground\)_25\%\2c transparent\)\]:hover {
  border-color:       color-mix(in srgb,var(--foreground) 25%,transparent);
}

.hover\:border-\[var\(--eco-products-hover-border\)\]:hover {
  border-color:       var(--eco-products-hover-border);
}

.hover\:border-brand-300:hover {
  border-color:       var(--brand-300);
}

.hover\:border-brand-400:hover {
  border-color:       var(--brand-400);
}

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

.hover\:bg-\[color-mix\(in_srgb\2c var\(--background\)_95\%\2c var\(--foreground\)\)\]:hover {
  background-color:       color-mix(in srgb,var(--background) 95%,var(--foreground));
}

.hover\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_5\%\2c transparent\)\]:hover {
  background-color:       color-mix(in srgb,var(--foreground) 5%,transparent);
}

.hover\:bg-\[var\(--eco-products-hover-bg\)\]:hover {
  background-color:       var(--eco-products-hover-bg);
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity:       1;
  background-color:       rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-background:hover {
  background-color:       var(--background);
}

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

.hover\:bg-brand-100:hover {
  background-color:       var(--brand-100);
}

.hover\:bg-brand-50:hover {
  background-color:       var(--brand-50);
}

.hover\:bg-brand-700:hover {
  background-color:       var(--brand-700);
}

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

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

.hover\:bg-green-200:hover {
  --tw-bg-opacity:       1;
  background-color:       rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity:       1;
  background-color:       rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity:       1;
  background-color:       rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

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

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

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

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

.hover\:bg-red-50\/90:hover {
  background-color:       rgb(254 242 242 / 0.9);
}

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

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

.hover\:bg-surface-subtle:hover {
  background-color:       var(--surface-subtle);
}

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

.hover\:bg-zinc-100\/80:hover {
  background-color:       rgb(244 244 245 / 0.8);
}

.hover\:bg-zinc-100\/85:hover {
  background-color:       rgb(244 244 245 / 0.85);
}

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

.hover\:from-green-600:hover {
  --tw-gradient-from:       #16a34a var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(22 163 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-red-600:hover {
  --tw-gradient-from:       #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.hover\:to-green-700:hover {
  --tw-gradient-to:       #15803d var(--tw-gradient-to-position);
}

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

.hover\:text-\[\#6b2d75\]:hover {
  --tw-text-opacity:       1;
  color:       rgb(107 45 117 / var(--tw-text-opacity, 1));
}

.hover\:text-brand-600:hover {
  color:       var(--brand-600);
}

.hover\:text-brand-700:hover {
  color:       var(--brand-700);
}

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

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

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

.hover\:text-ink:hover {
  color:       var(--foreground);
}

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

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

.hover\:text-ink-900:hover {
  --tw-text-opacity:       1;
  color:       rgb(15 23 42 / var(--tw-text-opacity, 1));
}

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

.hover\:text-zinc-800:hover {
  --tw-text-opacity:       1;
  color:       rgb(39 39 42 / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:shadow-lg:hover {
  --tw-shadow:       0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow:       0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow:       0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:       0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:       var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-brand-500:focus {
  border-color:       var(--brand-500);
}

.focus\:border-ink:focus {
  border-color:       var(--foreground);
}

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

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

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

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

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

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

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

.focus\:ring-brand-100:focus {
  --tw-ring-color:       var(--brand-100);
}

.focus\:ring-brand-500:focus {
  --tw-ring-color:       var(--brand-500);
}

.focus\:ring-gray-400:focus {
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.focus\:ring-ink-500:focus {
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-100:focus {
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(243 232 255 / var(--tw-ring-opacity, 1));
}

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

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

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

.focus\:ring-offset-white:focus {
  --tw-ring-offset-color:       #fff;
}

.focus-visible\:bg-red-50\/90:focus-visible {
  background-color:       rgb(254 242 242 / 0.9);
}

.focus-visible\:bg-zinc-100\/90:focus-visible {
  background-color:       rgb(244 244 245 / 0.9);
}

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

.focus-visible\:outline:focus-visible {
  outline-style:       solid;
}

.focus-visible\:outline-1:focus-visible {
  outline-width:       1px;
}

.focus-visible\:outline-2:focus-visible {
  outline-width:       2px;
}

.focus-visible\:outline-offset-0:focus-visible {
  outline-offset:       0px;
}

.focus-visible\:outline-offset-1:focus-visible {
  outline-offset:       1px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset:       2px;
}

.focus-visible\:outline-\[color-mix\(in_srgb\2c var\(--account-changes-accent\)_75\%\2c \#ffffff\)\]:focus-visible {
  outline-color:       color-mix(in srgb,var(--account-changes-accent) 75%,#ffffff);
}

.focus-visible\:outline-\[color-mix\(in_srgb\2c var\(--foreground\)_45\%\2c transparent\)\]:focus-visible {
  outline-color:       color-mix(in srgb,var(--foreground) 45%,transparent);
}

.focus-visible\:outline-border:focus-visible {
  outline-color:       var(--border);
}

.focus-visible\:outline-brand-500:focus-visible {
  outline-color:       var(--brand-500);
}

.focus-visible\:outline-zinc-400:focus-visible {
  outline-color:       #a1a1aa;
}

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

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset:       inset;
}

.focus-visible\:ring-border:focus-visible {
  --tw-ring-color:       var(--border);
}

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

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

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

.active\:scale-95:active {
  --tw-scale-x:       .95;
  --tw-scale-y:       .95;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:enabled\:brightness-\[1\.08\]:enabled:hover {
  --tw-brightness:       brightness(1.08);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.active\:enabled\:brightness-\[0\.94\]:enabled:active {
  --tw-brightness:       brightness(0.94);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

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

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

.disabled\:opacity-55:disabled {
  opacity:       0.55;
}

.disabled\:filter-none:disabled {
  filter:       none;
}

.group\/search:focus-within .group-focus-within\/search\:text-\[var\(--eco-search-icon-focus\)\] {
  color:       var(--eco-search-icon-focus);
}

.group\/search:focus-within .group-focus-within\/search\:opacity-0 {
  opacity:       0;
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x:       1.05;
  --tw-scale-y:       1.05;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/sb:hover .group-hover\/sb\:rounded-xl {
  border-radius:       12px;
}

.group\/nav:hover .group-hover\/nav\:border-transparent {
  border-color:       transparent;
}

.group\/nav:hover .group-hover\/nav\:bg-\[var\(--sidebar-hover-bg\)\] {
  background-color:       var(--sidebar-hover-bg);
}

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

.group:hover .group-hover\:bg-green-200 {
  --tw-bg-opacity:       1;
  background-color:       rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-yellow-200 {
  --tw-bg-opacity:       1;
  background-color:       rgb(254 240 138 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-brand-600 {
  color:       var(--brand-600);
}

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

.group:hover .group-hover\:text-ink {
  color:       var(--foreground);
}

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

.group\/nav:hover .group-hover\/nav\:opacity-65 {
  opacity:       0.65;
}

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

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

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

.has-\[\:checked\]\:border-brand-600:has(:checked) {
  border-color:       var(--brand-600);
}

.has-\[\:checked\]\:bg-brand-50:has(:checked) {
  background-color:       var(--brand-50);
}

.aria-expanded\:border-\[var\(--eco-products-open-border\)\][aria-expanded="true"] {
  border-color:       var(--eco-products-open-border);
}

.aria-expanded\:bg-\[var\(--eco-products-open-bg\)\][aria-expanded="true"] {
  background-color:       var(--eco-products-open-bg);
}

.group[aria-expanded="true"] .group-aria-expanded\:rotate-180 {
  --tw-rotate:       180deg;
  transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.data-\[visible\=true\]\:pointer-events-auto[data-visible="true"] {
  pointer-events:       auto;
}

.data-\[visible\=true\]\:visible[data-visible="true"] {
  visibility:       visible;
}

.data-\[nav-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_9\%\2c transparent\)\][data-nav-active="true"] {
  background-color:       color-mix(in srgb,var(--foreground) 9%,transparent);
}

.data-\[space-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_9\%\2c transparent\)\][data-space-active="true"] {
  background-color:       color-mix(in srgb,var(--foreground) 9%,transparent);
}

.data-\[visible\=true\]\:opacity-100[data-visible="true"] {
  opacity:       1;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:rounded-xl {
  border-radius:       12px;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:border-transparent {
  border-color:       transparent;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_10\%\2c transparent\)\] {
  background-color:       color-mix(in srgb,var(--foreground) 10%,transparent);
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_12\%\2c transparent\)\] {
  background-color:       color-mix(in srgb,var(--foreground) 12%,transparent);
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:opacity-100 {
  opacity:       1;
}

.group\/nav[data-nav-active="true"] .group-data-\[nav-active\=true\]\/nav\:opacity-80 {
  opacity:       0.8;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:opacity-100 {
  opacity:       1;
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:brightness-\[1\.06\] {
  --tw-brightness:       brightness(1.06);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group\/sb[data-space-active="true"] .group-data-\[space-active\=true\]\/sb\:saturate-\[1\.2\] {
  --tw-saturate:       saturate(1.2);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

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

.dark\:divide-zinc-700\/60:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color:       rgb(63 63 70 / 0.6);
}

.dark\:\!border-zinc-700:is(.dark *) {
  --tw-border-opacity:       1 !important;
  border-color:       rgb(63 63 70 / var(--tw-border-opacity, 1)) !important;
}

.dark\:border-amber-800\/50:is(.dark *) {
  border-color:       rgb(146 64 14 / 0.5);
}

.dark\:border-border:is(.dark *) {
  border-color:       var(--border);
}

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

.dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-green-500\/20:is(.dark *) {
  border-color:       rgb(34 197 94 / 0.2);
}

.dark\:border-green-800:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.dark\:border-ink:is(.dark *) {
  border-color:       var(--foreground);
}

.dark\:border-ink-600:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:border-ink-700:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(51 65 85 / var(--tw-border-opacity, 1));
}

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

.dark\:border-red-800:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.dark\:border-red-900:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(127 29 29 / var(--tw-border-opacity, 1));
}

.dark\:border-red-900\/30:is(.dark *) {
  border-color:       rgb(127 29 29 / 0.3);
}

.dark\:border-red-900\/40:is(.dark *) {
  border-color:       rgb(127 29 29 / 0.4);
}

.dark\:border-red-900\/50:is(.dark *) {
  border-color:       rgb(127 29 29 / 0.5);
}

.dark\:border-surface:is(.dark *) {
  border-color:       var(--surface);
}

.dark\:border-white\/10:is(.dark *) {
  border-color:       rgb(255 255 255 / 0.1);
}

.dark\:border-zinc-600:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(82 82 91 / var(--tw-border-opacity, 1));
}

.dark\:border-zinc-700:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(63 63 70 / var(--tw-border-opacity, 1));
}

.dark\:border-zinc-700\/70:is(.dark *) {
  border-color:       rgb(63 63 70 / 0.7);
}

.dark\:border-zinc-800\/70:is(.dark *) {
  border-color:       rgb(39 39 42 / 0.7);
}

.dark\:\!bg-\[rgba\(17\2c 17\2c 22\2c 0\.95\)\]:is(.dark *) {
  background-color:       rgba(17,17,22,0.95) !important;
}

.dark\:bg-\[\#111116\]:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(17 17 22 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_12\%\2c transparent\)\]:is(.dark *) {
  background-color:       color-mix(in srgb,var(--foreground) 12%,transparent);
}

.dark\:bg-\[var\(--av-bg-d\2c var\(--av-bg\2c color-mix\(in_srgb\2c var\(--foreground\)_16\%\2c transparent\)\)\)\]:is(.dark *) {
  background-color:       var(--av-bg-d,var(--av-bg,color-mix(in srgb,var(--foreground) 16%,transparent)));
}

.dark\:bg-amber-900\/30:is(.dark *) {
  background-color:       rgb(120 53 15 / 0.3);
}

.dark\:bg-amber-900\/40:is(.dark *) {
  background-color:       rgb(120 53 15 / 0.4);
}

.dark\:bg-background:is(.dark *) {
  background-color:       var(--background);
}

.dark\:bg-black\/40:is(.dark *) {
  background-color:       rgb(0 0 0 / 0.4);
}

.dark\:bg-black\/60:is(.dark *) {
  background-color:       rgb(0 0 0 / 0.6);
}

.dark\:bg-blue-500\/10:is(.dark *) {
  background-color:       rgb(59 130 246 / 0.1);
}

.dark\:bg-blue-900\/20:is(.dark *) {
  background-color:       rgb(30 58 138 / 0.2);
}

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

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

.dark\:bg-gray-900\/80:is(.dark *) {
  background-color:       rgb(17 24 39 / 0.8);
}

.dark\:bg-green-400:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(74 222 128 / var(--tw-bg-opacity, 1));
}

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

.dark\:bg-green-900\/30:is(.dark *) {
  background-color:       rgb(20 83 45 / 0.3);
}

.dark\:bg-green-950\/30:is(.dark *) {
  background-color:       rgb(5 46 22 / 0.3);
}

.dark\:bg-indigo-900\/20:is(.dark *) {
  background-color:       rgb(49 46 129 / 0.2);
}

.dark\:bg-indigo-900\/30:is(.dark *) {
  background-color:       rgb(49 46 129 / 0.3);
}

.dark\:bg-ink:is(.dark *) {
  background-color:       var(--foreground);
}

.dark\:bg-ink-700:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.dark\:bg-ink-900\/40:is(.dark *) {
  background-color:       rgb(15 23 42 / 0.4);
}

.dark\:bg-ink-900\/70:is(.dark *) {
  background-color:       rgb(15 23 42 / 0.7);
}

.dark\:bg-orange-900\/30:is(.dark *) {
  background-color:       rgb(124 45 18 / 0.3);
}

.dark\:bg-purple-900\/20:is(.dark *) {
  background-color:       rgb(88 28 135 / 0.2);
}

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

.dark\:bg-red-900\/20:is(.dark *) {
  background-color:       rgb(127 29 29 / 0.2);
}

.dark\:bg-red-900\/30:is(.dark *) {
  background-color:       rgb(127 29 29 / 0.3);
}

.dark\:bg-red-950\/25:is(.dark *) {
  background-color:       rgb(69 10 10 / 0.25);
}

.dark\:bg-red-950\/30:is(.dark *) {
  background-color:       rgb(69 10 10 / 0.3);
}

.dark\:bg-surface:is(.dark *) {
  background-color:       var(--surface);
}

.dark\:bg-surface-subtle:is(.dark *) {
  background-color:       var(--surface-subtle);
}

.dark\:bg-teal-900\/20:is(.dark *) {
  background-color:       rgb(19 78 74 / 0.2);
}

.dark\:bg-teal-900\/30:is(.dark *) {
  background-color:       rgb(19 78 74 / 0.3);
}

.dark\:bg-transparent:is(.dark *) {
  background-color:       transparent;
}

.dark\:bg-yellow-900\/20:is(.dark *) {
  background-color:       rgb(113 63 18 / 0.2);
}

.dark\:bg-yellow-900\/30:is(.dark *) {
  background-color:       rgb(113 63 18 / 0.3);
}

.dark\:bg-zinc-800:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.dark\:bg-zinc-800\/40:is(.dark *) {
  background-color:       rgb(39 39 42 / 0.4);
}

.dark\:bg-zinc-800\/60:is(.dark *) {
  background-color:       rgb(39 39 42 / 0.6);
}

.dark\:bg-zinc-900:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(24 24 27 / var(--tw-bg-opacity, 1));
}

.dark\:bg-zinc-900\/70:is(.dark *) {
  background-color:       rgb(24 24 27 / 0.7);
}

.dark\:from-surface-subtle:is(.dark *) {
  --tw-gradient-from:       var(--surface-subtle) var(--tw-gradient-from-position);
  --tw-gradient-to:       rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:       var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:to-surface:is(.dark *) {
  --tw-gradient-to:       var(--surface) var(--tw-gradient-to-position);
}

.dark\:to-surface-subtle:is(.dark *) {
  --tw-gradient-to:       var(--surface-subtle) var(--tw-gradient-to-position);
}

.dark\:\!text-purple-400:is(.dark *) {
  --tw-text-opacity:       1 !important;
  color:       rgb(192 132 252 / var(--tw-text-opacity, 1)) !important;
}

.dark\:\!text-zinc-300:is(.dark *) {
  --tw-text-opacity:       1 !important;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1)) !important;
}

.dark\:\!text-zinc-400:is(.dark *) {
  --tw-text-opacity:       1 !important;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1)) !important;
}

.dark\:\!text-zinc-50:is(.dark *) {
  --tw-text-opacity:       1 !important;
  color:       rgb(250 250 250 / var(--tw-text-opacity, 1)) !important;
}

.dark\:text-\[color-mix\(in_srgb\2c var\(--foreground\)_50\%\2c transparent\)\]:is(.dark *) {
  color:       color-mix(in srgb,var(--foreground) 50%,transparent);
}

.dark\:text-\[color-mix\(in_srgb\2c var\(--foreground\)_72\%\2c transparent\)\]:is(.dark *) {
  color:       color-mix(in srgb,var(--foreground) 72%,transparent);
}

.dark\:text-\[var\(--av-fg-d\2c var\(--av-fg\2c var\(--foreground\)\)\)\]:is(.dark *) {
  color:       var(--av-fg-d,var(--av-fg,var(--foreground)));
}

.dark\:text-amber-200\/90:is(.dark *) {
  color:       rgb(253 230 138 / 0.9);
}

.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(251 191 36 / var(--tw-text-opacity, 1));
}

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

.dark\:text-brand-400:is(.dark *) {
  color:       var(--brand-400);
}

.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(52 211 153 / var(--tw-text-opacity, 1));
}

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

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

.dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-green-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:text-green-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.dark\:text-indigo-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.dark\:text-ink:is(.dark *) {
  color:       var(--foreground);
}

.dark\:text-ink-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:text-ink-muted:is(.dark *) {
  color:       var(--ink-muted);
}

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

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

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

.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:text-red-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:text-surface:is(.dark *) {
  color:       var(--surface);
}

.dark\:text-teal-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(45 212 191 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-200:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(196 181 253 / var(--tw-text-opacity, 1));
}

.dark\:text-violet-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(167 139 250 / var(--tw-text-opacity, 1));
}

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

.dark\:text-zinc-100:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-200:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(228 228 231 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-400:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-50:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(250 250 250 / var(--tw-text-opacity, 1));
}

.dark\:text-zinc-500:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:placeholder-ink-muted:is(.dark *)::-moz-placeholder {
  color:       var(--ink-muted);
}

.dark\:placeholder-ink-muted:is(.dark *)::placeholder {
  color:       var(--ink-muted);
}

.dark\:opacity-\[0\.36\]:is(.dark *) {
  opacity:       0.36;
}

.dark\:opacity-\[0\.68\]:is(.dark *) {
  opacity:       0.68;
}

.dark\:ring-zinc-600\/90:is(.dark *) {
  --tw-ring-color:       rgb(82 82 91 / 0.9);
}

.dark\:ring-offset-zinc-900:is(.dark *) {
  --tw-ring-offset-color:       #18181b;
}

.dark\:invert:is(.dark *) {
  --tw-invert:       invert(100%);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder {
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder {
  --tw-text-opacity:       1;
  color:       rgb(113 113 122 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-border:hover:is(.dark *) {
  border-color:       var(--border);
}

.dark\:hover\:border-brand-500:hover:is(.dark *) {
  border-color:       var(--brand-500);
}

.dark\:hover\:border-brand-700:hover:is(.dark *) {
  border-color:       var(--brand-700);
}

.dark\:hover\:border-ink-600:hover:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.dark\:hover\:border-zinc-500:hover:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(113 113 122 / var(--tw-border-opacity, 1));
}

.dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_8\%\2c transparent\)\]:hover:is(.dark *) {
  background-color:       color-mix(in srgb,var(--foreground) 8%,transparent);
}

.dark\:hover\:bg-amber-900\/60:hover:is(.dark *) {
  background-color:       rgb(120 53 15 / 0.6);
}

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

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

.dark\:hover\:bg-green-900\/20:hover:is(.dark *) {
  background-color:       rgb(20 83 45 / 0.2);
}

.dark\:hover\:bg-green-900\/40:hover:is(.dark *) {
  background-color:       rgb(20 83 45 / 0.4);
}

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

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

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

.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
  background-color:       rgb(127 29 29 / 0.2);
}

.dark\:hover\:bg-red-900\/30:hover:is(.dark *) {
  background-color:       rgb(127 29 29 / 0.3);
}

.dark\:hover\:bg-red-900\/40:hover:is(.dark *) {
  background-color:       rgb(127 29 29 / 0.4);
}

.dark\:hover\:bg-red-950\/25:hover:is(.dark *) {
  background-color:       rgb(69 10 10 / 0.25);
}

.dark\:hover\:bg-red-950\/30:hover:is(.dark *) {
  background-color:       rgb(69 10 10 / 0.3);
}

.dark\:hover\:bg-surface:hover:is(.dark *) {
  background-color:       var(--surface);
}

.dark\:hover\:bg-surface-subtle:hover:is(.dark *) {
  background-color:       var(--surface-subtle);
}

.dark\:hover\:bg-zinc-700:hover:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(63 63 70 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-zinc-800:hover:is(.dark *) {
  --tw-bg-opacity:       1;
  background-color:       rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-zinc-800\/55:hover:is(.dark *) {
  background-color:       rgb(39 39 42 / 0.55);
}

.dark\:hover\:bg-zinc-800\/60:hover:is(.dark *) {
  background-color:       rgb(39 39 42 / 0.6);
}

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

.dark\:hover\:text-green-300:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-ink:hover:is(.dark *) {
  color:       var(--foreground);
}

.dark\:hover\:text-ink-400:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-red-300:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-red-400:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-zinc-100:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(244 244 245 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-zinc-300:hover:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

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

.dark\:focus\:border-zinc-500:focus:is(.dark *) {
  --tw-border-opacity:       1;
  border-color:       rgb(113 113 122 / var(--tw-border-opacity, 1));
}

.dark\:focus\:ring-ink-400:focus:is(.dark *) {
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(148 163 184 / var(--tw-ring-opacity, 1));
}

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

.dark\:focus\:ring-purple-900\/20:focus:is(.dark *) {
  --tw-ring-color:       rgb(88 28 135 / 0.2);
}

.dark\:focus\:ring-zinc-500:focus:is(.dark *) {
  --tw-ring-opacity:       1;
  --tw-ring-color:       rgb(113 113 122 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-offset-0:focus:is(.dark *) {
  --tw-ring-offset-width:       0px;
}

.dark\:focus\:ring-offset-\[\#0f0f13\]:focus:is(.dark *) {
  --tw-ring-offset-color:       #0f0f13;
}

.dark\:focus\:ring-offset-zinc-900:focus:is(.dark *) {
  --tw-ring-offset-color:       #18181b;
}

.dark\:focus-visible\:bg-red-950\/30:focus-visible:is(.dark *) {
  background-color:       rgb(69 10 10 / 0.3);
}

.dark\:focus-visible\:bg-zinc-800\/60:focus-visible:is(.dark *) {
  background-color:       rgb(39 39 42 / 0.6);
}

.dark\:focus-visible\:ring-offset-zinc-900:focus-visible:is(.dark *) {
  --tw-ring-offset-color:       #18181b;
}

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

.group:hover .dark\:group-hover\:bg-green-900\/40:is(.dark *) {
  background-color:       rgb(20 83 45 / 0.4);
}

.group:hover .dark\:group-hover\:bg-surface-subtle:is(.dark *) {
  background-color:       var(--surface-subtle);
}

.group:hover .dark\:group-hover\:bg-yellow-900\/40:is(.dark *) {
  background-color:       rgb(113 63 18 / 0.4);
}

.group:hover .dark\:group-hover\:text-zinc-300:is(.dark *) {
  --tw-text-opacity:       1;
  color:       rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.dark\:data-\[nav-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_13\%\2c transparent\)\][data-nav-active="true"]:is(.dark *) {
  background-color:       color-mix(in srgb,var(--foreground) 13%,transparent);
}

.dark\:data-\[space-active\=true\]\:bg-\[color-mix\(in_srgb\2c var\(--foreground\)_13\%\2c transparent\)\][data-space-active="true"]:is(.dark *) {
  background-color:       color-mix(in srgb,var(--foreground) 13%,transparent);
}

.group\/sb[data-space-active="true"] .dark\:group-data-\[space-active\=true\]\/sb\:brightness-\[1\.14\]:is(.dark *) {
  --tw-brightness:       brightness(1.14);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group\/sb[data-space-active="true"] .dark\:group-data-\[space-active\=true\]\/sb\:saturate-\[1\.25\]:is(.dark *) {
  --tw-saturate:       saturate(1.25);
  filter:       var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
  .sm\:pointer-events-none {
    pointer-events:       none;
  }

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

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

  .sm\:-mt-20 {
    margin-top:       -5rem;
  }

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

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

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

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

  .sm\:inline {
    display:       inline;
  }

  .sm\:flex {
    display:       flex;
  }

  .sm\:grid {
    display:       grid;
  }

  .sm\:h-11 {
    height:       2.75rem;
  }

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

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

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

  .sm\:h-28 {
    height:       7rem;
  }

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

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

  .sm\:w-11 {
    width:       2.75rem;
  }

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

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

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

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

  .sm\:min-w-0 {
    min-width:       0px;
  }

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

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

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

  .sm\:translate-y-1\.5 {
    --tw-translate-y:       0.375rem;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

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

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns:       minmax(0,1fr) auto;
  }

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

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

  .sm\:flex-nowrap {
    flex-wrap:       nowrap;
  }

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

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

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

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

  .sm\:justify-center {
    justify-content:       center;
  }

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

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

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

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

  .sm\:gap-5 {
    gap:       1.25rem;
  }

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

  .sm\:gap-x-5 {
    -moz-column-gap:       1.25rem;
         column-gap:       1.25rem;
  }

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

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

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

  .sm\:overflow-visible {
    overflow:       visible;
  }

  .sm\:rounded-2xl {
    border-radius:       16px;
  }

  .sm\:rounded-3xl {
    border-radius:       24px;
  }

  .sm\:rounded-\[13px\] {
    border-radius:       13px;
  }

  .sm\:rounded-\[20px\] {
    border-radius:       20px;
  }

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

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

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

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

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

  .sm\:px-10 {
    padding-left:       2.5rem;
    padding-right:       2.5rem;
  }

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

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

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

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

  .sm\:py-10 {
    padding-top:       2.5rem;
    padding-bottom:       2.5rem;
  }

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

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

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

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

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

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

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

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

  .sm\:text-\[0\.875rem\] {
    font-size:       0.875rem;
  }

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

  .sm\:text-lg {
    font-size:       1.0625rem;
    line-height:       1.625rem;
  }

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

  .sm\:text-xs {
    font-size:       0.8125rem;
    line-height:       1.125rem;
  }

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

  .sm\:transition-\[opacity\2c transform\] {
    transition-property:       opacity,transform;
    transition-timing-function:       cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:       150ms;
  }

  .sm\:duration-200 {
    transition-duration:       200ms;
  }

  .sm\:ease-out {
    transition-timing-function:       cubic-bezier(0, 0, 0.2, 1);
  }

  .data-\[warning-visible\=true\]\:sm\:translate-y-0[data-warning-visible="true"] {
    --tw-translate-y:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .data-\[warning-visible\=true\]\:sm\:opacity-100[data-warning-visible="true"] {
    opacity:       1;
  }

  .data-\[warning-visible\=true\]\:sm\:duration-300[data-warning-visible="true"] {
    transition-duration:       300ms;
  }
}

@media (min-width: 768px) {
  .md\:left-full {
    left:       100%;
  }

  .md\:right-auto {
    right:       auto;
  }

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

  .md\:ml-1 {
    margin-left:       0.25rem;
  }

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

  .md\:block {
    display:       block;
  }

  .md\:inline {
    display:       inline;
  }

  .md\:hidden {
    display:       none;
  }

  .md\:w-44 {
    width:       11rem;
  }

  .md\:max-w-\[min\(11rem\2c calc\(100vw-2rem\)\)\] {
    max-width:       min(11rem, calc(100vw - 2rem));
  }

  .md\:origin-top-left {
    transform-origin:       top left;
  }

  .md\:-translate-x-1 {
    --tw-translate-x:       -0.25rem;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-x-0 {
    --tw-translate-x:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:translate-y-0 {
    --tw-translate-y:       0px;
    transform:       translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

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

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

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

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

  .md\:p-10 {
    padding:       2.5rem;
  }

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

  .md\:pb-20 {
    padding-bottom:       5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position:       sticky;
  }

  .lg\:left-\[var\(--account-split-sidebar-w\2c 320px\)\] {
    left:       var(--account-split-sidebar-w,320px);
  }

  .lg\:top-0 {
    top:       0px;
  }

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

  .lg\:ml-72 {
    margin-left:       18rem;
  }

  .lg\:box-border {
    box-sizing:       border-box;
  }

  .lg\:block {
    display:       block;
  }

  .lg\:flex {
    display:       flex;
  }

  .lg\:hidden {
    display:       none;
  }

  .lg\:h-\[var\(--account-static-sidebar-w\)\] {
    height:       var(--account-static-sidebar-w);
  }

  .lg\:h-screen {
    height:       100vh;
  }

  .lg\:min-h-0 {
    min-height:       0px;
  }

  .lg\:w-\[var\(--account-static-sidebar-w\)\] {
    width:       var(--account-static-sidebar-w);
  }

  .lg\:flex-1 {
    flex:       1 1 0%;
  }

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

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

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

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

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

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

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

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

  .lg\:items-stretch {
    align-items:       stretch;
  }

  .lg\:justify-center {
    justify-content:       center;
  }

  .lg\:gap-\[var\(--sidebar-gap-tight\)\] {
    gap:       var(--sidebar-gap-tight);
  }

  .lg\:border-b {
    border-bottom-width:       1px;
  }

  .lg\:border-r {
    border-right-width:       1px;
  }

  .lg\:border-t-0 {
    border-top-width:       0px;
  }

  .lg\:border-\[var\(--eco-header-border\)\] {
    border-color:       var(--eco-header-border);
  }

  .lg\:bg-\[var\(--eco-header-bg\)\] {
    background-color:       var(--eco-header-bg);
  }

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

  .lg\:px-10 {
    padding-left:       2.5rem;
    padding-right:       2.5rem;
  }

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

  .lg\:px-\[var\(--eco-header-pad\)\] {
    padding-left:       var(--eco-header-pad);
    padding-right:       var(--eco-header-pad);
  }

  .lg\:pt-\[var\(--eco-header-pad\)\] {
    padding-top:       var(--eco-header-pad);
  }
}

.\[\&\.hidden\]\:\!hidden.hidden {
  display:       none !important;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display:       none;
}

.\[\&\:\:-webkit-scrollbar\]\:h-0::-webkit-scrollbar {
  height:       0px;
}

.\[\&\:\:-webkit-scrollbar\]\:w-0::-webkit-scrollbar {
  width:       0px;
}

.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
  display:       none;
}

.\[\&_\#profileDisplayName\]\:select-text #profileDisplayName {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_\#profileUsernameInline\]\:select-text #profileUsernameInline {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_\.select-all\]\:select-all .select-all {
  -webkit-user-select:       all;
     -moz-user-select:       all;
          user-select:       all;
}

.\[\&_\[contenteditable\=true\]\]\:select-text [contenteditable=true] {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_button\]\:font-\[inherit\] button {
  font-family:       inherit;
}

.\[\&_code\]\:select-text code {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_input\]\:select-text input {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_input\]\:font-\[inherit\] input {
  font-family:       inherit;
}

.\[\&_kbd\]\:select-text kbd {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_pre\]\:select-text pre {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_samp\]\:select-text samp {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_select\]\:select-text select {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_select\]\:font-\[inherit\] select {
  font-family:       inherit;
}

.\[\&_textarea\]\:select-text textarea {
  -webkit-user-select:       text;
     -moz-user-select:       text;
          user-select:       text;
}

.\[\&_textarea\]\:font-\[inherit\] textarea {
  font-family:       inherit;
}