/* Цвета берём у Телеграма. Свои — только как запасные, если приложение
   открыли вне Телеграма или тема не пришла. Тёмная тема получается сама:
   Телеграм присылает тёмные значения тех же переменных. */
:root {
  --bg:        var(--tg-theme-bg-color, #ffffff);
  --text:      var(--tg-theme-text-color, #1a1a1a);
  --hint:      var(--tg-theme-hint-color, #8b8b8b);
  --link:      var(--tg-theme-link-color, #2a7fd4);
  --btn:       var(--tg-theme-button-color, #2a7fd4);
  --btn-text:  var(--tg-theme-button-text-color, #ffffff);
  --panel:     var(--tg-theme-secondary-bg-color, #f2f3f5);
  --section:   var(--tg-theme-section-bg-color, var(--panel));
  --subtitle:  var(--tg-theme-subtitle-text-color, var(--hint));
  --radius: 14px;
  --gap: 12px;
}
/* Запасная тёмная тема — на случай, когда цвета не пришли вовсе. */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --bg: var(--tg-theme-bg-color, #17212b);
    --text: var(--tg-theme-text-color, #f2f2f2);
    --hint: var(--tg-theme-hint-color, #9aa5b1);
    --panel: var(--tg-theme-secondary-bg-color, #232e3c);
    --section: var(--tg-theme-section-bg-color, #232e3c);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Скрытое — значит скрытое, чем бы его ни красили ниже. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding: 0 0 env(safe-area-inset-bottom);
  overscroll-behavior-y: contain;
}
h1 { font-size: 20px; line-height: 1.25; margin: 0 0 4px; }

/* --- заставка / отказ --------------------------------------------------- */
.gate { position: fixed; inset: 0; display: grid; place-items: center;
        background: var(--bg); padding: 24px; z-index: 20; }
.gate-box { text-align: center; max-width: 320px; }
.gate-icon { margin-bottom: 12px; }
.gate p { color: var(--hint); }

/* --- поиск --------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg);
          padding: 10px 12px 8px; }
.searchrow { display: flex; gap: 8px; }
.search {
  flex: 1 1 auto; min-width: 0;
  font-size: 17px; padding: 13px 14px;
  border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--text);
}
.search::placeholder { color: var(--hint); }
.search:focus { outline: 2px solid var(--btn); outline-offset: 1px; }
.go {
  flex: 0 0 auto; font-size: 17px; font-weight: 600;
  padding: 13px 18px; border: 0; border-radius: var(--radius);
  background: var(--btn); color: var(--btn-text);
}
.go:active { opacity: .75; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  font-size: 15px; padding: 7px 13px; border: 0; border-radius: 999px;
  background: var(--panel); color: var(--text);
}
.chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-text); }

.note { margin: 4px 12px 0; color: var(--hint); font-size: 15px; }
.empty { margin: 40px 20px; text-align: center; color: var(--hint); }
.hello { margin: 26px 16px 30px; text-align: center;
         color: var(--hint); font-size: 14px; }

/* --- список -------------------------------------------------------------- */
.list { padding: 8px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  text-align: left; padding: 10px; border: 0;
  border-radius: var(--radius); background: var(--section); color: var(--text);
  font: inherit;
}
.item:active { opacity: .7; }
.cover {
  flex: 0 0 auto; width: 54px; height: 78px; border-radius: 8px;
  background: var(--panel); overflow: hidden;
  display: grid; place-items: center;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-ph { font-size: 26px; opacity: .55; }
.cover.big { width: 108px; height: 156px; }
.cover.big .cover-ph { font-size: 46px; }

.it-title { font-weight: 600; margin: 0 0 2px; }
.it-authors { margin: 0; color: var(--subtitle); font-size: 15px; }
.it-teaser { margin: 4px 0 0; color: var(--hint); font-size: 14px; }
.it-badge { display: inline-block; margin-top: 4px; font-size: 13px;
            color: var(--hint); }
.more { text-align: center; padding: 16px; color: var(--hint); }

/* --- карточка ------------------------------------------------------------ */
.back { margin: 10px 12px 0; padding: 9px 14px; border: 0;
        border-radius: 999px; background: var(--panel); color: var(--text);
        font-size: 15px; }
.card { padding: 12px 12px 40px; }
.card-top { display: flex; gap: 14px; align-items: flex-start; }
.card-head { min-width: 0; }
.authors { margin: 0 0 4px; color: var(--link); }
.series { margin: 0 0 4px; color: var(--subtitle); font-size: 15px; }
.meta { margin: 0; color: var(--hint); font-size: 14px; }
.annotation { margin: 16px 0; white-space: pre-wrap; }
.download {
  display: block; width: 100%; margin-top: 8px;
  font-size: 19px; font-weight: 600; padding: 17px;
  border: 0; border-radius: var(--radius);
  background: var(--btn); color: var(--btn-text);
}
.download:active { opacity: .75; }
.download[disabled] { opacity: .5; }
.dl-note { margin: 10px 2px 0; color: var(--hint); font-size: 14px; }
.ghost {
  display: block; width: 100%; margin-top: 10px;
  font-size: 16px; padding: 13px; border: 0; border-radius: var(--radius);
  background: var(--panel); color: var(--text);
}

/* --- всплывашка ---------------------------------------------------------- */
.toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 30; font-size: 15px;
}

.spin { display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
        border: 2px solid var(--hint); border-top-color: transparent;
        border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }