/* ══════════ ТОКЕНЫ ══════════ */
:root {
  --r-xs: 9px;
  --r-sm: 13px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --top-h: 66px;
  --maxw: 1260px;
  --fs-read: 24px;
  --zh: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --brush: 'Ma Shan Zheng', 'Noto Serif SC', cursive;
  --ui: 'Manrope', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp: 'Unbounded', 'Manrope', system-ui, sans-serif;

  /* Шкала слоёв: было 18 разнобойных z-index (0,1,2,3,4,30,40,60,70,80,85,90,200,210,220,260,300,400) */
  --z-base: 0;   --z-sticky: 30;  --z-rbar: 60;   --z-header: 80;
  --z-panel: 200; --z-mask: 300;  --z-modal: 400; --z-pop: 500; --z-toast: 600;

  /* Шкала отступов (в коде встречались 5px/6px/7px/9px/10px/11px/12px/14px/16px/18px/22px) */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 9px; --sp-4: 12px; --sp-5: 16px; --sp-6: 22px;
  --gap-sm: 9px; --gap-md: 12px; --gap-lg: 18px;

  /* Длительности переходов */
  --t-fast: .15s; --t-base: .25s; --t-slow: .5s;
}

html[data-theme="dark"] {
  --bg: #0f1218;
  --bg2: #151a23;
  --surf: rgba(255, 255, 255, .035);
  --surf2: #171c26;
  --surf3: #202734;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .045);
  /* непрозрачный цвет линий веток комментариев: сегменты линии наслаиваются
     друг на друга (стыки между карточками), и при прозрачном цвете стыки
     были видны как тёмные полосы. Здесь — сплошной цвет под тон фона. */
  --thread-line: #3a414c;
  --tx: #ecebe5;
  --tx2: #98a1af;
  --tx3: #6c7482;
  --gold: #e3b469;
  --gold-d: #a97c33;
  --cin: #e2603f;
  --cin2: #ff8363;
  --jade: #54c39a;
  --pri-fg: var(--cin2);   /* текст/иконка .btn.pri в тёмной теме — яркий коралл */
  --star-sat: 68%;
  --star-lit: 58%;
  /* RGB-тройки: позволяют писать rgb(var(--gold-rgb) / .12) вместо 23 рукописных rgba() */
  --gold-rgb: 227 180 105;
  --cin-rgb: 226 96 63;
  --jade-rgb: 84 195 154;
  --paper: #ece2cc;
  --paper2: #ded1b4;
  --inktxt: #2c2519;
  --inkmut: #8a6b3f;
  --sh-s: 0 2px 10px rgba(0, 0, 0, .3);
  --sh-m: 0 16px 36px rgba(0, 0, 0, .36);
  --sh-l: 0 34px 80px rgba(0, 0, 0, .5);
  --w1: rgb(var(--cin-rgb) / .13);
  --w2: rgb(var(--gold-rgb) / .11);
  --w3: rgb(var(--jade-rgb) / .07);
  --grain: .5;
  --drift: rgba(200, 200, 210, .055);
}

html[data-theme="light"] {
  --bg: #f6f1e6;
  --bg2: #fdfaf3;
  --surf: rgba(255, 255, 255, .62);
  --surf2: #fffdf8;
  --surf3: #f2ecdf;
  --line: rgba(58, 44, 26, .13);
  --line2: rgba(58, 44, 26, .07);
  /* непрозрачный аналог --line для линий веток (см. тёмную тему) */
  --thread-line: #d5cdba;
  --tx: #2c2721;
  --tx2: #6e6659;
  --tx3: #98907f;
  --gold: #d69a1f;          /* ярче и живее, как в тёмной теме (был приглушённый #a2732a) */
  --gold-d: #855d1c;
  --cin: #c9432a;
  --cin2: #e2603f;
  --jade: #2e8b65;
  --pri-fg: var(--cin);     /* текст .btn.pri в светлой теме — глубже, чтобы читалось на бумаге */
  --star-sat: 64%;
  --star-lit: 50%;
  --gold-rgb: 214 154 31;
  --cin-rgb: 201 67 42;
  --jade-rgb: 46 139 101;
  --paper: #fffaf0;
  --paper2: #f7efdd;
  --inktxt: #2a2318;
  --inkmut: #9a7a4c;
  --sh-s: 0 2px 8px rgba(90, 68, 34, .07);
  --sh-m: 0 16px 34px rgba(90, 68, 34, .11);
  --sh-l: 0 30px 64px rgba(90, 68, 34, .15);
  --w1: rgba(201, 67, 42, .09);
  --w2: rgba(162, 115, 42, .12);
  --w3: rgba(46, 139, 101, .07);
  --grain: .28;
  --drift: rgba(140, 100, 50, .13);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

/* Элементы форм наследуют брендовый шрифт (иначе button/select/input
   рендерились системным — отсюда «разнобой» и «некрасивый» русский). */
button,
input,
textarea,
select {
  font-family: inherit
}

/* Chrome-автозаполнение не выбеливает тёмные поля */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surf2) inset;
  box-shadow: 0 0 0 1000px var(--surf2) inset;
  -webkit-text-fill-color: var(--tx);
  caret-color: var(--tx);
  transition: background-color 99999s ease-out
}

textarea {
  resize: none;
}

html {
  -webkit-text-size-adjust: 100%
}

body {
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tx);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease)
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer
}

input,
select,
textarea {
  font: inherit;
  color: inherit
}

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

::selection {
  background: rgb(var(--cin-rgb) / .35)
}

:focus { outline: none; }
:focus-visible { outline: none; }

/* кнопки — мягкая подсветка вместо контура */
.btn:focus-visible,
.ico:focus-visible,
.tbtn:focus-visible,
.chip3:focus-visible,
.seg button:focus-visible,
.mainnav button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .45);
}

/* у полей и селектов — свой стиль, без outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* фокус у .inp уже рисуется через box-shadow в .inp:focus — оставляем как есть */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline-offset: 2px;     /* ← радиус не подменяется, наследует свой */
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 160, .35);
  border-radius: 9px;
  border: 3px solid transparent;
  background-clip: padding-box
}

::-webkit-scrollbar-track {
  background: transparent
}

.zh {
  font-family: var(--zh)
}

.brush {
  font-family: var(--brush);
  font-weight: 400
}

/* ══════════ ФОН ══════════ */
.amb,
.grain,
.drift {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0
}

.amb {
  background:
    radial-gradient(900px 620px at 88% -8%, var(--w2), transparent 62%),
    radial-gradient(760px 560px at -6% 104%, var(--w1), transparent 58%),
    radial-gradient(1200px 800px at 45% 45%, var(--w3), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg));
  transition: background .5s var(--ease)
}

.grain {
  opacity: var(--grain);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
}

.drift {
  overflow: hidden
}

.drift span {
  position: absolute;
  bottom: -16%;
  font-family: var(--brush);
  color: var(--drift, rgba(200, 200, 210, .055));
  animation: driftUp linear infinite
}

@keyframes driftUp {
  0% {
    transform: translateY(0) rotate(-4deg);
    opacity: 0
  }

  10% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  100% {
    transform: translateY(-122vh) rotate(5deg);
    opacity: 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .drift span {
    display: none
  }
}

/* ══════════ ШАПКА ══════════ */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 18, 24, .93);
  border-bottom: 1px solid var(--line2);
  transition: box-shadow .3s, background .3s, transform .28s var(--ease)
}

/* РАУНД 36: на главной при скролле вниз шапка и нижняя навигация уезжают
   (шторки не мешают чтению), при скролле вверх — возвращаются.
   Классы ставит скролл-обработчик в ui.js. transform вместо display:none —
   без рывков верстки и с плавным выездом. */
.top.hide {
  transform: translateY(-100%);
  box-shadow: none
}

html[data-theme="light"] .top {
  background: rgba(246, 241, 230, .8)
}

.top.small {
  box-shadow: var(--sh-s)
}

.top-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(12px, 2.4vw, 26px);
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: height .3s var(--ease)
}

.top.small .top-in {
  height: 56px
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none
}

.seal {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--zh);
  font-weight: 900;
  font-size: 25px;
  color: #fff5e9;
  background: linear-gradient(150deg, var(--cin2), var(--cin));
  box-shadow: 0 5px 16px rgb(var(--cin-rgb) / .4), inset 0 0 0 1.5px rgba(255, 255, 255, .25);
  transition: transform .45s var(--pop)
}

/* На бумаге печать легче: без почти-чёрного бордо, мягче тень — чтобы не
   выглядела «тяжёлым» пятном в светлой теме. */
html[data-theme="light"] .seal {
  background: linear-gradient(150deg, var(--cin2), var(--cin));
  box-shadow: 0 3px 10px rgb(var(--cin-rgb) / .26), inset 0 0 0 1.5px rgba(255, 255, 255, .3)
}

.brand:hover .seal {
  transform: rotate(-8deg) scale(1.07)
}

.top.small .seal {
  width: 36px;
  height: 36px;
  font-size: 21px
}

.brand-tx {
  text-align: left;
  line-height: 1.15
}

.brand-tx b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 15px
}

.brand-tx small {
  display: block;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-top: 3px
}

.beta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 9px;
  border: 1px solid var(--gold);
  color: var(--gold);
  vertical-align: 2px
}

.mainnav {
  display: flex;
  gap: 2px;
  margin-left: 18px
}

.mainnav button {
  position: relative;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx2);
  transition: color .2s, background .2s, transform .2s var(--ease)
}

.mainnav button:hover {
  color: var(--tx);
  background: var(--surf);
  transform: translateY(-1px)
}

.mainnav button.on {
  color: var(--tx)
}

.mainnav button.on::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: navIn .4s var(--ease)
}

@keyframes navIn {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative
}

.ico {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surf);
  border: 1px solid var(--line2);
  color: var(--tx2);
  transition: .22s var(--ease)
}

.ico:hover {
  color: var(--tx);
  background: var(--surf3);
  transform: translateY(-2px);
  box-shadow: var(--sh-s)
}

.ico.on {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .45);
  background: rgb(var(--gold-rgb) / .12)
}

.ico svg {
  width: 19px;
  height: 19px
}

.ico .cnt {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--cin);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: none;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg)
}

.ico .cnt.on {
  display: grid
}

.wide-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 14px;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800
}

.wide-ico .zh {
  font-size: 15px
}

.theme-wrap {
  display: flex;
  align-items: center;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
  transition: .22s var(--ease)
}

.theme-wrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-s)
}

.theme-wrap .ico {
  border: none;
  background: none;
  border-radius: 0;
  width: 38px
}

.theme-wrap .ico:hover {
  background: var(--surf3);
  transform: none
}

.theme-wrap .caret {
  width: 22px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--tx3);
  border-left: 1px solid var(--line2)
}

.theme-wrap .caret:hover {
  color: var(--gold);
  background: var(--surf3)
}

.av {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--zh);
  font-weight: 900;
  font-size: 17px;
  background: linear-gradient(150deg, var(--avc, #e3b469), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), var(--sh-s)
}

.av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s
}

.av.has-img img {
  opacity: 1
}

.av.lg {
  width: 62px;
  height: 62px;
  font-size: 26px;
  border-radius: 19px
}

.me-btn {
  padding: 0;
  border-radius: 13px;
  transition: transform .25s var(--pop)
}

.me-btn:hover {
  transform: translateY(-2px) scale(1.04)
}

.scroll-prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--cin));
  opacity: 0;
  transition: width .12s linear
}

.scroll-prog.on {
  opacity: 1
}

/* ══════════ ПОПОВЕРЫ ══════════ */
.pop-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 252px;
  z-index: 80;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--sh-l);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .28s var(--pop), visibility .22s
}

.pop-panel.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible
}

.pp-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 6px
}

.pp-head b {
  display: block;
  font-size: 14px
}

.pp-lvl {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold);
  font-weight: 700
}

.pp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx2);
  text-align: left;
  transition: .16s
}

.pp-item:hover {
  background: var(--surf3);
  color: var(--tx)
}

.pp-item svg {
  width: 16px;
  height: 16px;
  flex: none
}

.pp-sep {
  height: 1px;
  background: var(--line2);
  margin: 6px 4px
}

.pp-note {
  padding: 9px 11px;
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.5
}

.pp-sec {
  padding: 9px 11px 5px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800;
  display: flex;
  align-items: center
}

.seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surf3);
  border-radius: 11px;
  margin: 0 8px 8px
}

.seg button {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
  transition: .2s
}

.seg button.on {
  background: var(--surf2);
  color: var(--tx);
  box-shadow: var(--sh-s)
}

.notif {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surf);
  margin-bottom: 6px;
  text-align: left;
  transition: .18s;
  border-left: 2px solid transparent
}

.notif:hover {
  background: var(--surf3);
  transform: translateX(2px)
}

.notif.unread {
  border-left-color: var(--gold)
}

.notif b {
  display: block;
  font-size: 13px;
  margin-bottom: 3px
}

.notif p {
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.45
}

.notif time {
  display: block;
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 5px
}

/* ══════════ КАРКАС ══════════ */
main {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) clamp(12px, 2.4vw, 26px) 90px
}

.view {
  display: none
}

.view.on {
  display: block;
  /* fill-mode НЕ both: иначе после анимации остаётся computed
     transform (identity), а он создаёт containing block для
     position:fixed потомков — полноэкранный чат застревал в боксе
     секции вместо вьюпорта. */
  animation: viewIn .5s var(--ease)
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0)*55ms)
}

.reveal.in {
  opacity: 1;
  transform: none
}

/* ══════════ КНОПКИ ══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 800;
  border: 0;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .24s var(--ease), box-shadow .24s, background .2s, color .2s;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

.btn svg {
  width: 16px;
  height: 16px
}

.btn:active {
  transform: scale(.96)
}

.btn.pri {
  /* Контурная, полупрозрачная: без сплошной заливки. Акцент держится на
     обводке + лёгком тонированном фоне + цветном тексте/иконке. Гамма — из
     токенов темы (--pri-fg + киноварь), поэтому у каждой темы своя. */
  background: rgb(var(--cin-rgb) / .12);
  border: 1.5px solid rgb(var(--cin-rgb) / .55);
  color: var(--pri-fg, var(--cin2));
  text-shadow: none;
  box-shadow: 0 1px 2px rgb(var(--cin-rgb) / .08);
}

/* При наведении заполняется киноварью — как кнопка «Перечитать» (.go) в
   карточках: фон сплошной, текст и иконка белеют. */
.btn.pri:hover {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px rgb(var(--cin-rgb) / .26);
}

.btn.gho {
  border-color: var(--line);
  background: var(--surf);
  color: var(--tx)
}

.btn.gho:hover {
  border-color: rgb(var(--gold-rgb) / .55);
  color: var(--gold);
  transform: translateY(-2px)
}

.btn.jade {
  border-color: rgb(var(--jade-rgb) / .45);
  color: var(--jade);
  background: rgb(var(--jade-rgb) / .1)
}

.btn.jade:hover {
  background: var(--jade);
  color: #06231a;
  transform: translateY(-2px)
}

/* Призрачная кнопка с постоянным золотым контуром («Слушать» на истории
   недели, кнопки-флажки «Пожаловаться»). Тот же жёлтый, что и прежде на
   hover у .btn.gho, — но теперь всегда виден. */
.btn.gho.gold {
  border: 1px solid rgb(var(--gold-rgb) / .5);
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .07)
}

.btn.gho.gold:hover {
  border-color: rgb(var(--gold-rgb) / .85);
  background: rgb(var(--gold-rgb) / .15);
  color: var(--gold);
  transform: translateY(-2px)
}

.btn.lg {
  padding: 15px 26px;
  font-size: 14.5px;
  border-radius: 15px
}

.btn.sq {
  width: 46px;
  padding: 0;
  flex: none
}

/* заливка сердечка в избранном */
.btn.sq.on svg,
.btn.gho.on svg,
#weekFav.on svg,
#stFav.on svg,
.card-foot .go svg,
.pop-act button.saved svg {
  fill: currentColor;
  stroke: currentColor;
}

.btn.on {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff
}

html[data-theme="light"] .tbtn.on {
  background: linear-gradient(140deg, #f0c878, #d69b32);
  border-color: #c89029;
  color: #3a2705;
  box-shadow: 0 2px 10px rgba(200, 140, 40, .25);
}
html[data-theme="light"] .tbtn.on:hover {
  filter: brightness(1.05);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surf);
  border: 1px solid var(--line2);
  color: var(--tx2)
}

/* Жанровые плашки: сплошной фон + белый текст давали плохой контраст на
   светлых жанрах («Повседневность»). Теперь тонированный фон и текст,
   подмешанный к основному тексту темы, — читается в обеих темах. */
.chip.g {
  color: color-mix(in srgb, var(--gc, #d8a24a) 55%, var(--tx));
  background: color-mix(in srgb, var(--gc, #d8a24a) 16%, transparent);
  border-color: color-mix(in srgb, var(--gc, #d8a24a) 45%, transparent)
}

.chip.l {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .42);
  background: rgb(var(--gold-rgb) / .1)
}

.chip.j {
  color: var(--jade);
  border-color: rgb(var(--jade-rgb) / .4);
  background: rgb(var(--jade-rgb) / .1)
}

.chip.link {
  cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s
}

.chip.link:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-s)
}

.chip3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surf);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx2);
  cursor: pointer;
  transition: .18s var(--ease);
  user-select: none
}

.chip3:hover {
  color: var(--tx);
  transform: translateY(-2px);
  border-color: rgb(var(--gold-rgb) / .4)
}

.chip3.inc {
  color: var(--jade);
  border-color: rgb(var(--jade-rgb) / .5);
  background: rgb(var(--jade-rgb) / .12)
}

.chip3.exc {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .45);
  background: rgb(var(--cin-rgb) / .1);
  text-decoration: line-through
}

/* ══════════ ОБЛОЖКИ / АВАТАРЫ (заготовки под загрузку) ══════════ */
.art {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  background: linear-gradient(155deg, var(--c1, #3a4a63), var(--c2, #1d2735))
}

.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .55s var(--ease), transform .7s var(--ease)
}

.art.has-img img {
  opacity: 1
}

.art:hover img {
  transform: scale(1.09)
}

.art-motif {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 62%
}

.art-motif svg {
  width: 100%;
  height: 100%;
  display: block
}

.art-glyph {
  position: absolute;
  top: -.16em;
  right: -.06em;
  font-family: var(--brush);
  line-height: 1;
  font-size: clamp(90px, 15vw, 160px);
  color: rgba(255, 255, 255, .16);
  pointer-events: none;
  transition: transform .8s var(--ease)
}

.art:hover .art-glyph {
  transform: translateY(6px) rotate(-4deg)
}

.art-vig {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .14), transparent 55%)
}

.art-ph {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  background: rgba(10, 12, 16, .42);
    border: 1px dashed rgba(255, 255, 255, .3);
  pointer-events: none
}

.art.has-img .art-ph,
.art.has-img .art-glyph,
.art.has-img .art-motif {
  display: none
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed rgb(var(--gold-rgb) / .45);
  border-radius: var(--r-md);
  padding: 24px 18px;
  text-align: center;
  color: var(--tx2);
  background: rgb(var(--gold-rgb) / .05);
  cursor: pointer;
  transition: .22s var(--ease)
}

.dropzone:hover {
  border-color: var(--gold);
  color: var(--tx);
  transform: translateY(-2px)
}

.dropzone b {
  font-size: 13px;
  color: var(--tx)
}

.dropzone small {
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 330px
}

.dropzone svg {
  width: 20px;
  height: 20px;
  color: var(--gold)
}

/* ══════════ ИСТОРИЯ НЕДЕЛИ ══════════ */
.week {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 34px);
  align-items: stretch;
  padding: clamp(13px, 1.8vw, 20px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--sh-m);
  overflow: hidden;
  margin-bottom: clamp(16px, 2.6vw, 28px);
  background: linear-gradient(120deg, rgb(var(--cin-rgb) / .13), transparent 46%), linear-gradient(300deg, rgb(var(--gold-rgb) / .12), transparent 52%), var(--surf)
}

/* В тёмной теме --surf почти прозрачный — плашка «выглядела» сквозной.
   Даём ей плотную подложку --surf2, сохраняя цветные тон-градиенты. */
html[data-theme="dark"] .week {
  background: linear-gradient(120deg, rgb(var(--cin-rgb) / .16), transparent 46%), linear-gradient(300deg, rgb(var(--gold-rgb) / .14), transparent 52%), var(--surf2)
}

.week-art {
  position: relative;
  perspective: 900px
}

.week-art .art {
  aspect-ratio: 3/4;
  max-height: 420px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-l);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .5s var(--ease)
}

.week-art .art-glyph {
  font-size: clamp(84px, 12vw, 150px)
}

.week-seal {
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 3;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
  font-size: 16px;
  color: #fff6ea;
  background: linear-gradient(150deg, var(--cin2), var(--cin));
  box-shadow: 0 10px 26px rgb(var(--cin-rgb) / .45), inset 0 0 0 2px rgba(255, 255, 255, .24);
  animation: stamp .8s var(--pop) both .35s
}

@keyframes stamp {
  0% {
    transform: scale(2.1) rotate(-22deg);
    opacity: 0
  }

  60% {
    transform: scale(.93) rotate(4deg);
    opacity: 1
  }

  100% {
    transform: scale(1) rotate(-6deg)
  }
}

.week-body {
  position: relative;
  z-index: 2;
  min-width: 0;
  /* колонка на всю высоту обложки: «История недели» прижата к верху,
     кнопки — к низу (нижняя граница вровень с низом обложки) */
  display: flex;
  flex-direction: column
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx2);
  margin-bottom: 9px
}

.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade)
}

/* кольцо — transform/opacity (композит), не box-shadow (paint каждый кадр) */
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(var(--jade-rgb) / .5);
  animation: pulseRing 2.4s var(--ease) infinite
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: .7
  }

  70%, 100% {
    transform: scale(3.2);
    opacity: 0
  }
}

.week-zh {
  font-family: var(--zh);
  font-weight: 900;
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.04;
  display: inline-block
}

.brushline {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 14px;
  margin-top: 2px;
  overflow: visible
}

.brushline path {
  fill: none;
  stroke: var(--cin2);   /* розовая кисть — как просили */
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .8;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.5s var(--ease) .5s forwards
}

@keyframes draw {
  to {
    stroke-dashoffset: 0
  }
}

.week-ru {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--gold);
  margin: 7px 0 8px
}

.week-desc {
  color: var(--tx2);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 12px
}

.week-quote {
  margin: 0 0 12px;
  padding: 9px 14px;
  border-left: 2px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgb(var(--gold-rgb) / .07)
}

.week-quote .zh {
  font-family: var(--zh);
  font-size: 15.5px;
  font-weight: 700
}

.week-quote span {
  display: block;
  font-size: 12px;
  color: var(--tx2);
  margin-top: 3px
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px
}

.week-acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px
}

.week-facts {
  display: flex;
  gap: clamp(14px, 2.4vw, 26px);
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line2)
}

.fact b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1
}

.fact span {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-top: 5px
}

/* ══════════ ПРОДОЛЖИТЬ ══════════ */
.resume {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  width: 100%;
  text-align: left;
  margin-bottom: clamp(26px, 4vw, 40px);
  background: linear-gradient(100deg, rgb(var(--cin-rgb) / .15), rgb(var(--gold-rgb) / .08));
  border: 1px solid rgb(var(--cin-rgb) / .3);
  transition: transform .28s var(--ease), box-shadow .28s
}

.resume:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-m)
}

.resume .art {
  width: 64px;
  height: 80px;
  border-radius: 11px;
  flex: none
}

.resume .art-glyph {
  font-size: 48px;
  top: -4px;
  right: -2px
}

.resume-b {
  flex: 1;
  min-width: 0
}

.resume-b small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tx2);
  font-weight: 800;
  margin-bottom: 5px
}

.resume-b b {
  display: block;
  font-family: var(--zh);
  font-size: 19px;
  font-weight: 900
}

.resume-b span {
  display: block;
  font-size: 12.5px;
  color: var(--tx2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mini-prog {
  height: 4px;
  border-radius: 3px;
  background: rgba(150, 150, 160, .25);
  overflow: hidden;
  margin-top: 9px;
  max-width: 280px
}

.mini-prog i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--cin));
  transition: width .8s var(--ease)
}

/* ══════════ ВКЛАДКИ / СЕКЦИИ / РЕЛЬСЫ ══════════ */
.lib-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 26px;
  overflow-x: auto;
  scrollbar-width: none
}

.lib-tabs::-webkit-scrollbar {
  display: none
}

.lib-tab {
  position: relative;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tx3);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .25s, transform .25s var(--ease)
}

.lib-tab svg {
  width: 17px;
  height: 17px;
  transition: transform .5s var(--pop)
}

.lib-tab:hover {
  color: var(--tx);
  transform: translateY(-2px)
}

.lib-tab:hover svg {
  transform: rotate(-12deg) scale(1.14)
}

.lib-tab.on {
  color: var(--gold)
}

.lib-tab.on::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: navIn .45s var(--ease)
}

.pane {
  display: none
}

.pane.on {
  display: block;
  animation: viewIn .45s var(--ease) both
}

.sec {
  margin-bottom: clamp(28px, 4vw, 44px)
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.sec-head .zh {
  font-family: var(--brush);
  font-size: 24px;
  color: var(--gold);
  opacity: .85;
  line-height: 1
}

.sec-head h2 {
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase
}

.sec-head .hint {
  font-size: 12px;
  color: var(--tx3);
  font-weight: 600
}

.sec-head .right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center
}

.rail-wrap {
  position: relative;
  padding-inline: 48px   /* канавка под стрелки: 44px стрелка + 4px зазор до карточек */
}

.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 14px;
  scrollbar-width: none;
  cursor: grab
}

.rail::-webkit-scrollbar {
  display: none
}

.rail.drag {
  cursor: grabbing;
  scroll-snap-type: none
}

.rail.drag * {
  pointer-events: none
}

.rail>* {
  scroll-snap-align: start;
  flex: none
}

.rail-arr {
  position: absolute;
  top: calc(50% - 24px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  background: var(--surf2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-m);
  color: var(--tx);
  opacity: 0;
  pointer-events: none;
  transition: .24s var(--ease)
}

.rail-arr svg {
  width: 19px;
  height: 19px
}

.rail-arr.prev {
  left: 0
}

.rail-arr.next {
  right: 0
}

.rail-wrap:hover .rail-arr {
  opacity: 1;
  pointer-events: auto
}

.rail-arr:hover {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  transform: scale(1.09)
}

@media (hover:none) {
  .rail-arr {
    display: none
  }

  /* стрелок нет — канавка не нужна, рельса занимает всю ширину */
  .rail-wrap {
    padding-inline: 10px
  }
}

/* ══════════ КАРТОЧКА ══════════ */
.card {
  width: 288px;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .34s var(--ease), box-shadow .34s, border-color .34s
}

.card:hover {
  transform: translateY(-7px);
  /* мягкая тень по форме карточки (без «квадратного» ореола вокруг скруглений) */
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38), 0 4px 12px rgba(0, 0, 0, .22);
  border-color: rgb(var(--gold-rgb) / .34)
}

.card::before,
.card::after {
  border-radius: inherit
}

.card-art {
  position: relative;
  aspect-ratio: 16/10.5;
  flex: none
}

.card-art .art {
  position: absolute;
  inset: 0;
  border-radius: 0
}

.card-art .art-glyph {
  font-size: 110px
}

.card-badges {
  position: absolute;
  top: 11px;
  left: 11px;
  right: 11px;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none
}

/* Жанровая плашка НА ОБЛОЖКЕ: полупрозрачный тонированный фон сливался
   с артом и не читался. Здесь — плотная тёмная подложка с примесью цвета
   жанра и белый текст (как у .card-rate): читается на любой обложке. */
.card-badges .chip.g {
  color: #fff;
  background: color-mix(in srgb, var(--gc, #d8a24a) 45%, rgba(10, 12, 16, .88));
  border-color: rgba(255, 255, 255, .24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4)
}

.card-rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(10, 12, 16, .82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16)
}

.card-rate svg {
  width: 12px;
  height: 12px;
  color: var(--gold)
}

.card-b {
  padding: 16px 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1
}

.card-t h3 {
  font-family: var(--zh);
  font-size: 23px;
  font-weight: 900;
  line-height: 1.15
}

.card-ru {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold)
}

.card-desc {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px
}

.card-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.card-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line2)
}

.card-foot .row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px
}

.card-foot small {
  font-size: 11px;
  color: var(--tx3);
  white-space: nowrap;
  font-weight: 700
}

.card-foot .go {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgb(var(--cin-rgb) / .45);
  color: var(--cin2);
  background: rgb(var(--cin-rgb) / .08);
  transition: .24s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.card:hover .card-foot .go {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff
}

.card-foot .go svg {
  width: 15px;
  height: 15px;
  transition: transform .3s var(--ease)
}

.card:hover .card-foot .go svg {
  transform: translateX(3px)
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px
}

.grid .card {
  width: auto
}

.empty {
  padding: 30px;
  text-align: center;
  color: var(--tx3);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  line-height: 1.7
}

.empty .zh {
  display: block;
  font-family: var(--brush);
  font-size: 44px;
  color: rgb(var(--gold-rgb) / .4);
  margin-bottom: 8px
}

/* ══════════ БАНК СЛОВ / ГРАММАТИКА ══════════ */
.bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px
}

.inp {
  flex: 1;
  min-width: 200px;
  padding: 12px 15px;
  border-radius: 12px;
  background-color: var(--surf);      
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, color .2s;  
}

.inp:focus {
  outline: none;
  border-color: var(--gold);
  background-color: var(--surf2);     /* было background: var(--surf2) */
  box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .12);
}

select.inp {
  flex: none;
  min-width: 180px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--surf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  background-attachment: scroll;
  padding-right: 36px;
}
select.inp::-ms-expand { display: none; }

.bank-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surf2);
  border: 1px solid var(--line);
  margin-bottom: 9px;
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s
}

.bank-item:hover {
  transform: translateX(4px);
  border-color: rgb(var(--gold-rgb) / .34);
  box-shadow: var(--sh-s)
}

.bank-w {
  min-width: 78px;
  text-align: center;
  flex: none
}

.bank-w .py {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 3px
}

.bank-w .hz {
  font-family: var(--zh);
  font-size: 29px;
  font-weight: 900;
  cursor: pointer;
  transition: color .2s, transform .3s var(--pop)
}

.bank-w .hz:hover {
  color: var(--cin2);
  transform: scale(1.1)
}

.bank-mid {
  flex: 1;
  min-width: 0
}

.means {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.mchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 9px;
  background: var(--surf3);
  font-size: 12.5px;
  border: 1px solid var(--line2)
}

.mchip button {
  color: var(--tx3);
  font-size: 14px;
  line-height: 1
}

.mchip button:hover {
  color: var(--cin2)
}

.bank-uses {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 7px;
  font-weight: 700
}

.save-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 11px;
  border: 1px dashed rgb(var(--gold-rgb) / .48);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  transition: .24s var(--ease)
}

.save-btn svg {
  width: 14px;
  height: 14px
}

.save-btn:hover {
  background: rgb(var(--gold-rgb) / .12);
  border-style: solid;
  transform: translateY(-2px)
}

.save-btn.on {
  border-style: solid;
  border-color: var(--jade);
  color: var(--jade);
  background: rgb(var(--jade-rgb) / .12)
}

.gram-card {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 12px;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s
}

.gram-card:hover {
  border-color: rgb(var(--gold-rgb) / .32);
  transform: translateY(-2px);
  box-shadow: var(--sh-s)
}

.gram-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.gram-zh {
  font-family: var(--zh);
  font-size: 25px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.1
}

.gram-title {
  font-weight: 800;
  font-size: 15px
}

.gram-head .chip {
  margin-left: auto
}

.gram-struct {
  display: inline-block;
  font-family: var(--zh);
  font-size: 15px;
  color: var(--cin2);
  background: rgb(var(--cin-rgb) / .09);
  border-left: 2px solid var(--cin);
  padding: 8px 13px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 11px
}

.gram-exp {
  color: var(--tx2);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 74ch
}

.gram-ex {
  background: var(--surf);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 8px
}

.gram-ex .zh {
  font-family: var(--zh);
  font-size: 17px;
  line-height: 1.65
}

.gram-ex .py {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  margin: 4px 0 3px
}

.gram-ex .ru {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.55
}

.gtok {
  cursor: pointer;
  border-bottom: 1px dotted rgb(var(--gold-rgb) / .55);
  transition: color .18s
}

.gtok:hover {
  color: var(--gold)
}

/* ══════════ СТРАНИЦА ИСТОРИИ ══════════ */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tx2);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 20px;
  padding: 8px 13px;
  border-radius: 11px;
  transition: .22s var(--ease)
}

.back:hover {
  color: var(--gold);
  background: var(--surf);
  transform: translateX(-3px)
}

.back svg {
  width: 15px;
  height: 15px
}

.story-head {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: 34px
}

.story-cover {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--sh-l)
}

.story-cover .art {
  position: absolute;
  inset: 0;
  border-radius: 0
}

.story-cover .art-glyph {
  font-size: 190px
}

.story-info {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.story-info h1 {
  font-family: var(--zh);
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  margin: 12px 0 6px
}

.ru-t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 16px
}

.story-desc {
  color: var(--tx2);
  line-height: 1.75;
  font-size: 14.5px;
  margin-bottom: 20px;
  max-width: 70ch
}

.info-line {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap;
  padding: 18px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2)
}

.story-btns {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: auto
}

.rate-box {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--surf);
  border: 1px solid var(--line);
  margin-bottom: 22px
}

.stars {
  display: flex;
  gap: 4px;
  --star-off: color-mix(in srgb, var(--tx3) 42%, transparent)
}

.stars button {
  position: relative;
  font-size: 24px;
  line-height: 1;
  padding: 2px 1px;
  color: var(--star-off);
  /* У каждой звезды свой оттенок по позиции (--i): 1 — киноварь (красный),
     10 — золото (жёлтый). Градиент оценки «красный → жёлтый», приглушённый,
     из палитры темы. */
  --star-hue: calc(6 + var(--i, 0) * 5);
  transition: transform .18s var(--pop), color .18s, filter .18s;
}

.stars button:hover {
  transform: scale(1.22) translateY(-1px)
}

.stars button:active {
  transform: scale(.9)
}

/* Зажжённая звезда — ровный цвет по позиции + мягкое свечение тем же оттенком. */
.stars button.on {
  color: hsl(var(--star-hue) var(--star-sat) var(--star-lit));
  filter: drop-shadow(0 0 5px hsl(var(--star-hue) var(--star-sat) var(--star-lit) / .28));
}

/* Подсветка при наведении и клавиатурном фокусе: ярче и заметнее ореол. */
.stars button.on:hover,
.stars button.on:focus-visible {
  filter: drop-shadow(0 0 9px hsl(var(--star-hue) var(--star-sat) var(--star-lit) / .5)) brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .stars button {
    transition: none
  }

  .stars button:hover,
  .stars button:active {
    transform: none
  }
}

.rate-info {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.5
}

.rate-big {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 26px;
  color: var(--rc, var(--gold));
  line-height: 1
}

.tab {
  position: relative;
  padding: 11px 17px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tx3);
  white-space: nowrap;
  transition: .22s
}

.tab:hover {
  color: var(--tx)
}

.tab.on {
  color: var(--gold)
}

.tab.on::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  animation: navIn .4s var(--ease)
}

.chrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--surf2);
  border: 1px solid var(--line);
  margin-bottom: 9px;
  cursor: pointer;
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s
}

.chrow:hover {
  transform: translateX(6px);
  border-color: rgb(var(--cin-rgb) / .42);
  box-shadow: var(--sh-s)
}

.chnum {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--zh);
  font-weight: 900;
  font-size: 19px;
  color: var(--cin2);
  border: 1.5px solid rgb(var(--cin-rgb) / .55);
  transition: .26s
}

.chrow:hover .chnum {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  transform: rotate(-5deg) scale(1.05)
}

.chrow .tt {
  flex: 1;
  min-width: 0
}

.chrow .tt b {
  display: block;
  font-size: 14.5px
}

.chrow .tt span {
  display: block;
  font-family: var(--zh);
  font-size: 13px;
  color: var(--gold);
  margin-top: 3px
}

.chrow .meta {
  font-size: 11.5px;
  color: var(--tx3);
  font-weight: 700;
  white-space: nowrap
}

.chrow .done {
  font-size: 12px;
  font-weight: 800;
  color: var(--jade);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.chrow .done svg {
  width: 13px;
  height: 13px
}

.chrow .here {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap
}

.chrow.here {
  border-color: rgb(var(--gold-rgb) / .42);
  background: rgb(var(--gold-rgb) / .06)
}

.play-ch {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--surf3);
  display: grid;
  place-items: center;
  color: var(--tx2);
  transition: .24s var(--pop)
}

.play-ch svg {
  width: 14px;
  height: 14px
}

.play-ch:hover {
  background: var(--gold);
  color: #221806;
  transform: scale(1.13)
}

/* ══════════ ЧИТАЛКА ══════════ */
.rbar {
  position: sticky;
  top: calc(var(--top-h) + 8px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 10px 13px;
  border-radius: var(--r-md);
  margin-bottom: 20px;
  background: rgba(15, 18, 24, .96);
    border: 1px solid var(--line);
  box-shadow: var(--sh-s);
  transition: transform .35s var(--ease), opacity .3s
}

html[data-theme="light"] .rbar {
  background: rgba(246, 241, 230, .97)
}

.rbar.hide {
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none
}

.rtitle {
  min-width: 0;
  flex: 1
}

.rtitle b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.rtitle b .zh {
  color: var(--gold);
  font-size: 15px;
  margin-right: 6px
}

.rtitle small {
  display: block;
  font-size: 11px;
  color: var(--tx3);
  margin-top: 2px
}

.rtools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.tbtn {
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--surf);
  border: 1px solid var(--line2);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tx2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .2s var(--ease)
}

.tbtn svg {
  width: 15px;
  height: 15px
}

.tbtn:hover {
  color: var(--tx);
  background: var(--surf3);
  transform: translateY(-1px)
}

.tbtn.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #231905
}

.sheet {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 58px);
  border-radius: var(--r-lg);
  color: var(--sh-tx, var(--inktxt));
  background: var(--sh-bg, linear-gradient(176deg, var(--paper), var(--paper2)));
  box-shadow: var(--sh-l), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: background .4s var(--ease), color .4s var(--ease)
}

.sheet[data-paper="sepia"] {
  --sh-bg: #eaddbf;
  --sh-tx: #4a3620;
  --sh-mut: #9a7a4c
}

.sheet[data-paper="night"] {
  --sh-bg: #1a1e26;
  --sh-tx: #dcd7cb;
  --sh-mut: #828a97
}

.sheet::before {
  content: '读';
  position: absolute;
  right: 24px;
  bottom: 16px;
  font-family: var(--brush);
  font-size: 66px;
  color: rgba(201, 67, 42, .16);
  transform: rotate(-8deg);
  pointer-events: none
}

.ch-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-wrap: wrap
}

.ch-seal {
  background: var(--cin);
  color: #fff6ea;
  border-radius: 12px;
  padding: 11px 14px;
  text-align: center;
  flex: none;
  box-shadow: 0 6px 16px rgb(var(--cin-rgb) / .4)
}

.ch-seal small {
  display: block;
  font-size: 9px;
  letter-spacing: .28em;
  opacity: .85
}

.ch-seal .zh {
  font-family: var(--zh);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2
}

.ch-head h2 {
  font-family: var(--zh);
  font-weight: 900;
  font-size: clamp(23px, 3.3vw, 33px);
  line-height: 1.2
}

.ch-head .ru {
  color: var(--sh-mut, var(--inkmut));
  font-weight: 800;
  font-size: 13.5px;
  margin-top: 4px
}

.ch-head .m {
  margin-left: auto;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--sh-mut, var(--inkmut))
}

.para {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 6px
}

.pbtn {
  flex: none;
  width: 31px;
  height: 31px;
  margin-top: calc(var(--fs-read)*.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(138, 107, 63, .45);
  color: var(--inkmut);
  background: rgba(255, 255, 255, .3);
  opacity: 0;
  transition: .25s var(--ease)
}

.pbtn svg {
  width: 12px;
  height: 12px
}

.para:hover .pbtn,
.pbtn.busy {
  opacity: 1
}

.pbtn:hover {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  transform: scale(1.14)
}

.pbtn.busy {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  animation: breathe 1.6s infinite
}

@keyframes breathe {
  50% {
    transform: scale(1.09)
  }
}

.ptext {
  flex: 1;
  font-family: var(--zh);
  font-size: var(--fs-read);
  line-height: calc(var(--fs-read)*1.65);
  letter-spacing: .02em
}

.tok {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  vertical-align: bottom;
  height: calc(var(--fs-read)*1.65);
  border-radius: 7px;
  position: relative
}

.tok.w {
  cursor: pointer;
  padding: 0 1px
}

.tok.w .hz {
  transition: color .18s, text-decoration-color .25s
}

.tok.w:hover .hz {
  color: var(--cin);
  text-decoration: underline;
  text-decoration-color: rgb(var(--cin-rgb) / .55);
  text-underline-offset: 5px
}

.tok .hz {
  line-height: 1.16
}

.tok .py {
  display: none;
  font-family: var(--ui);
  font-weight: 800;
  font-size: calc(var(--fs-read)*.39);
  color: var(--sh-mut, var(--inkmut));
  line-height: 1.3;
  padding-bottom: 2px;
  white-space: nowrap
}

body.py-on .tok {
  height: calc(var(--fs-read)*2.2)
}

body.py-on .ptext {
  line-height: calc(var(--fs-read)*2.2)
}

body.py-on .pbtn {
  margin-top: calc(var(--fs-read)*.95)
}

body.py-on .tok .py {
  display: block;
  animation: pyIn .3s var(--ease)
}

@keyframes pyIn {
  from {
    opacity: 0;
    transform: translateY(3px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Озвучиваемый текст: больше НЕ розовая подложка-прямоугольник. Вместо неё —
   подчёркивание + цвет как при наведении мышью, плюс лёгкий «подъём» токена,
   чтобы выделить то, что звучит прямо сейчас. */
.tok.lit .hz {
  color: var(--cin)
}

.tok.lit {
  transform: translateY(-3px)
}

/* На ночной бумаге — светлее, чтобы читалось на тёмном фоне листа */
.sheet[data-paper="night"] .tok.lit .hz {
  color: #ff9d80
}

@keyframes speakLift {
  0% {
    transform: translateY(0) scale(1)
  }

  40% {
    transform: translateY(-2px) scale(1.07)
  }

  100% {
    transform: translateY(0) scale(1)
  }
}

@media (prefers-reduced-motion: reduce) {
  .tok.lit {
    animation: none
  }
}

.ch-foot {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 2px solid rgba(138, 107, 63, .24);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center
}

.dots {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--sh-mut, var(--inkmut));
  color: var(--sh-mut, var(--inkmut));
  font-family: var(--zh);
  font-weight: 900;
  font-size: 14px;
  display: grid;
  place-items: center;
  transition: .26s var(--pop)
}

.dot:hover {
  transform: scale(1.12)
}

.dot.cur {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
  transform: scale(1.14)
}

.dot.read:not(.cur) {
  background: rgb(var(--jade-rgb) / .22);
  border-color: var(--jade);
  color: #256b4e
}

.ch-actions {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  justify-content: center
}

.pbtn2 {
  padding: 13px 22px;
  border-radius: 13px;
  font-weight: 800;
  font-size: 13.5px;
  border: 1.5px solid;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .24s var(--ease), box-shadow .24s, background .2s, color .2s
}

.pbtn2 svg {
  width: 15px;
  height: 15px
}

.pbtn2:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16)
}

.pbtn2:active {
  transform: scale(.95)
}

.pbtn2.jade {
  border-color: var(--jade);
  color: #256b4e;
  background: rgb(var(--jade-rgb) / .1)
}

.pbtn2.jade:hover {
  background: var(--jade);
  color: #fff
}

.pbtn2.cin {
  border-color: var(--cin);
  background: var(--cin);
  color: #fff;
  box-shadow: 0 8px 20px rgb(var(--cin-rgb) / .3)
}

.pbtn2.dim {
  border-color: rgba(138, 107, 63, .42);
  color: var(--sh-mut, var(--inkmut))
}

/* ══════════ ОКНО СЛОВА ══════════ */
#pop {
  position: fixed;
  z-index: 260;
  width: 314px;
  display: none;
  flex-direction: column;
  background: var(--surf2);
  /* backdrop-filter убран: фон и так непрозрачный, а blur(20px) каждое
     кадровое обновление перерисовывался — отсюда «лагучесть» при появлении. */
  border: 1px solid rgb(var(--gold-rgb) / .34);
  border-radius: var(--r-md);
  padding: 20px 20px 16px;
  box-shadow: var(--sh-l);
  /* анимации появления нет вовсе: модалка возникает мгновенно и без «рваности» */
  /* РАУНД 36: страховка от очень длинных объяснений — окно слова не может быть
     выше экрана и скроллится внутри; позиционирование в reader.js всегда
     оставляет слово под курсором видимым. */
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}

/* Плавное появление без пружинного рывка (прежний popIn c --pop «дёргал»). */
@keyframes popSmooth {
  from {
    opacity: 0;
    transform: translateY(7px) scale(.985)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(.92) translateY(9px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

#pop.on {
  display: flex
}

.pop-hz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 42px;
  line-height: 1.05
}

.pop-py {
  color: var(--gold);
  font-weight: 800;
  font-size: 15.5px;
  margin: 5px 0 9px
}

.pop-ru {
  font-size: 15px;
  line-height: 1.55;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line2)
}

.pop-more {
  display: none;
  padding: 11px 0 2px
}

.pop-more.on {
  display: block
}

.pop-more .h {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800;
  margin-bottom: 7px
}

.pop-more .alt {
  font-size: 12.5px;
  color: var(--tx2);
  padding: 6px 10px;
  border-left: 2px solid var(--gold);
  background: rgb(var(--gold-rgb) / .08);
  border-radius: 0 9px 9px 0;
  margin-bottom: 6px;
  line-height: 1.45
}

.pop-more .alt b {
  color: var(--tx)
}

.pop-sent {
  font-family: var(--zh);
  font-size: 14.5px;
  color: var(--tx2);
  padding: 11px 0 12px;
  line-height: 1.6;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-decoration: underline dotted rgba(150, 150, 160, .5);
  text-underline-offset: 4px
}

.pop-sent svg {
  width: 13px;
  height: 13px;
  flex: none
}

.pop-sent:hover {
  color: var(--gold)
}

.pop-gram {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 11px;
  margin-bottom: 9px;
  border-radius: 11px;
  background: rgb(var(--gold-rgb) / .09);
  border: 1px dashed rgb(var(--gold-rgb) / .38);
  font-size: 12px;
  color: var(--tx2)
}

.pop-gram .lk {
  margin-left: auto;
  color: var(--gold);
  font-weight: 800;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgb(var(--gold-rgb) / .13);
  white-space: nowrap;
  transition: .2s
}

.pop-gram .lk:hover {
  background: var(--gold);
  color: #231905
}

.pop-act {
  display: flex;
  gap: 7px
}

.pop-act button {
  flex: 1;
  padding: 11px 4px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--surf3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: .2s var(--ease)
}

.pop-act button svg {
  width: 14px;
  height: 14px
}

.pop-act button:hover {
  background: var(--cin);
  color: #fff;
  transform: translateY(-2px)
}

.pop-act button.saved {
  background: var(--jade);
  color: #06231a
}

.pop-x {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--tx3);
  transition: .2s
}

.pop-x:hover {
  background: var(--surf3);
  color: var(--tx)
}

.pop-x svg {
  width: 15px;
  height: 15px
}

.pop-fix {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 9px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx3);
  border: 1px dashed var(--line);
  transition: .2s
}

.pop-fix:hover {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .5);
  background: rgb(var(--gold-rgb) / .06)
}

/* ══════════ ПАНЕЛЬ СЛОВАРЯ ══════════ */
.panel-mask {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(6, 8, 12, .55);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: .3s
}

.panel-mask.on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible
}

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 94vw);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--surf2);
  border-left: 1px solid var(--line);
  border-radius: 0 0 0 18px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
  transform: translateX(105%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1)
}

.panel.on {
  transform: none
}

.panel-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.panel-head h3 {
  font-family: var(--disp);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px
}

.panel-head h3 .zh {
  color: var(--gold);
  font-size: 20px
}

.panel-head p {
  font-size: 12.5px;
  color: var(--tx2);
  margin-top: 7px;
  line-height: 1.55
}

.panel-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--tx3);
  flex: none;
  transition: .25s
}

.panel-close:hover {
  background: var(--surf3);
  color: var(--tx);
  transform: rotate(90deg)
}

.panel-close svg {
  width: 16px;
  height: 16px
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px
}

.panel-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--line2);
  display: flex;
  gap: 10px
}

.ditem {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  margin-bottom: 9px;
  animation: viewIn .4s var(--ease) both
}

.ditem .hz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 24px;
  min-width: 52px;
  cursor: pointer;
  transition: .2s
}

.ditem .hz:hover {
  color: var(--cin2);
  transform: scale(1.08)
}

.ditem .mid {
  flex: 1;
  min-width: 0
}

.ditem .py {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px
}

.round {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--surf3);
  display: grid;
  place-items: center;
  color: var(--tx2);
  transition: .2s var(--pop)
}

.round svg {
  width: 15px;
  height: 15px
}

.round:hover {
  background: var(--cin);
  color: #fff;
  transform: scale(1.1)
}

.dict-empty {
  text-align: center;
  color: var(--tx2);
  padding: 52px 20px;
  line-height: 1.7;
  font-size: 13.5px
}

.dict-empty .zh {
  display: block;
  font-family: var(--brush);
  font-size: 74px;
  color: rgb(var(--gold-rgb) / .32);
  margin-bottom: 12px
}

/* ══════════ КАТАЛОГ ══════════ */
.cat-bar {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 24px
}

.cat-group {
  margin-bottom: 15px
}

.cat-label {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--tx3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 9px
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.cat-sliders {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 16px 0 6px
}

.cat-slider {
  flex: 1;
  min-width: 220px
}

.cat-slider label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 9px
}

.cat-slider label b {
  color: var(--gold);
  font-family: var(--disp);
  font-size: 13px
}

input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 6px;
  background: var(--surf3);
  outline: none;
  cursor: pointer
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bg2);
  border: 3px solid var(--gold);
  box-shadow: var(--sh-s);
  transition: transform .2s var(--pop)
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2)
}

input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg2);
  border: 3px solid var(--gold)
}

.cat-selects {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center
}

/* ══════════ НИЖНЯЯ НАВИГАЦИЯ ══════════ */
.botnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  /* собственный композитный слой: на iOS фикс-панель не «гостит» после
     модалок и скролл-локов */
  transform: translateZ(0);
  transition: transform .28s var(--ease);
  display: none;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(15, 18, 24, .97);
  border-top: 1px solid var(--line)
}

/* нижняя шторка: скролл вниз на главной — уезжает вниз, скролл вверх — назад */
.botnav.hide {
  transform: translate3d(0, 100%, 0)
}

html[data-theme="light"] .botnav {
  background: rgba(246, 241, 230, .97)
}

.botnav-in {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  max-width: 520px;
  margin: 0 auto
}

.bnav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 13px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--tx3);
  transition: .22s var(--ease);
  position: relative
}

.bnav svg {
  width: 21px;
  height: 21px
}

.bnav.on {
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .11)
}

.bnav .cnt {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--cin);
  color: #fff;
  font-size: 9.5px;
  display: none;
  place-items: center
}

.bnav .cnt.on {
  display: grid
}

/* ══════════ ТОСТ / ИСКРЫ ══════════ */
#toast {
  position: fixed;
  bottom: calc(26px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 90px);
  z-index: 300;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13.5px;
  max-width: 92vw;
  text-align: center;
  background: var(--surf2);
  border: 1px solid rgb(var(--gold-rgb) / .42);
  box-shadow: var(--sh-l);
  opacity: 0;
  transition: .4s var(--ease);
  display: flex;
  align-items: center;
  gap: 10px
}

#toast.on {
  transform: translate(-50%, 0);
  opacity: 1
}

#toast svg {
  width: 17px;
  height: 17px;
  color: var(--jade);
  flex: none
}

.spark {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  line-height: 1;
  font-style: normal;
  will-change: transform, opacity
}

footer {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--tx3);
  font-size: 12px;
  padding: 34px 20px 40px;
  border-top: 1px solid var(--line2);
  line-height: 1.9
}

footer .zh {
  color: var(--gold);
  font-family: var(--brush);
  font-size: 17px
}

footer kbd {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surf3);
  border: 1px solid var(--line);
  font-size: 11px;
  font-family: var(--ui)
}

@media (max-width:1080px) {
  .mainnav {
    display: none
  }

  .week {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .week-art {
    max-width: 420px;
    margin: 0 auto;
    width: 100%
  }

  .week-art .art {
    aspect-ratio: 3/4
  }

  .week-seal {
    width: 62px;
    height: 62px;
    font-size: 16px
  }

  .story-head {
    grid-template-columns: 1fr
  }

  .story-cover {
    aspect-ratio: 3/4;
    max-width: 520px
  }
}

@media (max-width:760px) {
  :root {
    --top-h: 58px
  }

  .week-art .art {
    aspect-ratio: 3/4
  }

  .week-zh {
    font-size: clamp(30px, 9vw, 40px)
  }

  main {
    padding-bottom: 120px
  }

  .botnav {
    display: block
  }

  .brand-tx {
    display: none
  }

  .top-right {
    gap: 6px
  }

  .wide-ico>span:not(.zh):not(.cnt) {
    display: none
  }

  .wide-ico {
    width: 40px;
    padding: 0;
    justify-content: center
  }

  .week {
    padding: 16px;
    border-radius: var(--r-lg)
  }

  .week-acts .btn {
    flex: 1;
    min-width: 140px
  }

  .fact {
    flex: 1;
    min-width: 80px
  }

  .card {
    width: 82vw;
    max-width: 320px
  }

  .chrow {
    padding: 13px;
    gap: 12px
  }

  .chrow .meta {
    display: none
  }

  .chnum {
    width: 38px;
    height: 38px;
    font-size: 16px
  }

  .rbar {
    top: calc(var(--top-h) + 6px);
    padding: 9px 11px;
    gap: 9px
  }

  .rtitle {
    flex: 1 1 100%;
    order: -1
  }

  .rtitle small {
    display: none
  }

  .rtools {
    width: 100%
  }

  .sheet {
    padding: 26px 17px 34px;
    border-radius: var(--r-md)
  }

  .ch-head .m {
    display: none
  }

  .pbtn {
    opacity: .5
  }

  #pop {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto;
    max-height: 76vh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    padding: 24px 18px calc(16px + env(safe-area-inset-bottom));
    animation: none
  }

  @keyframes popUp {
    from {
      transform: translateY(80px);
      opacity: 0
    }

    to {
      transform: none;
      opacity: 1
    }
  }

  #pop::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 3px;
    background: rgba(150, 150, 160, .4)
  }

  .panel {
    width: 100%;
    border-left: none
  }

  .info-line {
    gap: 14px 20px
  }

  .story-info h1 {
    font-size: 34px
  }

  #toast {
    bottom: calc(84px + env(safe-area-inset-bottom))
  }
}

@media (hover:none) {

  .card:hover,
  .chrow:hover,
  .resume:hover {
    transform: none
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none
}

::view-transition-new(root) {
  z-index: 1
}

/* ══════════════════════════════════════════════════════════════
   ПРИЛОЖЕНИЕ: страницы и компоненты вне демо-набора design.html,
   приведённые к его языку (токены, радиусы, поверхности).
   ══════════════════════════════════════════════════════════════ */

.icon-svg {
  flex: none;
  vertical-align: middle
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important
}

::placeholder {
  color: var(--tx3)
}

.cnt {
  font-style: normal
}

.anb-badge,
.msg-dot {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cin);
  color: #fff;
  font-size: 10px;
  font-weight: 800
}

.msg-dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0
}

.uname {
  color: var(--gold);
  font-weight: 800;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0
}

.uname:hover {
  text-decoration: underline
}

.coll-empty {
  padding: 30px;
  text-align: center;
  color: var(--tx3);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  line-height: 1.7
}

/* ---------- входы и кнопки старых форм ---------- */
.editor-input,
.bank-input,
.auth-input,
.ch-title-ru,
.ch-title-zh,
.para-textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  font-family: inherit;
  transition: .2s
}

.editor-input:focus,
.bank-input:focus,
.auth-input:focus,
.ch-title-ru:focus,
.ch-title-zh:focus,
.para-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surf2);
  box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .12)
}

.editor-input.zh,
.ch-title-zh {
  font-family: var(--zh);
  font-size: 14px   /* единый кегль формы: ru- и zh-поля одного размера */
}

textarea.editor-input,
textarea.auth-input,
textarea.para-textarea {
  resize: none;
  min-height: 110px;
  line-height: 1.55
}

textarea.para-textarea {
  font-family: var(--zh);
  font-size: 15px;   /* китайский текст абзаца чуть крупнее для читабельности */
  line-height: 1.8;
  margin-top: 4px
}

select.editor-input,
select.bank-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--surf);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  background-attachment: scroll;
  padding-right: 36px;
}

html[data-theme="light"] select.editor-input,
html[data-theme="light"] select.bank-input,
html[data-theme="light"] select.inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6659' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}

.bar,
.bank-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px
}

/* ---------- модалки ---------- */
.auth-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: rgba(6, 8, 12, .78);
  padding: 18px;
  overflow-y: auto
}

.auth-mask[style*="grid"] {
  display: grid
}

.auth-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-l);
  animation: popIn .3s var(--pop)
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--tx3);
  transition: .25s
}

.auth-close:hover {
  background: var(--surf3);
  color: var(--tx);
  transform: rotate(90deg)
}

.auth-head {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 14px
}

.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surf3);
  border-radius: 11px;
  margin-bottom: 16px
}

.auth-tab {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tx2);
  transition: .2s
}

.auth-tab.on {
  background: var(--surf2);
  color: var(--tx);
  box-shadow: var(--sh-s)
}

.auth-input {
  margin-bottom: 10px
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px
}

.auth-foot {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--tx3);
  line-height: 1.6
}

.auth-hint {
  font-size: 11.5px;
  color: var(--tx3);
  margin: -4px 0 10px
}

.auth-err {
  font-size: 12.5px;
  color: var(--cin2);
  font-weight: 700;
  margin: 4px 0 8px;
  min-height: 0
}

.auth-err:empty {
  display: none
}

/* ---------- экраны модалки авторизации (подтверждение / забыли пароль / сброс) ---------- */
.auth-link {
  color: var(--cin);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--cin)
}

.auth-link:hover {
  border-bottom-style: solid
}

.verify-box {
  text-align: center;
  padding: 8px 2px 2px
}

.verify-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px
}

.verify-box h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800
}

.verify-box p {
  margin: 0 0 14px;
  color: var(--tx2);
  font-size: 13px;
  line-height: 1.55
}

.verify-box .auth-input {
  text-align: center
}

.verify-box .btn {
  margin: 6px 4px 0
}

.verify-box .auth-foot {
  margin-top: 12px
}

/* ---------- профиль (модалка) ---------- */
.prof-card {
  width: min(430px, 100%)
}

.prof-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

.prof-avatar {
  position: relative;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 19px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--zh);
  font-weight: 900;
  font-size: 26px;
  background: linear-gradient(150deg, var(--cin2), var(--cin));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), var(--sh-s);
  cursor: pointer
}

.prof-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.prof-name {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px
}

.prof-level {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  margin-top: 4px
}

.prof-coins {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-family: var(--disp);
  font-weight: 800
}

.prof-coins-col {
  font-size: 14px;
  line-height: 1.1
}

.prof-coins-col .zh {
  font-size: 12px;
  color: var(--tx2)
}

.prof-xp {
  margin-bottom: 16px
}

.prof-xp-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--surf3);
  overflow: hidden
}

.prof-xp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--cin));
  transition: width .8s var(--ease)
}

.prof-xp-txt {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 6px;
  font-weight: 700
}

.prof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px
}

.prof-stats>div {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 13px;
  padding: 12px 10px;
  text-align: center
}

.prof-stats b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 19px
}

.prof-stats span {
  display: block;
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700
}

.prof-acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.prof-acts .btn {
  flex: 1;
  min-width: 110px
}

/* ---------- настройки ---------- */
.settings-wrap {
  display: grid;
  gap: 16px;
  max-width: 780px;
  margin: 0 auto
}

.settings-card {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px
}

.settings-card h3 {
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  margin-bottom: 8px
}

.settings-hint {
  color: var(--tx2);
  font-size: 12.5px;
  line-height: 1.65;
  margin-bottom: 14px
}

.settings-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.settings-row .editor-input {
  flex: 1;
  min-width: 200px
}

.settings-current {
  font-size: 13px;
  color: var(--tx2);
  margin-bottom: 10px;
  font-weight: 600
}

.settings-current b {
  color: var(--tx)
}

.email-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--jade);
  background: rgb(var(--jade-rgb) / .12);
  border: 1px solid rgb(var(--jade-rgb) / .4)
}

.settings-card .editor-input {
  margin-bottom: 10px
}

.settings-card .btn {
  margin-top: 4px
}

/* аватар в настройках */
.set-av-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap
}

.set-avatar-big {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-family: var(--zh);
  font-size: 34px;
  font-weight: 900;
  color: #fff6ea;
  border: 1px solid var(--line);
  box-shadow: var(--sh-s);
  cursor: pointer;
  overflow: hidden;
  transition: transform .25s var(--pop), box-shadow .25s
}

.set-avatar-big:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--sh-m)
}

.set-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.set-av-acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* ---------- друзья ---------- */
.friends-tabs,
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none
}

.friends-tabs::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
  display: none
}

.friends-tab {
  position: relative;
  padding: 11px 17px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tx3);
  white-space: nowrap;
  transition: .22s
}

.friends-tab:hover {
  color: var(--tx)
}

.friends-tab.on {
  color: var(--gold)
}

.friends-tab.on::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  animation: navIn .4s var(--ease)
}

.friend-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surf2);
  border: 1px solid var(--line);
  margin-bottom: 9px;
  transition: transform .26s var(--ease), border-color .26s
}

.friend-row:hover {
  transform: translateX(4px);
  border-color: rgb(var(--gold-rgb) / .34)
}

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

.friend-name {
  font-weight: 800;
  font-size: 14px
}

.friend-login {
  color: var(--tx3);
  font-weight: 700;
  font-size: 12px
}

.friend-meta {
  font-size: 12px;
  color: var(--tx2);
  margin-top: 3px
}

.friend-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.friend-pending {
  font-size: 12px;
  color: var(--tx3);
  font-weight: 700;
  padding: 8px 4px
}

.friends-search-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px
}

.friends-search-bar .bank-input {
  flex: 1;
  min-width: 220px
}

.friends-scope {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--tx2);
  font-weight: 700
}

.friends-scope label {
  display: flex;
  gap: 7px;
  align-items: center;
  cursor: pointer
}

.friends-scope input {
  accent-color: var(--cin)
}

/* ---------- сообщения ---------- */
.msg-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  min-height: 62vh
}

.msg-list {
  overflow-y: auto;
  max-height: 70vh;
  padding-right: 4px
}

.msg-conv {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  margin-bottom: 8px;
  text-align: left;
  transition: .2s var(--ease);
  cursor: pointer
}

.msg-conv:hover {
  border-color: var(--line);
  transform: translateX(3px)
}

.msg-conv.on {
  border-color: rgb(var(--gold-rgb) / .5);
  background: rgb(var(--gold-rgb) / .07)
}

.msg-conv-body {
  flex: 1;
  min-width: 0
}

.msg-conv-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13.5px
}

.msg-unread {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--cin);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center
}

.msg-conv-last {
  font-size: 12px;
  color: var(--tx2);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.msg-chat {
  display: flex;
  flex-direction: column;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 0
}

.msg-empty {
  margin: auto;
  text-align: center;
  color: var(--tx3);
  font-size: 13.5px;
  line-height: 1.8;
  padding: 30px
}

.msg-thread {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 56vh
}

.msg-bubble {
  max-width: 78%;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 15px;
  background: var(--surf3);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  align-self: flex-start;
  border: 1px solid var(--line2)
}

.msg-bubble.me {
  align-self: flex-end;
  background: rgb(var(--cin-rgb) / .14);
  border-color: rgb(var(--cin-rgb) / .3)
}

.msg-bubble time {
  display: block;
  font-size: 10px;
  color: var(--tx3);
  margin-top: 6px;
  font-weight: 700
}

.msg-note {
  text-align: center;
  color: var(--tx3);
  font-size: 12.5px;
  padding: 14px
}

.msg-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px;
  border-top: 1px solid var(--line2)
}

.msg-input-row .editor-input {
  flex: 1;
  margin: 0
}

.msg-input-row .btn {
  flex: none
}

.msg-day {
  align-self: center;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surf)
}

/* ---------- комментарии и обсуждения ---------- */
.comments-section {
  max-width: 840px;
  margin: 30px auto 0
}

.comments-section h3 {
  font-family: var(--disp);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px
}

.comments-section h3 .zh {
  font-family: var(--brush);
  font-size: 20px;
  color: var(--gold);
  text-transform: none;
  letter-spacing: .1em
}

.comment-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.comment-form textarea {
  flex: 1;
  min-width: 220px
}

/* РАУНД 36: ограничитель роста поля ввода (автоgrow в social.js):
   длинный комментарий скроллится внутри, а не растягивает страницу */
.comment-form textarea,
.thread-reply-box textarea {
  max-height: 45vh;
  overflow-y: auto
}

.comment-form .btn {
  align-self: flex-end
}

.cmt {
  position: relative;
  margin-left: calc(var(--cstep, 0px) * var(--d, 0));
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 10px
}

.cmt.wrapped {
  border-top: 2px solid var(--line2);
  margin-top: 16px
}

.cmt.wrapped::before {
  content: '⟲ продолжение ветки';
  display: block;
  font-size: 10.5px;
  color: var(--tx3);
  letter-spacing: .06em;
  margin: -6px 0 8px
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

.comment-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: var(--zh);
  font-weight: 900;
  font-size: 15px;
  background: linear-gradient(150deg, var(--avc, #e3b469), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2)
}

.comment-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

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

.comment-name {
  font-weight: 800;
  font-size: 13.5px
}

.comment-time {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 2px;
  font-weight: 600
}

.comment-text {
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre-line
}

.comment-acts {
  display: flex;
  gap: 8px;
  margin-top: 10px
}

.comment-acts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tx3);
  background: var(--surf);
  border: 1px solid var(--line2);
  transition: .2s
}

.comment-acts button:hover {
  color: var(--tx);
  border-color: var(--line)
}

.comment-acts button.liked {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .4);
  background: rgb(var(--cin-rgb) / .08)
}

/* Сердечко и счётчик — фиксированной ширины, чтобы при лайке и смене числа
   кнопка не «прыгала», а соседняя «Ответить» не сдвигалась.
   РАУНД 36: текстовые глифы ♡/♥ заменены на SVG (heartIcon в core.js) —
   глифы рендерились разнобойными по платформам и «криво» сидели в пилюле;
   SVG центрируется flex'ом и одинаков в обеих темах. */
.comment-acts .heart,
.thread-like .heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1
}

.comment-acts .heart svg,
.thread-like .heart svg {
  display: block;
  width: 14px;
  height: 14px
}

/* иконки в пилюлях действий (лайк/ответ/удалить/флаг) не сжимаются и не
   сливаются с подписью: отступ задаёт gap кнопки, svg — flex:none */
.comment-acts button svg.icon-svg,
.thread-like button svg.icon-svg,
.thread-card-acts button svg.icon-svg {
  flex: none
}

.comment-acts .count,
.thread-like .count {
  display: inline-block;
  min-width: 1.2em;
  text-align: left;
  line-height: 1
}

.reply-to {
  font-size: 12px;
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .1);
  border: 1px dashed rgb(var(--gold-rgb) / .4);
  border-radius: 9px;
  padding: 6px 10px;
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center
}

/* РАУНД 36: иконки в плашке «Ответ для…» не сливаются с текстом */
.reply-to svg.icon-svg {
  flex: none
}

.reply-to button {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

/* переменная сдвига для линии ветки */
#commentsList {
  /* РАУНД 38: шаг вложенности меньше (был 42px — большие горизонтальные
     отступы между соседними комментариями) и кратен 4px: при масштабах
     ОС 1 / 1.25 / 1.5 / 2 все линии веток попадают в целые device-пиксели
     с одинаковой фазой — поэтому-renderятся одинаковой толщины */
  --cstep: 32px;
}

.cmt-line {
  position: absolute;
  top: -13px;
  bottom: -13px;
  width: 12px;
  cursor: pointer;
  z-index: 2;
}

.cmt-line::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  /* сплошной (непрозрачный) цвет: сегменты веток перекрываются на стыках,
     и с rgba() места наложений проступали тёмными полосами */
  background: var(--thread-line);
  transition: background .15s;
}

.cmt-line:hover::before,
.cmt-line.hl::before {
  background: var(--gold);
}

.cmt:last-child .cmt-line {
  bottom: 0;
}

.cmt.wrapped>.cmt-line {
  top: -20px;
}

@media (max-width: 720px) {
  #commentsList {
    --cstep: 16px;
  }
}

.collapse-stub {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 calc(var(--cstep, 24px) / 2 - 1px);
  cursor: pointer;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800
}

.collapse-stub i {
  width: 2px;
  height: 22px;
  background: var(--thread-line);
  border-radius: 2px
}

.collapse-stub:hover {
  color: var(--cin)
}

.collapse-stub:hover i {
  background: var(--gold)
}

.cmt.collapsed>.collapse-stub {
  display: inline-flex
}

.threads-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.threads-head select {
  min-width: 180px
}

.thread-card {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 11px;
  cursor: pointer;
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s
}

.thread-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--gold-rgb) / .34);
  box-shadow: var(--sh-s)
}

.thread-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}

.thread-card-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 6px
}

.thread-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.55;
  max-height: 3.1em;
  white-space: pre-line;      /* сохраняет переводы строк в сокращённом виде */
}

.thread-full-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tx2);
  white-space: pre-line;      /* каждая строка — как ввёл автор */
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}

.thread-card-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--tx3);
  font-weight: 700
}

/* РАУНД 36: кнопки-действия в подвале карточки треда — flex с зазором,
   чтобы SVG-иконка (удалить и т.п.) не сливалась с подписью */
.thread-card-foot button {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.thread-card-foot button svg.icon-svg {
  flex: none
}

.thread-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tx3);
  background: var(--surf);
  border: 1px solid var(--line2);
  transition: .2s;
  margin-left: auto
}

.thread-like:hover {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .4)
}

.thread-like.liked {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .4);
  background: rgb(var(--cin-rgb) / .08)
}

.thread-reply-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px
}

.thread-reply-box textarea {
  flex: 1;
  min-width: 200px
}

/* отступ веток задан правилом выше (фикс наслаивания линий) */

/* ---------- уведомления: шторка и модалка ---------- */
.notif-item {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border-radius: 13px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-left: 2px solid transparent;
  margin-bottom: 8px;
  text-align: left;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
  transition: .18s;
  cursor: pointer
}

.notif-item:hover {
  background: var(--surf3);
  transform: translateX(2px)
}

.notif-item.unread {
  border-left-color: var(--gold)
}

.notif-item .dt {
  display: block;
  color: var(--tx3);
  font-size: 10.5px;
  margin-top: 6px;
  font-weight: 700
}

.notif-card {
  width: min(520px, 100%)
}

.notif-view-head {
  margin-bottom: 14px
}

.notif-view-actor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx2);
  margin-bottom: 10px
}

.notif-view-title {
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35
}

.notif-view-time {
  font-size: 11.5px;
  color: var(--tx3);
  margin-top: 8px;
  font-weight: 700
}

.notif-view-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tx2);
  white-space: pre-line
}

.notif-view-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px
}

.notif-card-meta {
  font-size: 11px;
  color: var(--tx3)
}

.notif-card-title {
  font-weight: 800;
  font-size: 13.5px;
  margin-bottom: 4px
}

.notif-card-preview {
  font-size: 12px;
  color: var(--tx2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* ---------- справка (панель) ---------- */
#refP {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 94vw);
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-left: 1px solid var(--line);
  box-shadow: var(--sh-l);
  transform: translateX(105%);
  transition: transform .44s var(--ease)
}

#refP.on {
  transform: none
}

#refMask {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(6, 8, 12, .55);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: .3s
}

#refMask.on {
  opacity: 1;
  pointer-events: auto;
  visibility: visible
}

.dict-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line2)
}

.dict-head h3 {
  font-family: var(--disp);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px
}

.dict-head h3 .zh {
  color: var(--gold);
  font-size: 20px
}

.dict-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px
}

.ref-word,
.bank-word {
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  margin-bottom: 9px
}

.ref-word .hz,
.bank-word .hz,
.bank-hz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 24px;
  min-width: 52px;
  text-align: center;
  cursor: pointer
}

.ref-word .py,
.bank-py {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px
}

.ref-word .mid,
.bank-mid {
  flex: 1;
  min-width: 0
}

.ref-gram-head,
.gram-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px
}

.ref-gram-structure,
.gram-structure {
  display: inline-block;
  font-family: var(--zh);
  font-size: 15px;
  color: var(--cin2);
  background: rgb(var(--cin-rgb) / .09);
  border-left: 2px solid var(--cin);
  padding: 8px 13px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 10px
}

.ref-gram-explain,
.gram-explain {
  color: var(--tx2);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 12px
}

.ref-gram-exs .gram-ex,
.gram-exs .gram-ex {
  background: var(--surf);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 8px
}

.gram-src,
.ex-src {
  font-size: 11px;
  color: var(--tx3);
  font-weight: 700;
  margin-top: 6px
}

.examples-search {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.examples-search .auth-input {
  flex: 1;
  min-width: 0;
  margin: 0
}

/* Карточка слова в справке: не вкладываем вторую рамку (.ref-word) внутрь
   .ditem — колонка «иероглиф + пиньинь» лежит прямо на карточке, чипы рядом. */
.ditem .ref-word {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  min-width: 58px
}

.ditem .ref-word .hz {
  font-size: 26px;
  line-height: 1.15
}

.ditem .ref-word .py {
  margin-bottom: 0
}

.ditem .mid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center
}

/* Примеры использования в модалке «найти предложение» */
.example-item {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 9px
}

.ex-zh {
  font-family: var(--zh);
  font-size: var(--ex-fs, 26px);
  line-height: 2;
  color: var(--tx)
}

.ex-tok.gtok {
  cursor: pointer;
  border-bottom: 1px dashed rgb(var(--gold-rgb) / .4)
}

.ex-tok.hit {
  color: var(--cin2);
  font-weight: 700
}

/* Следящая подсветка произносимого слова в модалке примеров — как в читалке */
.ex-tok.lit {
  color: var(--cin);
  background: none;
  text-decoration: underline;
  text-decoration-color: rgb(var(--cin-rgb) / .55);
  text-underline-offset: 5px;
  animation: speakLift .45s var(--pop)
}

.ex-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--gold)
}

.ex-src:hover {
  text-decoration: underline
}

/* ---------- викторина ---------- */
#quizM {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  place-items: center;
  background: rgba(6, 8, 12, .8);
  padding: 16px
}

#quizM.on {
  display: grid
}

.quiz {
  width: min(470px, 100%);
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-l);
  animation: popIn .3s var(--pop)
}

.qtop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px
}

.qtop .x {
  margin-left: auto
}

.qword {
  text-align: center;
  margin: 8px 0 20px
}

.qhz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 52px;
  line-height: 1.1
}

.qp {
  color: var(--gold);
  font-weight: 800;
  font-size: 15px;
  margin-top: 6px
}

.qopt {
  display: grid;
  gap: 9px
}

.qopt button {
  padding: 13px 16px;
  border-radius: 13px;
  background: var(--surf);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: .18s
}

.qopt button:hover {
  border-color: rgb(var(--gold-rgb) / .5);
  transform: translateY(-1px)
}

.qopt button.ok {
  border-color: var(--jade);
  background: rgb(var(--jade-rgb) / .14);
  color: var(--jade)
}

.qopt button.bad {
  border-color: var(--cin);
  background: rgb(var(--cin-rgb) / .12);
  color: var(--cin2)
}

.qend {
  text-align: center;
  line-height: 1.8
}

.qend b {
  font-family: var(--disp);
  font-size: 22px;
  display: block;
  margin-bottom: 8px
}

/* ---------- онбординг ---------- */
#onbMask {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 12, .85);
  padding: 16px
}

.onb-card {
  width: min(560px, 100%);
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--sh-l);
  text-align: center;
  animation: popIn .4s var(--pop)
}

.onb-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 9px;
  background: rgb(var(--gold-rgb) / .12);
  border: 1px solid rgb(var(--gold-rgb) / .4);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px
}

.onb-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(19px, 3vw, 26px);
  line-height: 1.3;
  margin-bottom: 12px
}

.onb-title .zh {
  color: var(--gold)
}

.onb-text {
  color: var(--tx2);
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 20px
}

.onb-demo {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px
}

.demo-tok {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line2)
}

.demo-tok .hz {
  font-family: var(--zh);
  font-size: 24px;
  font-weight: 900
}

.demo-tok .py {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800
}

.demo-tok .ru {
  font-size: 11px;
  color: var(--tx2)
}

.demo-dict {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgb(var(--jade-rgb) / .1);
  border: 1px dashed rgb(var(--jade-rgb) / .45)
}

.demo-dict-hz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 20px
}

.demo-dict-py {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800
}

.demo-dict-ru {
  font-size: 11px;
  color: var(--tx2)
}

.demo-py {
  font-size: 12px;
  color: var(--gold);
  font-weight: 800
}

.demo-quiz {
  font-size: 12px;
  color: var(--tx2)
}

.onb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px
}

.onb-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surf3);
  transition: .3s
}

.onb-dots i.on {
  background: var(--gold);
  width: 22px;
  border-radius: 5px
}

.onb-foot {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap
}

.onb-skip {
  color: var(--tx3);
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 12px
}

.onb-skip:hover {
  color: var(--tx)
}

.onb-body .zh {
  font-family: var(--zh)
}

/* ---------- редактор и админка ---------- */
.editor-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap
}

.editor-head h2 {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 800;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 12px
}

.editor-head h2 .zh {
  font-family: var(--brush);
  font-size: 26px;
  color: var(--gold)
}

.editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.editor-body {
  max-width: 920px;
  margin: 0 auto
}

.editor-section {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 16px
}

.editor-section h3 {
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  margin-bottom: 16px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 12px
}

.editor-field {
  margin-bottom: 12px
}

.editor-field label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--tx3);
  margin-bottom: 7px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.editor-desc {
  min-height: 110px
}

.editor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px
}

.editor-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--surf3);
  border: 1px solid rgb(var(--gold-rgb) / .3);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold)
}

/* РАУНД 44: предложенный автором тег (ещё нет в базе) — пунктирный чип */
.editor-tag.proposed {
  border-style: dashed;
  border-color: rgb(var(--gold-rgb) / .5);
  color: var(--gold)
}

.editor-tag button {
  color: var(--tx3);
  font-size: 14px;
  line-height: 1
}

.editor-tag button:hover {
  color: var(--cin2)
}

.tag-ac-wrap {
  position: relative
}

.tag-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--sh-m);
  padding: 6px;
  display: none;
  max-height: 220px;
  overflow-y: auto
}

.tag-suggestions.on {
  display: block
}

.tag-suggestions button,
.tag-suggestions .tag-sug {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s
}

.tag-suggestions .tag-sug .hash {
  color: var(--gold);
  font-weight: 800;
  flex: none
}

.tag-suggestions .tag-sug .cat {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tx3);
  background: var(--surf);
  border: 1px solid var(--line2);
  padding: 2px 8px;
  border-radius: 999px;
  flex: none
}

.tag-suggestions .tag-sug.suggest-new {
  color: var(--gold);
  border: 1px dashed rgb(var(--gold-rgb) / .4);
  margin-top: 4px
}

.tag-suggestions .tag-sug.suggest-new b {
  font-weight: 800
}

.tag-suggestions button:hover,
.tag-suggestions .tag-sug:hover {
  background: var(--surf3);
  color: var(--tx)
}

.bc-suggest-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 9px;
  width: 100%;
  text-align: left;
  font-size: 13px
}

.bc-suggest-item:hover {
  background: var(--surf3)
}

.wordbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.wordbar .bank-input {
  flex: 1;
  min-width: 200px
}

/* строка слова — просто карточка */
.we-row {
  display: block;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 13px;
  margin-bottom: 10px;
  padding: 12px 14px;
  transition: border-color .2s;
}
.we-row:hover {
  border-color: var(--line);
}

/* шапка строки — вот тут грид */
.we-head {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.3fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

/* поля ввода — собственный стиль, без shorthand-конфликта */
.we-hanzi,
.we-pinyin {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  transition: border-color .15s;
}
.we-hanzi {
  font-family: var(--zh);
  font-size: 20px;
  font-weight: 700;
}
.we-pinyin {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .01em;
}
.we-hanzi:focus,
.we-pinyin:focus {
  outline: none;
  border-color: var(--gold);
}

/* значения и ссылки — flex-обёртки, чтобы чипы переносились */
.we-means,
.we-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.we-usage:empty { display: none; }

.we-link {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800
}

/* «+ значение» — пилюля-чип как остальные (раньше принудительно был боксом
   34×34, из-за чего строка значений «разваливалась»). */
.we-add {
  cursor: pointer;
  color: var(--tx2);
  border-style: dashed;
  transition: .2s
}

.we-add:hover {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .5);
  background: rgb(var(--gold-rgb) / .08)
}

/* Крестик удаления значения — компактный внутри чипа, не бокс 34×34. */
.we-x {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tx3);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  transition: color .15s
}

.we-x:hover {
  color: var(--cin2)
}

.we-mean {
  gap: 6px
}

.we-num {
  font-style: normal;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 800
}

.we-text {
  color: var(--tx)
}

/* Карточка «Прогресс до доверенного автора» в редакторе (была голой строкой) */
.editor-trusted {
  background: rgb(var(--gold-rgb) / .08);
  border: 1px solid rgb(var(--gold-rgb) / .3);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 16px
}

.editor-trusted.ok {
  background: rgb(var(--jade-rgb) / .08);
  border-color: rgb(var(--jade-rgb) / .35)
}

.editor-trusted .et-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 9px
}

.editor-trusted .et-top svg {
  color: var(--gold);
  flex: none
}

.editor-trusted.ok .et-top svg {
  color: var(--jade)
}

.editor-trusted .et-top b {
  margin-left: auto;
  color: var(--gold);
  font-family: var(--disp);
  font-size: 13px
}

.editor-trusted .et-bar {
  height: 7px;
  border-radius: 99px;
  background: rgb(var(--gold-rgb) / .16);
  overflow: hidden
}

.editor-trusted .et-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--cin));
  transition: width .4s var(--ease)
}

.editor-trusted .et-sub {
  margin-top: 9px;
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.5
}

.gr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px
}

.gr-meta {
  font-size: 11.5px;
  color: var(--tx3);
  font-weight: 700;
  margin-top: 8px
}

.words-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px
}

.adm-users-bar,
.adm-act-bar,
.tagf-bar {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.adm-users-bar .bank-input,
.adm-users-bar select,
.tagf-bar input {
  flex: 1;
  min-width: 150px
}

/* Таблица пользователей админки — ОПРЕДЕЛЕНИЕ ПЕРЕНЕСЕНО НИЖЕ (см. «.adm-users-table { width: 100% }»).
   Здесь был полный дубль (~90 строк), который полностью затирался более поздним блоком.
   Из него сохранены только 3 объявления, которые реально побеждали в каскаде:
     .adm-users-table { font-size: 13px }     -> перенесено
     .adm-ur-row .dt  { white-space: nowrap } -> перенесено
     @media(720px) .adm-ur-row { gap: 6px 12px } -> перенесено
   Правила .adm-users-table th / td / tr:hover td удалены безвозвратно:
   admin.js:1275-1310 рендерит <div>-сетку, тегов <th>/<td>/<tr> в проекте ноль. */

@media (max-width: 720px) {
  .adm-ur-head { display: none; }
  .adm-ur-row {
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
  }
  .adm-ur-row .num,
  .adm-ur-row .dt {
    font-size: 11.5px;
    color: var(--tx2);
  }
}


.adm-ur-user {
  display: flex;
  align-items: center;
  gap: 10px
}

.adm-ur-name {
  font-weight: 800
}

.adm-ur-login {
  color: var(--tx3);
  font-size: 11.5px
}

.adm-stat-card {
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px 16px
}

.adm-stat-card b {
  display: block;
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 800
}

.adm-stat-card span {
  font-size: 11px;
  color: var(--tx3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em
}

/* Статистика модерации (очередь публикации, жалобы): раньше класс .adm-stats
   не имел стилей ВООБЩЕ — цифры и подписи «слипались» в одну строку. */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 16px
}

.adm-stats > div {
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 13px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.adm-stats > div b {
  font-family: var(--disp);
  font-size: 21px;
  line-height: 1;
  color: var(--tx)
}

.adm-stats > div span {
  font-size: 11.5px;
  color: var(--tx2);
  font-weight: 700;
  line-height: 1.35
}

#tagfCount {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center
}

.adm-stats-grid {
  display: grid;
  /* РАУНД 40: четыре карточки дашборда — аккуратная сетка 4/2/1, плитки внутри */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 16px
}

/* РАУНД 41: дашборд — строки «подпись слева, число справа + стрелка»:
   без гигантских жирных цифр, компактно и спокойно */
.adm-rows {
  display: flex;
  flex-direction: column
}

.adm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid var(--line2);
  font-size: 12.5px;
  color: var(--tx2)
}

.adm-row:first-child {
  border-top: none
}

.adm-row-v {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none
}

.adm-row b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx)
}

.adm-row.warn b {
  color: var(--cin2)
}

.adm-row.online b {
  color: var(--jade)
}

.an-cum-note {
  margin: 6px 2px 0;
  font-size: 11.5px;
  color: var(--tx3)
}

.adm-act-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  margin-bottom: 8px
}

.adm-act-icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surf3);
  font-size: 15px
}

.adm-act-title {
  font-weight: 800;
  font-size: 13px
}

.adm-act-body {
  font-size: 12.5px;
  color: var(--tx2);
  margin-top: 3px;
  line-height: 1.5
}

.adm-act-time {
  font-size: 10.5px;
  color: var(--tx3);
  margin-top: 5px;
  font-weight: 700
}

.adm-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px
}

.adm-meta {
  font-size: 11.5px;
  color: var(--tx3);
  font-weight: 700
}

.adm-friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px
}

.adm-friend {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surf)
}

.adm-online-list {
  margin-top: 8px
}

.adm-online-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 4px;
  font-size: 13px
}

.adm-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jade)
}

.adm-user-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px
}

.adm-user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 9px;
  margin: 14px 0
}

.adm-user-stat {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 10px;
  text-align: center
}

.adm-user-stat b {
  display: block;
  font-family: var(--disp);
  font-size: 17px
}

.adm-user-stat span {
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700
}

.adm-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px
}

.adm-user-comment,
.adm-user-notif {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.55
}

.sg-lbl {
  font-size: 11px;
  color: var(--tx3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em
}

.sg-old-line,
.sg-new-line {
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 10px;
  margin: 6px 0
}

.sg-old-line {
  background: rgb(var(--cin-rgb) / .1);
  border: 1px solid rgb(var(--cin-rgb) / .3);
  text-decoration: line-through;
  color: var(--tx2)
}

.sg-new-line {
  background: rgb(var(--jade-rgb) / .1);
  border: 1px solid rgb(var(--jade-rgb) / .35)
}

.sg-diff {
  font-size: 12px;
  color: var(--tx2)
}

.admin-wrap {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: sticky;
  top: calc(var(--top-h) + 14px)
}

.admin-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  /* прозрачная рамка в базе: при переключении .on геометрия не меняется и
     колонка разделов больше не «дёргается» */
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx2);
  text-align: left;
  transition: background .16s, color .16s, border-color .16s
}

.admin-nav-btn:hover {
  background: var(--surf);
  color: var(--tx)
}

.admin-nav-btn.on {
  background: var(--surf2);
  color: var(--tx);
  border: 1px solid var(--line)
}

.admin-nav-btn .anb-badge {
  margin-left: auto
}

.admin-work {
  min-width: 0
}

.admin-sec .editor-section {
  margin-bottom: 14px
}

@media (max-width:900px) {
  .admin-wrap {
    grid-template-columns: 1fr
  }

  .admin-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px
  }

  .admin-nav::-webkit-scrollbar {
    display: none
  }

  .admin-nav-btn {
    white-space: nowrap;
    flex: none
  }

  .msg-wrap {
    grid-template-columns: 1fr
  }

  .msg-list {
    max-height: 34vh
  }

  .msg-thread {
    max-height: 44vh
  }
}

/* ---------- обложка в редакторе ---------- */
.cover-set-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap
}

.cover-preview {
  width: 126px;
  aspect-ratio: 3/3.7;
  border-radius: 15px;
  border: 1.5px dashed rgb(var(--gold-rgb) / .45);
  background: rgb(var(--gold-rgb) / .05);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  flex: none;
  transition: .22s var(--ease)
}

.cover-preview:hover {
  border-color: var(--gold);
  transform: translateY(-2px)
}

.cover-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cover-preview .cover-ph {
  font-family: var(--brush);
  font-size: 30px;
  color: var(--tx3);
  pointer-events: none
}

.cover-preview.has-img {
  border-style: solid;
  border-color: var(--line)
}

.cover-preview.has-img .cover-ph {
  display: none
}

.cover-set-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 460px
}

.cover-set-acts .settings-hint {
  flex-basis: 100%;
  margin: 0 0 4px
}

/* ══════════ ИСПРАВЛЕНИЯ ДЕМО-ВЕРСИИ ══════════ */

/* навигация на планшетах: нижняя навигация до 1080, иначе разделы недоступны */
@media (max-width:1080px) {
  .botnav {
    display: block
  }

  main {
    padding-bottom: 120px
  }

  #toast {
    bottom: calc(84px + env(safe-area-inset-bottom))
  }
}

/* крупнее зона тапа у стрелки темы */
@media (hover:none) {
  .theme-wrap .caret {
    width: 32px
  }

  .theme-wrap .ico {
    width: 42px
  }

  .stars button {
    padding: 3px 2px
  }
}

/* карусели: место под тени и hover-подъём карточек */
.rail {
  padding: 12px 4px 30px;
  margin: -8px -4px -16px
}

/* метка-заглушка обложки: только там, где есть действие загрузки */
.card-art .art-ph {
  display: none
}

.art-ph {
  opacity: 0;
  transition: opacity .25s
}

.week-art:hover .art-ph,
.story-cover:hover .art-ph,
.cover-preview:hover .art-ph {
  opacity: 1
}

/* обложка истории по центру на планшетах */
@media (max-width:1080px) {
  .story-head>div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
  }

  .story-cover {
    width: 100%
  }

  .story-head .dropzone {
    width: 100%;
    max-width: 520px
  }
}

/* тёмная бумага: читаемость акцентов */
.sheet[data-paper="night"] .pbtn2.jade {
  color: #7fd8b4
}

.sheet[data-paper="night"] .dot.read:not(.cur) {
  color: #7fd8b4
}

.sheet[data-paper="night"] .ch-head .ru,
.sheet[data-paper="night"] .ch-head .m {
  color: var(--sh-mut)
}

.sheet[data-paper="night"] .pbtn {
  border-color: rgba(220, 215, 203, .35);
  background: rgba(255, 255, 255, .06)
}

.sheet[data-paper="night"] .ch-foot {
  border-top-color: rgba(220, 215, 203, .2)
}

/* панели: безопасная область iOS */
.panel-foot {
  padding-bottom: calc(14px + env(safe-area-inset-bottom))
}

.botnav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom))
}

/* меньше шума при повторных заходах на главную */
.week .brushline path {
  animation-duration: .9s
}

/* рейтинг-«пустышка» не показывает ноль */
.chip.rate-zero {
  display: none
}

/* reduced motion: никаких штампов и линий */
@media (prefers-reduced-motion:reduce) {
  .week-seal {
    animation: none;
    transform: rotate(-6deg)
  }

  .brushline path {
    animation: none;
    stroke-dashoffset: 0
  }

  .reveal,
  .card,
  .chrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
  }

  .week-art .art {
    transition: none
  }
}

/* фокус внутри поповеров и панелей */
.pop-panel button:focus-visible,
.panel button:focus-visible,
.botnav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px
}

/* длинные имена в шапке */
.pp-head b {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* селект в тёмной теме: стрелка светлее */

/* алиасы разметки банка слов и грамматики (learn.js) */
.bank-word {
  min-width: 78px;
  text-align: center;
  flex: none
}

.bank-py {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 3px
}

.bank-hz {
  font-family: var(--zh);
  font-size: 29px;
  font-weight: 900;
  cursor: pointer;
  transition: color .2s, transform .3s var(--pop)
}

.bank-hz:hover {
  color: var(--cin2);
  transform: scale(1.1)
}

.bank-means {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.bank-save {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 11px;
  border: 1px dashed rgb(var(--gold-rgb) / .48);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  transition: .24s var(--ease)
}

.bank-save:hover {
  background: rgb(var(--gold-rgb) / .12);
  border-style: solid;
  transform: translateY(-2px)
}

.bank-save.on {
  border-style: solid;
  border-color: var(--jade);
  color: var(--jade);
  background: rgb(var(--jade-rgb) / .12)
}

.bank-go {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surf3);
  display: grid;
  place-items: center;
  color: var(--tx2);
  transition: .2s var(--pop)
}

.bank-go:hover {
  background: var(--cin);
  color: #fff;
  transform: scale(1.1)
}

.gram-structure {
  display: inline-block;
  font-family: var(--zh);
  font-size: 15px;
  color: var(--cin2);
  background: rgb(var(--cin-rgb) / .09);
  border-left: 2px solid var(--cin);
  padding: 8px 13px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 11px
}

.gram-explain {
  color: var(--tx2);
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 74ch
}

.gram-exs .gram-ex {
  background: var(--surf);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 8px
}

/* финальные штрихи */
#catQ {
  width: 100%
}

.chip:empty {
  display: none
}

@media (max-width:760px) {
  .week-acts {
    align-items: stretch
  }

  /* «Читать первую главу» — во всю строку, иначе текст режется краем кнопки */
  .week-acts .btn.pri {
    flex: 1 1 100%;
    order: 1
  }

  .week-acts .btn.gho.lg {
    order: 2;
    flex: 1 1 auto
  }

  .week-acts .btn.sq {
    order: 3;
    flex: 0 0 52px
  }

  .week-acts .btn.lg {
    padding: 14px 18px;
    font-size: 14px
  }
}

.cat-chips.is-collapsed {
  max-height: 84px;
  overflow: hidden;
  position: relative;
}

.cat-chips.is-collapsed::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40px;
  background: linear-gradient(transparent, var(--surf2));
  pointer-events: none;
}

.cat-more {
  margin-top: 8px;
}

.cat-search-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* избранное: залитое сердце, красный акцент */
.btn.sq.on,
.btn.gho.on,
#weekFav.on,
#stFav.on {
  background: rgb(var(--cin-rgb) / .16);
  border-color: rgb(var(--cin-rgb) / .6);
  color: var(--cin2);
}

#pop.no-tr,
#pop.no-tr * {
  transition: none !important;
  animation: none !important;
}

/* комментарии и ответы в тредах: не вылезаем за границы */
.comment-form,
.thread-reply-box,
.msg-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
/* Слито со вторым определением ниже по файлу (было flex:1 1 240px без overflow-wrap).
   Победитель в каскаде задавал 240px; overflow-wrap:anywhere выживал только отсюда. */
.comment-form textarea,
.thread-reply-box textarea,
.msg-input-row textarea {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow-wrap: anywhere;
}
.comment-text,
.thread-card-text,
.cmt .comment-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* модалка «Мои рассказы»: безопасная ширина и переносы.
   ВАЖНО: размеры вешаем на КАРТОЧКУ, а не на маску (.drafts-modal) —
   маска position:fixed;inset:0, и width на ней ломал центрирование
   (модалка уезжала в левый верхний угол, фон закрывал пол-экрана). */
.drafts-modal .auth-card,
#draftsM .auth-card {
  box-sizing: border-box;
}
.drafts-modal *,
#draftsM * {
  box-sizing: border-box;
  min-width: 0;
}
.drafts-modal .draft-card,
#draftsM .draft-card {
  width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.drafts-modal .draft-card .title,
#draftsM .draft-card .title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}


/* .adm-users-bar: flex-версия удалена — ниже по файлу её полностью затирала grid-версия.
   flex-свойства у .bank-input / select / > * были inert при grid-родителе.
   Единственное выживавшее объявление (width:100%) перенесено в grid-правило. */

.adm-users-table { width: 100%; font-size: 13px; }   /* font-size — из удалённого дубля выше */
.adm-ur-head,
.adm-ur-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(6, minmax(0, .6fr)) minmax(90px, 1fr) minmax(110px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line2);
}
.adm-ur-row { cursor: pointer; transition: background .15s; }
.adm-ur-row:hover { background: var(--surf); }
.adm-ur-head {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}
.adm-ur-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-ur-row .dt { font-size: 11.5px; color: var(--tx3); white-space: nowrap; }
/* Кликабельный конверт «написать сообщение» в ряду пользователя */
.adm-mail {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--tx3);
  font-size: 14px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.adm-mail:hover {
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .14);
}

@media (max-width: 720px) {
  .adm-ur-head { display: none; }
  .adm-ur-row {
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    gap: 6px 12px;      /* выжило из удалённого дубля — второй блок gap не задавал */
  }
  .adm-ur-row .num,
  .adm-ur-row .dt { font-size: 11.5px; color: var(--tx2); }
}

.adm-users-bar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(150px, 1fr));
  gap: var(--gap-sm);
  margin-bottom: 14px;
  width: 100%;
}
@media (max-width: 980px) {
  .adm-users-bar {
    grid-template-columns: minmax(200px, 1fr) 1fr;
  }
}
@media (max-width: 560px) {
  .adm-users-bar {
    grid-template-columns: 1fr;
  }
}
.adm-users-bar > * {
  min-width: 0;
  width: 100%;
}

.drafts-modal .auth-card {
  width: min(680px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 26px 26px;
}
.drafts-modal .auth-card * {
  box-sizing: border-box;
  min-width: 0;
}
.drafts-modal .auth-card div[style*="font-weight:800"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* формы ответа — не вылезаем */
.comment-form,
.thread-reply-box,
.msg-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* длинные слова в текстах */
.comment-text,
.thread-card-text,
.notif-item,
.cmt .comment-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* РАУНД 17: «прыжок» задаётся классом .pop из JS (popHeart в social.js) —
   работает во всех контейнерах (комментарии рассказов, модалка обсуждения,
   #threadPosts, карточки тем) и не анимирует уже залайканные сердца
   при первичной отрисовке, как прежние селекторы по .liked. */
.comment-acts button .heart.pop,
.thread-like .heart.pop {
    animation: heartPop .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* «Прыжок» сердечка при лайке — та же пружинная анимация, что у избранного
   (favPop), перенесена на лайки в комментариях и обсуждениях. */
@keyframes heartPop {
  0%   { transform: scale(.5); }
  45%  { transform: scale(1.45); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* ============================================================
   UTILITY-КЛАССЫ — замена 313 инлайн-style в JS-шаблонах и index.html.
   Топ повторов, которые они закрывают:
     color:var(--cin2)                        x14  -> .tx-danger / .btn.danger
     color:var(--tx2)                         x12  -> .tx-muted
     color:var(--tx2);font-size:13px          x11  -> .note
     color:var(--gold)                        x10  -> .tx-accent
     color:var(--jade)                         x7  -> .tx-ok
     padding:6px 12px;font-size:12px           x6  -> .btn.xs
     flex:1;min-width:0                        x5  -> .fill
     font-family:'Unbounded';font-size:15px…   x4  -> .modal-title
     color:var(--tx2);text-align:center;…      x3  -> .placeholder
   ============================================================ */
.btn.danger            { color: var(--cin2); border-color: var(--cin2); }
.btn.danger:hover      { background: rgb(var(--cin-rgb) / .12); }
.btn.xs                { padding: var(--sp-2) var(--sp-4); font-size: 12px; }
.btn.sm                { padding: var(--sp-3) 14px; font-size: 12px; }

.tx-muted              { color: var(--tx2); }
.tx-dim                { color: var(--tx3); }
.tx-accent             { color: var(--gold); }
.tx-ok                 { color: var(--jade); }
.tx-danger             { color: var(--cin2); }

.note                  { color: var(--tx2); font-size: 13px; }
.note-xs               { color: var(--tx2); font-size: 10.5px; }
.note-sm               { color: var(--tx2); font-size: 11.5px; }
.placeholder           { color: var(--tx2); text-align: center; padding: 20px; }
.fill                  { flex: 1; min-width: 0; }
.modal-title           { font: 800 15px/1.3 var(--disp); margin-bottom: var(--sp-4); }
.modal-title-lg        { font: 800 18px/1.3 var(--disp); margin-bottom: 14px; }

/* ════════════════════════════════════════════════════════════
   REDESIGN v2 — правки UX/визуала (страница рассказа, модалки,
   панели, светлая тема, селекты-панели). Держим в конце файла,
   чтобы не бороться со специфичностью старых правил.
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. Факты рассказа прижаты к кнопкам действий ---------- */
.story-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}
.story-actions .info-line {
  margin-bottom: 0;
  padding: 14px 2px;
}
.story-actions .story-btns {
  margin-top: 0;
}

/* ---------- 2. Кнопка «В избранное»: нажатие вместо искр ---------- */
.fav-btn {
  /* Постоянная тонкая обводка, чтобы на hover не «появлялась» рамка и размер
     кнопки не скакал. */
  border: 1px solid var(--line);
  transition: transform .16s var(--pop), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.fav-btn:active {
  transform: scale(.93);
}
.fav-btn svg {
  transition: transform .3s var(--pop);
}
/* При наведении подсвечиваются розовым и сердечко, и контур. ID-селектор
   гарантированно перебивает .btn.gho:hover и его light-вариант (он ниже). */
#weekFav:hover,
#stFav:hover {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .7);
  background: rgb(var(--cin-rgb) / .1);
}
html[data-theme="light"] #weekFav:hover,
html[data-theme="light"] #stFav:hover {
  color: var(--cin);
}
/* Прыгает ТОЛЬКО сердечко. Кнопка целиком больше не масштабируется: прежняя
   favPress конфликтовала с translateY у .btn.gho:hover и давала «дёрганье». */
.fav-btn.on svg,
.fav-btn.fav-pulse svg {
  animation: favPop .45s var(--pop);
}
@keyframes favPop {
  0%   { transform: scale(.6); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* Подпись избранного на странице истории резервирует ширину, чтобы смена
   «В избранное» ↔ «В избранном» не меняла размер кнопки (и ничего не ехало). */
#stFav > span {
  display: inline-block;
  min-width: 6.2em;
  text-align: left;
}
.fav-btn.on {
  background: rgb(var(--cin-rgb) / .13);
  border: 1px solid rgb(var(--cin-rgb) / .45);
  color: var(--cin2);
}
html[data-theme="light"] .fav-btn.on {
  background: rgb(var(--cin-rgb) / .09);
  border-color: rgb(var(--cin-rgb) / .38);
  color: var(--cin);
}
@media (prefers-reduced-motion: reduce) {
  .fav-btn.on svg { animation: none; }
}

/* ---------- 3. Модалка обсуждения: высота + поле ввода ----------
   ЭКРАН ОБСУЖДЕНИЯ УВЕЛИЧЕН (было 760px/86vh) и возвращён отступ веток:
   раньше #threadPosts .cmt { margin-left: 0 } обнулял вложенность, из-за чего
   вертикальные линии разных веток (.cmt-line) рисовались в одной точке и
   наслаивались друг на друга.
   БАГ БЫЛ ЗДЕСЬ (раунд 20): в index.html у карточки стоял ИНЛАЙН-стиль
   max-width:760px;max-height:90vh — он перебивал это правило, поэтому окно
   на ПК так и не увеличилось, а ветки в узком окне жались и наползали. */
#threadViewM .auth-card {
  max-width: min(1240px, 96vw);
  max-height: 94vh;
  width: min(1240px, 96vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 28px 18px;
}
#threadPosts {
  --cstep: 28px;
}
#threadPosts .cmt {
  margin-left: calc(var(--cstep) * var(--d, 0));
}
@media (max-width: 720px) {
  #threadPosts {
    --cstep: 16px;
  }
}
#threadViewBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  margin-right: -8px;
}
#threadViewBody .thread-full-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.7;
  color: var(--tx2);
  font-size: 14px;
  margin-bottom: 14px;
}
.thread-reply-box {
  position: sticky;
  bottom: 0;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 0 4px;
  margin-top: 14px;
  border-top: 1px solid var(--line2);
  background: var(--surf2);
  box-shadow: 0 -10px 16px -12px rgb(0 0 0 / .45);
}
.thread-reply-box textarea,
#ntText,
#msgInput {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  overflow-wrap: anywhere;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.thread-reply-box textarea:focus,
#ntText:focus,
#msgInput:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surf2);
  box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .12);
}
.reply-to {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tx2);
  background: rgb(var(--gold-rgb) / .1);
  border: 1px solid rgb(var(--gold-rgb) / .3);
  border-radius: 10px;
  padding: 7px 11px;
}
.reply-to button {
  margin-left: auto;
  color: var(--tx3);
  font-size: 12px;
}
.reply-to button:hover { color: var(--cin2); }

/* строка обсуждения кликабельна целиком */
.thread-card { cursor: pointer; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.thread-card:hover { transform: translateY(-2px); border-color: rgb(var(--gold-rgb) / .4); }
.thread-card:active { transform: scale(.995); }

/* ---------- 4. Селекты как панели выбора ---------- */
.csel { position: relative; display: inline-block; }
.csel > select { 
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.csel-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 38px 12px 15px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  position: relative;
  /* одна строка + единая высота: длинный текст фильтра не переносится и
     не «распирает» ряд фильтров (раньше блок съезжал при 2 строках) */
  min-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.csel-btn > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-users-bar,
.adm-act-bar,
.tagf-bar {
  align-items: center;
}
.adm-users-bar .bank-input {
  min-height: 44px;
}
.csel-btn:hover { border-color: rgb(var(--gold-rgb) / .5); }
.csel-btn::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--tx3);
  border-bottom: 2px solid var(--tx3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s var(--ease);
}
.csel.open .csel-btn::after { transform: translateY(-30%) rotate(225deg); }
.csel.open .csel-btn {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .12);
}
.csel-panel {
  position: absolute;
  z-index: var(--z-pop);
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  padding: 6px;
  border-radius: 14px;
  background: var(--surf2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  max-height: 320px;
  overflow-y: auto;
}
.csel.drop-up .csel-panel {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom left;
}
.csel.open .csel-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.csel-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  text-align: left;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.csel-opt:hover { background: var(--surf3); color: var(--tx); }
.csel-opt.on {
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .12);
}
.csel-opt.on::before { content: '✓'; font-weight: 800; }
.csel-opt:not(.on)::before { content: ''; width: 12px; }

/* ---------- 5. Светлая тема: палитра контролов ---------- */
html[data-theme="light"] .tbtn.on,
html[data-theme="light"] #rPy.on {
  background: rgb(var(--jade-rgb) / .14);
  border-color: rgb(var(--jade-rgb) / .45);
  color: var(--jade);
  box-shadow: none;
}
html[data-theme="light"] .tbtn.on:hover { background: rgb(var(--jade-rgb) / .2); filter: none; }
html[data-theme="light"] .btn.pri {
  /* На бумаге: тон ещё легче, тень мягче. Цвет текста берётся из токена
     --pri-fg (базовое правило), поэтому hover-белый корректно его перебивает. */
  background: rgb(var(--cin-rgb) / .08);
  border-color: rgb(var(--cin-rgb) / .5);
  box-shadow: 0 1px 2px rgb(var(--cin-rgb) / .1);
}
html[data-theme="light"] .btn.pri:hover {
  background: var(--cin);
  border-color: var(--cin);
  box-shadow: 0 6px 18px rgb(var(--cin-rgb) / .22);
}
html[data-theme="light"] .btn.gho {
  background: var(--surf2);
  border: 1px solid var(--line);
  box-shadow: var(--sh-s);
}
html[data-theme="light"] .btn.gho:hover { background: #fff; }
/* золотой контур в светлой теме (иначе перебивается правилом .btn.gho выше) */
html[data-theme="light"] .btn.gho.gold {
  border-color: rgb(var(--gold-rgb) / .5);
  background: rgb(var(--gold-rgb) / .07);
  color: var(--gold);
}
html[data-theme="light"] .btn.gho.gold:hover {
  border-color: rgb(var(--gold-rgb) / .85);
  background: rgb(var(--gold-rgb) / .15);
  color: var(--gold);
}
html[data-theme="light"] .seg {
  background: rgb(58, 44, 26, .06);
}
html[data-theme="light"] .seg button.on {
  background: #fff;
  box-shadow: 0 1px 4px rgba(90, 68, 34, .16);
}
html[data-theme="light"] .bank-save {
  background: rgb(var(--gold-rgb) / .07);
}
html[data-theme="light"] .bank-save.on {
  background: rgb(var(--jade-rgb) / .12);
}
html[data-theme="light"] .msg-bubble.me {
  background: rgb(var(--cin-rgb) / .1);
  border-color: rgb(var(--cin-rgb) / .26);
}
html[data-theme="light"] .chip:not(.g) {
  background: #fff;
  border-color: var(--line);
}
html[data-theme="light"] .csel-btn,
html[data-theme="light"] .inp,
html[data-theme="light"] .editor-input,
html[data-theme="light"] .bank-input,
html[data-theme="light"] .auth-input {
  /* только цвет: шортхенд background сбрасывал бы caret у селектов */
  background-color: #fffdf8;
}
html[data-theme="light"] .csel-panel { background: #fffdf8; }
html[data-theme="light"] .csel-opt:hover { background: rgb(58, 44, 26, .06); }

/* ---------- 6. Панели словаря/уведомлений: отступ сверху ---------- */
.panel-head { padding: calc(16px + env(safe-area-inset-top)) 22px 14px; }

/* ---------- 7. Грамматика: токены без перевода ---------- */
.gtok {
  cursor: pointer;
  border-bottom: 1px dotted rgb(var(--gold-rgb) / .55);
  transition: color .15s;
}
/* Наведение — подчёркивание как в читалке, НЕ прямоугольник */
.gtok:hover {
  color: var(--cin);
  background: none;
  text-decoration: underline;
  text-decoration-color: rgb(var(--cin-rgb) / .55);
  text-underline-offset: 5px;
}
.gtok.unk { border-bottom-color: rgb(var(--tx3) / .5); }
.gtok.unk:hover { color: var(--cin); background: none; }
.gtok.loading { opacity: .55; }

/* ---------- 8. «Мои рассказы»: карточки и воздух ---------- */
.drafts-modal .auth-card { padding: 26px 26px 22px; }
.drafts-sec { margin-bottom: 22px; }
.drafts-sec:last-child { margin-bottom: 4px; }
.drafts-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800;
  margin: 0 0 12px;
}
.drafts-sec-h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line2);
}
.draft-card {
  padding: 14px 16px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 14px;
  margin-bottom: 10px;
}
.draft-card:hover { border-color: var(--line); }
.draft-card .dc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.draft-card .dc-title { font-weight: 800; font-size: 15px; line-height: 1.35; }
.draft-card .dc-zh { color: var(--gold); font-size: 13px; margin-top: 2px; }
.draft-card .dc-status { font-size: 12px; white-space: nowrap; flex: none; }
.draft-card .dc-note {
  font-size: 12px;
  color: var(--cin2);
  margin-top: 8px;
  padding: 8px 10px;
  background: rgb(var(--cin-rgb) / .1);
  border-radius: 8px;
}
.draft-card .dc-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.draft-card .dc-meta { font-size: 12px; color: var(--tx2); margin-top: 4px; }

/* ---------- 9. Модерация/админка: стилизованные поля ---------- */
.admin-sec input[type="text"],
.admin-sec input[type="search"],
.admin-sec input[type="number"],
.admin-sec input[type="date"],
.admin-sec textarea,
.admin-sec select,
#edModerateBanner input,
#edModerateBanner textarea,
#edModerateBanner select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.admin-sec select,
#edModerateBanner select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.admin-sec input:focus,
.admin-sec textarea:focus,
.admin-sec select:focus,
#edModerateBanner input:focus,
#edModerateBanner textarea:focus,
#edModerateBanner select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--surf2);
  box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .12);
}
.admin-sec textarea,
#edModerateBanner textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
#edModerateBanner { gap: 10px; }
#edModerateBanner .btn { flex: none; }

/* ---------- 10. Ответ в диалоге ---------- */
.msg-quote {
  display: block;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 2px solid rgb(var(--gold-rgb) / .6);
  background: rgb(var(--gold-rgb) / .1);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: var(--tx2);
  max-height: 62px;
  overflow: hidden;
}
.msg-quote b { color: var(--gold); font-weight: 800; }
.msg-bubble .msg-reply-btn {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--tx3);
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.msg-bubble:hover .msg-reply-btn { opacity: 1; }
.msg-bubble .msg-reply-btn:hover { color: var(--gold); }
.msg-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line2);
  background: rgb(var(--gold-rgb) / .08);
  font-size: 12.5px;
  color: var(--tx2);
}
.msg-reply-bar b { color: var(--gold); }
.msg-reply-bar button { margin-left: auto; color: var(--tx3); }
.msg-reply-bar button:hover { color: var(--cin2); }

/* ---------- 11. Справка редактора: грамматика ---------- */
#refP .ref-gram {
  display: block;
  padding: 13px 14px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  margin-bottom: 9px;
}
#refP .ref-gram .ref-gram-head { margin-bottom: 8px; }
#refP .ref-gram .ref-gram-head .hz {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 20px;
  color: var(--gold);
}
#refP .ref-gram .ref-gram-title { font-weight: 800; font-size: 13px; }
#refP .ref-gram .mid { display: block; min-width: 0; }
#refP .ref-gram .ref-gram-structure { font-size: 13.5px; margin-bottom: 8px; }
#refP .ref-gram .ref-gram-explain { font-size: 12.5px; margin-bottom: 0; }
#refP .ditem.ref-gram > button.p {
  position: absolute;
  right: 12px;
  top: 12px;
}
#refP .ditem.ref-gram { position: relative; padding-right: 40px; }

/* ---------- 12. Поверхность чтения: плавная смена бумаги ----------
   Регистрируем цвета как анимируемые custom properties: раньше
   background переходил между градиентом (бумага/ночь) и плоским
   цветом (сепия) — такое не интерполируется, поэтому сепия «лагала». */
@property --sh-bg1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ece2cc;
}
@property --sh-bg2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #ded1b4;
}
.sheet {
  --sh-bg1: var(--paper);
  --sh-bg2: var(--paper2);
  background: linear-gradient(176deg, var(--sh-bg1), var(--sh-bg2));
  transition:
    --sh-bg1 .45s var(--ease),
    --sh-bg2 .45s var(--ease),
    color .4s var(--ease);
}
.sheet[data-paper="sepia"] {
  --sh-bg1: #eaddbf;
  --sh-bg2: #e0cda4;
}
.sheet[data-paper="night"] {
  --sh-bg1: #1a1e26;
  --sh-bg2: #151922;
}

/* ---------- 13. Админка: карточки очередей и редакторов ----------
   Раньше .adm-card / .adm-top / .adm-acts / .gram-ed-row не имели
   стилей вообще — списки модерации слипались в одну кашу. */
.adm-card {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 15px 17px;
  margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.adm-card:hover { border-color: var(--line); }
.adm-card:last-child { margin-bottom: 0; }
.adm-top { margin-bottom: 12px; }
.adm-title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.adm-title .zh { font-family: var(--zh); }
.adm-meta {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.6;
  margin-top: 2px;
}
.adm-acts {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px dashed var(--line2);
}
.adm-acts .btn { padding: 8px 15px; font-size: 12.5px; }

.gram-ed-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
.gram-ed-row .gr-meta { flex: 1; min-width: 0; }
.gram-ed-row .gr-actions {
  display: flex;
  gap: 7px;
  flex: none;
}
.we-mean-input {
  width: 100%;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--surf2);
  border: 1px solid var(--gold);
  color: var(--tx);
  font-size: 12.5px;
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .14);
}
.we-mean-input:focus { outline: none; }

/* модерационный баннер в редакторе: инлайн-стили задают flex-ряд,
   здесь только выравниваем кнопки и текст по центру на узких экранах */
@media (max-width: 700px) {
  #edModerateBanner { flex-direction: column; align-items: stretch !important; }
  #edModerateBanner .btn { width: 100%; }
}

/* ══════════ РАУНД 4: примеры, модерация, редактор ══════════ */
.ex-fs {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.ex-fs button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surf);
  color: var(--tx2);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: .15s;
}
.ex-fs button:hover {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .5);
}
.example-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.ex-play {
  flex: none;
  width: 34px;
  height: 34px;
  margin-top: 6px;
  border-radius: 50%;
  border: 1px solid rgb(var(--gold-rgb) / .45);
  background: rgb(var(--gold-rgb) / .08);
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s;
}
.ex-play:hover { background: rgb(var(--gold-rgb) / .18); }
.ex-main { flex: 1; min-width: 0; }

/* плавающая кнопка «назад в модерку» после перехода в историю */
.back-to-mod {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 380;
  box-shadow: var(--sh-m);
}

/* модалка «Мои рассказы»: скролл внутри карточки, а не снаружи */
.drafts-modal .auth-card {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* баннер «Дописываем главы к рассказу» */
.editor-append {
  background: rgb(var(--gold-rgb) / .08);
  border: 1px solid rgb(var(--gold-rgb) / .35);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 16px;
}

/* кастом-селекты в панелях фильтров (жалобы/теги) */
.tagf-bar .csel { flex: 1; min-width: 170px; }

/* шапка таблицы пользователей: числа справа, как в строках */
.adm-ur-head .num { text-align: right; }

/* ══════════ РАУНД 7: аналитика дашборда ══════════ */
.dlt {
  font-size: 11px;
  font-weight: 800;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.dlt.up { color: var(--jade); background: rgb(var(--jade-rgb) / .13); }
.dlt.down { color: var(--cin2); background: rgb(var(--cin-rgb) / .13); }
.dlt.zero { color: var(--tx3); background: var(--surf); }
.an-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
}
.an-chart {
  flex: 2 1 340px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px;
}
.an-bar { fill: var(--gold); }
.an-table {
  flex: 1 1 260px;
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  overflow: hidden;
}
.an-table th,
.an-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line2);
  text-align: left;
}
.an-table tr:last-child td { border-bottom: 0; }
.an-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx3);
}
.an-table td.num,
.an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ══════════ РАУНД 8: аналитика-2 ══════════ */
/* строка карточки: метка слева, число и стрелка дельты — НА ОДНОЙ ЛИНИИ справа */
.adm-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adm-stat-row > span:first-child {
  flex: 1;
  min-width: 0;
}
.adm-stat-row b {
  display: inline-block;
}
.adm-stat-row .dlt {
  margin-left: 0;
}
.an-type {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.an-type button {
  border: 0;
  background: transparent;
  color: var(--tx2);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
}
.an-type button.on {
  background: var(--gold);
  color: #241a08;
}
.an-pop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.an-pop-col {
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 12px 14px;
}
.an-pop-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx3);
  margin: 0 0 9px;
}
.an-pop-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line2);
}
.an-pop-row:last-child { border-bottom: 0; }
.an-pop-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tx);
}
.an-pop-row b {
  flex: none;
  color: var(--tx2);
  font-weight: 700;
  font-size: 11.5px;
}

/* ══════════ РАУНД 9: редактор примеров грамматики ══════════ */
.ge-ex {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 9px;
}
.ge-toks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ge-tok {
  display: inline-grid;
  grid-template-columns: 74px 84px 1fr auto;
  gap: 4px;
  align-items: center;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 5px 6px;
}
.ge-tok input {
  border: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 12px;
  min-width: 0;
  padding: 2px 3px;
}
.ge-tok input:focus { outline: none; background: rgb(var(--gold-rgb) / .1); border-radius: 5px; }
.ge-tok .ge-t { font-family: var(--zh); font-size: 15px; font-weight: 700; }
.ge-tok .ge-p { color: var(--gold); }
.ge-tok .ge-r { color: var(--tx2); }
.ge-tok .ge-x {
  border: 0; background: none; cursor: pointer;
  color: var(--tx3); font-size: 14px; line-height: 1; padding: 2px 4px;
}
.ge-tok .ge-x:hover { color: var(--cin2); }
.ge-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gram-src.link { cursor: pointer; color: var(--gold); }
.gram-src.link:hover { text-decoration: underline; }

/* ══════════ РАУНД 10: воздух дашборда, широкие графики, токены грамматики ══════════ */
.adm-stats-grid { gap: 16px; }
.adm-stat-card { padding: 20px 22px; }
.adm-stat-card h4 { margin-bottom: 14px; }
.adm-stat-row { padding: 7px 0; }

.an-wrap { display: block; }
.an-chart { width: 100%; }
.an-table { margin-top: 14px; width: 100%; }

/* токен примера грамматики — карточка-колонка (ничего не накладывается) */
.ge-tok {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 8px 9px;
  min-width: 132px;
  grid-template-columns: none;
}
.ge-tok .ge-t {
  border: 0;
  background: transparent;
  color: var(--tx);
  font-family: var(--zh);
  font-size: 17px;
  font-weight: 700;
  padding: 0 2px;
  width: 100%;
}
.ge-sub {
  display: flex;
  gap: 4px;
}
.ge-sub input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  color: var(--tx2);
  padding: 2px 3px;
}
.ge-sub .ge-p { color: var(--gold); }
.ge-tok input:focus {
  outline: none;
  background: rgb(var(--gold-rgb) / .1);
  border-radius: 5px;
}
.ge-ops {
  display: flex;
  gap: 2px;
}
.ge-ops button {
  border: 0;
  background: none;
  color: var(--tx3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  transition: .15s;
}
.ge-ops button:hover {
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .12);
}

/* ══════════ PERF-АУДИТ: reduced-motion глушит бесконечные анимации ══════════ */
@media (prefers-reduced-motion: reduce) {
  .pulse::after,
  .pbtn.busy,
  .drift span {
    animation: none !important;
  }
}

/* ══════════ РАУНД 11: темнее печати в тёмной теме ══════════ */
html[data-theme="dark"] .seal,
html[data-theme="dark"] .week-seal {
  background: linear-gradient(150deg, var(--cin), color-mix(in srgb, var(--cin) 68%, #000));
  box-shadow: 0 4px 14px rgb(var(--cin-rgb) / .32), inset 0 0 0 1.5px rgba(255, 255, 255, .13);
}

/* ══════════ РАУНД 13 ══════════ */
/* РАУНД 17: в #authM первым ребёнком .auth-card идёт кнопка ✕, а не вкладки —
   старый селектор :first-child не срабатывал, крестик наезжал на «Регистрация».
   Смежный селектор матчится только в модалке входа (в остальных после ✕ идёт h2/body). */
.auth-card > .auth-close + .auth-tabs {
  margin-top: 30px;   /* место под крестик, чтобы не наезжал на вкладки */
}

/* ══════════ МОБИЛЬНЫЙ ПРОХОД (основной поток — телефоны) ══════════ */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }

  /* шапка */
  .top { padding-inline: 10px; gap: 8px; }
  .brand-tx small { display: none; }
  .top-right { gap: 6px; }
  .ico { width: 38px; height: 38px; }
  /* «Словарь» сжимается до иконки, чтобы шапка не переполнялась */
  .wide-ico { width: 38px; }
  .wide-ico > span:not(.zh):not(.cnt) { display: none; }

  /* история недели */
  .week { padding: 12px; gap: 14px; }
  .week-art { max-width: 240px; }
  .week-seal { width: 46px; height: 46px; font-size: 12px; left: -6px; top: -6px; }
  .week-acts { gap: 8px; }
  .week-acts .btn.lg { flex: 1 1 100%; }
  .week-acts .btn.sq { flex: none; width: 46px; }

  /* продолжить чтение */
  .resume { gap: 12px; padding: 12px 14px; }
  .resume .art { width: 56px; flex: none; }
  .resume-b { min-width: 0; }
  .resume-b b { font-size: 15px; }
  .resume > .btn { display: none; }   /* вся карточка — кнопка, пилюля лишняя */

  /* карусели: карточка уже, соседняя «подглядывает» */
  .rail { gap: 12px; }
  .rail > * { width: 232px; }
  .card { width: 232px; }

  /* страница истории */
  .story-head { grid-template-columns: 1fr; gap: 14px; }
  .story-cover { max-width: 210px; margin: 0 auto; width: 100%; }
  .story-acts { flex-wrap: wrap; gap: 8px; }
  .story-acts .btn.pri { flex: 1 1 100%; }
  .story-acts .btn:not(.pri) { flex: 1 1 auto; }
  .rate-box { flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px 14px; }
  .stars button { font-size: 21px; }
  .chrow { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .chrow .tt { flex: 1 1 60%; min-width: 0; }
  .chrow .meta { order: 5; flex-basis: 100%; font-size: 11px; }
  .chrow .play-ch { margin-left: auto; }

  /* читалка: панель без наездов, подписи скрыты — иконки */
  .rbar { gap: 7px; padding: 8px 10px; top: calc(var(--top-h) + 4px); }
  .rbar .lbl { display: none; }
  .rtools { flex-wrap: wrap; gap: 7px; }
  .tbtn { padding: 8px 10px; }
  .seg button { padding: 7px 9px; font-size: 11.5px; }
  .rtitle { min-width: 0; }
  .rtitle b { font-size: 12.5px; }
  .rtitle small { display: none; }
  .sheet { padding: 20px 14px 30px; }
  .comment-form { flex-direction: column; }
  .comment-form .btn { align-self: stretch; }

  /* фильтры — столбиком, ничего не наезжает */
  .tagf-bar, .adm-users-bar, .adm-act-bar { flex-direction: column; align-items: stretch; }
  .tagf-bar .csel, .tagf-bar input, .adm-users-bar .bank-input { min-width: 0; width: 100%; }
  #tagfCount { justify-content: flex-start; }

  /* модалки */
  .auth-card { padding: 20px 16px; }
  .auth-tabs button { font-size: 12.5px; padding: 10px 8px; }
  .examples-search .btn { flex: 1 1 100%; }
  .ex-fs { margin-left: 0; }
  .example-item { gap: 8px; }
  .ex-play { width: 30px; height: 30px; }
}

/* совсем узкие экраны */
@media (max-width: 420px) {
  .brand-tx b { font-size: 14px; }
  .beta { display: none; }
  .stars button { font-size: 19px; }
  .seg button { padding: 6px 7px; font-size: 11px; }
  .week-zh { font-size: 26px; }
  .ge-tok { min-width: 100%; }
}

/* таблица пользователей: горизонтальный скролл вместо «каши» */
@media (max-width: 760px) {
  .adm-users-table { overflow-x: auto; }
  .adm-ur-head { display: grid; }
  .adm-ur-head,
  .adm-ur-row {
    min-width: 720px;
    grid-template-columns: minmax(200px, 2fr) repeat(6, minmax(0, .6fr)) minmax(80px, 1fr) minmax(100px, 1fr);
  }
}

/* ══════════ ПЛАНШЕТНЫЙ ПРОХОД (641–1080) ══════════ */
/* альбомные планшеты: неделе хватает места на две колонки */
@media (min-width: 820px) and (max-width: 1080px) {
  .week {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 26px
  }

  .week-art {
    max-width: none;
    margin: 0
  }
}

/* портрет и узкие планшеты */
@media (max-width: 900px) {
  .story-head {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px
  }

  .chrow {
    flex-wrap: wrap;
    gap: 10px
  }

  .chrow .tt {
    flex: 1 1 55%;
    min-width: 0
  }

  .chrow .meta {
    order: 5;
    flex-basis: 100%;
    font-size: 11.5px
  }

  /* панель читалки: длинные подписи скрываем, короткие оставляем */
  #playCh .lbl,
  #animBtn .lbl {
    display: none
  }

  .rail > * {
    width: 260px
  }

  .card {
    width: 260px
  }

  .editor-section {
    padding: 18px
  }
}

@media (max-width: 760px) {
  /* шапка: «Словарь» иконкой, чтобы не переполнить узкий планшет */
  .wide-ico {
    width: 38px
  }

  .wide-ico > span:not(.zh):not(.cnt) {
    display: none
  }

  .stars button {
    font-size: 22px
  }

  .week-acts .btn.lg {
    flex: 1 1 auto
  }
}

/* ══════════ РАУНД 15: единый редактор токенов (черновик + грамматика) ══════════ */
.editor-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.editor-token {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surf2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 10px 11px;
  min-width: 152px;
  flex: 0 1 auto;
  transition: border-color .15s;
}
.editor-token:hover { border-color: var(--line); }
.editor-token.wide { flex: 1 1 100%; }
.editor-token.punct {
  min-width: 0;
  padding: 8px 12px;
  justify-content: center;
  background: var(--surf);
}
.editor-token.punct .hz {
  color: var(--tx3);
  font-size: 16px;
}
.editor-token.unknown {
  border-color: rgb(var(--cin-rgb) / .5);
  background: rgb(var(--cin-rgb) / .07);
}
.editor-token .hz,
.editor-token .hz-in {
  font-family: var(--zh);
  font-size: 19px;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.25;
}
.editor-token .hz-in {
  border: 0;
  background: transparent;
  padding: 0 1px;
  width: 100%;
  min-width: 0;
}
.editor-token .hz-in:focus {
  outline: none;
  background: rgb(var(--gold-rgb) / .08);
  border-radius: 6px;
}
.editor-token input.pinyin,
.editor-token input.ru {
  border: 1px solid var(--line2);
  background: var(--surf);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--tx2);
  width: 100%;
  min-width: 0;
}
.editor-token input.pinyin { color: var(--gold); font-weight: 700; }
.editor-token input.ru { color: var(--tx); }
.editor-token input.pinyin:focus,
.editor-token input.ru:focus {
  outline: none;
  border-color: rgb(var(--gold-rgb) / .6);
}
.tok-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tok-acts button {
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--tx2);
  border-radius: 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
  transition: .15s;
}
.tok-acts button:hover { color: var(--gold); border-color: rgb(var(--gold-rgb) / .5); }
.tok-acts button.del:hover { color: var(--cin2); border-color: rgb(var(--cin-rgb) / .5); }
.tok-add {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--tx2);
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: .15s;
  align-self: stretch;
}
.tok-add:hover { color: var(--gold); border-color: rgb(var(--gold-rgb) / .5); }
.mean-pick {
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--gold);
  border-radius: 7px;
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  align-self: flex-start;   /* РАУНД 17: в колонке .editor-token не растягиваться на всю ширину */
}

/* РАУНД 17: выпадающее меню значений/чтений. Раньше у .mean-menu/.mean-item
   не было НИ ОДНОГО правила: appended в body блок оставался position:static,
   инлайновые left/top игнорировались, меню уезжало в конец документа без
   фона — стрелка ▾ «не работала». */
.mean-menu {
  position: fixed;
  z-index: var(--z-pop, 500);
  min-width: 150px;
  max-width: min(320px, calc(100vw - 16px));
  max-height: 45vh;
  overflow-y: auto;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--sh-l);
  padding: 5px;
  animation: popIn .16s var(--pop, ease)
}

.mean-item {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tx2);
  cursor: pointer;
  transition: background .15s, color .15s
}

.mean-item:hover {
  background: var(--surf3);
  color: var(--tx)
}

.mean-item.on {
  color: var(--gold);
  font-weight: 800;
  background: rgb(var(--gold-rgb) / .1)
}

/* ══════════ РАУНД 16: дизайн редактора черновика (главы/параграфы) ══════════ */
.editor-chapter {
  background: var(--surf);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px 15px;
  margin-bottom: 12px;
  transition: border-color .2s
}

.editor-chapter:hover {
  border-color: var(--line)
}

.editor-chapter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer
}

.editor-chapter-head .toggle-icon {
  flex: none;
  color: var(--tx3);
  font-size: 11px;
  transition: transform .2s var(--ease)
}

.editor-chapter.collapsed .toggle-icon {
  transform: rotate(-90deg)
}

.editor-chapter.collapsed .editor-chapter-body {
  display: none
}

.ch-title-ru {
  flex: 1 1 220px;
  min-width: 0
}

.ch-title-zh {
  flex: 1 1 200px;
  min-width: 0
}

.editor-para {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surf2)
}

.editor-para-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px
}

.editor-para-head > span {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800
}

/* мобильная/планшетная раскладка редактора */
@media (max-width: 760px) {
  .editor-chapter-head .btn {
    flex: none
  }

  .ch-title-ru,
  .ch-title-zh {
    flex: 1 1 100%
  }
}

/* ══════════ РАУНД 17: редактор-2 ══════════ */
/* Подсказки (placeholder) везде читаются UI-шрифтом, даже если поле
   предназначено для иероглифов: русский текст плейсхолдера не «сербится». */
.para-textarea::placeholder,
.ch-title-zh::placeholder,
.ch-title-ru::placeholder,
.editor-input::placeholder {
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .75;
}

/* инфо-строки сегментации: «Распознано автоматически», «Заполнено» */
div[id^="edSegInfo"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  /* РАУНД 38: чипы статистики параграфа не должны прилипать к карточкам
     слов снизу — отступ до сетки токенов */
  margin-bottom: 10px;
}
div[id^="edSegInfo"]:empty {
  margin-top: 0;
  margin-bottom: 0;
}
.seg-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surf);
  border: 1px solid var(--line2);
  color: var(--tx2);
}
.seg-info.good {
  color: var(--jade);
  border-color: rgb(var(--jade-rgb) / .4);
  background: rgb(var(--jade-rgb) / .08);
}
.seg-info.mid {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .4);
  background: rgb(var(--gold-rgb) / .08);
}
.seg-info.low {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .4);
  background: rgb(var(--cin-rgb) / .08);
}

/* селекты жанра/уровня в редакторе растянуты на половину формы, как раньше */
.editor-grid .csel,
.editor-field .csel {
  display: block;
  width: 100%;
}
.editor-field label {
  font-size: 11px;
  letter-spacing: .08em;
}

/* ══════════ РАУНД 18: примеры грамматики как параграфы, «Все» → сетка ══════════ */
/* Карточка примера повторяет параграф редактора черновика: заголовок
   «ПРИМЕР n» + кнопки, текст/токены, нижний ряд с привязкой к рассказу. */
.ge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

.ge-head > span {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx3);
  font-weight: 800
}

.ge-head-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

/* РАУНД 17: значок «!» — пример ни разу не разбит на слова:
   на сайте он показывается простым текстом, наведение на слова не работает.
   Ставится в шапке примера (geRender) и в списке правил (renderGramEd). */
.ge-bang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 9px;
  background: rgb(var(--gold-rgb) / .15);
  border: 1px solid rgb(var(--gold-rgb) / .55);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
  flex: none;
  vertical-align: middle
}

/* текст примера до разбивки — иероглифическим шрифтом, как параграф */
.ge-ta {
  font-family: var(--zh);
  font-size: 16px;
  line-height: 1.75;
  min-height: 54px;
  resize: vertical
}

.ge-raw-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 8px;
  margin-top: 8px
}

/* «Все →» с полки приземляет сразу на сетку рассказов: грид не прячется
   под липкую шапку при scrollIntoView */
#catGrid {
  scroll-margin-top: calc(var(--top-h) + 14px)
}

@media (max-width: 640px) {
  .ge-raw-row {
    grid-template-columns: 1fr
  }
}


/* ---------- плашки ролей у ников (Админ / Мод / β-тестер) ---------- */
.ubadge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  user-select: none;
}
.ubadge.ub-admin {
  background: rgba(232, 73, 47, .14);
  border: 1px solid rgba(232, 73, 47, .45);
  color: #e8492f;
}
.ubadge.ub-mod {
  background: rgba(216, 162, 74, .14);
  border: 1px solid rgba(216, 162, 74, .5);
  color: var(--gold, #d8a24a);
}
.ubadge.ub-beta {
  background: rgba(94, 168, 130, .14);
  border: 1px solid rgba(94, 168, 130, .5);
  color: var(--jade, #5ea882);
}


/* ---------- плашка автора на странице рассказа ----------
   Три РАЗДЕЛЬНЫХ блока в ряд: «Автор» / «Добавил» / «Опубликовано».
   Без эмодзи; ник «Добавил» (и «Автор», если это тот же пользователь) —
   ссылка-кнопка .uname на профиль. */
.story-author-plate {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin: 2px 0 14px;
}

.story-author-plate .sap-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 16px;
  background: var(--surf2, rgba(255, 255, 255, .03));
  border: 1px solid var(--line2, rgba(255, 255, 255, .08));
  border-radius: 12px;
  font-size: 12.5px;
}

.story-author-plate .sap-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
}

.story-author-plate .sap-value {
  color: var(--tx);
  min-width: 0;
  overflow-wrap: anywhere;
}

.story-author-plate .sap-value b {
  color: var(--tx);
  font-weight: 700;
}

.story-author-plate .sap-value .uname {
  font-size: 12.5px;
}

@media (max-width: 560px) {
  .story-author-plate { gap: 8px; }
  .story-author-plate .sap-block { flex: 1 1 calc(50% - 8px); padding: 8px 12px; font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 20 — МОБИЛЬНЫЙ ПРОХОД (запрос владельца)
   1) история недели: обложка на всю область, текст — снизу на
      плавно затемнённой (тёмная тема) / засветлённой (светлая) подложке;
   2) карточки в каруселях компактнее;
   3) вкладки «Полка / Банк слов / Грамматика» без горизонтального скролла.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ---------- история недели: полнообложечная ---------- */
  .week {
    display: block;
    position: relative;
    padding: 0;
    height: clamp(470px, 74vh, 640px);
    overflow: hidden;
  }
  .week-art {
    position: absolute;
    inset: 0;
    max-width: none;
  }
  .week-art .art {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .week-seal { left: 8px; top: 8px; }
  .week-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: block;
    padding: 54px 16px 16px;
    /* цвет-в-цвет с фоном страницы (--ink0) */
    background: linear-gradient(to top,
      rgb(var(--ink0-rgb) / .99) 0%,
      rgb(var(--ink0-rgb) / .88) 38%,
      rgb(var(--ink0-rgb) / .48) 68%,
      rgb(var(--ink0-rgb) / 0) 100%);
  }
  /* описание и цитата не влезают на обложку — они есть на странице рассказа */
  .week-desc, .week-quote { display: none; }
  .week-zh { font-size: clamp(26px, 8.4vw, 36px); }
  .week-ru { font-size: 14px; }
  .week-body .meta-row { gap: 6px; }
  .week-body .meta-row .chip { font-size: 10.5px; padding: 3px 9px; }
  .week-acts { margin-top: 12px; }

  /* ---------- карусели: карточки компактнее прежних 232px ---------- */
  .rail { gap: 10px; }
  .rail > * { width: 210px; }
  .card-art .art-glyph { font-size: 74px; }
  .card-b { padding: 10px 11px 12px; gap: 6px; }
  .card-ovl h3 { font-size: 17px; }
  .card-ovl-ru { font-size: 10.5px; }
  .card-ovl-desc { font-size: 10.5px; line-height: 1.45; }
  .card-chips { gap: 4px; }
  .card-chips .chip { font-size: 9.5px; padding: 2px 7px; }
  .card-foot { padding-top: 8px; }
  .card-foot .row { margin-bottom: 7px; gap: 7px; }
  .card-foot small { font-size: 9.5px; }
  .card-foot .go { padding: 8px; font-size: 11px; border-radius: 10px; gap: 5px; }
  .card-foot .go svg { width: 12px; height: 12px; }
  .card-badges .chip { font-size: 9.5px; padding: 2px 7px; }
  .card-rate { font-size: 10px; padding: 3px 7px; }

  /* ---------- вкладки библиотеки: без горизонтального скролла ---------- */
  .lib-tabs {
    overflow-x: visible;
    display: flex;
    gap: 2px;
  }
  .lib-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 10px 4px;
    font-size: 11.5px;
    gap: 5px;
    white-space: nowrap;
  }
  .lib-tab svg { width: 14px; height: 14px; flex: none; }
  .lib-tab.on::after { left: 8px; right: 8px; }
}
@media (max-width: 380px) {
  .lib-tab { font-size: 10.5px; padding: 9px 2px; }
  .lib-tab svg { width: 13px; height: 13px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 20 — МЕССЕНДЖЕР: шапка диалога + мобильный двухэкранный режим
   (список диалогов ⇄ чат на весь экран, кнопка «назад»)
   ════════════════════════════════════════════════════════════ */
.msg-peer {
  position: sticky;
  top: -18px;               /* компенсирует padding треда */
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -18px -18px 10px;
  padding: 12px 16px;
  background: var(--surf2);
  border-bottom: 1px solid var(--line2);
  font-weight: 800;
  font-size: 14px;
}
.msg-back {
  display: none;            /* видна только на мобильных */
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--tx);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  /* два экрана: или список, или чат — чат занимает всю доступную высоту */
  .msg-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: calc(100vh - var(--top-h, 64px) - 150px);
    max-height: 760px;
  }
  .msg-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
  }
  .msg-chat {
    flex: 1;
    min-height: 0;
    display: none;
  }
  #vMsg.chat-open .msg-list { display: none; }
  #vMsg.chat-open .msg-chat { display: flex; }
  #vMsg .msg-empty { display: none !important; }
  .msg-thread {
    flex: 1;
    max-height: none;
    padding: 14px 12px;
  }
  .msg-peer {
    margin: -14px -12px 10px;
    padding: 10px 12px;
    top: -14px;
  }
  .msg-back { display: inline-flex; }
  .msg-bubble {
    max-width: 86%;
    font-size: 14px;
    padding: 10px 13px;
  }
  .msg-bubble .msg-reply-btn { opacity: 1; }   /* на тач-устройствах всегда видна */
  .msg-input-row {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surf2);
  }
  .msg-input-row textarea { min-height: 44px; font-size: 15px; }  /* 15px+ — iOS не зумит */
  .msg-conv { padding: 13px 12px; gap: 11px; }
  .msg-conv .comment-avatar,
  .msg-conv .av { width: 42px; height: 42px; }
  .msg-conv-name { font-size: 14px; }
  .msg-conv-last { font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 20 — ЧИТАЛКА: компактная плашка на мобильных
   (основной ряд: назад / глава / 拼 / слушать; остальное — за «⋯»)
   ════════════════════════════════════════════════════════════ */
.rtoggle { display: none; }
@media (max-width: 640px) {
  .rbar { gap: 6px; padding: 6px 9px; margin-bottom: 14px; }
  .rbar .back { padding: 7px; }
  .rtitle b { font-size: 12px; }
  .rtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }
  /* вторичные инструменты: скрыты, пока не нажата «⋯» */
  .rbar .rtools { display: none; flex-basis: 100%; margin-top: 2px; }
  .rbar.more .rtools { display: flex; }
  .rbar.more .rtoggle { color: var(--gold); }
  /* плашка главы внизу (точки-главы) — компактнее */
  .dots { gap: 7px; }
  .dot { width: 30px; height: 30px; font-size: 13px; }
  .ch-actions { gap: 7px; }
  .pbtn2 { padding: 8px 11px; font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 20 — красный бейдж с числом на иконке профиля
   (сумма непрочитанных сообщений и заявок в друзья)
   ════════════════════════════════════════════════════════════ */
.me-btn { position: relative; }
/* РАУНД 47: бейдж обновлений модерации — золотой, слева сверху квадратика
   профиля (справа сверху — синий бейдж сообщений/заявок в друзья) */
.me-btn .me-badge.adm {
  top: -5px;
  left: -5px;
  right: auto;
  background: var(--gold);
  color: #241a08
}

/* бейдж в строке меню (position static, как msg-dot) */
.me-badge.menu {
  box-shadow: none
}

.me-btn .me-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--cin);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  place-items: center;
  box-shadow: 0 0 0 2px var(--bg, #0f1218);
  pointer-events: none;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   РАУНД 21 — мобильные ре-фиксы.
   Блоки @media 760/900px лежат в файле НИЖЕ старого блока 640px и на
   телефонах перебивали его: страница истории оставалась ДВУХКОЛОНОЧНОЙ
   (обложка 260px + раздавленная текстовая колонка — «совершенно сломана»),
   а заголовок читалки занимал отдельную строку (плашка в два ряда).
   themes.css подключается после style.css и перебивал .week-desc.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* страница истории — одна колонка */
  .story-head { grid-template-columns: 1fr; gap: 14px; }
  .story-cover { width: 100%; max-width: 230px; margin: 0 auto; }
  .story-info { min-width: 0; }
  .info-line { gap: 10px 16px; padding: 14px 0; }
  .info-line .fact { flex: 1 1 70px; min-width: 70px; }
  .story-btns { gap: 8px; }
  .story-btns .btn.pri { flex: 1 1 100%; }
  .story-btns .btn:not(.pri) { flex: 1 1 auto; min-width: 0; }

  /* читалка: плашка в ОДИН ряд (заголовок больше не занимает всю строку) */
  .rtitle { flex: 1 1 0; order: 0; }

  /* неделя: описание перебивал themes.css (подключён позже) */
  .week .week-desc,
  .week .week-quote { display: none; }
  .week-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .week-acts .btn.lg { flex: 1 1 120px; min-width: 0; padding: 12px 10px; font-size: 13.5px; }
  .week-acts .btn.sq { flex: 0 0 46px; width: 46px; height: 46px; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 21 — ТРЕНИРОВКА: полноценный дизайн.
   БАГ БЫЛ ЗДЕСЬ: стили писались под «.qopt button», а класс .qopt стоял
   на самих кнопках — варианты ответа рендерились без оформления.
   ════════════════════════════════════════════════════════════ */
.qtop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx3);
}
.qtop .qok { color: var(--jade); }
.qtop-x {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--tx3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.qtop-x:hover { color: var(--cin2); border-color: rgb(var(--cin-rgb) / .5); }
.qprog {
  height: 4px;
  border-radius: 2px;
  background: var(--line2);
  overflow: hidden;
  margin-bottom: 16px;
}
.qprog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--jade), var(--gold));
  border-radius: 2px;
  transition: width .35s var(--ease);
}
.qword { text-align: center; margin: 6px 0 18px; }
.qhz { font-size: clamp(46px, 13vw, 60px); }
.qp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 8px;
  border-radius: 50%;
  border: 1px solid rgb(var(--gold-rgb) / .45);
  background: rgb(var(--gold-rgb) / .1);
  color: var(--gold);
  cursor: pointer;
  transition: background .2s, transform .2s var(--pop);
}
.qp:hover { background: rgb(var(--gold-rgb) / .2); transform: scale(1.06); }
.qopts { display: grid; gap: 9px; }
.qopt {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 13px;
  background: var(--surf);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s, color .18s;
}
.qopt:hover:not(:disabled) {
  border-color: rgb(var(--gold-rgb) / .5);
  transform: translateY(-1px);
}
.qopt:disabled { cursor: default; }
.qopt.ok {
  border-color: var(--jade);
  background: rgb(var(--jade-rgb) / .14);
  color: var(--jade);
}
.qopt.bad {
  border-color: var(--cin);
  background: rgb(var(--cin-rgb) / .12);
  color: var(--cin2);
}
.qend { text-align: center; line-height: 1.7; padding: 6px 0 2px; }
.qend-zh {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 44px;
  color: var(--gold);
  margin-bottom: 6px;
}
.qend-acts {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .quiz { padding: 20px 16px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 22 — обложки 3:4, каталог, бейджи карточек, банк слов,
   печать недели, фикс-логотип, уведомления, форма темы, мелочи
   ════════════════════════════════════════════════════════════ */

/* обложки рассказов — ВЕЗДЕ портрет 3:4 (дом, карусели, каталог) */
.card-art { aspect-ratio: 3/4; }
.grid .card { width: auto; }

/* жанр + оценка влезают в обложку: перенос и усечение вместо вылета */
.card-badges { flex-wrap: wrap; gap: 5px; align-items: flex-start; }
.card-badges .chip.g {
  min-width: 0;
  max-width: calc(100% - 52px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-badges .card-rate { flex: none; margin-left: auto; }

/* логотип: фиксированный маленький размер, не меняется при скролле */
.seal { width: 36px; height: 36px; font-size: 20px; }
.top.small .seal { width: 36px; height: 36px; font-size: 20px; }

/* печать «история недели»: две аккуратные строки внутри плашки */
.week-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.12;
  font-size: 15px;
  overflow: hidden;
}
.week-seal i { display: block; font-style: normal; }

/* банк слов: строка не разваливается — плитка слова, гибкая середина,
   кнопки справа; чипы переводов переносятся внутри своей колонки */
.bank-item { align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
.bank-word {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surf);
  border: 1px solid var(--line2);
}
.bank-mid { flex: 1 1 140px; min-width: 0; }
.bank-means { gap: 5px; }
.bank-means .mchip { max-width: 100%; }
.bank-uses { margin-top: 5px; font-size: 10.5px; }
.bank-save, .bank-go { flex: none; }

/* уведомления под колокольчиком: карточки + выделение непрочитанных */
.notif-card-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px 11px 16px;
  border-radius: 13px;
  background: var(--surf);
  border: 1px solid var(--line2);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.notif-card-item:hover { background: var(--surf3); transform: translateX(2px); }
.notif-card-item.unread {
  background: rgb(var(--gold-rgb) / .08);
  border-color: rgb(var(--gold-rgb) / .38);
}
.notif-card-item.unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .22);
}
.notif-card-item.unread .notif-card-title { color: var(--tx); font-weight: 800; }
.notif-card-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; color: var(--tx2); }
.notif-card-preview { font-size: 12px; color: var(--tx2); line-height: 1.5; }
.notif-card-meta { margin-top: 6px; font-size: 10.5px; color: var(--tx3); font-weight: 700; letter-spacing: .04em; }

/* форма новой темы: пилюли «весь рассказ / глава N» */
.nt-label {
  margin: 10px 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx3);
}
.nt-chaps { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.nt-chap {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surf);
  color: var(--tx2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.nt-chap:hover { border-color: rgb(var(--gold-rgb) / .45); color: var(--tx); }
.nt-chap.on {
  border-color: rgb(var(--gold-rgb) / .55);
  background: rgb(var(--gold-rgb) / .12);
  color: var(--gold);
}

/* «продолжить чтение»: обложка тоже 3:4 */
.resume .art { width: 64px; height: 85px; }

@media (max-width: 640px) {
  /* каталог: две колонки вместо одной огромной */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid .card-b { padding: 9px 10px 11px; }
  .grid .card-ovl { padding: 26px 9px 8px; }
  .grid .card-ovl h3 { font-size: 15px; }
  .grid .card-ovl-desc { font-size: 9.8px; }
  .grid .card-foot small { display: none; }

  /* неделя: печать влезает в плашку */
  .week-seal { width: 48px; height: 48px; font-size: 12.5px; border-radius: 12px; }

  /* продолжение чтения: обложка 3:4 и поменьше */
  .resume .art { width: 54px; height: 72px; }

  /* комментарий: поле ввода компактнее по вертикали.
     ВАЖНО: у .comment-form на мобильных flex-direction:column, и десктопный
     flex:1 1 240px превращал basis в ВЫСОТУ 240px — окно ввода растягивалось
     на пол-экрана. Сбрасываем basis в auto: высота = height/min-height,
     а при вводе поле плавно растит автоgrow (social.js) до 45vh. */
  .comment-form textarea { flex: 0 0 auto; min-height: 44px; height: 44px; padding: 11px 13px; font-size: 14px; max-height: 45vh; overflow-y: auto; }
  .comment-form .btn { padding: 10px 14px; }

  /* банк слов на узких: кнопки переносятся под перевод, не давят на чипы */
  .bank-item { gap: 10px; }
  .bank-save { margin-left: auto; }
}

/* РАУНД 22: кнопка-toggle фильтров каталога (мобильные) */
.cat-toggle { display: none; }
@media (max-width: 640px) {
  .cat-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid var(--line2);
    background: var(--surf2);
    color: var(--tx);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 10px;
  }
  .cat-toggle .ct-arrow::after {
    content: '▾';
    display: inline-block;
    transition: transform .2s var(--ease);
    color: var(--tx3);
  }
  .cat-toggle.on .ct-arrow::after { transform: rotate(180deg); }
  .cat-body { display: none; }
  .cat-body.on { display: block; }
  .sec-head { flex-wrap: wrap; }
  .sec-head .right { margin-left: 0; width: 100%; }
  .sec-head .right .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 22 — полировка мобильных экранов (обход скриншотами)
   ════════════════════════════════════════════════════════════ */

/* пузыри сообщений: время и «ответить» — с новой строки, а не в тексте */
.msg-bubble .msg-time {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: .03em;
}
.msg-bubble .msg-reply-btn {
  display: inline-block;
  margin-top: 6px;
  margin-left: 8px;
  margin-right: 8px;
}

/* заголовки экранов (Сообщения/Друзья/Настройки/Редактор) на мобильных */
@media (max-width: 640px) {
  .editor-head { gap: 10px; margin-bottom: 16px; }
  .editor-head h2 { font-size: 17px; min-width: 0; }
  .editor-head h2 .zh { font-size: 15px; margin-right: 7px; }
  .editor-head .back { margin-bottom: 0; padding: 7px 11px; font-size: 12px; }

  /* мессенджер: колонка на всю доступную высоту, ввод не упирается в bnav.
     ВАЖНО: только #vMsg.on — иначе id-селектор пересиливает .view{display:none}
     и раздел сообщений виден на мобильном всегда («внизу главной»). */
  #vMsg.on { display: flex; flex-direction: column; height: calc(100vh - var(--top-h, 64px) - 92px); }
  #vMsg .editor-head { flex: none; }
  #vMsg .msg-wrap { flex: 1; height: auto; max-height: none; min-height: 0; }

  /* банк слов: действия на одной строке с переводом, без пустых простыней */
  .bank-item { flex-wrap: nowrap; gap: 10px; padding: 11px 12px; }
  .bank-word { min-width: 58px; padding: 7px 8px; }
  .bank-hz { font-size: 20px; min-width: 40px; }
  .bank-mid { flex: 1 1 auto; min-width: 0; }
  .bank-save { margin-left: 0; padding: 9px 11px; }
  .bank-save span { display: none; }          /* на мобильном — только иконка */
  .bank-go { width: 38px; height: 38px; padding: 0; }

  /* модалка обсуждения: крестик не наезжает на длинный заголовок */
  #threadViewBody > h2 { padding-right: 34px; }
}

/* ════════════════════════════════════════════════════════════
   РАУНД 23 — название и описание НА обложке (карусели/каталог),
   генеративные обложки по жанру/тегам/иероглифу, блокировка
   прокрутки фона под модалками, полноэкранный мобильный чат
   ════════════════════════════════════════════════════════════ */

/* ---------- генеративная обложка: узор на всю площадь ---------- */
.art.gen .art-motif {
  inset: 0;
  height: 100%;
}
.art.gen .art-motif svg {
  width: 100%;
  height: 100%;
  display: block;
}
.art.gen .art-glyph {
  color: rgba(255, 255, 255, .2);
  text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

/* ---------- карточка: название и описание на затемнённой
              плашке снизу обложки (как у истории недели) ---------- */
.card-ovl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* градиент уходит В ЦВЕТ КАРТОЧКИ (--surf2) — обложка сливается
     с подложкой без видимого шва, в обеих темах */
  background: linear-gradient(to top,
    rgb(var(--surf2-rgb) / .99) 0%,
    rgb(var(--surf2-rgb) / .92) 34%,
    rgb(var(--surf2-rgb) / .55) 66%,
    rgb(var(--surf2-rgb) / 0) 100%);
  color: var(--tx);
  pointer-events: none;
}

.card-ovl h3 {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-ovl-ru {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-ovl-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--tx2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-b {
  padding: 12px 14px 14px;
  gap: 8px;
}

/* генеративная обложка в превью редактора */
.cover-preview .art {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* ---------- блокировка прокрутки фона под модалками ----------
   Класс вешает scrollLock() из ui.js, пока открыта любая модалка
   (вход, профиль, жалоба, словарь-шторка на мобильных, чат…). */
html.scroll-lock,
body.scroll-lock {
  overflow: hidden !important;
}

/* контент оверлеев не «протаскивает» прокрутку на страницу */
.auth-mask,
#quizM,
.panel-body,
.msg-thread,
.quiz {
  overscroll-behavior: contain;
}

/* ---------- мобильный чат на весь экран, как в мессенджерах ---------- */
@media (max-width: 760px) {
  /* полноэкранный чат: шапка и нижняя навигация скрыты — чат поверх
     всего (main имеет z-index 2 и не дал бы чату подняться над botnav) */
  body.msg-fs .botnav,
  body.msg-fs .top {
    display: none;
  }

  #vMsg.chat-open .msg-chat {
    position: fixed;
    inset: 0;
    z-index: 150;          /* выше шторок, ниже модалок и лайтбокса */
    display: flex;
    border: none;
    border-radius: 0;
  }

  #vMsg.chat-open .msg-thread {
    padding: 0 12px 14px;
    overscroll-behavior: contain;
  }

  #vMsg.chat-open .msg-peer {
    top: 0;
    margin: 0 -12px 12px;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
  }

  #vMsg.chat-open .msg-input-row {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .card-ovl {
    padding: 30px 10px 9px;
    gap: 2px;
  }

  .card-ovl h3 {
    font-size: 16px;
  }

  .card-ovl-ru {
    font-size: 10.5px;
  }

  .card-ovl-desc {
    font-size: 10px;
  }

  .card-b {
    padding: 10px 11px 12px;
    gap: 6px;
  }
}

/* ---------- генеративные аватары (без фото) ---------- */
.genav {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.genav svg {
  width: 100%;
  height: 100%;
  display: block;
}

.has-gen {
  background: none !important;
}

.has-gen > b,
.av-init {
  position: relative;
  z-index: 1;
  font-style: normal;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* ---------- лайтбокс: обложка / аватар крупно ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  place-items: center;
  background: rgba(5, 7, 10, .9);
  padding: 20px;
}

.lightbox.on {
  display: grid;
}

.lb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 560px);
}

.lb-body {
  display: grid;
  place-items: center;
}

.lb-img {
  max-width: min(92vw, 560px);
  max-height: 80vh;
  border-radius: 16px;
  box-shadow: var(--sh-l);
}

.lb-art {
  width: min(76vw, 420px);
  aspect-ratio: 3/4;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-l);
}

.lb-art .art {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.lb-av {
  width: min(68vw, 360px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 26px;
  box-shadow: var(--sh-l);
  color: #fff;
  font-family: var(--zh);
  font-weight: 900;
  font-size: min(24vw, 120px);
}

.lb-cap {
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.lb-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(20, 24, 32, .7);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

/* обложку рассказа можно увеличить */
.story-cover {
  cursor: zoom-in;
}

/* мини-меню своего аватара */
.av-menu {
  position: fixed;
  z-index: 340;
  display: flex;
  flex-direction: column;
  min-width: 178px;
  padding: 6px;
  border-radius: 13px;
  border: 1px solid var(--line2);
  background: var(--surf2);
  box-shadow: var(--sh-l);
}

.av-menu button {
  padding: 10px 12px;
  border-radius: 9px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  cursor: pointer;
}

.av-menu button:hover {
  background: var(--surf3);
}

/* ════════════════════════════════════════════════════════════
   РАУНД 26 — светлая тема без затемнения под плашкой, онбординг,
   гостевой CTA комментария, надёжный свайп каруселей
   ════════════════════════════════════════════════════════════ */

/* затемнение низа обложки — ТОЛЬКО в тёмной теме: в светлой плашка
   светлая и текст на ней тёмный, искусственная тень не нужна */
html[data-theme="dark"] .art::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ---------- гостевой CTA под комментариями ---------- */
.comment-login-hint {
  position: relative;
  display: block;
  margin: 6px 0 16px;
  padding: 15px 16px 15px 68px;
  border-radius: 15px;
  border: 1px dashed rgb(var(--gold-rgb) / .45);
  background: rgb(var(--gold-rgb) / .07);
  color: var(--tx2);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
}

.comment-login-hint::before {
  content: '评';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--brush);
  font-size: 21px;
  color: var(--gold);
  background: rgb(var(--gold-rgb) / .12);
  border: 1px solid rgb(var(--gold-rgb) / .35);
}

.comment-login-hint button {
  display: inline-block;
  margin: 0 3px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgb(var(--cin-rgb) / .5);
  background: rgb(var(--cin-rgb) / .12);
  color: var(--cin2);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s var(--ease);
}

.comment-login-hint button:hover {
  background: var(--cin);
  border-color: var(--cin);
  color: #fff;
}

/* ---------- карусели на мобильных: свайп доводит карточку ---------- */
@media (max-width: 760px) {
  .rail {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: 4px;
  }

  .rail > * {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* ---------- онбординг: витрина ---------- */
.onb-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(var(--gold-rgb) / .3);
  background:
    radial-gradient(420px 260px at 88% -12%, rgb(var(--gold-rgb) / .16), transparent 62%),
    radial-gradient(360px 240px at -14% 108%, rgb(var(--cin-rgb) / .12), transparent 60%),
    var(--surf2);
}

.onb-hz {
  position: absolute;
  top: -18px;
  right: -6px;
  font-size: 128px;
  line-height: 1;
  color: rgb(var(--gold-rgb) / .1);
  pointer-events: none;
  user-select: none;
}

.onb-badge {
  position: relative;
  font-family: var(--zh);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: none;
  padding: 6px 14px;
  border-radius: 999px;
}

.onb-title {
  position: relative;
  font-size: clamp(21px, 3.4vw, 28px);
  letter-spacing: -.01em;
}

.onb-text {
  position: relative;
  font-size: 14.5px;
  max-width: 46ch;
  margin: 0 auto 22px;
}

.onb-demo {
  position: relative;
}

.demo-quiz b {
  font-family: var(--zh);
  font-weight: 900;
  font-size: 26px;
  color: var(--gold);
}

.onb-foot .btn {
  min-width: 170px;
  justify-content: center;
}

.onb-dots i {
  transition: .3s var(--ease);
}

.onb-dots i.on {
  width: 22px;
  border-radius: 999px;
}

/* онбординг: маска плотнее, «пропустить» — в углу, карточке отступ сверху */
#onbMask {
  background: rgba(6, 8, 12, .93);
}

#onbMask .onb-card {
  padding-top: clamp(44px, 6vw, 58px);
}

#onbMask .onb-skip {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 8px 14px;
}

/* онбординг: демо-викторина и точки-спанты (в разметке span, не i) */
.demo-quiz {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surf);
  border: 1px solid var(--line2);
  font-size: 13px;
  font-weight: 700;
  color: var(--tx2);
}

.demo-quiz button {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surf2);
  color: var(--tx);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.demo-quiz button:first-of-type {
  border-color: rgb(var(--jade-rgb) / .5);
  color: var(--jade);
}

.onb-dots span,
.onb-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surf3);
  transition: .3s var(--ease);
}

.onb-dots span.on,
.onb-dots i.on {
  background: var(--gold);
  width: 22px;
  border-radius: 5px;
}

/* плавный возврат токена на место после подсветки */
.tok {
  transition: transform .18s var(--ease);
}

/* «История недели» по-русски — контрастнее в светлой теме */
html[data-theme="light"] .eyebrow {
  color: var(--tx);
  opacity: .78;
}

/* карусели на мобильных: уходят за границу экрана с обеих сторон */
@media (max-width: 760px) {
  .rail-wrap {
    margin-inline: calc(-1 * clamp(12px, 2.4vw, 26px));
    padding-inline: 0;
  }

  .rail {
    padding-inline: clamp(12px, 2.4vw, 26px);
    scroll-padding-left: clamp(12px, 2.4vw, 26px);
  }
}

/* «Читать первую главу» не режется: на узких экранах кнопка занимает
   всю строку, «Слушать» и избранное — следующей (после правил 640px) */
@media (max-width: 640px) {
  .week-acts .btn.pri {
    flex: 1 1 100%;
    order: 1;
    min-width: 0;
  }

  .week-acts .btn.gho.lg {
    order: 2;
    flex: 1 1 120px;
  }

  .week-acts .btn.sq {
    order: 3;
  }
}

/* ---------- раунд 30: правовые блоки и возрастная маркировка ---------- */
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 2px 2px;
  text-align: left;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tx2);
  font-weight: 600;
  cursor: pointer;
}

.auth-terms input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--cin);
}

.auth-terms a {
  color: var(--cin2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foot-legal {
  margin-top: 10px;
  font-size: 12px;
  color: var(--tx3);
}

.foot-legal a {
  color: var(--tx2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.foot-legal a:hover {
  color: var(--tx);
}

/* возрастная маркировка (436-ФЗ) */
.chip.age {
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--tx2);
  border-color: var(--line2);
}

.chip.age.a16 {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .45);
}

.chip.age.a18 {
  color: var(--cin2);
  border-color: rgb(var(--cin-rgb) / .5);
  background: rgb(var(--cin-rgb) / .08);
}