/* Тема берётся из Telegram (themeParams прокидываются в CSS-переменные из app.js). */
:root {
  --bg: var(--tg-theme-bg-color, #17212b);
  --secbg: var(--tg-theme-secondary-bg-color, #232e3c);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --hint: var(--tg-theme-hint-color, #93a3b3);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --btn: var(--tg-theme-button-color, #50a8eb);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Вся управляющая «обвязка» (поиск + сегменты статуса + тулбар) липнет одним
   блоком — чтобы не вычислять offset'ы для каждой полосы по отдельности. */
.chrome {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
}
.topbar {
  background: var(--bg);
  padding: 10px 12px 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.stats { font-size: 13px; color: var(--hint); min-height: 16px; }

/* премиум-строка в шапке */
.premium-row[hidden] { display: none; }
.prem-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: #ffd24a22; color: #ffd24a;
}
.prem-badge.on { cursor: default; }
.paywall ul { margin: 6px 0; padding-left: 20px; }
.paywall li { margin: 4px 0; font-size: 14px; }
.early { color: #ff8a3d; font-size: 11px; font-weight: 600; }
.prem-tag { font-size: 11px; }
.rate { color: #ffd24a; font-size: 11px; }

/* ── рейтинг (звёзды в деталях) ── */
.rating-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 2px;
}
.stars { display: inline-flex; gap: 2px; }
.star {
  border: none; background: none; cursor: pointer; padding: 2px;
  font-size: 24px; line-height: 1; color: #6b7785;
}
.star.on { color: #ffd24a; }
.star:active { transform: scale(0.9); }
.rating-agg { font-size: 13px; color: var(--hint); }

/* ── партнёрский баннер ── */
.adslot { padding: 0 12px 8px; }
.adslot[hidden] { display: none; }
.adbanner {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; border-radius: var(--radius); cursor: pointer;
  background: var(--secbg); color: var(--text); text-align: left;
  padding: 8px 10px; overflow: hidden;
}
.adbanner img {
  flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; background: #000;
}
.adbanner .ad-text { flex: 1 1 auto; font-size: 13px; line-height: 1.3; }
.adbanner .ad-label {
  flex: 0 0 auto; font-size: 9px; color: var(--hint);
  align-self: flex-start; text-transform: uppercase;
}
.search {
  width: 100%; padding: 9px 12px;
  border: none; border-radius: var(--radius);
  background: var(--secbg); color: var(--text); font-size: 15px;
}
.search::placeholder { color: var(--hint); }

/* ── сегментированный переключатель статуса ── */
.seg {
  display: flex; gap: 4px;
  padding: 0 12px 6px;
}
.segbtn {
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  padding: 7px 8px; border: none; border-radius: 999px;
  background: var(--secbg); color: var(--hint); font-size: 14px; cursor: pointer;
}
.segbtn.active { background: var(--btn); color: var(--btn-text); }
/* У витрины (role-user) выбор статуса не нужен — есть только опубликованное. */
body.role-user .seg { display: none; }

/* Витрина (роль user): админские элементы скрыты (вкладки, кнопки и т.п.). */
body.role-user .admin-only { display: none; }

/* ── панель сортировки / теги / случайная / SFW ── */
.toolbar {
  display: flex; gap: 8px; align-items: center; padding: 0 12px 8px;
  overflow-x: auto; scrollbar-width: none;   /* фолбэк, если кнопки не влезли */
}
.toolbar::-webkit-scrollbar { display: none; }
/* Кнопка-чип «🏷 Теги» */
.chipbtn {
  flex: 0 0 auto; white-space: nowrap;
  padding: 8px 12px; border: none; border-radius: 999px;
  background: var(--secbg); color: var(--text); font-size: 14px; cursor: pointer;
}
.chipbtn.on { background: var(--btn); color: var(--btn-text); }
/* Точка-индикатор непустой очереди на кнопке ⚙ */
.iconbtn.has-badge { position: relative; }
.iconbtn.has-badge::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff8a3d; border: 1px solid var(--bg);
}

/* ── выезжающая шторка (теги / инструменты) ── */
.sheet { position: fixed; inset: 0; z-index: 30; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 80vh; display: flex; flex-direction: column;
  background: var(--bg); border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .2s ease;
}
.sheet.show .sheet-box { transform: translateY(0); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 600; margin-bottom: 10px;
}
.xbtn {
  border: none; background: none; color: var(--hint);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}
.sheet .search { margin-bottom: 10px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 10px; }
.sheet-actions .mbtn { flex: 1 1 0; }

/* список тегов в шторке */
.taglist { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tagrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 8px; border: none; border-radius: 8px;
  background: none; color: var(--text); font-size: 15px;
  cursor: pointer; text-align: left;
}
.tagrow.on { background: var(--secbg); }
.tagrow .tr-check { font-size: 16px; flex: 0 0 auto; color: var(--btn); }
.tagrow .tr-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagrow .tr-count { flex: 0 0 auto; font-size: 12px; color: var(--hint); }

/* список инструментов в шторке */
.toollist { display: flex; flex-direction: column; gap: 4px; }
.toolitem {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 14px 12px; border: none; border-radius: 10px;
  background: var(--secbg); color: var(--text); font-size: 16px;
  cursor: pointer; text-align: left;
}
.ti-badge { margin-left: auto; font-size: 13px; color: #ff8a3d; font-weight: 600; }
.sortsel {
  flex: 1 1 auto; min-width: 84px; padding: 8px 10px; border: none; border-radius: 10px;
  background: var(--secbg); color: var(--text); font-size: 14px;
}
.iconbtn {
  flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 10px;
  background: var(--secbg); color: var(--text); font-size: 17px; cursor: pointer;
}
.iconbtn.on { background: var(--btn); color: var(--btn-text); }

/* SFW-режим: блюр обложек до тапа */
body.sfw .cover { filter: blur(16px); transition: filter .2s; }
body.sfw .cover.revealed { filter: none; }

/* ── режим множественного выбора (bulk) ── */
.sel-overlay {
  display: none; position: absolute; inset: 0; z-index: 5;
  background: transparent; cursor: pointer;
}
body.select-mode .sel-overlay { display: block; }
.card.selected { outline: 3px solid var(--btn); outline-offset: -3px; }
.card.selected::after {
  content: "✓"; position: absolute; top: 6px; left: 6px; z-index: 6;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--btn); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.bulkbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 25; display: flex; align-items: center; gap: 10px;
  background: var(--secbg); border-radius: 999px; padding: 8px 12px;
  box-shadow: 0 4px 16px #0006;
}
.bulkbar[hidden] { display: none; }
.bulk-count { font-size: 13px; color: var(--text); }
.bulkbar .mbtn { padding: 8px 14px; }

.grid {
  display: grid; gap: 10px; padding: 10px 12px 24px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.card {
  background: var(--secbg); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.fav-star {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 30px; height: 30px; border: none; border-radius: 999px;
  background: #000a; color: #ffd24a; font-size: 16px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fav-star.on { color: #ffd24a; }
.fav-star:not(.on) { color: #fff; }
.card .ctags { display: flex; flex-wrap: wrap; gap: 4px; }
.ctag { color: var(--link); font-size: 11px; cursor: pointer; }
.prog { color: #4ad66d; font-size: 11px; }
.card .cover {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: #000 center/contain no-repeat;
  display: block;
}
.card .cover.placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--hint); font-size: 28px;
}
.card .body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.card .title { font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: 11px; color: var(--hint); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.card .links { display: flex; gap: 8px; margin-top: 2px; }
.card .links a { color: var(--link); font-size: 12px; text-decoration: none; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.abtn {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; background: #ffffff14; color: var(--text);
}
.abtn:active { transform: scale(0.92); }
.abtn.publish { background: #2ea04330; }
.abtn.delete  { background: #d2353530; }
.abtn.unpublish { background: #d2992230; }
.abtn.republish { background: #6ab3f330; }
.abtn.edittags { background: #9d7be030; }
.abtn.cover { background: #3ad6c930; }
.abtn.force { background: #2ea04330; }
.abtn.retry { background: #8888ff30; }

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #000c; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; z-index: 20; max-width: 90%; text-align: center;
}

.badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.badge.published { background: #2ea04326; color: #4ad66d; }
.badge.pending   { background: #d2992226; color: #f0c459; }
.badge.blocked_tags, .badge.untagged { background: #d2353526; color: #f06a6a; }
.badge.incomplete { background: #8888ff26; color: #9d9dff; }

.pager {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px; background: var(--bg);
}
.pgbtn {
  width: 40px; height: 36px; border: none; border-radius: var(--radius);
  background: var(--secbg); color: var(--text); font-size: 18px; cursor: pointer;
}
.pgbtn:disabled { opacity: .4; }
#pginfo { font-size: 13px; color: var(--hint); min-width: 48px; text-align: center; }

.banner {
  margin: 16px 12px; padding: 14px; border-radius: var(--radius);
  background: var(--secbg); color: var(--hint); text-align: center; font-size: 14px;
}
.empty { grid-column: 1/-1; text-align: center; color: var(--hint); padding: 40px 0; }

.qrow {
  grid-column: 1/-1; background: var(--secbg); border-radius: var(--radius);
  padding: 10px 12px; font-size: 14px;
}
.qrow .q-src { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }

/* ── модалка ── */
.modal {
  position: fixed; inset: 0; z-index: 30;
  background: #0008; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
/* .modal задаёт display:flex и перебивает атрибут hidden — возвращаем скрытие. */
.modal[hidden] { display: none; }

/* ── возрастной гейт 18+ ── */
.agegate {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.agegate[hidden] { display: none; }
.agegate-box {
  max-width: 360px; text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.agegate-emoji { font-size: 56px; line-height: 1; }
.agegate-title { font-size: 20px; font-weight: 700; }
.agegate-text { font-size: 14px; color: var(--hint); line-height: 1.5; }
.agegate-actions { display: flex; gap: 12px; margin-top: 8px; }
.agegate-actions .mbtn { padding: 11px 20px; }
.modal-box {
  width: 100%; max-width: 440px; background: var(--bg);
  border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.modal-title { font-size: 15px; font-weight: 600; }
.modal-input {
  width: 100%; padding: 10px 12px; border: none; border-radius: 10px;
  background: var(--secbg); color: var(--text); font-size: 15px; resize: vertical;
  font-family: inherit;
}
.modal-hint { font-size: 12px; color: var(--hint); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.mbtn {
  border: none; border-radius: 10px; cursor: pointer;
  padding: 9px 18px; font-size: 14px;
}
.mbtn.primary { background: var(--btn); color: var(--btn-text); }
.mbtn.ghost { background: var(--secbg); color: var(--text); }
.mbtn:disabled { opacity: .5; }

/* ── расписание ── */
.sched-wrap { grid-column: 1/-1; display: flex; flex-direction: column; gap: 12px; }
.sched-card {
  background: var(--secbg); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.sched-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sched-summary { font-size: 12px; color: var(--hint); }
.sched-next { font-size: 12px; color: var(--hint); }
.sched-next code { font-size: 12px; }
.sched-mode, .sched-num, .sched-unit, .sched-times {
  padding: 8px 10px; border: none; border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}
.sched-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sched-num { width: 80px; }
.sched-times { flex: 1 1 140px; min-width: 120px; }
.wchips { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; }
.wchip {
  font-size: 13px; padding: 5px 10px; border-radius: 999px;
  background: var(--bg); color: var(--hint); cursor: pointer; user-select: none;
}
.wchip.on { background: var(--btn); color: var(--btn-text); }
.wchip input { display: none; }
.sched-save { align-self: flex-start; }

/* ── выбор обложки ── */
.cover-pick { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cover-pick-img {
  max-width: 100%; max-height: 60vh; border-radius: 10px;
  background: #000; object-fit: contain;
}
.cover-pick-nav { display: flex; align-items: center; gap: 16px; }

/* ── детальная карточка + галерея ── */
.tappable { cursor: pointer; }
.detail { display: flex; flex-direction: column; gap: 8px; max-height: 72vh; overflow-y: auto; }
.d-row { display: flex; gap: 8px; font-size: 13px; }
.d-k { color: var(--hint); flex: 0 0 88px; }
.d-v { flex: 1 1 auto; word-break: break-word; }
.d-v a { color: var(--link); text-decoration: none; }
.d-gallery {
  display: grid; gap: 4px; margin-top: 6px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.g-thumb {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 6px; background: #000;
}
.read-btn { width: 100%; margin: 6px 0 2px; }

/* ── читалка ── */
.reader {
  position: fixed; inset: 0; z-index: 60;
  background: #000; display: flex; flex-direction: column;
}
.reader-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #000c; color: #fff;
}
.reader-close, .reader-mode {
  flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 8px;
  background: #ffffff22; color: #fff; font-size: 16px; cursor: pointer;
}
.reader-title {
  flex: 1 1 auto; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reader-count { flex: 0 0 auto; font-size: 12px; color: #bbb; min-width: 56px; text-align: right; }
.reader-body { flex: 1 1 auto; position: relative; }
.reader-body.webtoon { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.reader-page { display: block; width: 100%; }
body.reader-open { overflow: hidden; }

/* постраничный режим */
.reader-body.paged { overflow: hidden; display: flex; }
.paged-stage {
  position: relative; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
}
.paged-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tapzone {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.tz-prev { left: 0; }
.tz-next { right: 0; }

/* ── ревью дублей ── */
.dup-wrap { grid-column: 1/-1; display: flex; flex-direction: column; gap: 16px; }
.dup-group {
  background: var(--secbg); border-radius: var(--radius); padding: 10px;
}
.dup-head { font-size: 13px; color: var(--hint); margin-bottom: 8px; }
.dup-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.dup-cards .card { background: var(--bg); }

/* ── чёрный список ── */
.bl-wrap { grid-column: 1/-1; display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.bl-add { display: flex; gap: 8px; }
.bl-add .search { flex: 1 1 auto; }
.bl-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--secbg); border-radius: 999px; padding: 6px 8px 6px 12px;
  font-size: 13px;
}
.bl-del {
  border: none; background: #d2353540; color: #f06a6a;
  width: 20px; height: 20px; border-radius: 999px; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
}