/* Читалка «Имена Аллаха» (/app/, № 2589). Облик — сайта: «Рассвет», светлая и тёмная тема; цвета, шрифты и оформление текста статьи
   берутся с сайта (tekst-sayta.css собирает app_sbor.py из staticheskoe/stil.css), здесь — только каркас приложения.
   Образец каркаса — читалка КТГ (№ 1911). Значки — Lucide (ISC), без эмодзи. */

html { --verh: env(safe-area-inset-top, 0px); --niz-bez: env(safe-area-inset-bottom, 0px); -webkit-text-size-adjust: 100%; background: var(--fon-2); }
html[data-tema="tma"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
a { color: var(--akcent-t); text-underline-offset: .18em; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-zag); color: var(--zag); font-weight: 600; margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; }
[lang="ar"] { font-family: var(--f-ar); line-height: 1.9; }
.khatam__ar[lang="ar"], [lang="ar"] .khatam__ar { font-family: var(--f-imya); }   /* № 2338: имя в звезде (карточка, главная) — куфи, как на сайте; общее [lang="ar"] его не перебивает */
p[lang="ar"], div[lang="ar"], blockquote[lang="ar"], li[lang="ar"], .ar:not(span) { direction: rtl; text-align: right; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zn { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.zn.br { stroke: none; fill: currentColor; }
.zn.br g { fill: none; }

/* ——— каркас: колонка ——— */
.app { position: relative; height: 100%; height: 100dvh; width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; background: var(--fon); overflow: hidden; isolation: isolate; }
.ekran { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: auto; font: 400 16px/1.5 var(--f-ui); color: var(--tekst); }
.ekran::-webkit-scrollbar { display: none; }
.ekran:focus { outline: none; }
.ekran, .ekran *, .shtorka .snoska-sh, .shtorka .snoska-sh * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.ekran button, .ekran button *, .ekran [role="button"] { -webkit-user-select: none; user-select: none; }
#niz:empty { display: none; }
#niz { flex: none; background: var(--fon); }
@media (min-width: 640px) {
  html { background: var(--fon-3); }
  .app { height: calc(100dvh - 48px); margin-top: 24px; border-radius: 26px; box-shadow: 0 0 0 1px var(--cherta), 0 24px 60px -30px var(--ten); }
}

/* кнопки */
.krug { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--fon-2); color: var(--zag); flex: none; text-decoration: none; }
.krug .zn { width: 22px; height: 22px; }
.krug.steklo { background: rgb(13 22 32 / .45); color: #ece5d4; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.krug.prozr { background: none; }
.krug[aria-pressed="true"] .zn { fill: currentColor; }
.knopki { display: flex; align-items: center; gap: 4px; }
.nazad { min-height: 44px; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 0 12px 0 2px; font: 500 16px/1 var(--f-ui); color: var(--akcent-t); }
.nazad .zn { width: 24px; height: 24px; }
.pilyulya { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 24px; border: 0; background: var(--knopka); color: var(--knopka-tekst); font: 600 15px/1.1 var(--f-ui); text-decoration: none; text-align: center; }
.pilyulya.tihaya { background: var(--fon-2); color: var(--zag); box-shadow: inset 0 0 0 1.5px var(--cherta); font-weight: 500; }
.pilyulya .zn { width: 20px; height: 20px; }
.pilyulya[aria-disabled="true"] { opacity: .55; }

/* ——— нижние вкладки ——— */
.vkladki { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(8px + var(--niz-bez)); background: var(--fon-2); border-top: 1px solid var(--cherta); }
.vkladki[hidden] { display: none; }
.vkladki a { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--tekst-2); font: 500 12px/1 var(--f-ui); text-decoration: none; position: relative; }
.vkladki .ik { display: grid; place-items: center; width: 56px; max-width: 100%; height: 30px; border-radius: 15px; }
.vkladki a { min-width: 0; white-space: nowrap; letter-spacing: -.01em; }   /* № 2606: пять вкладок */
@media (max-width: 380px) { .vkladki a { font-size: 11px; letter-spacing: -.02em; } }
.vkladki a[aria-current="page"] { color: var(--zag); font-weight: 600; }
.vkladki a[aria-current="page"] .ik { background: color-mix(in srgb, var(--akcent) 22%, transparent); color: var(--akcent-t); }
.vkladki a[aria-current="page"] .zn { stroke-width: 2.2; }

/* ——— верх экрана ——— */
.verh { padding: calc(14px + var(--verh)) 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.verh h1 { font: 600 28px/1.1 var(--f-zag); }
.verh-nazad { display: flex; align-items: center; justify-content: space-between; padding: calc(6px + var(--verh)) 10px 0 8px; }
.poyasnenie { margin: 2px 20px 10px; font: 400 15px/1.5 var(--f-ui); color: var(--tekst-2); }
.blok-z { margin: 26px 20px 8px; font: 600 23px/1.2 var(--f-zag); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.blok-z small { font: 400 14px/1 var(--f-ui); color: var(--tekst-2); }
.pusto { margin: 40px 24px; }
.pusto .zn { width: 40px; height: 40px; color: var(--akcent-t); stroke-width: 1.5; }
.pusto h2 { margin: 14px 0 6px; font: 600 24px/1.2 var(--f-zag); }
.pusto p { margin: 0 0 18px; font: 400 16px/1.55 var(--f-ui); color: var(--tekst-2); }

/* ——— «Читать» ——— */
.gl-verh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + var(--verh)) 8px 6px 16px; }
.gl-marka { display: flex; align-items: center; gap: 10px; font: 600 22px/1 var(--f-zag); color: var(--zag); min-width: 0; }
.gl-marka .khatam { width: 38px; height: 38px; --khatam-l: 1.1px; flex: none; }
.gl-geroy { position: relative; margin: 6px 12px 0; padding: 26px 20px 22px; border-radius: 24px; overflow: hidden; isolation: isolate; text-align: center; color: #ece5d4; background: #0d1620; }
.gl-geroy > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.gl-geroy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 22 32 / .25) 0, rgb(13 22 32 / .78) 100%); }
.gl-geroy .khatam { width: 104px; height: 104px; margin: 0 auto 12px; --zoloto: #cfa95f; --zoloto-ar: #d9b468; --khatam-l: 1.3px; filter: drop-shadow(0 0 14px rgb(207 169 95 / .3)); }
.gl-geroy h1 { font: 600 30px/1.14 var(--f-zag); color: #ece5d4; text-shadow: 0 1px 14px rgb(5 10 18 / .7); }
.gl-geroy p { margin: 10px auto 0; max-width: 32ch; font: 400 15px/1.5 var(--f-ui); color: #dcd6c8; }
.gl-knopki { display: grid; gap: 10px; margin-top: 20px; }
.gl-knopki .pilyulya { background: #cfa95f; color: #0d1620; }
.gl-knopki .pilyulya.tihaya { background: rgb(13 22 32 / .35); color: #ece5d4; box-shadow: inset 0 0 0 1.5px rgb(236 229 212 / .55); }
.prod { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; margin: 14px 12px 0; padding: 14px 16px; border-radius: 18px; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); }
.prod small { grid-column: 1; font: 500 13px/1.3 var(--f-ui); color: var(--tekst-2); }
.prod b { grid-column: 1; font: 600 17px/1.25 var(--f-zag); color: var(--zag); }
.prod .pilyulya { grid-column: 2; grid-row: 1 / 3; min-height: 44px; padding: 0 18px; }
.prod .polosa { grid-column: 1 / -1; margin-top: 6px; height: 4px; border-radius: 2px; background: var(--fon-3); overflow: hidden; }
.prod .polosa i { display: block; height: 100%; background: var(--akcent); }
.razdely { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 8px; }
.razdely a, .razdely .skoro { display: grid; grid-template-columns: 42px 1fr 20px; gap: 14px; align-items: center; min-height: 72px; padding: 12px 14px; border-radius: 18px; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); text-decoration: none; color: inherit; }
.razdely .skoro { opacity: .62; grid-template-columns: 42px 1fr; }
.rz-n { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--f-zag); color: var(--zoloto); box-shadow: inset 0 0 0 1.5px var(--akcent); }
.rz-t b { display: block; font: 600 16px/1.25 var(--f-ui); color: var(--zag); }
.rz-t small { display: block; margin-top: 2px; font: 400 13px/1.4 var(--f-ui); color: var(--tekst-2); }
.razdely .zn { width: 20px; height: 20px; color: var(--tekst-2); }
.polosa-ust { display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 10px 10px 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--akcent) 14%, var(--fon)); box-shadow: inset 0 0 0 1px var(--cherta); }
.polosa-ust span { flex: 1; font: 500 14px/1.35 var(--f-ui); color: var(--zag); }
.polosa-ust .pilyulya { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* списки страниц */
.spisok { list-style: none; margin: 0; padding: 0 12px; }
.spisok li { border-bottom: 1px solid var(--cherta); }
.spisok li:last-child { border-bottom: 0; }
.spisok a, .spisok .skoro { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; min-height: 76px; padding: 9px 4px; text-decoration: none; color: inherit; }
.spisok.bez-kart a, .spisok.bez-kart .skoro { grid-template-columns: 34px 1fr; gap: 10px; min-height: 56px; }
.spisok .skoro { opacity: .6; }
.spisok img, .spisok .ph { width: 84px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--fon-3); }
.spisok .nom { width: 34px; font: 600 14px/1 var(--f-ui); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.spisok .r { font: 500 12.5px/1.3 var(--f-ui); color: var(--akcent-t); }
.spisok h3 { margin: 2px 0 3px; font: 600 16px/1.27 var(--f-zag); color: var(--zag); text-wrap: pretty; }
.spisok .m { font: 400 13px/1.3 var(--f-ui); color: var(--tekst-2); }
.spisok .da { color: var(--akcent-t); }
.spisok .da .zn { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 2.6; }

/* раздел и книга */
.rz-shapka { position: relative; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 18px; color: #ece5d4; isolation: isolate; background: #0d1620; }
.rz-shapka > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rz-shapka::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 22 32 / .5) 0, rgb(13 22 32 / .15) 35%, rgb(13 22 32 / .88) 100%); }
.rz-shapka .verh-nazad { position: absolute; top: 0; left: 0; right: 0; }
.rz-shapka .nazad { color: #ece5d4; }
.rz-shapka .n { font: 600 13px/1.2 var(--f-ui); color: #d6b26a; margin: 0 0 6px; }
.rz-shapka h1 { font: 600 28px/1.12 var(--f-zag); color: #ece5d4; }
.rz-op { margin: 14px 20px 8px; font: 400 15.5px/1.55 var(--f-ui); color: var(--tekst-2); }

/* ——— статья ——— */
.st-geroy { position: relative; min-height: calc(240px + var(--verh)); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 20px; color: #ece5d4; isolation: isolate; background: #0d1620; }
.st-geroy > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.st-geroy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 22 32 / .55) 0, rgb(13 22 32 / .1) 32%, rgb(13 22 32 / .9) 100%); }
.st-verh { position: absolute; top: calc(8px + var(--verh)); left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-geroy h1 { font: 600 28px/1.14 var(--f-zag); color: #ece5d4; text-shadow: 0 1px 12px rgb(5 10 18 / .6); }
.st-meta { margin: 0 0 8px; font: 500 13px/1.3 var(--f-ui); color: #d6b26a; }
.st-bez { padding: calc(8px + var(--verh)) 20px 6px; }
.st-bez .st-verh { position: static; margin: 0 -12px 10px 0; }
.st-bez .st-meta { color: var(--akcent-t); }
.st-bez h1 { font: 600 28px/1.14 var(--f-zag); }
.im-ryad { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none; direction: ltr; }
.im-ryad li { font: 400 24px/1.3 var(--f-imya); color: #e0bd77; direction: rtl; }
.st-bez .im-ryad li { color: var(--zoloto-ar); }
.st-deystviya { display: flex; gap: 8px; padding: 14px 16px 2px; flex-wrap: wrap; }
.st-deystviya button, .st-deystviya a { height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--fon-2); color: var(--zag); font: 500 14.5px/1 var(--f-ui); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--cherta); }
.st-deystviya .zn { width: 20px; height: 20px; }
.st-deystviya [aria-pressed="true"] .zn { fill: currentColor; }
.st-sod { margin: 12px 16px 0; border-radius: 16px; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); }
.st-sod summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font: 600 15px/1.2 var(--f-ui); color: var(--zag); cursor: pointer; list-style: none; }
.st-sod summary::-webkit-details-marker { display: none; }
.st-sod summary small { font: 400 13px/1 var(--f-ui); color: var(--tekst-2); }
.st-sod ol { margin: 0; padding: 0 16px 10px 38px; font: 400 15px/1.4 var(--f-ui); }
.st-sod li { padding: 5px 0; }
.st-sod a { text-decoration: none; }
.ekran .tekst { padding: 14px 22px 22px; max-width: none; font: 400 18px/1.66 var(--f-tekst); font-kerning: normal; }
.orig { inset: auto 0 0 0; width: min(100%, 520px); margin: 0 auto; }   /* окно «Оригинал» — снизу, по ширине колонки, а не всего окна */
html[data-razmer="m"] .ekran .tekst { zoom: .9; }
html[data-razmer="k"] .ekran .tekst { zoom: 1.15; }
html[data-razmer="kk"] .ekran .tekst { zoom: 1.3; }
.zagruzka { padding: 24px 22px; font: 400 16px/1.5 var(--f-ui); color: var(--tekst-2); }
.kp-stroka { margin: 0; padding: 4px 22px 8px; font: 400 14px/1.5 var(--f-ui); color: var(--tekst-2); }
.kp-stroka a { display: inline-block; padding: 8px 0; font-weight: 600; }
.s-niz { display: flex; align-items: center; gap: 12px; padding: 8px 20px calc(10px + var(--niz-bez)); background: var(--fon); border-top: 1px solid var(--cherta); font: 400 13px/1 var(--f-ui); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.s-niz .shkala { flex: 1; height: 4px; border-radius: 2px; background: var(--fon-3); overflow: hidden; }
.s-niz .shkala i { display: block; width: 100%; height: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(0); }
.s-konec { padding: 4px 20px 32px; display: grid; gap: 26px; }
.k-otm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px; background: var(--knopka); color: var(--knopka-tekst); font: 600 15px/1.2 var(--f-ui); }
.k-otm .zn { width: 20px; height: 20px; }
.k-otm[aria-pressed="true"] { background: var(--fon-3); color: var(--zag); }
.k-zag { margin: 0 0 12px; font: 600 16px/1.3 var(--f-ui); color: var(--zag); }
.k-seti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-seti button { display: grid; place-items: center; width: 100%; height: 48px; padding: 0; border: 0; border-radius: 12px; background: var(--fon-2); color: var(--zag); box-shadow: inset 0 0 0 1px var(--cherta); }
.k-seti button:active { background: var(--knopka); color: var(--knopka-tekst); }
.k-seti .zn { width: 20px; height: 20px; }
.dalee-st { display: flex; flex-direction: column; align-items: center; padding: 22px 24px 20px; border-radius: 20px; background: var(--knopka); color: var(--knopka-tekst); text-align: center; text-decoration: none; }
.dalee-st small { font: 500 13px/1.2 var(--f-ui); opacity: .8; margin-bottom: 6px; }
.dalee-st b { max-width: 30ch; font: 600 19px/1.3 var(--f-zag); text-wrap: balance; }
.dalee-st:active { filter: brightness(.92); }
.k-nazad { display: block; font: 500 15px/1.4 var(--f-ui); }
.k-nazad small { display: block; color: var(--tekst-2); font-size: 13px; }
.s-na-sayte { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--f-ui); }
.s-na-sayte .zn { width: 18px; height: 18px; }

/* ——— Указатель имён ——— */
.poisk-pole { padding: 4px 16px 8px; }
.poisk-pole input { width: 100%; height: 48px; border-radius: 24px; border: 0; padding: 0 18px; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); font: 400 16px/1 var(--f-ui); color: var(--zag); }
.poisk-pole input::placeholder { color: var(--tekst-2); }
.imena-g { margin: 14px 20px 4px; font: 600 20px/1.2 var(--f-zag); display: flex; align-items: baseline; gap: 8px; }
.imena-g small { font: 400 13px/1 var(--f-ui); color: var(--tekst-2); }
.imena-sp { list-style: none; margin: 0; padding: 0 12px; }
.imena-sp li { border-bottom: 1px solid var(--cherta); }
.im-r { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; background: none; text-align: left; color: inherit; }
.im-r .n { font: 600 13px/1 var(--f-ui); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.im-r b { display: block; font: 600 16px/1.25 var(--f-ui); color: var(--zag); }
.im-r small { display: block; margin-top: 2px; font: 400 13px/1.3 var(--f-ui); color: var(--tekst-2); }
.im-r .ar { font: 400 25px/1.35 var(--f-imya); color: var(--zoloto-ar); direction: rtl; text-align: right; }
.im-pusto { margin: 24px 20px; font: 400 15px/1.5 var(--f-ui); color: var(--tekst-2); }
/* № 2320 (слово владельца 08.11): карточка имени — как на сайте (Указатель имён): тёмная полоса с узором и золотой звездой,
   заголовок шрифтом текста (Montserrat — со знаком ударения), строки с чертой, «Краткий смысл» — с золотой чертой слева */
.kart-ar-blok { position: relative; overflow: hidden; display: grid; place-items: center; margin: 10px -16px 0; padding: 22px 16px 24px; background: var(--glub); border-block: 1px solid color-mix(in srgb, var(--glub-akcent) 55%, transparent); }
.kart-uzor { color: var(--glub-akcent); opacity: .12; }
.kart-khatam { position: relative; width: 196px; color: var(--glub-akcent); --khatam-l: 1.4px; filter: drop-shadow(0 0 18px rgb(207 169 95 / .22)); }
.kart-khatam .khatam__ar { color: var(--glub-akcent); font-weight: 500; white-space: normal; max-width: 58cqi; text-align: center; line-height: 1.35; transform: none; }
.kart-zag { margin: 18px 0 0; text-align: center; font: 600 30px/1.15 var(--f-tekst); letter-spacing: -.01em; color: var(--zag); }
.kart-dl { margin: 16px 0 0; display: grid; gap: 0; padding: 4px 16px; border-radius: 16px; background: var(--fon); box-shadow: inset 0 0 0 1px var(--cherta); }
.kart-dl div { display: grid; grid-template-columns: 8.6em 1fr; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cherta); }
.kart-dl div:last-child { border-bottom: 0; }
.kart-dl dt { font: 500 13.5px/1.35 var(--f-ui); color: var(--tekst-2); }
.kart-dl dd { margin: 0; font: 500 18px/1.35 var(--f-ui); color: var(--zag); }
.kart-dl dd[lang="en"] { font-style: italic; }
.kart-dl div:last-child dd { font-weight: 600; color: var(--akcent-t); }
.kart-sm { margin: 16px 0 0; padding: 14px 16px 14px; border-inline-start: 3px solid var(--zoloto, var(--akcent)); background: var(--fon); border-radius: 0 16px 16px 0; box-shadow: inset 0 0 0 1px var(--cherta); }
.kart-sm h3 { font: 600 13.5px/1.35 var(--f-ui); color: var(--tekst-2); }
.kart-sm p { margin: 6px 0 0; font: 400 16.5px/1.6 var(--f-tekst); color: var(--zag); text-wrap: pretty; }
.kart-sm .ist { margin-top: 10px; font: 400 13px/1.45 var(--f-ui); color: var(--tekst-2); }
.kart-delis { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }   /* № 2324: поделиться картинкой имени */
.kart-delis .pilyulya { min-height: 48px; width: 100%; justify-content: center; gap: 8px; }
.kart-delis .pilyulya .zn { width: 19px; height: 19px; }
.kart-delis .pilyulya[disabled] { opacity: .6; cursor: progress; }
.kart-dey { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; margin-top: 18px; align-items: center; }
.kart-dey .krug { width: 48px; height: 48px; background: transparent; color: var(--akcent-t); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zoloto, var(--akcent)) 60%, transparent); }
.kart-dey .pilyulya { min-height: 48px; padding: 0 12px; background: var(--glub); color: var(--glub-akcent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--glub-akcent) 50%, transparent); }
.kart-dey .krug[disabled] { opacity: .35; }

/* ——— Книги ——— */
.knigi { list-style: none; margin: 4px 0 0; padding: 0 12px 20px; display: grid; gap: 10px; }
.knigi a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); text-decoration: none; color: inherit; }
.knigi img, .knigi .ph { width: 96px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--fon-3); }
.knigi h2 { font: 600 18px/1.22 var(--f-zag); }
.knigi .m { margin-top: 4px; font: 400 13.5px/1.35 var(--f-ui); color: var(--tekst-2); }
.knigi .polosa { margin-top: 8px; height: 4px; border-radius: 2px; background: var(--fon-3); overflow: hidden; }
.knigi .polosa i { display: block; height: 100%; background: var(--akcent); }

/* ——— поиск ——— */
.poisk-itog { list-style: none; margin: 0; padding: 0 12px 24px; }
.poisk-itog li { border-bottom: 1px solid var(--cherta); }
.poisk-itog a { display: block; padding: 12px 4px; text-decoration: none; color: inherit; }
.poisk-itog .r { font: 500 12.5px/1.3 var(--f-ui); color: var(--akcent-t); }
.poisk-itog h3 { margin: 2px 0 4px; font: 600 16.5px/1.27 var(--f-zag); }
.poisk-itog p { font: 400 14px/1.5 var(--f-ui); color: var(--tekst-2); }
.poisk-itog mark { background: color-mix(in srgb, var(--akcent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ——— шторка ——— */
.shtorka-fon { position: fixed; inset: 0; z-index: 50; background: rgb(5 10 18 / .55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.shtorka-fon.otkr { opacity: 1; pointer-events: auto; }
.shtorka { position: fixed; z-index: 51; left: 50%; bottom: 0; width: min(100%, 520px); max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; font: 400 16px/1.5 var(--f-ui); color: var(--tekst);
  transform: translate(-50%, 104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
  background: var(--fon-2); border-radius: 24px 24px 0 0; padding: 8px 16px calc(18px + var(--niz-bez)); box-shadow: 0 -1px 0 var(--cherta); }
.shtorka.otkr { transform: translate(-50%, 0); visibility: visible; }
.shtorka::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--cherta); margin: 0 auto 6px; }
.sh-verh { display: flex; align-items: center; justify-content: space-between; }
.sh-verh h2 { font: 600 22px/1.2 var(--f-zag); }
.sh-razdel { margin: 16px 0 6px; font: 600 15px/1.2 var(--f-ui); color: var(--zag); }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fon); box-shadow: inset 0 0 0 1px var(--cherta); }
.segment label { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font: 500 14px/1.15 var(--f-ui); color: var(--tekst-2); cursor: pointer; text-align: center; padding: 0 4px; }
.segment label:has(input:checked) { background: var(--fon-2); color: var(--zag); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--akcent-t); }
.segment label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 1px; }
.shrifty { display: grid; gap: 2px; padding: 4px; border-radius: 16px; background: var(--fon); box-shadow: inset 0 0 0 1px var(--cherta); }
.shrift-v { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 10px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.shrift-v:has(input:checked) { border-color: var(--akcent-t); background: var(--fon-2); }
.shrift-v:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 1px; }
.shrift-obr { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cherta); font-size: 18px; color: var(--akcent-t); }
.shrift-obr[data-s="a"], .shrift-obr[data-s="f"] { font-family: "Forum", Georgia, serif; }
.shrift-obr[data-s="c"] { font-family: "Playfair Display", Georgia, serif; }
.shrift-obr[data-s="d"] { font-family: "Lora", Georgia, serif; }
.shrift-obr[data-s="e"] { font-family: "Literata", Georgia, serif; }
.shrift-v b { display: block; font: 500 15px/1.2 var(--f-ui); color: var(--zag); }
.shrift-v:has(input:checked) b { font-weight: 600; }
.shrift-v small { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--f-ui); color: var(--tekst-2); }
.sh-blok { display: grid; gap: 10px; justify-items: start; }
.sh-blok p { font: 400 14px/1.5 var(--f-ui); color: var(--tekst-2); }
.sh-blok ol { margin: 0; padding-left: 1.3em; font: 400 15px/1.55 var(--f-ui); color: var(--tekst); }
.sh-blok li { margin: 4px 0; }
.sh-blok .zn { width: 20px; height: 20px; vertical-align: -4px; }
.sh-ssylka { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 8px 16px; border-radius: 14px; background: var(--fon); box-shadow: inset 0 0 0 1px var(--cherta); color: var(--zag); font: 600 14px/1.3 var(--f-ui); text-align: center; text-decoration: none; }
.sh-proverka { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--cherta); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-proverka p { font: 400 13px/1.4 var(--f-ui); color: var(--tekst-2); }
.sh-proverka button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 0; background: var(--fon-3); color: var(--zag); font: 500 14px/1.1 var(--f-ui); }
.shtorka .n { font: 600 13px/1 var(--f-ui); color: var(--akcent-t); }
.snoska-sh p { margin: 8px 0 0; font: 400 15.5px/1.6 var(--f-ui); color: var(--tekst); }
.sn-k-spisku { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 600 14px/1 var(--f-ui); }

/* ——— короткое сообщение ——— */
.tost { position: absolute; left: 12px; right: 12px; bottom: calc(84px + var(--niz-bez)); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; border-radius: 16px;
  background: var(--zag); color: var(--fon); font: 400 14.5px/1.4 var(--f-ui); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.tost.vidno { opacity: 1; transform: none; pointer-events: auto; }
.tost span { flex: 1; }
.tost button { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--fon); font: 600 14.5px/1 var(--f-ui); text-decoration: underline; text-underline-offset: 3px; }

/* ——— «Мои пользы»: кнопка у выделения и весть ——— */
.kp-knopka { position: absolute; z-index: 45; left: 16px; bottom: var(--kp-niz, 150px); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px;
  background: var(--zag); color: var(--fon); font: 600 16px/1 var(--f-ui); box-shadow: 0 8px 24px rgb(5 10 18 / .32); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.kp-knopka .zn { width: 20px; height: 20px; }
.kp-knopka--u { left: 0; bottom: auto; transform: translateX(-50%); min-height: 44px; padding: 0 18px 0 14px; font-size: 15px; }
.kp-knopka:disabled { opacity: .7; cursor: progress; }
.kp-vest { position: absolute; z-index: 46; left: 50%; bottom: var(--kp-niz, 150px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: 16px;
  background: var(--zag); color: var(--fon); font: 400 14.5px/1.4 var(--f-ui); box-shadow: 0 12px 32px rgb(5 10 18 / .3); }
.kp-vest a { display: inline-block; padding: 8px 0; margin-left: 4px; color: inherit; font-weight: 700; }
.kp-knopka[hidden], .kp-vest[hidden], .kp-stroka[hidden], .polosa-ust[hidden] { display: none; }
.sh-kab-podp { margin: 6px 4px 0; font: 400 13px/1.4 var(--f-ui); color: var(--tekst-2); }

/* появление экрана — одно спокойное движение */
.ekran > .vhod { animation: vhod .22s ease-out both; }
@keyframes vhod { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (prefers-reduced-transparency: reduce) { .krug.steklo { background: rgb(13 22 32 / .8); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* № 2594: в шапке главной четыре кнопки (поиск, вид, сайт, закрыть) — на узком телефоне чуть плотнее */
@media (max-width: 430px) {
  .gl-verh { gap: 6px; padding-left: 12px; padding-right: 6px; }
  .gl-verh .knopki { gap: 0; }
  .gl-verh .krug { width: 40px; height: 40px; }
  .gl-marka { font-size: 19px; gap: 8px; }
  .gl-marka .khatam { width: 34px; height: 34px; }
}
@media (max-width: 359px) { .gl-marka > span[aria-hidden] { display: none; } }

/* № 2601: «Для вас» — первая статья подборки крупно (картинка и заголовок, как карточка сайта) */
.dlya-vas { display: block; margin: 0 12px 6px; border-radius: 20px; overflow: hidden; background: var(--fon-2); box-shadow: inset 0 0 0 1px var(--cherta); text-decoration: none; color: inherit; }
.dlya-vas img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.dlya-vas .t { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.dlya-vas .r { font: 500 13px/1.3 var(--f-ui); color: var(--tekst-2); }
.dlya-vas .nov { font-weight: 600; color: var(--akcent-t); }
.dlya-vas .z { font: 600 21px/1.22 var(--f-zag); color: var(--zag); text-wrap: balance; }
.dlya-vas .m { font: 400 13px/1 var(--f-ui); color: var(--tekst-2); }

/* № 2606: вкладка «Пользы» — «Мои пользы» внутри приложения */
.pz-ekran { padding: 0 16px 24px; }
.pz-schet { margin: 4px 4px 12px; font-size: 15px; line-height: 1.45; color: var(--tekst-2); }
.pz-spisok { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.pz-k { background: var(--fon-2); border-radius: 16px; padding: 14px 16px 10px; }
.pz-k blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--akcent); font: 400 16px/1.55 var(--f-tekst); color: var(--tekst); white-space: pre-line; overflow-wrap: anywhere; }
.pz-zam { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tekst-2); white-space: pre-line; }
.pz-niz { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pz-st { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--akcent-t); font: 600 14px/1.3 var(--f-ui); text-align: left; cursor: pointer; min-width: 0; }
.pz-st .zn { width: 16px; height: 16px; flex: none; }
.pz-ud { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 20px; background: none; color: var(--tekst-2); font: 500 14px/1 var(--f-ui); cursor: pointer; }
.pz-ud:disabled { opacity: .5; }
.pz-vhod { margin: 8px 4px 20px; padding: 20px; border-radius: 18px; background: var(--fon-2); }
.pz-vhod .zn { width: 36px; height: 36px; color: var(--akcent-t); stroke-width: 1.5; }
.pz-vhod h2 { margin: 10px 0 6px; font: 600 22px/1.2 var(--f-zag); color: var(--zag); }
.pz-vhod p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }