/* ============================================
   CSS DESIGN SYSTEM — Giveaway Confirmation
   Full replacement for Tailwind utilities
   ============================================ */

/* --- 1. VARIABLES --- */
:root {
  --color-primary: #4A5FFF;
  --color-primary-light: #EAEBFF;
  --color-primary-hover: #3a4fe6;
  --color-bg: #F2F2F7;
  --color-card: #ffffff;
  --color-text: #111827;
  --color-text-dark: #1F2937;
  --color-text-body: #4B5563;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-border: #E5E7EB;
  --color-border-light: #F3F4F6;
  --color-indigo: #4F46E5;
  --color-success: #16A34A;
  --color-success-dark: #15803D;
  --color-success-light: #DCFCE7;
  --color-success-bg: #F0FDF4;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-error-bg: #FEF2F2;
  --color-warning: #EAB308;
  --color-warning-dark: #A16207;
  --color-warning-text: #854D0E;
  --color-warning-light: #FEF3C7;
  --color-warning-bg: #FEFCE8;
  --color-warning-border: #FDE68A;
  --color-purple: #7C3AED;
  --color-purple-light: #F5F3FF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-pink-ticket: #FECDD3;
  --color-pink-accent: #F472B6;
  --color-pink-light: #F9A8D4;
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-input: 12px;
  --radius-full: 9999px;
  --shadow-card: 0 8px 24px rgba(102, 112, 133, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Premium / monetization */
  --color-premium: #F59E0B;
  --color-premium-hover: #D97706;
  --color-premium-light: #FFFBEB;
  --color-premium-bg: #FEF3C7;
  --color-premium-border: #FDE68A;
  --color-premium-text: #92400E;

  /* Amber family */
  --color-amber: #F59E0B;
  --color-amber-dark: #D97706;
  --color-amber-darker: #92400E;

  /* Extended greens */
  --color-success-alt: #10B981;
  --color-success-dark-text: #065F46;

  /* Extended reds */
  --color-error-alt: #EF4444;
  --color-error-dark-text: #991B1B;

  /* Primary bg (for subtle backgrounds) */
  --color-primary-bg: rgba(74, 95, 255, 0.08);

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
}

/* --- 2. RESET & BASE --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

/* DS: Phosphor Icons global alignment fix */
i[class*="ph-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* padding: 0; */
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --- 3. LAYOUT --- */
.app {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.app--centered {
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* padding-left: 0.5em;
  padding-right: 0.5em; */
  box-shadow: none;
}

/* Как в clean main/index_smooth: иконка «пригласить» — мягкий круг, не сплошной primary */
.share-invite-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(74, 95, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Веб-участник (TG/Max HTML): как у legacy container_main — боковые поля, без прилипания к краям */
body.participant-page .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-grow {
  flex-grow: 1;
}

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

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.mr-2 {
  margin-right: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.select-none {
  user-select: none;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.hidden {
  display: none !important;
}

.stack-2>*+* {
  margin-top: 0.5rem;
}

.stack-3>*+* {
  margin-top: 0.75rem;
}

.stack-4>*+* {
  margin-top: 1rem;
}

/* --- 4. SCREEN SYSTEM --- */
[data-screen] {
  display: none;
}

[data-screen].active {
  display: block;
  animation: screen-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-screen="captcha"].active {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* --- 5. TYPOGRAPHY --- */
.heading-2xl {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.heading-xl {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.heading-lg {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.heading-md {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.text-body {
  font-size: 0.875rem;
  color: var(--color-text-body);
}

.text-secondary {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: 0.75rem;
}

.text-tiny {
  font-size: 11px;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-mono {
  font-family: var(--font-mono);
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.text-primary {
  color: var(--color-primary);
}

.text-indigo {
  color: var(--color-indigo);
}

.text-success {
  color: var(--color-success);
}

.text-error {
  color: var(--color-error);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-dark {
  color: var(--color-text-dark);
}

.text-white {
  color: #fff;
}

/* --- 6. CARDS --- */
/* Референс V2: без тени, только граница */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: none;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card--padded {
  padding: 1.25rem;
}

.card--compact {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}

.card--tight {
  padding: 0.75rem;
}

.card--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card--centered>.captcha-grid,
.card--centered>.btn,
.card--centered>.countdown,
.card--centered>.info-banner {
  width: 100%;
  align-self: stretch;
}

.card--centered>.lottie-container {
  flex-shrink: 0;
  align-self: center;
}

.card--centered>dotlottie-wc {
  flex-shrink: 0;
  align-self: center;
}

.lottie-hero {
  display: block;
  width: min(75vw, 280px);
  height: min(45vw, 170px);
  margin: 0 auto 0.25rem;
  flex-shrink: 0;
  align-self: center;
}

/* --- 7. BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  border-radius: var(--radius-button);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease-out, background-color 0.2s, color 0.2s;
  will-change: transform;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: none;
  cursor: pointer;
}

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

.btn:active {
  transform: translateY(-2px) scale(0.98);
  transition-duration: 0.1s;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: inherit;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(74, 95, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn--primary:hover {
  box-shadow: 0 6px 20px rgba(74, 95, 255, 0.4);
  background: color-mix(in srgb, var(--color-primary) 90%, white);
}

.btn--primary:active {
  box-shadow: 0 2px 8px rgba(74, 95, 255, 0.2);
}

.btn--primary:disabled {
  background: var(--color-gray-300);
  color: var(--color-text-secondary);
  box-shadow: none;
}

/* Ripple effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple-expand 0.5s ease-out;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.btn--secondary {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 500;
}

.btn--subscribe {
  background: var(--color-indigo);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn--success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.btn--error-state {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.btn--neutral {
  background: var(--color-gray-100);
  color: var(--color-text-body);
}

.btn--green {
  background: #22C55E;
  color: #fff;
}

.btn--full {
  width: 100%;
}

.btn--lg {
  padding: 1rem 1.25rem;
}

.btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn--icon {
  padding: 0.25rem;
  background: none;
  border-radius: var(--radius-full);
}

.btn--icon:hover {
  background: var(--color-gray-200);
}

.btn-icon-img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--add-channel {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1.5px dashed var(--color-gray-300);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.625rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn--add-channel:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.btn--add-channel:active {
  background: var(--color-gray-100);
}

/* --- 8. FORM ELEMENTS --- */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 95, 255, 0.15);
}

.input:hover:not(:focus) {
  border-color: var(--color-gray-300);
}

.input::placeholder {
  color: var(--color-text-muted);
}

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

.input-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 0.375rem;
}

.input-hint {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.required-indicator {
  color: var(--color-error);
  font-weight: 700;
  margin-left: 2px;
}

/* Radio cards */
.radio-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  user-select: none;
}

.radio-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.radio-card:hover {
  border-color: var(--color-primary-light);
  background: var(--color-gray-50);
}

.radio-card.selected {
  border-color: var(--color-primary);
  background: rgba(74, 95, 255, 0.04);
}

.radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}

.radio-card.selected .radio-dot {
  border-color: var(--color-primary);
}

.radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.2s;
}

.radio-card.selected .radio-dot::after {
  transform: scale(1);
}

.radio-card-label {
  font-weight: 600;
  color: var(--color-text-dark);
}

.radio-card-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Toggle switch */
/* Toggle — shadcn/switch pattern */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-gray-200);
  border: 2px solid var(--color-gray-200);
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 9999px;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.toggle input:checked+.toggle-slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

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

.toggle input:focus-visible+.toggle-slider {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.toggle input:disabled+.toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Checkbox card */
.checkbox-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  user-select: none;
}

.checkbox-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.checkbox-card:hover {
  background: var(--color-gray-50);
}

.checkbox-card.checked {
  border-color: var(--color-primary);
  background: rgba(74, 95, 255, 0.04);
}

.checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--color-gray-300);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.checkbox-card.checked .checkbox-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-box svg,
.checkbox-box i {
  opacity: 0;
  transition: opacity 0.2s;
}

.checkbox-card.checked .checkbox-box svg,
.checkbox-card.checked .checkbox-box i {
  opacity: 1;
}

/* Number stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 0.25rem;
}

.stepper-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--color-gray-100);
  color: var(--color-text-dark);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}

.stepper-btn:hover {
  background: var(--color-gray-200);
}

.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper-value {
  min-width: 3rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
}

.stepper-value-input {
  width: 3.5rem;
  min-width: 2.5rem;
  max-width: 4rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text);
  border: none;
  background: transparent;
  padding: 0.25rem;
  box-sizing: border-box;
}

.stepper-value-input:focus {
  outline: none;
}

/* --- 9. ICONS & BADGES --- */
.icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle--primary {
  background: var(--color-primary);
}

.icon-circle--gradient {
  background: linear-gradient(to bottom, #60A5FA, #A855F7);
}

.icon-circle--sm {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-circle--lg {
  width: 4rem;
  height: 4rem;
}

.icon-circle--primary-bg {
  background: var(--color-primary-bg, rgba(74, 95, 255, 0.08));
  color: var(--color-primary);
}

.icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.messenger-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.messenger-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messenger-badge--sm {
  width: 16px;
  height: 16px;
  border-width: 1px;
}

.messenger-badge--inline {
  position: static;
  display: inline-flex;
  vertical-align: middle;
}

.count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  background: #EF4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow-card);
  z-index: 10;
}

/* SVG icon sizes */
.icon-20 {
  width: 20px;
  height: 20px;
}

.icon-16 {
  width: 16px;
  height: 16px;
}

.icon-14 {
  width: 14px;
  height: 14px;
}

.icon-12 {
  width: 12px;
  height: 12px;
}

.icon-24 {
  width: 24px;
  height: 24px;
}

/* --- 10. CAPTCHA --- */
.captcha-card {
  width: 100%;
}

.captcha-title {
  min-height: 1.75rem;
}

.captcha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  width: 100%;
}

.captcha-option {
  cursor: pointer;
  border-radius: var(--radius-button);
  border: 4px solid transparent;
  background: var(--color-gray-50);
  transition: all 0.2s;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.captcha-option:hover {
  border-color: var(--color-gray-200);
}

.captcha-option.selected {
  border-color: var(--color-indigo);
  transform: scale(1.05);
}

.captcha-emoji {
  font-size: 3.75rem;
  transform: scale(1.5);
  line-height: 1;
}

/* --- 11. COUNTDOWN --- */
.countdown {
  text-align: center;
}

.countdown-digits {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-indigo);
  letter-spacing: 0.05em;
}

.countdown-digits.urgent {
  animation: pulse-timer 1.5s infinite ease-in-out;
}

.countdown-separator {
  margin: 0 0.25rem;
  opacity: 0.5;
  position: relative;
  top: -2px;
}

.countdown-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* --- 12. INFO BANNER --- */
.info-banner {
  width: 100%;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-button);
  padding: 0.75rem;
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.info-banner-icon {
  flex-shrink: 0;
  padding-top: 2px;
}

.info-banner-icon svg,
.info-banner-icon i {
  width: 20px;
  height: 20px;
  color: var(--color-warning);
}

.info-banner-text {
  font-size: 0.875rem;
  color: var(--color-warning-text);
}

/* --- 13. CHANNEL / BOOST --- */
.channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: #fff;
  border-radius: var(--radius-button);
  transition: all 0.2s;
  user-select: none;
  cursor: pointer;
  border: 1px solid var(--color-border-light);
}

.channel-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.channel-item:hover {
  border-color: rgba(124, 58, 237, 0.15);
  background: rgba(124, 58, 237, 0.02);
}

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

.channel-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-grow: 1;
  min-width: 0;
  margin-right: 0.5rem;
}

.channel-avatar {
  position: relative;
  flex-shrink: 0;
}

/* Иконка платформы (TG/MAX) в углу аватарки — как в референсе: один img, object-fit:cover */
.channel-avatar-platform-icon {
  display: block;
}

.channel-avatar-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.channel-avatar-circle--1 {
  background: linear-gradient(135deg, #818CF8, #4F46E5);
}

.channel-avatar-circle--2 {
  background: linear-gradient(135deg, #F472B6, #DB2777);
}

.channel-avatar-circle--3 {
  background: linear-gradient(135deg, #2DD4BF, #0D9488);
}

.channel-avatar-img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-gray-200);
  object-fit: cover;
}

.channel-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
}

.boost-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  background: var(--color-purple-light);
  color: var(--color-purple);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.boost-badge:active {
  background: rgba(124, 58, 237, 0.15);
  transform: scale(0.95);
}

.boost-badge--high {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.boost-badge i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vote-counter {
  font-size: 11px;
  font-weight: 700;
}

.vote-counter--active {
  color: var(--color-primary);
}

.vote-counter--inactive {
  color: var(--color-text-muted);
}

/* --- 14. TICKETS --- */
.ticket-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ticket-item--new {
  animation: fadeInSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  box-shadow: 0 0 0 2px var(--color-success-light);
  background: rgba(240, 253, 244, 0.3);
}

.ticket-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.ticket-number {
  font-weight: 700;
  color: var(--color-text-dark);
  letter-spacing: 0.05em;
}

.ticket-date {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.ticket-new-badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-light);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

/* --- 15. GIFT BLOCK --- */
.gift-block {
  border: 1px solid var(--color-border-light);
}

.gift-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gift-info {
  flex: 1;
}

.gift-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 2px;
}

.gift-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.gift-cta {
  margin-top: 0.75rem;
  color: var(--color-primary);
  font-weight: 900;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.gift-cta:hover {
  color: var(--color-primary-hover);
}

.gift-cta svg,
.gift-cta i {
  width: 16px;
  height: 16px;
}

.gift-lottie-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.gift-lottie-masked {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gift-lottie-masked>dotlottie-wc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gift-lottie-masked>dotlottie-wc:first-child {
  z-index: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.gift-lottie-masked>dotlottie-wc:nth-child(2) {
  z-index: 2;
  transform: translate(-50%, -50%) scale(0.85);
}

.gift-lottie-bg {
  width: 140%;
  height: 140%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.gift-lottie-fg {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* --- 16. WINNERS --- */
.winner-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.winner-rank {
  background: var(--color-indigo);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.625rem;
  border-radius: 8px;
  flex-shrink: 0;
}

.ticket-winner-ring {
  box-shadow: 0 0 0 2px #22C55E;
}

/* --- 17. NOT SUBSCRIBED --- */
.subscription-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
}

.subscription-status--yes {
  color: var(--color-success-dark);
  background: var(--color-success-light);
}

.subscription-status--no {
  color: var(--color-error);
  background: var(--color-error-light);
}

.sub-status-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* --- 18. ERROR VIEW --- */
.error-card {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* --- 18a. DRAFT LOADING OVERLAY --- */
.draft-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.draft-loading-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.draft-loading-content {
  text-align: center;
  color: var(--color-fg, #111);
}

.draft-loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 3px solid var(--color-border, #e5e7eb);
  border-top-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: draft-loading-spin 0.8s linear infinite;
}

@keyframes draft-loading-spin {
  to { transform: rotate(360deg); }
}

.draft-loading-text {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.draft-loading-attempt {
  font-size: 0.875rem;
  color: var(--color-secondary, #6b7280);
  margin: 0.5rem 0 0;
}

/* --- 19. MODALS --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.modal-overlay.open {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
}

.modal-sheet {
  width: 100%;
  max-width: 32rem;
  background: var(--color-bg);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.modal-overlay.open .modal-sheet {
  transform: translateY(0);
  opacity: 1;
}

/* Кнопки в модалках — быстрый отклик на тап (iOS), без 300ms задержки */
.modal-sheet .btn {
  touch-action: manipulation;
  cursor: pointer;
}

.modal-header {
  padding: 1rem;
  position: sticky;
  top: 0;
  background: rgba(242, 242, 247, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  flex: 1;
}

.modal-header-spacer {
  width: 2rem;
}

.modal-close {
  color: var(--color-text-secondary);
  padding: 0.25rem;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--color-text-dark);
  background: var(--color-gray-200);
}

.modal-close svg,
.modal-close i {
  width: 24px;
  height: 24px;
}

.modal-body {
  padding: 1rem 1rem 2rem;
}

/* Referral modal specifics */
.referral-header {
  background: #fff;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 1.5rem;
  padding-top: 2rem;
  text-align: center;
  position: relative;
}

.referral-link-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-dark);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* --- 20. WIZARD --- */
.wizard-brand {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.wizard-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 1.5rem;
}

.wizard-progress-step {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--color-gray-200);
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s;
  position: relative;
  overflow: hidden;
}

.wizard-progress-step.completed {
  background: var(--color-primary);
}

.wizard-progress-step.current {
  background: linear-gradient(90deg, var(--color-primary), #8B5CF6);
  animation: progress-shimmer 1.5s ease-in-out infinite;
}

@keyframes progress-shimmer {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.wizard-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Modal confirm icon fix */
#modal-confirm-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#modal-confirm-icon i {
  font-size: 28px !important;
  line-height: 1 !important;
}

/* Phase ring slot — see animations.css for full styles */

.wizard-close-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-secondary);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wizard-close-btn:hover {
  background: var(--color-gray-100);
  color: var(--color-error);
}

.wizard-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.wizard-back-btn:hover {
  background: var(--color-gray-100);
}

.wizard-back-btn svg,
.wizard-back-btn i {
  width: 20px;
  height: 20px;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.wizard-step-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.wizard-icon-block {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.wizard-step-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.wizard-step-icon--blue {
  background: linear-gradient(135deg, #4A5FFF, #6C7CFF);
}

.wizard-step-icon--orange {
  background: linear-gradient(135deg, #F97316, #FB923C);
}

.wizard-step-icon--green {
  background: linear-gradient(135deg, #16A34A, #22C55E);
}

.wizard-step-icon--red {
  background: linear-gradient(135deg, #DC2626, #EF4444);
}

.wizard-step-icon--purple {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
}

.wizard-step-icon--teal {
  background: linear-gradient(135deg, #0D9488, #14B8A6);
}

.wizard-step-icon--yellow {
  background: linear-gradient(135deg, #D97706, #F59E0B);
}

.wizard-step-icon--pink {
  background: linear-gradient(135deg, #DB2777, #EC4899);
}

.wizard-step-icon--indigo {
  background: linear-gradient(135deg, #4338CA, #6366F1);
}

.wizard-form {
  margin-bottom: 0;
}

.wizard-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.wizard-draft-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-input);
  border: 1px dashed var(--color-border);
}

.text-indigo {
  color: var(--color-indigo);
}

/* Animated emoji icons for wizard steps */
.wizard-emoji-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Info screenshot (captcha_info, boosts_info) */
.info-screenshot-wrap {
  text-align: center;
}

.info-screenshot {
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  margin: 0 auto;
  display: block;
}

/* Summary row with edit */
.summary-row--editable {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

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

.summary-row-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.summary-row-left .summary-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.summary-row-left .summary-value {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-text-dark);
  font-weight: 600;
  word-break: break-word;
  text-align: left;
}

.summary-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.summary-edit-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.summary-edit-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- 21. DASHBOARD --- */
.dashboard-app-header {
  padding: 1rem 0 1.25rem;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
}

.dashboard-title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

/* Segmented Tabs */
/* Tabs — iOS-style segmented control */
.tabs {
  display: flex;
  position: relative;
  background: #EFEFF4;
  border-radius: 10px;
  padding: 4px;
  gap: 0;
  margin-bottom: 0.75rem;
}

.tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.tab {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tab.active {
  color: var(--color-text);
}

.tab:not(.active):hover {
  color: var(--color-text-secondary);
}

/* Tab Content */
.tab-content {
  display: none;
}

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

/* Sub-tabs (inner tabs for filtering active/finished) */
.sub-tabs {
  display: flex;
  gap: 0;
  background: var(--color-gray-100);
  border-radius: 8px;
  padding: 2px;
  margin-bottom: 0.75rem;
}

.sub-tab {
  flex: 1;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sub-tab.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 1px 2px rgba(74, 95, 255, 0.08);
}

/* Section header with title and tabs */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0rem 0 0.5rem;
  gap: 1rem;
}

.tab-content .section-header:first-child {
  margin-top: 0.5rem;
}

.section-header-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
  flex-shrink: 0;
  padding-left: 16px;
}

/* Отступ сверху для секций «Мои каналы» / «Мои посты» — визуальное отделение от блока выше */
.section-header--spaced {
  margin-top: 1.5rem;
}

.section-tabs {
  display: flex;
  gap: 0;
  background: var(--color-gray-100);
  border-radius: 6px;
  padding: 2px;
  flex-shrink: 0;
}

.section-tab {
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}


.section-tab.active {
  color: var(--color-primary);
  background: var(--color-card);
  box-shadow: 0 1px 2px rgba(74, 95, 255, 0.08);
}

.section-tab:not(.active):hover {
  color: var(--color-text);
}

/* Контент под меню Активные/Завершенные: отступ сверху */
.dashboard-list-under-tabs {
  margin-top: 1rem;
}

/* Icon add button (primary) */
.btn-icon-add {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-primary);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.btn-icon-add:hover {
  background: #3d4ecc;
}

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

/* Create button — hero CTA (оранжевый градиент, точки, прыгающий квадрат) */
.button.btn-create-hero {
  --h-button: 56px;
  --round: 0.75rem;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s ease;
  background: radial-gradient(
      65.28% 65.28% at 50% 100%,
      rgba(249, 115, 22, 0.8) 0%,
      rgba(249, 115, 22, 0) 100%
    ),
    linear-gradient(0deg, #ea580c, #f97316);
  border-radius: var(--round);
  border: none;
  outline: none;
  padding: 12px 18px;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  min-height: var(--h-button);
}
.button.btn-create-hero::before,
.button.btn-create-hero::after {
  content: "";
  position: absolute;
  inset: var(--space);
  transition: all 0.5s ease-in-out;
  border-radius: calc(var(--round) - var(--space));
  z-index: 0;
}
.button.btn-create-hero::before {
  --space: 0px;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: btn-shimmer 2.5s ease-in-out infinite;
  z-index: 2;
}
.button.btn-create-hero::after {
  --space: 0px;
  background: none;
}
@keyframes btn-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.button.btn-create-hero:active {
  transform: scale(0.95);
}

.button.btn-create-hero .points_wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.button.btn-create-hero .points_wrapper .point {
  bottom: -10px;
  position: absolute;
  animation: floating-points infinite ease-in-out;
  pointer-events: none;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 9999px;
}
@keyframes floating-points {
  0% { transform: translateY(0); }
  85% { opacity: 0; }
  100% { transform: translateY(-55px); opacity: 0; }
}
.button.btn-create-hero .points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
.button.btn-create-hero .points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
.button.btn-create-hero .points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
.button.btn-create-hero .points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
.button.btn-create-hero .points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
.button.btn-create-hero .points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
.button.btn-create-hero .points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
.button.btn-create-hero .points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
.button.btn-create-hero .points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
.button.btn-create-hero .points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }

.button.btn-create-hero .inner {
  z-index: 2;
  gap: 6px;
  position: relative;
  width: 100%;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.2s ease-in-out;
}

/* Loader icon in create button */
.button.btn-create-hero .inner .loader {
  width: 12px;
  height: 12px;
  margin: 0 8px 0 0;
  position: relative;
  flex-shrink: 0;
}
.button.btn-create-hero .inner .loader::before {
  content: '';
  width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  position: absolute;
  top: 15px;
  left: 0;
  border-radius: 50%;
  animation: loader-shadow 0.7s linear infinite;
}
.button.btn-create-hero .inner .loader::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
  animation: loader-jump 0.7s linear infinite;
}
@keyframes loader-jump {
  15% { border-bottom-right-radius: 2px; }
  25% { transform: translateY(2px) rotate(22.5deg); }
  50% { transform: translateY(4px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 9px; }
  75% { transform: translateY(2px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
}
@keyframes loader-shadow {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.2, 1); }
}

/* Upload area */
.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  gap: 0.5rem;
}

.upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.upload-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Char counter */
.char-counter {
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Section divider */
.section-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0 0.5rem;
}

.section-divider-text {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-dark);
  text-transform: none;
  letter-spacing: normal;
}

/* Карточки в списках дашборда — единый минимальный размер по референсу */
#participations-list .card.card--tight,
#events-list .card.card--tight,
.dash-list-card,
.saved-post-card.card--tight,
#my-channels-list .card.card--tight {
  min-height: 68px;
  box-sizing: border-box;
}

.dash-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
}

/* Референс: dash-card info/right */
.dash-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dash-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-card-meta,
.dash-card-meta span {
  font-size: 12px !important;
  color: var(--color-text-muted);
  margin-top: 3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dash-card-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.dash-card-right .event-timer-badge {
  margin-top: 3px;
  margin-left: 0;
}
.dash-card-right .event-status-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Event cards — standalone (all-giveaways screen etc.) */
.event-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.event-card:active {
  background: var(--color-gray-50);
}

.event-card--temporary-draft {
  border-left: 3px solid rgba(59, 130, 246, 0.4);
  /* background: linear-gradient(to right, rgba(59, 130, 246, 0.02) 0%, transparent 3px); */
}

.event-card:hover {
  background: var(--color-gray-50);
}

/* Event cards inside grouped-card on dashboard — stripped */
.grouped-card .event-card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
}
.grouped-card .event-card:hover,
.grouped-card .event-card:active {
  background: var(--color-gray-50);
}

.event-card--temporary-draft:hover {
  border-left-color: rgba(59, 130, 246, 0.6);
}

.event-temp-draft-indicator {
  font-size: 0.875rem;
  opacity: 0;
  color: rgba(59, 130, 246, 0.8);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.event-card:active {
  transform: scale(0.98);
}

.event-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-icon-wrap--active {
  background: linear-gradient(135deg, #16A34A, #22C55E);
}

.event-icon-wrap--finished {
  background: var(--color-gray-200);
}

.event-icon-wrap--draft {
  background: linear-gradient(135deg, #D97706, #F59E0B);
}

.event-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-full);
}

.event-status--active {
  background: transparent;
  color: var(--color-success);
  font-weight: 600;
  padding: 0;
}

.event-status--finished {
  background: var(--color-gray-200);
  color: var(--color-text-secondary);
}

.event-status--draft {
  background: #FEF3C7;
  color: #92400E;
  /* animation: status-pulse-draft 3s ease-in-out infinite; */
}

.event-status--waiting {
  background: #DBEAFE;
  color: #1D4ED8;
}

@keyframes status-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
  }
}

@keyframes status-pulse-draft {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
  }
}

.event-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.event-meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.event-meta--small {
  font-size: 0.6875rem;
}

/* Event meta row - replaces inline styles */
.event-meta-row {
  min-width: 0;
  flex: 1;
}

.event-avatars {
  flex-shrink: 0;
  min-width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Compact avatar stack: fixed 40px */
.event-avatars-fixed {
  position: relative;
  width: 40px;
  height: 32px;
  flex-shrink: 0;
}

/* Single avatar — centered */
.event-avatars-fixed.single {
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-avatars-fixed.single .compact-avatar {
  position: relative;
  left: auto !important;
}

.compact-avatar {
  position: absolute;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--color-card);
  overflow: visible;
}

.compact-avatar-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--color-card);
  object-fit: cover;
}

/* +N overlay on the last avatar — sits above everything including badge */
.compact-avatar-count {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.gallery-title {
  padding-right: 0.5rem;
}

.gallery-tickets-count {
  text-align: right;
  flex-shrink: 0;
  line-height: 1;
}

.gallery-tickets-number {
  font-size: 0.9375rem;
}

.gallery-meta-row {
  min-width: 0;
  flex: 1;
}

.channel-name-wrapper {
  min-width: 0;
}

.saved-post-content {
  min-width: 0;
  flex: 1;
}

.saved-post-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-dark);
}

.saved-post-text {
  margin-top: 2px;
}

.saved-post-date {
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: var(--color-gray-400);
}

/* Дашборд: карточки постов без глазка, без клика (как в референсе) */
.saved-post-card--dashboard {
  cursor: default;
}
.saved-post-card--dashboard:hover {
  background: transparent;
}

/* Модалка «Все посты» — карточки из референса (title, text, date, eye) */
.saved-post-card--modal {
  cursor: default;
}
.saved-post-card--modal .saved-post-date {
  margin-left: 0;
}
.saved-post-modal-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.radio-card-content {
  min-width: 0;
}

.modal-channel-avatar {
  background: var(--color-gray-200);
  width: 40px;
  height: 40px;
}

.trophy-emoji {
  font-size: 1.5rem;
}

.boost-count {
  margin: 0 2px;
}

.empty-channels-text {
  padding: 0.5rem 0;
}

.event-delete-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
  border-radius: 4px;
}

.event-delete-btn:hover {
  opacity: 1;
  color: var(--color-text-secondary);
  background: var(--color-gray-100);
  transform: scale(1.1);
}

/* Channel list delete buttons — light gray, thin icon */
.channel-delete-btn {
  color: var(--color-gray-300) !important;
  transition: color 0.15s;
}
.channel-delete-btn:hover {
  color: var(--color-text-muted) !important;
}

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

.event-delete-btn svg,
.event-delete-btn i {
  width: 12px;
  height: 12px;
}

.my-channel-row {
  align-items: center;
}

.my-channel-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.75rem;
}

/* Time remaining badge on cards */
.card-time-remaining {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(74, 95, 255, 0.06);
  border: 1px solid rgba(74, 95, 255, 0.12);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Event timer - simple text with icon */
.event-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.event-timer svg {
  flex-shrink: 0;
}

.event-timer span {
  color: var(--color-text);
}

/* Event timer badge with background */
.event-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-primary-bg, rgba(74, 95, 255, 0.08));
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-left: 8px;
}

.event-timer-badge svg,
.event-timer-badge i {
  flex-shrink: 0;
  opacity: 0.7;
}

.event-timer-badge span {
  font-size: 1em;
}

/* --- Grouped card (iOS-style list) --- */
.grouped-card {
  background: var(--color-card);
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.grouped-card-list > * {
  border-bottom: 1px solid var(--color-border-light);
}

.grouped-card-list > *:last-child {
  border-bottom: none;
}

/* When footer is visible, keep last item divider */
.grouped-card-list:has(~ .grouped-card-footer:not(.hidden)) > *:last-child {
  border-bottom: 1px solid var(--color-border-light);
}

.grouped-card-footer {
  /* no border — divider comes from last item ::after */
}

.grouped-card-footer .show-all-btn {
  border-top: none;
  margin-top: 0;
  border-radius: 0;
  color: var(--color-primary);
  font-weight: 500;
  padding: 12px 16px;
  justify-content: center;
  gap: 6px;
}

.grouped-card-footer .show-all-btn::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  margin-left: 2px;
  flex-shrink: 0;
}

.grouped-card-footer .show-all-btn:hover {
  color: var(--color-primary-hover);
  background: var(--color-gray-50);
}

/* Show-all count badge */
.show-all-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-primary-bg, rgba(74, 95, 255, 0.08));
  color: var(--color-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 4px;
}

/* Items inside grouped card — strip card chrome, inset dividers */
.grouped-card .grouped-card-list > * {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
  position: relative;
}

/* Inset divider: 16px from each edge */
.grouped-card .grouped-card-list > *::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--color-border-light);
}

.grouped-card .grouped-card-list > *:last-child::after {
  display: none;
}

/* Restore divider when footer is visible */
.grouped-card .grouped-card-list:has(~ .grouped-card-footer:not(.hidden)) > *:last-child::after {
  display: block;
}

/* Grouped card items (non-.card elements used directly inside grouped-card-list) */
.grouped-card-item {
  padding: 12px 16px;
  position: relative;
}

/* Boost channels list inside grouped card */
#boost-channels-list .channel-item {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 10px 16px;
  position: relative;
}

#boost-channels-list .channel-item + .channel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--color-border-light);
}

/* Meta: both gray, uniform */
.dash-meta-count,
.dash-meta-date {
  color: var(--color-text-muted);
}

/* Event participants count */
.event-participants {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Gallery card */
.gallery-card {
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.2s;
  border: 1px solid transparent;
}

.gallery-card:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border-color: var(--color-border);
}

.gallery-card:active {
  transform: scale(0.98);
}

.gallery-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Empty state */
.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  background: var(--color-gray-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-text {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.empty-state-sub {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  margin-top: 0.375rem;
  max-width: 260px;
  line-height: 1.4;
}

/* Dashboard footer */

/* Summary screen */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.summary-row+.summary-row {
  border-top: 1px solid var(--color-border-light);
}

.summary-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.summary-value {
  font-size: 0.875rem;
  color: var(--color-text-dark);
  font-weight: 600;
  text-align: right;
}

/* --- 22. SKELETONS --- */
.skeleton-overlay {
  position: relative;
}

@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.skeleton-pulse {
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-box {
  background: linear-gradient(90deg,
      var(--color-gray-200) 25%,
      var(--color-gray-100) 50%,
      var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

.skeleton-circle {
  background: linear-gradient(90deg,
      var(--color-gray-200) 25%,
      var(--color-gray-100) 50%,
      var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 50%;
}

.skeleton-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* --- 23. ANIMATIONS --- */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none; /* НЕ translateY(0): иначе forwards держит transform → containing block ломает backdrop-filter у вложенных стеклянных элементов */
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fadeInSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-150 {
  animation-delay: 150ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-250 {
  animation-delay: 250ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-350 {
  animation-delay: 350ms;
  width: 100%;
  /* как в старом main_smooth: блок подарка на всю ширину колонки */
}

@keyframes pulse-timer {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

@keyframes light-sweep-anim {
  0% {
    left: -100%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    left: 200%;
    opacity: 0;
  }

  100% {
    left: 200%;
    opacity: 0;
  }
}

.light-sweep {
  position: relative;
  overflow: hidden;
}

.light-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 20%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.1) 80%,
      transparent 100%);
  transform: skewX(-25deg);
  animation: light-sweep-anim 3.5s infinite linear;
  pointer-events: none;
  z-index: 10;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* Interactive button hover/active (used on cards) */
.interactive {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease-out;
  will-change: transform;
  cursor: pointer;
}

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

.interactive:active {
  transform: translateY(-2px) scale(0.98);
  transition-duration: 0.1s;
}

/* --- 24. MISC / CREATION MODAL --- */
.creation-modal-body {
  padding: 1.5rem;
}

.creation-field+.creation-field {
  margin-top: 1rem;
}

/* Detail modal info card */
.detail-info-card {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-dark);
}

.detail-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.detail-param {
  font-size: 0.875rem;
  color: var(--color-text-dark);
}

.detail-param-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Lottie container in main card */
.lottie-container {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  margin: 0 auto 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer branding */
.branding {
  text-align: center;
  color: var(--color-text-muted);
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

/* Chevron icon */
.chevron-right {
  width: 24px;
  height: 24px;
  opacity: 0.3;
}

/* Toast — shadcn/sonner pattern */
/* --- iOS PILL TOASTS --- */
.toast-container {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.ios-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  cursor: pointer;
  max-width: calc(100vw - 32px);

  /* Initial hidden state */
  opacity: 0;
  transform: translateY(-50px) scale(0.8);
  filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ios-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.ios-toast.hide {
  opacity: 0;
  transform: translateY(-20px) scale(0.8);
  filter: blur(10px);
}

.ios-toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.ios-toast-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-success { color: #34C759; }
.icon-error { color: #FF3B30; }
.icon-info { color: #007AFF; }
.icon-warning { color: #FF9500; }
.icon-loading {
  color: #6B7280;
  animation: spin 1s linear infinite;
}

/* --- SHADCN: Tooltip (CSS-only) --- */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.tooltip-wrap::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 50;
}

.tooltip-wrap:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- SHADCN: Skeleton shimmer --- */
.skeleton {
  background: linear-gradient(90deg,
      var(--color-gray-100) 25%,
      var(--color-gray-200) 50%,
      var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-input);
}

.skeleton--text {
  height: 1rem;
  width: 60%;
  border-radius: 4px;
}

.skeleton--circle {
  border-radius: 50%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* --- SHADCN: Badge variants --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9999px;
  transition: background 0.15s, color 0.15s;
}

.badge--primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.badge--success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}

.badge--warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
}

.badge--muted {
  background: var(--color-gray-200);
  color: var(--color-text-secondary);
}

/* --- SHADCN: Separator --- */
.separator {
  height: 1px;
  background: var(--color-border);
  margin: 1rem 0;
  border: none;
}

/* --- SHADCN: Avatar (for channels/users) --- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), #8B5CF6);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.6875rem;
}

.avatar--md {
  width: 36px;
  height: 36px;
}

.avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 0.875rem;
}

/* --- Saved post cards (как в референсе pravki_extract: фон при hover/active, дата серой) --- */
.saved-post-card {
  cursor: pointer;
  transition: background 0.15s;
}

.saved-post-card:hover {
  background: var(--color-gray-50);
}

.saved-post-card:active {
  background: var(--color-gray-100);
}

/* --- 25. GIVEAWAY MANAGE --- */
.manage-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stats-csv-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.stats-csv-btn:active {
  transform: scale(0.96);
  background: var(--color-primary);
  color: #fff;
}

.manage-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.manage-stat-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  text-align: center;
}

/* Inline stats — no cards */
.manage-stats-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 0;
  margin-bottom: 8px;
}

.manage-stat-inline {
  text-align: center;
}

.manage-stat-inline-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.manage-stat-inline-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.manage-stat-inline-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}

/* Header meta line (compact stats under title) */
.manage-header-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Danger action row */
.manage-action-danger:active {
  background: var(--color-error-bg) !important;
}

/* Manage settings — TG-style inline label/value rows */
.manage-settings-group {
  margin-bottom: 0;
}

.manage-settings-group .section-header {
  margin-top: 24px;
  margin-bottom: 6px;
}

.manage-setting-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 8px;
  min-height: 44px;
}

.manage-setting-row--editable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.manage-setting-row--editable:active {
  background: var(--color-gray-50);
}

.manage-setting-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  flex-shrink: 0;
}

.manage-setting-value {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-setting-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 2px;
}

.manage-row-action {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
}

/* Multiline row: label on top, value below — for channels */
.manage-setting-row--multi {
  flex-wrap: wrap;
  align-items: flex-start;
}

.manage-setting-multi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manage-setting-value-multi {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
  word-break: break-word;
}

.manage-setting-row--multi .manage-setting-actions {
  align-self: center;
}

/* Ghost danger button */
.manage-btn-danger {
  background: transparent !important;
  color: var(--color-error) !important;
  border: 1px solid var(--color-error) !important;
  font-weight: 600;
  box-shadow: none !important;
}

.manage-btn-danger:active {
  background: var(--color-error-bg) !important;
}

.manage-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
}

.manage-stat-value--time {
  font-size: 1.125rem;
  color: var(--color-primary);
}

.manage-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  font-weight: 500;
}

/* Кнопка «Статистика» (пока скрыта, display:none в шаблоне) */
.manage-stats-nav {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 1rem;
  touch-action: manipulation;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: auto;
}
.manage-stats-nav:active {
  background: var(--color-gray-50);
  box-shadow: none;
}
.manage-stats-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}
.manage-stats-nav__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.manage-stats-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}
.manage-stats-nav__sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.manage-stats-nav__chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ========== STATS PAGE: начальный экран (до "Собрать статистику") ========== */
.stats-initial-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--color-bg, #F9FAFB);
}
.stats-initial-header {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  padding-top: max(0.75rem, env(safe-area-inset-top));
}
.stats-initial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  max-width: 25rem;
  margin: 0 auto;
}
.stats-initial-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark, #1F2937);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.stats-initial-hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6B7280);
  margin: 0 0 1.5rem;
  line-height: 1.4;
  text-align: center;
  max-width: 20rem;
}
.stats-initial-content .btn--lg {
  min-height: 3rem;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  touch-action: manipulation;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ========== GIVEAWAY STATS SCREEN ========== */
.stats-hero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1rem 0 0.25rem;
}
.stats-hero-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stats-hero-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.stats-block-label {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin: 1rem 0 0.5rem;
}
.stats-donut-card-title {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  margin-bottom: 0.75rem;
}
.stats-chart-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}
.stats-chart-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.stats-chart-tab {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast);
  touch-action: manipulation;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.stats-chart-tab.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.stats-line-chart-wrap { overflow: hidden; }
.stats-line-chart-wrap svg { cursor: crosshair; }
.stats-line-chart-wrap svg text { font-size: 10px !important; }
.stats-date-range { margin-top: 0.75rem; }
.stats-date-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.stats-date-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.stats-date-lbl {
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding-left: 0.25rem;
}
.stats-csel { position: relative; }
.stats-csel-wrap { position: relative; }
.stats-csel-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: var(--color-card);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.stats-csel-trigger.open { border-color: var(--color-primary); }
.stats-csel-val {
  font-weight: 700;
  font-size: inherit;
}
.stats-csel-menu {
  display: none;
  position: fixed;
  background: var(--color-card);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-input);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 9999;
  overflow: hidden;
  touch-action: pan-y;
}
.stats-csel-menu.open { display: block; }
.stats-csel-list {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  touch-action: pan-y;
}
.stats-csel-item {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--duration-fast);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.stats-csel-item:hover:not(.disabled) { background: var(--color-gray-50); }
.stats-csel-item.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.stats-date-arrow {
  color: var(--color-text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  padding-bottom: 0.48rem;
}
.stats-date-summary {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: center;
}
.stats-ch-list-card { padding: 0 !important; }
.stats-source-ch-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}
.stats-source-ch-card:last-child { border-bottom: none; }
.stats-ch-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  position: relative;
}
.stats-ch-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  object-fit: cover;
}
.stats-source-ch-info { flex: 1; min-width: 0; }
.stats-source-ch-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.125rem;
}
.stats-source-ch-name {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-source-ch-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
}
.stats-source-count-col {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
}
.stats-source-count-num {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.stats-source-count-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}
.stats-ch-bar-wrap {
  height: 3px;
  border-radius: 99px;
  background: var(--color-border);
  margin-top: 0.5rem;
  overflow: hidden;
}
.stats-ch-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--color-primary);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-donut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.stats-donut-card { padding: 1rem !important; min-width: 0; }
.stats-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.stats-donut-wrap--stack {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.stats-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}
.stats-donut-legend--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 0.75rem;
}
.stats-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  border-radius: 6px;
  padding: 0.125rem 0.25rem;
}
.stats-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-legend-name {
  color: var(--color-text-body);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-legend-pct {
  color: var(--color-text-dark);
  font-weight: 700;
  white-space: nowrap;
}
.stats-extra-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
  border-radius: 8px;
  padding: 0.25rem;
}
.stats-extra-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stats-extra-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text-body);
  min-width: 0;
}
.stats-extra-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-dark);
  white-space: nowrap;
}
.stats-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--color-text-dark);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  max-width: 220px;
  white-space: normal;
  line-height: 1.4;
  touch-action: manipulation;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  cursor: pointer;
}
.stats-tooltip.hidden {
  opacity: 0;
  pointer-events: none;
}

.stats-refresh-wrap {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.manage-command-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 0.625rem 0.75rem;
}

.manage-command-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

.manage-command-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.manage-command-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.manage-command-box code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-dark);
  word-break: break-all;
}

.manage-command-copy {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.manage-command-copy:hover {
  background: var(--color-primary);
  color: #fff;
}

/* --- 26. DATE PICKER --- */
.dp-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  background: var(--color-card);
}

.dp-trigger.has-value {
  color: var(--color-text-dark);
  font-weight: 500;
}

.dp-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dp-month-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.dp-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dp-nav-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 0.25rem;
}

.dp-weekdays span {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.25rem 0;
  text-transform: uppercase;
}

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text);
  background: transparent;
  border: none;
  transition: background 0.15s, color 0.15s;
}

.dp-day:hover {
  background: var(--color-gray-100);
}

.dp-day.selected {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.dp-day.today:not(.selected) {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}

.dp-day.other-month {
  color: var(--color-gray-300);
}

.dp-day.disabled {
  color: var(--color-gray-200);
  cursor: not-allowed;
  pointer-events: none;
}

.dp-time-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Колёса времени (как в будильнике / TG) */
.dp-time-wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.dp-wheel-wrap {
  position: relative;
  width: 72px;
  height: 132px;
  overflow: hidden;
  border-radius: var(--radius-input);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
}

.dp-wheel-wrap .dp-wheel-slot {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--color-primary-light);
  pointer-events: none;
  z-index: 0;
}

.dp-wheel-wrap .dp-wheel {
  position: relative;
  z-index: 1;
}

.dp-wheel-wrap::before,
.dp-wheel-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
  pointer-events: none;
  z-index: 1;
}

.dp-wheel-wrap::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-gray-50) 0%, transparent 100%);
}

.dp-wheel-wrap::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-gray-50) 0%, transparent 100%);
}

.dp-wheel-wrap .dp-wheel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dp-wheel::-webkit-scrollbar {
  display: none;
}

.dp-wheel-pad {
  height: 44px;
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.dp-wheel-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex-shrink: 0;
}

.dp-wheel-item.selected {
  color: var(--color-primary);
}

.dp-time-colon {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-bottom: 2px;
  align-self: center;
}

/* --- Focus visible global --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* --- Info blocks --- */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.info-block svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.info-block--warning {
  background: #FEF3C7;
  color: #92400E;
}

.info-block--warning svg {
  color: #D97706;
}

/* Информация для организаторов: внизу дашборда (TMA) */
.tma-dashboard-creator-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding: 0.75rem 0.875rem;
  border-radius: 8px;
  background: var(--color-error-bg);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.tma-dashboard-creator-notice__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--color-error);
  margin-top: 2px;
}
.tma-dashboard-creator-notice__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-error-dark-text);
}

/* Edit setting button */
.btn-edit-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-gray-100);
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.btn-edit-setting:hover {
  background: var(--color-gray-200);
}

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

/* ============================================
   PLATFORM CHOICE & MAX VERIFICATION
   ============================================ */

.radio-card-label--icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.platform-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Divider line */
.divider {
  height: 1px;
  background: var(--color-gray-200);
}

/* Verification steps numbered list */
.verify-steps {
  display: flex;
  flex-direction: column;
}

.verify-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.verify-step-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.verify-step-text {
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
  padding-top: 2px;
}

.verify-step-text .link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.max-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.max-link-btn:hover {
  text-decoration: underline;
}

/* Dev toolbar */
.dev-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-button);
  background: #fef3c7;
  border: 1px dashed #d97706;
  font-size: 0.75rem;
}
.dev-toolbar-label {
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.verify-step-text .link:hover {
  text-decoration: underline;
}

/* Code display box */
.code-display-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-button);
}

.code-value {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--color-text);
  user-select: all;
}

.verify-code-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.verify-code-btn {
  flex: 1;
  min-width: 200px;
}

.code-timer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  align-self: flex-start;
}

.code-timer-badge svg {
  flex-shrink: 0;
}

.code-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.code-timer svg {
  color: var(--color-text-muted);
}

/* Verify status indicator */
.verify-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
}

.verify-status-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.verify-status--checking {
  background: var(--color-gray-50);
  color: var(--color-text-secondary);
}

.verify-status--success {
  background: #ecfdf5;
  color: #065f46;
}

.verify-status--success .verify-status-icon svg {
  color: #10b981;
}

.verify-status--error {
  background: #fef2f2;
  color: #991b1b;
}

.verify-status--error .verify-status-icon svg {
  color: #ef4444;
}

/* Small spinner for checking state */
.spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* --- Preloader (fullscreen on first load) --- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-anim-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.preloader-lottie {
  display: block;
  width: 220px;
  height: 220px;
}

.preloader-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: center;
  transition: opacity 0.25s ease;
  min-height: 1.5rem;
}

.preloader-text.changing {
  opacity: 0;
}

/* Только на странице статистики: базовый размер 14px (как в оригинале), чтобы rem/em совпадали */
html.stats-page-root {
  font-size: 14px !important;
}
body.stats-page .preloader dotlottie-wc,
body.stats-page .preloader .preloader-lottie {
  width: 220px;
  height: auto !important;
}

/* --- SHOW ALL BUTTON (dashboard limit) — из v_2/styles.css --- */
.show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  background: transparent;
  border-radius: 0;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  margin-top: 0;
  animation: show-all-enter 0.3s ease-out both;
}

@keyframes show-all-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.show-all-btn:hover { color: var(--color-text-body); }
.show-all-btn:active { color: var(--color-text); }
.show-all-btn svg, .show-all-btn i { flex-shrink: 0; }

/* show-all-btn: primary-light стиль (v3 override удалён) */

/* --- All-giveaways / All-posts / All-channels screens --- */
.all-screen-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0 1.25rem;
}
.all-screen-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dark);
  flex: 1;
}
.all-screen-tabs {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}
.all-screen-tabs::-webkit-scrollbar {
  display: none;
}
.all-screen-tab {
  flex-shrink: 0;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.all-screen-tab.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.all-screen-tab:hover:not(.active) {
  border-color: var(--color-gray-300);
  background: var(--color-gray-50);
}
.all-screen-tab img {
  width: 14px;
  height: 14px;
}

/* --- Sync row (participant & creator) — референс --- */
.sync-help-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.sync-help-row .sync-row-btn {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.sync-help-icon-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  background: #EDE9FE;
  border: none;
  color: var(--color-primary, #7C3AED);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.sync-help-icon-btn:hover {
  background: #DDD6FE;
}
.sync-row-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}
.sync-row-btn:hover {
  color: var(--color-primary);
}
.sync-row-btn svg,
.sync-row-btn i {
  flex-shrink: 0;
}
.sync-row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sync-row-label > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-row-btn--linked {
  color: var(--color-text-muted);
}
.sync-row-btn--linked:hover {
  color: var(--color-text-secondary);
}

/* --- Sync banner inside wizard step 6 --- */
.sync-wizard-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem;
  border-radius: var(--radius-button);
  margin-top: 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.sync-wizard-banner-row {
  flex-direction: row;
  align-items: center;
}
.sync-wizard-banner--warning {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  padding: 1rem 0.875rem;
  margin-top: 1.25rem;
  border-radius: 8px;
}
.sync-wizard-banner--warning:hover {
  background: var(--color-error-light);
}
.sync-wizard-banner--success {
  background: var(--color-success-light);
  border: 1px solid rgba(22, 163, 74, 0.25);
}
.sync-wizard-banner-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.sync-wizard-banner--warning .sync-wizard-banner-icon {
  margin-top: 2px;
}
.sync-wizard-banner--warning .sync-wizard-banner-icon svg,
.sync-wizard-banner--warning .sync-wizard-banner-icon i {
  width: 20px;
  height: 20px;
  color: var(--color-error);
}
.sync-wizard-banner-text {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
}
.sync-wizard-banner--warning .sync-wizard-banner-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-error);
  line-height: 1.5;
}
.sync-wizard-banner--success .sync-wizard-banner-text {
  color: var(--color-success-dark);
}
.sync-wizard-banner--success .sync-wizard-banner-icon svg,
.sync-wizard-banner--success .sync-wizard-banner-icon i {
  color: var(--color-success);
}

/* --- Help modal --- */
#help-articles-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.help-list-card {
  cursor: pointer;
  min-height: 52px;
}
.help-list-card:active {
  background: var(--color-gray-100);
}
.help-list-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.help-list-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-primary-light, #EDE9FE);
  color: var(--color-primary, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.help-list-card-info {
  flex: 1;
  min-width: 0;
}
.help-list-card-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.help-list-card-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.help-support-row {
  display: flex;
  justify-content: center;
  padding: 1.25rem 0 0.5rem;
}
.help-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.help-support-btn:hover {
  background: var(--color-bg-muted, #F3F4F6);
  color: var(--color-text-dark);
}

/* --- Add Channel Modal tabs --- */
.add-channel-modal-tabs {
  display: flex;
  background: #EFEFF4;
  border-radius: 10px;
  padding: 4px;
  gap: 0;
  margin-bottom: 1rem;
}
.add-channel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.add-channel-tab.active {
  color: var(--color-text);
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.add-channel-tab-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.add-channel-tab-content {
  display: none;
}
.add-channel-tab-content.active {
  display: block;
}

/* --- Sync modal body --- */
.sync-modal-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sync-modal-platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gray-100);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sync-modal-platform-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.sync-modal-arrow {
  color: var(--color-text-muted);
  font-size: 1.25rem;
}
.sync-link-box {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 0.625rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-dark);
  word-break: break-all;
  margin: 0.75rem 0;
  user-select: all;
}
.sync-link-box--clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sync-link-box--clickable:active {
  background: var(--color-gray-100);
}
.sync-link-box--copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}
.sync-warning-note {
  font-size: 0.75rem;
  color: var(--color-error);
  font-weight: 500;
  padding: 0.5rem 0.625rem;
  background: var(--color-error-bg);
  border-radius: 8px;
  margin-top: 0.5rem;
}

/* Карточка «Добавить канал» в экране «Все каналы» — в стиле карточек каналов */
.add-channel-card {
  transition: opacity 0.15s;
  cursor: pointer;
}
.add-channel-card:active {
  opacity: 0.65;
}
/* Референс: dashed border + primary color для «добавить» */
.add-channel-avatar-circle,
.add-channel-avatar-circle--add {
  background: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border: 2px dashed var(--color-primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-channel-avatar-circle svg,
.add-channel-avatar-circle--add svg {
  display: block;
  flex-shrink: 0;
}
/* Референс: shared class для chevron и delete на карточках каналов */
.channel-card-right-icon {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.125rem;
  cursor: pointer;
  line-height: 0;
}
.channel-card-right-icon svg {
  display: block;
  flex-shrink: 0;
}
.channel-card-right-icon:active {
  opacity: 0.5;
}
.add-channel-chevron {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* --- Saved post card (из референса v_2) --- */
.saved-post-card-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.saved-post-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.saved-post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saved-post-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  width: 100%;
  height: 100%;
}
.saved-post-thumb-placeholder svg {
  width: 18px;
  height: 18px;
}
.saved-post-info {
  flex: 1;
  min-width: 0;
}
.saved-post-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.saved-post-eye-btn,
.saved-post-trash-btn {
  background: none;
  border: none;
  padding: 0.375rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.saved-post-eye-btn {
  color: var(--color-text-muted);
}
.saved-post-eye-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.saved-post-trash-btn {
  color: var(--color-error);
}
.saved-post-trash-btn:hover {
  background: var(--color-error-light);
}

/* --- Post view modal (image + markdown) --- */
.post-view-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-button);
  margin-bottom: 1rem;
  display: block;
}
.post-view-img-placeholder {
  width: 100%;
  height: 110px;
  background: var(--color-gray-100);
  border-radius: var(--radius-button);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.post-view-img-placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--color-gray-300);
}
.post-view-img-placeholder span {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.post-markdown {
  font-size: 0.875rem;
  color: var(--color-text-body);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.post-markdown strong {
  font-weight: 700;
  color: var(--color-text-dark);
}
.post-markdown em {
  font-style: italic;
}
.post-markdown code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--color-gray-100);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: var(--color-indigo);
}
.post-markdown a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ============================================
   CHANNEL DETAIL SCREEN
   ============================================ */

.channel-detail-hero-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.channel-detail-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.channel-detail-avatar .channel-avatar-circle {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

.channel-detail-info {
  flex: 1;
  min-width: 0;
}

.channel-detail-desc {
  color: var(--color-text-body);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* Channel detail raffles reuse .event-card / .dash-card-inner from dashboard */

.channel-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* ============================================
   PREMIUM: Locked buttons & blur overlay
   ============================================ */

/* --- Btn locked (with padlock icon) --- */
.btn--locked {
  position: relative;
  opacity: 0.75;
  cursor: pointer;
}

.btn--locked::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: var(--color-premium);
  border-radius: var(--radius-full);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-80-36a12,12,0,1,1,12-12A12,12,0,0,1,128,172Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-80-36a12,12,0,1,1,12-12A12,12,0,0,1,128,172Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

/* Locked row in manage screen */
.manage-setting-row.manage-setting-row--locked {
  position: relative;
  cursor: pointer;
}

.manage-setting-row--locked .manage-lock-icon {
  color: var(--color-premium);
  font-size: 16px !important;
  margin-left: auto;
  flex-shrink: 0;
}

/* --- Redacted text blocks (premium-locked data) --- */
.redacted-block {
  display: inline-block;
  height: 0.75rem;
  border-radius: 4px;
  background: var(--color-gray-200);
  vertical-align: middle;
  width: 52px;
}

.redacted-block--sm {
  width: 28px;
  height: 0.625rem;
}

/* --- Premium gradient fade overlay (for charts/blocks) --- */
.premium-fade-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  border-radius: var(--radius-card);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.85) 60%,
    rgba(255, 255, 255, 0.95) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.premium-fade-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
  border-radius: calc(var(--radius-card) - 4px);
  background: #1a1a1a;
  border: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  margin: 0 4px 4px;
  width: calc(100% - 8px);
  box-sizing: border-box;
  transition: transform var(--duration-fast);
}

.premium-fade-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: btn-shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}

.premium-fade-cta:active {
  transform: scale(0.97);
}

/* --- Premium popup styles --- */
.premium-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-premium-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.premium-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.premium-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-button);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.premium-feature-item--highlight {
  border-color: var(--color-premium-border);
  background: var(--color-premium-light);
}

.premium-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-premium-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-premium-text);
  font-size: 18px;
}

.premium-feature-text {
  flex: 1;
  min-width: 0;
}

.premium-feature-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.125rem;
}

.premium-feature-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Premium CTA button */
.btn--premium {
  background: var(--color-premium);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.btn--premium:hover {
  background: var(--color-premium-hover);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.btn--premium:active {
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

/* ========== Profile avatar button (dashboard row) ========== */
.profile-avatar-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.profile-avatar-btn-inner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-hover);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s;
}
.profile-avatar-btn:active .profile-avatar-btn-inner {
  border-color: var(--color-primary);
}
.profile-avatar-btn-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ========== Profile hero (avatar + name) ========== */
.profile-hero {
  text-align: center;
  padding: 0.75rem 0 0;
}
.profile-hero-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 0.625rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-hero-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-body);
  line-height: 1.3;
}
.profile-hero-username {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 1px;
}