/* Раунд 4: диалоги, «сказать / сделать», звёзды, карточки-перевороты, главная. */

/* ---------- ДИАЛОГИ ---------- */
.chat { gap: 4px; padding-block: 22px 30px; }
.msg { --tn: var(--accent); flex-direction: row; align-items: flex-end; gap: 9px; max-width: min(88%, 560px); animation: bpop .45s var(--spring) both; }
.msg.same { margin-top: -1px; }
.msg:not(.same) { margin-top: 12px; }
.msg.me { flex-direction: row-reverse; align-self: flex-end; }
.mav { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; font: 700 14px var(--f-display); color: #fff;
  background: linear-gradient(145deg, var(--tn), color-mix(in srgb, var(--tn) 55%, #000)); box-shadow: 0 6px 14px -6px var(--tn); transform: rotate(-4deg); }
.mav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg.same .mav { visibility: hidden; height: 0; }
.mcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg .who { font: 700 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding-inline: 4px; }
.msg.me .mcol { align-items: flex-end; }
.bubble { position: relative; background: color-mix(in srgb, var(--tn) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tn) 28%, var(--line)); border-left: 3px solid var(--tn);
  border-radius: 6px 18px 18px 18px; padding: 10px 15px; line-height: 1.45; }
.msg.same .bubble { border-radius: 6px 18px 18px 6px; }
.msg.me .bubble { background: var(--grad); color: #fff; border: 0; border-radius: 18px 6px 18px 18px; box-shadow: 0 10px 24px -12px var(--accent); }
.msg.me.same .bubble { border-radius: 18px 6px 6px 18px; }
.bubble.photo { padding: 4px; border-left-width: 1px; }
.typing { background: color-mix(in srgb, var(--tn) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tn) 28%, var(--line)); border-radius: 6px 18px 18px 18px; padding: 12px 15px; }
.typing i { background: var(--tn); animation: wave 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .14s; } .typing i:nth-child(3) { animation-delay: .28s; }
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Автор рассказывает: подпись между линиями, без пузыря */
.narr { align-self: center; max-width: 86%; margin: 14px 0; padding: 0 18px; position: relative; font: italic 400 15px/1.55 var(--f-body); color: color-mix(in srgb, var(--ink) 72%, var(--muted)); text-align: center; text-wrap: balance; }
.narr::before, .narr::after { content: ""; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--muted); opacity: .5; }
.narr::before { left: 0; } .narr::after { right: 0; }

/* Начало главы */
.chap { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; font: 700 14px var(--f-display); letter-spacing: -.01em; }
.chap i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.chap span { padding: 7px 16px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* Действие героя — не реплика, а «ремарка»: рамка пунктиром, молния, имя + «действие» */
.act { align-self: center; display: flex; align-items: center; gap: 12px; max-width: min(92%, 520px); margin: 12px 0; padding: 9px 18px 9px 10px; border-radius: 16px;
  border: 1.5px dashed var(--accent2); background: color-mix(in srgb, var(--accent2) 9%, var(--surface)); animation: bpop .5s var(--spring) both; }
.actic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent2); color: #fff; }
.actic svg { width: 17px; height: 17px; }
.acttx { display: flex; flex-direction: column; font-weight: 600; line-height: 1.35; }
.acttx small { font: 600 10.5px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent2); }

/* Панель выбора: стеклянная плита */
.panel { margin-inline: -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -18px 40px -22px rgba(20, 8, 60, .45); gap: 12px; }
.panel::before { content: ""; position: absolute; left: 50%; top: 6px; width: 38px; height: 4px; margin-left: -19px; border-radius: 9px; background: var(--line); }
.pgroup { display: flex; flex-direction: column; gap: 8px; }
.pgroup > .plabel { display: flex; align-items: center; gap: 7px; }
.pgroup > .plabel svg { width: 14px; height: 14px; }
.pgroup.say > .plabel { color: var(--accent); }
.pgroup.do > .plabel { color: var(--accent2); }
.opt .lt svg { width: 14px; height: 14px; }
/* сказать — сплошная рамка и кавычки */
.opt.say .tx > span::before { content: "«"; opacity: .55; }
.opt.say .tx > span::after { content: "»"; opacity: .55; }
/* сделать — пунктир, цвет коралловый, стрелка */
.opt.do { --c: var(--accent2); border-style: dashed; border-radius: 12px; }
.opt.do .lt { border-radius: 50%; }
.opt.do .tx > span { font-style: italic; }
.opt.do .tx > span::before { content: "→ "; font-style: normal; opacity: .6; }
@media (prefers-reduced-motion: reduce) { .msg, .act, .typing i, .opt { animation: none !important; } }

/* ---------- КАРТОЧКИ-ПЕРЕВОРОТЫ ---------- */
.grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 18px; }
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } }
.fcard { --c1: var(--accent); position: relative; display: block; aspect-ratio: 3 / 4; perspective: 1100px; text-decoration: none; color: var(--ink); border-radius: 22px; -webkit-tap-highlight-color: transparent; }
.fc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s var(--spring), box-shadow .4s; border-radius: 22px; }
.fcard:hover .fc-in, .fcard:focus-visible .fc-in, .fcard.flipped .fc-in { transform: rotateY(180deg); box-shadow: 0 30px 50px -26px color-mix(in srgb, var(--c1) 80%, transparent); }
.fcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.fc-front, .fc-back { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--line); }
.fc-front { box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--c1) 70%, transparent); }
.fc-front .cover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.fc-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 14px; background:
  radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 60%), var(--surface); }
.fc-genres { display: flex; flex-wrap: wrap; gap: 5px; }
.fc-genres span { font: 700 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c1); padding: 3px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c1) 50%, transparent); }
.fc-back h2 { font: 700 19px/1.15 var(--f-display); letter-spacing: -.03em; margin: 4px 0 0; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fc-back .blurb { flex: 1; min-height: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.fc-back .badges { gap: 5px; }
.fc-back .badge { font-size: 11px; padding: 2px 8px; }
.fc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; }
.fc-foot .meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 100%; color: var(--muted); }
.fc-foot .meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-go { margin-left: auto; font-weight: 700; color: var(--c1); }
.fc-foot .rpill { display: none; }
.fc-foot .rpill.flat { display: inline-flex; }
/* рейтинг справа снизу на обложке */
.rpill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 99px; font: 700 13px var(--f-body); color: #fff; background: rgba(12, 6, 32, .58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rpill svg { width: 14px; height: 14px; fill: var(--accent3); stroke: var(--accent3); }
.fc-front .rpill { position: absolute; right: 10px; bottom: 10px; z-index: 3; }
.rpill.flat { background: color-mix(in srgb, var(--accent3) 18%, var(--surface)); color: var(--ink); backdrop-filter: none; }
.fc-front .cover .gtag { max-width: calc(100% - 96px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce), (hover: none) and (prefers-reduced-motion: reduce) {
  .fc-in { transition: none; transform: none !important; }
  .fc-back { transform: none; opacity: 0; transition: opacity .2s; }
  .fc-front { transition: opacity .2s; }
  .fcard:hover .fc-back, .fcard:focus-visible .fc-back, .fcard.flipped .fc-back { opacity: 1; }
  .fcard:hover .fc-front, .fcard:focus-visible .fc-front, .fcard.flipped .fc-front { opacity: 0; }
}

/* ---------- СТРАНИЦА ИСТОРИИ ---------- */
.sp-hero { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 28px; align-items: start; }
.sp-hero > .cover { aspect-ratio: 3 / 4; border-radius: 26px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c1) 80%, transparent); transform: rotate(-1.5deg); }
.sp-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 640px) { .sp-hero { grid-template-columns: 1fr; } .sp-hero > .cover { width: min(70%, 260px); margin-inline: auto; } }
.coverpick .cover { width: 150px; aspect-ratio: 3 / 4; }

/* ---------- ЗВЁЗДЫ ---------- */
.stars { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.stars-big { display: flex; flex-direction: column; line-height: 1; }
.stars-big b { font: 800 38px var(--f-display); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars-big span { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stars-col { display: flex; flex-direction: column; gap: 6px; }
.stars-row { display: flex; gap: 2px; }
.star { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--line); transition: transform .25s var(--spring), color .15s; line-height: 0; }
.star svg { width: 30px; height: 30px; fill: transparent; stroke: currentColor; stroke-width: 1.6; }
.star:hover { transform: scale(1.2) rotate(-8deg); }
.star.on { color: var(--accent3); }
.star.on svg { fill: currentColor; }
.stars-row.mine .star.on { color: var(--accent2); }
.stars.locked .star { cursor: default; }
.stars.busy { opacity: .6; pointer-events: none; }
.stars-info { margin: 0; font-size: 13px; color: var(--muted); }

/* ---------- РЕДАКТОР ---------- */
.kindt { font-family: var(--f-body); font-weight: 700; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); padding-inline: 10px; }
.kindt.do { color: var(--accent2); border-style: dashed; border-color: var(--accent2); }

/* ---------- ГЛАВНАЯ ---------- */
.page.home { position: relative; counter-reset: sec; }
/* меняющееся слово в заголовке */
.hero h1 .rot { display: inline-block; font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; transition: transform .32s var(--ease), opacity .32s, filter .32s; }
.hero h1 .rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .09em; border-radius: 9px; background: var(--grad); opacity: .5; }
.hero h1 .rot.out { transform: translateY(-40%) rotateX(70deg); opacity: 0; filter: blur(5px); }
/* шары, догоняющие курсор */
.hero { --ox: 70%; --oy: 30%; }
.orb { position: absolute; z-index: 0; width: 46vmin; height: 46vmin; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.orb.o1 { left: var(--ox); top: var(--oy); translate: -50% -50%; background: var(--accent); }
.orb.o2 { left: calc(100% - var(--ox)); top: calc(100% - var(--oy)); translate: -50% -50%; background: var(--accent2); opacity: .32; width: 36vmin; height: 36vmin; }
.hero-in, .hero .paths { position: relative; z-index: 1; }
.hero .paths { position: absolute; }
/* нумерация разделов */
.sec-in { counter-increment: sec; }
.sec-head h2::before { content: "№ " counter(sec, decimal-leading-zero); display: block; margin-bottom: 8px; font: 700 12px var(--f-mono); letter-spacing: .14em; color: var(--accent2); }
/* бенто-жанры */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 14px; }
.bt { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px; border-radius: 24px; color: #fff; text-decoration: none; isolation: isolate;
  background: linear-gradient(135deg, var(--c1), var(--c2)); transition: transform .5s var(--spring), box-shadow .4s; }
.bt.big { grid-column: span 2; grid-row: span 2; padding: 24px; }
.bt b { font: 700 18px/1.1 var(--f-display); letter-spacing: -.03em; }
.bt.big b { font-size: clamp(28px, 4vw, 44px); }
.bt small { opacity: .85; font-size: 13px; margin-top: 4px; }
.bt svg { position: absolute; inset: -10% -5% auto auto; width: 90%; height: auto; opacity: .38; z-index: -1; transition: transform .8s var(--ease); }
.bt svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.bt svg circle { fill: #fff; }
.bt:hover { transform: translateY(-6px) rotate(-1deg) scale(1.02); box-shadow: 0 26px 44px -24px var(--c1); }
.bt:hover svg { transform: scale(1.12) rotate(4deg); }
.bt.all { background: transparent; border: 2px dashed var(--line); color: var(--ink); align-items: center; justify-content: center; text-align: center; }
.bt.all:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; } .bt.big { grid-row: span 2; } }
/* рейтинг в топах */
.toprow .rpill.flat, .acard .rpill.flat { flex: none; padding: 3px 9px 3px 7px; font-size: 12.5px; }
.acard .rpill { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .hero h1 .rot { transition: none; } .orb { display: none; } }

/* ---------- ПОДВАЛ ---------- */
.foot { display: block; max-width: 1100px; padding: 40px 16px 30px; margin-top: 56px; font-size: 14px; }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-brand p { margin: 10px 0 0; max-width: 28ch; color: var(--muted); line-height: 1.5; }
.foot-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.foot-col strong { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.foot-col a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; transition: color .2s, transform .25s var(--spring); }
.foot-col a:hover { color: var(--accent); transform: translateX(3px); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- ПРАВИЛА И ДОКУМЕНТЫ ---------- */
.page.wide { max-width: 1100px; }
.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.legal-toc strong { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.legal-toc a { color: var(--muted); text-decoration: none; padding: 5px 8px; border-radius: 9px; transition: background .2s, color .2s; }
.legal-toc a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.legal-docs { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.legal-docs a.on { background: var(--grad); color: #fff; }
.legal-body h1 { font: 700 clamp(28px, 4.6vw, 44px)/1.05 var(--f-display); letter-spacing: -.035em; margin: 0 0 8px; }
.legal-date { margin: 0 0 14px; color: var(--muted); font: 500 12px var(--f-mono); }
.legal-intro { font-size: 18px; line-height: 1.55; margin: 0 0 26px; }
.legal-sec { scroll-margin-top: 96px; padding-top: 6px; margin-bottom: 28px; }
.legal-sec h2 { font: 700 21px/1.2 var(--f-display); letter-spacing: -.02em; margin: 0 0 10px; }
.legal-sec p, .legal-sec li { line-height: 1.62; }
.legal-sec ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-sec:target h2 { color: var(--accent); }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; gap: 18px; } .legal-toc { position: static; } }

/* ---------- РЕГИСТРАЦИЯ ---------- */
.namehint.ok { color: var(--ok); } .namehint.no { color: var(--bad); }
.chk.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.chk.agree input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.in.code { font: 700 32px var(--f-mono); letter-spacing: .4em; text-align: center; padding: 14px 8px; }
.codecard { display: flex; flex-direction: column; gap: 12px; }

/* ---------- ПРОВЕРКА ИСТОРИЙ ---------- */
.seg { display: inline-flex; border-radius: 14px; border: 1.5px solid var(--line); overflow: hidden; align-self: flex-start; }
.segb { border: 0; background: var(--surface); color: var(--muted); padding: 10px 16px; font: 600 14px var(--f-body); cursor: pointer; transition: background .2s, color .2s; }
.segb + .segb { border-left: 1.5px solid var(--line); }
.segb.yes.on { background: var(--ok); color: #fff; } .segb.no.on { background: var(--bad); color: #fff; }
.review-item { display: flex; flex-direction: column; gap: 10px; }
.ltabs.sub { margin-bottom: 4px; }
.wstat.review { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.monetline { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.monetline.yes { border-color: var(--ok); } .monetline.no { border-color: var(--bad); } .monetline.wait { border-color: var(--warn); }

/* ---------- ПОДДЕРЖКА ---------- */
.supportform { display: flex; flex-direction: column; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ticket-text { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- ТАРИФЫ ---------- */
.plans-head h1 { margin-bottom: 6px; }
.periods { align-self: flex-start; }
.periods .segb { display: inline-flex; gap: 8px; align-items: center; }
.periods .segb.on { background: var(--grad); color: #fff; }
.save { font: 700 11px var(--f-mono); font-style: normal; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.periods .segb.on .save { background: rgba(255,255,255,.25); color: #fff; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; margin-top: 8px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 28px; border: 1.5px solid var(--line); background: var(--surface); transition: transform .4s var(--spring), box-shadow .3s; }
.plan:hover { transform: translateY(-4px); }
.plan.hot { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: var(--glow); }
.plan.soon { opacity: .7; }
.plan-badge { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 99px; background: var(--grad); color: #fff; font: 700 12px var(--f-body); }
.plan h2 { font: 700 26px var(--f-display); letter-spacing: -.03em; margin: 0; }
.plan-tag { margin: 0; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.plan-price b { font: 800 44px/1 var(--f-display); letter-spacing: -.04em; }
.plan-price span { color: var(--muted); }
.plan-total { margin: 0; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-perks { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-perks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.plan-perks svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.plans-note { text-align: center; }
.receipt { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 4px 0; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line); }
.receipt dt { color: var(--muted); } .receipt dd { margin: 0; font-weight: 700; text-align: right; }
.checkout { display: flex; flex-direction: column; gap: 14px; }
.plancard h2 { font: 700 24px var(--f-display); letter-spacing: -.03em; }
.home-plus { max-width: 1100px; margin: 0 auto; padding: 60px 16px 0; }
.home-plus-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 30px; border-radius: 28px; color: #fff; background: var(--grad); box-shadow: var(--glow); }
.home-plus-in h2 { font: 700 clamp(22px, 3.4vw, 32px) var(--f-display); letter-spacing: -.03em; margin: 0 0 4px; }
.home-plus-in p { margin: 0; opacity: .92; }
.home-plus-in .btn { background: #fff; color: var(--accent); box-shadow: none; }

/* ---------- ПОПУЛЯРНОЕ ---------- */
.sec-sub { margin: -14px 0 22px; color: var(--muted); max-width: 60ch; }
.grid.popular { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px 16px; }
@media (min-width: 1000px) { .grid.popular { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999px) { .grid.popular { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid.popular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } }
.fc-rank { position: absolute; left: 10px; top: 6px; z-index: 3; font: 800 38px/1 var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.6px rgba(255,255,255,.95); text-shadow: 0 4px 16px rgba(10,6,30,.35); pointer-events: none; }
.fcard:nth-child(-n+3) .fc-rank { color: #fff; -webkit-text-stroke: 0; }

.plans-grid.periods3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
.plan-grow { flex: 1; }
.perks-box { margin-top: 26px; padding: 26px 28px; border-radius: 28px; border: 1.5px solid var(--line); background: var(--surface); }
.perks-box h2 { font: 700 22px var(--f-display); letter-spacing: -.03em; margin: 0 0 12px; }
.perks-box .plan-perks { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }

/* ---------- рекомендации ---------- */
.recs-sec { width: 100%; max-width: none; padding: 34px 0 0; margin: 0; }
.recs-sec .sec-head h2::before { display: none; }
.recs-sec .sec-head { margin-bottom: 14px; }
.recs-sec .sec-sub { margin: 0 0 20px; }
.recs-sec .sec-head h2 { font: 700 clamp(22px, 3vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; margin: 0; }
.rec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rec .why { margin: 0; font: 600 12px/1.3 var(--f-body); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rec .why::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.rec .why.follow::before { background: var(--accent2); } .rec .why.hot::before { background: var(--accent3); } .rec .why.new::before { background: var(--ok); }
.rec-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 16px; border: 1px dashed var(--line); background: var(--surface); }
.rec-hint p { margin: 0; color: var(--muted); flex: 1 1 260px; }
.rec-how { margin-top: 40px; max-width: 70ch; }

/* ---------- монетизация в кабинете ---------- */
.money-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
@media (max-width: 640px) { .money-top { grid-template-columns: 1fr; } }
.money-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.money-card.main { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 18px 40px -22px rgba(162,31,58,.6); }
.money-lbl { font: 600 12px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.money-sum { font: 700 clamp(28px, 5vw, 40px)/1.05 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-card:not(.main) .money-sum { color: var(--accent); }
.money-hint { margin: 0; font-size: 13px; opacity: .85; }
.money-card:not(.main) .money-hint { color: var(--muted); opacity: 1; }
.money-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.money-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0 22px; }
.money-kpis .kpi { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.money-kpis .kpi b { font: 700 20px var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.money-kpis .kpi span { font-size: 12.5px; color: var(--muted); }
.tbl-wrap { overflow-x: auto; margin: 0 -2px; }


.money-how { margin-top: 22px; }

.page.mid.dashw { max-width: 920px; }

.money-stories { display: grid; gap: 10px; }
.money-story { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; min-width: 0; }
.ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ms-title { font: 700 16px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.ms-title:hover { color: var(--accent); }
.ms-sum { font: 700 16px var(--f-display); color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px 12px; margin: 0; }
.ms-stats div { min-width: 0; }
.ms-stats dt { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.ms-stats dd { margin: 2px 0 0; font: 600 15px var(--f-body); font-variant-numeric: tabular-nums; }

.money-hist { display: grid; gap: 8px; }
.mh-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: baseline; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.mh-m { text-transform: capitalize; font-weight: 600; }
.mh-c { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mh-s { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 420px) { .mh-row { grid-template-columns: 1fr auto; } .mh-c { grid-row: 2; grid-column: 1 / -1; } }

/* сенсорные экраны: без 3D-переворота (текст не зеркалится), плавная смена сторон */
@media (hover: none), (max-width: 520px) {
  .fcard { perspective: none; }
  .fc-in, .fcard:hover .fc-in, .fcard:focus-visible .fc-in, .fcard.flipped .fc-in { transform: none !important; transform-style: flat; }
  .fc-front, .fc-back { transition: opacity .25s; }
  .fc-back { transform: none; opacity: 0; pointer-events: none; padding: 12px 11px 10px; gap: 6px; }
  .fc-front { opacity: 1; }
  .fcard.flipped .fc-back { opacity: 1; pointer-events: auto; }
  .fcard.flipped .fc-front { opacity: 0; }
  .fcard:hover .fc-back, .fcard:focus-visible .fc-back { opacity: 0; }
  .fcard:hover .fc-front, .fcard:focus-visible .fc-front { opacity: 1; }
  .fcard.flipped:hover .fc-back, .fcard.flipped:focus-visible .fc-back { opacity: 1; }
  .fcard.flipped:hover .fc-front, .fcard.flipped:focus-visible .fc-front { opacity: 0; }
  .fc-genres { flex-wrap: wrap; gap: 4px; }
  .fc-genres span { font-size: 9.5px; padding: 2px 6px; max-width: 100%; overflow-wrap: anywhere; }
  .fc-back .badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .fc-back .badge { font-size: 10px; padding: 1px 7px; }
  .fc-front .cover .gtag { display: none; }
  .fc-back h2 { font-size: 15px; -webkit-line-clamp: 2; margin: 2px 0 0; }
  .fc-back .blurb { font-size: 12.5px; line-height: 1.4; display: block; -webkit-line-clamp: unset; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-right: 2px; }
  .fc-foot { padding-top: 6px; gap: 4px; font-size: 11px; }
}