/* ==========================================================================
   RAILFLOW — Authentic Railway Casual Puzzle Theme (Connected Tiles Style)
   Референсы: railroad_reference_1.jpg, railroad_reference_2.jpg
   Стилистика: сочный океанско-небесный фон, теплые песочно-кремовые карточки,
   золотистые тактильные плашки, 3D кнопки с объемным скосом (0 6px 0 ...)
   ========================================================================== */

html.theme-railroad,
body.theme-railroad {
  --bg-color: #168bb8;
  --bg-darker: #137fa8;
  --bg-surface: rgba(253, 250, 243, 0.98);
  --surface-card: #fdfaf3;
  --surface-card-hover: #fff8eb;
  --surface-modal: #fdfaf3;
  --surface-dock: #fdfaf3;

  /* Палитра из референсов 1 и 2 */
  --brand-cyan: #0284c7;
  --brand-cyan-bright: #38bdf8;
  --brand-cyan-glow: rgba(56, 189, 248, 0.35);
  --brand-cyan-subtle: rgba(56, 189, 248, 0.15);
  --brand-blue-dark: #126687;

  --brand-red: #ef4444;
  --brand-red-glow: rgba(239, 68, 68, 0.35);
  --brand-gold: #f59e0b;
  --brand-gold-glow: rgba(245, 158, 11, 0.35);
  --brand-green: #22c55e;
  --brand-sand: #deb878;

  --text-main: #452b14;
  --text-muted: #785231;
  --text-dim: #9c734b;

  --border-color: #dfb56c;
  --border-cyan: #38bdf8;
  --border-cyan-bright: #0284c7;

  --glow-cyan: 0 4px 14px rgba(2, 132, 199, 0.25);
  --glow-cyan-lg: 0 8px 24px rgba(2, 132, 199, 0.35);
  --glow-gold: 0 4px 14px rgba(245, 158, 11, 0.3);
  --glow-red: 0 4px 14px rgba(239, 68, 68, 0.3);

  /* Фон документа: яркий, сочный небесно-океанский лазурный фон из Ref 2 */
  background-color: #168bb8 !important;
  background-image: linear-gradient(180deg, #1a96c6 0%, #127ea8 100%) !important;
  color: #452b14 !important;
}

/* Полное удаление темных кибер-сеток */
body.theme-railroad::before {
  display: none !important;
}

body.theme-railroad::after {
  display: none !important;
}

/* ==========================================================================
   1. ГЛАВНОЕ МЕНЮ (CONNECTED TILES / RAILFLOW)
   ========================================================================== */
body.theme-railroad .main-menu-overlay {
  background: rgba(18, 126, 168, 0.72) !important;
  backdrop-filter: blur(8px) !important;
}

body.theme-railroad .menu-card {
  background: #fdfaf3 !important;
  border: 3.5px solid #dfb56c !important;
  box-shadow: 0 20px 50px rgba(10, 60, 85, 0.4), 0 6px 0 #b88636 !important;
  border-radius: 22px !important;
}

body.theme-railroad .menu-card::before {
  background: linear-gradient(90deg, transparent, #f59e0b, #22c55e, transparent) !important;
  height: 4px !important;
}

body.theme-railroad .menu-badge {
  color: #92400e !important;
  border: 2px solid #f59e0b !important;
  background: #fef3c7 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

body.theme-railroad .badge-dot {
  background: #f59e0b !important;
  box-shadow: 0 0 8px #f59e0b !important;
}

/* Крупный 3D заголовок в стиле "CONNECTED TILES" */
body.theme-railroad .menu-title {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 65%, #b45309 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2.5px 0 #78350f) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15)) !important;
  letter-spacing: 0.05em !important;
  font-weight: 900 !important;
}

body.theme-railroad .menu-subtitle {
  color: #785231 !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* Кнопки меню в стиле объемных плашек */
body.theme-railroad .menu-btn {
  background: #ffffff !important;
  border: 2px solid #e2bc77 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 #caa05b, 0 8px 16px rgba(0, 0, 0, 0.08) !important;
  color: #452b14 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease !important;
}

body.theme-railroad .menu-btn:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #caa05b, 0 12px 22px rgba(0, 0, 0, 0.12) !important;
}

body.theme-railroad .menu-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #caa05b, 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

body.theme-railroad .menu-btn-icon {
  background: #fef3c7 !important;
  border: 1.5px solid #dfb56c !important;
  color: #b45309 !important;
  border-radius: 10px !important;
}

body.theme-railroad .menu-btn-main {
  color: #452b14 !important;
  font-weight: 800 !important;
}

body.theme-railroad .menu-btn-sub {
  color: #8c6035 !important;
  font-weight: 600 !important;
}

/* Главная кнопка "ПРОДОЛЖИТЬ" — сочный зеленый */
body.theme-railroad .menu-btn-continue {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 2.5px solid #4ade80 !important;
  box-shadow: 0 5px 0 #15803d, 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

body.theme-railroad .menu-btn-continue:hover {
  background: linear-gradient(180deg, #2ade70 0%, #16a34a 100%) !important;
  border-color: #86efac !important;
  box-shadow: 0 6px 0 #15803d, 0 12px 24px rgba(34, 197, 94, 0.35) !important;
}

body.theme-railroad .menu-btn-continue .menu-btn-main {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.theme-railroad .menu-btn-continue .menu-btn-sub {
  color: #dcfce7 !important;
}

body.theme-railroad .menu-btn-continue .menu-btn-icon {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.theme-railroad .menu-progress-box {
  background: #fff8eb !important;
  border: 1.5px solid #dfb56c !important;
  border-radius: 10px !important;
}

body.theme-railroad .menu-progress-bar {
  background: linear-gradient(90deg, #f59e0b 0%, #22c55e 100%) !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   2. ШАПКА ИГРЫ (HUD HEADER)
   ========================================================================== */
body.theme-railroad .header {
  background: #fdfaf3 !important;
  border: 2.5px solid #dfb56c !important;
  box-shadow: 0 6px 18px rgba(10, 60, 85, 0.2), 0 3px 0 #caa05b !important;
  border-radius: 16px !important;
}

body.theme-railroad .header-actions .btn-icon,
body.theme-railroad .btn-menu-trigger {
  background: #ffffff !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 0 #caa05b, 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.12s ease !important;
}

body.theme-railroad .header-actions .btn-icon:hover,
body.theme-railroad .btn-menu-trigger:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
}

body.theme-railroad .level-chip {
  background: #fff1d6 !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #caa05b !important;
}

body.theme-railroad .mode-chip {
  background: #fef3c7 !important;
  border: 2px solid #f59e0b !important;
  color: #92400e !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #caa05b !important;
}

body.theme-railroad .mode-chip:hover {
  background: #fde68a !important;
}

body.theme-railroad .btn-hint {
  border-color: #d97706 !important;
  color: #92400e !important;
}

/* HUD счетчики */
body.theme-railroad .stat-badge {
  background: #fff8eb !important;
  border: 2px solid #e2bc77 !important;
  color: #5c3818 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #caa05b !important;
}

body.theme-railroad .stat-targets {
  border-color: #86efac !important;
  color: #15803d !important;
  background: #dcfce7 !important;
}

body.theme-railroad .stat-stars {
  border-color: #fde047 !important;
  color: #854d0e !important;
  background: #fef9c3 !important;
}

/* ==========================================================================
   3. ИГРОВОЕ ПОЛЕ И ОПОВЕЩЕНИЯ
   ========================================================================== */
body.theme-railroad .canvas-wrapper {
  background: #147ea7 !important;
  border: 3.5px solid #0e6587 !important;
  box-shadow: 0 16px 40px rgba(6, 45, 62, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  border-radius: 20px !important;
}

/* Всплывающее уведомление */
body.theme-railroad .toast-banner {
  background: #fdfaf3 !important;
  border: 2.5px solid #dfb56c !important;
  border-left: 6px solid #0284c7 !important;
  color: #452b14 !important;
  box-shadow: 0 12px 30px rgba(10, 60, 85, 0.35), 0 4px 0 #caa05b !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

body.theme-railroad .toast-banner.success {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  border-left: 6px solid #22c55e !important;
  color: #166534 !important;
  box-shadow: 0 12px 30px rgba(22, 101, 52, 0.3), 0 4px 0 #86efac !important;
  font-weight: 800 !important;
}

body.theme-railroad .toast-banner.warning {
  background: #fffbeb !important;
  border-color: #fde047 !important;
  border-left: 6px solid #f59e0b !important;
  color: #92400e !important;
  box-shadow: 0 12px 30px rgba(146, 64, 14, 0.3), 0 4px 0 #fde047 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   4. ДИСПЕТЧЕРСКИЙ ПУЛЬТ И 3D КНОПКА "ОТПРАВИТЬ СОСТАВЫ"
   ========================================================================== */
body.theme-railroad .control-deck {
  background: #fdfaf3 !important;
  border: 2.5px solid #dfb56c !important;
  box-shadow: 0 6px 18px rgba(10, 60, 85, 0.2), 0 3px 0 #caa05b !important;
  border-radius: 16px !important;
}

/* Главная 3D кнопка "ОТПРАВИТЬ СОСТАВЫ" */
body.theme-railroad .lever-toggle-btn {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 2.5px solid #4ade80 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 0 #15803d, 0 12px 24px rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(0) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease !important;
}

body.theme-railroad .lever-toggle-btn:hover {
  background: linear-gradient(180deg, #2ade70 0%, #16a34a 100%) !important;
  border-color: #86efac !important;
  box-shadow: 0 6px 0 #15803d, 0 14px 28px rgba(34, 197, 94, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.35) !important;
}

body.theme-railroad .lever-toggle-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 3px 0 #15803d, 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

/* При активном движении — экстренная остановка (сочный красный) */
body.theme-railroad .lever-toggle-btn.active {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 0 #991b1b, 0 12px 24px rgba(220, 38, 38, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  animation: none !important;
}

body.theme-railroad .lever-toggle-btn.active:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 6px 0 #991b1b, 0 14px 28px rgba(239, 68, 68, 0.4) !important;
}

body.theme-railroad .lever-toggle-btn.active:active {
  transform: translateY(3px) !important;
  box-shadow: 0 3px 0 #991b1b, 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

body.theme-railroad .switch-status-led {
  background: #ffffff !important;
  box-shadow: 0 0 10px #4ade80 !important;
}

body.theme-railroad .lever-toggle-btn.active .switch-status-led {
  background: #ffffff !important;
  box-shadow: 0 0 10px #ef4444 !important;
}

/* ==========================================================================
   5. МОДАЛЬНЫЕ ОКНА И КАТАЛОГ УРОВНЕЙ (REF 1 & 2)
   ========================================================================== */
body.theme-railroad .modal-overlay {
  background: rgba(18, 126, 168, 0.72) !important;
  backdrop-filter: blur(8px) !important;
}

body.theme-railroad .modal-window,
body.theme-railroad .modal-content {
  background: #fdfaf3 !important;
  border: 3.5px solid #dfb56c !important;
  box-shadow: 0 25px 60px rgba(10, 60, 85, 0.45), 0 6px 0 #b88636 !important;
  border-radius: 22px !important;
}

body.theme-railroad .modal-header,
body.theme-railroad .modal-header-row {
  border-bottom: 2px solid #e2bc77 !important;
}

body.theme-railroad .modal-title,
body.theme-railroad .modal-content h2,
body.theme-railroad .levels-header-bar h2 {
  color: #452b14 !important;
  font-weight: 900 !important;
}

body.theme-railroad .modal-badge {
  background: #fef3c7 !important;
  border: 2px solid #f59e0b !important;
  color: #92400e !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

body.theme-railroad .btn-modal-close {
  background: #ffffff !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  box-shadow: 0 2px 0 #caa05b !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

body.theme-railroad .btn-modal-close:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

/* Вкладки секторов (Секторы 0-11) — яркие белые/золотые тактильные плашки */
body.theme-railroad .sector-tabs-container {
  background: #fff8eb !important;
  border: 1.5px solid #dfb56c !important;
  border-radius: 14px !important;
  padding: 6px 6px !important;
}

body.theme-railroad .sector-tab {
  background: #ffffff !important;
  border: 2px solid #dfb56c !important;
  color: #78350f !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 #caa05b !important;
  transition: all 0.12s ease !important;
}

body.theme-railroad .sector-tab:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
}

body.theme-railroad .sector-tab.active {
  background: #f59e0b !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 0 #b45309, 0 4px 10px rgba(245, 158, 11, 0.35) !important;
  font-weight: 900 !important;
}

/* Карточки уровней в каталоге */
body.theme-railroad .level-card,
body.theme-railroad .mode-card {
  background: #ffffff !important;
  border: 2px solid #e2bc77 !important;
  box-shadow: 0 4px 0 #caa05b !important;
  border-radius: 14px !important;
  color: #452b14 !important;
  transition: all 0.15s ease !important;
}

body.theme-railroad .level-card:hover,
body.theme-railroad .mode-card:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #caa05b, 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

body.theme-railroad .level-card.is-current,
body.theme-railroad .level-card.current {
  border-color: #f59e0b !important;
  background: #fff8eb !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35), 0 3px 0 #d97706 !important;
}

/* Номер уровня ("№ 1", "№ 2") — чистый бежево-золотой бейдж */
body.theme-railroad .level-card-num {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1.5px solid #f59e0b !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 #caa05b !important;
}

body.theme-railroad .level-play-tag {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1.5px solid #86efac !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

body.theme-railroad .level-card-status {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1.5px solid #86efac !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

body.theme-railroad .level-card-title {
  color: #452b14 !important;
  font-weight: 800 !important;
}

body.theme-railroad .level-card-chapter {
  color: #8c6035 !important;
}

body.theme-railroad .level-card-bottom {
  color: #785231 !important;
  font-weight: 600 !important;
}

body.theme-railroad .levels-stat-chip {
  background: #fff1d6 !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 #caa05b !important;
}

body.theme-railroad .level-card-stars {
  color: #f59e0b !important;
}

/* ==========================================================================
   6. СТРОКИ НАСТРОЕК И КНОПКИ В МОДАЛЬНЫХ ОКНАХ
   ========================================================================== */
body.theme-railroad .setting-row,
body.theme-railroad .help-item,
body.theme-railroad .victory-stat-item {
  background: #ffffff !important;
  border: 2px solid #e2bc77 !important;
  box-shadow: 0 3px 0 #caa05b !important;
  border-radius: 12px !important;
  color: #452b14 !important;
}

body.theme-railroad .setting-desc strong {
  color: #452b14 !important;
  font-weight: 800 !important;
}

body.theme-railroad .setting-desc span {
  color: #785231 !important;
}

body.theme-railroad .help-badge {
  background: #fef3c7 !important;
  border: 1.5px solid #dfb56c !important;
  color: #b45309 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

/* Модальное окно победы (УРОВЕНЬ ЗАВЕРШЕН / ПЕРЕГОН ОСВОЕН) */
body.theme-railroad .victory-content {
  padding: 22px 18px 24px 18px !important;
}

body.theme-railroad .victory-content .modal-badge {
  align-self: center !important;
  margin-bottom: 2px !important;
}

body.theme-railroad .victory-icon-wrap {
  filter: drop-shadow(0 4px 10px rgba(180, 83, 9, 0.22)) !important;
}

body.theme-railroad .v-star {
  color: #dfb56c !important;
  opacity: 0.35 !important;
  text-shadow: none !important;
}

body.theme-railroad .v-star.earned {
  color: #f59e0b !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.5) !important;
}

body.theme-railroad .victory-stars-title {
  color: #b45309 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body.theme-railroad .victory-stat-item .v-stat-label {
  color: #8c6035 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

body.theme-railroad .victory-stat-item .v-stat-val {
  color: #452b14 !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
}

body.theme-railroad #victory-bonus-wrap .v-stat-val {
  color: #16a34a !important;
}

body.theme-railroad .victory-buttons {
  margin-top: 6px !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.theme-railroad .victory-buttons .btn-ctrl {
  background: #ffffff !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  box-shadow: 0 4px 0 #caa05b !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
}

body.theme-railroad .victory-buttons .btn-ctrl:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 #caa05b !important;
}

body.theme-railroad .victory-buttons .btn-ctrl:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #caa05b !important;
}

/* Главная кнопка "ГОТОВО" и primary кнопки в модалках */
body.theme-railroad .btn-primary,
body.theme-railroad #settings-done-btn,
body.theme-railroad .modal-buttons-row .btn-primary,
body.theme-railroad .victory-buttons .btn-primary {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border: 2.5px solid #4ade80 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 #15803d, 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

body.theme-railroad .btn-primary:hover,
body.theme-railroad #settings-done-btn:hover {
  background: linear-gradient(180deg, #2ade70 0%, #16a34a 100%) !important;
  border-color: #86efac !important;
  box-shadow: 0 6px 0 #15803d, 0 12px 24px rgba(34, 197, 94, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.theme-railroad .btn-primary:active,
body.theme-railroad #settings-done-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #15803d, 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Кнопки возврата ("В МЕНЮ") */
body.theme-railroad .btn-ctrl {
  background: #ffffff !important;
  border: 2px solid #deb878 !important;
  color: #78350f !important;
  box-shadow: 0 3px 0 #caa05b !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: all 0.12s ease !important;
}

body.theme-railroad .btn-ctrl:hover {
  background: #fff8eb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
}

body.theme-railroad .btn-danger {
  background: #fee2e2 !important;
  border: 2px solid #f87171 !important;
  color: #b91c1c !important;
  box-shadow: 0 3px 0 #ef4444 !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

body.theme-railroad .btn-danger:hover {
  background: #fecaca !important;
  border-color: #ef4444 !important;
}

/* Переключатели и селекты */
body.theme-railroad .brutal-toggle input:checked + .brutal-toggle-slider {
  background-color: #22c55e !important;
  border-color: #4ade80 !important;
}

body.theme-railroad .brutal-toggle input:checked + .brutal-toggle-slider:before {
  background-color: #ffffff !important;
}

body.theme-railroad .brutal-slider::-webkit-slider-thumb {
  background: #f59e0b !important;
  border-color: #ffffff !important;
}

body.theme-railroad .brutal-slider::-moz-range-thumb {
  background: #f59e0b !important;
  border-color: #ffffff !important;
}

body.theme-railroad .brutal-select {
  background: #ffffff !important;
  border: 2px solid #e2bc77 !important;
  color: #452b14 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ---------- Оформление диалога-обучения (Railroad) ---------- */
body.theme-railroad .tutorial-content {
  background: #fdfaf3 !important;
  border: 3.5px solid #dfb56c !important;
  box-shadow: 0 25px 60px rgba(10, 60, 85, 0.45), 0 6px 0 #b88636 !important;
}

body.theme-railroad .tutorial-chip {
  background: #fff8eb !important;
  border: 2px solid #f59e0b !important;
  color: #92400e !important;
  box-shadow: 0 2px 0 #caa05b !important;
  font-weight: 800 !important;
}

body.theme-railroad .tutorial-chip:hover {
  background: #fef3c7 !important;
  box-shadow: 0 3px 6px rgba(146, 64, 14, 0.25) !important;
}

body.theme-railroad .tutorial-speaker-card {
  background: #fff8eb !important;
  border: 2px solid #e2bc77 !important;
  border-radius: 16px !important;
}

body.theme-railroad .tutorial-speaker-role {
  color: #92400e !important;
  font-weight: 900 !important;
}

body.theme-railroad .tutorial-speech-bubble {
  color: #452b14 !important;
}

body.theme-railroad .tutorial-block-card {
  background: #ffffff !important;
  border: 2px solid #e2bc77 !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 0 #caa05b !important;
}

body.theme-railroad .tutorial-block-header {
  border-bottom: 2px solid #fff8eb !important;
}

body.theme-railroad .tutorial-block-icon {
  background: #fff8eb !important;
  border: 2px solid #e2bc77 !important;
  border-radius: 12px !important;
}

body.theme-railroad .tutorial-block-tag {
  color: #b45309 !important;
}

body.theme-railroad .tutorial-block-title {
  color: #452b14 !important;
  font-weight: 900 !important;
}

body.theme-railroad .tutorial-detail-item {
  background: #fff8eb !important;
  border: 1px solid #e2bc77 !important;
  border-radius: 10px !important;
}

body.theme-railroad .detail-label {
  color: #b45309 !important;
  font-weight: 800 !important;
}

body.theme-railroad .detail-text {
  color: #452b14 !important;
}

body.theme-railroad .tutorial-confirm-btn {
  background: #f59e0b !important;
  border: 2.5px solid #b45309 !important;
  color: #451a03 !important;
  box-shadow: 0 4px 0 #92400e !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

body.theme-railroad .tutorial-confirm-btn:hover {
  background: #fbbf24 !important;
  transform: translateY(-2px);
}