@keyframes role-badge {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-role-badge {
  animation: role-badge 0.3s ease-out forwards;
}

[x-cloak] {
  display: none !important;
}

[data-simplebar] {
  /* Прячем нативные скроллбары до инициализации SimpleBar,
     чтобы не было «вспышки» системного скролла при переходах */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge Legacy */
}
[data-simplebar]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.roster-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.roster-scroll::-webkit-scrollbar {
  width: 6px;
}

.roster-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 9999px;
}

.roster-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.55), rgba(79, 70, 229, 0.75));
  border-radius: 9999px;
}

.roster-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(165, 180, 252, 0.75), rgba(99, 102, 241, 0.9));
}

/* Рамка inset, чтобы не обрезалась сверху/слева в overflow-контейнере */
.roster-member-highlight {
  box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.85), 0 0 16px rgba(251, 191, 36, 0.25);
  transition: box-shadow 0.3s ease;
}

/* Подсказка при наведении: «нажать для подробной информации» */
.tooltip-trigger-hover {
  cursor: pointer;
  font-weight: 600;
  transition: color 0.2s ease;
}
.tooltip-trigger-hover:hover {
  color: rgba(199, 210, 254, 1);
}
[data-character-tooltip]:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.7);
  outline-offset: 2px;
}

.tooltip-trigger-active {
  position: relative;
  transition: color 0.2s ease;
}

.tooltip-trigger-active .tooltip-avatar {
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.85), 0 0 12px rgba(99, 102, 241, 0.35);
  border-color: rgba(129, 140, 248, 0.9) !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.tooltip-trigger-active .tooltip-label {
  color: #c7d2fe !important;
}

#character-tooltip-portal {
  padding: 8px;
  border-radius: 18px;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#character-tooltip-portal .tooltip-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#character-tooltip-portal[data-sticky="1"] .tooltip-card {
  box-shadow: 0 30px 70px rgba(79, 70, 229, 0.45), 0 0 0 2px rgba(99, 102, 241, 0.35);
  border-color: rgba(165, 180, 252, 0.95);
}

#character-tooltip-portal::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(17, 24, 39, 0.95);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
  left: calc(var(--tooltip-arrow-x, 50%) - 6px);
}

#character-tooltip-portal[data-sticky="1"]::after {
  background: rgba(99, 102, 241, 0.9);
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.45);
}

#character-tooltip-portal[data-placement="top"]::after {
  bottom: -7px;
  opacity: 1;
}

#character-tooltip-portal[data-placement="bottom"]::after {
  top: -7px;
  opacity: 1;
}

.stat-card,
.member-stat-cell {
  border-radius: 1rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover,
.member-stat-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.6);
}

.member-stat-cell {
  gap: 0.35rem;
  display: flex;
  flex-direction: column;
}

.char-toolbar button,
.char-toolbar [data-async-btn],
.char-toolbar [data-tooltip-close],
.char-toolbar .char-toolbar-action {
  cursor: pointer;
}

[data-async-btn] {
  position: relative;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-async-btn].async-btn-loading {
  pointer-events: none;
  opacity: 0.6;
}

[data-async-btn].async-btn-loading i,
[data-async-btn].async-btn-loading svg,
[data-async-btn].async-btn-loading span {
  opacity: 0;
}

[data-async-btn].async-btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-top-color: transparent;
  border-radius: 999px;
  animation: tooltip-spin 0.6s linear infinite;
}

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

.gd-toolbar {
  position: relative;
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(129, 140, 248, 0.32);
  background: radial-gradient(circle at top right, rgba(129, 140, 248, 0.25), transparent 45%),
              linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(56, 189, 248, 0.08));
  box-shadow: 0 22px 35px -18px rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(12px);
}

.gd-toolbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.gd-toolbar-actions {
  gap: 0.5rem;
}

.gd-toolbar-btn {
  position: relative;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(229, 231, 235, 0.92);
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px rgba(15, 23, 42, 0.75);
  transition: all 0.18s ease;
}

.gd-toolbar-btn:hover,
.gd-toolbar-btn:focus-visible {
  color: #fff;
  background: rgba(99, 102, 241, 0.38);
  border-color: rgba(165, 180, 252, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 24px -10px rgba(99, 102, 241, 0.45);
}

.gd-toolbar-btn:focus-visible {
  outline: 2px solid rgba(129, 140, 248, 0.6);
  outline-offset: 2px;
}

.gd-toolbar-btn i {
  opacity: 0.85;
}


/* Основной контейнер drag-and-drop */
#dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
  min-height: 12rem;
  max-height: 12rem;
  */
  height: 12rem; /* Фиксированная высота */
  min-width: 300px; /* Ширина контейнера */
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Эффект при наведении */
#dropzone:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(129, 140, 248, 0.8); /* Indigo-500 */
  color: rgba(255, 255, 255, 0.8);
}

/* Эффект при перетаскивании файла */
#dropzone.border-blue-500 {
  border-color: #3b82f6; /* Blue-500 */
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Предпросмотр изображения */
#preview {
  max-width: 100%; /* Изображение не выходит за границы контейнера по ширине */
  max-height: 100%; /* Изображение не выходит за границы контейнера по высоте */
  object-fit: contain; /* Сохраняет пропорции изображения */
  padding: 0.5rem;
  object-fit: contain; /* Сохраняет пропорции изображения */
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

/* Анимация появления предпросмотра */
#preview.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Скрытие текста при загрузке изображения */
#placeholder-text.hidden {
  display: none;
}



.modal-class {
  border: 2px solid rgba(255, 255, 255, 0.1); /* начальная бледная рамка */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-class:hover {
  border-color: rgba(129, 140, 248, 0.8); /* Indigo-500 */
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4), 0 4px 15px rgba(129, 140, 248, 0.3);
}
.modal-class.focused {
  border-color: rgba(129, 140, 248, 0.8); /* Indigo-500 */
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4), 0 4px 15px rgba(129, 140, 248, 0.3);
}

/* Акцент в hero: обводка по буквам, чуть глубже indigo (не «молочный») */
.home-hero-neon {
  color: #818cf8;
  -webkit-text-stroke: 0.035em rgba(67, 56, 202, 0.55);
  paint-order: stroke fill;
  text-shadow:
    0 0 0.15em rgba(99, 102, 241, 0.55),
    0 0 0.4em rgba(79, 70, 229, 0.35),
    0 0 0.75em rgba(55, 48, 163, 0.25);
}
#content-loader {
    position: fixed;
    top: 64px; /* Высота navbar (можно изменить, если высота другая) */
    left: 0;
    width: 100%;
    z-index: 50; /* Чтобы был поверх других элементов */
    height: 4px; /* Высота прогресс-бара */
    background-color: transparent;
  }


.toast {
  position: relative;
  overflow: hidden;
  animation: toast-slide-in 0.3s ease-out forwards;
  transition: opacity 0.3s ease-out;
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.toast-timer {
  animation: toast-timer-bar 4s linear forwards;
}

@keyframes toast-timer-bar {
  from { width: 100%; }
  to   { width: 0%; }
}


.copyable {
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copyable:hover {
  color: #6366F1;
}

.copyable:active {
  background-color: #bae7ff;
}

.copy-popup {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10;
}

.copyable.copied .copy-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


.my-table {
  overflow-x: auto;
  width: 100%;
  table-layout: fixed;
}
.my-table tr th{
  min-width: 150px;
  white-space: nowrap;
}
.my-table tr td{
  min-width: 150px;
  white-space: nowrap;
}
th.sortable {
  position: relative;
  padding-right: 20px;
}

th.sortable::after {
  content: "⇅";
  position: absolute;
  right: 8px;
  color: #bbb;
  font-size: 0.8rem;
  pointer-events: none;
}

th.sortable.sorted-asc::after {
  content: "↑";
  color: white;
}

th.sortable.sorted-desc::after {
  content: "↓";
  color: white;
}

/*
.simplebar-track.simplebar-vertical{
    background-color: transparent;
    width: 10px;
}
.simplebar-scrollbar:before{
    background-color: #6c5dd3;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}
*/

.simplebar-track.simplebar-vertical {
    width: 8px;
    background: transparent;
    right: 0;
}
.simplebar-scrollbar:before {
    background-color: #6c5dd3;
    border-radius: 4px;
}

/*
.simplebar-track:hover .simplebar-scrollbar:before {
    opacity: 1;
}
*/

/* Стили для option в селектах */
select option {
  background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
  color: rgb(255, 255, 255) !important;
  padding: 0.5rem;
}

select option:hover,
select option:focus {
  background-color: rgba(99, 102, 241, 0.25) !important; /* indigo с прозрачностью для hover */
  color: rgb(255, 255, 255) !important;
}

select option:checked {
  background-color: rgb(55, 48, 163) !important; /* indigo-800 - тёмное выделение для выбранного */
  color: rgb(255, 255, 255) !important;
}

/* Для селектов с классом gd-select (если используется) */
.gd-select option {
  background-color: rgb(17, 24, 39) !important;
  color: rgb(255, 255, 255) !important;
  padding: 0.5rem;
}

.gd-select option:hover,
.gd-select option:focus {
  background-color: rgba(99, 102, 241, 0.25) !important; /* indigo с прозрачностью для hover */
  color: rgb(255, 255, 255) !important;
}

.gd-select option:checked {
  background-color: rgb(55, 48, 163) !important; /* indigo-800 - тёмное выделение для выбранного */
  color: rgb(255, 255, 255) !important;
}