/* ============ Luminous — тёмная тёплая тема (по референсу) ============ */
:root {
  --bg: #0d0a18;
  --bg-soft: #131022;
  --card: #17122a;
  --card-2: #1f1938;
  --border: #2f2754;
  --border-soft: #272147;
  --text: #eeebf8;
  --muted: #a59fc0;
  --muted-2: #767093;
  --accent: #a585f5;
  --accent-deep: #6f4fe0;
  --teal: #34c8b4;
  --grad: linear-gradient(135deg, #8a5ff0 0%, #34b3a4 100%);
  --accent-soft: rgba(150, 110, 245, .15);
  --green: #57b96b;
  --green-soft: rgba(87, 185, 107, .14);
  --radius: 14px;
  --radius-s: 10px;
  --tabbar-h: 62px;
  --maxw: 760px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 520px at 30% -220px, rgba(120, 80, 235, .22) 0%, transparent 62%),
    radial-gradient(900px 460px at 95% -160px, rgba(52, 200, 180, .12) 0%, transparent 60%),
    var(--bg);
  overflow-x: hidden;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; }
.hidden { display: none !important; }

#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 14px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
#app.reader-mode { max-width: none; padding: 0; }

/* ---------- Загрузка ---------- */
.boot-spinner { display: flex; justify-content: center; padding-top: 40vh; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Шапка-бренд ---------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 2px 14px; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #2b1f55, #142621);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 800; font-size: 17px;
}
.brand .eyebrow { font-size: 10px; letter-spacing: .18em; color: var(--muted-2); text-transform: uppercase; }
.brand .name { font-weight: 800; font-size: 16px; margin-top: 1px; }

/* ---------- Карточки ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.card .eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 6px;
}
.card h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; }
.card p.desc { margin: 0; color: var(--muted); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px; padding: 11px 18px;
  font-weight: 700; font-size: 14px; color: #fff;
  background: var(--grad);
  box-shadow: 0 2px 14px rgba(130, 95, 240, .28);
}
.btn:active { transform: translateY(1px); }
.btn.secondary {
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}
.btn.small { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.danger {
  background: linear-gradient(135deg, #e0483a, #b3271c); color: #fff;
  box-shadow: 0 4px 16px rgba(196, 69, 58, .3);
}
.btn.linked-static { cursor: default; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px;
}
.pill.premium { background: var(--grad); color: #fff; }
.pill.free { background: var(--green-soft); color: var(--green); border: 1px solid rgba(87,185,107,.3); }
.pill.dark { background: var(--card-2); color: var(--muted); border: 1px solid var(--border); }

/* статус подписки: белая звезда на жёлтом (единый стиль) */
.sub-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #ffc83d, #f5a623);
  color: #1d1503; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  padding: 2.5px 8px; border-radius: 999px; vertical-align: middle;
  box-shadow: 0 2px 8px rgba(245, 166, 35, .28);
}
.sub-badge svg { flex: none; display: block; width: 9px; height: 9px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.profile-card .uname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-card .uname .pill { padding: 3px 9px; }

/* ---------- Чипы статистики ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--border); color: var(--muted);
}
.chip.green { color: var(--green); border-color: rgba(87,185,107,.35); background: var(--green-soft); }
.chip.orange { color: var(--accent); border-color: rgba(150, 110, 245, .4); background: var(--accent-soft); }

/* ---------- Хранилище (шапка библиотеки) ---------- */
.vault-card { display: flex; align-items: center; gap: 12px; }
.vault-card .info { flex: 1; min-width: 0; }
.vault-card .label { font-size: 10px; letter-spacing: .16em; color: var(--muted-2); text-transform: uppercase; }
.vault-card .vname { font-weight: 800; font-size: 16px; }
.vault-card .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Список тайтлов ---------- */
.title-card {
  display: flex; gap: 10px; align-items: center;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px;
}
.title-card .cover {
  width: 58px; height: 78px; border-radius: 9px; flex: none;
  object-fit: cover; background: var(--card-2); border: 1px solid var(--border-soft);
}
.title-card .cover.placeholder { display:flex; align-items:center; justify-content:center; color: var(--muted-2); font-size: 20px; }
.title-card .body { flex: 1; min-width: 0; }
.title-card .tname { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-card .tdesc {
  color: var(--muted); font-size: 12.5px; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.title-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--muted-2); font-weight: 600; }
.title-card .meta .free { color: var(--green); }
.title-card .meta .prem { color: var(--accent); }
.title-card .chev { color: var(--muted-2); flex: none; }
.eye { display: inline-flex; align-items: center; gap: 4px; }
.eye svg { width: 14px; height: 14px; }

/* ---------- Страница тайтла ---------- */
.back-row { display: flex; align-items: center; gap: 8px; padding: 2px 0 12px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.active { background: var(--grad); border-color: transparent; color: #fff; }

.title-hero { display: flex; gap: 14px; margin-bottom: 4px; }
.title-hero .cover {
  width: 104px; height: 146px; border-radius: 12px; object-fit: cover; flex: none;
  background: var(--card-2); border: 1px solid var(--border-soft);
}
.title-hero .right { flex: 1; min-width: 0; }
.title-hero .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent); margin-bottom: 4px; }
.title-hero h1 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 800; }
.title-h1 { display: block; }
.alt-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: transform .15s, color .15s; flex: none;
}
.alt-toggle:hover { color: var(--text); }
.alt-toggle.open { transform: rotate(180deg); color: var(--accent); }
.alt-names {
  margin: 8px 0 2px; padding: 6px 12px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
}
.alt-names .alt-name { font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.alt-names .alt-name + .alt-name { border-top: 1px solid var(--border); }
.title-desc { color: var(--muted); font-size: 13.5px; margin-top: 8px; white-space: pre-wrap; }
.title-desc.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* длинное (многострочное) название — описание клампится сильнее, чтобы правая
   колонка не была выше обложки и не появлялось пустое место */
.title-hero.tight-desc .title-desc.clamped { -webkit-line-clamp: 2; }
/* последнее слово названия держим вместе с кареткой «другие названия» */
.title-h1 .title-last { white-space: nowrap; }
.title-h1 .alt-toggle { margin-left: 6px; vertical-align: -0.18em; width: 0.85em; height: 0.85em; border-radius: 6px; }
.expand-link { color: var(--accent); font-size: 13px; font-weight: 700; background: none; border: none; padding: 4px 0; }
.genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.genres .g { font-size: 11px; color: var(--muted); background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
/* жанры — перечисление через слеш прямо в описании (без плиток) */
.genres-line { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 8px; }
.stat-bar .s-cap { text-align: center; }
.stat-bar .s-sub { font-size: 10.5px; color: var(--muted); opacity: .85; margin-top: 1px; }

.continue-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 13px; margin: 12px 0; width: 100%; text-align: left;
}
.continue-card .ic {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.continue-card .t { font-weight: 800; color: var(--accent); font-size: 15px; }
.continue-card .s { color: var(--muted); font-size: 12.5px; margin-top: 1px; }

.list-tools { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.tools-left { display: flex; gap: 8px; }
.sort-group { display: flex; gap: 6px; }

/* ---------- Строки глав ---------- */
.chapter-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 11px 13px; margin-bottom: 9px; color: var(--text);
}
.chapter-row .num {
  width: 46px; height: 46px; border-radius: 11px; flex: none;
  background: var(--card-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.chapter-row .body { flex: 1; min-width: 0; }
.chapter-row .cname { font-weight: 700; font-size: 14.5px; }
.chapter-row .csub { color: var(--muted-2); font-size: 12px; margin-top: 1px; }
.chapter-row .lock { color: var(--muted-2); flex: none; }
.chapter-row.read .cname { color: var(--muted); }

/* ---------- Читалка ---------- */
.reader { background: #000; min-height: 100vh; }
.reader-pages { max-width: var(--maxw); margin: 0 auto; }
.reader-pages img {
  width: 100%; height: auto; display: block;
  margin: 0; padding: 0; border: 0;
  background-color: #0a0a0a;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
}
/* защита картинок: запрет перетаскивания и выделения */
img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.reader-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(15, 11, 28, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  transform: translateY(0); transition: transform .22s ease;
  padding-top: env(safe-area-inset-top);
}
.reader-panel.hidden-panel { transform: translateY(-110%); }
.reader-panel .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
}
.reader-panel .meta { flex: 1; min-width: 0; }
.reader-panel .meta .t { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-panel .meta .c { color: var(--muted); font-size: 12px; }
.scroll-top-btn {
  position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 50;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(26, 20, 46, .92); border: 1px solid var(--border); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scroll-top-btn.show { opacity: 1; pointer-events: auto; }
.reader-end { max-width: var(--maxw); margin: 0 auto; padding: 26px 16px calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.reader-end .hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

/* Экран «глава закрыта» */
.locked-screen { max-width: 480px; margin: 0 auto; padding-top: 12vh; text-align: center; }
.locked-screen .big { font-size: 44px; margin-bottom: 10px; }

/* ---------- Premium ---------- */
.level-card { position: relative; overflow: hidden; }
.level-card .price { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.level-card .banner {
  height: 110px; border-radius: 10px; margin: 4px 0 12px;
  background:
    radial-gradient(190px 95px at 20% 30%, rgba(138, 95, 240, .4), transparent 70%),
    radial-gradient(230px 130px at 80% 80%, rgba(52, 200, 180, .28), transparent 70%),
    #110d22;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.level-card .banner svg { width: 44px; height: 44px; color: #fff; opacity: .9; }
.provider-card .ic {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; color: #fff;
}
.provider-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.provider-card .pname { font-weight: 800; }
.provider-card .peyebrow { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.provider-card.tint-blue { background: linear-gradient(160deg, rgba(40,90,160,.16), transparent 55%), var(--card); }
.provider-card.tint-warm { background: linear-gradient(160deg, rgba(150, 90, 240, .14), transparent 55%), var(--card); }
.code-input {
  width: 100%; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 11px; color: var(--text); padding: 12px 13px; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; outline: none; margin-bottom: 10px;
}
.code-input:focus { border-color: var(--accent); }

/* ---------- Аккаунт ---------- */
.profile-card { display: flex; align-items: center; gap: 12px; }
.profile-card .ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.profile-card .info { flex: 1; min-width: 0; }
.profile-card .uname { font-weight: 800; font-size: 16px; }
.profile-card .uid { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.seg {
  display: flex; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; gap: 4px; margin-top: 10px;
}
.seg button {
  flex: 1; border: none; background: transparent; color: var(--muted);
  border-radius: 9px; padding: 9px 6px; font-weight: 700; font-size: 13px;
}
.seg button.on { background: var(--grad); color: #fff; }
.setting-box { background: var(--card-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px; margin-top: 10px; }
.setting-box .st { font-weight: 800; font-size: 14px; }
.setting-box .ss { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ---------- Вход ---------- */
.login-screen { max-width: 420px; margin: 0 auto; padding-top: 16vh; text-align: center; }
.login-screen .logo-big {
  width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 18px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: #fff;
  box-shadow: 0 8px 40px rgba(130, 95, 240, .35);
}
.login-screen h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: .02em; }
.login-screen .sub { color: var(--muted); margin-bottom: 26px; }
#tg-widget { display: flex; justify-content: center; min-height: 48px; }

/* ---------- Нижняя навигация ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(12, 9, 22, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-soft);
  display: flex; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--muted-2); font-size: 11px; font-weight: 700;
}
.tabbar .tab svg { width: 22px; height: 22px; }
.tabbar .tab.active { color: var(--accent); }

/* ---------- Тост ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 500;
  background: var(--card-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 12px; padding: 11px 16px;
  font-size: 13.5px; font-weight: 600; max-width: 88vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}

.section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase; margin: 18px 2px 8px;
}
.muted { color: var(--muted); }
.center { text-align: center; }

@media (min-width: 700px) {
  body { font-size: 15.5px; }
  .title-card .cover { width: 66px; height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01s !important; }
}

/* ---------- Telegram WebApp: корректная работа в полноэкранном режиме ---------- */
html, body { overflow-x: hidden; max-width: 100%; width: 100%; }
/* Telegram Desktop при масштабе Windows ≠ 100% может сообщить странную ширину
   вьюпорта — привязываем раскладку к реальной ширине окна, а не к вычисленной */
html.in-tg body { width: 100%; min-width: 0; }
html.in-tg #app { width: 100%; max-width: min(var(--maxw), 100%); }
body {
  min-height: 100vh;
  min-height: var(--tg-viewport-height, 100vh);
}
/* Системные зоны: status bar = max(env, tg-safe), плюс зона кнопок Telegram
   в полноэкранном режиме (content-safe). Суммировать env и tg-safe нельзя —
   на iOS это одно и то же значение, панель получалась вдвое выше. */
:root {
  --safe-top: calc(
    max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px))
    + var(--tg-content-safe-area-inset-top, 0px)
  );
}
#app { padding-top: calc(14px + var(--safe-top)); }
#app.reader-mode { padding-top: 0; }
.reader-panel { padding-top: var(--safe-top); }

/* ---------- Таймер до автооткрытия главы ---------- */
.ch-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.timer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--teal);
  background: rgba(52, 200, 180, .12); border: 1px solid rgba(52, 200, 180, .3);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.locked-timer {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--teal);
  background: rgba(52, 200, 180, .1); border: 1px solid rgba(52, 200, 180, .3);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 18px;
}

/* ---------- Экран блокировки ---------- */
.blocked-screen { max-width: 440px; margin: 0 auto; padding-top: 16vh; text-align: center; }
.blocked-screen .card { border-color: rgba(220, 70, 60, .45); background: linear-gradient(180deg, rgba(220, 70, 60, .08), transparent 70%), var(--card); }


/* ---------- Просмотры у глав ---------- */
.views-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--muted-2); white-space: nowrap;
}
.views-mini svg { width: 14px; height: 14px; }
.ch-right .row { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Мини-карточки уровней ---------- */
.levels-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.level-mini {
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.level-mini .lm-img {
  aspect-ratio: 8 / 5; background:
    radial-gradient(120px 60px at 25% 45%, rgba(138, 95, 240, .4), transparent 70%),
    radial-gradient(140px 70px at 78% 60%, rgba(52, 200, 180, .3), transparent 70%),
    var(--card-2);
  display: flex; align-items: center; justify-content: center;
}
.level-mini .lm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.level-mini .lm-star {
  width: 30px; height: 30px; color: #fff;
  background: linear-gradient(135deg, #ffc83d, #f5a623);
  border-radius: 50%; padding: 7px; box-sizing: content-box;
  box-shadow: 0 4px 16px rgba(245, 166, 35, .4);
}
.level-mini .lm-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.level-mini .lm-name { font-weight: 800; font-size: 15px; }
.level-mini .lm-price { font-weight: 800; font-size: 13px; color: var(--accent); margin-top: 2px; }
.level-mini .lm-desc {
  font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.level-mini .lm-more {
  margin-top: 8px; align-self: flex-start;
  background: none; border: none; color: var(--accent); font-weight: 800; font-size: 12.5px;
  padding: 0; cursor: pointer;
}

/* ---------- Модальное окно сайта ---------- */
.app-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 6, 16, .72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.app-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; width: 100%; max-width: 460px;
  max-height: 100%; overflow-y: auto; position: relative;
}
.app-modal .am-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: none; border: none; color: var(--muted); font-size: 19px; line-height: 1;
}
.lvl-modal-img {
  width: calc(100% + 40px); margin: -20px -20px 14px; display: block;
  aspect-ratio: 8 / 5; object-fit: cover; border-radius: 16px 16px 0 0;
}

/* ---------- Привязки в настройках ---------- */
.link-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border-soft);
}
.link-row:last-of-type { border-bottom: none; }
.link-row .ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
}
.link-row .ic-img { object-fit: cover; display: block; }
.link-row .lr-body { flex: 1; min-width: 0; }
.link-row .lr-name { display: block; font-weight: 800; font-size: 14px; }
.link-row .lr-sub { display: block; font-size: 12px; color: var(--muted-2); margin-top: 1px; }

/* ---------- Скрыть стрелки числовых полей ---------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Способы входа на экране логина ---------- */
.auth-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.auth-btn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 13px; padding: 11px 14px; color: var(--text);
  text-decoration: none; cursor: pointer; width: 100%;
  transition: border-color .15s;
}
.auth-btn:hover { border-color: var(--accent); }
.auth-btn .ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px;
}
.auth-btn .ab-body { flex: 1; min-width: 0; }
.auth-btn .ab-name { display: block; font-weight: 800; font-size: 14px; }
.auth-btn .ab-sub { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.auth-btn.stub-auth { opacity: .75; }

/* ---------- v1.5: карточки главной ---------- */
.title-card .cover-wrap { position: relative; flex: none; display: block; }
.title-card .cover-wrap .cover { display: block; }
.title-card .cover-wrap.adult .cover { filter: grayscale(.9) blur(3px); opacity: .85; }
.title-card .cover-wrap.adult::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.adult-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 15px; color: #ff6e5e; letter-spacing: .5px;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); z-index: 2;
}
.title-card .recent-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.recent-ch-row { display: flex; align-items: center; gap: 8px; }
.recent-ch {
  display: inline-flex; align-items: center; gap: 8px; width: auto; align-self: flex-start;
  background: none; border: none; padding: 3px 0; text-align: left; cursor: pointer;
  color: var(--muted); font-size: 12.5px;
}
.recent-ch:hover .rc-name { color: var(--accent); }
.recent-ch .rc-name { font-weight: 700; color: var(--text); transition: color .12s; white-space: nowrap; }
.recent-ch .rc-lock { color: var(--accent); display: inline-flex; }
.recent-ch .rc-lock svg { width: 13px; height: 13px; }
.recent-ch-row .rc-time { margin-left: auto; color: var(--muted-2); font-size: 11.5px; white-space: nowrap; }
.rc-empty { font-size: 12px; color: var(--muted-2); }
.title-card .side-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: none; font-size: 11.5px; color: var(--muted-2); padding-left: 6px;
}
.title-card .side-meta .free { color: var(--green); font-weight: 700; }
.title-card .side-meta .prem { color: var(--accent); font-weight: 700; }
.title-card .side-meta .eye { display: inline-flex; align-items: center; gap: 4px; }
.title-card .side-meta .eye svg { width: 14px; height: 14px; }

/* блюр 18+ на странице тайтла */
.title-head .cover.adult-blur { filter: grayscale(.9) blur(3px); opacity: .85; }

/* дата в строке главы */
.ch-date { font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }

/* ---------- Бейдж уведомлений ---------- */
.tab { position: relative; }
.tab-badge {
  position: absolute; top: 4px; left: calc(50% + 8px);
  min-width: 17px; height: 17px; padding: 0 5px;
  background: #e0452e; color: #fff; border-radius: 999px;
  font-style: normal; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Вкладка уведомлений ---------- */
.nf-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 13px; padding: 10px 12px; margin-bottom: 9px; cursor: pointer;
}
.nf-row.unread { border-color: rgba(150, 110, 245, .5); background: linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--card); }
.nf-check {
  width: 19px; height: 19px; flex: none; border-radius: 6px;
  border: 2px solid var(--border); background: var(--card-2);
}
.nf-row.sel .nf-check { background: var(--grad); border-color: transparent; position: relative; }
.nf-check { position: relative; cursor: pointer; transition: border-color .12s; }
.nf-row:hover .nf-check { border-color: var(--accent); }
.nf-row.sel .nf-check::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4.5px; height: 9px;
  border: solid #fff; border-width: 0 2.2px 2.2px 0;
  border-radius: 1px; transform: rotate(43deg);
}
.nf-cover { width: 40px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }
.nf-cover.ph { display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--muted-2); }
.nf-cover.ph svg { width: 18px; height: 18px; }
.nf-body { flex: 1; min-width: 0; }
.nf-text { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.nf-date { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.nf-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 14px); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 9px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.nf-bar .cnt { font-weight: 800; font-size: 13px; }
.nf-bar .icon-btn.danger:hover { border-color: #c4453a; }
.nf-bar .icon-btn.danger svg { display: block; }

/* логотип-картинка */
img.logo, img.logo-big { object-fit: cover; }
img.logo { width: 38px; height: 38px; border-radius: 12px; }
img.logo-big { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 8px 40px rgba(130, 95, 240, .35); }

.checkline {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--muted); line-height: 1.45; cursor: pointer;
  padding: 4px 0;
}
.checkline input { margin-top: 2px; accent-color: #8a5ff0; width: 16px; height: 16px; flex: none; }



/* ---------- v1.6 ---------- */
/* карточка главной: просмотры под обложкой, без правой панели */
.title-card .cover-col { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
.title-card .cover-views {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted-2); font-weight: 700;
}
.title-card .cover-views svg { width: 14px; height: 14px; }

/* строки глав: плашки левее, мета (глазик/дата) столбиком справа */
.chapter-row .ch-badges {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  flex: none; margin-right: 10px;
}
.chapter-row .ch-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none;
  min-width: 64px;
}

/* закладки: сетка обложек, 5 в ряд */
.bm-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 640px) { .bm-grid { grid-template-columns: repeat(3, 1fr); } }
.bm-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.bm-cover {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--border-soft);
}
.bm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.bm-card:hover .bm-cover img { transform: scale(1.04); }
.bm-cover.adult img { filter: grayscale(.9) blur(3px); opacity: .85; }
.bm-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted-2); }
.bm-name {
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bm-meta { font-size: 11px; color: var(--muted-2); }


/* ---------- v1.7 ---------- */
/* компактные карточки главной: просмотры после названия */
.tname-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tname-row .tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tname-row .cover-views { flex: none; }
.title-card .recent-list { margin-top: 3px; gap: 1px; }
.recent-ch { padding: 2px 0; }

/* строки глав: глазик прочитанности, том в квадрате, мета справа */
.chapter-row { gap: 10px; }
.read-eye {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-2); cursor: pointer; transition: color .12s, background .12s;
}
.read-eye:hover { background: var(--card-2); }
.read-eye.read { color: var(--teal); }
.read-eye svg { width: 18px; height: 18px; }
.chapter-row .ch-meta { gap: 3px; min-width: 0; }
.chapter-row .views-mini { flex: none; min-width: 36px; justify-content: flex-end; }

/* ---------- v1.8 ---------- */
/* затухание прочитанных глав */
/* прочитанные на главной выглядят как обычные (не тускнеют) */
.recent-ch.is-read .rc-name { color: var(--text); }
.chapter-row.is-read { opacity: .55; }
.chapter-row.is-read .read-eye { opacity: 1; }

/* рамка «Вы остановились здесь» */
.chapter-row { position: relative; overflow: visible; }
.chapter-row.current {
  outline: 2px solid var(--accent);
}
.here-badge {
  position: absolute; top: -9px; right: 12px;
  background: var(--grad); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  border-radius: 7px; padding: 2.5px 9px; white-space: nowrap; z-index: 2;
}
/* Черновик (не опубликована) — красная обводка, видят только стафф */
.chapter-row { position: relative; }
.chapter-row.draft { outline: 2px solid #ff5470; }
.draft-badge {
  position: absolute; top: -9px; left: 12px;
  background: #ff5470; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  border-radius: 7px; padding: 2.5px 9px; white-space: nowrap; z-index: 2;
}

/* перенос длинных названий на главной */
.tname-row { align-items: flex-start; }
.tname-row .tname {
  white-space: normal; text-overflow: initial;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}

/* плашка скрытого хранилища */
.vault-card { cursor: pointer; transition: border-color .15s; }
.vault-card:hover { border-color: var(--accent); }
.vault-card .vname { font-size: 16px; font-weight: 800; }


/* ---------- v1.8.1: единый вид обложек ---------- */
.bm-grid > * { min-width: 0; }
.bm-cover img, .title-card .cover, .nf-cover, .title-head .cover { display: block; object-fit: cover; }
.bm-cover { width: 100%; }

/* ---------- v1.8.2 ---------- */
/* плавная смена статуса прочитанности */
.chapter-row { transition: opacity .4s ease; }
.read-eye { transition: color .25s ease, background .15s; }

/* поиск */
.search-inp {
  width: 100%; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; color: var(--text);
  font-size: 14px; outline: none;
}
.search-inp:focus { border-color: var(--accent); }
.search-inp::placeholder { color: var(--muted-2); }

/* ---------- v1.9: постраничная читалка манги ---------- */
.reader.manga { height: 100vh; height: var(--tg-viewport-height, 100vh); overflow: hidden; }
.manga-stage {
  position: fixed; inset: 0; background: #07050f;
  display: flex; align-items: center; justify-content: center;
}
/* единый «цифровой контейнер»: страница вписывается целиком,
   размер кадра не прыгает, сервер ничего не пересжимает */
.manga-stage #mpage {
  width: 100%; height: 100%; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none;
}
.m-zone { position: absolute; top: 0; bottom: 0; z-index: 5; }
.m-zone.left { left: 0; width: 33%; }
.m-zone.center { left: 33%; width: 34%; }
.m-zone.right { right: 0; width: 33%; }
.m-counter {
  position: absolute; bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); z-index: 6;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: rgba(10, 8, 20, .65); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; pointer-events: none;
}
.reader.manga .reader-panel { z-index: 20; transition: transform .2s ease, opacity .2s ease; }
.reader.manga .reader-panel.hide { transform: translateY(-110%); opacity: 0; pointer-events: none; }

.manga-end {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(7, 5, 15, .92); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.manga-end.hidden { display: none; }
.m-end-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 22px; max-width: 380px; width: 100%; text-align: center;
}
.m-end-card .big { font-size: 42px; margin-bottom: 10px; }
.m-end-card h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; }
.m-end-card .desc { margin: 0 0 16px; }
.m-end-card .btn { margin-top: 10px; }

/* ---------- обучение читалки ---------- */
.tut-zones { display: flex; gap: 8px; margin-bottom: 12px; }
.tut-zones .tz {
  flex: 1; background: var(--card-2); border: 1px dashed var(--border);
  border-radius: 12px; padding: 14px 6px; font-size: 12px; font-weight: 700; color: var(--muted);
}
.tut-zones .tz-ic { font-size: 22px; color: var(--accent); margin-bottom: 4px; }
.tut-scroll {
  height: 74px; background: var(--card-2); border: 1px dashed var(--border);
  border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.tut-arrow { font-size: 30px; color: var(--accent); animation: tutBounce 1.2s ease-in-out infinite; }
@keyframes tutBounce { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }

/* ---------- v1.9.3 ---------- */
/* зум манги: страница скроллится, тап-зоны выключены */
.manga-stage.zoomed { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
.manga-stage.zoomed #mpage { height: auto; max-width: none; object-fit: initial; }
.manga-stage.zoomed .m-zone { display: none; }
#m-zoom-in, #m-zoom-out { font-size: 19px; font-weight: 800; line-height: 1; }

/* единая высота строк глав: платные не выше бесплатных */
.chapter-row { min-height: 64px; }
.chapter-row .body { min-width: 0; }
.chapter-row .cname,
.chapter-row .csub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-row .ch-meta { gap: 2px; }
.chapter-row .ch-meta .ch-date { line-height: 1.2; }


/* ===== Ранний доступ: янтарная палитра ===== */
:root { --amber: #f0b341; --amber-soft: rgba(240, 179, 65, .14); --amber-line: rgba(240, 179, 65, .45); }

/* карточка на главной: замок и таймер вместо «Premium» и «через» */
.recent-ch .rc-lock { font-style: normal; color: var(--amber); margin-left: 4px; }
.recent-ch .rc-lock svg { vertical-align: -1px; }
.recent-ch .rc-cd { font-style: normal; color: var(--amber); font-weight: 700; white-space: nowrap; }

/* список глав тайтла: ранний доступ */
.chapter-row .num.locked {
  color: var(--amber); background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  display: inline-flex; align-items: center; justify-content: center;
}
.chapter-row .num.locked svg { width: 15px; height: 15px; }
.chapter-row .cname-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.early-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-soft);
  border: 1px solid var(--amber-line); border-radius: 999px; padding: 2.5px 8px;
  white-space: nowrap;
}
.early-badge svg { width: 9px; height: 9px; }
.chapter-row .csub.unlock { color: var(--amber); font-weight: 700; }
/* дата публикации — справа, на уровне глазика просмотров */
.chapter-row .ch-date { flex: none; align-self: center; margin-left: auto; }
.chapter-row .views-mini { flex: none; }
@media (max-width: 430px) {
  .early-badge { font-size: 8.5px; padding: 2px 6px; }
  .chapter-row .ch-date { font-size: 10px; }
}

/* ===== Компоновка строк глав: всё влезает на узких экранах ===== */
/* на главной таймер стоит вплотную к замочку */
.recent-ch .rc-name { display: inline-flex; align-items: center; gap: 6px; }
.recent-ch .rc-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: 0; line-height: 1; }
.recent-ch .rc-lock svg { width: 12px; height: 12px; vertical-align: 0; display: block; }
.recent-ch .rc-cd { margin-left: 0; font-size: 11px; line-height: 1; }

/* правый столбик строки главы: дата сверху, просмотры под ней */
.chapter-row .ch-meta {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 3px; flex: none; margin-left: auto; min-width: 0;
}
.chapter-row .ch-meta .ch-date { margin-left: 0; align-self: flex-end; }
.chapter-row .ch-meta .views-mini { min-width: 0; }
/* имя главы не обрезается: плашка фиксирована, имя гибкое */
.chapter-row .cname-row .cname { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.chapter-row .body { overflow: hidden; }

/* узкие экраны (Telegram-мини-апп): уплотняем */
@media (max-width: 480px) {
  .chapter-row { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .chapter-row .num { width: 32px; height: 32px; font-size: 12.5px; }
  .chapter-row .num.locked svg { width: 13px; height: 13px; }
  .chapter-row .cname { font-size: 13.5px; }
  .chapter-row .csub { font-size: 10.5px; }
  .chapter-row .cname-row { gap: 6px; }
  .early-badge { font-size: 8px; padding: 2px 5px; letter-spacing: .04em; gap: 3px; }
  .early-badge svg { width: 8px; height: 8px; }
  .chapter-row .ch-meta .ch-date { font-size: 9.5px; }
  .chapter-row .ch-meta .views-mini { font-size: 10.5px; }
  .chapter-row .ch-meta .views-mini svg { width: 12px; height: 12px; }
  .read-eye svg { width: 16px; height: 16px; }
}

/* экран «глава закрыта»: таймер в янтарном, как весь ранний доступ */
.locked-timer {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: var(--amber-line);
}

/* ===== привязки: единый размер кнопок и плашек ===== */
.link-row .btn, .link-row .pill {
  min-width: 108px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; flex: none;
}

/* ===== уровни подписки: горизонтальный слайдер, третья карточка видна ===== */
.levels-grid {
  display: flex; grid-template-columns: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 12px; margin-bottom: 14px; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.levels-grid::-webkit-scrollbar { display: none; }
.levels-grid .level-mini {
  flex: 0 0 41%; max-width: 230px; min-width: 150px;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .levels-grid .level-mini { flex: 0 0 220px; }
}

/* ===== поиск с простой лупой ===== */
.search-wrap { position: relative; margin-bottom: 14px; }
.search-wrap .s-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; pointer-events: none;
}
.search-wrap .search-inp { padding-left: 42px; margin-bottom: 0; width: 100%; box-sizing: border-box; }

/* ===== счётчик скрытого хранилища ===== */
.vault-card .vault-cnt {
  font-size: 12px; font-weight: 700; color: var(--muted);
  white-space: nowrap; margin-right: 4px; flex: none;
}

/* ===== статбар тайтла: оценка | главы | закладки ===== */
.stat-bar {
  display: flex; background: var(--card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.stat-bar .stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border: none; border-left: 1px solid var(--border-soft);
  background: transparent; color: inherit; font: inherit;
}
.stat-bar .stat:first-child { border-left: none; }
.stat-bar button.stat { cursor: pointer; }
.stat-bar button.stat:active { background: rgba(255,255,255,.04); }
.stat-bar .s-val {
  font-weight: 800; font-size: 16px; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.stat-bar .s-val svg { flex: none; display: block; }
.stat-bar .s-cap { font-size: 11.5px; color: var(--muted); }

/* ===== модалка оценки ===== */
.rate-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.rate-v {
  padding: 12px 0; border-radius: 12px; border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.04); color: inherit; font-weight: 800; font-size: 15px;
}
.rate-v.on { background: linear-gradient(120deg, #8a7cf5, #46c2ad); border-color: transparent; color: #fff; }

/* ===== компактная плашка активной подписки ===== */
.sub-mini { display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-weight: 700; font-size: 13.5px; }
.sub-mini .sm-dot { width: 9px; height: 9px; border-radius: 50%; background: #5fcf80; box-shadow: 0 0 8px #5fcf80; flex: none; }
.sub-mini .sub-badge { flex: none; }
.sub-mini .sm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-mini .sm-since { font-size: 12px; font-weight: 600; color: var(--muted-2); }
/* Плашка сбора средств в аккаунте */
.fund-card { padding: 14px 16px; }
.fund-card .fund-sum { font-size: 13.5px; color: var(--muted); margin-bottom: 9px; }
.fund-card .fund-sum b { color: var(--text); font-weight: 800; }
.fund-card .fund-bar { height: 8px; border-radius: 999px; background: var(--card-2); overflow: hidden; border: 1px solid var(--border); }
.fund-card .fund-bar-fill { height: 100%; background: var(--grad); border-radius: 999px; transition: width .4s ease; min-width: 0; }
.fund-card .fund-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.fund-card .fund-label { font-size: 13px; color: var(--muted); min-width: 0; }
.fund-card .fund-btn { flex: none; }
/* Серые ссылки под кнопкой выхода — всегда по центру, перенос по ширине */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin: 16px auto 6px; text-align: center; }
.footer-link { color: var(--muted-2); font-size: 12.5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.footer-link:hover { color: var(--muted); text-decoration: underline; }
/* Встроенная иконка в текст (например, закладка в пустом состоянии) */
.inline-ic { display: inline-flex; width: 15px; height: 15px; vertical-align: -2px; }
.inline-ic svg { width: 15px; height: 15px; }
/* Полупрозрачный индикатор номера страницы в читалке манхвы (некликабельный) */
.reader-pageind {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: rgba(8, 6, 18, .55); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .02em;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 40;
}
.reader-pageind.show { opacity: .85; }
/* Текст документа во всплывающем окне */
.doc-text { color: var(--muted); font-size: 14px; line-height: 1.6; max-height: 60vh; overflow-y: auto; }
.doc-text p { margin: 0 0 10px; }
.sm-dot.pulse { animation: dot-pulse 1.6s ease-in-out infinite; }
.sm-dot.red { background: #e0483a; box-shadow: 0 0 8px #e0483a; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.78); }
}

/* ===== уровни: единая высота карточек ===== */
.levels-grid { align-items: stretch; }
.level-mini .lm-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.9em;
}
.level-mini .lm-more { margin-top: auto; }

/* ===== заставка «только внутри Telegram» ===== */
.tg-splash {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.tg-splash .sp-eyebrow { margin-top: 16px; font-size: 11px; letter-spacing: .18em; font-weight: 800; color: var(--accent); }
.tg-splash h1 { font-size: 22px; margin: 10px 0 6px; }
.tg-splash .sub { color: var(--muted); margin: 0 0 18px; }
.tg-splash .sp-btn { min-width: 210px; }
.tg-splash .sp-status { margin: 0 0 14px; font-weight: 700; font-size: 13.5px; padding: 10px 14px; border-radius: 12px; background: rgba(95,207,128,.12); }
.tg-splash .sp-status.err { background: rgba(240,100,100,.12); }
.tg-splash .team-login {
  margin-top: 26px; background: none; border: none; color: var(--muted);
  font-size: 12px; text-decoration: underline; opacity: .65; cursor: pointer;
}


/* ===== выпадающие списки в стиле сайта ===== */
select.inp, select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--card-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a99fd6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); padding: 10px 36px 10px 13px;
  font: inherit; font-size: 13.5px; cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }
select option, select optgroup {
  background: #14102a; color: #e8e3f7;
}

/* ===== стилизованное подтверждение ===== */
.confirm-dlg { max-width: 360px; text-align: center; }
.confirm-dlg .confirm-text { margin: 4px 0 16px; font-size: 14px; line-height: 1.5; }
.confirm-dlg .confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-dlg .confirm-actions .btn { min-width: 110px; }

/* ===== Блокировка прокрутки страницы под модалкой (п.5) ===== */
html.modal-open, html.modal-open body { overflow: hidden !important; }
.app-modal-overlay { overscroll-behavior: contain; }
.app-modal { overscroll-behavior: contain; }

/* ===== Бейдж статуса тайтла ===== */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; margin-top: 8px;
  border: 1px solid var(--border);
  background: var(--card-2); color: var(--muted);
}
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge.ongoing   { color: #57b96b; border-color: rgba(87,185,107,.4);  background: rgba(87,185,107,.12); }
.status-badge.completed  { color: var(--accent); border-color: rgba(150,110,245,.4); background: var(--accent-soft); }
.status-badge.frozen    { color: #5aa9e6; border-color: rgba(90,169,230,.4);  background: rgba(90,169,230,.12); }
.status-badge.paused    { color: #e6a94a; border-color: rgba(230,169,74,.45);  background: rgba(230,169,74,.12); }

/* ===== Объявление: компактный значок в шапке (п.4) ===== */
.brand .announce-chip {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px; max-width: 46%;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff; border: none; border-radius: 999px;
  padding: 7px 12px; font-weight: 700; font-size: 12.5px; line-height: 1;
  box-shadow: 0 4px 14px rgba(111,79,224,.30); cursor: pointer;
}
.brand .announce-chip:active { transform: translateY(1px); }
.brand .announce-chip .ac-ic { display: inline-flex; line-height: 1; }
.brand .announce-chip .ac-ic svg { display: block; }
.brand .announce-chip .ac-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* небольшая пульсация значка объявления */
.brand .announce-chip.pulse { animation: ann-pulse 2s ease-in-out infinite; }
@keyframes ann-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(111,79,224,.30); }
  50%      { box-shadow: 0 4px 14px rgba(111,79,224,.30), 0 0 0 5px rgba(111,79,224,.20); }
}
@media (prefers-reduced-motion: reduce) { .brand .announce-chip.pulse { animation: none; } }

/* содержимое окна объявления */
.announce-modal .am-title { font-weight: 800; font-size: 18px; margin: 2px 30px 12px 0; }
.announce-modal .am-body {
  font-size: 14px; line-height: 1.55; color: var(--text);
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  word-break: break-word; white-space: normal;
}
.announce-modal .am-body a { color: var(--accent); text-decoration: underline; }
.announce-modal .am-body strong { color: #fff; }
.announce-modal .am-actions { margin-top: 16px; display: flex; justify-content: flex-end; }

/* статус под обложкой тайтла — не шире обложки (правка) */
.title-hero .hero-left { flex: none; width: 104px; display: flex; flex-direction: column; gap: 8px; }
.title-hero .hero-left .cover { margin: 0; }
.hero-left .status-badge {
  margin-top: 0; width: 100%; max-width: 104px;
  justify-content: center; text-align: center;
  white-space: normal; line-height: 1.2; padding: 5px 8px;
}
.hero-left .status-badge::before { display: none; }
.status-badge.upcoming { color: #e8584f; border-color: rgba(232,88,79,.5); background: rgba(232,88,79,.14); }

/* ---------- Репорт главы (читалка) ---------- */
.report-modal .fld { display: block; }
.report-modal .lt {
  display: block; font-size: 12.5px; color: var(--muted);
  margin-bottom: 5px; font-weight: 600;
}
.report-modal .inp {
  width: 100%; box-sizing: border-box;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font: inherit; font-size: 14px; outline: none;
}
.report-modal .inp:focus { border-color: var(--accent); }
.report-modal textarea.inp { resize: vertical; min-height: 96px; line-height: 1.4; }
.report-modal .inp.file { padding: 9px 12px; font-size: 13px; }
.report-modal .rep-prev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.report-modal .rep-chip {
  font-size: 11.5px; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Иконка в окне «Закладки — Premium» (п.5): в стиле сайта */
.gate-ic {
  width: 44px; height: 44px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.gate-ic svg { width: 100%; height: 100%; display: block; }

/* Анимация нажатия колокольчика/закладки на странице тайтла (п.4) */
.list-tools .icon-btn.pop { animation: btn-pop .3s ease; }
@keyframes btn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(.86); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .list-tools .icon-btn.pop { animation: none; } }

/* Форматирование внутри описаний (markdown из админки) */
.title-desc a, .lm-desc a, .doc-text a, .announce-modal .am-body a { color: var(--accent); text-decoration: underline; }
.title-desc strong, .lm-desc strong, .doc-text strong { color: var(--text); }

/* Плашка «привяжите Telegram» для VK-аккаунтов (жёлтая обводка) */
.link-tg-banner {
  border: 1.5px solid #e6b54a;
  box-shadow: 0 0 0 3px rgba(230, 181, 74, .12);
}
.link-tg-banner .ltb-text { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.link-tg-banner #link-tg-widget { display: flex; justify-content: center; min-height: 44px; align-items: center; }