/* =========================================================
   🏆 CHALLENGER STYLE v2.0 (CLEAN)
   [Discord Reputation & Activity Styles]

   Структура:
   0. Variables
   1. Active Menu Item (рожевий)
   2. Hero Trophy Icon
   3. Hero Title Neon
   4. Challenger Panels
   5. Stats Cards
   6. Tabs
   7. Leaderboard
   8. Activity List
   9. Achievements
   10. Config
   11. Responsive
   ========================================================= */


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎨 0. VARIABLES                                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

:root {
  /* Challenger Amber Theme */
  --challenger-primary: #FF7E00;
  --challenger-primary-rgb: 255, 126, 0;
  --challenger-primary-light: rgba(255, 126, 0, 0.2);
  --challenger-primary-dark: #E06B00;
  --challenger-glow: rgba(255, 126, 0, 0.6);

  /* Reputation level colors */
  --level-neutral: #9E9E9E;
  --level-respected: #4CAF50;
  --level-authoritative: #2196F3;
  --level-legendary: #FF9800;

  /* Rarity colors */
  --rarity-common: #9E9E9E;
  --rarity-uncommon: #4CAF50;
  --rarity-rare: #2196F3;
  --rarity-epic: #9C27B0;
  --rarity-legendary: #FF9800;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎨 1. ACTIVE MENU ITEM (бурштиновий)                     ║
   ║  Перевизначення білого кольору на Amber для Challenger    ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Активна кнопка Challenger (бурштинове світіння) */
.adc-sidebar .menu-item.active[data-module="challenger"] {
  border-color: rgba(255, 126, 0, 0.7) !important;
  background: linear-gradient(180deg, rgba(255, 126, 0, 0.12), rgba(255, 126, 0, 0.04)) !important;
  box-shadow:
    0 4px 11px rgba(0, 0, 0, 0.3),
    0 0 15px rgba(255, 126, 0, 0.4),
    inset 0 0 20px rgba(255, 126, 0, 0.15),
    inset 0 2px 0 rgba(255, 126, 0, 0.3) !important;
}

/* Лівий бурштиновий індикатор */
.adc-sidebar .menu-item.active[data-module="challenger"]::before {
  background: linear-gradient(180deg, #FF7E00, #E06B00) !important;
  box-shadow:
    0 0 12px #FF7E00,
    0 0 20px rgba(255, 126, 0, 0.6) !important;
}

/* Іконка активного Challenger — Amber glow */
.adc-sidebar .menu-item.active[data-module="challenger"] .menu-icon {
  filter:
    drop-shadow(0 0 1px rgba(255, 126, 0, 0.3))
    drop-shadow(0 0 3px rgba(255, 126, 0, 0.9)) !important;
}

/* Текст залишається білим, але з бурштиновим відтінком тіні */
.adc-sidebar .menu-item.active[data-module="challenger"] .menu-text {
  color: #fff !important;
  text-shadow: 0 0 4px rgba(255, 126, 0, 0.8) !important;
}

/* SVG іконки в меню sidebar */
.adc-sidebar .menu-item .menu-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🏆 2. HERO TROPHY ICON                                   ║
   ║  Трофей з анімацією сяйва                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.hero-icon.challenger-trophy {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  overflow: visible;
}

/* Анімована підкладка (базовий стан) - ПОВНІСТЮ НЕЗАЛЕЖНА */
.hero-icon.challenger-trophy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 126, 0, 1) 0%,
    rgba(255, 126, 0, 1) 30%,
    transparent 75%
  );
  opacity: 0.18;
  filter: blur(20px);
  box-shadow: 0 0 40px rgba(255, 126, 0, 0.6);
  transition: all 0.6s ease;
  z-index: -1;
  pointer-events: none;
}

/* Анімована підкладка (активний стан - модуль увімкнений) */
.hero-icon.challenger-trophy:not(.module-off)::before {
  opacity: 0.5;
  width: 100px;
  height: 100px;
  filter: blur(28px);
  box-shadow:
    0 0 60px rgba(255, 126, 0, 0.8),
    0 0 100px rgba(255, 126, 0, 0.5),
    0 0 140px rgba(255, 126, 0, 0.3);
  animation: trophy-neon-pulse-glow 3s ease-in-out infinite;
}

/* Окрема анімація для підкладки - як на головній сторінці */
@keyframes trophy-neon-pulse-glow {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

.hero-icon.challenger-trophy::after {
  display: none;
}

.hero-icon.challenger-trophy .trophy-icon {
  width: 100px;
  height: 100px;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
  animation: trophy-float 3s ease-in-out infinite;
}

@keyframes trophy-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

/* Trophy cup - Amber theme */
.hero-icon.challenger-trophy .trophy-cup {
  fill: url(#trophyAmberGradient);
  stroke: #CC5500;
  stroke-width: 1;
  animation: trophy-shine 2.5s ease-in-out infinite;
}

@keyframes trophy-shine {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(255, 126, 0, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 126, 0, 0.8));
  }
}

.hero-icon.challenger-trophy .trophy-handle {
  fill: none;
  stroke: url(#trophyAmberGradient);
  stroke-width: 4;
  stroke-linecap: round;
}

.hero-icon.challenger-trophy .trophy-base {
  fill: url(#trophyAmberGradient);
  stroke: #CC5500;
  stroke-width: 0.5;
}

.hero-icon.challenger-trophy .trophy-stem {
  fill: url(#trophyAmberGradient);
}

/* Inner shine effect */
.hero-icon.challenger-trophy .trophy-inner-shine {
  fill: rgba(255, 255, 255, 0.3);
  animation: inner-shine-pulse 2s ease-in-out infinite;
}

@keyframes inner-shine-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

/* Number "1" inside */
.hero-icon.challenger-trophy .trophy-number {
  fill: #FF7E00;
  font-weight: bold;
  animation: number-glow 2s ease-in-out infinite;
}

@keyframes number-glow {
  0%, 100% {
    fill: #FF7E00;
    filter: drop-shadow(0 0 2px rgba(255, 126, 0, 0.5));
  }
  50% {
    fill: #FFA033;
    filter: drop-shadow(0 0 6px rgba(255, 126, 0, 0.9));
  }
}

/* Module OFF State */
.hero-icon.challenger-trophy.module-off {
  opacity: 0.5;
}

/* Підкладка майже непомітна коли модуль вимкнений */
.hero-icon.challenger-trophy.module-off::before {
  opacity: 0.05;
  width: 80px;
  height: 80px;
  filter: blur(15px);
  box-shadow: none;
  animation: none;
}

.hero-icon.challenger-trophy.module-off .trophy-icon {
  opacity: 0.4;
  filter: grayscale(1);
  animation: none;
}

.hero-icon.challenger-trophy.module-off .trophy-star {
  display: none;
}

.hero-icon.challenger-trophy.module-off .trophy-cup,
.hero-icon.challenger-trophy.module-off .trophy-inner-shine,
.hero-icon.challenger-trophy.module-off .trophy-number {
  animation: none;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🏷️ 3. HERO TITLE NEON                                   ║
   ║  Amber градієнт (ліва частина) + фіолетовий (права)       ║
   ╚═══════════════════════════════════════════════════════════╝ */

.hero-title-text.module-active {
  background: linear-gradient(
    90deg,
    #D45500 0%,
    #FF5500 15%,
    #FF7E00 30%,
    #C8805A 48%,
    #B07090 62%,
    #9B60B0 78%,
    #9B4DCA 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 1;
}

.hero-title-text.module-active::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: #ffffff00;
  filter: drop-shadow(2px 3px 0px #000000)
          drop-shadow(3px 2px 0px #000000)
          drop-shadow(0 0 40px rgba(0, 0, 0, 0.8))
          drop-shadow(0 0 25px rgba(155, 92, 255, 0.25));
  z-index: -1;
  pointer-events: none;
}

.hero-title-text.module-active::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 126, 0, 0.4))
          drop-shadow(0 0 6px rgba(155, 92, 255, 0.3));
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📦 4. CHALLENGER PANELS                                  ║
   ║  Головні блоки з рожевим neon                             ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-panel {
  margin-bottom: 10px;
}

.challenger-panel:last-child {
  margin-bottom: 0;
}

/* Контент панелі — padding для вмісту під section-header */
.challenger-panel .panel-content {
  padding: 20px;
}

/* Neon active state для панелі */
.challenger-panel.neon-active {
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5),
    inset 0 3px 0 rgba(255, 126, 0, 0.9),
    0 -5px 20px rgba(255, 126, 0, 0.3);
}

/* Section header в панелях */
.challenger-panel .section-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.challenger-panel .section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.challenger-panel .section-title h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Section header accent - Amber */
.challenger-panel .section-header-accent {
  background: linear-gradient(180deg, var(--challenger-primary), var(--challenger-primary-dark));
  box-shadow: 0 0 12px var(--challenger-glow);
}

/* Section icon - Amber */
.challenger-panel .section-icon {
  color: var(--challenger-primary);
}

/* Відступи для контенту панелі config */
.challenger-panel > .config-tabs,
.challenger-panel > .config-tab-content,
.challenger-panel > .config-save-row,
.challenger-panel > .content-grid,
.challenger-panel > .achievements-grid {
  margin-left: 26px;
  margin-right: 26px;
}

.challenger-panel > *:last-child {
  margin-bottom: 26px;
}


/* Toggle switch використовує базовий фіолетовий стиль з main-style */


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📑 4.7 CONFIG TABS (Amber Style)                         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-panel .config-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.challenger-panel .config-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.challenger-panel .config-tab .tab-icon {
  font-size: 18px;
}

.challenger-panel .config-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

.challenger-panel .config-tab.active {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

/* Tab Content */
.challenger-panel .config-tab-content {
  position: relative;
}

.challenger-panel .tab-pane {
  display: none;
}

.challenger-panel .tab-pane.active {
  display: block;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  ⚙️ 4.8 CONFIG GRID & FIELDS                              ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.challenger-panel .config-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.challenger-panel .config-group.config-full {
  margin-top: 16px;
}

.challenger-panel .config-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.challenger-panel .config-label .material-symbols-outlined {
  font-size: 16px;
  color: var(--challenger-primary);
}

.challenger-panel .adc-input {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
}

.challenger-panel .adc-input:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 3px var(--challenger-primary-light);
}

.challenger-panel .config-group small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Info Box */
.config-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 126, 0, 0.1);
  border: 1px solid rgba(255, 126, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 20px;
}

.config-info-box .material-symbols-outlined {
  font-size: 20px;
  color: var(--challenger-primary);
}

.config-info-box p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.config-info-box code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--challenger-primary);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  💾 4.9 SAVE BUTTON ROW                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.config-save-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.challenger-panel .save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--challenger-primary), var(--challenger-primary-dark));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.challenger-panel .save-btn:hover {
  box-shadow: 0 0 20px var(--challenger-glow);
  transform: translateY(-1px);
}

.challenger-panel .save-btn .btn-icon {
  font-size: 18px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔄 4.10 REFRESH BUTTON                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-panel .refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.challenger-panel .refresh-btn:hover {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.challenger-panel .refresh-btn .btn-icon {
  font-size: 18px;
}

/* Badge in header */
.challenger-panel .section-header-controls .badge {
  padding: 4px 10px;
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.3);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--challenger-primary);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📊 4.5 HEADER STATS (mini stats in section header)       ║
   ╚═══════════════════════════════════════════════════════════╝ */

.header-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.mini-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.mini-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mini-stat-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.icon-btn .material-symbols-outlined {
  font-size: 20px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📊 5. STATS CARDS                                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(30, 35, 45, 0.9), rgba(20, 25, 35, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon .material-symbols-outlined {
  font-size: 28px;
}

.stat-card.reputation .stat-icon {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  color: #FFD700;
}

.stat-card.activity .stat-icon {
  background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 69, 0, 0.1));
  color: #FF4500;
}

.stat-card.achievements .stat-icon {
  background: linear-gradient(135deg, rgba(255, 126, 0, 0.2), rgba(255, 126, 0, 0.1));
  color: var(--challenger-primary);
}

.stat-card.streaks .stat-icon {
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(138, 43, 226, 0.1));
  color: #8A2BE2;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📑 6. TABS                                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

.challenger-tabs {
  display: flex;
  gap: 8px;
  background: rgba(20, 25, 35, 0.6);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 0 20px 0 20px;
}

.challenger-tabs .tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.challenger-tabs .tab .material-symbols-outlined {
  font-size: 20px;
}

.challenger-tabs .tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

.challenger-tabs .tab.active {
  background: var(--challenger-primary-light);
  color: var(--challenger-primary);
  box-shadow: 0 0 20px var(--challenger-glow);
}

.challenger-tabs .btn-refresh {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.challenger-tabs .btn-refresh:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.challenger-tabs .btn-refresh .material-symbols-outlined {
  font-size: 20px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📝 7. TAB CONTENT                                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  padding: 20px;
}

.content-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.column-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-title .badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--challenger-primary-light);
  color: var(--challenger-primary);
  border-radius: 10px;
  font-weight: 500;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  padding: 20px;
}

.config-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-column .column-title {
  margin-bottom: 4px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📦 8. PANELS                                             ║
   ╚═══════════════════════════════════════════════════════════╝ */

.panel {
  background: linear-gradient(135deg, rgba(30, 35, 45, 0.9), rgba(20, 25, 35, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.panel-badge {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--challenger-primary-light);
  color: var(--challenger-primary);
  border-radius: 20px;
}

.panel-body {
  padding: 16px 20px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🏆 9. LEADERBOARD                                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.leaderboard-item.top-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.leaderboard-item.top-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05));
  border: 1px solid rgba(192, 192, 192, 0.3);
}

.leaderboard-item.top-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05));
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.leaderboard-item .rank {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.leaderboard-item.top-1 .rank { color: #FFD700; }
.leaderboard-item.top-2 .rank { color: #C0C0C0; }
.leaderboard-item.top-3 .rank { color: #CD7F32; }

.leaderboard-item .username {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-item .reputation,
.leaderboard-item .streak {
  font-size: 14px;
  font-weight: 600;
  color: var(--challenger-primary);
}

.leaderboard-item .level {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.leaderboard-item .level.neutral {
  background: rgba(158, 158, 158, 0.2);
  color: var(--level-neutral);
}

.leaderboard-item .level.respected {
  background: rgba(76, 175, 80, 0.2);
  color: var(--level-respected);
}

.leaderboard-item .level.authoritative {
  background: rgba(33, 150, 243, 0.2);
  color: var(--level-authoritative);
}

.leaderboard-item .level.legendary {
  background: rgba(255, 152, 0, 0.2);
  color: var(--level-legendary);
}

.leaderboard-item .bonus {
  font-size: 12px;
  font-weight: 600;
  color: #4CAF50;
}

/* Daily Limits Indicators */
.leaderboard-item .daily-limits {
  display: flex;
  gap: 8px;
  margin-left: auto;
  font-size: 10px;
}

.leaderboard-item .daily-give,
.leaderboard-item .daily-receive {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
}

.leaderboard-item .daily-give .material-symbols-outlined,
.leaderboard-item .daily-receive .material-symbols-outlined {
  font-size: 12px;
}

.leaderboard-item .daily-give {
  color: rgba(76, 175, 80, 0.7);
}

.leaderboard-item .daily-receive {
  color: rgba(33, 150, 243, 0.7);
}

.leaderboard-item .daily-give.limit-reached,
.leaderboard-item .daily-receive.limit-reached {
  background: rgba(244, 67, 54, 0.15);
  color: #F44336;
}

.leaderboard-item .longest {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📊 10. REPUTATION LEVELS                                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.levels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.level-item.neutral { border-left: 3px solid var(--level-neutral); }
.level-item.respected { border-left: 3px solid var(--level-respected); }
.level-item.authoritative { border-left: 3px solid var(--level-authoritative); }
.level-item.legendary { border-left: 3px solid var(--level-legendary); }

.level-range {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
}

.level-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.level-bonus {
  font-size: 16px;
  font-weight: 700;
  color: #4CAF50;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔥 11. ACTIVITY LIST                                     ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Activity & Streaks Sections - Full Width */
.activity-section,
.streaks-section {
  margin: 0 26px 24px 26px;
}

.activity-section .column-title,
.streaks-section .column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px 0;
}

.activity-section .column-title .material-symbols-outlined,
.streaks-section .column-title .material-symbols-outlined {
  font-size: 18px;
  color: var(--challenger-primary);
}

/* Activity Table Header */
.activity-table-header {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) repeat(4, 70px) 80px 90px;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.activity-table-header span {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-table-header .material-symbols-outlined {
  font-size: 14px;
}

.activity-table-header .col-user {
  justify-content: flex-start;
}

.activity-table-header .col-stat {
  justify-content: center;
}

.activity-table-header .col-points {
  justify-content: flex-end;
}

.activity-table-header .col-status {
  justify-content: center;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  max-height: 350px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 0 8px 8px;
}

/* Activity Item - Table Row */
.activity-item {
  display: grid;
  grid-template-columns: minmax(140px, 1.5fr) repeat(4, 70px) 80px 90px;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.activity-item.active {
  background: rgba(76, 175, 80, 0.08);
}

.activity-item.active:hover {
  background: rgba(76, 175, 80, 0.12);
}

/* User Column */
.activity-item .username {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stat Columns */
.activity-item .stat-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.activity-item .stat-value .number {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.activity-item .stat-value .unit {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: lowercase;
}

/* Stat colors */
.activity-item .stat-value.voice .number { color: #64B5F6; }
.activity-item .stat-value.messages .number { color: #81C784; }
.activity-item .stat-value.reactions .number { color: #FFB74D; }
.activity-item .stat-value.tasks .number { color: #BA68C8; }

/* Zero values */
.activity-item .stat-value.zero .number {
  color: rgba(255, 255, 255, 0.2);
}

/* Points Column */
.activity-item .points {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--challenger-primary);
}

.activity-item .points .target {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
}

/* Status Column */
.activity-item .status {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.activity-item .status.active {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.activity-item .status.inactive {
  background: rgba(158, 158, 158, 0.15);
  color: rgba(158, 158, 158, 0.7);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎖️ 12. ACHIEVEMENTS                                     ║
   ╚═══════════════════════════════════════════════════════════╝ */

.achievements-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.achievements-category {
  background: var(--bg-soft, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  padding: 20px;
}

.category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px 0;
}

.category-title .category-icon {
  font-size: 20px;
}

.category-title .category-count {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-left: auto;
}

.achievements-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

/* Achievement Card - Main Display (Block 4) */
.achievements-grid .achievement-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.achievements-grid .achievement-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Level-based card left border */
.achievements-grid .achievement-card.level-1 { border-left: 3px solid #9E9E9E; }
.achievements-grid .achievement-card.level-2 { border-left: 3px solid #4CAF50; }
.achievements-grid .achievement-card.level-3 { border-left: 3px solid #2196F3; }
.achievements-grid .achievement-card.level-4 { border-left: 3px solid #9C27B0; }
.achievements-grid .achievement-card.level-5 { border-left: 3px solid #FF9800; }
.achievements-grid .achievement-card.level-6 { border-left: 3px solid #E91E63; }

/* Achievement Icon */
.achievements-grid .achievement-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.achievements-grid .achievement-icon .material-symbols-outlined {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
}

/* Icon colors by level */
.achievements-grid .achievement-icon.level-1 .material-symbols-outlined { color: #9E9E9E; }
.achievements-grid .achievement-icon.level-2 .material-symbols-outlined { color: #4CAF50; }
.achievements-grid .achievement-icon.level-3 .material-symbols-outlined { color: #2196F3; }
.achievements-grid .achievement-icon.level-4 .material-symbols-outlined { color: #9C27B0; }
.achievements-grid .achievement-icon.level-5 .material-symbols-outlined { color: #FF9800; }
.achievements-grid .achievement-icon.level-6 .material-symbols-outlined { color: #E91E63; }

/* Achievement Info */
.achievements-grid .achievement-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.achievements-grid .achievement-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievements-grid .achievement-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Achievement Meta */
.achievements-grid .achievement-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 75px;
}

.achievements-grid .achievement-level {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
}

/* Level text colors */
.achievements-grid .achievement-level.level-1 { color: #9E9E9E; }
.achievements-grid .achievement-level.level-2 { color: #4CAF50; }
.achievements-grid .achievement-level.level-3 { color: #2196F3; }
.achievements-grid .achievement-level.level-4 { color: #9C27B0; }
.achievements-grid .achievement-level.level-5 { color: #FF9800; }
.achievements-grid .achievement-level.level-6 { color: #E91E63; }

.achievements-grid .achievement-points {
  font-size: 12px;
  font-weight: 600;
  color: var(--challenger-primary);
  padding: 2px 8px;
  background: rgba(255, 126, 0, 0.12);
  border-radius: 4px;
}

/* Legacy support */
.achievement-emoji {
  font-size: 28px;
  min-width: 36px;
  text-align: center;
}

.achievement-rewards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.achievement-rewards .reward {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.achievement-rewards .points {
  background: rgba(255, 126, 0, 0.2);
  color: var(--challenger-primary);
}

.achievement-rewards .xp {
  background: rgba(33, 150, 243, 0.2);
  color: #2196F3;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  ⚙️ 13. CONFIG                                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.config-panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.config-group label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.config-group input {
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
}

.config-group input:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 3px var(--challenger-primary-light);
}

.actions-panel .panel-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn .material-symbols-outlined {
  font-size: 20px;
}

.btn-primary {
  background: var(--challenger-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--challenger-primary-dark);
  box-shadow: 0 0 20px var(--challenger-glow);
}

.btn-danger {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.btn-danger:hover {
  background: rgba(244, 67, 54, 0.3);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔄 14. CUSTOM SCROLLBAR                                  ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Webkit browsers (Chrome, Safari, Edge) */
.activity-list::-webkit-scrollbar,
.leaderboard::-webkit-scrollbar,
.achievements-grid::-webkit-scrollbar,
.panel-body::-webkit-scrollbar {
  width: 6px;
}

.activity-list::-webkit-scrollbar-track,
.leaderboard::-webkit-scrollbar-track,
.achievements-grid::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-thumb,
.leaderboard::-webkit-scrollbar-thumb,
.achievements-grid::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--challenger-primary) 0%,
    var(--challenger-primary-dark) 100%
  );
  border-radius: 3px;
  transition: background 0.2s ease;
}

.activity-list::-webkit-scrollbar-thumb:hover,
.leaderboard::-webkit-scrollbar-thumb:hover,
.achievements-grid::-webkit-scrollbar-thumb:hover,
.panel-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    var(--challenger-primary) 0%,
    var(--challenger-primary) 100%
  );
}

/* Firefox */
.activity-list,
.leaderboard,
.achievements-grid,
.panel-body {
  scrollbar-width: thin;
  scrollbar-color: var(--challenger-primary) rgba(255, 255, 255, 0.02);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🛠️ 15. UTILITIES                                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.loading-placeholder,
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📱 16. RESPONSIVE                                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  .challenger-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .challenger-tabs {
    flex-wrap: wrap;
  }

  .challenger-tabs .tab {
    flex: 1 1 45%;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-item {
    grid-template-columns: 30px 1fr auto;
  }

  .leaderboard-item .level,
  .leaderboard-item .bonus {
    display: none;
  }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📋 17. CONFIG SECTIONS                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.config-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.config-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.config-hint {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔘 18. ICON BUTTONS                                      ║
   ╚═══════════════════════════════════════════════════════════╝ */

.btn-icon-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.3);
  border-radius: 6px;
  color: var(--challenger-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-icon-small:hover {
  background: rgba(255, 126, 0, 0.25);
  box-shadow: 0 0 10px rgba(255, 126, 0, 0.3);
}

.btn-icon-small .material-symbols-outlined {
  font-size: 18px;
}

/* Column title with button */
.column-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-title .btn-icon-small {
  width: 24px;
  height: 24px;
}

.column-title .btn-icon-small .material-symbols-outlined {
  font-size: 16px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📊 19. REACTIONS TABLE                                   ║
   ╚═══════════════════════════════════════════════════════════╝ */

.reactions-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

.reactions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.reactions-table th {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.reactions-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  vertical-align: middle;
}

.reactions-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.reactions-table .col-emoji {
  width: 50px !important;
  text-align: center;
}

.reactions-table .col-name {
  width: auto;
}

.reactions-table .col-value {
  width: 70px !important;
  text-align: center;
}

.reactions-table .col-actions {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  text-align: center;
}

.reactions-table .reaction-emoji {
  font-size: 20px;
}

.reactions-table .reaction-value {
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.reactions-table .reaction-value.positive {
  color: #4CAF50;
}

.reactions-table .reaction-value.negative {
  color: #F44336;
}

.reactions-table .action-btns {
  display: inline-flex !important;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
}

.reactions-table .action-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.reactions-table .action-btn:hover {
  background: rgba(255, 126, 0, 0.15) !important;
  border-color: rgba(255, 126, 0, 0.3) !important;
  color: var(--challenger-primary) !important;
}

.reactions-table .action-btn.delete:hover {
  background: rgba(244, 67, 54, 0.2) !important;
  border-color: rgba(244, 67, 54, 0.3) !important;
  color: #F44336 !important;
}

.reactions-table .action-btn .material-symbols-outlined {
  font-size: 16px !important;
  line-height: 1;
}

.reactions-table .empty-row td {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 20px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🏷️ 20. ROLE CHIPS                                       ║
   ╚═══════════════════════════════════════════════════════════╝ */

.roles-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(155, 77, 202, 0.15);
  border: 1px solid rgba(155, 77, 202, 0.3);
  border-radius: 16px;
  font-size: 12px;
  color: #B388FF;
}

.role-chip .role-name {
  font-weight: 500;
}

.role-chip .role-multiplier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(155, 77, 202, 0.2);
  border-radius: 8px;
  color: #CE93D8;
}

.role-chip .role-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}

.role-chip .role-remove:hover {
  background: rgba(244, 67, 54, 0.3);
  color: #F44336;
}

.role-chip .role-remove .material-symbols-outlined {
  font-size: 14px;
}

.roles-chips .empty-roles {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-style: italic;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🪟 21. MODALS (Purple Nexus Style + Amber Accents)       ║
   ╚═══════════════════════════════════════════════════════════╝ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}

.modal-content {
  position: relative;
  background: linear-gradient(180deg, rgba(155, 92, 255, 0.08) 0%, #0d1117 100%);
  border: 1px solid rgba(155, 92, 255, 0.35);
  border-radius: 16px;
  width: 90%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(155, 92, 255, 0.15),
    inset 0 1px 0 rgba(155, 92, 255, 0.3);
  animation: modalSlideIn 0.3s ease;
  overflow: hidden;
}

/* Top accent line - Amber for Challenger module identity */
.modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--challenger-primary), var(--challenger-primary-dark));
  border-radius: 16px 16px 0 0;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content.modal-sm {
  max-width: 460px;
}

.modal-content.modal-md {
  max-width: 640px;
}

.modal-content.modal-lg {
  max-width: 900px;
}

/* Modal Header */
.modal-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(155, 92, 255, 0.15);
  border: 1px solid rgba(155, 92, 255, 0.3);
}

.modal-icon .material-symbols-outlined {
  font-size: 22px;
  color: #9b5cff;
}

/* Challenger-specific modal icon - Amber accent for module identity */
.challenger-modal-icon {
  background: rgba(255, 126, 0, 0.15) !important;
  border-color: rgba(255, 126, 0, 0.3) !important;
}

.challenger-modal-icon .material-symbols-outlined {
  color: var(--challenger-primary) !important;
}

/* Role icon uses purple */
.challenger-modal-icon.role-icon {
  background: rgba(155, 92, 255, 0.15) !important;
  border-color: rgba(155, 92, 255, 0.3) !important;
}

.challenger-modal-icon.role-icon .material-symbols-outlined {
  color: #9b5cff !important;
}

.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.modal-subtitle {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: rgba(237, 66, 69, 0.15);
  border-color: rgba(237, 66, 69, 0.4);
  color: #ED4245;
}

/* Modal Body */
.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Modal Field */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-label .material-symbols-outlined {
  font-size: 16px;
  color: #9b5cff;
}

/* Modal Inputs - Purple style like Nexus */
.modal-input,
.modal-textarea,
.modal-select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(155, 92, 255, 0.2);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.modal-input:focus,
.modal-textarea:focus,
.modal-select:focus {
  outline: none;
  border-color: #9b5cff;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(155, 92, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
}

.modal-input::placeholder,
.modal-textarea::placeholder {
  color: #4a4f57;
}

/* Modal Select */
.modal-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b5cff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.modal-select option {
  background: #0d1117;
  color: #ffffff;
  padding: 12px;
}

/* Modal Hint */
.modal-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

.modal-hint .material-symbols-outlined {
  font-size: 14px;
  color: rgba(155, 92, 255, 0.6);
  flex-shrink: 0;
}

/* Modal Footer */
.modal-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

/* Modal Buttons */
.modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.modal-btn:active {
  transform: scale(0.97);
}

.modal-btn .material-symbols-outlined {
  font-size: 18px;
}

.modal-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #B9BBBE;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #9b5cff, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(155, 92, 255, 0.3);
}

.modal-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(155, 92, 255, 0.4);
  transform: translateY(-1px);
}

.modal-btn-primary:active {
  transform: scale(0.97) translateY(0);
}

.modal-btn.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

.modal-btn.btn-sm .material-symbols-outlined {
  font-size: 16px;
}

.modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📝 22. FORM ELEMENTS (Legacy Support)                    ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Legacy form-group support (for levels edit etc) */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.form-group small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* Button variants */
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-sm .material-symbols-outlined {
  font-size: 16px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Modal body scrollbar */
.modal-body::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--challenger-primary), var(--challenger-primary-dark));
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--challenger-primary);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📋 23. LEVELS EDIT LIST                                  ║
   ╚═══════════════════════════════════════════════════════════╝ */

.levels-edit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-edit-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 80px auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.level-edit-item .form-group {
  margin-bottom: 0;
}

.level-edit-item .form-label {
  margin-bottom: 4px;
  font-size: 10px;
}

.level-edit-item .adc-input {
  padding: 8px 10px;
  font-size: 13px;
}

.level-edit-item .level-color-preview {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.level-edit-item .btn-delete-level {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.2);
  border-radius: 8px;
  color: #F44336;
  cursor: pointer;
  transition: all 0.15s ease;
}

.level-edit-item .btn-delete-level:hover {
  background: rgba(244, 67, 54, 0.2);
}

.levels-edit-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📐 24. REPUTATION CONFIG LAYOUT (Two Columns)            ║
   ╚═══════════════════════════════════════════════════════════╝ */

.reputation-config-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.config-column-left,
.config-column-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Reactions Section */
.reactions-section {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  overflow: visible;
}

.reactions-section.positive {
  border-left: 3px solid #4CAF50;
}

.reactions-section.negative {
  border-left: 3px solid #F44336;
}

/* Ensure tables inside sections show fully */
.reactions-section .reactions-table-wrapper {
  margin: 0 -4px;
}

.reactions-section .reactions-table {
  min-width: 100%;
}

.reactions-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reactions-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.reactions-section-title .material-symbols-outlined {
  font-size: 18px;
}

.reactions-section.positive .reactions-section-title .material-symbols-outlined {
  color: #4CAF50;
}

.reactions-section.negative .reactions-section-title .material-symbols-outlined {
  color: #F44336;
}

/* Negative button style */
.btn-icon-small.negative {
  background: rgba(244, 67, 54, 0.15);
  border-color: rgba(244, 67, 54, 0.3);
  color: #F44336;
}

.btn-icon-small.negative:hover {
  background: rgba(244, 67, 54, 0.25);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
}

/* Role Multipliers Section */
.role-multipliers-section {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive layout */
@media (max-width: 900px) {
  .reputation-config-layout {
    grid-template-columns: 1fr;
  }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔥 24.5 ACTIVITY CONFIG LAYOUT                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

.activity-config-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

/* Activity Section */
.activity-section {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}

.activity-section.bonuses {
  border-left: 3px solid #4CAF50;
}

.activity-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.activity-section-title .material-symbols-outlined {
  font-size: 18px;
  color: var(--challenger-primary);
}

.activity-section.bonuses .activity-section-title .material-symbols-outlined {
  color: #4CAF50;
}

/* Activity Points Grid */
.activity-points-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.activity-points-grid .config-group {
  margin-bottom: 0;
}

.activity-points-grid .config-label {
  font-size: 11px;
}

.activity-points-grid .adc-input {
  padding: 8px 10px;
  font-size: 13px;
}

/* Bonuses List */
.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.bonus-item:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

.bonus-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.bonus-icon .material-symbols-outlined {
  font-size: 20px;
}

.bonus-icon.daily {
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.bonus-icon.weekly {
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: #2196F3;
}

.bonus-icon.monthly {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.bonus-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bonus-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.bonus-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.bonus-value-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bonus-plus {
  font-size: 14px;
  font-weight: 600;
  color: #4CAF50;
}

.bonus-input {
  width: 60px !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  text-align: center;
  font-weight: 600;
}

/* Bonus Calculator */
.bonus-calculator {
  margin-top: 16px;
  padding: 12px;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.15);
  border-radius: 8px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.calc-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.calc-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.calc-value {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.7);
}

.calc-value strong {
  color: #4CAF50;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 900px) {
  .activity-config-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .activity-points-grid {
    grid-template-columns: 1fr;
  }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎨 25. LEVELS EDIT IMPROVED                              ║
   ╚═══════════════════════════════════════════════════════════╝ */

.level-edit-item {
  display: grid;
  grid-template-columns: 50px 80px 80px 1fr 80px auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.level-edit-item:hover {
  border-color: rgba(255, 126, 0, 0.2);
  background: rgba(0, 0, 0, 0.25);
}

.level-edit-item .form-group {
  margin-bottom: 0;
}

.level-edit-item .form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.level-edit-item .adc-input {
  padding: 8px 10px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  width: 100%;
}

.level-edit-item .adc-input:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 2px rgba(255, 126, 0, 0.15);
}

/* Color picker input */
.level-edit-item .form-group-color {
  display: flex;
  flex-direction: column;
}

.level-edit-item .level-color-input {
  width: 100%;
  height: 36px;
  padding: 2px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.level-edit-item .level-color-input:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.level-edit-item .level-color-input:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 2px rgba(255, 126, 0, 0.15);
}

/* Remove default color picker styling */
.level-edit-item .level-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.level-edit-item .level-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.level-edit-item .level-color-input::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.btn-delete-level {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.2);
  border-radius: 8px;
  color: #F44336;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-delete-level:hover {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.4);
}

.btn-delete-level .material-symbols-outlined {
  font-size: 18px;
}

/* Responsive for levels edit */
@media (max-width: 768px) {
  .level-edit-item {
    grid-template-columns: 50px 1fr 1fr 1fr 80px auto;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .level-edit-item {
    grid-template-columns: 50px 1fr 1fr;
    gap: 10px;
  }

  .level-edit-item .form-group:nth-child(4) {
    grid-column: span 2;
  }

  .level-edit-item .form-group:nth-child(5) {
    grid-column: 2;
  }

  .level-edit-item .btn-delete-level {
    grid-column: 3;
    width: 100%;
    justify-content: center;
  }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🏆 26. ACHIEVEMENTS CONFIG TAB                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Toolbar */
.achievements-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.search-box:focus-within {
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 2px rgba(255, 126, 0, 0.15);
}

.search-box .material-symbols-outlined {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
}

.search-box input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  width: 180px;
  outline: none;
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.toolbar-select {
  padding: 8px 32px 8px 12px;
  background: var(--bg-soft, rgba(0, 0, 0, 0.3));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 140px;
}

.toolbar-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.4);
}

.toolbar-select:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 2px rgba(255, 126, 0, 0.2);
}

/* Select option styling */
.toolbar-select option {
  background: #1a1520;
  color: #fff;
  padding: 10px;
}

.achievements-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Category Tabs */
.category-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}

.category-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 0;
}

/* Row with icon + text */
.category-tab-row {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.category-tab-row span:not(.material-symbols-outlined) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-tab .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
}

.category-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

.category-tab.active {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.category-count {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.category-tab.active .category-count {
  background: rgba(255, 126, 0, 0.3);
}

/* Achievements Config Grid */
.achievements-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Achievement Card */
.achievement-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.achievement-card:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.achievement-card.secret {
  border-color: rgba(233, 30, 99, 0.3);
  background: rgba(233, 30, 99, 0.05);
}

.achievement-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.3);
}

.achievement-card-icon .material-symbols-outlined {
  font-size: 22px;
  color: var(--challenger-primary);
}

/* Level colors */
.achievement-card[data-level="1"] .achievement-card-icon {
  background: rgba(158, 158, 158, 0.15);
  border-color: rgba(158, 158, 158, 0.3);
}
.achievement-card[data-level="1"] .achievement-card-icon .material-symbols-outlined {
  color: #9E9E9E;
}

.achievement-card[data-level="2"] .achievement-card-icon {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.3);
}
.achievement-card[data-level="2"] .achievement-card-icon .material-symbols-outlined {
  color: #4CAF50;
}

.achievement-card[data-level="3"] .achievement-card-icon {
  background: rgba(33, 150, 243, 0.15);
  border-color: rgba(33, 150, 243, 0.3);
}
.achievement-card[data-level="3"] .achievement-card-icon .material-symbols-outlined {
  color: #2196F3;
}

.achievement-card[data-level="4"] .achievement-card-icon {
  background: rgba(156, 39, 176, 0.15);
  border-color: rgba(156, 39, 176, 0.3);
}
.achievement-card[data-level="4"] .achievement-card-icon .material-symbols-outlined {
  color: #9C27B0;
}

.achievement-card[data-level="5"] .achievement-card-icon {
  background: rgba(255, 152, 0, 0.15);
  border-color: rgba(255, 152, 0, 0.3);
}
.achievement-card[data-level="5"] .achievement-card-icon .material-symbols-outlined {
  color: #FF9800;
}

.achievement-card[data-level="6"] .achievement-card-icon {
  background: rgba(233, 30, 99, 0.15);
  border-color: rgba(233, 30, 99, 0.3);
}
.achievement-card[data-level="6"] .achievement-card-icon .material-symbols-outlined {
  color: #E91E63;
}

.achievement-card-content {
  flex: 1;
  min-width: 0;
}

.achievement-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.achievement-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achievement-card-id {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.achievement-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.achievement-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievement-card-category {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
}

.achievement-card-points {
  font-size: 11px;
  font-weight: 600;
  color: #4CAF50;
}

/* Secret Section */
.secret-section {
  margin-top: 20px;
  border: 1px solid rgba(233, 30, 99, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.secret-section.collapsed .secret-grid {
  display: none;
}

.secret-section.collapsed .chevron {
  transform: rotate(0deg);
}

.secret-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(233, 30, 99, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

.secret-header:hover {
  background: rgba(233, 30, 99, 0.12);
}

.secret-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #E91E63;
  font-weight: 600;
  font-size: 13px;
}

.secret-header-left .material-symbols-outlined {
  font-size: 18px;
}

.secret-count {
  padding: 2px 8px;
  background: rgba(233, 30, 99, 0.2);
  border-radius: 10px;
  font-size: 11px;
}

.secret-header .chevron {
  color: #E91E63;
  font-size: 20px;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.secret-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
}

/* Disabled Achievements Section - muted style */
#disabled-section {
  border-color: rgba(255, 255, 255, 0.1);
}
#disabled-section .secret-header {
  background: rgba(255, 255, 255, 0.04);
}
#disabled-section .secret-header:hover {
  background: rgba(255, 255, 255, 0.07);
}
#disabled-section .secret-header-left {
  color: #9e9e9e;
}
#disabled-section .secret-count {
  background: rgba(255, 255, 255, 0.1);
  color: #9e9e9e;
}
#disabled-section .chevron {
  color: #9e9e9e;
}

/* Achievements Actions */
.achievements-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 20px;
}

.achievements-actions small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎨 27. ACHIEVEMENT MODAL (Redesigned v2)                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Modal size */
.achievement-modal {
  max-width: 1100px;
}

.achievement-modal .modal-body {
  padding: 16px 20px;
  overflow: visible;
}

/* ── Two-column layout ──────────────────────────────────── */

.ach-config-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ach-config-left,
.ach-config-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
}

.ach-config-left::-webkit-scrollbar,
.ach-config-right::-webkit-scrollbar {
  width: 4px;
}

.ach-config-left::-webkit-scrollbar-track,
.ach-config-right::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.ach-config-left::-webkit-scrollbar-thumb,
.ach-config-right::-webkit-scrollbar-thumb {
  background: rgba(255, 126, 0, 0.3);
  border-radius: 2px;
}

/* ── Section pattern (Nexus-style) ──────────────────────── */

.ach-section {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.ach-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: #dcddde;
}

.ach-section-header .material-symbols-outlined {
  font-size: 18px;
  color: var(--challenger-primary);
}

.ach-section-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ach-section-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ach-info-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 126, 0, 0.1);
  border: 1px solid rgba(255, 126, 0, 0.2);
  border-radius: 6px;
  color: var(--challenger-primary);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.ach-info-btn:hover {
  background: rgba(255, 126, 0, 0.2);
  border-color: rgba(255, 126, 0, 0.4);
}

.ach-info-btn .material-symbols-outlined {
  font-size: 16px;
}

/* ── Toggle Cards (display options) ─────────────────────── */

.ach-toggles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.ach-toggle-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ach-toggle-card:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.ach-toggle-card input {
  display: none;
}

.ach-toggle-card input:checked + .toggle-card-icon {
  background: rgba(255, 126, 0, 0.2);
  color: var(--challenger-primary);
  box-shadow: 0 0 12px rgba(255, 126, 0, 0.25);
}

.ach-toggle-card input:checked ~ .toggle-card-text .toggle-card-title {
  color: var(--challenger-primary);
}

.ach-toggle-card .toggle-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: #72767d;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ach-toggle-card .toggle-card-icon .material-symbols-outlined {
  font-size: 18px;
}

.ach-toggle-card .toggle-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ach-toggle-card .toggle-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #b9bbbe;
  transition: color 0.2s ease;
}

.ach-toggle-card .toggle-card-hint {
  font-size: 10px;
  color: #72767d;
}

/* ── Card Preview Area ──────────────────────────────────── */

.ach-preview-body {
  position: relative;
}

.ach-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ach-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 126, 0, 0.3);
  border-radius: 6px;
  color: var(--challenger-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ach-btn-outline:hover {
  background: rgba(255, 126, 0, 0.1);
  border-color: rgba(255, 126, 0, 0.5);
}

.ach-btn-outline .material-symbols-outlined {
  font-size: 16px;
}

.ach-btn-outline .rotating {
  animation: card-spin 1s linear infinite;
}

.ach-preview-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.ach-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.ach-preview-close:hover {
  background: rgba(237, 66, 69, 0.3);
  border-color: rgba(237, 66, 69, 0.5);
  color: #ED4245;
}

.ach-preview-close .material-symbols-outlined {
  font-size: 16px;
}

/* Card disabled overlay */
.ach-card-disabled-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ach-card-disabled-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.ach-card-disabled-overlay .material-symbols-outlined {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.3);
}

.ach-card-disabled-overlay span:last-child {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── GIF row (inline toggle) ────────────────────────────── */

.ach-gif-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.ach-gif-row .modal-label {
  margin: 0;
  flex-shrink: 0;
}

.ach-gif-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Message preview section ────────────────────────────── */

.ach-msg-preview {
  background: #2f3136;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  min-height: 60px;
}

.ach-msg-preview .embed-color-bar {
  width: 4px;
  background: var(--challenger-primary);
  flex-shrink: 0;
}

.ach-msg-preview .embed-content {
  padding: 12px 16px;
  flex: 1;
}

.ach-msg-preview .embed-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}

.ach-msg-preview .embed-description {
  font-size: 13px;
  color: #dcddde;
  line-height: 1.4;
}

.modal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: all 0.2s ease;
}

.modal-textarea:focus {
  outline: none;
  border-color: var(--challenger-primary);
  box-shadow: 0 0 0 2px rgba(255, 126, 0, 0.15);
}

/* Conditions List */
.conditions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.condition-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.condition-type {
  flex: 1;
}

.condition-desc {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

.condition-type select {
  width: 100%;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.condition-operator {
  width: 60px;
}

.condition-operator select {
  width: 100%;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.condition-value {
  width: 80px;
}

.condition-value input {
  width: 100%;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.condition-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.2);
  border-radius: 6px;
  color: #F44336;
  cursor: pointer;
  transition: all 0.2s ease;
}

.condition-remove:hover {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.4);
}

.condition-remove .material-symbols-outlined {
  font-size: 16px;
}

.conditions-empty {
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.4);
}

.conditions-empty .material-symbols-outlined {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}

.conditions-empty p {
  font-size: 12px;
  margin: 0;
}

/* Custom Condition */
.condition-item.condition-custom {
  background: rgba(155, 92, 255, 0.1);
  border-color: rgba(155, 92, 255, 0.2);
}

.condition-custom-id {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.condition-custom-id input {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(155, 92, 255, 0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}

.condition-custom-id input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
}

.condition-custom-id input:focus {
  outline: none;
  border-color: rgba(155, 92, 255, 0.6);
  box-shadow: 0 0 0 2px rgba(155, 92, 255, 0.15);
}

.condition-hint {
  color: rgba(255, 255, 255, 0.4);
  cursor: help;
}

.condition-hint .material-symbols-outlined {
  font-size: 16px;
}

/* Reward Options */
.reward-options {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.reward-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.reward-option input[type="radio"] {
  accent-color: var(--challenger-primary);
}

.reward-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.reward-duration input {
  width: 80px;
}

.reward-duration span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.reward-duration.hidden {
  display: none;
}

/* Mention Type Options */
.mention-type-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mention-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.mention-option:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.mention-option:has(input:checked) {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.mention-option input[type="radio"] {
  display: none;
}

/* Reward Row */
.reward-row {
  gap: 12px;
}

.reward-row .modal-field {
  flex: 1;
}

/* (Old .achievement-preview removed - integrated into right column) */

/* Modal Danger Button */
.modal-btn-danger {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: #F44336;
}

.modal-btn-danger:hover {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
  .achievements-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-left,
  .toolbar-right {
    justify-content: center;
  }

  .ach-config-layout {
    grid-template-columns: 1fr;
  }

  .ach-config-left,
  .ach-config-right {
    max-height: none;
  }

  .modal-field-row {
    grid-template-columns: 1fr;
  }

  .ach-toggles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .achievements-config-grid,
  .secret-grid {
    grid-template-columns: 1fr;
  }
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  💬 28. MESSAGE CONSTRUCTOR                               ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Message Section */
.message-section {
  border-left: 3px solid #9C27B0;
}

.message-section .form-section-title {
  justify-content: flex-start;
}

.message-section .form-section-title .toggle-small {
  margin-left: auto;
}

/* Small Toggle */
.toggle-small {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle-small input {
  display: none;
}

.toggle-track-small {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-track-small::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
}

.toggle-small input:checked + .toggle-track-small {
  background: rgba(156, 39, 176, 0.4);
}

.toggle-small input:checked + .toggle-track-small::after {
  left: 18px;
  background: #9C27B0;
}

/* Message Constructor */
.message-constructor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-constructor.hidden {
  display: none;
}

/* Variable Buttons */
.message-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.var-btn {
  padding: 4px 10px;
  background: rgba(156, 39, 176, 0.15);
  border: 1px solid rgba(156, 39, 176, 0.3);
  border-radius: 6px;
  color: #CE93D8;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.var-btn:hover {
  background: rgba(156, 39, 176, 0.25);
  border-color: rgba(156, 39, 176, 0.5);
  color: #E1BEE7;
}

.var-btn:active {
  transform: scale(0.95);
}

/* Message Textarea */
.message-textarea {
  font-family: inherit;
  min-height: 80px;
  resize: vertical;
}

/* Message Preview Box */
.message-preview-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(156, 39, 176, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.message-preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(156, 39, 176, 0.1);
  border-bottom: 1px solid rgba(156, 39, 176, 0.15);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.message-preview-header .material-symbols-outlined {
  font-size: 14px;
}

.message-preview-content {
  padding: 12px;
}

.message-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.message-preview-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* Default Message Note */
.message-default-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.message-default-note .material-symbols-outlined {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
}

.message-default-note.hidden {
  display: none;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🔔 28.5. ACHIEVEMENTS NOTIFICATION SETTINGS              ║
   ╚═══════════════════════════════════════════════════════════╝ */

.achievements-notification-settings {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.notification-settings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 126, 0, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.notification-settings-header .material-symbols-outlined {
  font-size: 18px;
  color: var(--challenger-primary);
}

.notification-settings-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}

.notification-settings-content .config-group {
  margin-bottom: 0;
}

.toggle-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.toggle-track-inline {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.toggle-track-inline::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.toggle-inline input:checked + .toggle-track-inline {
  background: var(--challenger-primary);
}

.toggle-inline input:checked + .toggle-track-inline::after {
  left: 18px;
  background: #fff;
}

.toggle-inline input {
  display: none;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  📊 29. ACHIEVEMENTS STATISTICS                           ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Stats Row Layout */
.achievements-stats-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  margin-bottom: 24px;
  padding: 20px;
}

/* Stats Cards Grid */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 16px;
}

/* Individual Stat Card */
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.8;
}

.stat-card:hover {
  background: rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Card Variants */
.stat-card.stat-total::before {
  background: linear-gradient(90deg, #FF7E00, #FFB74D);
}

.stat-card.stat-popular::before {
  background: linear-gradient(90deg, #4CAF50, #81C784);
}

.stat-card.stat-rare::before {
  background: linear-gradient(90deg, #9C27B0, #CE93D8);
}

.stat-card.stat-points::before {
  background: linear-gradient(90deg, #2196F3, #64B5F6);
}

/* Card Icon */
.stat-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}

.stat-card-icon .material-symbols-outlined {
  font-size: 22px;
}

.stat-card.stat-total .stat-card-icon {
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

.stat-card.stat-popular .stat-card-icon {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.stat-card.stat-rare .stat-card-icon {
  background: rgba(156, 39, 176, 0.15);
  border: 1px solid rgba(156, 39, 176, 0.3);
  color: #9C27B0;
}

.stat-card.stat-points .stat-card-icon {
  background: rgba(33, 150, 243, 0.15);
  border: 1px solid rgba(33, 150, 243, 0.3);
  color: #2196F3;
}

/* Card Info */
.stat-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-align: center;
}

/* Числові значення - не переносити */
.stat-card.stat-total .stat-card-value,
.stat-card.stat-points .stat-card-value {
  white-space: nowrap;
}

/* Текстові значення (назви досягнень) - дозволяємо перенос */
.stat-card.stat-popular .stat-card-value,
.stat-card.stat-rare .stat-card-value {
  font-size: 16px;
  line-height: 1.3;
  word-break: break-word;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-card-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.stat-card-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  width: 100%;
}

.stat-card-sub span {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

/* Recent Unlocks Panel */
.recent-unlocks-panel {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

.recent-unlocks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 126, 0, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.recent-unlocks-header .material-symbols-outlined {
  font-size: 16px;
  color: var(--challenger-primary);
}

.recent-unlocks-list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}

/* Recent Unlock Item */
.recent-unlock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.recent-unlock-item:last-child {
  border-bottom: none;
}

.recent-unlock-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.recent-unlock-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 126, 0, 0.15);
  border: 1px solid rgba(255, 126, 0, 0.25);
  border-radius: 8px;
  flex-shrink: 0;
}

.recent-unlock-icon .material-symbols-outlined {
  font-size: 16px;
  color: var(--challenger-primary);
}

.recent-unlock-info {
  flex: 1;
  min-width: 0;
}

.recent-unlock-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-unlock-user {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-unlock-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

/* Empty State for Recent */
.recent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}

.recent-empty .material-symbols-outlined {
  font-size: 28px;
  opacity: 0.5;
}

.recent-empty span:last-child {
  font-size: 12px;
}

/* Responsive Stats */
@media (max-width: 1200px) {
  .achievements-stats-row {
    grid-template-columns: 1fr;
  }

  .recent-unlocks-panel {
    max-width: 100%;
  }

  .recent-unlocks-list {
    max-height: 150px;
  }
}

@media (max-width: 900px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .achievements-stats-row {
    padding: 12px;
    gap: 12px;
  }
}

/* Scrollbar for recent unlocks */
.recent-unlocks-list::-webkit-scrollbar {
  width: 4px;
}

.recent-unlocks-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

.recent-unlocks-list::-webkit-scrollbar-thumb {
  background: var(--challenger-primary);
  border-radius: 2px;
}


/* ╔═══════════════════════════════════════════════════════════╗
   ║  🎴 30. ACHIEVEMENT CARD BUILDER                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* Section container */
/* (Old .card-builder-section removed - replaced by .ach-section) */

/* ── Preview Area ───────────────────────────────────────── */

.card-preview-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dark checkerboard background */
.card-preview-bg {
  background-color: #0a0a0e;
  background-image:
    linear-gradient(45deg, #111116 25%, transparent 25%),
    linear-gradient(-45deg, #111116 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #111116 75%),
    linear-gradient(-45deg, transparent 75%, #111116 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

/* ── The Card Preview ───────────────────────────────────── */

.card-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  overflow: hidden;
  min-width: 200px;
  max-width: 100%;
  --card-color: #9E9E9E;
  font-size: 0;
}

/* Base dark background */
.card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 10, 0.97);
  z-index: 0;
}

/* Border */
.card-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--card-color) 30%, transparent);
  z-index: 10;
  pointer-events: none;
}

/* Top accent bar */
.cp-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-color), transparent);
  opacity: 0.7;
  z-index: 3;
}

/* ── Icon Box ───────────────────────────────────────────── */

.cp-icon-box {
  position: relative;
  z-index: 5;
  padding: 7px;
  background: rgba(10, 10, 14, 0.85);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--card-color) 16%, transparent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--card-color) 22%, transparent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-icon-box .material-symbols-outlined {
  font-size: 20px;
  color: var(--card-color);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--card-color) 56%, transparent));
}

/* Secret circle icon */
.cp-icon-box.cp-icon-circle {
  border-radius: 50%;
  background: rgba(25, 0, 10, 0.95);
  border-color: color-mix(in srgb, var(--card-color) 32%, transparent);
  box-shadow: 0 0 16px 4px color-mix(in srgb, var(--card-color) 32%, transparent);
}

.cp-icon-box.cp-icon-circle .material-symbols-outlined {
  filter: drop-shadow(0 0 8px var(--card-color));
}

/* ── Text ───────────────────────────────────────────────── */

.cp-text {
  position: relative;
  z-index: 5;
  flex: 1;
  min-width: 0;
}

.cp-subtitle {
  color: #71717a;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 2px;
  font-weight: 500;
}

.cp-title {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tier Badge ─────────────────────────────────────────── */

.cp-tier-badge {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid color-mix(in srgb, var(--card-color) 30%, transparent);
  border-radius: 20px;
  flex-shrink: 0;
}

.cp-tier-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--card-color);
  box-shadow: 0 0 4px var(--card-color);
}

.cp-tier-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* ── Rarity Tint Overlays ───────────────────────────────── */

.card-preview.rarity-1 { --card-color: #7d7d7f; }
.card-preview.rarity-2 { --card-color: #4aab4f; }
.card-preview.rarity-3 { --card-color: #2196f3; }
.card-preview.rarity-4 { --card-color: #9c27b0; }
.card-preview.rarity-5 { --card-color: #FF9800; }
.card-preview.rarity-6 { --card-color: #e31d62; }

/* Background tints per rarity (layered gradient over base) */
.card-preview.rarity-2::before { background: linear-gradient(rgba(74,171,79,0.04),rgba(74,171,79,0.04)), rgba(7,7,10,0.97); }
.card-preview.rarity-3::before { background: linear-gradient(rgba(33,150,243,0.05),rgba(33,150,243,0.05)), rgba(7,7,10,0.97); }
.card-preview.rarity-4::before { background: linear-gradient(rgba(156,39,176,0.06),rgba(156,39,176,0.06)), rgba(7,7,10,0.97); }
.card-preview.rarity-5::before { background: linear-gradient(rgba(255,152,0,0.09),rgba(255,152,0,0.09)), rgba(7,7,10,0.97); }
.card-preview.rarity-6::before { background: linear-gradient(rgba(227,29,98,0.07),rgba(227,29,98,0.07)), rgba(7,7,10,0.97); }

/* Rarity 4: Pulse glow */
.card-preview.rarity-4 {
  animation: cardGlowPulse 2.4s ease-in-out infinite;
  --glow-dim: 0 0 30px 10px rgba(156, 39, 176, 0.22);
  --glow-bright: 0 0 48px 16px rgba(156, 39, 176, 0.36);
}

/* Rarity 5: Legendary glow + shimmer */
.card-preview.rarity-5 {
  animation: cardGlowPulse 1.8s ease-in-out infinite;
  --glow-dim: 0 0 45px 15px rgba(255, 152, 0, 0.24);
  --glow-bright: 0 0 72px 24px rgba(255, 152, 0, 0.46);
}

/* Rarity 6: Secret - dashed border */
.card-preview.rarity-6::after {
  border-style: dashed;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--card-color) 38%, transparent);
}

.card-preview.rarity-6 {
  animation: cardGlowPulse 1.6s ease-in-out infinite;
  --glow-dim: 0 0 18px 4px rgba(227, 29, 98, 0.25);
  --glow-bright: 0 0 48px 14px rgba(227, 29, 98, 0.47);
}

@keyframes cardGlowPulse {
  0%, 100% { box-shadow: var(--glow-dim); }
  50%      { box-shadow: var(--glow-bright); }
}

/* ── Secret: Left bar ───────────────────────────────────── */

.cp-left-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--card-color), transparent);
  z-index: 6;
}

/* ── Secret: Scan lines ─────────────────────────────────── */

.cp-scan-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.13) 3px, rgba(0, 0, 0, 0.13) 5px
  );
}

/* ── Secret: SECRET badge ───────────────────────────────── */

.cp-secret-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  z-index: 8;
  color: var(--card-color);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

/* Secret subtitle color override */
.card-preview.rarity-6 .cp-subtitle {
  color: var(--card-color);
  opacity: 0.85;
}

/* ── Secret: Pulsing rings ──────────────────────────────── */

.cp-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cp-ring-outer {
  inset: -5px;
  border: 1.5px solid var(--card-color);
  animation: cardRingPulse 1.6s ease-in-out infinite;
}

.cp-ring-inner {
  inset: -10px;
  border: 1px solid color-mix(in srgb, var(--card-color) 25%, transparent);
  animation: cardRingPulse 1.6s ease-in-out infinite 0.3s;
}

@keyframes cardRingPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.1); }
}

/* ── Legendary: Stars ───────────────────────────────────── */

.cp-star {
  position: absolute;
  color: var(--card-color);
  font-size: 7px;
  opacity: 0.6;
  z-index: 6;
  line-height: 1;
}

.cp-star.tl { top: 5px; left: 6px; }
.cp-star.tr { top: 5px; right: 6px; }
.cp-star.bl { bottom: 5px; left: 6px; }
.cp-star.br { bottom: 5px; right: 6px; }

/* ── Legendary: Shimmer sweep ───────────────────────────── */

.cp-shimmer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  z-index: 2;
  pointer-events: none;
  transform: skewX(-12deg);
  animation: cardShimmer 5s ease-in-out infinite;
}

@keyframes cardShimmer {
  0%, 36% { left: -40%; }
  64%, 100% { left: 145%; }
}

/* ── Legendary: Bottom accent bar ───────────────────────── */

.cp-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-color) 44%, transparent), transparent);
  z-index: 3;
}

/* (Old .card-preview-actions, .card-builder-controls removed - replaced by .ach-preview-actions, .ach-toggles-grid) */

.card-preview-result {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 126, 0, 0.2);
}

.card-preview-result img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ── Icon Selected Button ───────────────────────────────── */

.card-icon-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-icon-selected:hover {
  border-color: rgba(255, 126, 0, 0.3);
  background: rgba(0, 0, 0, 0.4);
}

.card-icon-selected .material-symbols-outlined {
  font-size: 20px;
  color: var(--challenger-primary);
}

.card-icon-selected #achCardIconPreviewName {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
}

.card-icon-selected .icon-arrow {
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.2s ease;
}

/* ── Icon Picker Dropdown ───────────────────────────────── */

.card-icon-picker {
  background: rgba(15, 15, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-top: 6px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Search bar */
.icon-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.icon-picker-search .material-symbols-outlined {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.3);
}

.icon-picker-search input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 13px;
  outline: none;
}

.icon-picker-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Category tabs */
.icon-picker-categories {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.icon-picker-categories::-webkit-scrollbar {
  height: 3px;
}

.icon-picker-categories::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.icon-cat-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.icon-cat-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

.icon-cat-btn.active {
  background: rgba(255, 126, 0, 0.15);
  border-color: rgba(255, 126, 0, 0.3);
  color: var(--challenger-primary);
}

/* Icon grid */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 3px;
  padding: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.icon-picker-grid::-webkit-scrollbar {
  width: 4px;
}

.icon-picker-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.icon-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.15s ease;
}

.icon-grid-item .material-symbols-outlined {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease;
}

.icon-grid-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.icon-grid-item:hover .material-symbols-outlined {
  color: rgba(255, 255, 255, 0.9);
}

.icon-grid-item.active {
  border-color: rgba(255, 126, 0, 0.5);
  background: rgba(255, 126, 0, 0.1);
}

.icon-grid-item.active .material-symbols-outlined {
  color: var(--challenger-primary);
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── Spinning animation for preview button ──────────────── */

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

/* ╔═══════════════════════════════════════════════════════════╗
   ║  ACHIEVEMENT EDITOR v2 - NEW COMPONENTS                    ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ── Color Picker Row ──────────────────────────────────────── */

.ach-color-picker-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.ach-color-presets {
  display: flex; gap: 4px; flex-wrap: wrap;
}

.ach-color-preset {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.2s, transform 0.15s;
}

.ach-color-preset:hover { transform: scale(1.15); }
.ach-color-preset.active { border-color: #fff; }

.ach-color-hex {
  width: 72px !important; font-size: 11px !important; text-align: center;
}

#achColorPicker, #achCardColorPicker {
  width: 28px; height: 28px; border: none; border-radius: 4px;
  cursor: pointer; background: transparent; padding: 0;
}

/* ── Shape Selector ────────────────────────────────────────── */

.ach-shape-selector {
  display: flex; gap: 6px;
}

.ach-shape-btn {
  width: 38px; height: 38px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; color: rgba(255,255,255,0.5);
}

.ach-shape-btn:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.ach-shape-btn.active {
  border-color: var(--challenger-primary); color: var(--challenger-primary);
  background: rgba(var(--challenger-primary-rgb), 0.1);
}

.ach-shape-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Picker Grid (Decorations, Glows) ──────────────────────── */

.ach-picker-tabs {
  display: flex; gap: 4px; margin-bottom: 6px;
}

.ach-picker-tab {
  font-size: 10px; padding: 2px 8px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); transition: all 0.2s;
}

.ach-picker-tab:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.ach-picker-tab.active {
  background: rgba(var(--challenger-primary-rgb), 0.12);
  border-color: var(--challenger-primary); color: var(--challenger-primary);
}

.ach-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px; max-height: 110px; overflow-y: auto;
}

.ach-picker-grid::-webkit-scrollbar { width: 4px; }
.ach-picker-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.ach-picker-item {
  width: 100%; aspect-ratio: 3/1; border-radius: 6px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.06); transition: all 0.2s;
  position: relative; overflow: hidden;
}

.ach-picker-item:hover { border-color: rgba(255,255,255,0.25); }
.ach-picker-item.active {
  border-color: var(--challenger-primary);
  box-shadow: 0 0 8px rgba(var(--challenger-primary-rgb), 0.3);
}

.ach-picker-item-label {
  position: absolute; bottom: 1px; left: 2px; right: 2px; text-align: center;
  font-size: 7px; color: rgba(255,255,255,0.5); text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}

/* Glow grid - wider items */
.ach-glow-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

/* ── Tag Style Selector ────────────────────────────────────── */

.ach-tag-selector {
  display: flex; gap: 4px; flex-wrap: wrap;
}

.ach-tag-btn {
  font-size: 9px; padding: 3px 8px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); transition: all 0.2s; text-transform: uppercase;
  font-weight: 600; letter-spacing: 0.05em;
}

.ach-tag-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.ach-tag-btn.active {
  border-color: var(--challenger-primary); color: var(--challenger-primary);
  background: rgba(var(--challenger-primary-rgb), 0.1);
}

/* ── Layout Selector ───────────────────────────────────────── */

.ach-layout-selector {
  display: flex; gap: 6px;
}

.ach-layout-btn {
  flex: 1; padding: 6px 4px; border-radius: 6px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); font-size: 9px; transition: all 0.2s;
}

.ach-layout-btn:hover { border-color: rgba(255,255,255,0.2); color: #fff; }
.ach-layout-btn.active {
  border-color: var(--challenger-primary); color: var(--challenger-primary);
  background: rgba(var(--challenger-primary-rgb), 0.1);
}

.ach-layout-btn-icon { font-size: 16px; display: block; margin-bottom: 2px; }

/* ── Notification Fields Editor ────────────────────────────── */

.ach-notif-fields {
  display: flex; flex-direction: column; gap: 6px;
}

.ach-notif-field-row {
  display: flex; gap: 4px; align-items: center;
  background: rgba(255,255,255,0.03); border-radius: 6px; padding: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

.ach-notif-field-row input[type="text"] {
  flex: 1; min-width: 0;
}

.ach-notif-field-row .ach-field-inline {
  display: flex; align-items: center; gap: 2px; font-size: 9px;
  color: rgba(255,255,255,0.4); white-space: nowrap;
}

.ach-notif-field-row .ach-field-remove {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: rgba(255,255,255,0.3); transition: color 0.2s;
}

.ach-notif-field-row .ach-field-remove:hover { color: #f44336; }

/* ── Variable Catalog ──────────────────────────────────────── */

.ach-btn-vars {
  width: 100%; margin-top: 8px; font-size: 11px;
}

.ach-variable-catalog {
  margin-top: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2); padding: 8px; max-height: 200px; overflow-y: auto;
}

.ach-var-category {
  margin-bottom: 8px;
}

.ach-var-category-title {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.35);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}

.ach-var-grid {
  display: flex; flex-wrap: wrap; gap: 3px;
}

.ach-var-btn {
  font-size: 10px; padding: 2px 6px; border-radius: 4px; cursor: pointer;
  background: rgba(var(--challenger-primary-rgb), 0.08);
  border: 1px solid rgba(var(--challenger-primary-rgb), 0.2);
  color: var(--challenger-primary); transition: all 0.15s; font-family: monospace;
}

.ach-var-btn:hover {
  background: rgba(var(--challenger-primary-rgb), 0.18);
  border-color: var(--challenger-primary);
}

/* ── Banner Dims ───────────────────────────────────────────── */

.ach-banner-dims {
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 11px; color: rgba(255,255,255,0.4);
}

.ach-banner-dims .modal-input {
  padding: 3px 4px !important; font-size: 11px !important; text-align: center;
}

/* ── Notification Preview (Discord Embed) ──────────────────── */

.ach-notif-preview {
  background: #2b2d31; border-radius: 8px; padding: 12px; overflow: hidden;
}

.ach-banner-preview {
  margin-bottom: 8px; border-radius: 4px; overflow: hidden; min-height: 0;
}

.ach-banner-preview img {
  width: 100%; display: block;
}

.ach-notif-mention-preview {
  padding: 4px 0 6px; margin-bottom: 2px;
}

.ach-embed-preview {
  display: flex; border-radius: 4px; overflow: hidden;
  background: #2b2d31;
}

.ach-embed-color-bar {
  width: 4px; min-width: 4px; background: #5865F2; border-radius: 4px 0 0 4px;
}

.ach-embed-body {
  flex: 1; padding: 10px 14px; min-width: 0;
}

.ach-embed-author {
  font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}

.ach-embed-author img {
  width: 20px; height: 20px; border-radius: 50%;
}

.ach-embed-description {
  font-size: 13px; color: #dbdee1; margin-bottom: 8px; line-height: 1.4;
}

.ach-embed-fields {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px;
  margin-bottom: 8px;
}

.ach-embed-field {
  min-width: 0;
}

.ach-embed-field.full-width {
  grid-column: 1 / -1;
}

.ach-embed-field-name {
  font-size: 11px; font-weight: 700; color: #fff; margin-bottom: 1px;
}

.ach-embed-field-value {
  font-size: 12px; color: #dbdee1;
}

.ach-embed-image {
  margin-bottom: 8px; border-radius: 4px; overflow: hidden;
}

.ach-embed-image img {
  width: 100%; display: block; border-radius: 4px;
}

.ach-embed-image-placeholder {
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 4px; padding: 14px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,0.25);
}

.ach-embed-footer {
  font-size: 10px; color: #8e9297; display: flex; align-items: center; gap: 4px;
}

.ach-embed-timestamp {
  margin-left: auto; opacity: 0.7;
}

/* =========================================
   CARD PREVIEW v2 - Layout & Shape styles
   ========================================= */

/* Color tint overlay */
.cp-color-tint {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}

/* Inner glow overlay */
.cp-inner-glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}

/* Category tag */
.cp-category-tag {
  position: absolute; top: 8px; right: 8px; font-size: 9px; padding: 2px 8px;
  border-radius: 10px; color: var(--card-color); z-index: 5; font-weight: 600;
  background: color-mix(in srgb, var(--card-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color) 35%, transparent);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.cp-tag-badge { border-radius: 3px; background: var(--card-color); color: #000; letter-spacing: 0.5px; }
.cp-tag-stamp { border: 2px solid var(--card-color); border-radius: 2px; background: transparent; }
.cp-tag-bracket::before { content: "[ "; opacity: 0.5; }
.cp-tag-bracket::after { content: " ]"; opacity: 0.5; }
.cp-tag-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--card-color); margin-right: 4px; vertical-align: middle; }
.cp-tag-chip { border-radius: 12px; padding: 2px 10px; background: var(--card-color); color: #fff; border: none; }
.cp-tag-glow { box-shadow: 0 0 8px var(--card-color); border-color: var(--card-color); }
.cp-tag-ribbon { border-radius: 0 0 0 6px; top: 0; right: 0; padding: 3px 10px; }

/* Text center alignment */
.cp-text.cp-text-center { text-align: center; }

/* Layout: icon-top */
.cp-layout-top {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; height: 100%; padding: 16px;
}
.cp-layout-top .cp-icon-box { margin: 0; }
.cp-layout-top .cp-text { text-align: center; }

/* Layout: centered */
.cp-layout-center {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px; height: 100%; padding: 16px;
}
.cp-layout-center .cp-icon-box { margin: 0; }

/* Layout: icon-right */
.card-preview.layout-icon-right {
  flex-direction: row-reverse;
}
.card-preview.layout-icon-right .cp-icon-box {
  margin-left: 12px; margin-right: 0;
}

/* Icon shapes */
.cp-icon-box.cp-icon-square { border-radius: 4px; }
.cp-icon-box.cp-icon-hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0; }
.cp-icon-box.cp-icon-shield { clip-path: polygon(50% 0%, 100% 15%, 100% 65%, 50% 100%, 0% 65%, 0% 15%); border-radius: 0; }
.cp-icon-box.cp-icon-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; }

/* Variable catalog */
.ach-var-cat { margin-bottom: 8px; }
.ach-var-cat-header { font-size: 10px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; padding: 2px 0; }
.ach-var-cat-items { display: flex; flex-direction: column; gap: 2px; }
.ach-var-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.ach-var-item:hover { background: rgba(255,255,255,0.06); }
.ach-var-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #b5bac1; min-width: 120px; }
.ach-var-desc { font-size: 10px; color: #8e9297; }

/* Notification field items */
.ach-notif-field-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ach-notif-field-main {
  display: flex; gap: 4px; flex: 1;
}
.ach-notif-field-main input.ach-field-name { width: 100px; flex-shrink: 0; }
.ach-notif-field-main input.ach-field-value { flex: 1; }
.ach-notif-field-actions { display: flex; align-items: center; gap: 2px; }
.ach-field-inline, .ach-field-enabled { display: flex; align-items: center; cursor: pointer; font-size: 10px; opacity: 0.6; }
.ach-field-inline input:checked + span, .ach-field-enabled input:checked + span { opacity: 1; }
.ach-field-inline input, .ach-field-enabled input { display: none; }
.ach-field-inline span { font-size: 10px; font-weight: 700; padding: 2px 4px; border-radius: 3px; }
.ach-field-enabled span { font-size: 16px; }
.ach-field-remove { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.3); padding: 2px; }
.ach-field-remove:hover { color: #ED4245; }
.ach-notif-fields-empty { font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; padding: 8px; }

/* Toggle cards grid */
.ach-toggles-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ach-toggle-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.15s;
}
.ach-toggle-card:has(input:checked) {
  background: rgba(88, 101, 242, 0.1); border-color: rgba(88, 101, 242, 0.3);
}
.ach-toggle-card input { display: none; }
.toggle-card-icon { font-size: 20px; opacity: 0.5; }
.ach-toggle-card:has(input:checked) .toggle-card-icon { opacity: 1; color: #5865F2; }
.toggle-card-title { font-size: 10px; color: rgba(255,255,255,0.5); }
.ach-toggle-card:has(input:checked) .toggle-card-title { color: rgba(255,255,255,0.8); }