/* =======================================================================
   fanfic.css v3 — ПОЛНЫЙ редизайн страницы фанфика (2026)
   - современный "hero", аккуратные карты, ясные секции
   - mobile-first + супер-узкие экраны (до ~280px)
   - оптимизация под слабые устройства (меньше тяжёлых эффектов)
   - сохраняем существующие классы/хуки (like/sub/collection/audio/status)
   ======================================================================= */

/* ---------- Base container ---------- */
.fanfic-page{
  /* токены страницы (мягко ложатся поверх глобальных) */
  --ff-max: 1240px;
  --ff-pad: 12px;

  --ff-ink: var(--ink, var(--text, #0f172a));
  --ff-muted: var(--muted, #64748b);

  --ff-border: color-mix(in srgb, var(--border-color, #e5e7eb) 78%, transparent);
  --ff-border-strong: color-mix(in srgb, var(--border-color, #e5e7eb) 92%, transparent);

  --ff-card-bg: color-mix(in srgb, var(--surface-1, #ffffff) 92%, var(--surface-0, #ffffff) 8%);
  --ff-card-bg2: color-mix(in srgb, var(--surface-2, #f8fafc) 92%, var(--surface-1, #ffffff) 8%);

  --ff-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  --ff-shadow-soft: 0 6px 18px rgba(15, 23, 42, .06);

  --ff-radius: 18px;
  --ff-radius-sm: 14px;

  --ff-accent: var(--accent, #6366f1);
  --ff-accent-soft: color-mix(in srgb, var(--ff-accent) 22%, transparent);

  --ff-danger: var(--danger, #ef4444);

  /* Firefox safety: всегда задаём background-color рядом с градиентами */
  background-color: var(--surface-0, #ffffff);
}

body.dark-theme.fanfic-page{
  --ff-border: color-mix(in srgb, var(--border-color, #334155) 78%, transparent);
  --ff-border-strong: color-mix(in srgb, var(--border-color, #334155) 92%, transparent);

  --ff-card-bg: color-mix(in srgb, var(--surface-1, #0b1220) 92%, var(--surface-0, #070d18) 8%);
  --ff-card-bg2: color-mix(in srgb, var(--surface-2, #0f1a2e) 92%, var(--surface-1, #0b1220) 8%);

  --ff-shadow: 0 14px 34px rgba(0,0,0,.38);
  --ff-shadow-soft: 0 10px 24px rgba(0,0,0,.28);

  background-color: var(--surface-0, #070d18);
}

body.neon-theme.fanfic-page{
  --ff-accent: color-mix(in srgb, #22d3ee 55%, #a855f7 45%);
  --ff-accent-soft: color-mix(in srgb, var(--ff-accent) 30%, transparent);

  --ff-shadow: 0 0 0 1px rgba(129,140,248,.55), 0 0 26px rgba(129,140,248,.28);
  --ff-shadow-soft: 0 0 18px rgba(129,140,248,.22);

  background-color: var(--surface-0, #070d18);
}

/* Глобальный max-width (не ломаем другие страницы) */
main{ max-width: 1000px; margin: 0 auto; }

/* Контейнер страницы фанфика */
.fanfic-main{
  max-width: var(--ff-max);
  margin: 0 auto;
  padding:
    calc(var(--ff-pad) + env(safe-area-inset-top, 0px))
    calc(var(--ff-pad) + env(safe-area-inset-right, 0px))
    28px
    calc(var(--ff-pad) + env(safe-area-inset-left, 0px));
}

/* Внутренняя оболочка */
.ff-shell{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Hero ---------- */
.ff-hero{
  position: relative;
  border-radius: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--ff-border);
  background-color: var(--ff-card-bg2); /* Firefox fallback */
  background:
    radial-gradient(1200px 420px at 15% 5%, var(--ff-accent-soft), transparent 55%),
    radial-gradient(900px 360px at 95% 0%, color-mix(in srgb, #fb923c 18%, transparent), transparent 60%),
    var(--ff-card-bg2);
  box-shadow: var(--ff-shadow);
  overflow: hidden;
}

.ff-hero-backdrop{
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  opacity: .14;
  filter: blur(18px) saturate(1.08);
  transform: translateZ(0);
  pointer-events: none;
}

.ff-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(260px, 340px);
  gap: 14px;
  padding: clamp(12px, 2.2vw, 18px);
  align-items: start;
}

.ff-hero-main{ min-width: 0; }
.ff-hero-side{ min-width: 0; }

/* Topline: title + status */
.ff-hero-topline{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.fanfic-title{
  margin: 0;
  font-weight: 900;
  color: var(--ff-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(1.2rem, 2.6vw, 2.05rem);
  overflow-wrap: anywhere;
}

/* status chip */
.fanfic-hero-status{ display:flex; align-items:center; gap:8px; }
.status-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .95rem;
  background: color-mix(in srgb, var(--ff-card-bg) 72%, transparent);
  color: var(--ff-ink);
  white-space: nowrap;
}
.status-badge .ico{ font-size: 1rem; line-height: 1; }

/* statuses */
.status--done{
  background: color-mix(in srgb, #22c55e 18%, var(--ff-card-bg) 82%);
  border-color: color-mix(in srgb, #22c55e 45%, transparent);
  color: color-mix(in srgb, #065f46 70%, var(--ff-ink));
}
.status--progress{
  background: color-mix(in srgb, #fb923c 18%, var(--ff-card-bg) 82%);
  border-color: color-mix(in srgb, #fb923c 45%, transparent);
  color: color-mix(in srgb, #7c2d12 70%, var(--ff-ink));
}
.status--frozen{
  background: color-mix(in srgb, #60a5fa 18%, var(--ff-card-bg) 82%);
  border-color: color-mix(in srgb, #60a5fa 45%, transparent);
  color: color-mix(in srgb, #1e3a8a 70%, var(--ff-ink));
}

/* byline */
.ff-byline{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ff-muted);
  font-size: .98rem;
}
.ff-byline a{
  color: var(--ff-ink);
  font-weight: 900;
  text-decoration: none;
}
.ff-byline a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.ff-byline-muted{ font-weight: 700; color: var(--ff-muted); }
.ff-dot{ opacity: .55; }
.ff-byline strong{ color: var(--ff-ink); font-weight: 900; }

/* hero chips */
.hero-meta-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
.hero-chip{
  display:inline-flex;
  align-items:flex-start;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ff-card-bg) 82%, transparent);
  border: 1px solid var(--ff-border);
  color: var(--ff-ink);
  font-weight: 800;
  line-height: 1.2;
  box-shadow: var(--ff-shadow-soft);
  max-width: 100%;
}
.hero-chip__icon{ line-height: 1; }
.hero-chip__label{
  /* ВАЖНО: не режем — переносим */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* accent variations */
.hero-chip--rating{
  background-color: #fff7d6; /* Firefox fallback */
  background: linear-gradient(135deg, #facc15, #fb923c);
  border-color: rgba(15,23,42,.22);
  color: #111827;
}
body.dark-theme .hero-chip--rating{ color:#111827; }
.hero-chip--fandom{ flex: 1 1 260px; }
.hero-chip--audio{
  background: color-mix(in srgb, #22c55e 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #22c55e 38%, transparent);
}

/* Hero actions */
.fanfic-hero-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.fanfic-hero-actions .button{
  border-radius: 999px;
}
.ff-cta{
  font-weight: 900;
}
.ff-cta-secondary{ font-weight: 800; }
.ff-ghost{
  background: transparent;
  border-color: var(--ff-border);
  color: var(--ff-ink);
  font-weight: 800;
}
.ff-ghost:hover{
  background: color-mix(in srgb, var(--ff-card-bg) 70%, transparent);
}

/* Jump nav */
.ff-jump{
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ff-jump-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg) 78%, transparent);
  color: var(--ff-ink);
  text-decoration: none;
  font-weight: 900;
  box-shadow: var(--ff-shadow-soft);
}
.ff-jump-link:hover{
  transform: translateY(-1px);
}
.ff-jump-link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ff-accent) 70%, transparent);
  outline-offset: 2px;
}

/* Mobile: jump becomes horizontal scroll (small screens) */
@media (max-width: 520px){
  .ff-jump{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .ff-jump-link{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* ---------- Cover card ---------- */
.fanfic-cover-block{
  background: color-mix(in srgb, var(--ff-card-bg) 92%, transparent);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ff-cover-btn{
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}
.ff-cover-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ff-accent) 70%, transparent);
  outline-offset: 2px;
  border-radius: 14px;
}

.fanfic-cover-thumb{
  width: 100%;
  max-width: 280px;
  max-height: 340px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
  background: color-mix(in srgb, var(--ff-card-bg2) 70%, transparent);
}
.fanfic-cover-block figcaption{
  text-align: center;
  color: var(--ff-muted);
  font-size: .92rem;
  margin: 0;
}

.ff-cover-stub{
  border-radius: 14px;
  border: 1px dashed var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 82%, transparent);
  padding: 16px;
  text-align: center;
  color: var(--ff-muted);
}
.ff-cover-stub-ico{ font-size: 2rem; }
.ff-cover-stub-tx{ margin-top: 6px; font-weight: 800; }

/* cover actions */
.cover-actions{
  display:flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cover-actions-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cover-actions-row .button{
  width: 100%;
  justify-content: center;
  /* ВАЖНО: не режем надписи кнопок */
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px){
  .cover-actions-row{
    grid-template-columns: 1fr;
  }
}

/* details "more actions" */
.cover-actions-more{
  width: 100%;
}
.cover-actions-more__summary{
  cursor: pointer;
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px dashed var(--ff-border);
  background: transparent;
  color: var(--ff-muted);
  list-style: none;
}
.cover-actions-more__summary::-webkit-details-marker{ display:none; }
.cover-actions-more[open] .cover-actions-more__summary{
  background: color-mix(in srgb, var(--ff-card-bg2) 74%, transparent);
  color: var(--ff-ink);
}
.cover-actions-more__body{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

/* Sticky cover on desktop */
@media (min-width: 980px){
  .ff-hero-side .fanfic-cover-block{
    position: sticky;
    top: 12px;
  }
}

/* ---------- Cards / sections ---------- */
.info-card{
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow-soft);
  padding: 16px 18px;
  color: var(--ff-ink);
}

.info-card h3{
  margin: 0 0 10px;
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 1.08rem;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ff-border);
  color: var(--ff-ink);
}

/* Sections anchor comfort */
#description, #toc-section, #meta-block, #author-card, #similar-section{
  scroll-margin-top: 88px;
}

/* Layout: main + aside */
.fanfic-body-layout{
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}

.fanfic-body-main,
.fanfic-body-side{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile: single column, show sidebar first */
@media (max-width: 980px){
  .ff-hero-grid{
    grid-template-columns: 1fr;
  }
  .ff-hero-backdrop{
    opacity: .10;
    filter: blur(14px) saturate(1.05);
  }

  .fanfic-body-layout{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .fanfic-body-side{ order: 0; }
  .fanfic-body-main{ order: 1; }
}

/* Super small screens */
@media (max-width: 360px){
  .fanfic-main{ padding-left: 8px; padding-right: 8px; }
  .info-card{ padding: 14px 14px; }
  .status-badge{ padding: 7px 10px; font-size: .92rem; }
}

/* ---------- Meta block (chars/pairs/tags) ---------- */
.ff-meta-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ff-meta-title{
  font-weight: 1000;
  color: var(--ff-ink);
  margin-bottom: 6px;
}
.ff-meta-col{
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ff-card-bg2) 72%, transparent);
  border: 1px solid var(--ff-border);
}

@media (max-width: 980px){
  .ff-meta-grid{ grid-template-columns: 1fr; }
}

/* ---------- Chips ---------- */
.chip-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip{
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg) 90%, transparent);
  color: var(--ff-ink);
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(15,23,42,.06);
  max-width: 100%;
}
.chip .chip-text{
  /* не режем! */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chip--pair{
  background: color-mix(in srgb, #fb923c 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #fb923c 35%, transparent);
}
.chip--tag::before{ content:"#"; opacity:.6; }

.chip:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ff-accent) 70%, transparent);
  outline-offset: 2px;
}

/* link-like chips */
.chip-list .chip[role="link"]{
  cursor: pointer;
  user-select: none;
}

/* ---------- Quill viewer ---------- */
.ql-view{
  line-height: 1.72;
  font-size: 1rem;
  color: var(--ff-ink);
  overflow-wrap: anywhere;
}
.ql-view p{ margin: .6em 0; }
.ql-view h1,.ql-view h2,.ql-view h3{ margin: .9em 0 .5em; line-height: 1.25; }
.ql-view h1{ font-size: 1.6rem; }
.ql-view h2{ font-size: 1.35rem; }
.ql-view h3{ font-size: 1.2rem; }
.ql-view ul,.ql-view ol{ padding-left: 1.3em; margin: .6em 0; }
.ql-view li{ margin: .3em 0; }
.ql-view blockquote{
  margin: .85em 0;
  padding: .7em .95em;
  border-radius: 14px;
  border-left: 4px solid var(--ff-border-strong);
  background-color: color-mix(in srgb, var(--ff-card-bg2) 82%, transparent); /* Firefox fallback */
  background: color-mix(in srgb, var(--ff-card-bg2) 82%, transparent);
  color: color-mix(in srgb, var(--ff-ink) 88%, var(--ff-muted));
}
.ql-view pre{
  padding: .9em 1em;
  border-radius: 14px;
  overflow: auto;
  border: 1px solid var(--ff-border);
  background-color: color-mix(in srgb, var(--ff-card-bg2) 70%, transparent);
  background: color-mix(in srgb, var(--ff-card-bg2) 70%, transparent);
}
.ql-view code{
  background: color-mix(in srgb, var(--ff-card-bg2) 72%, transparent);
  padding: .1em .35em;
  border-radius: 8px;
}
.ql-view img{ max-width:100%; height:auto; display:block; margin:.6em 0; border-radius: 14px; }

/* ---------- TOC ---------- */
.ff-toc-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ff-toc-tools{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ff-toc-search input{
  width: min(320px, 72vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
  color: var(--ff-ink);
}
.ff-toc-search input:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ff-accent) 70%, transparent);
  outline-offset: 2px;
}
.ff-toc-count{
  font-weight: 900;
  color: var(--ff-muted);
  font-size: .92rem;
}

.toc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.toc-item{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 78%, transparent);
  box-shadow: 0 4px 12px rgba(15,23,42,.05);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.toc-item:hover{ border-color: var(--ff-border-strong); }

.toc-num{
  color: var(--ff-muted);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.toc-link{
  text-decoration: none;
  font-weight: 1000;
  color: var(--ff-ink);
  /* не режем — переносим */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.toc-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toc-link:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--ff-accent) 70%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ---------- Author mini ---------- */
.author-mini__row{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
}
.author-mini__avatar img,
.author-mini__avatar--stub{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
  border: 1px solid var(--ff-border);
}
.author-mini__name{ font-weight: 1000; }
.author-mini__name a{
  color: var(--ff-ink);
  text-decoration: none;
}
.author-mini__name a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.author-mini__socials{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
a.chip{ text-decoration: none; }
.chip--social{
  padding: 7px 12px;
  font-weight: 1000;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.chip--social:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Social colors */
.author-mini__socials .chip[data-social="boosty"]{
  background: color-mix(in srgb, #ff9b5e 18%, var(--ff-card-bg) 82%);
  border-color: color-mix(in srgb, #ff9b5e 42%, transparent);
  color: color-mix(in srgb, #7c2d12 72%, var(--ff-ink));
}
.author-mini__socials .chip[data-social="telegram"]{
  background: color-mix(in srgb, #60a5fa 18%, var(--ff-card-bg) 82%);
  border-color: color-mix(in srgb, #60a5fa 42%, transparent);
  color: color-mix(in srgb, #0f3a60 70%, var(--ff-ink));
}

/* ---------- KPI ---------- */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi{
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 78%, transparent);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.kpi-num{
  font-size: 1.35rem;
  font-weight: 1100;
  white-space: nowrap;
  color: var(--ff-ink);
}
.kpi-label{
  margin-top: 4px;
  font-weight: 900;
  color: var(--ff-muted);
  white-space: nowrap;
}

@media (max-width: 520px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Meta grid (label/value) ---------- */
.meta-grid{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
}
.meta-grid .label{ color: var(--ff-muted); font-weight: 900; }
.meta-grid .value{
  color: var(--ff-ink);
  font-weight: 1000;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
}

/* ---------- Like & Sub buttons (keep hooks) ---------- */
.like-btn,
.sub-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
  color: var(--ff-ink);
  cursor: pointer;
  font-weight: 1000;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.like-btn:hover,
.sub-btn:hover{
  transform: translateY(-1px);
  border-color: var(--ff-border-strong);
}
.like-divider,
.sub-divider{
  width: 1px;
  height: 16px;
  background: var(--ff-border-strong);
  opacity: .8;
}
.like-count,
.sub-count{
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: right;
  color: var(--ff-muted);
}
.like-btn.liked{
  background: color-mix(in srgb, #ef4444 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #ef4444 38%, transparent);
}
.sub-btn.subscribed{
  background: color-mix(in srgb, #22c55e 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #22c55e 38%, transparent);
}

/* ---------- Team management ---------- */
.team-grid{ display:grid; gap: 10px; }
.team-item{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
}
.team-ava img,
.team-ava__stub{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg) 70%, transparent);
}
.team-meta{ min-width:0; }
.team-line{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.team-name{
  font-weight: 1100;
  color: var(--ff-ink);
  text-decoration: none;
}
.team-name:hover{ text-decoration: underline; text-underline-offset: 3px; }
.team-role{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 1000;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg) 88%, transparent);
  color: var(--ff-ink);
}
.team-role.role-beta{
  background: color-mix(in srgb, #22c55e 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
}
.team-role.role-gamma{
  background: color-mix(in srgb, #60a5fa 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #60a5fa 35%, transparent);
}
.team-role.role-coauthor{
  background: color-mix(in srgb, #fb923c 14%, var(--ff-card-bg) 86%);
  border-color: color-mix(in srgb, #fb923c 35%, transparent);
}
.team-note{ color: var(--ff-muted); margin-top: 2px; }
.team-chapters{ font-weight: 1000; color: var(--ff-ink); }

.team-remove{
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
  color: var(--ff-muted);
}
.team-remove:hover{
  background: color-mix(in srgb, var(--ff-card-bg2) 72%, transparent);
}

.team-sep{
  border: 0;
  height: 1px;
  background: var(--ff-border);
  margin: 12px 0;
}
.team-add__summary{
  cursor: pointer;
  font-weight: 1100;
}
.team-add__form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.team-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.team-field span{
  display:block;
  margin-bottom: 6px;
  font-size: .9rem;
  color: var(--ff-muted);
  font-weight: 900;
}
.team-field input,
.team-field select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: transparent;
  color: var(--ff-ink);
}
.team-actions{
  display:flex;
  justify-content:flex-end;
}

/* compact team lists */
.team-list{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  list-style:none;
  margin: 0;
  padding: 0;
}
.team-pill .team-ava{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 1100;
  font-size: .85rem;
  background: color-mix(in srgb, var(--ff-card-bg2) 72%, transparent);
  border: 1px solid var(--ff-border);
}

/* ---------- Similar block ---------- */
.similar-list{ margin-top: 6px; }

.similar-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.similar-link{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
  color: var(--ff-ink);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.similar-link:hover{ border-color: var(--ff-border-strong); }
.similar-thumb img,
.similar-thumb__stub{
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  display:block;
  background: color-mix(in srgb, var(--ff-card-bg) 70%, transparent);
  border: 1px solid var(--ff-border);
}
.similar-title{
  font-weight: 1100;
  line-height: 1.2;
}
.similar-desc{
  margin-top: 4px;
  color: var(--ff-muted);
  line-height: 1.35;
}

/* ---------- Modal cover ---------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
}
.modal.open{ display:flex; }
.modal img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
}

/* ---------- Status panel ---------- */
.status-edit-btn{ position: relative; }
.status-panel{
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 10px;
  min-width: 260px;
  border-radius: 14px;
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
  box-shadow: var(--ff-shadow);
  max-width: 420px;
}
.status-panel__title{
  font-weight: 1000;
  margin-bottom: 8px;
  color: var(--ff-ink);
}
.status-option{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
}
.status-option:hover{
  background: color-mix(in srgb, var(--ff-card-bg2) 70%, transparent);
}
.status-option input[type="radio"]{ accent-color: var(--ff-accent); }
.status-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 1100;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .92rem;
}
.status-panel__actions{
  display:flex;
  gap: 8px;
  justify-content:flex-end;
  margin-top: 10px;
}

/* status panel mobile modal mode */
.status-panel-scrim{
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(0,0,0,.55);
  -webkit-tap-highlight-color: transparent;
}
.status-panel.status-panel--modal{
  z-index: 1260;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  margin-top: 0 !important;
  width: min(420px, calc(100vw - 16px)) !important;
  max-height: min(82vh, calc(100vh - 24px));
  overflow: auto;
}
@supports (height: 100dvh){
  .status-panel.status-panel--modal{
    max-height: calc(100dvh - 24px);
  }
}

/* ---------- Audio block head ---------- */
.audio-block-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.audio-block-body[hidden]{ display:none !important; }

@media (max-width: 520px){
  .audio-block-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* =========================
   AUDIO: FIX double numbering + mobile overflow
   ========================= */

/* 1) убираем авто-нумерацию <ol>, оставляем только ваш idx+1 */
.fanfic-page .audio-fanfic-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.fanfic-page .audio-fanfic-item::marker{ content: ""; } /* доп. страховка */

/* 2) аккуратный хедер части (не раздувает ширину) */
.fanfic-page .audio-fanfic-part-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.fanfic-page .audio-fanfic-part-title{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.fanfic-page .audio-part-title-text{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fanfic-page .audio-fanfic-meta{
  white-space: nowrap;
}
@media (max-width: 520px){
  .fanfic-page .audio-fanfic-meta{ white-space: normal; }
}

/* 3) жёстко ограничиваем ширину плеера (перебивает media-player.css на мобиле) */
.fanfic-page .audio-page-block .q-audio,
.fanfic-page .audio-page-block .audio-main-player{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
}

.fanfic-page .audio-page-block .q-audio audio{
  display: block;
  width: 100%;
  max-width: 100%;
}

/* если плеер собирается из div-ов (кастомный) — не даём детям раздувать ширину */
.fanfic-page .audio-page-block .q-audio *{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- Modals (collection/audio/age) ---------- */
.col-modal[hidden]{ display:none !important; }
.col-modal{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.col-modal[aria-hidden="false"]{ display:block; }
.col-modal__scrim{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  -webkit-tap-highlight-color: transparent;
}
.col-modal__card{
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  max-height: min(82vh, 720px);
  margin: 8vh auto 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 18px;
  background: var(--ff-card-bg);
  border: 1px solid var(--ff-border);
  color: var(--ff-ink);
  box-shadow: var(--ff-shadow);
  overflow: hidden;
}
.col-modal__head,
.col-modal__foot{ padding: 12px 12px; }
.col-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px dashed var(--ff-border);
}
.col-modal__body{
  padding: 12px;
  overflow: auto;
  max-height: 65vh;
}
.col-modal__sep{
  border:0;
  height:1px;
  background: var(--ff-border);
  margin: 10px 0;
}
.col-modal__close{
  border:0;
  background: transparent;
  cursor:pointer;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 22px;
  line-height:1;
  color: var(--ff-muted);
}
.col-modal__close:hover{
  background: color-mix(in srgb, var(--ff-card-bg2) 70%, transparent);
}

.col-list{ display:grid; gap: 8px; }
.col-field input[type="text"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: transparent;
  color: var(--ff-ink);
}
.col-check{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
}

.col-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ff-border);
  background: color-mix(in srgb, var(--ff-card-bg2) 76%, transparent);
  cursor: pointer;
  font-weight: 1000;
  color: var(--ff-ink);
}
.col-btn--primary{
  background: color-mix(in srgb, var(--ff-accent) 92%, #0000);
  border-color: color-mix(in srgb, var(--ff-accent) 70%, transparent);
  color: #fff;
}
.col-btn--primary:hover{ filter: brightness(1.04); }

/* Age modal tweaks */
.age-modal__card{ border-radius: 18px; }
.age-modal__head{ border-bottom: 1px dashed var(--ff-border); }
.age-modal__card--16 .age-modal__head{
  background: color-mix(in srgb, #fb923c 10%, transparent);
}
.age-modal__card--18 .age-modal__head{
  background: color-mix(in srgb, #ef4444 12%, transparent);
}
@media (max-width: 480px){
  .age-modal__foot{
    display:flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* Scroll lock for modals */
html.modal-open, body.modal-open{ overflow: hidden; }

/* ---------- Helpers ---------- */
.muted{ color: var(--ff-muted); }
.ff-sr{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* ---------- Buttons (danger) ---------- */
.button.danger{
  background: var(--ff-danger);
  color: #fff;
  border-color: color-mix(in srgb, var(--ff-danger) 55%, transparent);
}

/* ---------- Performance: content-visibility for heavy blocks ---------- */
@supports (content-visibility: auto){
  #similar-section,
  #toc-section{
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ff-jump-link,
  .like-btn,
  .sub-btn{
    transition: none !important;
  }
  .ff-jump-link:hover,
  .like-btn:hover,
  .sub-btn:hover{
    transform: none !important;
  }
  html{ scroll-behavior: auto; }
}

/* =========================
   STATUS PANEL — fixed center
   ========================= */
#status-panel.status-panel{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;
  margin: 0 !important;

  width: min(520px, calc(100vw - 24px));
  max-height: min(70vh, calc(100vh - 24px));
  overflow: auto;

  z-index: 10050;
}

#status-panel[hidden]{ display:none !important; }

/* =========================
   SIMILAR — rectangular badges
   ========================= */
.similar-card .chip,
.similar-card [class*="badge"],
.similar-card [class*="pill"],
.similar-card .tag,
.similar-card .label{
  border-radius: 10px !important; /* было “пилюлей/кружком”, теперь прямоугольнее */
}

/* =========================
   LAYOUT + SCALE GUARD (desktop-friendly)
   ========================= */

/* iOS/Android: не даём авто-масштаб текста дергать лейаут */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Возвращаем нормальный контейнер на ПК */
.fanfic-page .fanfic-main{
  width: 100%;
  max-width: 1200px;            /* можно 1100/1300 по вкусу */
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* На мобилках — ширина во весь экран, но без горизонтального раздува */
@media (max-width: 900px){
  .fanfic-page .fanfic-main{
    max-width: none;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Анти-overflow: только скрываем горизонтальный мусор, но НЕ ломаем max-width */
.fanfic-page{ overflow-x: clip; }
@supports not (overflow: clip){
  .fanfic-page{ overflow-x: hidden; }
}

/* Важное: grid-детям даём ужиматься */
.ff-hero-grid,
.fanfic-body-layout,
.fanfic-body-main,
.fanfic-body-side,
.ff-hero-main,
.ff-hero-side{
  min-width: 0;
}

/* Длинные строки не должны расширять viewport */
.fanfic-title,
.ff-byline,
.hero-chip__label,
.ff-jump-link,
.toc-link{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Чипсы — переносим, но не даём им распирать контейнер */
.hero-meta-chips{
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}
.hero-meta-chips > *{ max-width: 100%; }

/* =========================
   FOOTER: disable sticky/fixed on fanfic page
   ========================= */
.fanfic-page footer,
.fanfic-page .footer,
.fanfic-page .site-footer,
.fanfic-page #footer{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}

/* =========================
   BREADCRUMBS: make it look like UI, not plain text list
   ========================= */
.fanfic-breadcrumbs{
  margin: 10px 0 12px;
}

.fanfic-breadcrumbs .bc-list{
  list-style: none;
  padding: 10px 12px;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--text);
  border-radius: 14px;
}

.fanfic-breadcrumbs .bc-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fanfic-breadcrumbs .bc-item:not(:last-child)::after{
  content: "›";
  opacity: .55;
}

.fanfic-breadcrumbs .bc-link,
.fanfic-breadcrumbs .bc-current{
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;
  border-radius: 12px;

  text-decoration: none;
  color: var(--link);
  background: color-mix(in srgb, var(--surface, #000) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
}

.fanfic-breadcrumbs .bc-current{
  color: var(--text);
  opacity: .9;
}

/* На узких экранах — одной строкой со скроллом */
@media (max-width: 520px){
  .fanfic-breadcrumbs .bc-list{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fanfic-breadcrumbs .bc-list::-webkit-scrollbar{ display:none; }
  .fanfic-breadcrumbs .bc-item:not(:last-child)::after{ display:none; } /* меньше визуального шума */
}

/* ======================================================================
   FANFIC PAGE HOTFIX (desktop width, footer, breadcrumbs, cover, chips)
   ====================================================================== */

/* 2.1. Не растягиваем фанфик на весь экран на ПК */
body.fanfic-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body.fanfic-page > main.fanfic-main{
  flex: 1 0 auto;
  width: 100%;
}

/* Центруем “оболочку” страницы */
.fanfic-page .ff-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: calc(var(--space-4,16px) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-4,16px) + env(safe-area-inset-right, 0px));
}

/* 2.2. Футер: вернуть в поток, не фиксировать, не прятать */
.fanfic-page > footer,
.fanfic-page .site-footer,
.fanfic-page #footer{
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  z-index: auto !important;
  margin-top: 24px;
}

/* 2.3. Хлебные крошки: красиво и без “поломанных букв” */
.fanfic-page .fanfic-breadcrumbs{
  margin: 10px 0 14px;
}

.fanfic-page .fanfic-breadcrumbs .bc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fanfic-page .fanfic-breadcrumbs .bc-item{
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
}

.fanfic-page .fanfic-breadcrumbs .bc-item + .bc-item::before{
  content: "›";
  opacity: .6;
  margin: 0 6px 0 2px;
}

.fanfic-page .fanfic-breadcrumbs .bc-link,
.fanfic-page .fanfic-breadcrumbs .bc-current{
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
  color: var(--link, #7aa7ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fanfic-page .fanfic-breadcrumbs .bc-current{
  color: var(--text, #e9eefc);
  opacity: .92;
}

@media (max-width: 520px){
  .fanfic-page .fanfic-breadcrumbs .bc-list{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .fanfic-page .fanfic-breadcrumbs .bc-item{
    flex: 0 0 auto;
  }
  .fanfic-page .fanfic-breadcrumbs .bc-link,
  .fanfic-page .fanfic-breadcrumbs .bc-current{
    max-width: 72vw;
  }
}

/* 2.4. Обложка: на мобиле НЕ режем в квадрат */
.fanfic-page .fanfic-cover-block .ff-cover-btn{
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.fanfic-page img.fanfic-cover-thumb{
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background-color: var(--surface-1, #0f1930); /* Firefox safe */
}

/* Если где-то ранее была “квадратная” высота — ограничим аккуратно */
@media (max-width: 520px){
  .fanfic-page img.fanfic-cover-thumb{
    max-height: min(70vh, 520px);
  }
}

/* 2.5. Плашка статуса (панель выбора) — строго по центру экрана */
.fanfic-page .status-panel[hidden]{
  display: none !important;
}

.fanfic-page .status-panel{
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2000 !important;

  width: min(92vw, 420px);
  max-height: min(80vh, 560px);
  overflow: auto;

  border: 1px solid var(--border, rgba(255,255,255,.14));
  background-color: var(--surface, #0b1220); /* Firefox safe */
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* затемнение фона, когда открыта панель статуса */
body.fanfic-page.status-open::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1999;
}

/* 2.6. Похожие: убрать “пилюли” → сделать прямоугольные плашки */
.fanfic-page .similar-card .chip,
.fanfic-page .similar-card .badge,
.fanfic-page .similar-card .pill,
.fanfic-page .similar-card .tag{
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

/* 2.7. Раскраска возрастного рейтинга + направленности (ЗАЛИВКА ПЛАШКИ) */

/* по умолчанию остальные чипы — как были (не трогаем) */
.fanfic-page .hero-chip--rating,
.fanfic-page .hero-chip--category{
  /* дефолт (если вдруг не распознали) — аккуратный “брендовый” */
  --badge-bg: rgba(120,167,255,.14);
  --badge-border: rgba(120,167,255,.35);
  --badge-fg: var(--text, #e9eefc);

  background: var(--badge-bg) !important;
  background-color: var(--badge-bg) !important; /* Firefox safe */
  border-color: var(--badge-border) !important;
  color: var(--badge-fg) !important;
}

/* чтобы иконка/текст НЕ красились отдельно — всё наследуется от color */
.fanfic-page .hero-chip--rating .hero-chip__icon,
.fanfic-page .hero-chip--category .hero-chip__icon{
  color: inherit !important;
}

/* ===== AGE (0/6/12/16/18) ===== */
.fanfic-page .hero-chip--rating[data-age="0"]{
  --badge-bg: #22c55e;
  --badge-border: #16a34a;
  --badge-fg: #ffffff;
}

.fanfic-page .hero-chip--rating[data-age="6"]{
  --badge-bg: #a3e635;
  --badge-border: #84cc16;
  --badge-fg: #111827;
}

.fanfic-page .hero-chip--rating[data-age="12"]{
  --badge-bg: #facc15;
  --badge-border: #eab308;
  --badge-fg: #111827;
}

.fanfic-page .hero-chip--rating[data-age="16"]{
  --badge-bg: #fb923c;
  --badge-border: #f97316;
  --badge-fg: #111827;
}

.fanfic-page .hero-chip--rating[data-age="18"]{
  --badge-bg: #b91c1c;
  --badge-border: #7f1d1d;
  --badge-fg: #ffffff;
}

/* ===== Direction (Гет/Джен/Статья) ===== */
.fanfic-page .hero-chip--category[data-dir="get"]{
  --badge-bg: #216139;
  --badge-border: #23703f;
  --badge-fg: #ffffff;
}

.fanfic-page .hero-chip--category[data-dir="gen"]{
  --badge-bg: #8b5a2b;
  --badge-border: #6b3f1f;
  --badge-fg: #ffffff;
}

.fanfic-page .hero-chip--category[data-dir="article"]{
  --badge-bg: #6b7280;
  --badge-border: #4b5563;
  --badge-fg: #ffffff;
}

.fanfic-page #cover-modal[aria-hidden="true"]{ display:none; }
.fanfic-page #cover-modal.is-open{
  display:flex;
  position: fixed;
  inset: 0;
  z-index: 2100;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.62);
}
.fanfic-page #cover-modal.is-open img{
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
}

/* ========================================================================
   FANFIC — AUTHOR MINI (sidebar) — socials polish
   Scoped + token-friendly + mobile-first (down to 280px)
   ======================================================================== */

.fanfic-page .info-card.author-mini{
  /* локальные токены (без зависимости от сложных global color-mix) */
  --am-gap: 12px;
  --am-ava: 56px;
  --am-chip-h: 36px;
  --am-chip-r: 999px;

  --am-surface:   var(--surface, #0f172a);
  --am-surface-2: var(--surface-2, var(--surface, #0f172a));
  --am-border:    var(--border, var(--border-color, rgba(255,255,255,.14)));
  --am-text:      var(--text, #e8eefc);
  --am-muted:     var(--muted, rgba(232,238,252,.72));
  --am-link:      var(--link, var(--am-text));

  /* Firefox-safe fallback: если где-то “сложный” фон сломается — не проваливаемся */
  background-color: var(--am-surface);
}

/* layout: avatar + meta */
.fanfic-page .author-mini .author-mini__row{
  display: grid;
  grid-template-columns: var(--am-ava) minmax(0, 1fr);
  gap: var(--am-gap);
  align-items: center;
}

.fanfic-page .author-mini .author-mini__meta{
  min-width: 0;
}

/* на очень узких: складываем в столбик, чтобы ничего не ломалось */
@media (max-width: 420px){
  .fanfic-page .author-mini .author-mini__row{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* avatar */
.fanfic-page .author-mini .author-mini__avatar img,
.fanfic-page .author-mini .author-mini__avatar--stub{
  width: var(--am-ava);
  height: var(--am-ava);
  display: block;
  border-radius: 50%;
  background-color: var(--am-surface-2);
  border: 1px solid var(--am-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  object-fit: cover;
}

.fanfic-page .author-mini .author-mini__name{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.fanfic-page .author-mini .author-mini__name a{
  color: var(--am-link);
  text-decoration: none;
}
.fanfic-page .author-mini .author-mini__name a:hover{
  text-decoration: underline;
}

/* socials: ровная сетка “плашек”, без пляски ширин */
.fanfic-page .author-mini .author-mini__socials{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  align-items: stretch;
}

/* 280–320px: одна колонка — гарантированно без переполнений */
@media (max-width: 320px){
  .fanfic-page .author-mini .author-mini__socials{
    grid-template-columns: 1fr;
  }
}

/* base pill */
.fanfic-page .author-mini .chip.chip--social{
  width: 100%;
  min-height: var(--am-chip-h);
  border-radius: var(--am-chip-r);
  padding: 8px 12px;

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

  font-weight: 850;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;

  color: var(--am-text);
  background-color: var(--am-surface-2);
  border: 1px solid var(--am-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;

  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* чтобы длинные названия не резало — пусть переносится */
  white-space: normal;
  overflow-wrap: anywhere;

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

@media (prefers-reduced-motion: reduce){
  .fanfic-page .author-mini .chip.chip--social{
    transition: none;
  }
}

.fanfic-page .author-mini .chip.chip--social:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* focus ring */
.fanfic-page .author-mini .chip.chip--social:focus-visible{
  outline: 3px solid rgba(120, 170, 255, .45);
  outline-offset: 2px;
}

/* аккуратная “брендовая” тонировка (если color-mix доступен) */
@supports (background: color-mix(in srgb, #000 50%, #fff)){
  .fanfic-page .author-mini .chip.chip--social{
    --am-accent: var(--am-link);
    background-color: color-mix(in srgb, var(--am-accent) 10%, var(--am-surface-2));
    border-color:     color-mix(in srgb, var(--am-accent) 22%, var(--am-border));
  }

  .fanfic-page .author-mini .chip.chip--social[data-social="telegram"]{ --am-accent:#2AABEE; }
  .fanfic-page .author-mini .chip.chip--social[data-social="vk"]{       --am-accent:#4C75A3; }
  .fanfic-page .author-mini .chip.chip--social[data-social="boosty"]{   --am-accent:#F15A24; }
  .fanfic-page .author-mini .chip.chip--social[data-social="ficbook"]{  --am-accent:#ff771c; }
  .fanfic-page .author-mini .chip.chip--social[data-social="fanfix"]{   --am-accent:#00BFA6; }
  .fanfic-page .author-mini .chip.chip--social[data-social="author_today"]{ --am-accent:#49ffe7; }
  .fanfic-page .author-mini .chip.chip--social[data-social="pinterest"]{--am-accent:#E60023; }
  .fanfic-page .author-mini .chip.chip--social[data-social="max"]{      --am-accent:#575aff; }
}

/* если соцссылок нет — текст не “липнет” */
.fanfic-page .author-mini .author-mini__socials .muted{
  color: var(--am-muted);
  font-size: 13px;
}

/* === FIX: author avatar must NOT grow on mobile === */
.fanfic-page .info-card.author-mini{
  /* дефолт оставь как было, но можно чуть умнее */
  --am-ava: 56px;
}

/* фиксируем размер НА КОНТЕЙНЕРЕ (важно!) */
.fanfic-page .author-mini .author-mini__avatar{
  width: var(--am-ava);
  height: var(--am-ava);
  flex: 0 0 auto;
}

/* а картинка просто заполняет контейнер */
.fanfic-page .author-mini .author-mini__avatar img,
.fanfic-page .author-mini .author-mini__avatar--stub{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

/* мобилки: можно сделать аву чуть больше, но с жёстким лимитом (и точно не огромной) */
@media (max-width: 420px){
  .fanfic-page .info-card.author-mini{
    --am-ava: clamp(64px, 28vw, 104px);
  }
}

/* === Fanfic page: chips -> rectangles (no pills) === */
.fanfic-page{
  --ff-chip-radius: 10px;          /* прямоугольник с мягким углом */
  --ff-chip-pad-y: 8px;
  --ff-chip-pad-x: 12px;
}

/* все чипы персонажей/пэйрингов/меток/соцссылок */
.fanfic-page .chip,
.fanfic-page .chip-list .chip,
.fanfic-page .chip.chip--social,
.fanfic-page .team-pill{
  border-radius: var(--ff-chip-radius) !important;
  padding: var(--ff-chip-pad-y) var(--ff-chip-pad-x) !important;
}

/* чипсы в шапке (hero-meta-chips) */
.fanfic-page .hero-chip{
  border-radius: var(--ff-chip-radius) !important;
}

/* статусные бейджи (если тоже считаем “плашками”) */
.fanfic-page .status-badge,
.fanfic-page .status-chip{
  border-radius: var(--ff-chip-radius) !important;
}

/* “роль” в команде, если она выглядит как плашка */
.fanfic-page .team-role{
  border-radius: var(--ff-chip-radius) !important;
}

/* чуть компактнее на самых маленьких */
@media (max-width: 380px){
  .fanfic-page{ --ff-chip-radius: 8px; --ff-chip-pad-y: 7px; --ff-chip-pad-x: 10px; }
}

/* ==========================================================================
   FANFIC PAGE — FOOTER RESCUE
   Причина: скролл оказался на .fanfic-main/контейнере (100vh + overflow),
   footer вне скролла. Возвращаем нормальный flow на body.
   ========================================================================== */

/* на всякий: не фиксируем документ по высоте */
html, body { height: auto; }

/* делаем страницу колонкой: header + main (растягивается) + footer */
body.fanfic-page{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* чтобы футер не мог “провалиться” под фон/оверлеи */
  position: relative;
}

/* main должен быть в потоке и тянуться, а не быть отдельным viewport-контейнером */
body.fanfic-page .fanfic-main{
  flex: 1 0 auto;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* если где-то оболочка тоже стала “резать” содержимое */
body.fanfic-page .ff-shell,
body.fanfic-page .fanfic-body-layout{
  overflow: visible;
}

/* сам футер — гарантированно видим и выше декоративных слоёв */
body.fanfic-page > footer,
body.fanfic-page .site-footer{
  flex: 0 0 auto;
  margin-top: 18px;
  position: relative;
  z-index: 5;
}

/* безопасный отступ снизу для мобилок (home-indicator) */
body.fanfic-page > footer,
body.fanfic-page .site-footer{
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ==========================
   Fanfic page — hard anti-overflow guard (mobile-first)
   Fixes "960px desktop width on load" + audio block pushing page wider
   ========================== */

.fanfic-page,
.fanfic-page .fanfic-main,
.fanfic-page .ff-shell,
.fanfic-page #page-layout,
.fanfic-page .fanfic-body-main,
.fanfic-page .fanfic-body-side,
.fanfic-page .info-card{
  min-width: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* ВАЖНО: убиваем любые фикс/мин ширины на оболочках */
.fanfic-page .fanfic-main,
.fanfic-page .ff-shell{
  width: 100% !important;
}

/* Если page-layout — grid: гарантируем, что 1fr реально может сжиматься */
.fanfic-page .fanfic-body-layout{
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}

/* На узких экранах сайдбар должен уходить вниз одной колонкой */
@media (max-width: 980px){
  .fanfic-page .fanfic-body-layout{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================
   Audio block — cannot expand page width
   ========================== */

.fanfic-page .audio-page-block{
  max-width: 100%;
  overflow: hidden;          /* критично: обрезает то, что вылазит */
}

/* Заголовок части: разрешаем переносы + правильное сжатие flex-детей */
.fanfic-page .audio-fanfic-part-header{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.fanfic-page .audio-fanfic-part-title{
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: 1 1 240px;
  min-width: 0;
}

.fanfic-page .audio-part-title-text{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fanfic-page .audio-fanfic-meta{
  margin-left: auto;
  white-space: nowrap;
}

/* На очень узких — мета переносится вниз */
@media (max-width: 420px){
  .fanfic-page .audio-fanfic-meta{
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Поля "Подпись части" — строго в ширину контейнера */
.fanfic-page .audio-part-edit,
.fanfic-page .audio-part-edit-field{
  min-width: 0;
  max-width: 100%;
}

.fanfic-page .audio-part-edit-field{
  display: block;
}

.fanfic-page .audio-part-edit-field input{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Сам плеер и всё, что он генерирует, не должно иметь min-width */
.fanfic-page .q-audio,
.fanfic-page .audio-main-player{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.fanfic-page .q-audio *{
  min-width: 0;
}

.fanfic-page .q-audio audio{
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Audio head must always be clickable (defend from overlays) */
.fanfic-page .audio-page-block .audio-block-head{
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fanfic-page .audio-page-block .audio-toggle-btn{
  position: relative;
  z-index: 6;
}