/* ========================================================================
   home.css v3 — Emergency “calm modern” redesign (tokenized + mobile-first)
   Цель: быстро убрать “страшное” (перегруз градиентами/рамками),
   вернуть современный вид, не ломая темы и слабые устройства.
   ======================================================================== */

.home-page{
  --hp-max: 1180px;
  --hp-pad: clamp(12px, 2.6vw, 22px);

  /* theme tokens w/ fallbacks */
  --hp-s0: var(--surface, #0b1220);
  --hp-s1: var(--surface-1, #111a2a);
  --hp-s2: var(--surface-2, #17223a);
  --hp-text: var(--text, #e6edf7);
  --hp-muted: var(--muted, #97a7bf);
  --hp-border: var(--border, rgba(148,163,184,.28));
  --hp-brand: var(--brand, #7aa2ff);
  --hp-link: var(--link, var(--hp-brand));

  --hp-r-lg: 22px;
  --hp-r-md: 16px;
  --hp-r-sm: 12px;

  --hp-shadow-1: 0 8px 26px rgba(0,0,0,.14);
  --hp-shadow-2: 0 18px 60px rgba(0,0,0,.18);

  max-width: var(--hp-max);
  margin: 0 auto;

  /* safe-area friendly gutters */
  padding-left: calc(var(--hp-pad) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--hp-pad) + env(safe-area-inset-right, 0px));
  padding-top: 0;
  padding-bottom: var(--hp-pad);

  box-sizing: border-box;
}

.home-page section{ margin: 14px 0 22px; }
.home-page .section-title{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .2px;
}

/* ===================== HERO (calm) ===================== */
.hero{
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  position: relative;

  /* Firefox-safe: color first, then complex bg */
  background-color: var(--hp-s1);
  background:
    radial-gradient(900px 420px at 12% 0%,
      color-mix(in srgb, var(--hp-brand) 14%, transparent),
      transparent 60%),
    radial-gradient(900px 420px at 92% 20%,
      color-mix(in srgb, var(--hp-brand) 8%, transparent),
      transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--hp-s1) 96%, transparent),
      color-mix(in srgb, var(--hp-s0) 92%, transparent)
    );

  box-shadow: var(--hp-shadow-2);
}

.hero h1{
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.08;
  font-weight: 950;
  color: var(--hp-text);
}

.hero p{
  margin: 0;
  max-width: 70ch;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  line-height: 1.45;
  font-size: 14px;
}

/* ===================== HERO (new markup: hero__*) ===================== */

.hero__inner{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(12px, 2.2vw, 18px);
  align-items: start;
  min-width: 0;
}

.hero__left{ min-width: 0; }

/* Kicker pill */
.hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hp-brand) 30%, transparent);

  /* Firefox-safe */
  background-color: color-mix(in srgb, var(--hp-brand) 10%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-brand) 12%, transparent),
    color-mix(in srgb, var(--hp-brand) 7%, transparent)
  );

  color: color-mix(in srgb, var(--hp-text) 92%, transparent);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: .2px;
}

.hero__kicker-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--hp-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-brand) 20%, transparent);
  flex: 0 0 auto;
}

/* Title/subtitle for new classes */
.hero__title{
  margin: 10px 0 8px;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.08;
  font-weight: 950;
  color: var(--hp-text);
  letter-spacing: .2px;
}

.hero__subtitle{
  margin: 0;
  max-width: 70ch;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  line-height: 1.45;
  font-size: 14px;
}

/* Quick chips */
.hero__quick{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hero-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hp-border) 95%, transparent);

  background-color: color-mix(in srgb, var(--hp-s2) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-s2) 82%, transparent),
    color-mix(in srgb, var(--hp-s1) 70%, transparent)
  );

  color: color-mix(in srgb, var(--hp-text) 92%, transparent);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}

.hero-chip:hover{
  border-color: color-mix(in srgb, var(--hp-brand) 32%, transparent);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

/* Decorative right column */
.hero__right{
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.hero__glass{
  width: 100%;
  max-width: 420px;
  padding: 12px;
  border-radius: var(--hp-r-lg);
  border: 1px solid color-mix(in srgb, var(--hp-border) 92%, transparent);

  /* Firefox-safe */
  background-color: color-mix(in srgb, var(--hp-s2) 55%, transparent);
  background: radial-gradient(700px 320px at 20% 0%,
      color-mix(in srgb, var(--hp-brand) 12%, transparent),
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--hp-s2) 70%, transparent),
      color-mix(in srgb, var(--hp-s1) 62%, transparent)
    );

  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.hero__glass-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.hero__glass-row:last-child{ margin-bottom: 0; }

.hero__mini-card{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: var(--hp-r-md);
  border: 1px solid color-mix(in srgb, var(--hp-border) 85%, transparent);

  background-color: color-mix(in srgb, var(--hp-s1) 65%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-s2) 60%, transparent),
    color-mix(in srgb, var(--hp-s1) 58%, transparent)
  );
}

.hero__mini-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid color-mix(in srgb, var(--hp-brand) 24%, transparent);
  background: color-mix(in srgb, var(--hp-brand) 10%, transparent);
  flex: 0 0 auto;

  font-size: 16px;
}

.hero__mini-txt{ min-width: 0; }
.hero__mini-title{
  font-weight: 950;
  font-size: 13px;
  color: var(--hp-text);
  line-height: 1.1;
}
.hero__mini-sub{
  margin-top: 2px;
  font-size: 12px;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  line-height: 1.2;
}

/* Responsive: stack + hide decorative column on small */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__right{ display: none; }
}

/* Ultra small: chips and search */
@media (max-width: 360px){
  .hero__kicker{ font-size: 12px; }
  .hero-chip{ width: 100%; justify-content: flex-start; }
}

/* если у тебя уже есть новая разметка героя (hero-grid/hero-left/hero-right) — поддержим */
.hero-grid{
  display: block;
  min-width: 0;
}
@media (min-width: 1100px){
  .hero-grid{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 16px;
    align-items: start;
  }
}

/* Правую “витрину фич” на больших экранах делаем компактнее */
.hero-right{ min-width: 0; }
.hero-features{
  display: none; /* по умолчанию прячем, чтобы не было “лаунчера” */
}
@media (min-width: 1180px){
  .hero-features{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    align-content: start;
  }
}
.hero-feature{
  border: 1px solid color-mix(in srgb, var(--hp-border) 85%, transparent);
  border-radius: var(--hp-r-md);
  padding: 10px 12px;

  background-color: color-mix(in srgb, var(--hp-s2) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-s2) 78%, transparent),
    color-mix(in srgb, var(--hp-s1) 64%, transparent)
  );

  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.hero-feature__title{
  margin: 0;
  font-weight: 900;
  font-size: 13px;
  color: var(--hp-text);
}
.hero-feature__desc{
  margin: 2px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
}

/* ===================== “Search bar” CTA ===================== */
.home-page .home-search-link{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--hp-border);
  text-decoration: none;

  background-color: var(--hp-s2);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-s2) 92%, transparent),
    color-mix(in srgb, var(--hp-s1) 88%, transparent)
  );

  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  max-width: 740px;
}

.home-page .home-search-ico{ opacity: .95; font-size: 1rem; }
.home-page .home-search-placeholder{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}
.home-page .home-search-btn{
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hp-brand) 38%, transparent);

  background-color: color-mix(in srgb, var(--hp-brand) 16%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-brand) 18%, transparent),
    color-mix(in srgb, var(--hp-brand) 10%, transparent)
  );

  color: var(--hp-text);
  font-weight: 900;
  font-size: .9rem;
  white-space: nowrap;
}

.home-page .home-search-link:hover{
  border-color: color-mix(in srgb, var(--hp-brand) 40%, transparent);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.home-page .home-search-link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--hp-brand) 55%, transparent);
  outline-offset: 2px;
}

/* ===================== Buttons (home-scoped) ===================== */
.home-page .button,
.home-page a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hp-border) 90%, transparent);

  background-color: color-mix(in srgb, var(--hp-brand) 14%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-brand) 16%, transparent),
    color-mix(in srgb, var(--hp-brand) 10%, transparent)
  );

  color: var(--hp-text);
  font-weight: 900;
  text-decoration: none;
  font-family: inherit;

  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-page .button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  border-color: color-mix(in srgb, var(--hp-brand) 35%, transparent);
}

.home-page .button.secondary{
  background: var(--hp-s2);
  color: var(--hp-text);
}

/* compact utility */
.btn-compact{ padding: 8px 12px !important; min-height: 36px !important; }
.mt-14{ margin-top: 14px !important; }
.form-inline{ display: inline !important; }

/* ===================== Telegram banner (calm) ===================== */
.tg-banner{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;

  padding: 10px 12px;
  border-radius: var(--hp-r-md);
  border: 1px solid var(--hp-border);

  background-color: color-mix(in srgb, var(--hp-s2) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hp-s2) 78%, transparent),
    color-mix(in srgb, var(--hp-s1) 62%, transparent)
  );

  box-shadow: var(--hp-shadow-1);
}
.tg-icon{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--hp-brand);
}
.tg-text{
  margin: 0;
  color: color-mix(in srgb, var(--hp-muted) 94%, transparent);
  line-height: 1.4;
  font-size: 13px;
}
.tg-text .tg-link{
  color: var(--hp-link);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  word-break: break-all;
}
.tg-text .tg-link:hover{ border-bottom-color: color-mix(in srgb, var(--hp-link) 60%, transparent); }

.hero-cta{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===================== Recos container ===================== */
.reco-section{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.reco-section__hdr{
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.reco-block{
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  background: var(--hp-s1);
  box-shadow: var(--hp-shadow-1);
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  contain: content;
}

/* Рекомендации: “неон/желтизна/толщина” прибираем, но аккуратно.
   СКОУПИМ ПЕРЕМЕННЫЕ, чтобы не влиять на другие страницы. */
.home-page{
  --mfR-chip-bg: color-mix(in srgb, var(--hp-s2) 70%, transparent);
  --mfR-chip-fg: var(--hp-text);
  --mfR-chip-brd: color-mix(in srgb, var(--hp-border) 85%, transparent);
  --mfR-chip-shadow: 0 1px 0 rgba(0,0,0,.25);
  --mfR-ico-default: color-mix(in srgb, var(--hp-muted) 90%, transparent);
  --mfR-ico-heart:   #fb7185;
  --mfR-ico-chat:    #93c5fd;
  --mfR-ico-star:    #fbbf24;
}

/* mf-recos — общий вид карточек, если классы совпадают */
.reco-block .mfR-card{
  border: 1px solid color-mix(in srgb, var(--hp-border) 88%, transparent);
  border-radius: var(--hp-r-md);
  background: var(--hp-s1);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  overflow: hidden;
}
.reco-block .mfR-card:hover{
  border-color: color-mix(in srgb, var(--hp-brand) 35%, transparent);
}

/* попытка нормализовать “жёлтые полосы”, если они так называются */
.reco-block .mfR-meter,
.reco-block .mfR-progress,
.reco-block .mfR-bar{
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hp-border) 60%, transparent);
  overflow: hidden;
}
.reco-block .mfR-meter__fill,
.reco-block .mfR-progress__fill,
.reco-block .mfR-bar__fill{
  height: 100%;
  background: color-mix(in srgb, var(--hp-brand) 55%, transparent);
}

/* На узких экранах клипаем X, чтобы трек не рвал страницу */
@media (max-width: 640px){
  html, body{ overflow-x: clip; }
  .reco-section, .reco-block, .reco-block__inner{ overflow-x: clip; max-width: 100%; }
}

/* ===================== Fanfic list (HOME) — compact modern cards ===================== */
.home-fanfic-block{ margin-top: 18px; }

.home-fanfic-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* toggle (calm) */
.home-fanfic-toggle{
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hp-s2) 74%, transparent);
  border: 1px solid var(--hp-border);
}
.home-fanfic-toggle__btn{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.2;
  text-decoration: none;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  font-weight: 900;
  white-space: nowrap;
}
.home-fanfic-toggle__btn.is-active{
  background: color-mix(in srgb, var(--hp-brand) 18%, transparent);
  color: var(--hp-text);
  border: 1px solid color-mix(in srgb, var(--hp-brand) 35%, transparent);
}

/* grid list on HOME */
.home-page .list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .home-page .list{ grid-template-columns: 1fr; }
}

/* card layout — horizontal, compact */
.home-page article.card{
  display: grid;
  grid-template-columns: clamp(150px, 22vw, 220px) minmax(0,1fr);
  gap: 12px;

  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  overflow: hidden;

  background: var(--hp-s1);
  box-shadow: var(--hp-shadow-1);

  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-page article.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--hp-brand) 30%, transparent);
}

.home-page article.card .cover{
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
  background: var(--hp-s2);
}

.home-page article.card .content{
  min-width: 0;
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
}

.home-page article.card .title{
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.15;
}
.home-page article.card .title a{
  color: var(--hp-text);
  text-decoration: none;
  font-weight: 950;
}
.home-page article.card .title a:hover{
  color: color-mix(in srgb, var(--hp-brand) 90%, white 0%);
}

.home-page article.card .meta{
  font-size: 12.5px;
  color: color-mix(in srgb, var(--hp-muted) 92%, transparent);
  line-height: 1.35;
}
.home-page article.card .meta a{ color: var(--hp-link); text-decoration: none; font-weight: 900; }
.home-page article.card .meta a:hover{ text-decoration: underline; }

/* badges row stays, just tighten */
.home-page article.card .badges{
  margin-top: 8px;
}

/* description: Quill-safe clamp (без “пустых метров”) */
.home-page article.card .desc.ql-view{
  margin-top: 8px;
  color: color-mix(in srgb, var(--hp-muted) 90%, transparent);
  font-size: 13px;
  line-height: 1.45;

  max-height: 4.4em; /* примерно 3 строки */
  overflow: hidden;
  position: relative;
}
.home-page article.card .desc.ql-view *{
  margin: 0 !important;
  padding: 0 !important;
}
.home-page article.card .desc.ql-view:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 1.8em;
  background: linear-gradient(180deg, transparent, var(--hp-s1));
  pointer-events:none;
}

/* chips: pairs/chars/tags compact */
.home-page article.card .pairs,
.home-page article.card .chars,
.home-page article.card .tags{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-page article.card .pair,
.home-page article.card .char,
.home-page article.card .tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hp-border) 85%, transparent);
  background: color-mix(in srgb, var(--hp-s2) 64%, transparent);
  color: color-mix(in srgb, var(--hp-text) 92%, transparent);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}
.home-page article.card .pair .ico,
.home-page article.card .char .ico,
.home-page article.card .tag .ico{ opacity: .9; }

/* actions pinned to bottom */
.home-page article.card .actions{
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* like button slight normalize */
.home-page .like-btn{
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hp-border) 90%, transparent);
  background: color-mix(in srgb, var(--hp-s2) 70%, transparent);
  color: var(--hp-text);
}

/* stack on small screens */
@media (max-width: 640px){
  .home-page article.card{
    grid-template-columns: 1fr;
  }
  .home-page article.card .content{
    padding: 12px;
  }
  .home-page article.card .cover{
    min-height: 190px;
  }
}

/* ultra small */
@media (max-width: 360px){
  .home-page .home-search-link{ padding: 10px; }
  .home-page .home-search-btn{ padding: 6px 10px; font-size: .85rem; }
  .home-page .button, .home-page a.button{ width: 100%; }
  .hero-cta{ gap: 8px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .home-page .button,
  .home-page article.card{
    transition: none !important;
  }
  .home-page .button:hover,
  .home-page article.card:hover{
    transform: none !important;
  }
}

/* =======================================================================
   HOME — Fix pills (no fill) + readable text for light/dark/neon
   + show full descriptions in cards
   ======================================================================= */

.home-page{
  /* базовые “пилюли” на главной (по умолчанию) */
  --hp-pill-fg: var(--text);
  --hp-pill-muted: var(--muted);
  --hp-pill-brd: color-mix(in srgb, var(--border) 78%, transparent);
  --hp-pill-hover: color-mix(in srgb, var(--btn-bg, var(--link, #4f8cff)) 12%, transparent);
}

/* DARK */
.theme-dark .home-page,
[data-theme="dark"] .home-page{
  --hp-pill-fg: var(--text);
  --hp-pill-muted: color-mix(in srgb, var(--muted) 92%, transparent);
  --hp-pill-brd: color-mix(in srgb, #ffffff 16%, transparent);
  --hp-pill-hover: color-mix(in srgb, var(--btn-bg, #7aa2ff) 14%, transparent);
}

/* NEON */
.theme-neon .home-page,
[data-theme="neon"] .home-page{
  --hp-pill-fg: var(--text);
  --hp-pill-muted: color-mix(in srgb, var(--muted) 92%, transparent);
  --hp-pill-brd: color-mix(in srgb, var(--brand, #7aa2ff) 34%, transparent);
  --hp-pill-hover: color-mix(in srgb, var(--brand, #7aa2ff) 16%, transparent);
}

/* LIGHT */
.theme-light .home-page,
[data-theme="light"] .home-page{
  --hp-pill-fg: var(--text);
  --hp-pill-muted: color-mix(in srgb, var(--muted) 92%, transparent);
  --hp-pill-brd: color-mix(in srgb, var(--border) 92%, transparent);
  --hp-pill-hover: color-mix(in srgb, var(--btn-bg, var(--link, #2563eb)) 10%, transparent);
}

/* chips в рекомендациях (mfR) — тоже без заливки */
.home-page .mfR-card .mfR-chip{
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--hp-pill-brd) !important;
  color: var(--hp-pill-fg) !important;
}

/* На всякий: если в reco-карточках есть “полоска/плашка” со счётом — убираем заливку */
.reco-block .mfR-bar,
.reco-block .mfR-meter,
.reco-block .mfR-progress,
.reco-block .mfR-scorebar,
.reco-block .mfR-score,
.reco-block .mfR-rank{
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--hp-pill-brd) !important;
  color: var(--hp-pill-fg) !important;
}

/* =======================================================================
   HOME — Recos chip icons fallback (CSP-safe, no data: masks)
   Сердце / Сообщение / Звезда перед цифрой
   ======================================================================= */

/* отключаем маску-иконки и рисуем символы */
.home-page .mfR-chip__ico{
  background: none !important;
  -webkit-mask: none !important;
          mask: none !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* сохраняем прежний размер */
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* базовый вид символа */
.home-page .mfR-chip__ico::before{
  content: "";
  font-size: 13px;
  line-height: 1;
  transform: translateY(-.5px);
}

/* 1) лайки */
.home-page .mfR-chip--heart .mfR-chip__ico{ color: var(--mfR-ico-heart, #e11d48) !important; }
.home-page .mfR-chip--heart .mfR-chip__ico::before{ content: "❤"; }

/* 2) обсуждения/сообщения */
.home-page .mfR-chip--chat .mfR-chip__ico{ color: var(--mfR-ico-chat, #2563eb) !important; }
.home-page .mfR-chip--chat .mfR-chip__ico::before{ content: "💬"; }

/* 3) звёзды/избранное */
.home-page .mfR-chip--star .mfR-chip__ico{ color: var(--mfR-ico-star, #f59e0b) !important; }
.home-page .mfR-chip--star .mfR-chip__ico::before{ content: "★"; }

/* =======================================================================
   HOME — Section titles + Card descriptions (no clamp, theme-friendly)
   ======================================================================= */

/* Локальные переменные главной (по умолчанию — под тёмные темы) */
.home-page{
  --hm-title-fg: var(--text, #e6edf7);
  --hm-title-brd: color-mix(in srgb, var(--border-color, #23314a) 70%, transparent);
  --hm-title-bg0: color-mix(in srgb, var(--surface-2, #121a2a) 82%, transparent);
  --hm-title-bg1: color-mix(in srgb, var(--surface-1, #0b1220) 78%, transparent);
  --hm-title-dot: color-mix(in srgb, var(--brand, #7aa2ff) 70%, transparent);

  --hm-sub-fg: color-mix(in srgb, var(--muted, #93a3b8) 92%, transparent);

  --hm-desc-fg: color-mix(in srgb, var(--text, #e6edf7) 92%, transparent);
  --hm-desc-muted: color-mix(in srgb, var(--muted, #93a3b8) 95%, transparent);
  --hm-desc-link: var(--link, var(--brand, #7aa2ff));
}

/* Светлая тема — читаемость */
.theme-light .home-page,
[data-theme="light"] .home-page{
  --hm-title-fg: #0f172a;
  --hm-title-brd: color-mix(in srgb, var(--border-color, #cbd5e1) 80%, transparent);
  --hm-title-bg0: color-mix(in srgb, var(--surface-2, #f8fafc) 92%, transparent);
  --hm-title-bg1: color-mix(in srgb, var(--surface, #ffffff) 92%, transparent);
  --hm-title-dot: color-mix(in srgb, var(--brand, #2563eb) 70%, transparent);

  --hm-sub-fg: #475569;

  --hm-desc-fg: #0f172a;
  --hm-desc-muted: #475569;
  --hm-desc-link: var(--link, #2563eb);
}

/* Neon — чуть более “светящаяся” точка/акцент */
.theme-neon .home-page,
[data-theme="neon"] .home-page{
  --hm-title-dot: color-mix(in srgb, var(--brand, #7aa2ff) 85%, transparent);
}

/* =====================================================================
   HOME — фанфики: красивое описание + "обёртка" титульника секции "Фанфики"
   (строго scoped, не влияет на другие секции/страницы)
   ===================================================================== */

/* --- 1) Титульник секции "Фанфики" --- */
.home-page .home-fanfic-header .section-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* "обёртка" текста */
  padding: 8px 14px;
  border-radius: 999px;

  /* fallback для Firefox на случай проблем с фоном */
  background-color: rgba(255,255,255,.04);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface-2, #18233a) 78%, transparent),
      color-mix(in srgb, var(--surface,  #0f1728) 78%, transparent)
    );

  border: 1px solid color-mix(in srgb, var(--border-color, var(--border, #2b3b5c)) 70%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  line-height: 1.05;
}

.home-page .home-fanfic-header .section-title::before{
  content: "📚";
  font-size: 1.05em;
  opacity: .95;
}

/* подзаголовок рядом с "Фанфики" — чуть мягче и читабельнее */
.home-page .home-fanfic-header .section-subtitle{
  color: color-mix(in srgb, var(--muted, #9fb0c9) 88%, var(--text, #e7eefc));
  line-height: 1.35;
  max-width: 62ch;
}

/* --- 2) Описание в карточках (показывать ПОЛНОСТЬЮ + красиво) --- */
.home-page .home-fanfic-block .card .desc{
  /* главное: никаких обрезаний/клампов */
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block;

  margin: 10px 0 12px;
  padding: 10px 12px 10px 14px;

  /* аккуратный "литературный" вид */
  font-size: 0.98rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text, #e7eefc) 86%, var(--muted, #9fb0c9));

  /* мягкая рамка без "заливки плашкой" */
  border-left: 3px solid color-mix(in srgb, var(--accent, #6bb6ff) 55%, transparent);
  border-radius: 12px;

  /* лёгкий подсвет по краю, но НЕ закрашенная плашка */
  background-color: transparent;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent, #6bb6ff) 10%, transparent),
      transparent 52%
    );

  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: pretty;
}

/* Quill-контент внутри описания: нормальные отступы */
.home-page .home-fanfic-block .card .desc.ql-view p{
  margin: 0 0 0.65em;
}
.home-page .home-fanfic-block .card .desc.ql-view p:last-child{
  margin-bottom: 0;
}
.home-page .home-fanfic-block .card .desc.ql-view ul,
.home-page .home-fanfic-block .card .desc.ql-view ol{
  margin: 0.35em 0 0.35em 1.1em;
}
.home-page .home-fanfic-block .card .desc.ql-view blockquote{
  margin: 0.4em 0;
  padding-left: 0.9em;
  border-left: 3px solid color-mix(in srgb, var(--border-color, var(--border, #2b3b5c)) 65%, transparent);
  color: color-mix(in srgb, var(--text, #e7eefc) 82%, var(--muted, #9fb0c9));
}

/* === HOME: описание в карточках — сделать текст заметнее/жирнее === */
.home-page .home-fanfic-block .card .desc{
  /* чуть крупнее + жирнее */
  font-size: 1.03rem;
  font-weight: 850; /* если шрифт не поддерживает — браузер округлит к 600/700 */

  /* более контрастный цвет (все темы) */
  color: color-mix(in srgb, var(--text, #e7eefc) 94%, var(--muted, #9fb0c9));

  /* лёгкое "подсвечивание" текста, чтобы читался поверх любых поверхностей */
  text-shadow:
    0 1px 0 rgba(0,0,0,.22),
    0 0 14px rgba(0,0,0,.10);
}

/* внутри Quill — выделения ещё выразительнее */
.home-page .home-fanfic-block .card .desc.ql-view strong{
  font-weight: 800;
}

.home-page .home-fanfic-block .card .desc.ql-view a{
  color: var(--link, var(--accent, #6bb6ff));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* =====================================================================
   JOIN CTA (guest banner) — modern, tokenized, mobile-first
   ===================================================================== */

.join-cta{
  /* локальные токены компонента */
  --jc-surface: var(--surface, #ffffff);
  --jc-surface2: var(--surface-2, #f5f7ff);
  --jc-text: var(--text, #111827);
  --jc-muted: var(--muted, rgba(17,24,39,.72));
  --jc-border: var(--border, rgba(0,0,0,.12));
  --jc-link: var(--link, #ff7a18);
  --jc-accent: var(--accent, #7c82ff);

  /* декоративные блики (фолбэк-цвета, не зависят от color-mix) */
  --jc-glow1: rgba(124,130,255,.18);
  --jc-glow2: rgba(0,230,195,.14);

  margin: 18px 0 28px;
}

.join-cta__inner{
  position: relative;
  overflow: hidden;

  border-radius: 20px;
  border: 1px solid var(--jc-border);

  /* Firefox safety */
  background-color: var(--jc-surface);

  /* красивый фон, но не критичный */
  background:
    radial-gradient(1200px 420px at 12% 10%, var(--jc-glow1), transparent 60%),
    radial-gradient(900px 420px at 92% 90%, var(--jc-glow2), transparent 62%),
    linear-gradient(135deg, var(--jc-surface2), var(--jc-surface));

  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  padding: 16px;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .join-cta__inner{
    background:
      radial-gradient(1200px 420px at 12% 10%, var(--jc-glow1), transparent 60%),
      radial-gradient(900px 420px at 92% 90%, var(--jc-glow2), transparent 62%),
      linear-gradient(135deg,
        color-mix(in srgb, var(--jc-surface2) 88%, transparent),
        color-mix(in srgb, var(--jc-surface) 96%, transparent)
      );
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
  }
}

.join-cta__inner::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 20px;
  /* тонкая “премиум” кромка */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.06);
  opacity: .9;
}

.join-cta__inner{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: start;
}

.join-cta__left,
.join-cta__right{
  min-width: 0;
}

.join-cta__kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;

  color: var(--jc-muted);
  margin: 2px 0 8px;
}

.join-cta__kicker::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--jc-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jc-accent) 20%, transparent);
}

.join-cta__title{
  margin: 0 0 8px;
  color: var(--jc-text);
  font-weight: 900;
  line-height: 1.12;
  font-size: clamp(1.15rem, 1.05rem + 1.1vw, 1.65rem);
}

.join-cta__desc{
  margin: 0 0 12px;
  color: var(--jc-muted);
  line-height: 1.5;
  font-size: .98rem;
}

.join-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 10px 0 12px;
}

.join-cta__btn-primary.button,
.join-cta__btn-secondary.button{
  border-radius: 999px;
  padding: 10px 14px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
}

.join-cta__btn-primary.button{
  position: relative;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

.join-cta__btn-primary.button::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  opacity: .95;
}

.join-cta__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 800;
  text-decoration: none;
  color: var(--jc-link);
  padding: 8px 10px;
  border-radius: 12px;
}

.join-cta__link:hover{
  text-decoration: underline;
}

.join-cta__link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--jc-link) 55%, transparent);
  outline-offset: 2px;
}

.join-cta__note{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--jc-border) 80%, transparent);

  background: color-mix(in srgb, var(--jc-surface) 88%, transparent);
  background-color: var(--jc-surface); /* Firefox safety */
  color: var(--jc-muted);
  font-size: .92rem;
  line-height: 1.35;
}

.join-cta__note-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 28px;
  padding: 0 10px;
  border-radius: 999px;

  font-weight: 900;
  font-size: .85rem;

  border: 1px solid color-mix(in srgb, var(--jc-accent) 42%, transparent);
  background: color-mix(in srgb, var(--jc-accent) 14%, transparent);
  background-color: transparent; /* ok */
  color: var(--jc-text);
}

/* Правая колонка: “витрина” возможностей */
.join-cta__right{
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--jc-border) 78%, transparent);
  background: color-mix(in srgb, var(--jc-surface) 80%, transparent);
  background-color: var(--jc-surface); /* Firefox safety */
  padding: 12px;
}

.join-cta__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.join-cta__item{
  display: flex;
  gap: 10px;
  align-items: center;

  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--jc-border) 75%, transparent);

  background: color-mix(in srgb, var(--jc-surface) 92%, transparent);
  background-color: var(--jc-surface); /* Firefox safety */

  color: var(--jc-text);
  font-size: .95rem;
  line-height: 1.2;
  min-height: 44px;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.join-cta__ico{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;

  border: 1px solid color-mix(in srgb, var(--jc-accent) 28%, transparent);
  background: color-mix(in srgb, var(--jc-accent) 10%, transparent);
  background-color: transparent;
  font-size: 16px;
}

.join-cta__item:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--jc-accent) 35%, var(--jc-border));
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

@media (prefers-reduced-motion: reduce){
  .join-cta__item{ transition: none; }
}

/* ===================== Responsive ===================== */

@media (max-width: 980px){
  .join-cta__inner{
    grid-template-columns: 1fr;
  }
  .join-cta__right{
    padding: 12px;
  }
}

@media (max-width: 520px){
  .join-cta__inner{
    padding: 12px;
    border-radius: 18px;
  }
  .join-cta__actions{
    flex-direction: column;
    align-items: stretch;
  }
  .join-cta__btn-primary.button,
  .join-cta__btn-secondary.button{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .join-cta__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 320px){
  .join-cta__desc{ font-size: .94rem; }
  .join-cta__item{ padding: 9px 9px; }
  .join-cta__ico{ width: 26px; height: 26px; border-radius: 9px; }
}

/* ===================== Theme tuning ===================== */

.dark-theme .join-cta{
  --jc-surface: var(--surface, #0b1220);
  --jc-surface2: var(--surface-2, #121a2a);
  --jc-text: var(--text, #e9ecff);
  --jc-muted: var(--muted, rgba(233,236,255,.72));
  --jc-border: var(--border, rgba(255,255,255,.12));
  --jc-glow1: rgba(124,130,255,.14);
  --jc-glow2: rgba(0,230,195,.10);
  box-shadow: none;
}
.dark-theme .join-cta__inner{
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.dark-theme .join-cta__inner::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.neon-theme .join-cta{
  --jc-glow1: rgba(124,130,255,.22);
  --jc-glow2: rgba(0,230,195,.18);
}
.neon-theme .join-cta__inner{
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}