/* Campaigns SPA Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: #000000;
  color: #333;
  overflow-x: hidden;
}

#app {
  max-width: 768px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: hidden;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-link {
  color: #2196F3;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: #1976D2;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #999;
}

.breadcrumb-current {
  color: #333;
  font-weight: 500;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  flex: 1;
}

.btn-close, .btn-back {
  background: #e0e0e0;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-back:hover {
  background: #d0d0d0;
}

.btn-icon-profile {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e3f2fd;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
}

.btn-icon-profile:hover {
  background: #bbdefb;
  transform: scale(1.05);
}

.profile-avatar-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Channels Selector */
.channels-selector-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center; /* Центрирует элементы без растягивания */
}

.channels-selector {
  flex: 1;
  position: relative;
  min-width: 0; /* Предотвращает расширение flex-элемента из-за содержимого */
}

.channels-dropdown-header {
  background: transparent;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  height: 52px;
  padding: 0 16px;
  display: flex;
  width: 100%;
  min-width: 0; /* Предотвращает расширение из-за содержимого */
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  gap: 12px;
}

.channels-dropdown-header:hover {
  border-color: #2196F3;
  background: #f8f9fa;
}

.filter-icon {
  flex-shrink: 0;
  color: #666;
}

.filter-text {
  flex: 1;
  min-width: 0; /* Позволяет тексту обрезаться внутри flex-контейнера */
  text-align: left;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.channels-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

.channel-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f0f0f0;
}

.channel-item-unverified {
  background: #fff3e0;
  opacity: 0.7;
}

.channel-item-unverified:hover {
  background: #ffe0b2;
}

.channel-warning {
  display: block;
  font-size: 12px;
  color: #ff9800;
  margin-top: 4px;
}

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

.channel-item:hover {
  background: #f8f9fa;
}

.channel-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.channel-username {
  display: block;
  font-size: 12px;
  color: #666;
}

.channels-settings-btn {
  height: 52px;
  padding: 0;
  border-radius: 12px;
  background: white;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  color: #666;
  flex: 1;
}

.channels-settings-text {
  font-size: 14px;
  font-weight: 500;
}

.channels-settings-btn:hover {
  border-color: #2196F3;
  background: #f8f9fa;
  color: #2196F3;
}

/* Channels Management Modal */
.modal-large {
  max-width: 500px;
}

.channels-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.channel-management-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 8px;
}

.channel-info {
  flex: 1;
}

.channel-info .channel-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.channel-info .channel-username {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.channel-verified {
  display: inline-block;
  font-size: 12px;
  color: #4caf50;
  font-weight: 500;
}

.channel-unverified {
  display: inline-block;
  font-size: 12px;
  color: #ff9800;
  font-weight: 500;
}

.btn-delete-channel {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
}

.btn-delete-channel:hover {
  background: #ffe5e5;
  border-color: #e74c3c;
}

.btn-add-channel {
  width: 100%;
  padding: 12px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}

.btn-add-channel:hover {
  background: #1976D2;
}

.empty-state, .loading-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.loading-state {
  color: #2196F3;
}

/* Create Card */
.create-card {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  transition: transform 0.2s;
}

.create-card:hover {
  transform: translateY(-2px);
}

.create-icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #4caf50;
  border-radius: 50%;
  color: white;
  font-size: 32px;
  line-height: 48px;
  margin-bottom: 12px;
}

.create-text {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
}

/* Campaign Card */
.campaign-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.campaign-warning {
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #e65100;
}

.campaign-warning svg {
  color: #ff9800;
}

.campaign-warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.campaign-warning p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.campaign-header {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.campaign-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.campaign-info {
  flex: 1;
}

.campaign-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.campaign-info h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.campaign-status-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.campaign-status-badge.active {
  background-color: #4caf50;
}

.campaign-status-badge.paused {
  background-color: #ff9800;
}

.campaign-status-badge.completed {
  background-color: #9e9e9e;
}

.campaign-username {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.campaign-time {
  height: 28px;
  padding: 6px 12px 7px 12px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Stats */
.campaign-stats {
  margin-bottom: 16px;
}

.stat-section-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}

.stat-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.stat-value {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.stat-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.25);
  flex-shrink: 0;
}

.stat-add-btn:hover {
  background: #45a049;
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(76, 175, 80, 0.35);
}

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

/* Actions */
.campaign-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-primary {
  flex: 1;
  height: 44px;
  background: #DBE9FE;
  color: #2463EB;
  border: none;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: #c5d9fc;
}

.btn-danger {
  background: #f44336;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 12px;
}

.btn-danger:hover {
  background: #d32f2f;
}

.btn-danger-full {
  width: 100%;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger-full:hover {
  background: #d32f2f;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f5f5f5;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: #e0e0e0;
}

/* Referral */
/* Референциальные ссылки */
.campaign-ref {
  border-top: 1px solid #eee;
  padding-top: 16px;
  margin-top: 16px;
}

.ref-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}

.ref-label {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.ref-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: color 0.2s;
}

.ref-toggle-btn:hover {
  color: #333;
}

.ref-arrow {
  transition: transform 0.3s ease;
}

.ref-list {
  display: block;
  padding-top: 12px;
}

.ref-actions {
  margin-bottom: 16px;
}

.btn-add-ref {
  width: 100%;
  height: 44px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-add-ref:hover {
  background: #1976D2;
}

.ref-link-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

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

.ref-link-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ref-link-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.ref-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ref-status-indicator.status-active {
  background: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.ref-status-indicator.status-inactive {
  background: #f44336;
  box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.ref-link-actions {
  display: flex;
  gap: 8px;
}

.ref-action-btn {
  min-width: 44px;
  max-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.ref-action-btn:hover {
  background: #e0e0e0;
}

.ref-delete-btn:hover {
  background: #ffebee;
  color: #c62828;
}

.ref-link-input-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ref-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.ref-input {
  width: 100%;
  height: 44px;
  padding: 0 80px 0 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 14px;
  background: white;
  cursor: text;
}

.ref-input:focus {
  outline: none;
  border-color: #2196F3;
}

.ref-copy-btn {
  position: absolute;
  right: 44px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 12px;
  transition: all 0.2s;
}

.ref-copy-btn:hover {
  background: #f0f0f0;
  color: #2196F3;
}

.ref-qr-btn {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 12px;
  transition: all 0.2s;
}

.ref-qr-btn:hover {
  background: #f0f0f0;
  color: #2196F3;
}

.btn-stats {
  background: #e3f2fd;
  color: #1976d2;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-stats:hover {
  background: #bbdefb;
}

.btn-stats-full {
  width: 100%;
  height: 44px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.btn-stats-full:hover {
  background: #1976D2;
}

.empty-ref {
  text-align: center;
  color: #999;
  padding: 20px;
  font-size: 14px;
}

/* Campaign Form */
.campaign-form {
  background: white;
  border-radius: 16px;
  padding: 16px;
  padding-bottom: 70px; /* Отступ под фиксированную кнопку */
}

.form-section {
  margin-bottom: 16px;
}

.section-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #e3f2fd;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  margin-bottom: 12px;
}

.form-section h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

/* Fixed form actions at bottom */
.form-actions-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.btn-save-fixed {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: #27ae60;
  color: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-save-fixed:hover {
  background: #229954;
}

.btn-delete-fixed {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: #f44336;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  position: static;
  margin-top: 32px;
}

.btn-delete-fixed:hover {
  background: #d32f2f;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #666;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="url"],
.form-group input[type="datetime-local"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.form-group select:hover {
  border-color: #2196F3;
  background: #f8f9fa;
}

/* Custom Dropdown */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown--locked {
  opacity: 0.5;
}

.custom-dropdown--locked .custom-dropdown-header {
  background: #f5f5f5;
  cursor: pointer;
}

/* Предупреждение «фича настроена, но недоступна на тарифе» */
.feature-lock-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  font-size: 13px;
  color: #7a5800;
  line-height: 1.5;
}

.feature-lock-upgrade-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: #f59e0b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.feature-lock-upgrade-btn:hover {
  background: #d97706;
}

.custom-dropdown-header {
  background: transparent;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.custom-dropdown-header:hover {
  border-color: #2196F3;
  background: #f8f9fa;
}

.dropdown-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 15px;
  color: #333;
}

.dropdown-item:hover {
  background: #f8f9fa;
}

.dropdown-item.selected {
  background: #e3f2fd;
  color: #2196F3;
  font-weight: 600;
}

.dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown-item:first-child {
  border-radius: 12px 12px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 12px 12px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.char-count {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.hint {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* Number Input */
.number-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.number-input input {
  width: 80px;
  text-align: center;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 15px;
  color: #2c3e50;
  background: white;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.number-input input::-webkit-inner-spin-button,
.number-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input input:focus {
  outline: none;
  border-color: #2196F3;
}

.btn-dec, .btn-inc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #2196F3;
  border: none;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-dec:hover, .btn-inc:hover {
  background: #bbdefb;
}

/* Date Range */
.date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 400px) {
  .date-range {
    grid-template-columns: 1fr;
  }
}

.date-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.date-input-wrapper input[type="date"] {
  height: 44px;
  width: 100%;
  min-width: 0;
}

.date-input-wrapper span {
  font-size: 12px;
  color: rgb(153, 153, 153);
}

/* Toggle */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  background: #ccc;
  border-radius: 16px;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-label input:checked + .toggle-slider {
  background: #4caf50;
}

.toggle-label input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.toggle-label input:disabled + .toggle-slider {
  background: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.6;
}

.toggle-label input:disabled + .toggle-slider::before {
  background: #f5f5f5;
}

.toggle-label:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Buttons */
.btn-secondary {
  width: 100%;
  height: 44px;
  background: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.form-actions {
  margin-top: 32px;
}

/* Empty State */
.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 20px;
  font-size: 16px;
}

/* Error Screen */
.error-screen {
  text-align: center;
  padding: 60px 20px;
}

.error-screen h1 {
  font-size: 72px;
  color: #999;
  margin-bottom: 16px;
}

.error-screen p {
  font-size: 18px;
  color: #666;
  margin-bottom: 24px;
}

.error-screen button {
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

/* Referral Links Styles */
.ref-link-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}

.ref-link-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ref-link-item.ref-inactive {
  opacity: 0.6;
  background: #f5f5f5;
}

.ref-link-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ref-link-info h4 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ref-link-info span {
  font-size: 12px;
  color: #666;
}

.ref-link-info span:has(.active) {
  color: #4caf50;
}

.ref-link-info span:has(.inactive) {
  color: #9e9e9e;
}

.ref-link-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

.ref-link-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ref-link-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ref-link-actions button {
  flex: none;
  min-width: 44px;
  max-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ref-link-actions button:hover {
  background: #f5f5f5;
  border-color: #bdbdbd;
}

.ref-link-actions button:active {
  transform: scale(0.98);
}

.add-ref-link-btn {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 2px dashed #90caf9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
  cursor: pointer;
  transition: all 0.2s;
}

.add-ref-link-btn:hover {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
  border-color: #64b5f6;
}

/* Wheel Config Styles */
.wheel-config-content {
  max-width: 600px;
  margin: 0 auto;
}

.config-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.config-section h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.config-section .hint {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.sectors-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.sector-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
}

.sector-item input[type="color"] {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.sector-item input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
}

.sector-weight {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sector-weight input {
  width: 60px;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
}

.btn-icon-small {
  width: 36px;
  height: 36px;
  border: none;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.btn-icon-small:hover {
  background: #ffebee;
}

.weight-total {
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  margin-top: 12px;
}

.weight-total.valid {
  background: #e8f5e9;
  color: #2e7d32;
}

.weight-total.invalid {
  background: #fff3e0;
  color: #f57c00;
}

/* Wheel Screen Styles */
.wheel-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#riveCanvas {
  width: 90vw;
  max-width: 500px;
  height: 90vw;
  max-height: 500px;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.spin-button {
  position: absolute;
  bottom: 60px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border: none;
  padding: 20px 60px;
  border-radius: 50px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4);
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.spin-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(245, 87, 108, 0.6);
}

.spin-button:active {
  transform: translateY(0);
}

.result-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-popup {
  background: white;
  border-radius: 24px;
  padding: 40px;
  max-width: 400px;
  text-align: center;
  animation: popupAppear 0.3s ease;
}

@keyframes popupAppear {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.result-popup h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.result-prize {
  font-size: 24px;
  font-weight: 600;
  color: #667eea;
  margin-bottom: 16px;
}

.result-description {
  color: #666;
  margin-bottom: 24px;
}

.result-link {
  display: inline-block;
  background: #667eea;
  color: white;
  padding: 12px 32px;
  border-radius: 12px;
  text-decoration: none;
  margin-bottom: 16px;
  transition: background 0.2s;
}

.result-link:hover {
  background: #5568d3;
}

.result-close {
  background: #e0e0e0;
  border: none;
  padding: 12px 32px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.result-close:hover {
  background: #d0d0d0;
}

/* Demo Wheel Styles */
.demo-wheel-screen {
  max-width: 600px;
  margin: 0 auto;
}

.demo-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.demo-header h1 {
  flex: 1;
  font-size: 24px;
  font-weight: 700;
}

.demo-badge {
  background: #ff9800;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.demo-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-info {
  text-align: center;
  margin-bottom: 24px;
}

.demo-attempts {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.demo-count {
  color: #ff9800;
  font-size: 24px;
}

.demo-hint {
  color: #666;
  font-size: 14px;
}

#demoWheelContainer {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  border-radius: 8px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
  position: relative;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-right: 8px;
}

/* Modal content spacing */
.modal-content h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.modal-content p {
  margin: 0 0 20px 0;
  line-height: 1.5;
  color: #666;
}

.modal-content .input-field {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-icon {
  font-size: 32px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
}

.modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
}

.modal-body p {
  margin-bottom: 12px;
  color: #666;
}

.modal-body ol {
  margin: 12px 0;
  line-height: 1.8;
}

.modal-body ol li {
  margin-bottom: 8px;
  color: #555;
}

.modal-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.modal-input:focus {
  outline: none;
  border-color: #2196F3;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-btn {
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #e0e0e0;
  color: #333;
  transition: background 0.2s;
}

.modal-btn:hover {
  background: #d0d0d0;
}

.modal-btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #2196F3;
  color: white;
  transition: background 0.2s;
}

.modal-btn-primary:hover {
  background: #1976D2;
}

.modal-btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #e0e0e0;
  color: #333;
  transition: background 0.2s;
}

.modal-btn-secondary:hover {
  background: #d0d0d0;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-buttons button {
  flex: 1;
}

/* QR Code Modal Styles */
.qr-modal {
  max-width: 400px;
}

.qr-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}

.qr-code-image {
  width: 300px;
  height: 300px;
  border-radius: 12px;
  border: 2px solid #e0e0e0;
  background: white;
}

.qr-link {
  font-size: 12px;
  color: #666;
  word-break: break-all;
  text-align: center;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 8px;
  max-width: 100%;
}

.qr-hint {
  font-size: 13px;
  color: #2196F3;
  text-align: center;
  padding: 8px 12px;
  background: #e3f2fd;
  border-radius: 8px;
  margin-top: 8px;
}

.modal-btn-primary {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #2196F3;
  color: white;
  transition: background 0.2s;
}

.modal-btn-primary:hover {
  background: #1976D2;
}

.modal-btn-cancel {
  background: #95a5a6;
}

.modal-btn-cancel:hover {
  background: #7f8c8d;
}

.modal-btn-confirm {
  background: #e74c3c;
}

.modal-btn-confirm:hover {
  background: #c0392b;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Participant Mode Styles */
.participant-wheel-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: -20px;
  background: #232323;
}

.wheel-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  color: white;
}

.wheel-header h1 {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.wheel-subtitle {
  font-size: 16px;
  color: #ccc;
  margin: 0;
}

.btn-spin {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.btn-spin:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-spin:active {
  transform: translateY(0);
}

.subscription-check-screen {
  padding: 40px 20px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.subscription-check-screen h2 {
  margin: 0 0 20px 0;
  color: #333;
}

.subscription-check-screen p {
  margin: 0 0 30px 0;
  color: #666;
  font-size: 16px;
}

.channel-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin: 0 0 30px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.channel-card h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 20px;
}

.channel-card p {
  margin: 0;
  color: #2196F3;
  font-size: 16px;
}

.error-screen {
  padding: 40px 20px;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.error-screen h2 {
  margin: 0 0 20px 0;
  color: #e74c3c;
}

.error-screen p {
  margin: 0 0 30px 0;
  color: #666;
  font-size: 16px;
}

.loading-state {
  text-align: center;
  color: #666;
  padding: 20px;
  font-style: italic;
}

/* Campaign Card Improvements */
/* Status indicator dot before title */
.campaign-info h3::before {
  content: '●';
  margin-right: 8px;
  font-size: 12px;
}

.campaign-info h3.status-active::before {
  color: #4CAF50;
}

.campaign-info h3.status-paused::before {
  color: #FF9800;
}

.campaign-info h3.status-completed::before {
  color: #9E9E9E;
}

.campaign-info h3.status-draft::before {
  color: #2196F3;
}

/* Duplicate button in header */
.btn-duplicate-header {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px solid #E9EBEE;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-duplicate-header:hover {
  background: #e3f2fd;
  border-color: #2196F3;
  transform: translateY(-1px);
}

/* Text colors for participant warnings */
.stat-value.text-danger {
  color: #F44336;
  font-weight: 600;
}

.stat-value.text-warning {
  color: #FF9800;
  font-weight: 600;
}

/* Primary actions row */
.campaign-actions-primary {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-action-primary {
  flex: 1;
  height: 48px;
  background: #DBE9FE;
  color: #2463EB;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-action-primary:hover {
  background: #c5d9fc;
  transform: translateY(-1px);
}

/* Public links section */
.public-links-section {
  background: #f8f9fa;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.links-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.links-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.links-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Create public link button */
.btn-create-link {
  width: 100%;
  height: 48px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-create-link:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Links status (when links exist) */
.links-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.links-status:hover {
  background: #f0f0f0;
}

.links-status-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.links-status-arrow {
  font-size: 12px;
  color: #666;
  transition: transform 0.2s;
}

.links-status-arrow.expanded {
  transform: rotate(180deg);
}

/* Campaign management section */
.campaign-management {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-group-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0faf5;
  border: 1px solid #b2dfce;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  color: #1a6e47;
}

.notif-group-badge {
  font-weight: 500;
}

.btn-notif-disconnect {
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.btn-notif-disconnect:hover { color: #e53935; }

.campaign-management-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon-text {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px solid #E9EBEE;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
  color: #333;
}

.btn-icon-text:hover {
  background: #e0e0e0;
  border-color: #d0d0d0;
}

.btn-delete-campaign {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 44px;
  color: #f44336;
  background: #ffebee;
  border: 1px solid #f44336;
  font-size: 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-delete-campaign:hover {
  background: #f44336;
  color: white;
  transform: translateY(-1px);
}

/* Stepper (Progress Bar) for Campaign Form */
.campaign-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
}

.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.stepper-step:hover {
  transform: scale(1.05);
}

.stepper-step:focus {
  outline: none;
}

.stepper-step:focus-visible {
  outline: none;
}

.stepper-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
}

.stepper-step.active:not(:last-child)::after {
  background: #0088cc;
}

.stepper-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  z-index: 1;
  margin-bottom: 8px;
  transition: all 0.3s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.stepper-step:hover .stepper-circle {
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
  transform: scale(1.1);
}

.stepper-step.active .stepper-circle {
  background: #0088cc;
  color: white;
}

.stepper-step.completed .stepper-circle {
  background: #4CAF50;
  color: white;
}

.stepper-label {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-weight: 500;
}

.stepper-step.active .stepper-label {
  color: #0088cc;
  font-weight: 600;
}

/* Campaign Form Steps */
.campaign-form-screen {
  /* scroll handled by page container */
}

.campaign-form-step {
  display: none;
}

.campaign-form-step.active {
  display: block;
  animation: fadeIn 0.3s;
}

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

.step-header {
  /* Убрали серый фон для чистоты */
  padding: 0 0 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e9ecef; /* Простая линия вместо фона */
}

.step-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.2px;
}

/* Compact step card */
.step-card-compact {
  /* Едва видный серый фон для отделения от белого фона формы */
  background: #fafbfc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}

/* Compact form group */
.form-group-compact {
  margin-bottom: 14px;
}

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

.form-group-compact label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #666;
}

.input-compact {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: white;
  transition: all 0.2s;
  color: #333;
}

.input-compact:focus {
  outline: none;
  border-color: #0088cc;
  background: white;
}

.input-compact::placeholder {
  color: #999;
}

/* Form grid row (2 columns) */
.form-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

/* На узких экранах - одна колонка */
@media (max-width: 360px) {
  .form-grid-row {
    grid-template-columns: 1fr;
  }
}

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

.form-grid-item {
  /* Убрали фон и обводку - оставили только padding */
  background: transparent;
  border-radius: 0;
  padding: 12px 8px;
  border: none;
  min-width: 0; /* Важно для grid - позволяет элементу сжиматься */
}

.form-grid-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
}

.form-grid-item .input-compact {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  width: 100%;
  box-sizing: border-box;
}

.form-grid-item input[type="date"] {
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: #333;
  box-sizing: border-box;
}

/* Full width grid item (stacked) */
.form-grid-item-full {
  /* Убрали фон и обводку */
  background: transparent;
  border-radius: 0;
  padding: 12px 0;
  border: none;
  margin-bottom: 12px;
}

.form-grid-item-full label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

/* Compact number input */
.number-input-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.number-input-compact input {
  flex: 1;
  max-width: 80px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #f8f9fa;
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.number-input-compact input::-webkit-inner-spin-button,
.number-input-compact input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input-compact .btn-dec,
.number-input-compact .btn-inc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #0088cc;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.number-input-compact .btn-dec:hover,
.number-input-compact .btn-inc:hover {
  background: #bbdefb;
}

/* Subscription toggle row */
.subscription-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 12px;
}

.subscription-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Subscription options (radio-like buttons) */
.subscription-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  transition: opacity 0.2s;
}

.subscription-options.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.subscription-options:not(.disabled) {
  opacity: 1;
  pointer-events: auto;
}

.subscription-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: white;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.subscription-option:hover {
  border-color: #0088cc;
}

.subscription-option.selected {
  border-color: #0088cc;
  background: #e3f2fd;
  color: #0088cc;
}

/* Wheel config card */
.wheel-config-card {
  text-align: center;
  padding: 24px 16px;
}

.wheel-config-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.wheel-config-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.btn-wheel-config {
  width: 100%;
  padding: 14px 24px;
  background: #0088cc;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}

.btn-wheel-config:hover {
  background: #006fa3;
}

.wheel-config-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #4CAF50;
}

.wheel-config-status .status-icon {
  font-size: 16px;
}

/* Prize limits section (Вариант A) - компактная версия */
.prize-limits-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.prize-limits-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 8px;
}

.prize-limits-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.prize-limits-info {
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

.prize-limits-info-title {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
  display: block;
}

.prize-limits-info ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.prize-limits-info li {
  margin-bottom: 2px;
}

.prize-limits-info.enabled {
  background: #e8f5e9;
  border-left: 3px solid #4caf50;
}

.prize-limits-info.enabled .prize-limits-info-title {
  color: #2e7d32;
}

.prize-limits-info.enabled .prize-limits-enabled-list {
  display: block;
}

.prize-limits-info.enabled .prize-limits-disabled-list {
  display: none;
}

.prize-limits-info.disabled {
  background: #fff3e0;
  border-left: 3px solid #ff9800;
}

.prize-limits-info.disabled .prize-limits-info-title {
  color: #e65100;
}

.prize-limits-info.disabled .prize-limits-enabled-list {
  display: none;
}

.prize-limits-info.disabled .prize-limits-disabled-list {
  display: block;
}

/* Step navigation inside each step */
.step-navigation {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9ecef;
}

.btn-step-back {
  flex: 1;
  padding: 14px 24px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-step-back:hover {
  background: #e8e8e8;
  border-color: #bbb;
}

.btn-step-next {
  flex: 2;
  padding: 14px 24px;
  background: #0088cc;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-step-next:hover {
  background: #006ba6;
}

.btn-step-next:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Info icon removed per user request */

/* Lead form settings (campaign form) */
.lead-form-settings {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
}

.lead-form-settings .form-grid-item {
  padding: 0;
}

.lead-form-settings-section {
  border-top: 1px solid #E9EBEE;
  padding-top: 12px;
}

.lead-form-settings-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.lead-form-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.lead-form-checkbox-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}

.lead-form-checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0088cc;
}

.lead-form-webhook-section .input-compact {
  margin-bottom: 8px;
}

.lead-form-webhook-section .input-compact:last-child {
  margin-bottom: 0;
}

.lead-form-submissions-section {
  padding-top: 10px;
}

@media (max-width: 420px) {
  .lead-form-checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* Field hints and examples */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

.field-hint::before {
  content: '📝 ';
}

.field-success {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #4CAF50;
}

.field-success::before {
  content: '✅ ';
}

.field-warning {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #FF9800;
}

.field-warning::before {
  content: '⚠️ ';
}

/* Step 5: Compact Summary styles */
.summary-card-compact {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #e9ecef;
}

.summary-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.summary-icon {
  font-size: 20px;
}

.summary-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.summary-comment {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  padding-left: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.summary-grid-item {
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e9ecef;
}

.summary-grid-icon {
  font-size: 16px;
}

.summary-grid-value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.summary-grid-label {
  font-size: 12px;
  color: #666;
}

.summary-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.summary-info-row:last-child {
  border-bottom: none;
}

.summary-info-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.summary-info-label {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  min-width: 110px;
}

.summary-info-text {
  font-size: 14px;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⚠️ бейдж в сводке кампании (Step 5) — фича настроена, но не работает на тарифе */
.summary-tariff-warn {
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Compact launch options - 2 columns */
.launch-options-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.launch-option-compact {
  background: white;
  padding: 8px 6px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.launch-option-compact:hover {
  border-color: #0088cc;
  background: #f8f9fa;
}

.launch-option-compact.selected {
  border-color: #0088cc;
  background: #e3f2fd;
}

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

.launch-option-icon {
  font-size: 18px;
}

.launch-option-text {
  font-weight: 600;
  font-size: 12px;
  color: #333;
}

.launch-option-compact.selected .launch-option-text {
  color: #0088cc;
}

/* Legacy summary styles (keep for backwards compatibility) */
.summary-section {
  background: #f8f9fa;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.summary-section h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.summary-section h3::before {
  content: '✅ ';
  margin-right: 6px;
}

.summary-item {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-left: 24px;
}

.summary-item::before {
  content: '• ';
  margin-right: 6px;
}

.launch-options {
  background: #e3f2fd;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #0088cc;
}

.launch-options h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.launch-option {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.launch-option:hover {
  border-color: #0088cc;
}

.launch-option.selected {
  border-color: #0088cc;
  background: #e3f2fd;
}

.launch-option input[type="radio"] {
  flex-shrink: 0;
}

.launch-option-title {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

/* Channel Management Modal - New Tabs Design */
.channel-info-banner {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #e3f2fd;
  border-radius: 12px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.info-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

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

.info-text {
  font-size: 13px;
  color: #1565c0;
  line-height: 1.5;
}

.bot-badge-copyable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #0088cc;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  user-select: none;
  width: fit-content;
}

.bot-badge-copyable:hover {
  background: #006ba3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
}

.bot-badge-copyable:active {
  transform: scale(0.98);
}

.bot-name {
  font-family: 'Courier New', monospace;
}

.copy-icon {
  flex-shrink: 0;
}

/* Tabs */
.channel-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.tab-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  transition: all 0.2s;
  position: relative;
  margin-bottom: -2px;
}

.tab-button:hover {
  color: #2196F3;
  background: #f8f9fa;
}

.tab-button.active {
  color: #2196F3;
  border-bottom-color: #2196F3;
  background: white;
}

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

.tab-label {
  font-size: 14px;
}

/* Tab Content Area */
.tab-content-area {
  position: relative;
  min-height: 260px;
  margin-bottom: 20px;
}

.tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.tab-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}

/* Tab Steps */
.tab-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.step-number {
  font-size: 18px;
  flex-shrink: 0;
}

.step-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  padding-top: 2px;
}

/* Channel Input Group */
.channel-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.channel-input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid #E9EBEE;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  transition: all 0.2s;
  min-width: 0;
}

.channel-input:focus {
  outline: none;
  border-color: #2196F3;
  background: #f8f9fa;
}

.channel-input::placeholder {
  color: #999;
}

.btn-add-channel {
  padding: 12px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-channel:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-add-channel:active {
  transform: scale(0.98);
}

/* Get ID Button */
.btn-get-id {
  width: 100%;
  padding: 12px 16px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-get-id:hover {
  background: #1976D2;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.btn-get-id:active {
  transform: scale(0.98);
}

/* Tab Hints */
.tab-hint {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #2196F3;
}

/* Channels List Section */
.channels-list-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.channels-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.channels-list-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.channels-count {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Channel Type Icon */
.channel-type-icon {
  margin-right: 6px;
  font-size: 16px;
}

/* Channel Management Item Updates */
.channel-management-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: white;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.channel-management-item:hover {
  border-color: #2196F3;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.1);
}

.channel-info .channel-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.channel-info .channel-username {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  margin-left: 22px;
}

.channel-verified {
  display: inline-block;
  font-size: 12px;
  color: #4CAF50;
  font-weight: 500;
  margin-left: 22px;
}

.channel-unverified {
  display: inline-block;
  font-size: 12px;
  color: #FF9800;
  font-weight: 500;
  margin-left: 22px;
}

.btn-delete-channel {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f8f9fa;
  border: 1px solid #E9EBEE;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-delete-channel:hover {
  background: #ffebee;
  border-color: #e74c3c;
  transform: scale(1.05);
}

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

/* ── Notification sections in channel card ───────────────────────────────── */

/* Перестраиваем карточку: верхний ряд (инфо + кнопка удаления) + нижняя секция уведомлений */
.channel-management-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.channel-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.channel-notif-section {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.channel-notif-on {
  background: #e8f5e9;
}
.channel-notif-off {
  background: #f5f5f5;
}
.channel-notif-label {
  flex: 1;
  font-weight: 500;
  color: #333;
}
.channel-notif-hint {
  width: 100%;
  color: #888;
  font-size: 11px;
  margin-top: 2px;
}
.channel-notif-hint code {
  background: #ebebeb;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px;
}
.btn-notif-disconnect {
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-notif-disconnect:hover {
  background: #ffebee;
}

/* ── Step 3 notification info block ─────────────────────────────────────── */
.step-notif-info {
  display: block;
  padding: 12px 14px;
  background: #f0f7ff;
  border-radius: 10px;
  border: 1px solid #d0e8ff;
  margin-top: 14px;
}
.step-notif-info--locked {
  background: #f9f9f9;
  border-color: #e0e0e0;
}
.step-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.step-notif-label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}
.step-notif-badge-on {
  font-size: 11px;
  font-weight: 600;
  color: #2e7d32;
  background: #e8f5e9;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.step-notif-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}
.step-notif-on {
  color: #2e7d32 !important;
}
.btn-link-inline {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--accent, #4CAF50);
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  display: inline;
}

/* ── Info button in prizes toggle ────────────────────────────────────────── */
.notif-info-tip {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  opacity: 0.55;
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
.notif-info-tip:hover {
  opacity: 1;
}

/* ── Prizes tab: notification status strip ───────────────────────────────── */
.notif-status-strip {
  margin-bottom: 12px;
}
/* Единственная строка в блоке — убираем нижнюю разделительную черту */
.notif-toggle-row {
  border-bottom: none;
  margin-bottom: 0;
  padding: 0;
}

/* Empty State in Channels List */
.channels-list .empty-state {
  padding: 30px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px dashed #E9EBEE;
}

/* Mobile Responsiveness */
@media (max-width: 500px) {
  .channel-tabs {
    flex-direction: column;
    gap: 0;
  }
  
  .tab-button {
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
    margin-bottom: 0;
  }
  
  .tab-button.active {
    border-bottom: 1px solid #f0f0f0;
    border-left-color: #2196F3;
  }
  
  .channel-input-group {
    flex-direction: column;
  }
  
  .btn-add-channel {
    width: 100%;
  }
}

/* ============= CONNECT CHANNEL BUTTON ============= */
.btn-connect-channel {
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  color: #333;
  border: 2px solid #E9EBEE;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-connect-channel:hover {
  background: #f8f9fa;
  border-color: #0088cc;
  color: #0088cc;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-connect-channel:active {
  transform: translateY(0);
}

/* ============= CAMPAIGNS FILTERS ============= */
.campaigns-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.campaign-filter {
  flex: 1;
  min-width: 150px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E9EBEE;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.campaign-filter:hover {
  border-color: #0088cc;
}

.campaign-filter:focus {
  outline: none;
  border-color: #0088cc;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

/* ============= TABS STYLES ============= */
.campaigns-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: #f8f9fa;
  border-radius: 12px;
}

.campaigns-tab {
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.campaigns-tab:hover {
  background: #e8ecf0;
  color: #333;
}

.campaigns-tab.active {
  background: #fff;
  color: #0088cc;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.1);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ffc107;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.campaigns-tab.active .tab-badge {
  background: #0088cc;
}

/* ============= PRIZES LIST STYLES ============= */
.prizes-filters-top {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.prize-filter-top {
  padding: 12px 20px;
  background: #fff;
  border: 2px solid #0088cc;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #0088cc;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 150px;
}

.prize-filter-top:hover {
  background: #e3f2fd;
}

.prize-filter-top:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.prizes-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.prize-filter {
  flex: 1;
  min-width: 150px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #E9EBEE;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.prize-filter:hover {
  border-color: #0088cc;
}

.prize-filter:focus {
  outline: none;
  border-color: #0088cc;
  box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
}

.prizes-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-archive-prizes {
  padding: 10px 18px;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-archive-prizes:hover {
  background: #e0e0e0;
  color: #333;
  border-color: #bdbdbd;
}

.btn-archive-prizes:active {
  transform: scale(0.98);
}

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

.prize-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
  border: 1px solid #f0f0f0;
}

.prize-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.prize-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.prize-card-title h3 {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
}

.prize-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #666;
}

.prize-campaign {
  padding: 3px 8px;
  background: #f0f0f0;
  border-radius: 6px;
}

.prize-channel {
  padding: 3px 8px;
  background: #e3f2fd;
  color: #0088cc;
  border-radius: 6px;
}

.prize-reflink {
  padding: 3px 8px;
  background: #f3e5f5;
  color: #9c27b0;
  border-radius: 6px;
  font-size: 11px;
}

.prize-status-badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.prize-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #666;
}

.prize-winner strong,
.prize-date strong,
.prize-subscription-status strong {
  color: #333;
  margin-right: 6px;
}

.prize-subscription-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-status-icon {
  font-size: 15px;
}

.btn-refresh-sub {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-refresh-sub:hover {
  background: #f0f0f0;
}

.btn-refresh-sub:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.winner-name {
  color: #0088cc;
}

.prize-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.btn-prize-action {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-contact {
  background: #e3f2fd;
  color: #0088cc;
  border: 1px solid #bbdefb;
}

.btn-contact:hover {
  background: #bbdefb;
  transform: scale(1.05);
}

.btn-claim {
  background: #e8f5e9;
  color: #4caf50;
  border: 1px solid #c8e6c9;
}

.btn-claim:hover {
  background: #c8e6c9;
  transform: scale(1.05);
}

.btn-cancel {
  background: #ffebee;
  color: #f44336;
  border: 1px solid #ffcdd2;
}

.btn-cancel:hover {
  background: #ffcdd2;
  transform: scale(1.05);
}

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

/* "Не удалось связаться?" под кнопками */
.prize-card-contact-help {
  text-align: center;
  padding: 8px 0 2px;
}

.prize-contact-help-link {
  font-size: 12px;
  color: #999;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.prize-contact-help-link:hover {
  color: #0088cc;
}

/* Модалка "Написать через бота" */
.contact-help-desc {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
  line-height: 1.5;
}

.contact-help-preview {
  background: #f0f4ff;
  border: 1px solid #c5d3f6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.contact-help-preview-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-help-preview-text {
  font-size: 13px;
  color: #222;
  line-height: 1.55;
  white-space: pre-line;
  margin-bottom: 8px;
}

.contact-help-preview-btn {
  font-size: 12px;
  color: #0088cc;
  font-weight: 500;
}

.contact-help-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-help-field label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.contact-help-input {
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.contact-help-input:focus {
  border-color: #0088cc;
}

.contact-help-input-hint {
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}


.wins-info-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 10px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.wins-info-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.wins-info-text {
  flex: 1;
  font-size: 13px;
  color: #1976d2;
  line-height: 1.4;
}

.wins-info-text strong {
  display: block;
  margin-bottom: 3px;
  color: #0d47a1;
  font-size: 13px;
}

.user-wins-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.win-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
  border: 1px solid #f0f0f0;
}

.win-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.win-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.win-card-title h3 {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
}

.win-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #666;
}

.win-campaign {
  padding: 3px 8px;
  background: #f0f0f0;
  border-radius: 6px;
}

.win-channel {
  padding: 3px 8px;
  background: #e3f2fd;
  color: #0088cc;
  border-radius: 6px;
}

.win-reflink {
  padding: 3px 8px;
  background: #f3e5f5;
  color: #9c27b0;
  border-radius: 6px;
  font-size: 11px;
}

.win-status-badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.win-card-description {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.win-card-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.win-date {
  font-size: 13px;
  color: #666;
}

.win-date strong {
  color: #333;
  margin-right: 6px;
}

.btn-win-contact {
  width: 100%;
  padding: 12px 20px;
  background: #0088cc;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-win-contact:hover {
  background: #006fa3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 136, 204, 0.2);
}

.btn-win-contact:active {
  transform: translateY(0);
}

/* Reservation Card Styles */
.reservation-card {
  border: 2px dashed #2196f3 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

.reservation-card:hover {
  border-color: #1976d2 !important;
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.15) !important;
}

.reservation-badge {
  animation: pulse-reservation 2s ease-in-out infinite;
}

@keyframes pulse-reservation {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.reservation-warning {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 10px;
  margin-bottom: 14px;
  border: 1px solid #ffb74d;
}

.warning-icon {
  font-size: 24px;
  flex-shrink: 0;
  animation: warning-pulse 1.5s ease-in-out infinite;
}

@keyframes warning-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.warning-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.warning-text strong {
  display: block;
  margin-bottom: 6px;
  color: #e65100;
}

.expiry-timer {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #ff6f00;
}

.timer-value {
  font-size: 16px;
  font-weight: bold;
  color: #ff6f00;
  font-family: 'Courier New', monospace;
}

.reservation-actions {
  margin-bottom: 12px;
}

.subscribe-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.subscribe-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(88, 101, 242, 0.3);
}

.subscribe-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.subscribe-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.subscribe-button:active::before {
  width: 300px;
  height: 300px;
}

/* Empty States */
.prizes-list .empty-state,
.user-wins-list .empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #999;
  font-size: 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Mobile Responsiveness */
@media (max-width: 500px) {
  .campaigns-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 3px;
  }
  
  .campaigns-tab {
    padding: 8px 6px;
    font-size: 12px;
    gap: 4px;
  }
  
  .tab-badge {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 4px;
  }
  
  .btn-connect-channel {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .campaigns-filters {
    flex-direction: column;
  }
  
  .campaign-filter {
    min-width: 100%;
  }
  
  .prizes-filters {
    flex-direction: column;
  }
  
  .prize-filter {
    min-width: 100%;
  }
  
  .prize-card-header,
  .win-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .prize-status-badge,
  .win-status-badge {
    align-self: flex-start;
  }
  
  .prize-card-actions {
    gap: 6px;
  }
  
  .btn-prize-action {
    padding: 8px;
    font-size: 14px;
  }
}

/* ============= PROFILE SCREEN STYLES ============= */
.profile-screen {
  max-width: 600px;
  margin: 0 auto;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 20px 20px;
}

.profile-header-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  flex-shrink: 0;
}

.profile-user-info {
  flex: 1;
}

.profile-name {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0 0 6px 0;
}

.profile-username {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.profile-menu {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-menu-item {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: background 0.2s;
  text-align: left;
}

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

.profile-menu-item:hover {
  background: #f8f9fa;
}

.profile-menu-item:active {
  background: #e9ecef;
}

.profile-menu-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.profile-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-menu-text strong {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.profile-menu-text small {
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

.profile-menu-arrow {
  font-size: 18px;
  color: #999;
  flex-shrink: 0;
}

/* ============= MANUAL TARIFFS SCREEN STYLES ============= */
.manual-tariffs-screen {
  max-width: 600px;
  margin: 0 auto;
}

.manual-tariffs-content {
  padding: 0 20px 24px;
}

.manual-tariffs-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 16px;
}

.manual-tariffs-search {
  width: 100%;
  min-height: 44px;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 15px;
  color: #222;
  background: #fff;
  box-sizing: border-box;
}

.manual-tariffs-search:focus {
  outline: none;
  border-color: #2678F3;
}

.manual-tariffs-issue-btn {
  min-height: 44px;
  white-space: nowrap;
}

.manual-tariffs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-tariff-card {
  background: #fff;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  padding: 14px;
}

.manual-tariff-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.manual-tariff-user {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.manual-tariff-user strong {
  font-size: 15px;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-tariff-user small {
  font-size: 13px;
  color: #6b7280;
}

.manual-tariff-status {
  flex-shrink: 0;
  border-radius: 999px;
  background: #e8f3ff;
  color: #1769c2;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.manual-tariff-status--expired {
  background: #fff1f2;
  color: #c62828;
}

.manual-tariff-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 13px;
  color: #6b7280;
}

.manual-tariff-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.manual-tariff-action-btn {
  min-height: 36px;
  border: 1px solid #D8E5FA;
  border-radius: 10px;
  background: #F4F8FF;
  color: #1769c2;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.manual-tariff-action-btn:active {
  transform: translateY(1px);
}

.manual-tariff-action-btn--danger {
  border-color: #F8D4D8;
  background: #FFF5F6;
  color: #c62828;
}

.manual-tariffs-empty {
  padding: 28px 16px;
  text-align: center;
  color: #777;
  background: #fff;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
}

.manual-tariffs-empty--error {
  color: #c62828;
}

.manual-tariff-modal {
  z-index: 3000;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.64);
}

.manual-tariff-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);
  color: #1f2937;
}

.manual-tariff-dialog .modal-header {
  margin: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #E9EBEE;
}

.manual-tariff-dialog .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.manual-tariff-dialog .modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: #f3f4f6;
  color: #374151;
  font-size: 18px;
  cursor: pointer;
}

.manual-tariff-modal-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.manual-tariff-dialog .contact-help-field {
  gap: 7px;
}

.manual-tariff-dialog .contact-help-field label {
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.manual-tariff-dialog .contact-help-input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  background: #fff;
  color: #111827;
  border: 1.5px solid #D1D5DB;
  border-radius: 12px;
  font-size: 16px;
}

.manual-tariff-dialog .contact-help-input:focus {
  border-color: #2678F3;
  box-shadow: 0 0 0 3px rgba(38, 120, 243, 0.12);
}

.manual-tariff-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.manual-tariff-modal-actions .btn {
  width: 100%;
  min-height: 46px;
}

@media (max-width: 520px) {
  .manual-tariffs-toolbar {
    grid-template-columns: 1fr;
  }

  .manual-tariffs-issue-btn {
    width: 100%;
  }

  .manual-tariff-actions {
    grid-template-columns: 1fr;
  }
}

/* ============= TARIFFS SCREEN STYLES ============= */
.tariffs-screen {
  max-width: 600px;
  margin: 0 auto;
}

.tariffs-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 20px 20px;
}

.tariff-card-compact {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  border: 2px solid #4CAF50;
}

.tariff-badge-top {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  padding: 4px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
}

.tariff-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin: 8px 0 16px 0;
}

.tariff-duration-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff3e0;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;
}

.tariff-duration-icon {
  font-size: 18px;
}

.tariff-duration-compact strong {
  color: #ff9800;
  font-weight: 700;
}

.tariff-features-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.tariff-feature-item {
  font-size: 14px;
  color: #555;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.tariff-feature-more {
  font-size: 13px;
  color: #2196F3;
  text-align: center;
  padding: 6px;
  cursor: pointer;
  font-weight: 500;
}

.tariff-price-compact {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.tariff-price-value {
  font-size: 32px;
  font-weight: 700;
  color: #4CAF50;
}

.tariff-price-period {
  font-size: 14px;
  color: #999;
}

/* FAQ Section */
.tariff-faq {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tariff-faq-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px 0;
}

.faq-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-question {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.faq-answer {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* ============= MODAL CHANNELS LIST STYLES ============= */
.modal-channels-list {
  max-height: 400px;
  overflow-y: auto;
}

.modal-channel-item {
  padding: 14px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #e9ecef;
}

.modal-channel-item:last-child {
  margin-bottom: 0;
}

.modal-channel-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.modal-channel-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.modal-channel-username {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

/* ============= TARIFF BANNER ON MAIN SCREEN ============= */
.tariff-banner {
  background: white;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s;
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.tariff-banner:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.tariff-banner:active { opacity: 0.9; }

/* Расширенный бейдж — новый дизайн 5.6 */
.tariff-banner--rich {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.tariff-banner-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tariff-banner-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
}

.tariff-banner-days {
  font-size: 12px;
  color: #888;
  font-weight: 500;
}

.tariff-banner-arrow {
  font-size: 14px;
  color: #aaa;
}

.tariff-banner-pool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #555;
}

.tariff-banner-progress {
  height: 5px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

.tariff-banner-row3 {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

/* Старые классы — оставляем для совместимости */
.tariff-banner-icon { font-size: 28px; flex-shrink: 0; }
.tariff-banner-content { flex: 1; }
.tariff-banner-title { font-size: 15px; font-weight: 600; color: #1976d2; margin-bottom: 3px; }
.tariff-banner-subtitle { font-size: 12px; color: #1565c0; font-weight: 500; }

/* Mobile Responsiveness for Profile & Tariffs */
@media (max-width: 500px) {
  .profile-header-card {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-name {
    font-size: 20px;
  }
  
  .profile-menu-item {
    padding: 16px;
  }
  
  .profile-content {
    padding: 0 12px 12px 12px;
  }
  
  .tariffs-content {
    padding: 0 12px 12px 12px;
  }
  
  .tariff-card-compact {
    padding: 16px;
  }
  
  .tariff-name {
    font-size: 20px;
  }
  
  .tariff-price-value {
    font-size: 28px;
  }
  
  .tariff-banner {
    padding: 12px 16px;
  }
  
  .tariff-banner-icon {
    font-size: 28px;
  }
  
  .tariff-banner-title {
    font-size: 14px;
  }
  
  .tariff-banner-subtitle {
    font-size: 12px;
  }
}

/* ─── Виджет доп. пула участников ──────────────────────────────────────────── */

.extra-pool-banner {
  background: white;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid #e3f2fd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.extra-pool-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.extra-pool-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  flex: 1;
}

.extra-pool-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

.extra-pool-status--active {
  color: #2e7d32;
  background: #e8f5e9;
}

.extra-pool-status--standby {
  color: #757575;
  background: #f5f5f5;
}

.extra-pool-status--inuse {
  color: #e65100;
  background: #fff3e0;
}

.extra-pool-status--spent {
  color: #c62828;
  background: #ffebee;
}

.extra-pool-info {
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.extra-pool-info:hover { opacity: 1; }

.extra-pool-pool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #555;
}

.extra-pool-progress {
  height: 5px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

/* ─── TariffGate ─────────────────────────────────────────────────────────── */

/* Недоступная фича на текущем тарифе — затемняем строку/элемент */
.tariff-feature-locked {
  opacity: 0.5;
  cursor: pointer;
}

.tariff-lock-icon {
  font-size: 14px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}

/* Gate modal — использует .modal (белый блок) */
.tariff-gate-inner {
  text-align: center;
  max-width: 320px;
}

.tariff-gate-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.tariff-gate-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #1a1a1a;
}

.tariff-gate-text {
  font-size: 14px;
  color: #444;
  margin: 0 0 10px;
  line-height: 1.5;
}

.tariff-gate-hint {
  font-size: 13px;
  color: #666;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 18px;
  line-height: 1.5;
  text-align: left;
}

.btn-tariff-upgrade {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, #6c63ff, #5a52d5);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
}

.btn-tariff-upgrade:hover {
  opacity: 0.92;
}

.btn-tariff-close {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  color: var(--text-secondary, #888);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
}

/* ─── Центрированный page-header (для экрана тарифов) ───────────────────────  */

.page-header--centered h1 {
  text-align: center;
}

.page-header-spacer {
  width: 56px; /* совпадает с шириной btn-back, чтобы заголовок был точно по центру */
  flex-shrink: 0;
}

/* ─── Тарифный план — новые карточки планов (tp-*) ─────────────────────────  */

.tp-status-card {
  background: white;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tp-status-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.tp-status-tariff-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tp-status-period-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0d47a1;
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
}

.tp-status-days  { font-size: 12px; color: #888; font-weight: 400; }
.tp-status-warn  { font-size: 12px; color: #f44336; font-weight: 600; }

.tp-status-pool-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.tp-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.tp-status-pct { font-size: 12px; font-weight: 700; }

.tp-status-label { color: #888; }
.tp-status-val   { font-weight: 600; color: #333; }

.tp-status-limits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.tp-status-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.tp-status-limit-row b { color: #333; }

.tp-status-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.tp-progress-bar {
  height: 6px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

.tp-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

.tp-limits-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  flex-wrap: wrap;
  gap: 4px;
}

.tp-limits-row b { color: #444; }

/* Сетка карточек планов */
.tp-plans {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tp-billing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px;
}

.tp-billing-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: #f3f6fb;
  border: 1px solid #e5ebf5;
}

.tp-billing-toggle-btn {
  border: none;
  background: transparent;
  color: #4f5d75;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}

.tp-billing-toggle-btn.is-active {
  background: #ffffff;
  color: #1f2a44;
  box-shadow: 0 1px 6px rgba(31, 42, 68, 0.12);
}

.tp-billing-sale-pill {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

.tp-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 2px solid #e0e0e0;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
}

.tp-card--current {
  border-color: var(--accent, #4CAF50);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.tp-badge-popular,
.tp-badge-current {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.tp-badge-popular {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

.tp-badge-current {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: white;
}

.tp-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.tp-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tp-emoji { font-size: 26px; flex-shrink: 0; }

.tp-name {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin: 0;
  flex: 1;
}

/* Цена — прижата вправо */
.tp-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 64px;
}

.tp-price-year-row {
  font-size: 11px;
  color: #888;
  text-align: right;
  padding-left: 38px; /* отступ под emoji */
}

.tp-price-year-row--empty {
  display: none;
}

.tp-price-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, #4CAF50);
  white-space: nowrap;
}

.tp-price-per {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}

.tp-price-year {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  margin-top: 2px;
}

.tp-price-sale {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 3px;
}

.tp-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.tp-feat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 10px;
  background: #f8f9fa;
  border-radius: 8px;
  gap: 8px;
}

.tp-feat-row.tp-feat-locked {
  opacity: 0.45;
}

.tp-feat-label { color: #555; flex: 1; }
.tp-feat-value { font-weight: 700; color: #333; flex-shrink: 0; }

.tp-btn-upgrade {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: linear-gradient(135deg, var(--accent, #6c63ff), color-mix(in srgb, var(--accent, #6c63ff) 80%, black));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.tp-btn-upgrade:hover { opacity: 0.9; }

.tp-btn-current {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: #f0f7f0;
  color: var(--accent, #4CAF50);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Кнопка смены тарифа (disabled — период ещё активен) */
.tp-btn-upgrade--locked {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  background: #ccc !important;
  color: #fff !important;
}

/* Кнопка «Недоступно сейчас» для FREE-карточки при активном платном тарифе */
.tp-btn-locked {
  background: #f5f5f5;
  color: #aaa;
  font-size: 13px;
}

/* Кнопка отмены/возобновления автопродления */
.tp-btn-renewal--cancel {
  color: #e65100;
  border-color: #ffccbc;
  background: #fff3e0;
}
.tp-btn-renewal--cancel:hover { background: #ffe0b2; }

.tp-btn-renewal--resume {
  color: #2e7d32;
  border-color: #c8e6c9;
  background: #f1f8e9;
}
.tp-btn-renewal--resume:hover { background: #dcedc8; }

/* Чипы лимитов в status-card */
.tp-limits-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tp-chip {
  background: #f0f0f0;
  color: #555;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Подпись под прогресс-баром */
.tp-pool-sublabel {
  font-size: 11px;
  color: #aaa;
  margin-top: -4px;
}

/* Заметка на карточке тарифа */
.tp-card-note {
  font-size: 11px;
  color: #aaa;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 10px;
  text-align: center;
}

/* Иконка фичи (✅/❌/📊 и т.д.) */
.tp-feat-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Лимитная строка (с эмоджи-иконкой 👥/🚀/📢) */
.tp-feat-limit-row {
  background: transparent;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  padding: 5px 2px;
  font-size: 13px;
}
.tp-feat-limit-row:last-of-type { border-bottom: none; }

/* Иконка перед лимитной строкой */
.tp-feat-row-icon {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
}

/* Цена FREE */
.tp-price-free {
  font-size: 13px;
  font-weight: 700;
  color: #4CAF50;
  white-space: nowrap;
}

/* Кнопка для FREE тарифа */
.tp-btn-free {
  background: linear-gradient(135deg, #9E9E9E, #757575) !important;
}

/* ℹ️ тултип-иконка */
.tp-feat-tip {
  font-size: 12px;
  opacity: 0.55;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  user-select: none;
}

.tp-feat-tip:hover { opacity: 1; }

/* Вторичная кнопка в status-card */
.tp-btn-secondary {
  flex: 1;
  padding: 10px 12px;
  background: #f5f5f5;
  color: #444;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.tp-btn-secondary:hover { background: #eee; }

/* ─── Баннер предупреждения 80% пула (раздел 5.4) ───────────────────────── */
.pool-warning-banner {
  background: #FFF8E1;
  border-left: 4px solid #FF9800;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pool-warning-text {
  font-size: 13px;
  color: #5D4037;
  line-height: 1.5;
}

.pool-warning-actions {
  display: flex;
  gap: 8px;
}

.pool-warning-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #FFCC02;
  background: transparent;
  color: #F57C00;
  transition: background 0.15s;
}

.pool-warning-btn:hover { background: #FFF3E0; }

.pool-warning-btn--primary {
  background: #FF9800;
  color: #fff;
  border-color: #F57C00;
}

.pool-warning-btn--primary:hover { background: #F57C00; }

/* ─── Экран докупки участников (/buy-tokens) ─────────────────────────────── */
.buy-tokens-screen {
  min-height: 100vh;
  background: #f5f5f5;
}

.buy-tokens-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

/* Карточка текущего баланса */
.bt-status-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
}

.bt-status-label {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
}

.bt-status-count {
  font-size: 28px;
  font-weight: 700;
  color: #2196F3;
}

.bt-status-count span {
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.bt-status-extra {
  font-size: 12px;
  color: #4CAF50;
  margin-top: 4px;
}

/* Пояснительный текст */
.bt-info-text {
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin: 0;
}

/* Сетка пакетов */
.bt-packs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Карточка пакета */
.bt-pack-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 14px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
  position: relative;
  text-align: center;
}

.bt-pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(33,150,243,0.18);
  border-color: #2196F3;
}

.bt-pack-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FF9800, #F57C00);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.bt-pack-count {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-top: 4px;
}

.bt-pack-price {
  font-size: 20px;
  font-weight: 800;
  color: #2196F3;
}

.bt-pack-per {
  font-size: 11px;
  color: #999;
}

.bt-pack-btn {
  margin-top: 4px;
  padding: 8px 16px;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.bt-pack-btn:hover { background: #1976D2; }

/* Сноска внизу */
.bt-note {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  text-align: center;
  padding: 0 8px;
}


/* ==================== SUPERADMIN IMPERSONATION ==================== */

.sa-impersonation-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a2e;
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  gap: 12px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
}

.sa-impersonation-banner strong {
  color: #ffd54f;
}

.sa-banner-exit-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.sa-banner-exit-btn:hover {
  background: #c62828;
}

.profile-menu-item--danger {
  color: #e53935;
  border-top: 1px solid #ffeaea;
  margin-top: 4px;
}

.profile-menu-item--danger .profile-menu-icon {
  filter: none;
}

/* ══════════════════════════════════════════════════
   СПОСОБЫ ОПЛАТЫ — Этап 7
   ══════════════════════════════════════════════════ */

.payment-methods-screen {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.payment-methods-content {
  flex: 1;
  padding: 0 16px 24px;
}

/* ── Список карт ── */
.pm-cards-list {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.pm-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #f0f0f0;
  transition: background .15s;
}
.pm-card-row:last-child { border-bottom: none; }
.pm-card-row--blocked { opacity: .55; }

.pm-card-icon { flex-shrink: 0; }

.pm-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pm-card-info-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-card-number {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  letter-spacing: .5px;
  white-space: nowrap;
}

.pm-card-default {
  font-size: 11px;
  font-weight: 600;
  color: #1976d2;
  background: #e3f2fd;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.pm-card-blocked {
  font-size: 11px;
  font-weight: 600;
  color: #c62828;
  background: #ffebee;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.pm-card-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.pm-card-delete:hover  { color: #e53935; background: #ffebee; }
.pm-card-delete:active { color: #b71c1c; background: #ffcdd2; }

/* Заголовок экрана способов оплаты — использует общий .page-header */

/* Кнопка «Сделать основной» */
.pm-card-set-default {
  align-self: flex-start;
  background: none;
  border: 1px solid #c5cae9;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #5c6bc0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pm-card-set-default:hover { background: #e8eaf6; border-color: #7986cb; }
.pm-card-set-default:active { background: #c5cae9; }

/* ── Иконки платёжных систем ── */
.pm-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 34px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.pm-brand--visa {
  background: #1a1f71;
  color: #fff;
  font-style: italic;
  font-size: 14px;
}

.pm-brand--mc {
  background: #252525;
  position: relative;
  overflow: visible;
}
.pm-mc-left, .pm-mc-right {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
}
.pm-mc-left  { background: #eb001b; left: 6px; }
.pm-mc-right { background: #f79e1b; right: 6px; mix-blend-mode: screen; }

.pm-brand--mir {
  background: linear-gradient(135deg, #0053a0 0%, #009a44 100%);
  color: #fff;
  font-size: 11px;
}

.pm-brand--generic {
  background: #f5f5f5;
  font-size: 20px;
}

/* ── Пустое состояние ── */
.pm-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}
.pm-empty-icon { font-size: 48px; margin-bottom: 12px; }
.pm-empty-hint { font-size: 13px; color: #bbb; margin-top: 6px; }

/* ── Загрузка ── */
.pm-loading {
  text-align: center;
  padding: 60px 20px;
  color: #bbb;
}

/* ── Bottom sheet удаления (как в Ozon) ── */
.pm-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  transition: background .28s ease;
}
.pm-bottom-sheet-overlay--visible {
  background: rgba(0,0,0,.45);
}

.pm-bottom-sheet {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 12px 24px 36px;
  text-align: center;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.pm-bottom-sheet-overlay--visible .pm-bottom-sheet {
  transform: translateY(0);
}

.pm-bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 0 auto 20px;
}

.pm-bottom-sheet-icon {
  font-size: 56px;
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  line-height: 1;
}
.pm-bottom-sheet-x {
  position: absolute;
  top: -6px;
  right: -10px;
  width: 24px;
  height: 24px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pm-bottom-sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}
.pm-bottom-sheet-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px;
}

.pm-btn-delete {
  display: block;
  width: 100%;
  padding: 15px;
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background .2s;
}
.pm-btn-delete:active { background: #1565c0; }

.pm-btn-cancel {
  display: block;
  width: 100%;
  padding: 15px;
  background: #e3f2fd;
  color: #1976d2;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.pm-btn-cancel:active { background: #bbdefb; }

/* ── Toast-уведомление внутри экрана ── */
.pm-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  background: #323232;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 999;
}
.pm-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pm-toast--success { background: #2e7d32; }
.pm-toast--error   { background: #c62828; }
.pm-toast--warning { background: #e65100; }



/* ── Contact for winners verification block ─────────────────────────────── */

/* Строка «лейбл + кнопка ℹ» */
.contact-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.contact-block-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin: 0;
}

/* Хинт без автоматического эмодзи из .field-hint::before */
.contact-hint {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.contact-hint--warn {
  color: #e65100;
}

.contact-hint--suggest {
  color: #0277bd;
  background: #e3f2fd;
  border-radius: 8px;
  padding: 8px 10px;
}

/* Строка «инпут + кнопка» */
.contact-verify-row {
  display: flex;
  gap: 8px;
  align-items: stretch; /* кнопка тянется до высоты инпута */
}

.contact-verify-row .input-compact {
  flex: 1;
  min-width: 0;
}

.btn-contact-verify {
  flex-shrink: 0;
  background: #0088cc;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  display: flex;
  align-items: center;
}

.btn-contact-verify:active {
  opacity: 0.82;
}

.contact-verified-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-verified-badge {
  font-size: 14px;
  font-weight: 500;
  color: #2e7d32;
}

.contact-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #fff8e1;
  border-radius: 10px;
  font-size: 13px;
  color: #795548;
  margin-top: 6px;
}

.field-error {
  font-size: 13px;
  color: #e53935;
  margin-top: 6px;
}

/* ── Email modal (54-ФЗ) ──────────────────────────────────────────────────── */
.email-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .22s;
}
.email-modal-overlay--visible { opacity: 1; }

.email-modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.email-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #111;
}
.email-modal-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
  line-height: 1.4;
}
.email-modal-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.email-modal-input:focus { border-color: #5c6bc0; }
.email-modal-input--error { border-color: #e53935; }
.email-modal-error {
  font-size: 12px;
  color: #e53935;
  margin: 4px 0 0;
  min-height: 16px;
}
.email-modal-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.email-modal-btn--primary {
  background: #5c6bc0;
  color: #fff;
  margin-top: 12px;
}
.email-modal-btn--primary:hover { background: #4a5ab8; }
.email-modal-btn--secondary {
  background: none;
  color: #888;
  margin-top: 6px;
}
.email-modal-btn--secondary:hover { color: #555; }

/* ── Этап 8: YooKassa widget overlay ──────────────────────────────────────── */

/* Полноэкранный overlay для виджета ЮКасса */
.yk-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.yk-overlay--visible {
  opacity: 1;
  transform: translateY(0);
}

.yk-overlay-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.yk-overlay-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.yk-overlay-close:active { background: #f0f0f0; }
.yk-overlay-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Контейнер для iframe-виджета: занимает всё оставшееся место */
#payment-widget {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Этап 8: spinner overlay после события success ────────────────────────── */

.yk-spinner-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.yk-spinner-overlay--visible { opacity: 1; }

.yk-spinner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.yk-spinner-box p {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

/* CSS-only spinner */
.yk-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #e0e0e0;
  border-top-color: #6c63ff;
  border-radius: 50%;
  animation: yk-spin 0.75s linear infinite;
}
@keyframes yk-spin {
  to { transform: rotate(360deg); }
}

/* ===== Broadcast filter tabs ===== */
.broadcast-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.broadcast-filter-tabs::-webkit-scrollbar { display: none; }

.broadcast-filter-tab {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  border: 1px solid #E9EBEE;
  background: #fff;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.broadcast-filter-tab.active {
  background: #2678F3;
  border-color: #2678F3;
  color: #fff;
}

/* ===== Broadcast formatting toolbar ===== */
.broadcast-card,
.broadcast-block {
  background: #f7f8fa;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  cursor: pointer;
}

.broadcast-card {
  padding: 14px 16px;
  margin-bottom: 10px;
}

.broadcast-block {
  padding: 16px;
  margin-bottom: 12px;
  cursor: default;
}

.broadcast-fmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: #f5f5f5;
  border: 1px solid #E9EBEE;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.fmt-btn {
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}

.fmt-btn:hover {
  background: #e8eef8;
  border-color: #6c63ff;
  color: #6c63ff;
}

.fmt-btn:active {
  background: #d0d9f5;
}

.fmt-btn.active {
  background: #2678F3;
  border-color: #2678F3;
  color: #fff;
}
.fmt-btn.active:hover {
  background: #1a60d4;
  border-color: #1a60d4;
  color: #fff;
}

/* Textarea sticks to toolbar bottom */
.broadcast-fmt-toolbar + textarea,
.broadcast-fmt-toolbar + .fmt-link-panel,
.broadcast-fmt-toolbar + .broadcast-editor {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Inline link input panel */
.fmt-link-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f0f4ff;
  border: 1px solid #2678F3;
  border-top: none;
}
.fmt-link-panel + .broadcast-editor {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.fmt-link-input {
  flex: 1;
  border: 1px solid #c5d5f5;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  background: #fff;
  outline: none;
  color: #1a1a1a;
}
.fmt-link-input:focus {
  border-color: #2678F3;
}
.fmt-link-confirm,
.fmt-link-cancel {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fmt-link-confirm {
  background: #2678F3;
  color: #fff;
}
.fmt-link-confirm:hover { background: #1a60d4; }
.fmt-link-cancel {
  background: #e8e8e8;
  color: #555;
}
.fmt-link-cancel:hover { background: #d5d5d5; }

/* Global CRM settings card (Prizes page) */
.crm-global-card {
  background: #fff;
  border: 1px solid #E9EBEE;
  border-radius: 12px;
  padding: 14px;
  margin: 12px 0 16px 0;
}

.crm-global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crm-global-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.crm-global-hint {
  margin-top: 8px;
  font-size: 13px;
  color: #6b7280;
}

.crm-global-grid {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.crm-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 6px;
}

.crm-global-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-webhook-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.crm-webhook-row input[readonly] {
  background: #f9fafb;
  color: #374151;
}

.crm-copy-btn {
  white-space: nowrap;
  min-height: 36px;
}

.crm-stage-select {
  min-height: 88px;
  padding: 8px;
}

@media (max-width: 640px) {
  .crm-webhook-row {
    grid-template-columns: 1fr;
  }

  .crm-copy-btn {
    width: 100%;
  }
}

/* WYSIWYG contenteditable editor */
.broadcast-editor {
  min-height: 120px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #E9EBEE;
  border-radius: 0 0 12px 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #fff;
  outline: none;
  word-break: break-word;
}
.broadcast-editor:focus {
  border-color: #2678F3;
}
.broadcast-editor:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}
.broadcast-editor b, .broadcast-editor strong { font-weight: 700; }
.broadcast-editor i, .broadcast-editor em { font-style: italic; }
.broadcast-editor u { text-decoration: underline; }
.broadcast-editor s, .broadcast-editor del { text-decoration: line-through; }
.broadcast-editor code {
  font-family: 'Courier New', monospace;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 13px;
}
.broadcast-editor pre {
  font-family: 'Courier New', monospace;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  margin: 4px 0;
}
.broadcast-editor blockquote {
  border-left: 3px solid #2678F3;
  padding-left: 10px;
  margin: 4px 0;
  color: #555;
}
.broadcast-editor a { color: #2678F3; text-decoration: underline; }