:root {
  --accent: #ff7a00;
  --accent-light: #ffb700;
  --bg: #fffdfa;
  --text: #222;
}

/* ===== Универсальные кнопки ===== */
.btn-main {
  padding: 24px 32px;       /* px-8 py-6 */
  font-size: 18px;          /* text-lg */
  border-radius: 16px;      /* rounded-2xl */
  font-weight: 500;
  transition: all .3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-main-primary {
  background: linear-gradient(to right, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 122, 0, .3);
}
.btn-main-primary:hover {
  background: linear-gradient(to right, #ff8c1a, #ffc233);
  box-shadow: 0 6px 16px rgba(255, 122, 0, .4);
}

.btn-main-outline {
  border: 2px solid #ddd;
  background: #fff;
  color: var(--text);
}
.btn-main-outline:hover {
  border-color: var(--accent);
  background: #fffdfa;
  color: var(--accent);
}

/* ===== Карточки ===== */
.card-main {
  background: #fff;
  border-radius: 16px;       /* rounded-2xl */
  padding: 24px;             /* p-6 */
  box-shadow: 0 2px 8px rgba(0,0,0,.05); /* shadow-sm */
  transition: box-shadow .3s ease;
}
.card-main:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.card-main .emoji {
  font-size: 32px;
}

/* ===== Заголовки секций ===== */
.section-title span {
  font-size: 3rem; /* text-5xl ~ 48px */
  margin-bottom: 1rem;
  display: block;
}

.section-title h2 {
  font-size: 2.25rem;   /* text-4xl ~ 36px */
  line-height: 2.5rem;  /* 40px */
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .section-title h2 {
    font-size: 2.25rem;   /* md:text-4xl */
    line-height: 2.5rem;
  }
}


.section-title p {
  font-size: 1.125rem; /* text-lg */
  color: #666;
  max-width: 36rem;    /* max-w-xl */
  margin-left: auto;
  margin-right: auto;  /* mx-auto */
  text-align: center;
}



/* ===== Анимации ===== */
.fade-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-slide-left {
  opacity: 0;
  transform: translateX(-20px);
}
.fade-slide-left.fade-in {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-slide-right {
  opacity: 0;
  transform: translateX(20px);
}
.fade-slide-right.fade-in {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-scale {
  opacity: 0;
  transform: scale(0.95);
}
.fade-scale.fade-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity .5s ease, transform .5s ease;
}


.btn-meme {
  height: 36px;              /* h-9 */
  padding: 0 16px;           /* px-4 */
  font-size: 14px;           /* text-sm */
  font-weight: 500;
  border-radius: 16px;       /* rounded-2xl */
  background: linear-gradient(to right, #fff7ed, #fef3c7); /* from-orange-50 to-yellow-50 */
  color: #ea580c;            /* text-orange-600 */
  transition: all .3s ease;
}
.btn-meme:hover {
  background: linear-gradient(to right, #ffedd5, #fef9c3); /* hover:from-orange-100 hover:to-yellow-100 */
}
.btn-meme svg {
  width: 16px;               /* [&_svg]:size-4 */
  height: 16px;
  flex-shrink: 0;
}

.card-main {
  padding: 24px; /* p-6 */
}

.card-main .emoji {
  font-size: 36px; /* text-4xl */
  margin-bottom: 16px; /* mb-4 */
}

.card-main h3 {
  font-size: 18px; /* text-lg */
  font-weight: 700;
  margin-bottom: 12px; /* mb-3 */
  line-height: 1.25; /* leading-tight */
}

.card-main p {
  font-size: 16px; /* text-base */
  color: #555;
  line-height: 1.625; /* leading-relaxed */
  margin-bottom: 16px; /* mb-4 */
  flex-grow: 1;
}

.btn-meme {
  height: 36px; /* h-9 */
  padding: 20px 16px; /* py-5 px-4 */
}


.btn-fresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;       /* text-lg */
  font-weight: 500;
  border-radius: 16px;   /* rounded-2xl */
  padding: 10px 32px;    /* py-6 px-8 */
  border: 2px solid #ddd;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: all .3s ease;
}

.btn-fresh:hover {
  background: #fff7ed;   /* hover:bg-orange-50 */
  border-color: #fdba74; /* hover:border-orange-300 */
  color: #ea580c;        /* hover:text-orange-600 */
}
.btn-fresh svg {
  width: 20px; /* w-5 */
  height: 20px; /* h-5 */
  margin-left: 8px; /* ml-2 */
}


.category-btn.active {
  background-image: linear-gradient(to right, #f97316, #facc15); /* from-orange-500 to-yellow-500 */
  color: #fff;
  border: 0;
  box-shadow: 0 4px 6px -1px rgb(251 146 60 / 0.5); /* shadow-orange-200 */
  transition: all 0.3s;
}
.category-btn.active:hover {
  background-color: rgba(251, 146, 60, 0.9); /* hover:bg-primary/90 */
}



/* Иконки внутри кнопки: по умолчанию показываем только бургер */
.mobile-menu-btn .icon { display: inline-block; }
.mobile-menu-btn .icon.hidden { display: none; }

/* Когда кнопка в состоянии open — показываем крест, скрываем бургер */
.mobile-menu-btn.is-open .icon-menu { display: none; }
.mobile-menu-btn.is-open .icon-close { display: inline-block; }


/* Размер и мягкий фон 36px для иконки крестика */
.mobile-menu-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;            /* фиксированный размер области */
  height: 36px;           /* фиксированный размер области */
  padding: 0;             /* внутренний отступ не нужен при фиксированном размере */
  border-radius: 10px;    /* скругление — подогнать при желании */
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* По умолчанию фон прозрачный */
.mobile-menu-btn .icon-close {
  background: transparent;
  box-shadow: none;
}

/* При открытом меню — мягкий полупрозрачный серый фон */
.mobile-menu-btn.is-open .icon-close {
  background: hsl(0 0% 96.1%);        /* заданный цвет */
  background-color: rgba(242,242,242,0.95); /* запас для браузеров без точной hsl поддержки */
  box-shadow: 0 8px 20px rgba(16,24,40,0.06); /* мягкая тень для глубины */
  transform: translateY(0);           /* можно анимировать при желании */
}

/* Hover состояние чуть более заметное */
.mobile-menu-btn.is-open:hover .icon-close {
  background: rgba(242,242,242,0.98);
  box-shadow: 0 10px 24px rgba(16,24,40,0.08);
}


/* Полосы: мягкая ширина, без дерганий */
.poll-option .progress-bar {
  transition: width 600ms cubic-bezier(0.25, 0.1, 0.25, 1); /* ease */
}

/* Лёгкое скрытие на время запроса (без изменения layout) */
.poll-option .progress-bar.is-hidden {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Счетчик "Всего": плавные цифры */
.votes-count.smooth {
  transition: color 200ms ease; /* микроподсветка при обновлении */
}


.article-page .post-hero {
  float: right;
  width: min(360px, 42%);
  margin: 0 0 1rem 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  shape-outside: inset(0 round 16px);
  -webkit-shape-outside: inset(0 round 16px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.article-page .post-hero img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
@media (max-width:767px) {
  .article-page .post-hero {
    float:none;
    width:100%;
    margin:0 0 1rem 0;
    shape-outside:none;
    border-radius:12px;
  }
}


.progress-bar {
  background-color: rgba(251, 146, 60, 0.4); /* оранжевый с прозрачностью */
}


@media (prefers-reduced-motion: reduce) {
  .card-hover,
  .group .card-hover {
    transition: none !important;
    /* не обнуляем transform — оставляем возможность для статических transform-значений */
    /* transform: none !important;  <-- удалено намеренно */
    box-shadow: none !important;
  }
}

.article-page .card-hover,
.article-page a.group .card-hover {
  transition: transform 260ms cubic-bezier(.2,.9,.3,1), box-shadow 260ms cubic-bezier(.2,.9,.3,1);
}

.article-page .card-hover:hover,
.article-page a.group:hover .card-hover {
  transform: translateZ(0) scale(1.03);
  box-shadow: 0 18px 40px rgba(16,24,40,0.12);
}





/* === Article: точное приближение к примеру === */
/* Подключать после основного Tailwind CSS */

article.prose.prose-lg.max-w-none {
  /* сохраняем поведение prose, но задаём базовые параметры */
  color: rgb(55 65 81); /* text-gray-700 */
  line-height: 1.7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: none;
}

/* Внешняя карточка внутри article (у тебя div.bg-white...) */
article.prose > div.bg-white.rounded-3xl.p-8.md\:p-12.shadow-sm,
article.prose > .article-card {
  background: rgb(255 255 255); /* bg-white */
  border-radius: 1.5rem;        /* rounded-3xl */
  padding: 2rem;                /* p-8 */
  box-shadow: 0 4px 10px rgba(16,24,40,0.06); /* shadow-sm */
  max-width: none;
}

/* md:p-12 */
@media (min-width: 768px) {
  article.prose > div.bg-white.rounded-3xl.p-8.md\:p-12.shadow-sm,
  article.prose > .article-card {
    padding: 3rem;
  }
}

/* Заголовки — точные размеры и отступы */
article.prose h1,
article.prose > div h1 {
  font-size: 1.875rem; /* text-3xl */
  line-height: 1.2;
  color: rgb(17 24 39); /* text-gray-900 */
  font-weight: 700;
  margin-top: 2rem;    /* mt-8 */
  margin-bottom: 1rem; /* mb-4 */
}

/* Убираем margin-top у первого заголовка внутри карточки (first:mt-0) */
article.prose > div > :first-child:first-child,
article.prose > .article-card > :first-child:first-child {
  margin-top: 0;
}

article.prose h2,
article.prose > div h2 {
  font-size: 1.5rem; /* text-2xl */
  color: rgb(17 24 39);
  font-weight: 700;
  margin-top: 2rem; /* mt-8 */
  margin-bottom: 1rem; /* mb-4 */
}

article.prose h3,
article.prose > div h3 {
  font-size: 1.25rem; /* text-xl */
  color: rgb(17 24 39);
  font-weight: 700;
  margin-top: 1.5rem; /* mt-6 */
  margin-bottom: 0.75rem; /* mb-3 */
}

/* Параграфы */
article.prose p,
article.prose > div p {
  color: rgb(55 65 81); /* text-gray-700 */
  line-height: 1.7;     /* leading-relaxed */
  margin-bottom: 1rem;  /* mb-4 */
  font-size: 1rem;
  word-break: break-word;
}

/* Списки */
article.prose ol.list-decimal,
article.prose ul.list-disc,
article.prose > div ol,
article.prose > div ul {
  margin: 0 0 1rem 0;
  padding-left: 1.25rem; /* list-inside */
  color: rgb(55 65 81);
}
article.prose ol.list-decimal li,
article.prose ul.list-disc li,
article.prose > div ol li,
article.prose > div ul li {
  margin: 0.5rem 0;
}

/* space-y-2 для списков — делаем вертикальные отступы между li */
article.prose ol.space-y-2 > li + li,
article.prose ul.space-y-2 > li + li,
article.prose > div ol.space-y-2 > li + li,
article.prose > div ul.space-y-2 > li + li {
  margin-top: 0.5rem;
}

/* Блок‑цитата */
article.prose blockquote,
article.prose > div blockquote {
  border-left-width: 4px;
  border-left-color: rgb(249 115 22); /* border-orange-500 */
  background: rgb(255 247 237);        /* bg-orange-50 */
  padding-left: 1rem; /* pl-4 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem;
  margin: 1.5rem 0;    /* my-6 */
  border-radius: 0 0.75rem 0.75rem 0; /* rounded-r-xl */
  font-style: italic;
  color: rgb(55 65 81);
}

/* inline strong */
article.prose strong,
article.prose b,
article.prose > div strong,
article.prose > div b {
  color: rgb(17 24 39); /* text-gray-900 */
  font-weight: 700;
}

/* Утилиты, которые могут конфликтовать — повышаем специфичность */
article.prose .text-gray-700 { color: rgb(55 65 81) !important; }
article.prose .text-gray-900 { color: rgb(17 24 39) !important; }
article.prose .leading-relaxed { line-height: 1.7 !important; }

/* Мобильные корректировки */
@media (max-width: 640px) {
  article.prose h1 { font-size: 1.5rem; margin-top: 1rem; }
  article.prose h2 { font-size: 1.25rem; }
  article.prose > div { padding: 1.25rem; } /* уменьшить p на мобилке */
}

/* Если где-то Tailwind всё ещё переопределяет — можно временно включить !important для ключевых свойств */
/* Пример (раскомментировать при необходимости): */
/*
article.prose h1 { font-size: 1.875rem !important; }
article.prose p { line-height: 1.7 !important; color: rgb(55 65 81) !important; }
*/


/* === Списки для article.prose === */
article.prose ol,
article.prose ul,
article.prose > div ol,
article.prose > div ul {
  margin: 0 0 1rem 0;          /* mb-4 */
  padding-left: 1.25rem;      /* list-inside visual offset */
  color: rgb(55 65 81);       /* text-gray-700 */
  line-height: 1.7;
  font-size: 1rem;
  word-break: break-word;
}

/* Нумерованные списки — точный стиль decimal */
article.prose ol,
article.prose ol.list-decimal {
  list-style-type: decimal;
}

/* Маркированные списки — точный стиль disc */
article.prose ul,
article.prose ul.list-disc {
  list-style-type: disc;
}

/* list-inside: маркер внутри блока (как у Tailwind list-inside) */
article.prose .list-inside,
article.prose ol.list-inside,
article.prose ul.list-inside,
article.prose > div .list-inside {
  padding-left: 0;
  list-style-position: inside;
}

/* list-outside (по умолчанию) — маркер вне блока */
article.prose .list-outside,
article.prose ol.list-outside,
article.prose ul.list-outside {
  list-style-position: outside;
  padding-left: 1.25rem;
}

/* Отступы между элементами (эквивалент space-y-2) */
article.prose ol.space-y-2 > li + li,
article.prose ul.space-y-2 > li + li,
article.prose > div ol.space-y-2 > li + li,
article.prose > div ul.space-y-2 > li + li {
  margin-top: 0.5rem;
}

/* Общие отступы для li */
article.prose li,
article.prose > div li {
  margin: 0.5rem 0;
  padding-left: 0; /* чтобы не дублировать отступ */
}

/* Жирные заголовки внутри li (как в примере) */
article.prose li strong,
article.prose li b,
article.prose > div li strong,
article.prose > div li b {
  color: rgb(17 24 39); /* text-gray-900 */
  font-weight: 700;
}

/* Вложенные списки — аккуратные отступы */
article.prose li ol,
article.prose li ul,
article.prose > div li ol,
article.prose > div li ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 1rem; /* дополнительный отступ для вложенных списков */
}

/* Стили маркеров для лучшей читаемости (внешний вид маркеров) */
article.prose ul li::marker {
  color: rgb(107 114 128); /* slightly muted marker */
  font-weight: 600;
}
article.prose ol li::marker {
  color: rgb(107 114 128);
  font-weight: 600;
}

/* Если нужно, чтобы маркеры были более заметны (опция) */
/* article.prose ul li::marker { color: rgb(55 65 81); } */

/* Списки с иконками/кастомными маркерами (пример) */
article.prose ul.icon-list li {
  list-style: none;
  position: relative;
  padding-left: 1.5rem;
}
article.prose ul.icon-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: rgb(249 115 22); /* accent orange */
  font-weight: 700;
}

/* Мобильные корректировки */
@media (max-width: 640px) {
  article.prose ol,
  article.prose ul,
  article.prose > div ol,
  article.prose > div ul {
    padding-left: 1rem;
    font-size: 0.98rem;
  }
  article.prose li,
  article.prose > div li { margin: 0.4rem 0; }
}

/* Повышаем специфичность для переопределения Tailwind-утилит */
article.prose .list-decimal { list-style-type: decimal !important; }
article.prose .list-disc { list-style-type: disc !important; }
article.prose .list-inside { list-style-position: inside !important; }
article.prose .list-outside { list-style-position: outside !important; }




/*.emoji-inline svg { width: 1.5em; height: 1.5em; vertical-align: -0.15em; text-align:center;}*/

.emoji-inline { display: block; width: 100%; text-align: center; }
.emoji-inline svg { display: inline-block; width: auto; height: 36px; }


.counter { min-width: 3ch; text-align: center; }



/* однооборотное и бесконечное вращение */
@keyframes spin-once { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-inf  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.emoji { display:inline-block; will-change: transform; }

/* одноразовое вращение (добавляется классом .spin-once) */
.emoji.spin-once {
  animation: spin-once 700ms cubic-bezier(.22,.9,.35,1) 1;
}

/* бесконечное вращение (по наведению или явно) */
.emoji.spin-inf,
.emoji:hover { 
  animation: spin-inf 1200ms linear infinite;
}



/* вставить в ваш CSS */
.cf-fade {
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}
.cf-hidden {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}