/* ============================================================
   Livria — modern minimal (Inkora-inspired layout, our content)
   Font: Manrope. Palette: warm light grey / near-black / white.
   ============================================================ */

/* ---- Light palette (default / system-light) ---- */
:root {
  --bg:        #e4e0d7;   /* a touch deeper so white cards read clearly */
  --card:      #ffffff;   /* white cards → stronger contrast in light mode */
  --soft:      #ffffff;
  --ink:       #141317;
  --ink-soft:  #5c5a52;   /* darker secondary text for readability */
  --line:      #cdc7ba;   /* more visible separators */
  --accent:    #c65a37;   /* muted terracotta, used sparingly */
  --btn-bg:    #18171b;   /* primary button */
  --btn-fg:    #f4f3f0;
  --panel-bg:  #18171b;   /* dark feature cards */
  --panel-fg:  #f4f3f0;
  --glow:      70, 66, 74;
  --shadow:    0 20px 50px -28px rgba(24, 23, 27, .45);
  --panel-fg-soft: rgba(244,243,240,.74); --panel-fg-faint: rgba(244,243,240,.55); --accent-fade: rgba(198,90,55,.26);
  /* Frosted-glass surfaces (translucent panels with a real blur behind them) */
  --glass:      rgba(255,255,255,.72);   /* filled enough to read as a light card, still see-through */
  --glass-brd:  rgba(255,255,255,.9);
  --glass-bar:  rgba(246,244,240,.7);    /* header / tabbar tint */
  --glass-blur: blur(16px) saturate(1.6);
  --glass-shadow: 0 20px 44px -18px rgba(30,27,24,.4), 0 4px 14px -8px rgba(30,27,24,.22);

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d10; --card: #26242b; --soft: #2f2d35;
    --ink: #f4f3f0; --ink-soft: #a9a79e; --line: #35343c;
    --accent: #e07a54; --btn-bg: #f2f1ee; --btn-fg: #17161a;
    --panel-bg: #050507; --panel-fg: #f2f1ee;
    --glow: 232, 230, 224; --shadow: 0 22px 54px -28px rgba(0,0,0,.75);
    --panel-fg-soft: rgba(242,241,238,.74); --panel-fg-faint: rgba(242,241,238,.55); --accent-fade: rgba(224,122,84,.26);
    --glass: rgba(58,56,66,.62); --glass-brd: rgba(255,255,255,.16);
    --glass-bar: rgba(20,19,24,.6); --glass-blur: blur(16px) saturate(1.6);
    --glass-shadow: 0 20px 44px -18px rgba(0,0,0,.75), 0 4px 14px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d10; --card: #26242b; --soft: #2f2d35;
  --ink: #f4f3f0; --ink-soft: #a9a79e; --line: #35343c;
  --accent: #e07a54; --btn-bg: #f2f1ee; --btn-fg: #17161a;
  --panel-bg: #050507; --panel-fg: #f2f1ee;
  --glow: 232, 230, 224; --shadow: 0 22px 54px -28px rgba(0,0,0,.75);
  --panel-fg-soft: rgba(242,241,238,.74); --panel-fg-faint: rgba(242,241,238,.55); --accent-fade: rgba(224,122,84,.26);
  --glass: rgba(58,56,66,.62); --glass-brd: rgba(255,255,255,.16);
  --glass-bar: rgba(20,19,24,.6); --glass-blur: blur(16px) saturate(1.6);
  --glass-shadow: 0 20px 44px -18px rgba(0,0,0,.75), 0 4px 14px -8px rgba(0,0,0,.5);
}
/* Sepia reading theme (warm paper) */
:root[data-theme="sepia"] {
  --bg: #efe3cc; --card: #e7d9bd; --soft: #f6ecd8;
  --ink: #40372a; --ink-soft: #7a6b52; --line: #ddccaa;
  --accent: #b0602b; --btn-bg: #40372a; --btn-fg: #f2ead8;
  --panel-bg: #efe3cc; --panel-fg: #40372a;
  --glow: 120, 100, 70; --shadow: 0 20px 50px -28px rgba(80,60,30,.45);
  --panel-fg-soft: rgba(64,55,42,.78); --panel-fg-faint: rgba(64,55,42,.6); --accent-fade: rgba(176,96,43,.26);
  --glass: rgba(250,242,226,.72); --glass-brd: rgba(255,255,255,.8);
  --glass-bar: rgba(245,236,218,.7); --glass-blur: blur(16px) saturate(1.6);
  --glass-shadow: 0 20px 44px -18px rgba(80,60,30,.4), 0 4px 14px -8px rgba(80,60,30,.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Kill iOS double-tap-to-zoom on controls (kept pinch-zoom); also removes the 300ms tap delay */
button, a, summary, label, input[type="range"], .tab, .set-row, .bc-card, .pc-play, .rb-arrow { touch-action: manipulation; }
/* html needs the same background or a white frame flashes behind slide transitions (esp. desktop) */
html { background: var(--bg); }
:root { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="sepia"] { color-scheme: light; }
body {
  background: transparent; color: var(--ink);   /* transparent so #app-bg (the gradient) shows through */
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: color .35s ease;
}
/* Ambient gradient backdrop for the WHOLE app (not just home): a real fixed element
   sitting behind every screen, so the glow persists page-to-page and the frosted-glass
   panels always have something colourful to blur. A real element (not a ::before pseudo)
   is used because iOS/Telegram standalone sometimes drops a negative-z pseudo layer. */
#app-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(130% 520px at 12% -2%, rgba(124, 92, 246, 0.34), rgba(124, 92, 246, 0) 58%),
    radial-gradient(120% 460px at 92% 2%, rgba(38, 120, 200, 0.26), rgba(38, 120, 200, 0) 55%),
    radial-gradient(120% 420px at 50% 100%, rgba(198, 90, 55, 0.18), rgba(198, 90, 55, 0) 60%);
  background-repeat: no-repeat;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 22px; }

h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---- Buttons ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  padding: 12px 20px; cursor: pointer; border: 1px solid transparent;
  background: var(--card); color: var(--ink); border-radius: 12px;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn.pill { border-radius: 999px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.dark { background: var(--btn-bg); color: var(--btn-fg); }
.btn.dark:hover { box-shadow: var(--shadow); }
.btn.light { background: var(--soft); color: var(--ink); border-color: var(--line); }
.btn.ghost { background: transparent; border-color: var(--ink); }
/* Static "already read" chip: not a button — confirms the finished state, no un-marking. */
.btn.is-read { cursor: default; color: var(--accent); border-color: var(--accent); opacity: .9; }
.btn.is-read:hover, .btn.is-read:active { transform: none; }
.btn.block { width: 100%; }
.btn-lg { padding: 15px 26px; font-size: 15px; }
.icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: var(--card); }
.icon-btn svg { width: 20px; height: 20px; }

/* click-light */
.spark {
  position: absolute; z-index: -1; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow),.85), rgba(var(--glow),0) 70%);
  filter: blur(6px); transform: translate(-50%, -50%) scale(1);
  animation: spark .6s ease-out forwards;
}
@keyframes spark {
  from { opacity: .85; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0;   transform: translate(-50%,-50%) scale(16); }
}
@media (prefers-reduced-motion: reduce){ .spark { animation-duration: .01ms; } }

/* ---- Header ---- */
header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
/* Transparent at the very top so the ambient gradient shows through; solid once scrolled. */
header.scrolled { background: var(--glass-bar); border-bottom-color: var(--glass-brd); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
/* Inside Telegram (full-screen): the header spans the whole top strip (incl. the
   safe area under Telegram's controls) with a translucent blur behind it, so content
   scrolling underneath looks blurred instead of a "flying" black panel. Blur is only
   applied in Telegram (the web version stays solid to avoid scroll lag). */
html.in-telegram header {
  top: 0;
  padding-top: var(--tg-content-safe-area-inset-top, var(--tg-safe-area-inset-top, 0px));
  background: transparent;
}
html.in-telegram header.scrolled { background: var(--glass-bar); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
html.in-telegram .hero { padding-top: 4px; }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-block: 8px; }
.nav-left { display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 14px; justify-self: end; min-width: 0; }
/* Self-hosted wordmark font (preloaded in index.html) — 'optional' so it never swaps
   after paint: it's ready from the preload, so the logo shows Playfair with no reflow. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../assets/fonts/playfair-700.woff2") format("woff2");
}
.brand { justify-self: center; text-align: center; white-space: nowrap; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 46px; letter-spacing: .01em; line-height: 1; }
.nav-links { display: flex; gap: 24px; margin-left: 14px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--ink); }
.nav-spacer { flex: 1; }
@media (max-width: 780px){ .nav-links { display: none; } }
/* On very small phones shrink the wordmark a touch so it stays centered without
   crowding the side controls. */
@media (max-width: 360px){ .brand { font-size: 38px; } }

/* ---- Hero ---- */
.hero { padding-block: 10px 16px; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: var(--soft); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px;
}
.badge svg { width: 16px; height: 16px; color: var(--accent); }
.hero h1 { font-size: clamp(40px, 8vw, 84px); margin-top: 4px; }
.hero h1 .hl { color: var(--ink); }
.lead { margin-top: 14px; font-size: 16px; color: var(--ink-soft); max-width: 46ch; font-weight: 500; }
.lead.sm { font-size: 15px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 16px; }
.tag { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card); padding: 9px 16px; border-radius: 999px; }
.tag-btn { font-family: var(--sans); color: var(--ink); border: none; cursor: pointer; line-height: normal; -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden; isolation: isolate; }
.tag-btn:active { transform: scale(.97); }
.tag-col { display: inline-flex; flex-direction: column; gap: 8px; vertical-align: top; }

/* ---- Section rhythm ---- */
section { padding-block: 20px; }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.row-head h2 { font-size: clamp(28px, 4.4vw, 46px); }
.counter { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

/* ---- Rotating book quote (home): tap opens that book ---- */
.quote-band { padding-block: 6px 20px; }
.quote-card {
  position: relative; display: block; width: 100%; text-align: center;
  /* Frosted glass frame (Iva): see-through blurred background + glass border, with a soft shadow. */
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .38), 0 2px 8px -3px rgba(0, 0, 0, .22);
  padding: 20px 22px; cursor: pointer; overflow: hidden;
  font-family: var(--sans); color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .2s ease;
}
.quote-card:active { transform: scale(.99); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .34); }
.quote-mark {
  display: block; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 30px;
  line-height: .5; color: var(--accent); opacity: .45; margin-bottom: 4px;
}
.quote-body { display: block; transition: opacity .26s ease; }
.quote-card.fading .quote-body { opacity: 0; }
.quote-text {
  display: block; font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: 18px; line-height: 1.45; color: var(--ink);
}
.quote-src {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); letter-spacing: .01em;
}

/* ---- Library cards ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px){ .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .cards { grid-template-columns: 1fr; } }
.card { background: transparent; }
.cover {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; margin-bottom: 14px; background: var(--card);
}
.c-title { font-weight: 800; font-size: 26px; color: var(--ink); letter-spacing: -.02em; }
.c-title.small { font-size: 21px; }
.c-num { font-weight: 800; font-size: 72px; color: var(--ink); opacity: .8; letter-spacing: -.04em; }
.c-mark { font-weight: 800; font-size: 76px; letter-spacing: -.04em; }
.c-label { position: absolute; left: 10px; bottom: 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; background: var(--panel-bg); color: var(--panel-fg); padding: 5px 9px; border-radius: 7px; }
.c-label.light { background: var(--soft); color: var(--ink); }
.c-badge { position: absolute; right: 10px; top: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; background: var(--soft); color: var(--ink); padding: 5px 9px; border-radius: 7px; }
.card h3 { font-size: 19px; }
.c-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-weight: 600; }
.c-cat { font-size: 13px; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
/* cover variants (greyscale + one muted accent) */
.cover.c1 { background: linear-gradient(150deg, #ffffff, #e4e3df); }
.cover.c1 .c-title { color: #2a2a2a; }
.cover.c2 { background: #cfcdc7; }
.cover.c3 { background: #1a1a1d; }
.cover.c3 .c-mark { color: #f2f1ee; }
.cover.c4 { background: linear-gradient(150deg, #f3f2ef, #d9d8d3); }
.cover.c5 { background: #dad8d2; }
.cover.c6 { background: var(--accent); }
.cover.c6 .c-mark { color: #fff; }

/* ---- Why: feature cards ---- */
.why-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.why-head h2 { font-size: clamp(28px, 4.4vw, 46px); }
.proof { display: flex; align-items: center; gap: 12px; }
.avatars { display: flex; }
.avatars span { width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 2px solid var(--bg); margin-left: -8px; }
.avatars span:first-child { margin-left: 0; }
.stars { color: var(--ink); font-size: 14px; letter-spacing: 2px; }
.proof-t { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px){ .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .features { grid-template-columns: 1fr; } }
.feature { background: var(--card); border-radius: 18px; padding: 24px; min-height: 176px; display: flex; flex-direction: column; }
.feature.dark { background: var(--panel-bg); color: var(--panel-fg); }
.feature.dark p { color: var(--panel-fg-soft); }
.f-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--soft); display: grid; place-items: center; margin-bottom: 16px; }
.feature.dark .f-ico { background: rgba(255,255,255,.12); }
.f-ico svg { width: 20px; height: 20px; color: var(--ink); }
.feature.dark .f-ico svg { color: var(--panel-fg); }
.feature h3 { font-size: 19px; }
.feature p { font-size: 14px; color: var(--ink-soft); margin-top: 10px; font-weight: 500; }

/* ---- Reviews ---- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px){ .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .reviews { grid-template-columns: 1fr; } }
.review { margin: 0; background: var(--card); border-radius: 18px; padding: 22px; }
.r-head { display: flex; align-items: center; gap: 10px; }
.r-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); flex: none; }
.r-name { font-weight: 700; font-size: 14px; }
.r-role { font-size: 12px; color: var(--ink-soft); }
.r-stars { margin-left: auto; color: var(--ink); font-size: 12px; letter-spacing: 1px; }
.review blockquote { margin: 14px 0 0; font-size: 14px; line-height: 1.6; font-weight: 500; }
.review figcaption { margin-top: 12px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }

/* ---- FAQ ---- */
.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; }
@media (max-width: 820px){ .faq-grid { grid-template-columns: 1fr; gap: 24px; } }
.faq-aside h2 { font-size: clamp(28px, 4.4vw, 44px); }
.faq-aside .lead { margin-top: 14px; margin-bottom: 20px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--card); border-radius: 14px; padding: 2px 6px; }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 16px; font-weight: 700; font-size: 15px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .chev { font-size: 22px; font-weight: 700; color: var(--ink-soft); transition: transform .2s ease; }
.faq-list details[open] .chev { transform: rotate(45deg); }
.faq-list details p { padding: 0 16px 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; font-weight: 500; }

/* newsletter */
.newsletter { margin-top: 30px; background: var(--card); border-radius: 22px; padding: 40px 30px; text-align: center; }
.nl-title { font-weight: 800; font-size: clamp(19px, 3vw, 26px); letter-spacing: -.02em; max-width: 26ch; margin: 0 auto; }
.nl-form { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.nl-form input {
  font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 13px 20px; border-radius: 999px;
  border: 1px solid transparent; background: var(--panel-bg); color: var(--panel-fg); min-width: 230px;
}
.nl-form input::placeholder { color: var(--panel-fg-faint); }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--line); margin-top: 24px; padding-block: 34px 48px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: flex-start; }
.foot-brand { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 700; letter-spacing: .01em; }
.foot-note { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.foot-links a:hover { color: var(--ink); }
.disclaimer { margin-top: 22px; font-size: 12.5px; color: var(--ink-soft); max-width: 74ch; line-height: 1.6; }

/* ---- Add-to-home-screen sheet ---- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(10,10,12,.5); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 0; transition: opacity .25s ease;
}
@media (min-width: 640px){ .sheet-backdrop { align-items: center; } }
.sheet-backdrop:not([hidden]) { opacity: 1; }
.sheet { width: 100%; max-width: 440px; background: var(--soft); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); transform: translateY(14px); transition: transform .25s ease; }
.sheet-backdrop:not([hidden]) .sheet { transform: translateY(0); }
.sheet h3 { font-size: 22px; }
.sheet .sub { font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-weight: 500; }
.sheet ol { margin: 18px 0 4px; padding: 0; list-style: none; display: grid; gap: 14px; }
.sheet li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.sheet li .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--card); color: var(--ink); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.sheet li .ios-share { flex: none; width: 20px; height: 20px; color: var(--accent); }
.sheet .close-row { margin-top: 24px; }

/* ============================================================
   Catalog: filter chips, horizontal shelves, book cards
   ============================================================ */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  font-family: var(--sans); font-weight: 700; font-size: 13px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--soft);
  color: var(--ink-soft); cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }

.shelf { margin-bottom: 6px; }
.shelf-head { margin-bottom: 7px; }
.shelf-head h3 { font-size: clamp(20px, 3.2vw, 27px); font-weight: 800; letter-spacing: -.02em; }
/* Thematic collections ("Подборки под вашу цель"): question-style heading + subtitle + "Все". */
#collections { margin-bottom: 30px; }
.coll-row-head { margin-bottom: 16px; }
.coll-shelf { margin-bottom: 26px; }
.coll-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.coll-titles { min-width: 0; }
.coll-titles h3 { font-size: clamp(18px, 3vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.coll-sub { margin-top: 3px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.coll-all { flex: none; border: none; background: none; padding: 4px 2px; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.coll-all:active { opacity: .6; }
.shelf-row {
  display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 6px; scrollbar-width: none;
  /* Full-bleed row: break out of the container's 22px side padding so books scroll all the way
     to the SCREEN edges (no empty gap / "пробел"), while the first card still lines up with the
     shelf heading thanks to the matching inner padding + scroll-padding. */
  margin-inline: -22px; padding-inline: 22px;
  scroll-padding-inline: 22px;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.shelf-row::-webkit-scrollbar { display: none; }

.bc-card {
  flex: 0 0 auto; width: 150px; scroll-snap-align: start; background: transparent; color: var(--ink);
  border: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--sans);
  position: relative; -webkit-tap-highlight-color: transparent;
  /* No overflow:hidden / isolation here: the card must NOT be its own clipped stacking context,
     or partly-scrolled cards flicker/vanish. The cover has its own rounded clip; nothing else
     overflows the card. */
}
@media (min-width: 640px){ .bc-card { width: 172px; } }
.bc-cover {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 16px; gap: 8px;
}
.bc-cover.fg-light, .bd-cover.fg-light { color: #f4f3f0; }
.bc-cover.fg-dark,  .bd-cover.fg-dark  { color: #17161a; }
.bc-cv-title { font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; }
.bc-cv-author { font-size: 11px; opacity: .82; font-weight: 600; }
.bc-cover .bc-label { position: absolute; left: 8px; bottom: 8px; font-size: 9px; font-weight: 800; letter-spacing: .1em; background: rgba(0,0,0,.32); color: #fff; padding: 4px 7px; border-radius: 6px; }
.bc-cover.fg-dark .bc-label { background: rgba(255,255,255,.55); color: #17161a; }
.bc-badge { position: absolute; right: 8px; top: 8px; font-size: 9px; font-weight: 800; letter-spacing: .06em; background: rgba(0,0,0,.42); color: #fff; padding: 4px 7px; border-radius: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bc-cover-img .bc-badge + .bc-badge { top: 30px; } /* stack a 2nd badge below the first */
/* Honest reading-progress indicator on the cover */
.bc-cover-img .bc-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.30); z-index: 2; }
.bc-cover-img .bc-prog span { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.bc-cover-img .bc-pct { position: absolute; left: 8px; bottom: 10px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .02em; background: rgba(0,0,0,.5); color: #fff; padding: 3px 6px; border-radius: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bc-badge-new { background: #2f7d5b; color: #fff; }
.bc-badge-popular { background: #b9791f; color: #fff; }
.bc-badge-free { background: #2b5fb0; color: #fff; }
/* Netflix-like ambient backdrop behind the home content: two coloured glows fading
   down into the page. Painted as the screen's own background-image so it sits BEHIND
   all content and never touches child stacking/sticky (the sticky header is a direct child). */
/* The ambient gradient now lives on body::before (whole app), so screens stay
   transparent and let that fixed backdrop show through on every page. */
.screen { background: transparent; }
.bc-title { color: var(--ink); font-size: 14px; font-weight: 700; margin-top: 7px; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; font-weight: 600; }
.bc-card:active { transform: scale(.98); }

/* ============================================================
   Book detail page (opens on tapping a book)
   ============================================================ */
.book-detail {
  position: fixed; inset: 0; z-index: 120; color: var(--ink);
  display: flex; flex-direction: column; transform: translateX(100%); overscroll-behavior: contain;
  /* Same ambient gradient as #app-bg so the backdrop persists on the book page too
     (a solid var(--bg) here used to hide the gradient). Applied directly because the
     overlay is opaque-covering: a transparent bg would show the home screen behind it. */
  background-color: var(--bg);
  background-image:
    radial-gradient(130% 520px at 12% -2%, rgba(124, 92, 246, 0.34), rgba(124, 92, 246, 0) 58%),
    radial-gradient(120% 460px at 92% 2%, rgba(38, 120, 200, 0.26), rgba(38, 120, 200, 0) 55%),
    radial-gradient(120% 420px at 50% 100%, rgba(198, 90, 55, 0.18), rgba(198, 90, 55, 0) 60%);
  background-repeat: no-repeat;
}
/* Reader mode: keep a clean solid background so the page text stays crisp. */
.book-detail.reading { background-image: none; }
/* Stacking so a book opened FROM the list page (or a reader opened from a book) sits ON TOP */
#listPage { z-index: 120; }
#bookDetail { z-index: 122; }
#readerPage { z-index: 124; }
.bd-bar {
  /* Not sticky: the bar is a flex item above the scrollable .bd-scroll, so it's already pinned at
     the top. position:sticky was redundant AND on iOS it "detached" from the sliding page, leaving
     the Назад button visibly lingering for a moment after the page had slid away. */
  flex: 0 0 auto; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html.in-telegram .bd-bar { padding-top: calc(12px + var(--tg-content-safe-area-inset-top, 0px)); }
/* Book page top bar: like the home header — transparent over the gradient at the very top,
   turns into frosted glass once you scroll (content slides UNDER it and is blurred).
   Overlaid via position:absolute (NOT sticky) — an absolute child of the transformed
   .book-detail moves WITH the slide animation, so the Назад button never lingers after
   the page slides away (the old sticky version did). Scoped to #bookDetail only so the
   reader/player and list/help/info pages keep their solid bars. */
#bookDetail .bd-bar, #listPage .bd-bar, #helpPage .bd-bar, #infoPage .bd-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  background: transparent; border-bottom-color: transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
#bookDetail .bd-bar.scrolled, #listPage .bd-bar.scrolled, #helpPage .bd-bar.scrolled, #infoPage .bd-bar.scrolled {
  background: var(--glass-bar); border-bottom-color: var(--glass-brd);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
/* Audio player: transparent bar so the ambient gradient shows from the very top,
   like the home header (Iva's request). Kept as a normal flex item — the player
   content is centered BELOW it and never scrolls under it, so no glass/blur is
   needed. Scoped to #playerPage so the reader keeps its solid, crisp bar. */
#playerPage .bd-bar { background: transparent; border-bottom-color: transparent; }
/* Push the content below the overlaid bar so nothing hides behind it at the top. */
#bdScroll, #listPage .bd-scroll, #helpPage .bd-scroll, #infoPage .bd-scroll { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
html.in-telegram #bdScroll, html.in-telegram #listPage .bd-scroll, html.in-telegram #helpPage .bd-scroll, html.in-telegram #infoPage .bd-scroll { padding-top: calc(64px + var(--tg-content-safe-area-inset-top, 0px)); }
/* Extra room at the very bottom of the book page so the revealed nav bar doesn't cover the last cards. */
#bdScroll { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* Bottom nav is normally BEHIND the full-screen book overlay (z 122); when the book is scrolled to the
   very end we lift it ABOVE so it appears in the space reserved above. */
#tabbar.show-over { z-index: 130; }
.bd-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 700; font-size: 15px; background: none; border: none; border-radius: 12px; color: var(--ink); cursor: pointer; padding: 6px 10px; margin-left: -6px; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none; transition: background .15s ease; }
/* Press feedback = frosted glass (not the default dark iOS tap box). */
.bd-back:active { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.bd-back:focus, .bd-back:focus-visible { outline: none; }
.bd-back svg { width: 20px; height: 20px; }
.bd-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 24px 22px calc(40px + env(safe-area-inset-bottom, 0px)); max-width: 720px; margin: 0 auto; width: 100%; }
.bd-hero { display: flex; gap: 22px; align-items: flex-start; }
@media (max-width: 520px){ .bd-hero { flex-direction: column; align-items: stretch; } }
.bd-cover { flex: 0 0 auto; width: 152px; aspect-ratio: 3 / 4; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 18px; gap: 8px; }
@media (max-width: 520px){ .bd-cover { align-self: center; } }
.bd-info { flex: 1; }
.bd-info h2 { font-size: clamp(24px, 5vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.bd-author { font-size: 14px; color: var(--ink-soft); margin-top: 4px; font-weight: 600; }
.bd-metaline { font-size: 13px; color: var(--ink-soft); margin-top: 10px; font-weight: 600; }
.bd-summary { font-size: 15px; margin-top: 12px; line-height: 1.6; font-weight: 500; }
.bd-summary-wrap { margin-top: 0; }
/* Collapsed text = a short teaser (a few lines); "ещё" reveals the rest. Used for the short
   description (3 lines) AND the longer "О чём эта книга" intro block (5 lines). */
/* Keep display:-webkit-box ALWAYS (both clamped and expanded) and only change the line count.
   Toggling the display type (box ↔ block) made iOS repaint a brief black flash around the
   "ещё/свернуть" button near the frosted-glass layers; changing only -webkit-line-clamp avoids it. */
.js-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 999; }
.js-clamp.clamp { -webkit-line-clamp: 5; }
.bd-summary.js-clamp.clamp { -webkit-line-clamp: 3; }
.bd-authorbio.js-clamp.clamp { -webkit-line-clamp: 2; }
.bd-more { margin: 6px 0 0 -10px; padding: 4px 10px; background: none; border: none; border-radius: 999px; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; outline: none; transition: background .15s ease; }
.bd-more:hover { text-decoration: underline; }
/* Press feedback = frosted glass (not the default dark iOS tap box). */
.bd-more:active { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); outline: none; }
.bd-more:focus, .bd-more:focus-visible { background: none; outline: none; }
.bd-cta { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bd-ideas { margin-top: 34px; }
.bd-ideas h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.bd-idea { background: var(--card); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.bd-idx { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
.bd-it { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; }
.bd-id { font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.55; font-weight: 500; }

/* ---- Language picker ---- */
.lang-list { display: grid; gap: 8px; margin: 8px 0 4px; }
.lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid transparent; border-radius: 14px; padding: 15px 18px; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.lang-opt:active { transform: scale(.99); }
.lang-opt.on { border-color: var(--accent); }
.lang-opt .lang-check { color: var(--accent); font-weight: 800; opacity: 0; }
.lang-opt.on .lang-check { opacity: 1; }

/* ---- Pull-to-refresh ---- */
#ptr-ind { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 130; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; transform: translate(-50%,-52px); pointer-events: none; }
html.in-telegram #ptr-ind { top: calc(10px + var(--tg-content-safe-area-inset-top, 0px)); }
#ptr-ind svg { width: 18px; height: 18px; }
#ptr-ind.spin svg { animation: ptrspin .9s linear infinite; transform-origin: 50% 50%; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
#ptr-toast { position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(10px); z-index: 131; background: var(--panel-bg); color: var(--panel-fg); padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 8px 24px -6px rgba(0,0,0,.4); }
#ptr-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Reader: book-style horizontal pages ---- */
.book-detail.reading .bd-scroll { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-width: 720px; }
.rb-viewport { flex: 1; overflow: hidden; position: relative; padding: 18px 22px 6px; }
/* Base reader font-size is scalable via --rb-scale; child sizes are in em so they follow it. */
.rb-pages { column-fill: auto; column-gap: 0; will-change: transform; font-size: calc(16px * var(--rb-scale, 1)); --rb-lh: 1.5; }
.rb-title { font-size: 1.44em; font-weight: 800; letter-spacing: -.02em; margin: 0 0 2px; }
.rb-author { font-size: 0.8em; color: var(--ink-soft); font-weight: 600; margin: 0 0 16px; }
.rb-h { font-size: 1.19em; font-weight: 800; letter-spacing: -.01em; margin: 16px 0 10px; break-after: avoid; }
.rb-p { font-size: 1em; line-height: var(--rb-lh, 1.5); margin: 0 0 14px; color: var(--ink); font-weight: 500; }
.rb-ex { font-size: 0.94em; line-height: 1.65; font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--accent); padding-left: 14px; margin: 0 0 14px; }
.rb-tk { font-size: 1em; line-height: 1.62; margin: 0 0 18px; font-weight: 600; color: var(--ink); }
.rb-vh { color: var(--accent); font-weight: 800; }
.rb-term { font-size: 0.94em; line-height: 1.6; margin: 0 0 12px; color: var(--ink-soft); font-weight: 500; }
.rb-term b { color: var(--ink); font-weight: 800; }
.rb-term .term-back { display: inline-flex; vertical-align: middle; width: 28px; height: 28px; margin-left: 4px; }
.rb-term .term-back svg { width: 14px; height: 14px; }
/* Closing "thank you" note at the end of every book. */
.rb-thanks { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.rb-thanks-mark { color: var(--accent); font-size: 22px; line-height: 1; margin-bottom: 10px; }
.rb-thanks-h { font-size: 1.15em; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); }
.rb-thanks p { font-size: 0.98em; line-height: 1.66; margin: 0 0 12px; color: var(--ink-soft); }
.rb-thanks-sign { margin-top: 8px; font-size: 0.95em; font-weight: 700; font-style: italic; color: var(--accent); }
.rb-nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.rb-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-arrow:active { transform: scale(.94); }
.rb-arrow:disabled { opacity: .32; cursor: default; }
.rb-count { font-size: 13px; font-weight: 700; color: var(--ink-soft); min-width: 64px; text-align: center; }

/* Reading settings (Aa) */
.bd-bar-reader { display: flex; align-items: center; justify-content: space-between; }
/* Book page bar: back on the left, share on the right. */
.bd-bar-book { display: flex; align-items: center; justify-content: space-between; }
.bd-share {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--glass-brd); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.bd-share:active { transform: scale(.92); }
.bd-share svg { width: 19px; height: 19px; }
/* In Telegram the top-right corner is taken by Telegram's own ⌄ / ⋯ controls,
   so move the reader actions (bookmark + Aa) to the LEFT, next to “Back”. */
html.in-telegram .bd-bar-reader { justify-content: flex-start; gap: 12px; }
.rb-aa { flex: none; min-width: 44px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-aa:active { transform: scale(.96); }
.rb-panel { position: absolute; left: 12px; right: 12px; z-index: 135; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 8px 16px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.5); }
html.in-telegram .rb-panel { top: calc(58px + var(--tg-content-safe-area-inset-top, 0px)); }
.rb-panel { top: calc(56px + env(safe-area-inset-top, 0px)); max-width: 460px; margin: 0 auto; }
.rb-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.rb-panel-row + .rb-panel-row { border-top: 1px solid var(--line); }
.rb-panel-row > span { font-weight: 700; font-size: 14px; color: var(--ink); }
.rb-size, .rb-seg { display: flex; gap: 8px; }
.rb-size button { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-size button:first-child { font-size: 13px; }
.rb-size button:last-child { font-size: 18px; }
.rb-seg button { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-family: var(--sans); font-weight: 700; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-seg button.on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
/* Interval row: label above, 3 equal-width buttons below (fits phone width) */
.rb-row-col { flex-direction: column; align-items: stretch; gap: 10px; }
.rb-seg-3 { width: 100%; }
.rb-seg-3 button { flex: 1; padding: 8px 4px; text-align: center; font-size: 12.5px; }

/* Contents / Оглавление overlay */
.rb-toc { position: absolute; inset: 0; z-index: 140; background: rgba(0,0,0,.42); display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
.rb-toc-inner { display: flex; flex-direction: column; width: 100%; max-width: 520px; margin: 0 auto; max-height: 100%; background-color: var(--bg); background-image: radial-gradient(130% 520px at 12% -2%, rgba(124, 92, 246, 0.34), rgba(124, 92, 246, 0) 58%), radial-gradient(120% 460px at 92% 2%, rgba(38, 120, 200, 0.26), rgba(38, 120, 200, 0) 55%), radial-gradient(120% 420px at 50% 100%, rgba(198, 90, 55, 0.18), rgba(198, 90, 55, 0) 60%); background-repeat: no-repeat; border: 1px solid var(--line); border-radius: 0 0 20px 20px; box-shadow: 0 18px 44px -12px rgba(0,0,0,.55); padding-top: calc(10px + env(safe-area-inset-top, 0px)); overflow: hidden; }
html.in-telegram .rb-toc-inner { padding-top: calc(10px + var(--tg-content-safe-area-inset-top, 0px)); }
.rb-toc-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 10px; }
.rb-toc-title { font-family: var(--sans); font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: .01em; }
.rb-toc-x { width: 34px; height: 34px; border: none; background: transparent; color: var(--ink-soft); font-size: 18px; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.rb-toc-tabs { display: flex; gap: 8px; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.rb-toc-tab { flex: 1; padding: 9px 8px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-family: var(--sans); font-weight: 700; font-size: 13.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-toc-tab.on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.rb-toc-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
.rb-toc-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 12px; padding: 12px 12px; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.rb-toc-item + .rb-toc-item { border-top: 1px solid var(--line); }
.rb-toc-item:active { background: var(--card); }
.rb-toc-num { flex: 0 0 26px; min-width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font-family: var(--sans); font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.rb-toc-txt { font-family: var(--sans); font-size: 14.5px; line-height: 1.4; font-weight: 600; padding-top: 2px; }
.rb-toc-ins { font-weight: 500; color: var(--ink-soft); }
.rb-toc-item.on { background: var(--accent-fade); }
.rb-toc-item.on .rb-toc-num { background: var(--accent); border-color: transparent; color: #fff; }
.rb-toc-item.on .rb-toc-txt { color: var(--ink); font-weight: 800; }
.rb-toc-empty { padding: 30px 16px; text-align: center; color: var(--ink-soft); font-family: var(--sans); font-size: 14px; }

/* Immersive reading: gentle center tap hides the top bar + bottom nav */
#readerPage .bd-bar-reader, #readerPage .rb-nav { transition: opacity .25s ease, transform .25s ease; }
#readerPage.chrome-off .bd-bar-reader { opacity: 0; transform: translateY(-100%); pointer-events: none; }
#readerPage.chrome-off .rb-nav { opacity: 0; transform: translateY(120%); pointer-events: none; }

/* Continue reading (3.3) */
#continuePanel { margin-bottom: 14px; }
.cont-card { display: flex; align-items: center; gap: 14px; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 20px; padding: 16px 16px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.cont-cover { flex: 0 0 44px; width: 44px; }
.cont-img { width: 100%; border-radius: 8px; display: block; }
.cont-info { flex: 1; min-width: 0; }
.cont-label { font-size: 11px; font-weight: 800; color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; }
.cont-title { font-weight: 800; font-size: 15px; margin: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.cont-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.cont-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-weight: 600; }
.cont-btn { flex: 0 0 auto; }
#rbBright { flex: 1; max-width: 180px; accent-color: var(--accent); }

/* Screen brightness dim overlay (web can't touch hardware brightness, so we dim on top) */
#appDim { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 500; display: none; }

/* Reader bar actions (bookmark + Aa) */
.rb-bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.rb-ico { min-width: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
.rb-ico svg { width: 18px; height: 18px; }
.rb-aa.on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.rb-aa.on svg { fill: currentColor; }

/* Selection → 5-colour underline toolbar (2.3) */
.rb-selbar { position: fixed; z-index: 140; display: inline-flex; align-items: center; gap: 3px; background: var(--panel-bg); color: var(--panel-fg); border-radius: 999px; padding: 5px 7px; box-shadow: 0 10px 28px -8px rgba(0,0,0,.55); transform: translate(-50%, -118%); }
.rb-selbar .rb-hlc { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.28); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rb-hlc-yellow { background: #f2c94c; } .rb-hlc-green { background: #27ae60; } .rb-hlc-blue { background: #2f80ed; } .rb-hlc-pink { background: #eb5fa6; } .rb-hlc-orange { background: #e07a37; }
.rb-selbar .rb-hlc-rm { background: transparent; color: var(--panel-fg); border-color: rgba(255,255,255,.32); font-size: 13px; display: flex; align-items: center; justify-content: center; }
/* Highlighted (underlined) words — 5 colours */
mark.rb-hl { background: none; color: inherit; border-radius: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; border-bottom: 2px solid var(--accent); }
mark.rb-hl-yellow { border-bottom-color: #e0b02f; background: rgba(242,201,76,.18); }
mark.rb-hl-green  { border-bottom-color: #27ae60; background: rgba(39,174,96,.15); }
mark.rb-hl-blue   { border-bottom-color: #2f80ed; background: rgba(47,128,237,.15); }
mark.rb-hl-pink   { border-bottom-color: #eb5fa6; background: rgba(235,95,166,.15); }
mark.rb-hl-orange { border-bottom-color: #e07a37; background: rgba(224,122,55,.16); }
/* Notes list (Мои полки → Заметки) */
.note-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.note-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; }
.note-dot-yellow { background: #f2c94c; } .note-dot-green { background: #27ae60; } .note-dot-blue { background: #2f80ed; } .note-dot-pink { background: #eb5fa6; } .note-dot-orange { background: #e07a37; }
.note-main { flex: 1; min-width: 0; }
.note-text { display: block; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.45; }
.note-book { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 4px; font-weight: 600; }

/* Bookmarks list */
.bm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: var(--card); border: none; border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; text-align: left; font-family: var(--sans); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bm-row:active { transform: scale(.99); }
.bm-row .bm-main { min-width: 0; }
.bm-row .bm-t { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row .bm-p { color: var(--ink-soft); font-weight: 600; font-size: 13px; margin-top: 2px; }
.bm-row .bm-del { flex: none; color: var(--ink-soft); font-size: 20px; background: none; border: none; padding: 4px 6px; cursor: pointer; }

/* ---- Audio player ---- */
.bc-audio { background: var(--card); border-radius: 16px; padding: 14px 16px; margin-top: 18px; }
.ba-row { display: flex; align-items: center; gap: 12px; }
.ba-play { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ba-play:active { transform: scale(.95); }
.ba-play svg { width: 20px; height: 20px; }
.ba-seek { flex: 1; min-width: 0; accent-color: var(--accent); height: 4px; }
.ba-time { font-size: 12px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 34px; }
.ba-time[data-dur] { text-align: right; }
.ba-speed { display: flex; align-items: center; gap: 10px; margin-top: 13px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.ba-rate { flex: 1; accent-color: var(--accent); height: 4px; }
.ba-rateval { color: var(--ink); min-width: 46px; text-align: right; }

/* ---- Full-screen audio player page ---- */
#playerPage { z-index: 123; }
.player-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; width: 100%; max-width: 460px; margin: 0 auto; padding: 16px 28px calc(34px + env(safe-area-inset-bottom, 0px)); }
.player-cover { width: min(62vw, 240px); flex: none; }
.pc-frame { position: relative; display: block; width: 100%; padding-top: 133.333%; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 24px 60px -16px rgba(0,0,0,.6); }
.pc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.player-meta { text-align: center; }
.player-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.player-author { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-top: 4px; }
.player-seekwrap { width: 100%; }
.player-seekwrap .ba-seek { width: 100%; }
.player-times { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 6px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 26px; }
.pc-play { width: 74px; height: 74px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc-play:active { transform: scale(.95); }
.pc-play svg { width: 32px; height: 32px; }
.pc-skip { width: 52px; height: 52px; border-radius: 50%; background: none; border: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc-skip:active { transform: scale(.92); }
.pc-skip svg { width: 30px; height: 30px; }
.player-speed { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.player-speed .ba-rate { flex: 1; }
.player-speed b { color: var(--ink); min-width: 46px; text-align: right; }

/* ---- Glossary term links + jump-back ---- */
.term-link { color: var(--ink); font-weight: 700; border-bottom: 1.5px dotted var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bd-termhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.term-back { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.term-back:active { transform: scale(.94); }
.term-back svg { width: 16px; height: 16px; }
.bc-flash { animation: bcFlash 1.3s ease; border-radius: 6px; }
@keyframes bcFlash { 0%, 100% { background: transparent; } 25% { background: var(--accent-fade); } }
#bcterm-0.bc-flash, .bd-idea.bc-flash { animation: bcFlashCard 1.3s ease; }
@keyframes bcFlashCard { 0%, 100% { background: var(--card); } 25% { background: var(--accent-fade); } }

/* ---- Real cover images + book page extras ---- */
/* padding-based 3:4 ratio — works even where CSS aspect-ratio isn't supported (old iOS WebView) */
/* aspect-ratio + a NORMAL-FLOW image (no absolute positioning). An absolutely-positioned image
   inside this rounded, overflow:hidden box was being clipped away by iOS while the row scrolled —
   that was the real cause of the vanishing covers. A plain block image repaints reliably. */
.bc-cover-img { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 10px -4px rgba(0,0,0,.18); }
.bc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-cover-img { flex: 0 0 auto; width: 152px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--card); }
.bd-img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px){ .bd-cover-img { align-self: center; } }
.bd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bd-tag { font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--card); padding: 6px 12px; border-radius: 999px; }
.bd-forwhom { font-size: 14px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; }
.bd-example { font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--line); font-style: italic; line-height: 1.55; }
.bd-takeaway { font-size: 14px; font-weight: 700; margin-top: 12px; line-height: 1.5; }
.bd-takeaway::before { content: "Вывод — "; color: var(--accent); }

/* ---- Reviews section (under the book) ---- */
.bd-reviews { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 8px; }
.bd-rev-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 2px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--ink);
}
.bd-rev-count { color: var(--ink-soft); font-weight: 700; font-size: 15px; }
.bd-rev-chev { width: 22px; height: 22px; color: var(--ink-soft); transition: transform .2s ease; flex: none; }
.bd-reviews.open .bd-rev-chev { transform: rotate(180deg); }
.bd-rev-body { padding-top: 6px; }
.bd-rev-loading, .bd-rev-empty, .bd-rev-hint { color: var(--ink-soft); font-size: 14px; padding: 8px 2px; line-height: 1.5; }
.bd-rev-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.bd-rev-item { background: var(--card); border-radius: 16px; padding: 16px; }
.bd-rev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bd-rev-head b { font-size: 15px; font-weight: 800; }
.bd-rev-stars { color: #e0a53b; font-size: 14px; letter-spacing: 1px; }
.bd-rev-date { color: var(--ink-soft); font-size: 12px; margin-left: auto; }
.bd-rev-text { font-size: 14.5px; line-height: 1.55; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
/* write form */
.bd-rev-form { display: flex; flex-direction: column; gap: 10px; background: var(--soft); border-radius: 16px; padding: 16px; }
.bd-rev-pick { display: flex; gap: 4px; }
.bd-star { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: #e0a53b; padding: 2px; -webkit-tap-highlight-color: transparent; }
.bd-star.on { color: #e0a53b; }
.bd-rev-name, .bd-rev-textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none;
}
.bd-rev-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.bd-rev-name::placeholder, .bd-rev-textarea::placeholder { color: var(--ink-soft); }
.bd-rev-submit { align-self: flex-start; }

/* ============================================================
   App screens + bottom tab bar
   ============================================================ */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* When the mini audio player is showing, reserve extra room so it never hides the last content —
   on the main screens (body) AND on the overlay pages that scroll (book page, categories, etc.). */
body.mini-on { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
body.mini-on #listPage .bd-scroll,
body.mini-on #helpPage .bd-scroll,
body.mini-on #infoPage .bd-scroll { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
body.mini-on #bdScroll { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* ---- Mini audio player (persistent, Spotify-style) — floats above EVERY page (above the overlays),
   so it shows on the book page / categories / search too; hidden only in the reader & full player. ---- */
.mini-player {
  position: fixed; left: 18px; right: 18px; z-index: 125;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px;
  background: var(--glass-bar); border: 1px solid var(--glass-brd); border-radius: 16px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.mini-cover { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; flex: none; background: var(--card); }
.mini-meta { display: flex; flex-direction: column; min-width: 0; }
.mini-title { font-weight: 800; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.mini-author { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mini-ctrls { display: flex; align-items: center; gap: 1px; flex: none; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: none; color: var(--ink); cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; transition: background .15s ease; }
.mini-btn:active { background: var(--glass); }
.mini-btn svg { width: 21px; height: 21px; }
.mini-play svg { width: 24px; height: 24px; }
.mini-close { color: var(--ink-soft); }
.screen { display: none; }
.screen.active { display: block; animation: screenIn .32s cubic-bezier(.22,.7,.28,1) both; }
/* Smooth Instagram-like page change: the incoming screen fades and rises gently. */
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.active { animation: none; } }
.screen-pad { padding-block: 28px; padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
html.in-telegram .screen-pad { padding-top: calc(22px + var(--tg-content-safe-area-inset-top, 0px)); }
.screen-title { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.screen-sub { color: var(--ink-soft); margin-top: 8px; font-weight: 500; }
.empty-note { color: var(--ink-soft); font-weight: 500; font-size: 15px; line-height: 1.6; }

/* Floating, rounded, frosted-glass tab bar (detached from the screen edges). */
.tabbar {
  position: fixed; left: 18px; right: 18px; z-index: 90; display: flex; gap: 3px;
  bottom: calc(5px + env(safe-area-inset-bottom, 0px));   /* sits lower, closer to the edge */
  padding: 4px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-radius: 20px;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 4px; background: none; border: none; cursor: pointer; color: var(--ink-soft);
  font-family: var(--sans); font-weight: 600; font-size: 10px;
  position: relative; isolation: isolate; -webkit-tap-highlight-color: transparent;
  border-radius: 15px; transition: color .28s ease;
}
/* Soft tinted highlight that fills the whole button when active (grows in smoothly). */
.tab::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 15px;
  background: var(--accent-fade); opacity: 0; transform: scale(.72);
  transition: opacity .3s ease, transform .34s cubic-bezier(.34,1.4,.5,1);
}
.tab.on::before { opacity: 1; transform: scale(1); }
.tab svg, .tab span { position: relative; z-index: 1; }
.tab svg { width: 20px; height: 20px; transition: transform .34s cubic-bezier(.34,1.4,.5,1); }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-1px) scale(1.08); }

/* ---- Search ---- */
.search-box { display: flex; align-items: center; gap: 10px; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 13px 16px; margin: 20px 0 22px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.search-box svg { width: 20px; height: 20px; color: var(--ink-soft); flex: none; }
.search-ico { border: none; background: none; padding: 0; margin: 0; display: flex; align-items: center; color: var(--ink-soft); cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.search-ico:active { transform: scale(.9); }
/* Clear (×) button on the right of the search field — appears only when there is text. */
.search-clear { border: none; background: none; padding: 0; margin: 0; display: flex; align-items: center; color: var(--ink-soft); cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.search-clear:active { transform: scale(.9); }
.search-clear[hidden] { display: none; }
.search-box input { flex: 1; border: none; background: none; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; min-width: 0; }
.search-box input::placeholder { color: var(--ink-soft); }

/* ---- Category cards (Search browse) ---- */
.section-label { font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-soft); text-transform: uppercase; margin: 6px 0 14px; }
.cat-list { display: grid; gap: 14px; }
.cat-card { background: var(--card); border: none; border-radius: 18px; padding: 20px; width: 100%; text-align: left; cursor: pointer; display: block; font-family: var(--sans); position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.cat-card:active { transform: scale(.99); }
.cat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.cat-card h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cat-count { color: var(--ink-soft); font-weight: 700; }
.cat-go { color: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cat-sub { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.cat-sub:active { transform: scale(.97); }

/* ---- Shelf "Все" link ---- */
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-more { background: none; border: none; color: var(--accent); font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; }

/* ---- Profile ---- */
.plan-card { background: var(--panel-bg); color: var(--panel-fg); border-radius: 20px; padding: 24px; margin-top: 22px; }
.plan-name { font-weight: 800; font-size: 20px; }
.plan-desc { color: var(--panel-fg-soft); margin: 8px 0 16px; font-size: 14px; line-height: 1.5; }
/* "Что входит в подписку" (5.3) */
.plan-perks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.plan-perks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.plan-perks svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); }
/* Contact form (5.4) */
.contact-form { margin-top: 22px; display: grid; gap: 10px; }
.contact-lbl { font-weight: 700; font-size: 14px; color: var(--ink); }
.contact-ta { width: 100%; resize: vertical; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.contact-form .btn { justify-self: start; }
.settings { margin-top: 22px; display: grid; gap: 8px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 14px; padding: 16px 18px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left;
  position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.set-arrow { color: var(--ink-soft); font-size: 20px; line-height: 1; }
.set-val { color: var(--ink-soft); font-weight: 700; }
.set-row .set-label { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
.set-ico { width: 22px; height: 22px; flex: none; color: var(--ink-soft); }
.set-ico svg { width: 22px; height: 22px; display: block; }
.set-group-label { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); text-transform: uppercase; margin: 26px 0 12px; }
.set-group-label:first-child { margin-top: 22px; }
.set-row.danger { color: var(--accent); }
.set-row.danger .set-ico { color: var(--accent); }
.profile-head { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.profile-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--panel-bg); color: var(--panel-fg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; flex: none; }
.profile-name { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.profile-sub { color: var(--ink-soft); font-weight: 500; font-size: 14px; margin-top: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 6px; }
.stat-box { display: block; width: 100%; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; background: var(--card); border-radius: 16px; padding: 16px 12px; text-align: center; transition: transform .12s ease, filter .12s ease; }
.stat-box:active { transform: scale(.96); filter: brightness(.94); }
.stat-num { font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.stat-cap { color: var(--ink-soft); font-weight: 600; font-size: 12px; margin-top: 3px; }

/* While a non-Russian language is still being applied by i18n.js, keep the (Russian) labels
   invisible so they don't flash and jump to the translated text. visibility (not display)
   preserves layout, so nothing reflows when the text is revealed. */
html.i18n-wait [data-i18n] { visibility: hidden; }

/* Micro-animations (7): subtle press feedback + shelf reveal, kept light */
.bc-card, .btn, .cat-card, .set-row { transition: transform .12s ease; }
.bc-card:active, .btn:active, .set-row:active, .cat-card:active { transform: scale(.975); }
/* NOTE: the shelf reveal animation was removed — on iOS it left a compositing layer that
   made cards flicker/vanish while scrolling the horizontal rows ("куски пропадают"). */
@media (prefers-reduced-motion: reduce) {
  .bc-card:active, .btn:active, .set-row:active, .cat-card:active { transform: none; }
}

/* Browse page (Текст / Аудио): search + genre rows + 2-column grid */
.browse-search { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--glass-brd); background: var(--glass); color: var(--ink); font-family: var(--sans); font-size: 15px; margin-bottom: 18px; -webkit-appearance: none; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.browse-search::placeholder { color: var(--ink-soft); }
/* Duration filter chips (≈15 / ≈25 / 30+ min) on the browse page */
.dur-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.dur-chip { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease; }
.dur-chip.on { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 14px; justify-items: stretch; }
.grid2 .bc-card { width: 100%; }