/* Minimal full-screen loading indicator toggled via body.tg-loading */
body.tg-loading::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
}
body.tg-loading::before {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.45);
  border-top-color: #FFCB21;
  animation: tgspin 0.8s linear infinite;
  z-index: 10000;
}
@keyframes tgspin { to { transform: rotate(360deg); } }
/* CSS Variables for new color scheme */
:root {
  /* Gold - для ключевых акцентов */
  --color-gold: #ffd700;
  --color-gold-light: #ffed4e;
  --color-gold-transparent: rgba(255, 215, 0, 0.6);
  --color-gold-subtle: rgba(255, 215, 0, 0.15);
  
  /* Silver - для второстепенных элементов */
  --color-silver: #c0c0c0;
  --color-silver-light: #e5e5e5;
  --color-silver-transparent: rgba(192, 192, 192, 0.2);
  --color-silver-subtle: rgba(192, 192, 192, 0.1);
  
  /* Platinum - для нейтральных элементов */
  --color-platinum: #e5e4e2;
  --color-platinum-light: #f5f5f5;
  --color-platinum-transparent: rgba(229, 228, 226, 0.15);
  --color-platinum-subtle: rgba(229, 228, 226, 0.05);
  
  /* Background colors */
  --bg-primary: #1a1a1a;
  --bg-secondary: rgba(255, 255, 255, 0.03);
  --bg-tertiary: rgba(255, 255, 255, 0.02);
  
  /* Text colors */
  --text-primary: #e8e8e8;
  --text-secondary: #c0c0c0;
  --text-muted: #a0a0a0;
}

/* Гарантируем тёмный фон на всём вьюпорте, чтобы не появлялся белый сайдспейс */
html {
  background: #1a1a1a; /* для браузеров вне iOS-фиксов ниже */
}

/* Универсальные webkit префиксы для iOS Safari */
* {
  -webkit-background-size: inherit;
  background-size: inherit;
  box-sizing: border-box;
}

/* Поддержка градиентов на iOS Safari */
@supports (-webkit-appearance: none) {
  body {
    background-attachment: scroll !important;
  }
}

/* Фиксы для iOS Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  html, body {
    background-color: #1a1a1a !important;
    color: #e8e8e8 !important;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
  }
  
  /* Принудительно темный фон для iOS */
  html {
    background: #1a1a1a !important;
  }
  
  /* Фикс для старых версий iOS */
  body::before {
    display: none !important;
  }
  
  /* Альтернативный фон для iOS без поддержки градиентов */
  body {
    background: #1a1a1a !important;
    background-image: none !important;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: 'SF Pro Display', 'Roboto', 'Arial', sans-serif;
  /* Fallback для старых браузеров */
  background-color: #1a1a1a;
  /* Webkit префиксы для Safari/iOS */
  background: -webkit-linear-gradient(-45deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  color: #e8e8e8;
  min-height: 100vh;
  position: relative;
  width: 100%;
  max-width: 100vw; /* предотвращает сужение body и белое поле справа */
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Webkit префиксы для Safari/iOS - более сдержанные градиенты */
  background: 
    -webkit-radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
    -webkit-radial-gradient(circle at 80% 70%, rgba(192, 192, 192, 0.02) 0%, transparent 50%),
    -webkit-radial-gradient(circle at 50% 50%, rgba(229, 228, 226, 0.02) 0%, transparent 80%);
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(192, 192, 192, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(229, 228, 226, 0.02) 0%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.tg-header {
  background: rgba(20, 20, 20, 0.9);
  border-bottom: 1px solid rgba(192, 192, 192, 0.15);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  z-index: 1000; /* keep over floating elements */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.tg-title {
  font-size: 15px;
  font-weight: 550;
  color: var(--color-gold); /* Золото только для заголовка */
  flex: 1;
  text-align: left;
  text-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
  display: none !important;
}

.tg-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* push controls to the right when title is hidden */
}

.tg-content {
  padding: 16px 16px 32px 16px;
  max-width: 100vw; /* не даём контенту сжиматься и создавать белый отступ */
}

.tg-section {
  margin-bottom: 24px;
}

.tg-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(192, 192, 192, 0.1); /* Серебро для границ */
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.tg-card:hover {
  /* Disable floating/transform for non-button cards (e.g., user profile) */
  transform: none;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 192, 192, 0.1);
}

.tg-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: -webkit-linear-gradient(-45deg, rgba(229, 228, 226, 0.15) 0%, rgba(192, 192, 192, 0.08) 100%);
  background: linear-gradient(135deg, rgba(229, 228, 226, 0.15) 0%, rgba(192, 192, 192, 0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid rgba(192, 192, 192, 0.2); /* Серебро */
}

.tg-card-content {
  flex: 1;
}

.tg-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-platinum); /* Платина для заголовков карточек */
  text-shadow: 0 1px 2px rgba(229, 228, 226, 0.2);
}

.tg-card-desc {
  font-size: 14px;
  color: var(--color-silver); /* Серебро для описаний */
  margin-top: 4px;
  line-height: 1.4;
}

.tg-total-label {
  color: #b0b0b0;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tg-total-value {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  line-height: 1.1;
}

.tg-total-currency {
  font-size: 20px;
  color: #b0b0b0;
  font-weight: 400;
  margin-left: 6px;
}

.tg-btn {
  display: block;
  width: 100%;
  background: -webkit-linear-gradient(-45deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #1a1a1a;
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 0;
  margin: 16px 0 0 0;
  cursor: pointer;
  box-shadow: 
    0 4px 16px rgba(255, 215, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 215, 0, 0.2);
  outline: none;
  transition: all 0.3s ease;
  height: 48px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.tg-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.tg-btn:hover::before {
  left: 100%;
}

.tg-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #ffed4e 100%);
  box-shadow: 
    0 8px 25px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 30px rgba(255, 215, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.6);
}

.tg-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Silver shiny border variant for primary button */
.tg-btn-silver-border {
  border-color: rgba(192, 192, 192, 0.75) !important; /* Silver */
  box-shadow:
    0 4px 16px rgba(255, 215, 0, 0.3), /* keep subtle gold glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 18px rgba(192, 192, 192, 0.25); /* add silver aura */
}

.tg-btn-silver-border:hover {
  border-color: rgba(229, 229, 229, 0.95) !important; /* brighter silver on hover */
  box-shadow:
    0 8px 25px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 26px rgba(192, 192, 192, 0.35);
}

.tg-balance-block {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  border: 1px solid rgba(192, 192, 192, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tg-balance-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(229, 228, 226, 0.2) 0%, rgba(192, 192, 192, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(192, 192, 192, 0.25);
}

.tg-balance-label {
  color: #c0c0c0; /* Серебро */
  font-size: 14px;
  font-weight: 500;
}

.tg-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: #ffd700; /* Золото только для значений баланса */
  text-shadow: 0 1px 2px rgba(255, 215, 0, 0.2);
}

.tg-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.tg-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tg-filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #e5e4e2; /* Платина для лейблов */
  text-shadow: 0 1px 2px rgba(229, 228, 226, 0.2);
}

.tg-filter-switches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tg-switch {
  cursor: pointer;
  user-select: none;
}

.tg-switch input[type="radio"],
.tg-switch input[type="checkbox"] {
  display: none;
}

.tg-switch-label {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  color: #c0c0c0; /* Серебро */
  border: 1px solid rgba(192, 192, 192, 0.15);
}

.tg-switch input:checked + .tg-switch-label {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
  color: #ffd700; /* Золото только для активных состояний */
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 
    0 4px 16px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.tg-switch:hover .tg-switch-label {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 192, 192, 0.25);
  transform: translateY(-1px);
}

.tg-switch-toggle .tg-switch-label {
  position: relative;
  padding-left: 44px;
}

.tg-switch-toggle .tg-switch-label::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 192, 192, 0.2);
  transition: all 0.3s ease;
}

.tg-switch-toggle .tg-switch-label::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c0c0c0; /* Серебро */
  transition: all 0.3s ease;
}

.tg-switch-toggle input:checked + .tg-switch-label::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
  border-color: rgba(255, 215, 0, 0.3);
}

.tg-switch-toggle input:checked + .tg-switch-label::after {
  background: #ffd700; /* Золото для активного состояния */
  transform: translateY(-50%) translateX(12px);
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

.tg-filter-description {
  background: rgba(229, 228, 226, 0.03); /* Платина */
  border: 1px solid rgba(229, 228, 226, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tg-filter-description p {
  margin: 0;
  font-size: 14px;
  color: #e5e4e2; /* Платина */
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 2px rgba(229, 228, 226, 0.2);
}

/* Компактные фильтры */
.tg-filters-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tg-filter-compact-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.tg-filter-compact-label {
  font-size: 12px;
  font-weight: 600;
  color: #e5e4e2; /* Платина */
  text-shadow: 0 1px 2px rgba(229, 228, 226, 0.2);
  min-width: 50px;
  flex-shrink: 0;
}

.tg-filter-compact-switches {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 1;
}

.tg-filter-compact-separator {
  width: 1px;
  height: 16px;
  background: rgba(192, 192, 192, 0.2); /* Серебро */
  margin: 0 6px;
  flex-shrink: 0;
}

.tg-switch-compact {
  cursor: pointer;
  user-select: none;
}

.tg-switch-compact input[type="radio"],
.tg-switch-compact input[type="checkbox"] {
  display: none;
}

.tg-switch-compact-label {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  color: #c0c0c0; /* Серебро */
  border: 1px solid rgba(192, 192, 192, 0.15);
  white-space: nowrap;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tg-switch-compact input:checked + .tg-switch-compact-label {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
  color: #ffd700; /* Золото только для активных состояний */
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 
    0 2px 8px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.tg-switch-compact:hover .tg-switch-compact-label {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(192, 192, 192, 0.25);
  transform: translateY(-1px);
}

.tg-switch-compact-toggle .tg-switch-compact-label {
  position: relative;
  padding-left: 36px;
}

.tg-switch-compact-toggle .tg-switch-compact-label::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(192, 192, 192, 0.2);
  transition: all 0.3s ease;
}

.tg-switch-compact-toggle .tg-switch-compact-label::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c0c0c0; /* Серебро */
  transition: all 0.3s ease;
}

.tg-switch-compact-toggle input:checked + .tg-switch-compact-label::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
  border-color: rgba(255, 215, 0, 0.3);
}

.tg-switch-compact-toggle input:checked + .tg-switch-compact-label::after {
  background: #ffd700; /* Золото для активного состояния */
  transform: translateY(-50%) translateX(10px);
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

/* Адаптивность для компактных фильтров */
@media (max-width: 480px) {
  .tg-filters-compact {
    padding: 10px;
    gap: 8px;
  }
  
  .tg-filter-compact-group {
    gap: 6px;
  }
  
  .tg-filter-compact-label {
    font-size: 11px;
    min-width: 40px;
  }
  
  .tg-switch-compact-label {
    padding: 3px 6px;
    font-size: 10px;
  }
  
  .tg-switch-compact-toggle .tg-switch-compact-label {
    padding-left: 28px;
  }
  
  .tg-switch-compact-toggle .tg-switch-compact-label::before {
    width: 20px;
    height: 10px;
    left: 4px;
  }
  
  .tg-switch-compact-toggle .tg-switch-compact-label::after {
    width: 6px;
    height: 6px;
    left: 6px;
  }
  
  .tg-switch-compact-toggle input:checked + .tg-switch-compact-label::after {
    transform: translateY(-50%) translateX(8px);
  }
  
  .tg-filter-compact-separator {
    height: 12px;
    margin: 0 4px;
  }
}

@media (max-width: 360px) {
  .tg-filters-compact {
    padding: 8px;
    gap: 6px;
  }
  
  .tg-filter-compact-group {
    gap: 4px;
  }
  
  .tg-filter-compact-label {
    font-size: 10px;
    min-width: 35px;
  }
  
  .tg-switch-compact-label {
    padding: 2px 4px;
    font-size: 9px;
  }
  
  .tg-filter-compact-separator {
    height: 10px;
    margin: 0 3px;
  }
}

.tg-list-empty {
  color: #aaa;
  text-align: center;
  padding: 24px 0;
  font-size: 16px;
}

.tg-prediction-card {
  background: #26252C;
  border-radius: 8px;
  outline: 1px solid #35333E;
  outline-offset: -1px;
  margin-bottom: 16px;
  padding: 16px 16px 8px 16px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.tg-prediction-card:hover {
  transform: translateY(-1px);
  background:#2B2A31;
}

.tg-pred-title {
  font-size: 17px;
  font-weight: 500;
  margin: 8px 0;
  color: #FFFFFF;
}

.tg-pred-desc {
  font-size: 15px;
  color: #c0c0c0; /* Серебро для описаний */
  margin-bottom: 12px;
  line-height: 1.4;
}

.tg-pred-meta {
  font-size: 14px;
  color: #87919C;
  display: flex;
  /* Разводим метаданные по краям одной строки: дата слева, баланс справа */
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Исключаем переносы внутри коротких меток, чтобы они оставались в одну строку */
.tg-pred-meta span { white-space: nowrap; }

@media (max-width: 480px) {
  .tg-content { padding: 8px 2px 24px 2px; }
  .tg-header { padding: 6px 4px; }
  .tg-title { font-size: 15px; }
  .tg-btn { font-size: 16px; padding: 12px 0; height: 44px; }
  .tg-card, .tg-balance-block { padding: 12px 8px; }
  .tg-btn-header { font-size: 13px; height: 32px; padding: 0 10px; }
  
  /* Улучшения для форм на мобильных */
  .tg-form-input,
  .tg-form-textarea {
    padding: 10px 12px;
    font-size: 16px; /* Предотвращает зум на iOS */
  }
  
  .tg-quick-amounts {
    gap: 6px;
  }
  
  .tg-quick-amount {
    padding: 0;
    font-size: 13px;
  }
  
  .tg-position-selector {
    gap: 8px;
  }
  
  .tg-position-label {
    padding: 10px 8px;
    font-size: 14px;
  }
  
  /* Адаптивные стили для заголовка prediction на средних экранах */
  .tg-prediction-details > div:first-child {
    gap: 8px !important;
  }
  
  .tg-prediction-details > div:first-child > div:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .tg-prediction-details > div:first-child .tg-share-btn {
    flex-shrink: 0 !important;
  }
}
/* --- Welcome screen --- */
#welcomeScreen {
  background: #f5f6fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#welcomeSlider {
  width: 100%;
  max-width: 480px; /* слегка шире для устройств с большим экраном */
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
#welcomeSlider .tg-card {
  display: none;
  /* На экране приветствия иконка сверху, текст ниже */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  min-height: 110px;
}
#welcomeSlider .tg-card.active { display: flex; }
#welcomeSlider .tg-card:not(.active) { display: none; }

/* Крупнее шрифты внутри слайдов welcome */
#welcomeSlider .tg-card .tg-card-title { font-size: 20px; }
#welcomeSlider .tg-card .tg-card-desc { font-size: 16px; line-height: 1.55; }
#welcomeSlider .tg-card .tg-card-icon { align-self: center; }

.tg-card-content { width: 100%; }

.tg-welcome-controls {
  margin-top: 32px;
  text-align: center;
  padding: 0 16px;
}

.tg-welcome-pagination {
  margin: 24px 0 16px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tg-welcome-pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tg-welcome-pagination-dot.active {
  background: rgba(255, 215, 0, 0.6); /* Более сдержанное золото */
  border-color: rgba(255, 215, 0, 0.3);
  transform: scale(1.2);
}

.tg-slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* стрелки снизу */
  align-items: center;
  justify-content: center;
  gap: 12px; /* промежуток между областями */
  padding: 0 12px; /* безопасные внутренние отступы по краям */
  overflow: hidden; /* гарантируем, что ничто не вылезет за контейнер */
}

#welcomeSlider {
  flex: 0 0 auto;
  width: auto;
  max-width: 640px;
  display: flex;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  margin: 0;
}

.tg-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#welcomeScreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  padding: 16px;
  overflow-y: auto;
}

#welcomeScreen .tg-section {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tg-slider-arrow {
  position: static; /* снимаем absolute, стрелки участвуют в потоке */
  transform: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 0;
  background: transparent; /* только стрелка, без кружка */
  color: #ffd700; /* Золото для иконок */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
  box-shadow: none;
  /* Стрелки не наезжают на контент */
  margin: 0;
  /* Добавляем плавное появление при наведении */
  opacity: 0.8;
  transition: all 0.3s ease, opacity 0.2s ease;
  /* Улучшенная доступность для тач-устройств */
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  flex: 0 0 44px; /* фиксированная ширина, чтобы не сжимались */
}

.tg-slider-arrow:hover {
  background: transparent;
  transform: scale(1.05);
  box-shadow: none;
  color: #ffed4e; /* чуть ярче при ховере */
  opacity: 1; /* Полная видимость при наведении */
}

.tg-slider-arrow:active {
  transform: scale(0.95);
}

.tg-slider-prev { left: 12px; }

.tg-slider-next { right: 12px; }

/* Мобильная адаптация */
@media (max-width: 480px) {
  .tg-slider-container { padding: 0 8px; gap: 10px; }
  
  #welcomeSlider {
    margin: 0;
  }
  
  #welcomeScreen {
    padding: 12px;
  }
  
  #welcomeScreen .tg-section {
    padding-top: 16px;
  }
  
  .tg-slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 18px;
    min-width: 38px;
    min-height: 38px;
  }
  
  /* Стрелки остаются в потоке; дополнительных позиций не требуется */
  
  .tg-welcome-controls {
    margin-top: 24px;
    padding: 0 12px;
  }
  
  .tg-welcome-pagination {
    margin: 20px 0 12px 0;
    gap: 6px;
  }
  
  .tg-welcome-pagination-dot {
    width: 6px;
    height: 6px;
  }
  
  #welcomeSlider .tg-card {
    min-height: 280px;
    padding: 20px;
  }
  /* Увеличенные шрифты на мобильных для лучшей читабельности */
  #welcomeSlider .tg-card .tg-card-title { font-size: 19px; }
  #welcomeSlider .tg-card .tg-card-desc { font-size: 15px; }
  
  .tg-card-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .tg-card-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .tg-card-desc {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Подсветка важных фраз (простая highlighter) */
.tg-highlight {
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.35) 0%);
  padding: 0 2px;
  border-radius: 2px;
}

/* Highlighter tag variants to match request */
Highlighter { display: inline; }
Highlighter[action="highlight"] {
  background: linear-gradient(transparent 60%, rgba(255, 215, 0, 0.35) 0%);
  padding: 0 2px;
  border-radius: 2px;
}
Highlighter[action="underline"] {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(rgba(255, 215, 0, 0.5), rgba(255, 215, 0, 0.5));
  background-repeat: no-repeat;
  background-size: 100% 0.15em; /* thickness */
  background-position: 0 100%;
  padding-bottom: 0.05em;
}

/* Адаптация для очень маленьких экранов */
@media (max-width: 360px) {
  .tg-slider-container {
    padding: 0 34px; /* Еще меньше отступы для очень маленьких экранов */
  }
  
  #welcomeSlider {
    margin: 0;
  }
  
  .tg-slider-arrow {
    width: 34px;
    height: 34px;
    font-size: 16px;
    min-width: 34px;
    min-height: 34px;
  }
  
  /* Стрелки остаются в потоке и не позиционируются */
  
  #welcomeScreen {
    padding: 8px;
  }
  
  #welcomeSlider .tg-card {
    min-height: 260px;
    padding: 16px;
  }
  #welcomeSlider .tg-card .tg-card-title { font-size: 18px; }
  #welcomeSlider .tg-card .tg-card-desc { font-size: 14px; }
  
  /* Дополнительные улучшения для очень маленьких экранов */
  .tg-content {
    padding: 6px 1px 20px 1px;
  }
  
  .tg-form-input,
  .tg-form-textarea {
    padding: 8px 10px;
  }
  
  .tg-quick-amounts {
    gap: 4px;
  }
  
  .tg-quick-amount {
    padding: 0;
    font-size: 12px;
  }
  
  .tg-position-selector {
    gap: 6px;
  }
  
  .tg-position-label {
    padding: 8px 6px;
    font-size: 13px;
  }
  
  /* Адаптивные стили для кнопки поделиться */
  .tg-share-btn {
    min-width: 28px !important;
    height: 28px !important;
    padding: 2px !important;
  }
  
  .tg-share-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Адаптивные стили для заголовка prediction */
  .tg-prediction-details > div:first-child {
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .tg-prediction-details > div:first-child > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .tg-prediction-details > div:first-child .tg-share-btn {
    align-self: flex-end !important;
    margin-left: auto !important;
  }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 320px) {
  .tg-prediction-details > div:first-child {
    gap: 8px !important;
  }
  
  .tg-prediction-details > div:first-child > div:first-child {
    font-size: 14px !important;
  }
  
  .tg-prediction-details > div:first-child h2 {
    font-size: 20px !important;
  }
  
  .tg-share-btn {
    min-width: 24px !important;
    height: 24px !important;
    padding: 1px !important;
  }
  
  .tg-share-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Дополнительные стили для экстремально маленьких экранов */
@media (max-width: 280px) {
  .tg-prediction-details > div:first-child {
    gap: 6px !important;
  }
  
  .tg-prediction-details > div:first-child > div:first-child {
    font-size: 13px !important;
  }
  
  .tg-prediction-details > div:first-child h2 {
    font-size: 18px !important;
  }
  
  .tg-share-btn {
    min-width: 20px !important;
    height: 20px !important;
    padding: 1px !important;
  }
  
  .tg-share-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Headings and typography improvements */
h2 {
  color: #e5e4e2; /* Платина для заголовков */
  text-shadow: 0 1px 2px rgba(229, 228, 226, 0.2);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 10px;
}

h3 {
  color: #c0c0c0; /* Серебро для подзаголовков */
  text-shadow: none;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 12px;
}
.tg-btn-header {
  min-width: 44px;
  height: 36px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 18px;
  background: #229ed9;
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: none;
  margin: 0;
  display: inline-flex;
  width: auto; /* prevent full-width in header */
  align-items: center;
  gap: 6px;
}
/* Ensure header context never stretches buttons */
.tg-header .tg-btn,
.tg-header .tg-btn-header,
.tg-header .tg-btn-back {
  width: auto !important;
  display: inline-flex;
}

/* Header buttons: black background with white text */
.tg-header .tg-btn-header,
.tg-header .tg-btn-back {
  background: #111 !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 16px !important;
  line-height: 30px !important;
  align-items: center !important;
}

.tg-header .tg-btn-header:hover,
.tg-header .tg-btn-back:hover {
  background: #1a1a1a !important;
}

/* Create button in header: black fill with thin metallic (gold/silver/platinum) edge */
.tg-header .tg-btn-header.tg-btn-create {
  border: 1px solid transparent !important; /* thinner edge */
  border-radius: 18px;
  background:
    linear-gradient(#0f0f0f, #0f0f0f) padding-box,
    conic-gradient(
      #ffd700 0deg, /* gold */
      #c0c0c0 60deg, /* silver */
      #e5e4e2 120deg, /* platinum */
      #c0c0c0 180deg,
      #e5e4e2 240deg,
      #c0c0c0 300deg,
      #ffd700 360deg
    ) border-box !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.18), 0 0 12px rgba(192, 192, 192, 0.15) !important;
}

.tg-header .tg-btn-header.tg-btn-create:hover {
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25), 0 0 16px rgba(229, 228, 226, 0.22) !important;
}
/* Ensure header/action buttons have no link underline */
.tg-btn, .tg-btn-header, .tg-btn-back,
a.tg-btn, a.tg-btn-header, a.tg-btn-back {
  text-decoration: none !important;
}
.tg-info-icon {
  font-size: 20px;
  margin: 0 4px;
  cursor: pointer;
  vertical-align: middle;
}

/* Header balance pill and icons */
.tg-header-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8e8e8;
}
.tg-header-balance .tg-balance-amount { color: var(--color-gold); font-weight: 700; }
.tg-header-balance .tg-star {
  width: 19px;
  height: 19px;
}
.tg-header-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}
.tg-info-pill {
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7f8fa, #e9ecef);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.tg-profile-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, #f7f8fa, #e9ecef);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.12), 0 2px 10px rgba(0,0,0,0.3);
}
.tg-profile-icon:hover { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22), 0 3px 12px rgba(0,0,0,0.4); }
.tg-meta-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  opacity: 0.9;
}
.tg-balance-meta { color: var(--color-gold); font-weight: 600; }
/* --- Form styles --- */
.tg-form {
  width: 100%;
  box-sizing: border-box;
}
.tg-form-group {
  margin-bottom: 16px;
}
.tg-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e8e8e8;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tg-required {
  color: #f44336;
}
.tg-form-input,
.tg-form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  color: #222;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tg-form-input:focus,
.tg-form-textarea:focus {
  border-color: #229ed9;
}
.tg-form-input.error,
.tg-form-textarea.error {
  border-color: #f44336;
}
.tg-form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.tg-form-error {
  font-size: 13px;
  color: #f44336;
  margin-top: 4px;
  display: none; /* скрыто по умолчанию */
  min-height: 0;
}
.tg-form-error:not(:empty) {
  display: block; /* показывать только когда есть текст */
  min-height: 18px;
}

/* --- Dark create form variant (based on betForm container) --- */
.tg-form-dark .tg-form-group {
  /* Mirror .betting-section container from prediction page */
  padding: 22px;
  border-radius: 14px;
  margin-top: 16px;
  background: linear-gradient(0deg, #2C2B35, #2C2B35),
              linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
  border-top: 1.4px solid #3F3D51;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Modifier to disable panel background when nested betting-section is used */
.tg-form-dark .tg-form-group.tg-no-panel {
  background: transparent;
  border-top: none;
  padding: 0;
  gap: 12px;
}

.tg-form-dark .tg-form-label {
  color: #FFCB21; /* align with bet input title */
  padding: 0 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.15px;
}

.tg-form-dark .tg-form-hint {
  background: transparent;
  border-left: none;
  padding: 0 2px;
  color: #A6A4B6; /* informational label */
  font-size: 13px;
  line-height: 17px; /* 130.769% */
  letter-spacing: -0.39px;
}

/* Inputs and textarea inside dark form */
.tg-form-dark .tg-form-input,
.tg-form-dark .tg-form-textarea {
  background: #161311;
  color: #EAE3DB;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; /* textarea spec; looks great for inputs too */
  min-height: 48px; /* match bet input */
}

/* Placeholder typography (Inter preferred, fallback to system) */
.tg-form-dark .tg-form-input::placeholder,
.tg-form-dark .tg-form-textarea::placeholder {
  color: #807D99;
  font-family: Inter, 'SF Pro Display', 'Roboto', Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.45px;
}

/* iOS/Safari placeholder variants */
.tg-form-dark .tg-form-input::-webkit-input-placeholder,
.tg-form-dark .tg-form-textarea::-webkit-input-placeholder { color: #807D99; }
.tg-form-dark .tg-form-input::-moz-placeholder,
.tg-form-dark .tg-form-textarea::-moz-placeholder { color: #807D99; }
.tg-form-dark .tg-form-input:-ms-input-placeholder,
.tg-form-dark .tg-form-textarea:-ms-input-placeholder { color: #807D99; }
.tg-form-dark .tg-form-input::-ms-input-placeholder,
.tg-form-dark .tg-form-textarea::-ms-input-placeholder { color: #807D99; }

/* Quick controls inside dark blocks harmonize with container */
.tg-form-dark .tg-quick-amounts { margin-top: 10px; }
.tg-form-dark .tg-quick-amount {
  background: #1C1B20;
  border: 1px solid rgba(255,255,255,0.16);
  color: #FFCB21;
}
.tg-form-dark .tg-quick-amount::before { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

.tg-form-dark .tg-amount-wrapper .tg-amount-currency { color: #CBCBCB; }

.tg-form-dark .tg-datetime-input { background: #161311; }

/* Unify datetime control height */
.tg-form-dark .tg-datetime-input {
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 8px;
}

/* Position selector to match dark bet pills */
.tg-form-dark .tg-position-selector { justify-content: center; gap: 32px; }
.tg-form-dark .tg-position-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 44px;
  padding: 6px 60px;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 186px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  background: transparent;
}
.tg-form-dark .tg-position-yes { border-color: #A9C506; color: #A9C506; }
.tg-form-dark .tg-position-no { border-color: #6CB8FF; color: #6CB8FF; }
.tg-form-dark .tg-position-option input[type="radio"]:checked + .tg-position-yes {
  background: #A9C506; border-color: #A9C506; color: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(123,190,52,0.5), 0 0 12px rgba(123,190,52,0.3);
}
.tg-form-dark .tg-position-option input[type="radio"]:checked + .tg-position-no {
  background: #6CB8FF; border-color: #6CB8FF; color: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(46,134,255,0.5), 0 0 12px rgba(46,134,255,0.3);
}

/* Quick time buttons look like quick-bet pills */
.tg-form-dark .tg-quick-time {
  background: #35343D;
  color: #FFCB21;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
}

/* Amount input wrapper to mimic bet-input */
.tg-form-dark .tg-amount-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1C1B20;
  border-radius: 5.56px;
  padding: 6px 16px;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tg-form-dark .tg-amount-wrapper .tg-form-input {
  background: transparent;
  border: none;
  color: #EAE3DB;
  font-size: 20px;
  text-align: right;
  padding: 0;
  min-height: unset;
}
.tg-form-dark .tg-amount-wrapper .tg-form-input[type=number]::-webkit-outer-spin-button,
.tg-form-dark .tg-amount-wrapper .tg-form-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tg-form-dark .tg-amount-wrapper .tg-form-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.tg-form-dark .tg-amount-wrapper .tg-amount-currency { color: #FFCB21; font-size: 20px; }
/* Position selector */
.tg-position-selector {
  display: flex;
  gap: 12px;
}
.tg-position-option {
  flex: 1;
  cursor: pointer;
}
.tg-position-option input[type="radio"] {
  display: none;
}
.tg-position-label {
  display: block;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.04);
}
.tg-position-yes {
  color: #8dd05a;
}
.tg-position-no {
  color: #4ea0ff;
}
.tg-position-option input[type="radio"]:checked + .tg-position-label {
  border-color: transparent;
  color: #0b0b0b;
}
.tg-position-option input[type="radio"]:checked + .tg-position-yes {
  background: #8dd05a;
}
.tg-position-option input[type="radio"]:checked + .tg-position-no {
  background: #4ea0ff;
}
/* Amount input */
.tg-amount-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.tg-amount-wrapper .tg-form-input {
  padding-right: 60px;
}
.tg-amount-currency {
  position: absolute;
  right: 16px;
  font-size: 16px;
  color: #888;
}
.tg-quick-amounts {
  display: flex;
  gap: 8px;
  margin-top: 8px; /* единый вертикальный ритм */
  flex-wrap: wrap;
}
.tg-quick-amount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #e8e8e8;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tg-quick-amount:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22);
}
.tg-quick-amount::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url('/miniapp/static/star_yellow.svg');
  background-size: 14px 14px;
  background-repeat: no-repeat;
  display: inline-block;
}
.tg-balance-info {
  margin-top: 8px;
  font-size: 14px;
  color: #c0c0c0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tg-balance-info span {
  font-weight: 600;
  color: #229ed9;
}

/* Datetime widget styles */
.tg-datetime-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.tg-datetime-input {
  padding-right: 50px;
}

.tg-datetime-icon {
  position: absolute;
  right: 16px;
  font-size: 18px;
  color: #888;
  pointer-events: none;
}

.tg-quick-datetime {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tg-quick-time {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  background: #f0f2ff;
  border: 1px solid #667eea;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.tg-quick-time:hover {
  background: #667eea;
  color: #fff;
  transform: translateY(-1px);
}

/* Vote block styles */
.tg-vote-block {
  margin-top: 20px;
}

.tg-vote-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.tg-vote-btn {
  flex: 1;
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.tg-vote-btn-yes {
  color: #4caf50;
}

.tg-vote-btn-no {
  color: #f44336;
}

.tg-vote-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tg-vote-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.tg-vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tg-vote-weights {
  background: #f5f6fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.tg-vote-weights-title {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  margin-bottom: 12px;
  text-align: center;
}

.tg-vote-weights-bar {
  display: flex;
  height: 32px;
  background: #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.tg-vote-weights-yes {
  background: #4caf50;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.tg-vote-weights-no {
  background: #f44336;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.tg-vote-weights-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #888;
}

.tg-vote-weights-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tg-vote-weights-stat-yes {
  color: #4caf50;
}

.tg-vote-weights-stat-no {
  color: #f44336;
}

.tg-vote-status {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

.tg-vote-status-success {
  background: #e8f5e9;
  color: #4caf50;
  border: 1px solid #4caf50;
}

.tg-vote-status-error {
  background: #ffe6e6;
  color: #f44336;
  border: 1px solid #f44336;
}

.tg-vote-status-info {
  background: #ffff;
  color: #229ed9;
  border: 1px solid #229ed9;
}

.tg-user-vote-info {
  background: #e3f2fd;
  border: 1px solid #2196f3;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #1976d2;
  text-align: center;
}

.tg-btn-back {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding: 0 18px;
  height: 36px;
  border-radius: 18px;
  font-size: 15px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #1a1a1a;
  border: 1px solid rgba(255, 215, 0, 0.4);
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25);
  margin: 0 0 0 0;
  text-align: center;
  line-height: 36px;
}
.tg-btn-back:active {
  background: linear-gradient(135deg, #ffed4e 0%, #ffd700 50%, #ffed4e 100%);
}

/* Balance page styles - new pill design */
.tg-balance-display {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 24px; /* синхронизировано с .tg-section */
  padding: 16px 22px;
  background:#151515;
  border-radius:138px;
  color:#FFCB21;
}
.tg-balance-label {
  color: rgba(255, 203, 33, 0.85);
  font-size:16px;
  font-weight:500;
  letter-spacing:0.48px;
}
.tg-balance-amount-wrap {
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tg-balance-amount-wrap img { width:24px; height:24px; }
.tg-balance-amount-wrap span#currentBalance {
  color:#FFCB21;
  font-size:22px;
  font-weight:600;
  line-height:24px;
  letter-spacing:0.66px;
}

.tg-commission-info {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: #856404;
}

.tg-commission-info div {
  color: #856404;
}

/* Контрастная ссылка на жёлтом предупреждающем блоке */
.tg-link-on-warning {
  color: #0c5460 !important; /* тёмно-бирюзовый для контраста на #fff3cd */
  text-decoration: underline;
  font-weight: 600;
}
.tg-link-on-warning:hover { opacity: 0.9; }

.tg-withdrawal-info {
  background: #e8f4fd;
  border: 1px solid #b3d8f2;
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: #0c5460;
}

.tg-withdrawal-info div {
  color: #0c5460;
}

.tg-info-card { background:#161311; border-radius:8px; padding:18px; }
.tg-info-header { display:flex; align-items:center; justify-content:space-between; }
.tg-info-title { color:#FFFFFF; font-size:22px; font-weight:600; line-height:28px; }
.tg-info-rate { display:flex; align-items:center; gap:10px; }
.tg-info-rate .tg-rate-equals { color:#FFFFFF; font-size:17px; font-weight:500; letter-spacing:0.17px; }
.tg-info-rate .tg-rate-number { color:#FFCB21; font-size:17px; font-weight:500; letter-spacing:0.17px; }
.tg-info-rate .tg-star-white { width:22px; height:22px; filter: brightness(0) invert(1); }
.tg-info-rate .tg-star-yellow { width:22px; height:22px; }
.tg-info-subtitle { margin-top:8px; color:#CCCCCC; font-size:14px; line-height:24px; }

/* Rate card specifics */
.tg-rate-card .tg-info-title { font-size:22px; font-weight:600; color:#FFFFFF; }
.tg-rate-card .tg-rate-equals { color:#FFCB21; font-size:17px; font-weight:500; letter-spacing:0.17px; }
.tg-info-link { color:#CCCCCC; text-decoration: underline; }
.tg-info-subnote { margin-top:6px; color:#CCCCCC; font-size:13px; }

/* Unified withdraw panel look */
.withdraw-panel {
  background: #292831;
  border: 1px solid #3F3D51;
  border-radius: 14px 14px 28px 28px;
  padding: 18px;
}

.tg-form-hint {
  font-size: 13px;
  color: #a0a0a0;
  margin-bottom: 8px; /* внутренний отступ для подсказки */
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 3px solid rgba(192, 192, 192, 0.3); /* Серебро */
  line-height: 1.4;
}

.tg-tabs {
  display: flex;
  border-bottom: 1px solid #6D6B79; /* subdued */
  margin-bottom: 12px; /* выравнивание с карточными отступами */
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.tg-tab {
  flex: 1;
  padding: 10px 12px;
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 400;
  color: #DBDBDB;
  letter-spacing: 0.34px;
  cursor: pointer;
  border-bottom: 2px solid #6D6B79;
  transition: all 0.2s;
}

.tg-tab.active { color: #DBDBDB; border-bottom: 4px solid #9A7600; }

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

.tg-transaction-item {
  padding: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}

.tg-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.tg-status-pending {
  background: #fff3cd;
  color: #856404;
}

.tg-status-completed {
  background: #d4edda;
  color: #155724;
}

.tg-status-failed {
  background: #f8d7da;
  color: #721c24;
}

.tg-status-cancelled {
  background: #e2e3e5;
  color: #383d41;
}

.tg-status-created {
  background: #cce5ff;
  color: #004085;
}

.tg-status-processing {
  background: #ffeaa7;
  color: #6c5ce7;
}

.tg-status-message {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.tg-status-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.tg-status-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f1b0b7;
} 

.tg-welcome-message {
  background: rgba(229, 228, 226, 0.03); /* Платина */
  border: 1px solid rgba(229, 228, 226, 0.15);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: fadeInUp 0.5s ease-out;
}

.tg-welcome-message p {
  margin: 0;
  font-size: 15px;
  color: #e8e8e8;
  line-height: 1.5;
}

.tg-welcome-message a {
  color: #ffd700; /* Золото для ссылок */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tg-welcome-message a:hover {
  color: #ffed4e;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); /* Сдержанное свечение */
}

/* Стили для кнопки поделиться */
.tg-share-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}

/* Inline share button for description row */
.tg-share-inline { width: 33px !important; height: 33px !important; padding: 0 !important; border-radius: 50% !important; }

.tg-share-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05) !important;
}

.tg-share-btn:hover svg {
  fill: var(--color-gold) !important;
}

.tg-share-btn:active {
  transform: scale(0.95) !important;
}

/* Стили для SVG иконки */
.tg-share-btn svg {
  transition: fill 0.2s ease !important;
}

/* Стили для Telegram Share Widget внутри контейнера */
.tg-share-btn iframe {
  border: none !important;
  border-radius: 6px !important;
}

/* Balance styles removed - starting fresh */

.tg-balance-labels { display:flex; justify-content:space-between; align-items:center; margin: 6px 2px 6px; color:#e8e8e8; font-weight:600; }
.tg-date-row { display:flex; align-items:center; justify-content:center; gap:8px; color:#c0c0c0; margin: 10px 0 6px; }
.date { display:flex; justify-content:center; align-items:center; gap:14px; color:#E5E4E2; font-size:19.5px; line-height:146%; letter-spacing:0.09em; margin: 8px 0 6px; }
.tg-balance-row { display:flex; justify-content:space-between; align-items:center; margin: 6px 2px; color:#c0c0c0; font-weight:600; }
.tg-balance-val { color:#ffd700; font-weight:700; }
.tg-balance-center-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); }
.tg-balance-center-pill img { width:16px; height:16px; }

/* Stats container labels above the slanted banner */
.stats-container { position: relative; width:100%; height: 48px; overflow:hidden; margin: 12px 0 8px; }
.stats-section { position:absolute; height:100%; display:flex; align-items:center; gap:8px; padding:0 10.5px; color:#fff; font-weight:700; font-size:22px; line-height:30px; letter-spacing:0.03em; border-radius:3px; }
.stats-section .stat-star { width:20px; height:20px; }
.green-section { background: transparent; color:#9FE110; width:36%; left:0; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); z-index:3; justify-content:flex-start; }
.yellow-section {  color:#FFCB21; width:33%; left:33.5%; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); z-index:2; justify-content:center; }
.blue-section { background: transparent; color:#6CB8FF; width:36%; right:0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); z-index:1; justify-content:flex-end; }

/* Bet stats inline (no golden panel) */
.tg-bet-stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; color:#c0c0c0; }
.tg-bet-stat { display:flex; gap:6px; align-items:center; }
.tg-bet-stat .v { color:#e8e8e8; font-weight:700; }

/* Dark input variant for prediction */
.tg-input-dark { background:#0f0f0f !important; color:#e8e8e8 !important; border:1px solid rgba(255,255,255,0.12) !important; }

/* Bet grid two columns */
.tg-bet-grid { display:flex; gap:16px; align-items:flex-start; }
.tg-bet-divider { width:1px; background: rgba(255,255,255,0.12); align-self: stretch; }
.tg-bet-col { flex:1; }
.tg-bet-lines { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.tg-bet-line { display:flex; gap:8px; font-size:16px; color:#c0c0c0; }
.tg-bet-line .v { font-weight:700; color:#e8e8e8; }

@media (max-width: 520px) {
  .tg-bet-grid { flex-direction: column; }
}

/* Balance stats line under the main bar on prediction page */
.tg-balance-stats { display:flex; align-items:center; justify-content:space-between; margin:6px 2px 2px 2px; color:#c0c0c0; font-weight:600; font-size:14px; }
.tg-balance-total-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.tg-balance-total-pill img { width:16px; height:16px; }

/* Balance chip styles removed - starting fresh */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 

/* === New Bet Panel (per redesign) === */
.bet-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
}

.bet-title { font-size: 22px; font-weight: 700; color: #e5e4e2; margin-bottom: 12px; }

.bet-toggle {
  display: flex;
  gap: 25%;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 4px;
}

.bet-toggle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 124px;
  height: 44px;
  padding: 6px 60px; /* per mockup; visually centered */
  gap: 10px;
  flex-shrink: 0;
  border-radius: 186px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}
.bet-toggle-btn.active { color: #0b0b0b; }
.bet-toggle-btn.bet-yes { border-color: #A9C506; background: transparent; color:#A9C506; }
.bet-toggle-btn.bet-yes.active { background: #A9C506; border-color: #A9C506; color:#222; box-shadow: 0 0 0 1px rgba(169,197,6,0.5), 0 0 12px rgba(169,197,6,0.3); }
.bet-toggle-btn.bet-no { border-color: #6CB8FF; background: transparent; color:#6CB8FF; }
.bet-toggle-btn.bet-no.active { background: #6CB8FF; border-color: #6CB8FF; color:#222; box-shadow: 0 0 0 1px rgba(108,184,255,0.5), 0 0 12px rgba(108,184,255,0.3); }

.bet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

.bet-stats .bet-stat {
  display: flex;
  align-items: baseline; /* выравниваем метку и значение по базовой линии */
  justify-content: space-between; /* значения вправо */
  gap: 8px;
  padding: 10px 0;
  font-size: 16px; /* меньший кегль для лейблов */
  color: #c0c0c0;
}
.bet-stats .bet-stat .value { color: #ffd700; font-weight: 700; font-size: 18px; min-width: 88px; text-align: right; }
.bet-stats .bet-stat .icon-star {
  width: 20px; height: 20px; display:inline-block; background:url('/miniapp/static/star_yellow.svg') no-repeat center / 20px 20px; vertical-align: -3px; margin-right: 6px;
}
.bet-stats .bet-stat-win .value { display:inline-flex; align-items:center; gap:10px; }
.icon-star-round { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); box-shadow: inset 0 0 0 2px rgba(255,215,0,0.2); position: relative; }
.icon-star-round::after { content:''; position:absolute; inset:6px; background:url('/miniapp/static/star_yellow.svg') no-repeat center / contain; }

.bet-controls { position: relative; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.1); }
.bet-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111317;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px; /* target ~56px height */
}
.bet-input .icon-star { width: 16px; height: 16px; background: url('/miniapp/static/star_yellow.svg') no-repeat center / 16px 16px; display:inline-block; }
.bet-input input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f5f5f5;
  font-size: 20px;
  outline: none;
}

.bet-chips { display:flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bet-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px; /* match input height */
  border-radius: 12px;
  background: #12151b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffd700;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bet-chip .icon-star { width: 16px; height: 16px; background: url('/miniapp/static/star_yellow.svg') no-repeat center / 16px 16px; display:inline-block; }
.bet-chip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.2); }

.bet-balance { margin-top: 10px; color: #c0c0c0; font-size: 14px; }
.bet-submit-btn { margin-top: 20px; }

@media (max-width: 520px) {
  .bet-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bet-controls { padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.12); }
}

/* 2x2 quick grid (input + chips) */
.bet-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bet-quick-grid .bet-input,
.bet-quick-grid .bet-chip { width: 100%; }

/* Update chips to have maximum size and perfect proportions */
.balance-chip { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: 18px; /* Increased from 16px for perfect spacing */
  padding: 18px 30px; /* Increased from 16px 26px for maximum size */
  border-radius: 14px; /* Increased from 12px */
  font-weight: 900; 
  font-size: 28px; /* Increased from 26px for maximum size */
  line-height: 1; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Add subtle shadow for depth */
}
.balance-chip img { 
  width: 26px; /* Increased from 24px */
  height: 26px; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Add shadow to icons */
}

.balance-chip--yes::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: -32px; /* Increased from -28px */
  width: 64px; /* Increased from 56px */
  background: linear-gradient(90deg, #1C1B20 0%, #314700 100%); 
  transform: skewX(-40deg); /* More pronounced angle from -35deg */
  border-radius: 12px; /* Increased from 10px */
  box-shadow: 2px 0 8px rgba(0,0,0,0.2); /* Add shadow for depth */
}
.balance-chip--no::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: -32px; /* Increased from -28px */
  width: 64px; /* Increased from 56px */
  background: linear-gradient(270deg, #003160 0%, #1C1B20 100%); 
  transform: skewX(40deg); /* More pronounced angle from 35deg */
  border-radius: 12px; /* Increased from 10px */
  box-shadow: -2px 0 8px rgba(0,0,0,0.2); /* Add shadow for depth */
}

/* Make separator maximum elegant and thin */
.tg-balance-separator {
  position: absolute;
  left: 50%;
  top: -10px; /* Reduced from -12px for maximum elegance */
  width: 2px; /* Reduced from 3px for maximum thinness */
  height: 65px; /* Reduced from 70px for perfect proportion */
  transform: translateX(-50%) rotate(18deg); /* Increased angle from 15deg */
  pointer-events: none;
  z-index: 5;
}
.tg-balance-separator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 1px; /* Adjusted for maximum thinness */
  box-shadow: 0 0 12px rgba(255,255,255,0.8); /* Maximum enhanced glow */
}

/* Balance block and related styles fully removed */

/* Prediction Balance block removed per request */

/* ===== Redesigned slanted balance banner for prediction page ===== */
.slanted-banner {
  display: flex;
  align-items: center;
  /*gap: 5px;*/
  background: #161616;
  box-shadow: 0 0 51px 1px #515876;
  border-radius: 3px;
  width: 100%;
  position: relative;
  margin: 10px 0 8px;
  padding: 0px 8px;
}
.slanted-left, .slanted-right { width: 50%; display:flex; }
.slanted-left { justify-content: flex-end; }
.slanted-right { justify-content: flex-start; }
.slanted-block { transform: skewX(-20deg); border-radius: 4px; height: 34px; transition: width .25s ease; }
.slanted-block.green { background: linear-gradient(96deg, #B0CC10 65.87%, #161311 122%), #A9C506; }
.slanted-block.blue { background: linear-gradient(96deg, #161311 -25%, #218CF0 30.57%); }
.slanted-divider { width: 4px; height: 44px; background: #d9d9d9; box-shadow: 0 0 6px #ffffffaa; transform: skewX(-20deg); border-radius: 2px; margin: -6px 0; }

@media (max-width: 540px) {
  .slanted-block { height: 40px; }
  .slanted-divider { height: 50px; }
}

/* ===== New betting-section styles (match provided layout) ===== */
.betting-section { 
  padding: 22px; 
  border-radius: 14px; 
  margin-top: 16px; 
  background: linear-gradient(0deg, #2C2B35, #2C2B35), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
  border-top: 1.4px solid #3F3D51; 
  display:flex; 
  flex-direction:column; 
  gap: 18px; 
}
.betting-section .bet-input { 
  display:flex; align-items:center; justify-content:space-between; 
  background:#1C1B20; border-radius:5.56px; padding: 6px 16px; min-height:48px; 
}
.betting-section .bet-input h3 { color:#FFCB21; font-size:20px; font-weight:600; margin:0; line-height:1; display:flex; align-items:center; }
.betting-section .bet-input input { background:transparent; border:none; outline:none; color:#EAE3DB; font-size:20px; text-align:right; width:80px; line-height:1; }
/* Hide numeric steppers (Chrome/Safari/Edge) */
.betting-section .bet-input input[type=number]::-webkit-outer-spin-button,
.betting-section .bet-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Hide numeric steppers (Firefox) */
.betting-section .bet-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.quick-bets { display:grid; grid-template-columns:repeat(3,1fr); gap: 10px; }
.quick-bet { background:#35343D; padding: 10px; border-radius: 999px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition: background-color 0.15s ease, transform 0.05s ease; }
.quick-bet:hover { background:#3F3E48; }
.quick-bet:active { background:#2E2D34; transform: translateY(1px); }
.quick-bet span { color:#FFCB21; font-size:20px; font-weight:400; }

.odds-section { display:flex; justify-content:space-between; max-width: 360px; width:100%; margin: 0 auto; }
.odds-section > div { width:100%; display:flex; flex-direction:column; align-items:center; }
.odds-section > div:last-child > div { display:flex; align-items:center; justify-content:center; gap:8px; }
.odds-section p { color:#919196; font-size:16px; font-style:italic; margin:0 0 4px; }
.odds-section h3 { color:#FFCB21; font-weight:600; font-size:26px; margin:0; }
#potentialCoefficient { color:#CBCBCB; }
#xpotentialCoefficient { color:#CBCBCB; }
.place-bet-btn { background-color:#FFCB21; border:4px solid #FFCB21; color:#222127; width:100%; padding:14px; border-radius:6px; font-size:20px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; cursor:pointer; }
.place-bet-btn:hover { background-color:#e6b61d; }

@media (max-width: 540px) {
  .betting-section { padding: 16px; }
  .betting-section .bet-input { padding: 0px 14px; }
  .betting-section .bet-input h3, .betting-section .bet-input input { font-size: 20px; }
  .quick-bet span { font-size: 18px; }
  .odds-section h3 { font-size: 22px; }
  .place-bet-btn { font-size: 18px; }
}

/* Withdraw: full-width quick-bet button */
.withdraw-panel .quick-bets { display:block; grid-template-columns:none; }
.withdraw-panel .quick-bet {
  width:100%;
  height:37px;
  padding:8px 12px;
  border-radius:30px;
  background:#35343D;
  outline:2px solid #393845;
  outline-offset:-2px;
}
.withdraw-panel .quick-bet:hover { background:#3D3C46; outline-color:#4A4953; }
.withdraw-panel .quick-bet:active { background:#2C2B33; outline-color:#4A4953; transform: translateY(1px); }
.withdraw-panel .quick-bet span { color:#DDB01B; font-size:17px; font-weight:500; letter-spacing:0.17px; }

/* Ensure create form bet-input matches prediction bet-input */
.tg-form-dark .bet-input {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#1C1B20;
  border-radius:5.56px;
  padding: 6px 16px;
  min-height:48px;
  border: none;
}
.tg-form-dark .bet-input h3 {
  color:#FFCB21;
  font-size:20px;
  font-weight:600;
  margin:0;
  line-height:1;
  display:flex;
  align-items:center;
}
.tg-form-dark .bet-input input {
  background:transparent;
  border:none;
  outline:none;
  color:#EAE3DB;
  font-size:20px;
  text-align:right;
  width:80px;
  line-height:1;
}
.tg-form-dark .bet-input input[type=number]::-webkit-outer-spin-button,
.tg-form-dark .bet-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tg-form-dark .bet-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }