/* JUMMA — адаптивная тема: тёплый день (светлая), сумерки вечером (тёмная).
   Режим переключается по времени намаза (Фаджр→Магриб светло, после — темно).
   Палитра: терракота (бренд) + золото + крем/бумага + олива (выполнено). */

/* Шрифт мусхафа. ОСНОВНОЙ — KFGQPC Uthmanic Hafs (официальный шрифт мединского
   мусхафа Комплекса им. Фахда): под него сделан наш текст Корана (издание KFGQPC
   hafs), поэтому огласовки/паузы/танвин рисуются ТОЧЬ-В-ТОЧЬ как в мусхафе.
   ЗАПАСНОЙ — Scheherazade New (SIL): ВАЖНО — он тоже верно рисует малые буквы
   мусхафа (малый вав ۥ, малый йа ۦ) как надстрочные. Amiri сюда НЕ годится: он
   рисует малый вав полноразмерной буквой و → «лишние буквы» в тексте.
   Оба self-hosted (грузятся и в iOS Telegram-вебвью, где Google-шрифты часто не
   грузятся). font-display: block + preload + JS-ожидание (ensureQuranFont) —
   аяты НЕ показываются, пока основной шрифт не готов (иначе фолбэк «ломает» вид). */
@font-face {
    font-family: "KFGQPC Hafs";
    src: url("../fonts/uthmanic-hafs.woff2?v=20260801a") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "Scheherazade New";
    src: url("../fonts/scheherazade.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --tg-safe-bottom: 0px;            /* safe-area Telegram, из JS */
    --tg-safe-top: 0px;               /* safe-area сверху, из JS */

    /* Размеры шрифтов арабского текста и перевода (управляются из JS) */
    --ar-font-size: 26px;
    --tr-font-size: 14px;

    /* Сырая палитра бренда (источник правды для семантических токенов ниже) */
    --terracotta-700: #7C4329;
    --terracotta-600: #8F4F33;
    --terracotta-500: #AE6240;        /* основной акцент бренда */
    --terracotta-400: #C07A57;
    --terracotta-300: #D29B7E;
    --terracotta-100: #F0DCCF;
    --gold-600: #A8843A;
    --gold-500: #C7A24E;
    --gold-400: #D8B86A;
    --gold-300: #E6CE97;
    --olive-700: #565838;
    --olive-500: #6F7250;             /* «выполнено» */
    --olive-300: #8C8E6B;
    --olive-100: #DEE0CC;
    --ink-900: #2E2018;
    --ink-700: #4A3A2E;
    --ink-500: #6B5D50;
    --ink-300: #9A8B7C;

    /* Светлый дневной режим (по умолчанию / от Фаджра до Магриба) */
    --bg-top: #FBF5EC;
    --bg-bottom: #F4E9DA;
    --card: #FFFDF9;
    --card-border: rgba(75, 58, 46, 0.12);
    --shadow: 0 8px 26px rgba(75, 58, 46, 0.10);

    --text: var(--ink-900);
    --text-dim: var(--ink-500);   /* было ink-300 (#9A8B7C) — слабый контраст; ink-500 читается */

    --accent: var(--terracotta-500);      /* бренд/акцент */
    --accent-strong: var(--terracotta-600);
    --accent-soft: var(--terracotta-100); /* фон акцента */
    --accent-border: rgba(174, 98, 64, 0.30);

    /* «Выполнено» — олива (отдельно от бренда, чтобы не путать) */
    --done: var(--olive-500);
    --done-strong: var(--olive-700);
    --done-soft: var(--olive-100);
    --done-border: rgba(111, 114, 80, 0.32);

    --track: #E2D2BE;                /* пустые ячейки/обводки */
    --row-bg: #FCF8F1;               /* фон строки намаза */
    --card-bg: var(--card);          /* фон карточек (алиас; раньше был не определён) */
    --bg: var(--accent-soft);        /* мягкая подложка плашек (алиас) */
    --tabbar-bg: rgba(252, 248, 241, 0.92);

    /* Небо-герой и светило (день: тёплый закатный градиент + солнце) */
    --sky: linear-gradient(165deg, #D8B86A 0%, #D29B7E 45%, #AE6240 100%);
    --orb: radial-gradient(circle, #FBF5EC, #E6CE97);
    --orb-glow: 0 0 38px 12px rgba(230, 206, 151, 0.55);
    /* нимб для текста, лежащего прямо на фото-фоне (светлая тема — светлый нимб) */
    --on-bg-shadow: 0 1px 5px rgba(250, 244, 235, 0.7);

    /* Кривые движения в духе iOS: мягкий вход + лёгкая пружина для тактильности */
    --ease-out: cubic-bezier(.32, .72, 0, 1);
    --ease-spring: cubic-bezier(.2, .9, .3, 1.25);

    /* Единый язык шторок (sheet/modal). Затемнение фона и радиус верхних углов —
       один источник правды, чтобы все нижние листы и модалки выглядели заодно.
       Намеренно ОТЛИЧНЫЕ поверхности (видео — почти чёрный фон; «Что нового» —
       тёплый тон) свой фон оставляют. */
    --scrim: rgba(0, 0, 0, .45);   /* затемнение под листом/модалкой */
    --sheet-radius: 20px;          /* радиус верхних углов нижнего листа */
}

/* «Сумерки» — тёмный вечерний режим (от Магриба до Фаджра), тёплый эспрессо */
:root[data-theme="dark"] {
    --bg-top: #241A12;
    --bg-bottom: #1E1610;
    --card: #2A1F17;
    --card-border: rgba(244, 233, 218, 0.10);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.40);

    --text: #F4E9DA;
    --text-dim: #A89A89;

    --accent: #C8825E;
    --accent-strong: #D29B7E;
    --accent-soft: rgba(174, 98, 64, 0.20);
    --accent-border: rgba(200, 130, 94, 0.42);

    --done: var(--olive-300);
    --done-strong: #A4A67E;
    --done-soft: rgba(140, 142, 107, 0.20);
    --done-border: rgba(140, 142, 107, 0.42);

    --track: #3A2C20;
    --row-bg: #241A12;
    --card-bg: var(--card);          /* фон карточек (алиас; раньше был не определён) */
    --bg: var(--accent-soft);        /* мягкая подложка плашек (алиас) */
    --tabbar-bg: rgba(30, 22, 16, 0.92);

    /* Небо-герой (сумерки: тёплый закат → луна, звёзды) */
    --sky: linear-gradient(165deg, #2A1D14 0%, #4A2E20 45%, #8F4F33 100%);
    --orb: radial-gradient(circle at 38% 38%, #FBF5EC, #E6CE97);
    --orb-glow: 0 0 30px 8px rgba(230, 206, 151, 0.30);
    /* нимб для текста на фото-фоне (тёмная тема — тёмный нимб) */
    --on-bg-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: "Avenir Next", "Manrope", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    min-height: 100vh;
    background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
    background-attachment: fixed;
    transition: color .25s ease;
    /* Apple-уровень чёткости текста + сглаживание */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Скролл не «протекает» за пределы экрана (как нативное приложение) */
    overscroll-behavior-y: none;
}
/* Открыта модалка/лист — фон под ней НЕ листается (играешь в саду, тапаешь —
   страница позади стоит на месте). Сама модалка прокручивается внутри себя. */
body.modal-open { overflow: hidden; }

/* Бренд-тон выделения текста */
::selection { background: var(--accent-soft); color: var(--accent-strong); }

/* Общий фон приложения: фото по времени суток. Два слоя для плавной смены кадра.
   z-index отрицательный — за контентом, но поверх базового градиента body (фолбэк). */
.app-bg {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-size: cover; background-position: center;
    /* лёгкое размытие: фото читается фоном, но атмосфера видна */
    filter: blur(2px); transform: scale(1.08);
    opacity: 0; transition: opacity 2.8s ease;   /* спокойная плавная смена, без мелькания */
    /* медленный «Ken Burns» — фон живёт, а не висит мёртво */
    animation: app-bg-drift 48s ease-in-out infinite;
}
.app-bg.show { opacity: 1; }
/* Вкладка «Коран»: убираем фото-фон за текстом — чистая «бумажная» поверхность
   (спокойный градиент body), чтобы чтение/заучивание ничего не отвлекало. */
body.reading-clean .app-bg { opacity: 0 !important; transition: opacity .5s ease; }
body.reading-clean .app-bg-scrim { opacity: 0; transition: opacity .5s ease; }
@keyframes app-bg-drift {
    0%   { transform: scale(1.06) translate(0, 0); }
    50%  { transform: scale(1.17) translate(-2%, -1.5%); }
    100% { transform: scale(1.06) translate(0, 0); }
}
/* вуаль читаемости: фото приглушаем ровно настолько, чтобы карточки были чёткими,
   но атмосфера фото проступала. Светлая — тёплая дымка; тёмная — мягкое затемнение. */
.app-bg-scrim {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(244, 233, 218, 0.40), rgba(244, 233, 218, 0.56) 55%, rgba(244, 233, 218, 0.64));
}
:root[data-theme="dark"] .app-bg-scrim {
    background: linear-gradient(180deg, rgba(20, 12, 8, 0.48), rgba(20, 12, 8, 0.62) 55%, rgba(20, 12, 8, 0.72));
}

/* Верхний отступ = safe-area Telegram (вырез/строка статуса/контролы в фуллскрине)
   + небольшой зазор. Вне фуллскрина safe-top = 0 → обычный компактный отступ. */
.app { position: relative; max-width: 480px; margin: 0 auto; padding: calc(var(--tg-safe-top, 0px) + 14px) 16px calc(96px + var(--tg-safe-bottom)); }

.header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 20px;
}
.logo { font-family: "Prata", serif; font-size: 22px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); cursor: pointer; user-select: none; -webkit-user-select: none; text-shadow: var(--on-bg-shadow); }
.logo:active { opacity: .7; }
.header-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.date { color: var(--text-dim); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--on-bg-shadow); }
/* На узких экранах прячем дату, чтобы кнопки (радио/кибла/тема) точно влезли */
@media (max-width: 390px) { .date { display: none; } }
.theme-toggle {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--card);
    font-size: 16px; line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    transition: transform .1s;
    color: var(--text-dim);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:active { transform: scale(0.92); }

/* Нижняя навигация */
.tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    background: var(--tabbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--card-border);
    box-shadow: 0 -2px 16px rgba(20, 70, 45, 0.05);
    padding: 8px 8px calc(10px + var(--tg-safe-bottom));
    z-index: 10;
}
/* Одноразовая подсказка «добавить на главный экран» — слим-карточка над таб-баром */
.hs-prompt {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(80px + var(--tg-safe-bottom));
    z-index: 30;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px 11px 13px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(20, 30, 25, 0.16);
    transform: translateY(20px); opacity: 0;
    transition: transform .3s var(--ease-out, ease), opacity .3s ease;
}
.hs-prompt.show { transform: translateY(0); opacity: 1; }
.hs-prompt-ic { flex: none; display: flex; color: var(--accent-strong, #AE6240); }
.hs-prompt-ic .li-ic { width: 22px; height: 22px; }
.hs-prompt-t { flex: 1; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.hs-prompt-add {
    flex: none; border: none; cursor: pointer;
    background: var(--accent-strong, #AE6240); color: #fff;
    font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 11px;
}
.hs-prompt-x {
    flex: none; border: none; background: none; cursor: pointer;
    color: var(--text-dim); font-size: 22px; line-height: 1; padding: 2px 4px;
}
.tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 4px;
    border: none; background: transparent;
    color: var(--text-dim); cursor: pointer; font-family: inherit;
    transition: color .15s;
}
.tab-icon { font-size: 20px; line-height: 1; opacity: .55; transition: opacity .15s, transform .15s; }
.tab-icon svg { width: 23px; height: 23px; display: block; }
.tab-label { font-size: 11px; font-weight: 600; }
.tab.active { color: var(--accent-strong); }
.tab.active .tab-icon { opacity: 1; transform: translateY(-1px) scale(1.08); }

/* Универсальное скрытие: класс .hidden прячет любой элемент.
   Раньше правило было точечным (.tab-panel.hidden и т.п.), из-за чего новые
   карточки с классом hidden (сунны-режим, сообщество, пятница) не скрывались. */
.hidden { display: none !important; }

.tab-panel { animation: fade-in .32s var(--ease-out); }
.tab-panel.hidden { display: none; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
    0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); }
}

/* Карточки */
.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.card-title { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; line-height: 1.1; margin-bottom: 14px; color: var(--text); text-transform: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.day-count { font-family: "Avenir Next", "Manrope", sans-serif; font-size: 12px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 7px; }
.day-count.full { color: var(--done-strong); }
.count-track { width: 54px; height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; }
.count-track i { display: block; height: 100%; background: var(--done); border-radius: 5px; transition: width .3s ease; }

/* Награда за рост сада — заметный тост сверху */
.growth-toast {
    position: fixed; z-index: 200;
    left: 50%; top: calc(var(--tg-safe-top, 0px) + 14px);
    transform: translate(-50%, -16px);
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    background: var(--card); border: 1px solid var(--accent-border);
    border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.growth-toast.show { opacity: 1; transform: translate(-50%, 0); }
.growth-emoji { font-size: 34px; line-height: 1; animation: pop .45s ease; }
.growth-text { display: flex; flex-direction: column; line-height: 1.25; }
.growth-text b { font-size: 15px; color: var(--text); }
.growth-text span { font-size: 13px; font-weight: 700; color: var(--accent-strong); }

/* Герой: небо-герой со светилом — меняется по режиму (день/сумерки) */
.next-card {
    position: relative; overflow: hidden;
    background: var(--sky);
    color: #fff;
    border-radius: 22px;
    padding: 22px 22px 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
/* плавная смена фона неба при пересчёте фазы дня (JS задаёт background) */
.next-card { transition: background 2.5s ease; }
/* верхняя лёгкая вуаль (для локации/даты) */
.next-card::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 46%);
}
/* нижняя вуаль под текстом — лёгкая (небо НЕ затемняем), читаемость даём тенью текста */
.next-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.12) 78%, rgba(0, 0, 0, 0.30) 100%);
}
/* ночь — звёзды поверх градиента; класс is-night ставит JS */
.next-card.is-night::before {
    background:
        linear-gradient(180deg, rgba(0,0,0,.22), transparent 46%),
        radial-gradient(1.5px 1.5px at 22% 28%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 16%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 80% 34%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 38% 46%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 68% 40%, rgba(255,255,255,.4) 50%, transparent 51%);
    animation: sky-twinkle 6s ease-in-out infinite;
}
/* светило-диск убран: время суток и погоду передаёт сам градиент + облака/эффекты,
   а диск поверх текста мешал. Элемент оставлен в DOM (скрыт), чтобы при желании
   легко вернуть. */
.sky-orb {
    display: none;
    position: absolute; left: 80%; top: 14%; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--orb); box-shadow: var(--orb-glow);
    pointer-events: none;
    transition: left 2.5s ease, top 2.5s ease;
    animation: orb-glow 5s ease-in-out infinite;
}
/* месяц (ночь): вырезаем серп маской — независимо от цвета неба */
.sky-orb.is-moon {
    -webkit-mask: radial-gradient(circle at 70% 32%, transparent 48%, #000 49%);
    mask: radial-gradient(circle at 70% 32%, transparent 48%, #000 49%);
    animation: none;
}
@keyframes orb-glow {
    0%, 100% { box-shadow: var(--orb-glow); }
    50% { box-shadow: var(--orb-glow), 0 0 20px 5px rgba(255, 255, 255, 0.16); }
}
@keyframes sky-twinkle {
    0%, 100% { opacity: .85; }
    50% { opacity: .45; }
}
/* ── Облака отключены: «комки» на карточке читались как грязные текстуры.
   Погоду передаёт сам градиент неба (и осадки — отдельным эффектом). ──────── */
.sky-clouds { display: none !important; }
/* ── Погодные эффекты (дождь/снег/туман/гроза) ─────────────────────────── */
.sky-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sky-fx.rain::before, .sky-fx.thunder::before {
    content: ""; position: absolute; inset: -25% -25%;
    background-image: repeating-linear-gradient(101deg, rgba(255,255,255,.24) 0 1px, transparent 1px 8px);
    animation: rain-fall .75s linear infinite;
}
@keyframes rain-fall { from { transform: translateY(-12%); } to { transform: translateY(12%); } }
.sky-fx.thunder::after {
    content: ""; position: absolute; inset: 0; background: #fff; opacity: 0;
    animation: sky-flash 7s ease-in-out infinite;
}
@keyframes sky-flash { 0%,90%,100% { opacity: 0; } 92% { opacity: .45; } 94% { opacity: 0; } 95% { opacity: .35; } 97% { opacity: 0; } }
.sky-fx.snow::before {
    content: ""; position: absolute; inset: -20%;
    background-image:
        radial-gradient(circle, #fff 1.4px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,.75) 1.2px, transparent 2px);
    background-size: 90px 90px, 64px 64px;
    background-position: 0 0, 32px 24px;
    animation: snow-fall 7s linear infinite;
}
@keyframes snow-fall { to { background-position: 12px 90px, 44px 88px; } }
.sky-fx.fog::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 55%, rgba(255,255,255,.3) 100%);
}
.sky-fx.fog::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(130% 60% at 50% 85%, rgba(255,255,255,.28), transparent 72%);
    animation: fog-drift 12s ease-in-out infinite alternate;
}
@keyframes fog-drift { from { opacity: .5; transform: translateX(-6%); } to { opacity: .85; transform: translateX(6%); } }
/* ── Осадки-оверлеи (дождь/снег/гроза) убраны: тонкие линии и точки читались
   как «шум/помехи» поверх карточки. Погоду по-прежнему передаёт цвет градиента
   неба и значок температуры рядом с датой. Мягкую дымку тумана оставляем. ──── */
.sky-fx.rain::before, .sky-fx.thunder::before, .sky-fx.snow::before,
.sky-fx.thunder::after { content: none !important; display: none !important; }
/* пасмурно — прячем звёзды (их не видно за тучами), оставляем только лёгкую вуаль */
.next-card.overcast.is-night::before {
    background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 46%);
    animation: none;
}
/* Локация + дата (григ. + хиджра) на небе */
.sky-meta {
    position: relative; z-index: 2;
    display: flex; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 12.5px; font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.sky-loc { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.sky-loc svg { width: 13px; height: 13px; flex: 0 0 auto; }
/* Город тапабелен (смена города): тонкий пунктир — знак «можно нажать» */
.city-tap { border-bottom: 1px dashed currentColor; opacity: .95; }
.sky-loc:active .city-tap { opacity: .7; }
.sky-loc:empty { display: none; }
.sky-loc::after { content: "·"; margin: 0 7px; opacity: .55; }
.sky-loc:empty::after { content: none; }
.sky-hijri { opacity: .78; }
.sky-temp { opacity: .9; font-weight: 700; }
.sky-temp::before { content: "·"; margin: 0 6px; opacity: .55; font-weight: 400; }
/* Дата — кнопка (тап → про календарь). Сброс стилей кнопки + лёгкая подсказка. */
.sky-date {
    font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; z-index: 2;
    display: inline-flex; align-items: center;
}
.sky-hijri { opacity: .82; border-bottom: 1px dotted rgba(255, 255, 255, .5); padding-bottom: 1px; }
/* Блок отсчёта — кнопка (тап → все времена). Сброс стилей. */
.next-time-wrap {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent; position: relative; z-index: 2;
}
.next-label, .next-time, .next-countdown {
    position: relative; z-index: 2;
}
/* Ярус 1: маленькая подпись-«шапка» */
.next-label {
    font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    opacity: .9; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.4);
}
/* Ярус 2: крупный отсчёт — главный акцент */
.next-time {
    font-family: "Prata", serif; font-size: 58px; font-weight: 400; line-height: 1;
    margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 20px rgba(0, 0, 0, 0.4);
}
.nt-u { font-family: "Avenir Next", "Manrope", sans-serif; font-size: 23px; font-weight: 600; opacity: .82; margin: 0 1px 0 2px; }
/* Ярус 3: чистая подпись с именем намаза и временем (без «пилюли») */
.next-countdown {
    display: block; margin-top: 12px; font-size: 15px; font-weight: 500;
    opacity: .9; font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.next-countdown b { font-weight: 800; opacity: 1; }
/* длинное пояснение (высокие широты) — читаемым абзацем */
.next-countdown.note {
    font-weight: 500; font-size: 13px; line-height: 1.5; opacity: .95; max-width: 34ch;
}
/* Плашка «чем особенен сегодня» — тап открывает пояснение */
.sky-special {
    position: relative; z-index: 2; margin-top: 14px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; border: none; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    transition: transform .08s;
}
.sky-special:active { transform: scale(.97); }
.sky-special .sp-ic { font-size: 14px; line-height: 1; }
.sky-special .sp-chev { opacity: .7; margin-left: 1px; }
/* Лист «Времена сегодня» (модалка) */
.ti-list { display: flex; flex-direction: column; }
.ti-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 4px; border-bottom: 1px solid var(--card-border);
    font-size: 16px; color: var(--text);
}
.ti-row:last-child { border-bottom: none; }
.ti-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.ti-row.next { color: var(--accent-strong); font-weight: 700; }
.ti-row.ti-sub { color: var(--text-dim); font-size: 14px; padding: 8px 4px; }
.ti-settings-note {
    display: block; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 13px; line-height: 1.4; font-weight: 600; text-align: left; cursor: pointer;
}
.ti-settings-note:active { opacity: .75; }
/* Подразделы в пояснениях (календарь и т.п.) */
.info-sec { margin: 12px 0 0; }
.info-sec b { color: var(--accent-strong); }

/* Переключатель дня (вернуться и отметить пропущенный намаз) */
.day-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -2px 0 14px; }
.day-nav-label { font-size: 14px; font-weight: 700; color: var(--text-dim); min-width: 130px; text-align: center; }
.day-arrow {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    border: 1px solid var(--card-border); background: transparent; color: var(--text-dim);
    font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-family: inherit;
    transition: transform .08s, opacity .2s;
}
.day-arrow:active { transform: scale(.92); }
.day-arrow:disabled { opacity: .3; cursor: default; }

/* Намазы — каждая строка отдельной карточкой (как в макете) */
.prayers-card { background: none; border: none; box-shadow: none; padding: 0; }
.prayers { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.loading {
    color: var(--text-dim); text-shadow: var(--on-bg-shadow);
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 0;
    list-style: none;
}
/* Брендовый лоадер: дышащий полумесяц JUMMA вместо безликого спиннера.
   Полумесяц задаётся маской (data-URI), цвет берётся из --accent и подхватывает тему. */
.loading::before {
    content: ""; width: 22px; height: 22px; flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13.5A8 8 0 1 1 10.5 4a6.3 6.3 0 0 0 9.5 9.5z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 13.5A8 8 0 1 1 10.5 4a6.3 6.3 0 0 0 9.5 9.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    filter: drop-shadow(0 2px 6px rgba(174, 98, 64, .25));
    animation: jm-breathe 1.4s ease-in-out infinite;
}
@keyframes jm-breathe {
    0%, 100% { opacity: .4; transform: scale(.86); }
    50%      { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .loading::before { animation: jm-breathe 2.4s ease-in-out infinite; }
}

.prayer {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    padding: 13px 16px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.prayer:active { transform: scale(.99); }
.prayer.done .name { opacity: .62; }
.prayer.done .prayer-time { color: var(--done-strong); }
/* ближайший ещё не отмеченный — мягкий тёплый акцент карточки */
.prayer.is-next:not(.done) {
    border-color: var(--accent-border);
    background: linear-gradient(0deg, var(--accent-soft), var(--card));
}
/* текущий (пора отметить) — выраженный акцент: рамка, фон, левая полоса, пульс */
.prayer.is-current:not(.done) {
    border-color: var(--accent);
    background: linear-gradient(0deg, var(--accent-soft), var(--card));
    box-shadow: inset 3px 0 0 0 var(--accent), var(--shadow);
}
.prayer.is-current:not(.done) .name { color: var(--accent-strong); font-weight: 700; }
.prayer.is-current:not(.done) .check { border-color: var(--accent); border-style: solid; animation: pulse-ring 1.8s ease-in-out infinite; }
.prayer .name { flex: 1; font-size: 16px; font-weight: 600; }
.prayer-tag { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; }
/* «Сейчас» — ярче «скоро»: заливка акцентом */
.prayer-tag.now { color: #fff; background: var(--accent); box-shadow: 0 1px 6px var(--accent-soft); }
/* ⓘ-кнопка хадиса в строке сунны-намаза */
.sunnah-info { flex: 0 0 auto; width: 28px; height: 28px; border: none; background: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.sunnah-info:active { transform: scale(.9); }
/* «С джамаатом?» — тихая вторая отметка на строке совершённого намаза */
.jamaat-chip {
    flex: 0 0 auto; margin-left: 6px; padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--card-border); background: none; color: var(--text-dim);
    font-family: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer;
    transition: transform .08s;
}
.jamaat-chip:active { transform: scale(.95); }
.jamaat-chip.on { border-color: var(--done); background: var(--done-soft); color: var(--done-strong); }

/* ── Режим сафара (в пути) ── */
/* Чип у города на герое: статус + вход в карточку «Намаз в пути» */
.safar-chip {
    flex: 0 0 auto; margin-left: 7px; padding: 3px 9px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16);
    color: inherit; font-family: inherit; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: transform .08s;
}
.safar-chip:active { transform: scale(.95); }
/* Мягкая пометка «в пути — 2 ракаата» у Зухра/Асра/Иши */
.safar-rk {
    flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--text-dim);
    background: var(--accent-soft); padding: 3px 8px; border-radius: 999px;
    white-space: nowrap;
}
/* На самых узких экранах пометка не должна выдавливать время намаза */
@media (max-width: 359px) { .safar-rk { display: none; } }
/* Свёрнутые рауатиб: одна строка вместо пустых кружков (пропуск — не вина) */
.prayer.safar-fold { cursor: default; align-items: center; gap: 10px; }
.safar-fold-tx { flex: 1; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.safar-fold-btn {
    flex: 0 0 auto; border: 1px solid var(--card-border); background: none;
    color: var(--text-dim); font-family: inherit; font-size: 11px; font-weight: 700;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.safar-fold-btn:active { transform: scale(.95); }
/* Кнопка «Я больше не в пути» в карточке */
.safar-off-btn {
    display: block; width: 100%; margin-top: 16px; padding: 12px;
    border: 1px solid var(--card-border); border-radius: 12px; background: none;
    color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.safar-off-btn:active { transform: scale(.98); }

/* ── «Путь знания» — трек уроков на вкладке «Знание» ── */
.kn-card {
    display: block; width: 100%; text-align: left; cursor: pointer;
    margin: 0 0 14px; padding: 16px; border-radius: 18px; border: none;
    font-family: inherit; color: #FBF5EC;
    background: linear-gradient(135deg, var(--olive-500), var(--olive-700));
    box-shadow: var(--shadow); transition: transform .08s;
}
.kn-card:active { transform: scale(.99); }
.kn-top { display: flex; justify-content: space-between; align-items: center; }
.kn-lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.kn-count { font-size: 12px; font-weight: 700; opacity: .9; }
.kn-title { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; margin: 6px 0 2px; }
.kn-sub { font-size: 12.5px; opacity: .88; line-height: 1.45; }
.kn-bar { height: 5px; margin-top: 10px; border-radius: 99px; background: rgba(251,245,236,.25); overflow: hidden; }
.kn-bar i { display: block; height: 100%; border-radius: 99px; background: #FBF5EC; }
.kn-cta { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.kn-list { display: flex; flex-direction: column; gap: 8px; }
.kn-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 13px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
}
.kn-row.done { opacity: .72; }
.kn-row.cur { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.kn-row-st { width: 20px; flex: 0 0 auto; color: var(--done); font-weight: 700; }
.kn-row-t { flex: 1; font-size: 14px; font-weight: 600; }
.kn-row-arr { color: var(--text-dim); }
.kn-disc { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.kn-thought { font-size: 14.5px; line-height: 1.6; }
.kn-dalil { margin-top: 12px; padding: 12px; border-radius: 13px; background: var(--accent-soft); }
.kn-apply-h { margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.kn-apply, .kn-q { font-size: 14px; line-height: 1.55; }
.kn-opts { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.kn-opt {
    width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    font-family: inherit; font-size: 13.5px; cursor: pointer;
}
.kn-opt.right { border-color: var(--done); background: var(--done-soft); font-weight: 700; }
.kn-opt.dim { opacity: .55; }
.kn-opt:disabled { cursor: default; }

/* «Закрепление»: карточка под треком + сессия вопросов */
.kn-quiz {
    display: block; width: 100%; text-align: left; cursor: pointer;
    margin: 0 0 14px; padding: 14px 16px; border-radius: 18px;
    border: 1px solid var(--border); background: var(--card);
    font-family: inherit; color: var(--text); box-shadow: var(--shadow);
    transition: transform .08s;
}
.kn-quiz:active { transform: scale(.99); }
.kn-quiz-t { font-size: 15px; font-weight: 700; }
.kn-quiz-s { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.kn-quiz .kn-cta { color: var(--accent); }
.kn-quiz-calm { cursor: default; opacity: .85; }
.knq-top {
    display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
}
.knq-n { flex: 0 0 auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.knq-q { font-size: 15.5px; font-weight: 600; }
.knq-expl { margin-top: 12px; }
.knq-verdict { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--text-dim); }
.knq-verdict.ok { color: var(--done-strong); }
.knq-sum {
    font-family: "Cormorant Garamond", serif; font-size: 44px; font-weight: 600;
    text-align: center; margin-top: 6px;
}
.knq-sumlab {
    text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px;
}

/* Подсветка выученных слов в читалке (гасится тумблером «Мои слова») */
.qw-known {
    background: var(--accent-soft); border-radius: 6px; padding: 0 3px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.qr-body.hide-voc .qw-known { background: none; padding: 0; }
.qr-head-voc { margin-top: 6px; font-size: 12.5px; color: var(--accent-strong); }

/* «Слова Корана»: герой с процентом + карточка слова в сессии */
.voc-hero {
    margin-top: 12px; padding: 22px 18px; border-radius: 18px; text-align: center;
    background: linear-gradient(160deg, #22333B 0%, #32464F 100%); color: #FBF5EC;
}
.voc-hero-lab {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    opacity: .75;
}
.voc-hero-pct {
    font-family: "Cormorant Garamond", serif; font-size: 52px; font-weight: 600;
    line-height: 1.1; margin-top: 6px;
}
.voc-hero-sub { font-size: 13.5px; opacity: .85; margin-top: 6px; }
.voc-hero .voc-cta { margin-top: 16px; }
.voc-note { margin: 12px 4px 0; font-size: 13px; color: var(--text-dim); }
.voc-ar {
    direction: rtl; text-align: center; margin-top: 10px;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 42px; line-height: 1.7; color: var(--text);
}
.voc-tr { text-align: center; font-size: 14px; font-style: italic; color: var(--text-dim); margin-bottom: 10px; }
.voc-note-in { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.voc-meet-ru { text-align: center; font-size: 19px; font-weight: 700; margin-top: 4px; }
.voc-how { display: flex; gap: 10px; margin-top: 12px; font-size: 14px; }
.voc-how-n {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.voc-share {
    display: block; margin: 12px auto 0; padding: 6px 14px; border-radius: 999px;
    border: none; cursor: pointer;
    background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.voc-recall-row { display: flex; gap: 8px; margin-top: 12px; }
.voc-recall-row .kn-opt { flex: 1; text-align: center; }

/* «Бумажная» флешкарта слова */
.voc-fcard {
    position: relative; margin-top: 10px; padding: 26px 18px 22px;
    min-height: 150px; border-radius: 18px;
    background: linear-gradient(170deg, var(--card) 0%, var(--accent-soft) 130%);
    border: 1px solid rgba(138, 90, 59, 0.18);
    box-shadow: 0 10px 26px -18px rgba(60, 40, 25, 0.45);
    display: flex; flex-direction: column; justify-content: center;
}
.voc-fcard .voc-ar { margin-top: 0; }
.voc-fcard-orn {
    position: absolute; top: 10px; left: 14px;
    font-size: 15px; color: var(--accent-strong); opacity: .35;
}
.voc-flip-hint { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }

/* «знаешь ~N% слов» в списке сур */
.qr-ss-pct { color: var(--accent-strong); font-weight: 700; }

/* Пример из Корана на карточке слова */
.voc-ex { margin-top: 12px; padding: 12px 13px; border-radius: 13px; background: var(--accent-soft); }
.voc-ex-lab {
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-dim);
}
.voc-ex-ar {
    direction: rtl; text-align: right; margin-top: 6px;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 22px; line-height: 1.9; color: var(--text);
}
.voc-ex-ar .qw-known { background: rgba(174, 98, 64, 0.22); }
.voc-ex-tr { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.voc-ex-open {
    margin-top: 8px; padding: 4px 10px; border: none; border-radius: 999px;
    background: var(--card); color: var(--accent-strong); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700;
}

/* Переворот карточки в режиме «вспомни сам» */
.voc-flip { position: relative; perspective: 900px; }
.voc-flip .voc-face {
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transition: transform .5s ease;
}
.voc-flip .voc-front { transform: rotateY(0); }
.voc-flip .voc-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.voc-flip.on .voc-front { transform: rotateY(-180deg); }
.voc-flip.on .voc-back { transform: rotateY(0); }
.voc-reset {
    display: block; margin: 18px auto 4px; padding: 6px 10px;
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; color: var(--text-dim);
    text-decoration: underline; text-underline-offset: 3px;
}

/* Плашка «сервер недоступен»: честно о неполадке, уходит при первом успехе */
#srv-down {
    position: fixed; left: 0; right: 0; top: 0; z-index: 300;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
    background: #8A5A3B; color: #FBF5EC; text-align: center;
    font-size: 12.5px; font-weight: 600; line-height: 1.35;
    transform: translateY(-110%); transition: transform .3s ease;
}
#srv-down.on { transform: translateY(0); }

/* Словарь-просмотр: список 500 слов со статусами */
.voc-dict-link {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-top: 10px; padding: 13px 15px;
    border: none; border-radius: 14px; cursor: pointer;
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 700; text-align: left;
    box-shadow: 0 8px 20px -16px rgba(60, 40, 25, 0.4);
}
.voc-dict-link span { color: var(--accent-strong); }
.voc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.voc-chip {
    padding: 6px 12px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--accent-soft); color: var(--text-dim);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.voc-chip.on { background: var(--accent-strong); color: #FBF5EC; }
.voc-search {
    width: 100%; margin-top: 10px; padding: 9px 13px; box-sizing: border-box;
    border: 1px solid rgba(138, 90, 59, 0.22); border-radius: 12px;
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: 14px; outline: none;
}
.voc-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-top: 8px; padding: 9px 12px;
    border: none; border-radius: 13px; cursor: pointer;
    background: var(--card); text-align: left; font-family: inherit;
}
.voc-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voc-row-mid b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voc-row-sub { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voc-row-ar {
    direction: rtl; flex: 0 0 auto; max-width: 40%;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 21px; line-height: 1.6; color: var(--text);
}
.voc-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(138, 90, 59, 0.2); }
.voc-dot.inwork { background: #D9A45B; }
.voc-dot.learned { background: #5F8D62; }
.voc-stat-line { margin-top: 10px; text-align: center; font-size: 13px; color: var(--text-dim); }
.voc-stat-line.learned { color: #5F8D62; font-weight: 700; }
.voc-stat-line.inwork { color: #B07E33; font-weight: 700; }

/* Мольба о знании в финале урока/викторины */
.kn-dua { margin-top: 12px; padding: 13px; border-radius: 13px; background: var(--accent-soft); }
.kn-dua-intro { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.kn-dua-tr { font-size: 13px; font-style: italic; color: var(--text-dim); margin-top: 6px; }
.kn-dua .niyyah-tx { margin-top: 8px; }
.kn-dua-note { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; }
.kn-dua-share {
    margin-top: 10px; width: auto; padding: 6px 13px; border-radius: 999px;
    border: none; cursor: pointer;
    background: var(--card); color: var(--accent-strong);
    font-family: inherit; font-size: 12.5px; font-weight: 700;
}

/* «Почитать» — пилюля вместо ⓘ, когда у слота есть справка (Духа) */
.sunnah-read {
    width: auto; height: auto; padding: 5px 11px; border-radius: 999px;
    border: none; cursor: pointer;
    background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 12px; font-weight: 700;
}
/* Ряд пилюль «Довод / Поделиться» у сунны для жизни */
.sunnah-actions { display: flex; gap: 8px; margin-top: 8px; }
/* Секции справки в модалке (когда совершать / сколько ракатов) */
.sunnah-about-h {
    margin: 14px 0 4px; font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim);
}
.sunnah-about-tx { font-size: 14px; line-height: 1.55; color: var(--text); }
.sunnah-about-sep { height: 1px; margin: 14px 0; background: var(--card-border); }
.prayer-time { color: var(--text-dim); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.check {
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%;
    border: 2px solid var(--track);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* в списке намазов галочка крупнее и пунктирная, пока не отмечено */
.prayer .check { width: 38px; height: 38px; flex: 0 0 38px; border: 2px dashed var(--track); font-size: 17px; }
.prayer.done .check { background: var(--done); border-color: var(--done); border-style: solid; color: #fff; }
/* одноразовая анимация в момент отметки (а не вспышка на каждом ре-рендере) */
.check.just-done { animation: check-pop .45s cubic-bezier(.2, .9, .3, 1.4); }

@keyframes check-pop {
    0% { transform: scale(.4); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
@keyframes pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
    50% { box-shadow: 0 0 0 4px var(--accent-soft); }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .prayer.is-current:not(.done) .check { animation: none; }
    .tab-panel { animation: none; }
    .check.just-done { animation: none; }
    .sky-orb { animation: none; transition: none; }
    .next-card, .next-card.is-night::before { animation: none; transition: none; }
    .sky-clouds { animation: none; }
    .sky-fx.rain::before, .sky-fx.thunder::before, .sky-fx.thunder::after,
    .sky-fx.snow::before, .sky-fx.fog::after { animation: none; }
    .app-bg { animation: none; transform: scale(1.1); }
}

/* Доп. времена-ориентиры (восход, тахаджуд) */
.extra-times { list-style: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 8px; }
.extra-times li { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; color: var(--text-dim); font-size: 14px; }
.extra-times .et-time { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Продолжение петли: ссылка на азкары после отмеченного намаза */
.azkar-after { display: block; width: 100%; margin-top: 12px; padding: 13px 16px; text-align: left; background: var(--done-soft); border: 1px solid var(--done-border); border-radius: 14px; color: var(--done-strong); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .08s; }
.azkar-after:active { transform: scale(.99); }
.azkar-after.hidden { display: none; }
/* Тихие утилиты в подвале карточки намазов: «+ сунны и витр» и подстройка времени.
   Это не главные действия — поэтому неяркие ссылки в одну строку, по центру. */
.prayer-utils { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 4px; }
.util-link { background: none; border: none; padding: 4px 2px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; transition: opacity .08s; text-shadow: var(--on-bg-shadow); }
.util-link:active { opacity: .55; }
.util-dot { color: var(--text); opacity: .55; text-shadow: var(--on-bg-shadow); }
.util-block { display: block; width: 100%; margin-top: 12px; text-align: center; }

/* Быстрая отметка в герое: кнопка «✓ Отметить <намаз>» для наступившего намаза. */
.hero-mark { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 18px; border-radius: 999px; border: none; background: #FBF5EC; color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; position: relative; z-index: 2; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .08s; }
.hero-mark:active { transform: scale(.97); }
.hero-mark.hidden { display: none; }

/* Вход в полное расписание — ссылка в подвале карточки намазов. */
.schedule-link { display: block; width: 100%; margin-top: 12px; padding: 12px 2px 0; border: none; border-top: 1px solid var(--card-border); background: none; color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.schedule-link:active { opacity: .6; }

/* Тихая ссылка «поставить на паузу» под списком намазов. Приглушённая, не кричит:
   это поддержка, не призыв. При нескольких днях без отметок — чуть теплее. */
.pause-link { display: block; width: 100%; margin-top: 8px; padding: 8px 2px 0; border: none; background: none; color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; cursor: pointer; }
.pause-link:active { opacity: .6; }
.pause-link-soft { color: var(--accent-strong); }
.pause-link.hidden { display: none; }

/* Подсветка раздела «Перерыв» при переходе по тихой ссылке — мягкая вспышка. */
.set-sec-flash { animation: setSecFlash 1.6s ease; border-radius: 14px; }
@keyframes setSecFlash { 0%, 100% { background: transparent; } 25% { background: rgba(120, 150, 130, .16); } }

/* Серия — короткая плашка вместо большого сада. */
.streak-pill { display: inline-flex; align-items: center; gap: 9px; width: auto; margin: 6px 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .08s; }
.streak-pill.protected { border-color: #d9a441; background: rgba(217, 164, 65, 0.14); color: #8a6420; }
.streak-pill:active { transform: scale(.98); }
.streak-pill.hidden { display: none; }
.streak-pill-ic { font-size: 16px; }
.streak-pill-text { font-variant-numeric: tabular-nums; }

/* Строки-входы на главном (азкары, «+ сунны и витр») — спокойные, с иконкой и шевроном. */
.home-row { display: flex; align-items: center; gap: 13px; width: 100%; margin: 8px 0; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform .08s; }
.home-row:active { transform: scale(.99); }
.home-row-ic { font-size: 17px; flex: 0 0 auto; width: 24px; text-align: center; }
.home-row-text { flex: 1; }
.home-row-arrow { color: var(--text-dim); flex: 0 0 auto; font-size: 20px; transition: transform .15s; }
.toggle-row.open .home-row-arrow { transform: rotate(90deg); }


/* Намерение (ниях/хушу): постоянный якорь дня — спокойная карточка-кнопка над
   намазами. Тон сдержанный (не конкурирует с терракотовой «Пятницей» и оливковым
   «… дня»): мягкий акцентный фон, полумесяц-водяной знак. */
.niyyah-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left; margin: 14px 0 4px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text); position: relative; overflow: hidden; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.niyyah-card.hidden { display: none; }
.niyyah-mark { position: absolute; right: -20px; top: -20px; opacity: .12; pointer-events: none; }
.niyyah-lab { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); position: relative; z-index: 1; }
.niyyah-text { font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--text); position: relative; z-index: 1; }
.niyyah-more { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--accent-strong); position: relative; z-index: 1; }
/* Сезонная карточка по хиджре (Мухаррам и т.п.) — тёплый акцент, тап → разбор */
.season-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; margin: 4px 0 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.season-card.hidden { display: none; }
.season-lab { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); }
.season-intro { font-family: "Cormorant Garamond", serif; font-size: 16.5px; line-height: 1.45; color: var(--text); }
.season-more { font-size: 12px; font-weight: 700; color: var(--accent-strong); }
/* «Один следующий шаг» — компактная строка-нудж с единственным действием */
.nextstep-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 12px 0 4px; padding: 13px 15px; border-radius: 16px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.nextstep-card:active { transform: scale(.99); }
.nextstep-card.hidden { display: none; }
.nextstep-card.nextstep-static { cursor: default; }
.nextstep-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--accent-strong); }
.nextstep-ic .li-ic { width: 21px; height: 21px; }
.nextstep-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nextstep-lab { font-size: 15px; font-weight: 700; color: var(--text); }
.nextstep-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.nextstep-sub.hidden { display: none; }
.nextstep-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--row-bg); border: 1px solid var(--accent-border); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.nextstep-cta.hidden { display: none; }
/* ── Награда за полный день (5/5) ── */
.reward-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 12px 0 4px; padding: 13px 15px; border-radius: 16px; border: 1px solid var(--accent-border); background: linear-gradient(120deg, var(--accent-soft), var(--card)); color: var(--text); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.reward-card:active { transform: scale(.99); }
.reward-card.hidden { display: none; }
/* До 5/5 — приглушённо (обещание, не укор): без яркой заливки */
.reward-card.locked { background: var(--row-bg); border-style: dashed; cursor: default; }
.reward-card.locked .reward-ic { filter: grayscale(.5); opacity: .7; }
.reward-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: var(--card-bg); }
.reward-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reward-lab { font-size: 15px; font-weight: 700; color: var(--text); }
.reward-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.reward-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--row-bg); border: 1px solid var(--accent-border); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.reward-card.locked .reward-cta { color: var(--text-dim); border-color: var(--card-border); }

/* ── 40-дневный путь ── */
.path40-card { margin: 12px 0 4px; padding: 13px 15px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); }
.path40-card.hidden { display: none; }
.p40-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p40-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.p40-count { font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.p40-track { position: relative; height: 7px; border-radius: 999px; background: var(--row-bg); margin: 9px 0 7px; overflow: hidden; }
.p40-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.p40-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }

/* Заметка «Намерение» (в модалке): хадисы — араб. + перевод + источник */
.niyyah-hadith { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.niyyah-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 22px; line-height: 1.9; color: var(--text); }
.niyyah-tx { font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 500; line-height: 1.4; margin-top: 8px; color: var(--text); }
.niyyah-src { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-top: 8px; }
/* разделитель в модалке особого дня: история дня ↔ общий блок месяца */
.special-sep { height: 1px; background: var(--card-border); margin: 18px 0; }

/* «Напоминание дня» (насиха): крючок-зачин крупнее, кнопка «Поделиться красиво» */
.nasiha-hook { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--text); margin: 0 0 12px; }
.nasiha-share { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  margin-top: 20px; padding: 13px 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--accent-strong); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; }
.nasiha-share svg { stroke: #fff; }
.nasiha-share:active { transform: scale(.98); }

.hint { margin-top: 18px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.5; text-shadow: var(--on-bg-shadow); }

/* Сад деяний + серия */
/* Зона «Прогресс»: заголовок с воздухом сверху — отделяет от карточки намазов. */
.garden-heading { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); margin: 28px 2px 10px; }
.garden { display: block; margin-bottom: 14px; cursor: pointer; padding: 0; overflow: hidden; }
.garden:active { transform: scale(0.99); }
/* Бейдж текущей стадии поверх сцены */
.garden-scene-wrap { position: relative; }
.garden-badge { position: absolute; left: 12px; top: 12px; background: rgba(31, 20, 13, 0.32); color: #FBF5EC; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Дорожка стадий: точки на линии, пройденные — олива, текущая — акцент */
/* Дорожка-путь сада: все стадии видны (цель тоже), текущая пульсирует. */
.garden-track { display: flex; align-items: center; justify-content: center; padding: 18px 14px; }
.gj-node { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.gj-emoji {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px;
    border-radius: 50%; background: var(--row-bg); border: 1.5px solid var(--card-border);
    filter: grayscale(.55); opacity: .5; transition: .25s;
}
.gj-node.done .gj-emoji { opacity: 1; filter: none; background: var(--accent-soft); border-color: var(--accent-border); }
.gj-node.current .gj-emoji {
    opacity: 1; filter: none; font-size: 20px; width: 42px; height: 42px;
    background: var(--accent-soft); border-color: var(--accent); animation: gj-pulse 2.2s ease-in-out infinite;
}
.gj-link { flex: 1 1 auto; height: 2px; min-width: 6px; max-width: 26px; background: var(--track); }
.gj-link.done { background: var(--accent); }
@keyframes gj-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
/* Следующая стадия + прогресс-бар */
.gn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gn-next { font-size: 13px; font-weight: 700; color: var(--text); }
.gn-left { font-size: 12px; color: var(--accent-strong); font-weight: 700; white-space: nowrap; }
.gn-bar { margin-top: 6px; height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; }
.gn-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .6s var(--ease-out); }
/* Живая сцена сада — небо (день/сумерки) + земля + растения */
.garden-scene {
    position: relative; width: 100%; height: 124px; overflow: hidden;
    background: linear-gradient(180deg, #BFE0EF 0%, #DCEBDF 42%, #F0E6CE 68%, #EAD9B6 100%);
}
/* Небо сада — по ВРЕМЕНИ СУТОК (день/вечер/ночь), независимо от темы интерфейса */
.garden-scene.gs-day { background: linear-gradient(180deg, #BFE0EF 0%, #DCEBDF 42%, #F0E6CE 68%, #EAD9B6 100%); }
.garden-scene.gs-eve { background: linear-gradient(180deg, #46538A 0%, #A86A86 42%, #E2945E 72%, #DCAE84 100%); }
.garden-scene.gs-night { background: linear-gradient(180deg, #121A33 0%, #1C2748 44%, #283353 70%, #2E3654 100%); }
/* Луна + звёзды (вечер/ночь) */
.gs-moonglow { fill: #FBF5EC; opacity: .16; transform-box: fill-box; transform-origin: center; animation: gs-glow 5s ease-in-out infinite; }
.gs-moondisc { fill: #F3ECD6; }
.gs-star { fill: #FFFDF2; animation: gs-twinkle 3s ease-in-out infinite; }
@keyframes gs-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Облака — тон по фазе суток */
.gs-eve .gs-cloud ellipse { fill: rgba(255,221,205,.66); }
.gs-night .gs-cloud ellipse { fill: rgba(180,190,222,.20); }
/* Ландшафт мягко притемняется вечером/ночью (луну/звёзды/облака не трогаем) */
.gs-eve .gs-scape { filter: brightness(.93) saturate(1.05); }
.gs-night .gs-scape { filter: brightness(.72) saturate(.82); }
@media (prefers-reduced-motion: reduce) { .gs-moonglow, .gs-star { animation: none; } }
/* Живая сцена: солнце дышит, облака плывут, растения качаются. Объём — за счёт
   градиентов (свет сверху/тень снизу), многослойных крон и мягких теней. */
.gs-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.garden-scene.grew { animation: pop .5s ease; }
.garden-scene-lg { height: 150px; border-radius: 16px; margin-bottom: 14px; }

/* Небо */
.gs-sun { fill: url(#gsSun); }
.gs-sunglow { fill: #F4D98B; opacity: .5; transform-box: fill-box; transform-origin: center; animation: gs-glow 4.5s ease-in-out infinite; }
:root[data-theme="dark"] .gs-sunglow { fill: #FBF5EC; opacity: .14; }
.gs-cloud ellipse { fill: rgba(255,255,255,.82); }
.gs-cloud { animation: gs-drift 22s ease-in-out infinite alternate; }
.gs-cloud2 { animation-duration: 30s; }
:root[data-theme="dark"] .gs-cloud ellipse { fill: rgba(255,255,255,.13); }

/* Дальние холмы (глубина) */
.gs-hill-far { fill: #B7D49A; opacity: .55; }
.gs-hill-near { fill: #9DC47E; opacity: .7; }
:root[data-theme="dark"] .gs-hill-far { fill: #20351F; opacity: .6; }
:root[data-theme="dark"] .gs-hill-near { fill: #2A4226; opacity: .7; }

/* Земля */
.gs-soil { fill: url(#gsSoil); }
.gs-soil-edge { fill: none; stroke: #8FB45E; stroke-width: 2.5; opacity: .5; }
:root[data-theme="dark"] .gs-soil-edge { stroke: #4A6638; opacity: .4; }
.gs-shadow { fill: rgba(70,52,30,.20); }
:root[data-theme="dark"] .gs-shadow { fill: rgba(0,0,0,.30); }

/* Растения */
.gs-leafblob { fill: url(#gsLeaf); }
.gs-canopy-hi { fill: #AFCB7E; opacity: .5; }
:root[data-theme="dark"] .gs-canopy-hi { fill: #5A7A48; opacity: .4; }
.gs-trunk { fill: url(#gsTrunk); }
.gs-stem { fill: none; stroke: #6E8A4E; stroke-width: 2.4; stroke-linecap: round; }
:root[data-theme="dark"] .gs-stem { stroke: #4A6638; }
.gs-grass { fill: none; stroke: #7BA24C; stroke-width: 2; stroke-linecap: round; }
.gs-grass-b { stroke: #9DC47E; opacity: .7; }
:root[data-theme="dark"] .gs-grass { stroke: #4A6638; }
:root[data-theme="dark"] .gs-grass-b { stroke: #3A5230; }
.gs-blossom { fill: #ECA9B2; }
.gs-petals circle { fill: url(#gsPetal); }
.gs-fcore { fill: #C77A45; }

/* Качание листвы/крон/куста (крона вращается у основания) */
.gs-canopy, .gs-bush { transform-box: fill-box; transform-origin: 50% 92%; animation: gs-sway 5.5s ease-in-out infinite; }
.gs-leaf { transform-box: fill-box; transform-origin: 50% 100%; animation: gs-sway 4.2s ease-in-out infinite; }

/* Градиентные стопы (свет/тень) — темизация переопределением stop-color */
.gs-st-suncore { stop-color: #FFF3CF; } .gs-st-sunedge { stop-color: #F1CE7E; }
.gs-st-soiltop { stop-color: #CBA87A; } .gs-st-soilbot { stop-color: #A07E54; }
.gs-st-leaftop { stop-color: #86AE5A; } .gs-st-leafbot { stop-color: #4C6B36; }
.gs-st-trunklight { stop-color: #A56E48; } .gs-st-trunkdark { stop-color: #6E4626; }
.gs-st-petalin { stop-color: #F6E2A0; } .gs-st-petalout { stop-color: #E0B45C; }
:root[data-theme="dark"] .gs-st-suncore { stop-color: #FBF5EC; }
:root[data-theme="dark"] .gs-st-sunedge { stop-color: #C9C2B0; }
:root[data-theme="dark"] .gs-st-soiltop { stop-color: #3E2C1E; }
:root[data-theme="dark"] .gs-st-soilbot { stop-color: #261A11; }
:root[data-theme="dark"] .gs-st-leaftop { stop-color: #3F5B39; }
:root[data-theme="dark"] .gs-st-leafbot { stop-color: #243620; }
:root[data-theme="dark"] .gs-st-trunklight { stop-color: #5A4030; }
:root[data-theme="dark"] .gs-st-trunkdark { stop-color: #38261A; }
:root[data-theme="dark"] .gs-st-petalin { stop-color: #C9B98E; }
:root[data-theme="dark"] .gs-st-petalout { stop-color: #9A8A5E; }

@keyframes gs-glow { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.1); } }
@keyframes gs-drift { from { transform: translateX(0); } to { transform: translateX(22px); } }
@keyframes gs-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) {
    .gs-sunglow, .gs-cloud, .gs-canopy, .gs-bush, .gs-leaf { animation: none; }
}

/* ── Интерактив сада: тап-искры, перетаскивание облаков, полив, бабочка ── */
.garden-scene { cursor: pointer; touch-action: manipulation; }
/* В открытом «Саду деяний» жесты целиком наши (тап/тяни) — страница не панится. */
.garden-modal-wrap .garden-scene { touch-action: none; }
.gs-sun, .gs-sunglow, .gs-cloud { cursor: pointer; }
/* Вспышка при тапе по солнцу — «засияло». */
.gs-sunburst { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; z-index: 4;
    background: radial-gradient(circle, rgba(255,243,200,.95), rgba(255,222,135,.4) 45%, rgba(255,222,135,0) 70%);
    animation: gs-sunburst .85s ease-out forwards; }
@keyframes gs-sunburst { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
/* Дымка у горизонта + блик на солнце */
.gs-haze { fill: url(#gsHaze); opacity: .35; }
:root[data-theme="dark"] .gs-haze { opacity: .12; }
.gs-sun-glint { fill: rgba(255,255,255,.65); }
:root[data-theme="dark"] .gs-sun-glint { fill: rgba(255,255,255,.4); }
/* Трава колышется при тапе */
.gs-grasstuft { transform-box: fill-box; transform-origin: 50% 100%; }
.gs-grasstuft.gs-bend { animation: gs-grassbend .72s ease; }
@keyframes gs-grassbend { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } }
/* Лужицы после дождя */
.gs-puddle { position: absolute; height: 5px; margin-left: -8px; border-radius: 50%; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse, rgba(40,55,80,.32), rgba(40,55,80,0) 70%); animation: gs-puddle 2.4s ease-out forwards; }
@keyframes gs-puddle { 0% { opacity: 0; transform: scaleX(.5); } 20% { opacity: .85; } 100% { opacity: 0; transform: scaleX(1.15); } }
/* Бабочка вспархивает при тапе */
.gs-bfly-pop { position: absolute; pointer-events: none; z-index: 4; animation: gs-bfly-pop 2.5s ease-out forwards; }
@keyframes gs-bfly-pop { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 12% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--bx, 0), -58px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .gs-sunburst, .gs-puddle, .gs-bfly-pop, .gs-grasstuft.gs-bend { animation: none; }
    .gs-bfly-pop, .gs-puddle { display: none; }
}
.garden-scene.gs-tap { animation: gs-tap .45s var(--ease-out); }
.garden-scene.gs-water { animation: gs-water 1s ease; }
@keyframes gs-tap { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.03); } }
@keyframes gs-water { 0%, 100% { filter: none; } 35% { filter: saturate(1.55) brightness(1.07); } }
.gs-cloud { cursor: grab; }
.gs-cloud.gs-grab { cursor: grabbing; animation: none !important; }
/* overlay-слой эффектов: поверх сцены, не перехватывает клики, обрезан по сцене */
.garden-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; border-radius: inherit; }
.gs-spark { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
    background: radial-gradient(circle, #FBE7A6, #E6CE97); animation: gs-spark .72s ease-out forwards; }
@keyframes gs-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -22px)) scale(.3); } }
.gs-drop { position: absolute; top: -6px; width: 3px; height: 9px; border-radius: 0 0 60% 60%;
    background: linear-gradient(#CFE9F5, #8FC7E0); animation: gs-drop .85s ease-in forwards; }
@keyframes gs-drop { 0% { opacity: 0; transform: translateY(0); } 14% { opacity: .95; }
    100% { opacity: 0; transform: translateY(var(--fall, 80px)); } }
.gs-bfly { position: absolute; left: -10%; top: 34%; width: 15px; height: 13px; animation: gs-fly 16s linear infinite; }
.gs-bfly-w { transform-box: fill-box; transform-origin: center; animation: gs-flap .2s ease-in-out infinite alternate; }
/* left (в % от overlay = ширины сцены) ведёт горизонтально; transform — вертикальное покачивание */
@keyframes gs-fly { 0% { left: -10%; transform: translateY(0) rotate(-4deg); }
    25% { transform: translateY(-15px) rotate(8deg); } 50% { transform: translateY(5px) rotate(-4deg); }
    75% { transform: translateY(-12px) rotate(8deg); } 100% { left: 110%; transform: translateY(0) rotate(-4deg); } }
@keyframes gs-flap { from { transform: scaleX(1); } to { transform: scaleX(.5); } }
.garden-controls { display: flex; justify-content: center; padding: 8px 16px 2px; }
.garden-water { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-weight: 700; font-size: 13px; padding: 7px 15px;
    border-radius: 12px; cursor: pointer; }
.garden-water svg { color: #8FC7E0; }
.garden-water:active { filter: brightness(.96); }
.garden-water.watering { pointer-events: none; opacity: .65; }
/* модалка «Сад деяний»: интерактивный сад + подсказка */
.garden-modal-wrap { margin-bottom: 4px; }
.garden-modal-hint { text-align: center; font-size: 12.5px; color: var(--text-dim); margin: 2px 0 14px; }
@media (prefers-reduced-motion: reduce) {
    .garden-scene.gs-tap, .garden-scene.gs-water, .gs-spark, .gs-drop, .gs-bfly, .gs-bfly-w { animation: none; }
    .gs-bfly { display: none; }
}

.garden-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px 4px; }
.garden-info { flex: 1; min-width: 0; }
.garden-label { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; }
.garden-next { margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.garden-note { padding: 0 16px 14px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.streaks { text-align: center; }
.streak { display: flex; flex-direction: column; align-items: center; background: var(--accent-soft); border-radius: 14px; padding: 8px 16px; }
.streak span { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; color: var(--accent-strong); line-height: 1; }
.streak small { margin-top: 2px; font-size: 11px; color: var(--text-dim); }

/* Сунны */
.sunnahs { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sunnah {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .08s;
}
.sunnah:active { transform: scale(0.99); }
.sunnah.done { background: var(--accent-soft); border-color: var(--accent-border); }

.sunnah-head { display: flex; align-items: flex-start; gap: 12px; }
.sunnah-head .check {
    margin-top: 2px; width: 24px; height: 24px; flex: 0 0 24px;
}
.sunnah.done .check { background: var(--accent); border-color: var(--accent); color: #fff; animation: pop .3s ease; }
.sunnah-group-title { margin: 6px 2px 2px; font-size: 13px; font-weight: 800; color: var(--accent-strong); }
.sunnahs .sunnah-group-title:first-child { margin-top: 0; }
.sunnah-title { font-size: 16px; font-weight: 700; }
.sunnah-desc { margin-top: 6px; color: var(--text); font-size: 14px; line-height: 1.45; opacity: .85; }
.sunnah-text { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.sunnah-source {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--card-border);
    font-size: 12px; color: var(--text-dim);
}
/* Слот-заглушка сунны: каркас под будущий контент, не кликабелен */
.sunnah.placeholder { opacity: .65; border-style: dashed; cursor: default; }
.sunnah.placeholder .sunnah-title { color: var(--text-dim); font-weight: 600; }

.empty { color: var(--text-dim); text-align: center; padding: 24px 8px; line-height: 1.5; text-shadow: var(--on-bg-shadow); }

/* Модальное окно (объяснения, сноски) */
/* z-index выше всех листов (friday-sheet 60, schedule 60, me-rep 200, font 600),
   чтобы модалки, открытые ИЗ листа (пятница: «Как размышлять», «Текст и достоинство»,
   шеринг, «Час дуа»), были видны поверх, а не под ним. */
.modal-overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 700; padding: calc(var(--tg-safe-top, 0px) + 20px) 20px calc(var(--tg-safe-bottom, 0px) + 20px); }
.modal-overlay.hidden { display: none; }
.modal { background: var(--card); color: var(--text); border-radius: 18px; max-width: 440px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); position: relative; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: none; background: var(--accent-soft); border-radius: 50%; font-size: 20px; color: var(--text); cursor: pointer; z-index: 3; }
.modal-close:active { filter: brightness(.94); }
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 12px; padding-right: 28px; }
.modal-body { font-size: 14px; line-height: 1.55; }
.modal-body p { margin-bottom: 10px; }
.modal-body p:last-child { margin-bottom: 0; }

/* Азкары */
/* Переключатель групп: «Азкары» (по времени) ↔ «Дуа» (ситуативные) */
.azkar-group-bar { display: flex; gap: 4px; padding: 4px; margin: 0 auto 14px; width: fit-content;
    background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; }
.azkar-group-btn { appearance: none; border: none; cursor: pointer; background: none;
    padding: 7px 24px; border-radius: 999px;
    font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600;
    color: var(--text-dim); transition: background .15s ease, color .15s ease; }
.azkar-group-btn.active { background: var(--accent-strong); color: #fff; }

.azkar-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.azkar-tabs::-webkit-scrollbar { display: none; }
.azkar-chip {
    flex: 0 0 auto;
    padding: 11px 16px;
    border-radius: 13px;
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text-dim);
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.azkar-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.azkar-note { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin: 0 2px 12px; }
.azkar-hadith {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 2px 10px;
}
.azkar-hadith-text { font-size: 14px; line-height: 1.5; }
.azkar-hadith-src { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.azkar-hadith-grade { color: var(--accent-strong); font-weight: 600; }

/* Закрепление при завершении раздела азкаров (модалка): значок + тёплая строка + хадис */
.azkar-done { text-align: center; }
.azkar-done-badge {
    width: 56px; height: 56px; margin: 4px auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent-soft);
    border: 1px solid var(--accent-border); color: var(--accent-strong);
}
.azkar-done-badge svg { width: 28px; height: 28px; }
.azkar-done-msg { font-size: 15.5px; line-height: 1.5; color: var(--text); margin: 0 0 14px; }
.azkar-done-hadith {
    text-align: left;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 14px;
    padding: 14px 16px;
}
.azkar-done-hadith-tx { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.azkar-done-hadith-src { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--text-dim); }

/* Блок «Зачем читать азкары» — свёрнутый, почитать + послушать о ценности */
.azkar-why { margin: 0 0 14px; border: 1px solid var(--accent-border); border-radius: 16px; background: var(--accent-soft); overflow: hidden; }
.azkar-why-toggle {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 13px 15px; background: none; border: none; cursor: pointer;
    font-size: 15px; font-weight: 700; color: var(--text); text-align: left;
}
.azkar-why-q { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent-strong); }
.azkar-why-q svg { width: 20px; height: 20px; }
.azkar-why-toggle > span:nth-child(2) { flex: 1 1 auto; }
.azkar-why .azkar-info-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-dim); transition: transform .2s ease; }
.azkar-why.open .azkar-info-chev { transform: rotate(180deg); }
.azkar-why-body { padding: 0 15px 14px; }
.azkar-why-text { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.azkar-why-body .azkar-audio { margin: 0 0 12px; }
.azkar-why-body .azkar-hadith { margin-left: 0; margin-right: 0; background: var(--bg); }

/* Слова учёного о ценности: краткий текст + аудио + ссылка на лекцию */
.azkar-scholar { margin-top: 12px; padding: 13px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--accent-border); }
.azkar-scholar-name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent-strong); margin-bottom: 7px; }
.azkar-scholar-name svg { width: 18px; height: 18px; flex: 0 0 auto; }
.azkar-scholar-text { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 11px; }
.azkar-scholar-cap { font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.azkar-scholar-credit { font-size: 11.5px; color: var(--text-dim); opacity: .8; margin-top: 7px; text-align: center; }
.azkar-scholar .azkar-audio { margin: 0 0 10px; }
.azkar-scholar-watch { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 11px 14px; border: none; border-radius: 12px; cursor: pointer;
    background: var(--accent-strong); color: #fff; font-size: 14px; font-weight: 700; }
.azkar-scholar-watch svg { width: 19px; height: 19px; }

/* Переключатель вида: список ↔ карточки */
.azkar-viewbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.azkar-view-toggle { display: inline-flex; gap: 4px; background: var(--row-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 3px; margin-right: auto; }
.azkar-sound-btn {
    width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text-dim); cursor: pointer;
}
.azkar-sound-btn svg { width: 18px; height: 18px; }
.azkar-sound-btn.off { color: var(--text-dim); opacity: .6; }
.azkar-markall {
    display: block; width: 100%; margin: 0 0 14px; padding: 11px; border-radius: 12px;
    border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.azkar-markall:active { opacity: .8; }
.azkar-markall.done { background: var(--row-bg); border-color: var(--card-border); color: var(--done-strong); }
.azkar-markall:disabled { cursor: default; }

/* Слим-шапка азкаров: чипы-разделы + кнопка «Ещё». Весь инвентарь — в меню,
   чтобы экран чтения был чистым (Заход 1: читалка-фокус). */
.azkar-headrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.azkar-headrow .azkar-tabs { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.azkar-more-btn {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text-dim); cursor: pointer;
}
.azkar-more-btn svg { width: 20px; height: 20px; }
.azkar-more-btn:active { background: var(--row-bg); }

/* Меню «Ещё» (внутри модалки): вид/звук/шрифт/настроить/отметить всё/зачем читать */
.azkar-menu { display: flex; flex-direction: column; gap: 2px; }
.azkar-menu-viewrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 14px; border-bottom: 1px solid var(--card-border); margin-bottom: 6px; }
.azkar-menu-vlab { font-size: 15px; font-weight: 600; color: var(--text); }
.azkar-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 6px;
    border: none; background: none; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 500;
    text-align: left; cursor: pointer; border-radius: 10px;
}
.azkar-menu-item:active { background: var(--row-bg); }
.azkar-menu-item svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--accent-strong); }
.azkar-menu-item > span:nth-child(2) { flex: 1 1 auto; }
.azkar-menu-state { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.azkar-menu-item:disabled { opacity: .5; cursor: default; }

/* «Зачем читать» без сворачивания (показ внутри меню «Ещё») */
.azkar-why.bare { border: none; background: none; margin: 0; }
.azkar-why.bare .azkar-why-body { padding: 0; }

/* Заход 2 — экран выбора раздела (чистое меню, как у Sajda) */
.azkar-select-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.azkar-cat-row {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px;
    border-radius: 16px; border: 1px solid var(--card-border); background: var(--card);
    font-family: inherit; cursor: pointer; text-align: left; transition: background .12s;
}
.azkar-cat-row:active { background: var(--row-bg); }
.azkar-cat-ic {
    flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
}
.azkar-cat-ic svg { width: 24px; height: 24px; }
.azkar-cat-title { flex: 1 1 auto; min-width: 0; font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; color: var(--text); }
.azkar-cat-now {
    font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft);
    border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle;
}
.azkar-cat-count { font-size: 14.5px; font-weight: 600; color: var(--text-dim); }
/* Прочитанный сегодня раздел — спокойный оливковый «выполнено» (как у намазов). */
.azkar-cat-read { font-size: 12.5px; font-weight: 700; color: var(--done-strong); white-space: nowrap; }
.azkar-cat-row.read .azkar-cat-ic { background: var(--done-soft); color: var(--done-strong); }
.azkar-cat-row.gated { opacity: .62; }
.azkar-cat-row.gated .azkar-cat-ic { background: var(--track); color: var(--text-dim); }
.azkar-cat-gate {
    font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
    background: var(--track); border-radius: 999px; padding: 3px 9px;
}
/* Гейт-баннер в читалке: сейчас не время раздела (утро/вечер) */
.azkar-gate {
    margin: 4px 0 12px; padding: 11px 14px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--text); text-align: center;
}
.azkar-cat-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-dim); }
.azkar-cat-chev svg { width: 18px; height: 18px; }
.azkar-why-link {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 16px 0 0; padding: 12px 8px;
    border: none; background: none; color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; justify-content: center;
}
.azkar-why-link svg { width: 18px; height: 18px; }

/* Карточка-порог перед утренними/вечерними азкарами — момент решимости:
   ценность ДО усилия (заверённый довод + цена), без давления. */
.az-thr {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 8px 18px 24px; max-width: 420px; margin: 0 auto;
    animation: fadeUp .32s ease both;
}
.az-thr-back {
    position: absolute; top: 0; left: 0;
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text); cursor: pointer;
}
.az-thr-back svg { width: 20px; height: 20px; }
.az-thr-ic {
    width: 64px; height: 64px; margin: 14px 0 12px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent-soft, rgba(174,98,64,.12)); color: var(--accent-strong);
}
.az-thr-ic svg { width: 32px; height: 32px; }
.az-thr-cat { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.az-thr-head {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 24px; line-height: 1.32; color: var(--text); margin: 10px 0 4px; max-width: 340px;
}
.az-thr-proof {
    margin: 14px auto 2px; padding: 13px 16px; max-width: 360px;
    border-radius: 14px; background: var(--card-soft, rgba(127,127,127,.07));
    border-left: 2.5px solid var(--accent-strong);
}
.az-thr-proof-tx { font-size: 14px; line-height: 1.55; color: var(--text); font-style: italic; }
.az-thr-proof-src { font-size: 12px; color: var(--text-dim); margin-top: 7px; }
.az-thr-cost { font-size: 13.5px; font-weight: 600; color: var(--text-dim); margin: 18px 0 4px; }
.az-thr-go {
    width: 100%; max-width: 320px; margin: 12px 0 0; padding: 15px;
    border: none; border-radius: 16px; background: var(--accent-strong); color: #fff;
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 18px rgba(174,98,64,.28);
}
.az-thr-go:active { transform: scale(.985); }
.az-thr-one {
    margin: 12px 0 0; padding: 6px 10px; border: none; background: none;
    color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}

/* Заход 2 — шапка читалки: [‹ назад] · название · [⋮] */
.azkar-reader-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.azkar-back {
    width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text); cursor: pointer;
}
.azkar-back svg { width: 20px; height: 20px; }
.azkar-back:active { background: var(--row-bg); }
.azkar-reader-title { flex: 1 1 auto; min-width: 0; font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; color: var(--text); text-align: center; }

/* Когда читать (утро/вечер) — по словам учёных. Видимая плашка у читалки. */
.azkar-time-note {
    display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 11px 13px;
    border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border);
    font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.azkar-time-note svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent-strong); margin-top: 1px; }

/* «Читай осознанно» (тадаббур) — свёрнутый блок с доводами и трактовками учёных */
.azkar-reflect { margin: 0 0 12px; }
.azkar-reflect-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 11px 13px; border-radius: 12px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.azkar-reflect-chev { color: var(--text-dim); font-size: 12px; }
.azkar-reflect-body { padding: 4px 2px 0; }
.azkar-reflect-intro { margin: 10px 2px 12px; font-size: 13px; line-height: 1.5; color: var(--text); }
.azkar-reflect-item {
    margin: 0 0 10px; padding: 11px 13px; border-radius: 12px;
    background: var(--bg); border: 1px solid var(--card-border);
}
.azkar-reflect-tx { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.azkar-reflect-src { margin-top: 7px; font-size: 11.5px; color: var(--text-dim); }

/* Кнопка-шестерёнка «Настроить раздел» (трансформер) */
.azkar-edit-btn {
    width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text-dim); cursor: pointer;
}
.azkar-edit-btn svg { width: 18px; height: 18px; }
.azkar-edit-btn.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }

/* Все азкары раздела скрыты */
.azkar-allhidden { text-align: center; padding: 28px 16px; color: var(--text-dim); }
.azkar-allhidden p { margin: 0 0 12px; font-size: 14px; }
.azkar-allhidden-btn {
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* Экран настройки раздела (трансформер) */
.azkar-edit-headbox { margin-bottom: 12px; }
.azkar-edit-h { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.azkar-edit-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.azkar-edit-list { display: flex; flex-direction: column; gap: 8px; }
.azkar-edit-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 12px; border: 1px solid var(--card-border); background: var(--card);
}
.azkar-edit-row.is-hidden { opacity: .5; }
.azkar-edit-ord { display: flex; flex-direction: column; gap: 2px; }
.azkar-ord-btn {
    width: 30px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
}
.azkar-ord-btn:disabled { opacity: .3; cursor: default; }
.azkar-edit-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.azkar-edit-rep { font-size: 12px; font-weight: 700; color: var(--accent-strong); margin-left: 4px; white-space: nowrap; }
.azkar-edit-eye {
    width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--card-border); background: var(--row-bg); color: var(--accent-strong); cursor: pointer;
}
.azkar-edit-eye svg { width: 19px; height: 19px; }
.azkar-edit-eye.off { color: var(--text-dim); }
.azkar-edit-foot { display: flex; gap: 10px; margin-top: 16px; }
.azkar-edit-reset {
    flex: 1 1 0; padding: 12px; border-radius: 12px; border: 1px solid var(--card-border);
    background: var(--row-bg); color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.azkar-edit-reset:disabled { opacity: .45; cursor: default; }
.azkar-edit-done {
    flex: 2 1 0; padding: 12px; border-radius: 12px; border: 1px solid var(--accent-border);
    background: var(--accent); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.azkar-view-btn { padding: 6px 14px; border-radius: 999px; border: none; background: none; color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.azkar-view-btn.active { background: var(--accent); color: #fff; }

/* Вид «Список»: карточки в столбик (опция в меню «Ещё») */
.azkar-list { display: flex; flex-direction: column; gap: 10px; }
/* Вид «Карточки»: свайп-колода по одной. Плавность на любом устройстве:
   чёткий пейджинг (snap-stop), изоляция рендера (contain), без захвата
   вертикального скролла страницы (overscroll-behavior). */
.azkar-deck {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
}
.azkar-deck::-webkit-scrollbar { display: none; }
.azkar.slide {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    min-height: 40vh; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
    contain: layout paint; transform: translateZ(0);
}
.azkar-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.azkar-counter { font-size: 13px; font-weight: 700; color: var(--text-dim); min-width: 54px; text-align: center; }
.azkar-arrow {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--card);
    color: var(--text); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-family: inherit;
    transition: transform .08s, opacity .2s;
}
.azkar-arrow:active { transform: scale(0.92); }
.azkar-arrow:disabled { opacity: .3; cursor: default; }
.azkar-now { width: fit-content; max-width: 100%; margin: 0 auto 12px; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; }

/* Тасбих — большой круговой счётчик */
.tasbih-zone {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--card-border);
}
.tasbih-phrase {
    font-family: "Cormorant Garamond", serif;
    font-size: 20px; font-weight: 600; color: var(--text);
    text-align: center; min-height: 26px;
}
.tasbih-tap {
    position: relative; width: 152px; height: 152px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;   /* без задержки/double-tap-zoom — экран не дёргается */
    transition: transform 0.07s;
}
.tasbih-tap:active { transform: scale(0.95); }
.tasbih-ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.tasbih-ring-bg { fill: none; stroke: var(--track); stroke-width: 5.5; }
.tasbih-ring-fill {
    fill: none; stroke: var(--accent); stroke-width: 5.5;
    stroke-linecap: round;
    stroke-dasharray: 264; stroke-dashoffset: 264;
    transition: stroke-dashoffset 0.22s ease;
}
.tasbih-inner {
    position: relative; display: flex; flex-direction: column;
    align-items: center; pointer-events: none;
}
.tasbih-num {
    font-family: "Cormorant Garamond", serif;
    font-size: 58px; font-weight: 600;
    color: var(--accent-strong); line-height: 1;
    font-variant-numeric: tabular-nums;   /* ровная ширина цифр — без микро-сдвигов */
}
.tasbih-of { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-top: 2px; }
.tasbih-tap.done .tasbih-num { color: var(--done-strong); }
.tasbih-tap.done .tasbih-ring-fill { stroke: var(--done); }
.tasbih-dots { display: flex; gap: 8px; align-items: center; }
.tasbih-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--track); transition: background 0.2s, width 0.15s, height 0.15s;
}
.tasbih-dot.done { background: var(--accent); }
.tasbih-reset {
    margin-top: 12px; background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-dim);
    padding: 6px 14px; border-radius: 999px; -webkit-tap-highlight-color: transparent;
}
.tasbih-reset .li-ic { width: 15px; height: 15px; }
.tasbih-reset:active { transform: scale(.96); color: var(--accent-strong); }
.tasbih-dot.cur { width: 10px; height: 10px; background: var(--accent); opacity: 0.65; }

/* Низ карточки: текст слева, компактная плитка-счётчик/отметка справа (как в макете) */
.azkar-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.azkar-foot-info { min-width: 0; }
/* Отметка ПО ЦЕНТРУ — широкая кнопка, удобно тапать (не угловой кружок). */
.azkar-foot-mark { justify-content: center; }
.azkar-markbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 280px; min-height: 50px; padding: 12px 18px;
    border-radius: 15px; border: 1px solid var(--card-border);
    background: var(--row-bg); color: var(--accent-strong);
    font-family: inherit; font-size: 16px; font-weight: 600;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform .08s, background .2s, color .2s, border-color .2s;
}
.azkar-markbtn:active { transform: scale(0.97); }
.azkar-markbtn-ic { font-size: 17px; line-height: 1; }
.azkar-markbtn.done, .azkar.done .azkar-markbtn {
    background: var(--done); border-color: var(--done); color: #fff;
}
/* Вся карточка зикра кликабельна (тап = отметить/посчитать). */
.azkar-taptomark { cursor: pointer; }
.azkar-cap { font-family: "Cormorant Garamond", serif; font-size: 18px; font-weight: 600; line-height: 1.2; }
.azkar-circle {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: var(--row-bg);
    color: var(--accent-strong);
    font-family: "Cormorant Garamond", serif;
    font-size: 22px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    touch-action: manipulation;   /* без задержки/double-tap-zoom — экран не дёргается */
    transition: transform .08s, background .2s, color .2s, border-color .2s;
}
.azkar-circle:active { transform: scale(0.94); }
.azkar-circle.done, .azkar.done .azkar-circle { background: var(--done); border-color: var(--done); color: #fff; }
.azkar-sub { margin-top: 2px; font-size: 12px; color: var(--text-dim); }

/* Аудио-плеер (компонент-заглушка для азкаров и будущих аятов) */
.azkar-audio { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audio-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: transform .08s, opacity .2s;
}
.audio-btn:active { transform: scale(.95); }
.audio-btn:disabled { opacity: .55; cursor: default; border-style: dashed; }
.audio-ic { display: inline-flex; }
.audio-ic svg { width: 11px; height: 11px; display: block; }
.audio-loop {
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--card);
    color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: transform .08s;
}
.audio-loop:active { transform: scale(.95); }
.audio-loop.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Скорость прослушивания (1× → 0,75× → 0,5×), выбор общий и запоминается */
.audio-speed {
    padding: 8px 12px; border-radius: 999px; min-width: 52px;
    border: 1px solid var(--card-border); background: var(--card);
    color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: transform .08s;
}
.audio-speed:active { transform: scale(.95); }
.audio-speed.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.audio-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.audio-chip {
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text-dim); font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.audio-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.audio-chip:active { opacity: 0.8; }

.azkar {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}
.azkar.done { background: var(--done-soft); border-color: var(--done-border); }
.azkar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.azkar-num {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.azkar-title { font-size: 15px; font-weight: 700; color: var(--text-dim); flex: 1 1 auto; }
.azkar-repeat { font-size: 12px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; flex: 0 0 auto; }
.azkar-repeat.tappable { cursor: pointer; }
.azkar-repeat.tappable::after { content: " ⓘ"; font-size: 11px; }
.azkar-arabic {
    direction: rtl; text-align: right;
    font-size: var(--ar-font-size); line-height: 2.0;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
}
.azkar-translit { margin-top: 10px; font-size: var(--tr-font-size); line-height: 1.5; font-style: italic; color: var(--text-dim); }
.azkar-translation { margin-top: 10px; font-size: var(--tr-font-size); line-height: 1.5; }
.azkar-source { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border); font-size: 12px; color: var(--text-dim); }
.azkar-grade { color: var(--accent-strong); font-weight: 600; }
.azkar-info-toggle {
    display: flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--accent-strong);
}
.azkar-info-chev { display: inline-flex; transition: transform .2s; }
.azkar-info-chev svg { width: 14px; height: 14px; }
.azkar-info-toggle.open .azkar-info-chev { transform: rotate(180deg); }
.azkar-info {
    margin-top: 8px; padding: 12px 14px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.azkar-info-note { margin-top: 8px; font-size: 12px; color: var(--text-dim); font-style: italic; }

/* Экран прогресса */
.stats { display: flex; gap: 12px; margin-bottom: 14px; }
.stat { flex: 1; text-align: center; }
.stat-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.stat-row span { font-size: 24px; font-weight: 800; color: var(--accent-strong); }
.stat-row small { font-size: 12px; color: var(--text-dim); }
.stat-name { margin-top: 6px; font-size: 12px; color: var(--text-dim); }

/* Режим «+ сунны и витр» */
/* Карточка сунн раскрывается из тихой утилиты «+ сунны и витр»; даём ей отступ. */
.sunnah-prayers-card { margin-top: 12px; }
.sunnah-prayers-note { margin-top: 10px; font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* Пост (ураза) */
.fasting-card.done { background: var(--accent-soft); border-color: var(--accent-border); }
.fasting-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fasting-count { font-size: 12px; color: var(--text-dim); font-weight: 600; flex-shrink: 0; }
.fasting-reco { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--accent-strong); font-weight: 600; }
.fasting-reco.ramadan { color: #8a6420; }
.fasting-hint-line { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.fasting-dua-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 21px; line-height: 1.9; color: var(--text); margin-bottom: 6px; }

/* «Точка роста» — приглашение к следующему деянию на экране Прогресса */
.growth-card { margin: 14px 0 16px; }
.growth-reason { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 12px; }
.growth-step { display: flex; gap: 11px; align-items: flex-start; }
.growth-step-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--accent-strong); }
.growth-step-ic .li-ic { width: 24px; height: 24px; }
.growth-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.growth-lead { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.growth-why-toggle { display: flex; align-items: center; gap: 5px; margin-top: 12px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.growth-why-toggle.open .azkar-info-chev { transform: rotate(180deg); }
.growth-cta { display: block; width: 100%; margin-top: 14px; padding: 12px; border-radius: 13px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .08s; }
.growth-cta:active { transform: scale(.98); }
.fasting-btn {
    display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 13px;
    border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: transform .08s;
}
.fasting-btn:active { transform: scale(.98); }
.fasting-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Карточка поста кликабельна → детальный экран; аффорданс «провалиться». */
.fasting-card.fasting-tap { cursor: pointer; }
.fasting-detail {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--card-border);
    color: var(--text-dim); font-size: 13px; font-weight: 600;
}
.fasting-detail .fd-chev { font-size: 16px; line-height: 1; opacity: .8; }
.fasting-accept {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 11px 13px;
    border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border);
    color: var(--accent-strong); font-size: 13.5px; font-weight: 600; line-height: 1.4;
    animation: fasting-accept-in .45s var(--ease-out);
}
.fasting-accept-ic { font-size: 18px; flex: none; }
@keyframes fasting-accept-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fasting-info-toggle {
    display: flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--accent-strong);
}
.fasting-info-toggle.open .azkar-info-chev { transform: rotate(180deg); }


/* Заучивание сур */
.mem-head { margin-bottom: 14px; padding: 16px 18px; }
.mem-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mem-head-main { display: flex; flex-direction: column; }
.mem-head-big { font-size: 26px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.mem-head-big small { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.mem-head-cap { margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.mem-help-icon {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text-dim);
    font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.mem-progress { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mem-progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }

/* Тонкий тулбар над списком сур */
.mem-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.mem-toolbar-label { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.mem-sort-pill {
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12.5px;
    font-weight: 700; cursor: pointer; transition: transform .08s;
}
.mem-sort-pill:active { transform: scale(.95); }

/* необязательный счётчик повторов «за чтецом» */
.mem-reps { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.mem-reps-cap { font-size: 13px; color: var(--text-dim); flex: 1; }
.mem-reps-circle {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
    border: 2px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-size: 17px; font-weight: 800;
    cursor: pointer; font-family: inherit; transition: transform .08s;
}
.mem-reps-circle:active { transform: scale(.92); }
.mem-reps-circle.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.mem-reps-target { font-size: 12px; color: var(--text-dim); }

/* строка графика повтора (когда не пора продвигать) */
.mem-sched { flex: 1; align-self: center; font-size: 13px; font-weight: 700; color: var(--accent-strong); display: flex; align-items: center; gap: 5px; }
.mem-sched.done { color: var(--text-dim); }
.mem-sched-ic { width: 13px; height: 13px; flex-shrink: 0; }

/* === Заучить (новый дизайн): герой / статистика / порядок / список === */
.mem-hero { display: block; width: 100%; text-align: left; position: relative; overflow: hidden; margin-bottom: 14px; padding: 22px; border-radius: 22px; border: none; cursor: pointer; color: #FBF5EC; font-family: inherit; background: linear-gradient(135deg, var(--terracotta-500), var(--terracotta-700)); box-shadow: var(--shadow); transition: transform .08s; }
.mem-hero:active { transform: scale(.99); }
.mem-hero-mark { position: absolute; right: -22px; top: -22px; opacity: .16; pointer-events: none; }
.mem-hero-lab { display: block; position: relative; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .8; }
.mem-hero-nm { display: flex; align-items: baseline; gap: 9px; position: relative; font-family: "Cormorant Garamond", serif; font-size: 27px; font-weight: 600; margin: 7px 0 2px; }
.mem-hero-ar { font-size: 17px; opacity: .78; }
.mem-hero-meta { display: block; position: relative; font-size: 12.5px; opacity: .82; margin-bottom: 14px; }
.mem-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; position: relative; }
.mem-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(244, 233, 218, .28); }
.mem-dot.done { background: var(--gold-300); }
.mem-dot.cur { background: #FBF5EC; box-shadow: 0 0 0 3px rgba(244, 233, 218, .25); }
.mem-hero-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(244, 233, 218, .25); overflow: hidden; margin-bottom: 16px; }
.mem-hero-bar i { display: block; height: 100%; background: var(--gold-300); border-radius: 999px; }
.mem-hero-btn { display: inline-flex; align-items: center; gap: 8px; position: relative; background: #FBF5EC; color: var(--accent-strong); border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 14px; }

.mem-stat { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding: 18px 20px; }
.mem-stat-big { font-family: "Cormorant Garamond", serif; font-size: 48px; font-weight: 600; color: var(--accent-strong); line-height: .9; flex: none; }
.mem-stat-x { flex: 1; min-width: 0; }
.mem-stat-l1 { font-size: 16px; font-weight: 600; color: var(--text); }
.mem-stat-l2 { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.mem-help-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

.mem-order-title { font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600; color: var(--text); margin: 18px 2px 8px; text-shadow: var(--on-bg-shadow); }
.mem-order { display: flex; gap: 8px; margin-bottom: 6px; }
.mem-ord { flex: 1; text-align: center; padding: 11px 6px; border-radius: 12px; font-weight: 600; font-size: 12.5px; line-height: 1.25; background: var(--card); border: 1px solid var(--card-border); color: var(--text-dim); cursor: pointer; font-family: inherit; }
.mem-ord.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mem-ord small { display: block; font-size: 10px; font-weight: 500; opacity: .75; margin-top: 2px; }

.mem-slist { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mem-srow { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: var(--card); border: 1px solid var(--card-border); border-radius: 15px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s; }
.mem-srow:active { transform: scale(.99); }
.mem-srow.done { background: var(--done-soft); border-color: var(--done-border); }
.mem-sn { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 14px; flex: none; font-variant-numeric: tabular-nums; }
.mem-sn-empty { background: transparent; }
.mem-srow-i { flex: 1; min-width: 0; }
.mem-srow-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; font-size: 14.5px; color: var(--text); }
.mem-srow-ar { font-family: "Cormorant Garamond", serif; color: var(--text-dim); font-weight: 500; font-size: 14px; }
.mem-srow-s { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.mem-srow-info { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: none; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.mem-pill { flex: 0 0 auto; margin-left: auto; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: none; font-family: inherit; cursor: pointer; white-space: nowrap; }
.mem-pill.done { background: var(--done-soft); color: var(--done-strong); }
.mem-pill.learn { background: var(--accent); color: #fff; }
.mem-pill.new { background: var(--row-bg); color: var(--text-dim); border: 1px solid var(--card-border); }

.mem-review-banner {
    display: block; width: 100%; margin-bottom: 14px; padding: 14px;
    border-radius: 16px; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    transition: transform .08s;
}
.mem-review-banner:active { transform: scale(.99); }

/* Карточка «продолжить с того места» — акцентная, ведёт в текущую суру. */
.mem-continue {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    margin-bottom: 14px; padding: 14px 16px; border-radius: 16px;
    border: 1px solid var(--accent); background: var(--accent-soft);
    color: var(--text); font-family: inherit; cursor: pointer; transition: transform .08s;
}
.mem-continue:active { transform: scale(.99); }
.mem-continue-body { flex: 1; min-width: 0; }
.mem-continue-cap { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); }
.mem-continue-title { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; }
.mem-continue-body .mem-bar { margin-top: 8px; }
.mem-continue-go { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--accent-strong); white-space: nowrap; }

.mem-list { display: flex; flex-direction: column; gap: 10px; }
.mem-sura {
    display: flex; align-items: stretch; width: 100%;
    background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
    box-shadow: var(--shadow); overflow: hidden; transition: transform .08s;
}
.mem-sura.done { background: var(--accent-soft); border-color: var(--accent-border); }
.mem-sura-main {
    flex: 1; min-width: 0; display: block; text-align: left;
    background: none; border: none; padding: 14px 8px 14px 16px;
    font-family: inherit; color: var(--text); cursor: pointer;
}
.mem-sura-main:active { transform: scale(.99); }
.mem-sura-info { min-width: 0; }
.mem-sura-title { font-size: 16px; font-weight: 700; }
.mem-due-dot { font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.mem-sura-sub { margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.mem-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.mem-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
/* Галочка «знаю всю суру» — отдельная зона тапа справа. */
.mem-sura-check {
    flex: 0 0 auto; align-self: center; margin-right: 14px;
    width: 30px; height: 30px; border-radius: 999px;
    border: 2px solid var(--card-border); background: var(--card);
    color: #fff; font-size: 16px; font-weight: 800; line-height: 1;
    cursor: pointer; transition: transform .08s; display: flex; align-items: center; justify-content: center;
}
.mem-sura-check:active { transform: scale(.88); }
.mem-sura-check.on { background: var(--accent); border-color: var(--accent); }

/* ⓘ «О суре» в строке списка — мягкая иконка, своя зона тапа. */
.mem-sura-info-btn {
    flex: 0 0 auto; align-self: center; margin-right: 4px;
    width: 30px; height: 30px; border: none; background: none;
    color: var(--text-dim); font-size: 19px; line-height: 1; cursor: pointer;
    transition: transform .08s;
}
.mem-sura-info-btn:active { transform: scale(.88); }

/* «ⓘ О суре» на экране суры. */
/* Ряд действий суры: «ⓘ О суре» + «Знаю всю суру» */
.mem-sura-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.mem-about-link {
    flex: 0 0 auto; padding: 12px 16px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--card-border); color: var(--accent-strong);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .08s;
}
.mem-about-link:active { transform: scale(.97); }

/* Сноска внизу списка: что в базе + почему без транскрипции. */
.mem-foot-note { margin: 18px 0 4px; font-size: 12px; line-height: 1.55; color: var(--text-dim);
    background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; }

/* Справка о суре: факты, достоинство, сворачиваемый тафсир. */
.about-facts { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; }
.about-virtue {
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
}
.about-virtue p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; }
.about-virtue p:last-of-type { margin-bottom: 0; }
.about-virtue-src { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

.about-audio-cap { font-size: 13px; font-weight: 800; color: var(--accent-strong); margin-bottom: 6px; }
.aplayer {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
    padding: 8px 12px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
}
.aplayer-btn {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; border: none;
    background: var(--accent); color: #fff; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: transform .08s;
}
.aplayer-btn svg { width: 16px; height: 16px; display: block; }
.aplayer-btn:active { transform: scale(.9); }
.aplayer-seek { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.aplayer-time { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.aplayer-rate {
    flex: 0 0 auto; min-width: 42px; padding: 5px 8px; border-radius: 999px;
    border: 1px solid var(--accent-border); background: var(--card);
    color: var(--accent-strong); font-family: inherit; font-size: 12px; font-weight: 800;
    cursor: pointer; font-variant-numeric: tabular-nums; transition: transform .08s;
}
.aplayer-rate:active { transform: scale(.9); }
.aplayer-err { font-size: 13px; color: var(--text-dim); }
.about-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    padding: 13px 14px; margin: 0 0 10px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700;
}
.about-toggle .tg-ic { width: 21px; height: 21px; flex: 0 0 auto; }
.about-toggle .tg-t { flex: 1 1 auto; }
.about-toggle .tg-ch { flex: 0 0 auto; opacity: .6; font-size: 13px; }
.about-toggle:active { transform: scale(.99); opacity: .85; }
.about-tafsir { margin-top: 8px; }
.about-tafsir.hidden { display: none; }
/* Заголовки разделов в карточке-справке о суре. */
.about-h { margin: 14px 0 4px; font-size: 14px; font-weight: 800; color: var(--accent-strong); }
.about-h:first-child { margin-top: 0; }
.about-src { margin-top: 14px; font-size: 12px; color: var(--text-dim); }

/* Кнопка «знаю всю суру наизусть» на экране суры. */
.mem-know-all {
    flex: 1; padding: 12px;
    border-radius: 14px; border: 1px solid var(--card-border); background: var(--card);
    color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: transform .08s;
}
.mem-know-all:active { transform: scale(.99); }
.mem-know-all.on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }

/* Блок чтеца под кнопкой «Слушать суру» — тап открывает справку «кто/почему» */
.mem-reciter {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin: -6px 0 14px; padding: 11px 13px;
    border-radius: 13px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text-dim);
    font-family: inherit; font-size: 13px; font-weight: 600; text-align: left;
    cursor: pointer; transition: transform .08s, border-color .15s;
}
.mem-reciter:active { transform: scale(.99); }
.mem-reciter-tx { flex: 1; }
.mem-reciter-tx b { color: var(--text); font-weight: 800; }
.mem-reciter-info { flex: 0 0 auto; color: var(--accent-strong); font-size: 15px; }
/* Модалка-справка о чтце */
.reciter-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 24px; color: var(--accent-strong); margin-bottom: 10px; }
.reciter-h { font-weight: 800; font-size: 15px; margin: 14px 0 4px; color: var(--text); }
.reciter-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: 13px; color: var(--text-dim); }

.mem-back { background: none; border: none; color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 4px 0 12px; }
.mem-back:active { opacity: .7; }
.mem-sura-head { margin-bottom: 14px; }
.mem-sura-head h2 { font-size: 22px; font-weight: 800; }
.mem-sura-headsub { margin-top: 4px; font-size: 13px; color: var(--text-dim); }
/* ── Смысл суры: мост после заучивания + экран понимания ──────────────── */
.mem-meaning-bridge {
    margin: 4px 0 14px; padding: 16px 18px; border-radius: 18px;
    border: 1px solid var(--accent-border); background: var(--accent-soft);
}
.mem-meaning-bridge .mb-title { font-size: 13px; font-weight: 700; color: var(--accent-strong); margin-bottom: 4px; }
.mem-meaning-bridge .mb-q { font-size: 15.5px; font-weight: 700; color: var(--text); line-height: 1.4; }
.mb-actions { display: flex; gap: 10px; margin-top: 14px; }
.mb-btn {
    flex: 1; padding: 12px 14px; border-radius: 12px; border: none; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    background: var(--accent-strong); color: #fff; -webkit-tap-highlight-color: transparent;
}
.mb-btn:active { transform: scale(.98); }
.mb-btn.ghost { background: transparent; color: var(--accent-strong); border: 1px solid var(--accent-border); }
.mem-meaning-done {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 14px; padding: 10px 14px; border-radius: 14px;
    border: 1px solid var(--card-border); background: var(--card); font-size: 13.5px; color: var(--text-dim);
}
.mem-meaning-done .mmd-ic { color: var(--accent-strong); font-weight: 800; }
.mem-meaning-done .mmd-tx { font-weight: 700; color: var(--text); }
.mem-meaning-done .mmd-link { margin-left: auto; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--accent-strong); text-decoration: underline; padding: 0; }
.mv-eyebrow { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); font-weight: 800; margin-bottom: 2px; }
.mv-epigraph { margin: 6px 0 12px; padding: 14px 16px; border-radius: 16px;
    border: 1px solid var(--card-border); border-left: 3px solid var(--accent-strong); background: var(--card); }
.mv-ep-ar { direction: rtl; text-align: right; font-size: 19px; line-height: 1.9;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; color: var(--text); }
.mv-ep-tr { margin-top: 8px; font-size: 15px; font-style: italic; line-height: 1.45; color: var(--text); }
.mv-ep-ref { margin-top: 6px; font-size: 12px; color: var(--text-dim); }
.mv-intro { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.mv-srcnote { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.mv-tips { margin: 0 0 14px; border: 1px solid var(--card-border); border-radius: 14px; background: var(--card); padding: 4px 14px; }
.mv-tips summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--accent-strong); list-style: none; }
.mv-tips summary::-webkit-details-marker { display: none; }
.mv-tip, .mv-method { padding: 8px 0; border-top: 1px solid var(--card-border); }
.mv-tip b, .mv-method b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.mv-tip span, .mv-method span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.mv-method { border-top: 1px dashed var(--accent-border); }
.mv-playall {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong);
    font-family: inherit; font-size: 14.5px; font-weight: 700; -webkit-tap-highlight-color: transparent;
}
.mv-playall:active { transform: scale(.99); }
.mv-playall.playing { background: var(--accent-strong); color: #fff; }
.mv-playall .mv-pa-ic { display: inline-flex; width: 18px; height: 18px; }
.mv-playall .mv-pa-ic svg { width: 18px; height: 18px; }
.mv-list { display: flex; flex-direction: column; gap: 12px; }
.mv-ayah { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.mv-ayah.playing { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }
.mv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mv-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12.5px; font-weight: 800; }
.mv-ar { direction: rtl; text-align: right; font-size: 20px; line-height: 2;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; color: var(--text-dim); }
.mv-tr { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text); font-weight: 500; }
.mv-acts { display: flex; gap: 8px; }
.mv-play, .mv-play-ar {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 700; -webkit-tap-highlight-color: transparent;
}
.mv-play { border: none; background: var(--accent-strong); color: #fff; }
.mv-play-ar { border: 1px solid var(--card-border); background: transparent; color: var(--text-dim); }
.mv-play .mv-ic, .mv-play-ar .mv-ic { display: inline-flex; }
.mv-play svg, .mv-play-ar svg { width: 14px; height: 14px; }
.mv-play:active, .mv-play-ar:active { transform: scale(.97); }
.mv-done {
    width: 100%; margin: 18px 0 8px; padding: 14px; border-radius: 14px; border: none; cursor: pointer;
    background: var(--accent-strong); color: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}
.mv-done:active { transform: scale(.99); }
/* ── Полноэкранное поздравление за выученную суру ─────────────────────── */
.sura-celebrate {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--tg-safe-top, 0px) + 28px) 28px calc(var(--tg-safe-bottom, 0px) + 28px); text-align: center;
    background: radial-gradient(120% 80% at 50% 30%, rgba(46,158,102,.22), rgba(0,0,0,.62) 70%), rgba(0,0,0,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .32s ease;
}
.sura-celebrate.show { opacity: 1; }
.sura-celebrate .sc-inner {
    position: relative; z-index: 2; max-width: 340px;
    transform: scale(.86); transition: transform .38s cubic-bezier(.2,1.3,.4,1);
}
.sura-celebrate.show .sc-inner { transform: scale(1); }
.sc-emoji { font-size: 76px; line-height: 1; animation: sc-pop .55s ease both; }
@keyframes sc-pop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.sc-title { margin-top: 14px; font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.sc-sub { margin-top: 8px; font-size: 17px; font-weight: 600; color: rgba(255,255,255,.92); }
.sc-dua { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.sc-close {
    margin-top: 24px; padding: 13px 34px; border-radius: 14px; border: none; cursor: pointer;
    background: #fff; color: #14110d; font-family: inherit; font-size: 15.5px; font-weight: 800;
    -webkit-tap-highlight-color: transparent;
}
.sc-close:active { transform: scale(.97); }
.sc-invite {
    margin-top: 18px; padding: 13px 28px; border-radius: 14px; border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sc-invite:active { transform: scale(.97); }

/* Шторка приглашения «Позвать к благому» */
.inv-wrap { display: flex; flex-direction: column; gap: 14px; }
.inv-lead { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.inv-count { text-align: center; font-size: 14px; color: var(--text-dim); }
.inv-count b { font-family: "Prata", serif; font-size: 30px; color: var(--accent-strong); display: block; line-height: 1.1; }
.inv-hadith { padding: 13px 15px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--text); font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.inv-share { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; border: none; background: linear-gradient(140deg, var(--gold-400, #d8a23a), var(--terracotta-500, #ae6240)); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .08s; }
.inv-share:active { transform: scale(.99); }
.inv-copy { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sc-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.sc-stars span {
    position: absolute; color: #ffe9a8; font-size: 18px; opacity: 0;
    animation: sc-twinkle 2.4s ease-in-out infinite;
}
.sc-stars span:nth-child(1){left:12%;top:18%;animation-delay:0s;font-size:14px}
.sc-stars span:nth-child(2){left:82%;top:22%;animation-delay:.2s}
.sc-stars span:nth-child(3){left:24%;top:70%;animation-delay:.5s;font-size:22px}
.sc-stars span:nth-child(4){left:74%;top:66%;animation-delay:.8s}
.sc-stars span:nth-child(5){left:50%;top:12%;animation-delay:.3s;font-size:13px}
.sc-stars span:nth-child(6){left:8%;top:46%;animation-delay:1s}
.sc-stars span:nth-child(7){left:90%;top:48%;animation-delay:.6s;font-size:20px}
.sc-stars span:nth-child(8){left:38%;top:84%;animation-delay:.9s}
.sc-stars span:nth-child(9){left:62%;top:82%;animation-delay:.4s;font-size:13px}
.sc-stars span:nth-child(10){left:18%;top:32%;animation-delay:1.1s}
.sc-stars span:nth-child(11){left:86%;top:80%;animation-delay:.7s;font-size:16px}
.sc-stars span:nth-child(12){left:46%;top:54%;animation-delay:1.3s}
@keyframes sc-twinkle { 0%,100% { opacity: 0; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .sc-emoji, .sc-stars span { animation: none; }
    .sura-celebrate .sc-inner { transition: none; }
}
/* ── Memorize player bar ─────────────────────────────────────────────── */
.me-player-bar {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
    padding: 14px 16px 12px; margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.me-pb-top { display: flex; align-items: center; gap: 10px; }
.me-pb-info { flex: 1; min-width: 0; }
.me-pb-title { display: block; font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-pb-sub { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.me-pb-repeat {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.me-pb-repeat.active { background: var(--accent-soft); border-color: var(--accent-border); }
.me-pb-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.me-pb-speed {
    font-size: 11px; font-weight: 800; color: var(--text-dim);
    border: 1px solid var(--card-border); background: var(--row-bg);
    border-radius: 7px; padding: 5px 8px; cursor: pointer; font-family: inherit;
    transition: background 0.12s;
}
.me-pb-speed:active { opacity: 0.7; }
.me-pb-prev, .me-pb-next {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--row-bg); font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: opacity 0.1s;
    color: var(--text);
}
.me-pb-prev svg, .me-pb-next svg { width: 16px; height: 16px; }
.me-pb-repeat svg { width: 15px; height: 15px; color: var(--text); }
.me-pb-prev:active, .me-pb-next:active { opacity: 0.6; }
.me-pb-play {
    width: 54px; height: 54px; border-radius: 50%; border: none;
    background: var(--accent); color: #fff; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.14); transition: transform 0.1s;
}
.me-pb-play svg { width: 18px; height: 18px; }
.me-pb-play:active { transform: scale(0.93); }
.me-pb-progress { display: flex; align-items: center; gap: 8px; }
.me-pb-time { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 30px; }
.me-pb-time:last-child { text-align: right; }
.me-pb-bar { flex: 1; height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
.me-pb-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 0.4s linear; }

/* ── Memorize repeat sheet ───────────────────────────────────────────── */
.me-rep-sheet { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end; }
.me-rep-sheet.hidden { display: none; }
.me-rep-overlay { position: absolute; inset: 0; background: var(--scrim); }
.me-rep-inner {
    position: relative; background: var(--card);
    /* Не залезать под контролы Telegram/вырез сверху в фуллскрине (лист якорится снизу) */
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; max-height: calc(100vh - var(--tg-safe-top, 0px) - 10px); overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 8px);
}
.me-rep-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 14px; border-bottom: 1px solid var(--card-border); position: sticky; top: 0; background: var(--card);
}
.me-rep-header-title { font-size: 16px; font-weight: 700; color: var(--text); }
.me-rep-reset { font-size: 13px; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.me-rep-apply { font-size: 13px; font-weight: 800; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.me-rep-section { padding: 10px 18px; border-bottom: 1px solid var(--card-border); }
.me-rep-section:last-child { border-bottom: none; }
.me-rep-section-title { font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.me-rep-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.me-rep-row + .me-rep-row { border-top: 1px solid var(--card-border); }
.me-rep-row-label { font-size: 14px; font-weight: 500; color: var(--text); }
.me-rep-row-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.me-rep-stepper { display: flex; align-items: center; gap: 6px; }
.me-rep-stepper-val { font-size: 16px; font-weight: 700; color: var(--text); min-width: 24px; text-align: center; }
.me-rep-inf {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-family: inherit; transition: background 0.12s, color 0.12s;
}
.me-rep-inf.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.me-rep-step {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--card-border);
    background: var(--row-bg); font-size: 20px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--text); font-family: inherit;
}
.me-rep-step:active { opacity: 0.65; }
.me-rep-sel {
    appearance: none; -webkit-appearance: none;
    background: var(--row-bg); border: 1px solid var(--card-border); border-radius: 10px;
    padding: 8px 28px 8px 12px; font-size: 13px; font-weight: 600; color: var(--text); font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;
}
/* Пилюли в листе повторения */
.me-rep-pills { display: flex; gap: 8px; padding: 6px 0 4px; }
.me-rep-pill {
    flex: 1; height: 40px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text); font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.me-rep-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.me-rep-pill:active { opacity: 0.75; }
.me-rep-note { font-size: 12px; color: var(--text-dim); padding: 12px 18px 14px; text-align: center; }

/* подсветка аята, который сейчас звучит */
.mem-ayah.playing { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow); }

.mem-bismillah {
    direction: rtl; text-align: center; font-size: var(--ar-font-size); line-height: 1.8;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    color: var(--text); margin-bottom: 14px;
}

.mem-ayah {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px;
    /* Длинные суры (до ~286 аятов): браузер пропускает отрисовку карточек за
       экраном — открытие большой суры не «замирает». Прокрутка/поиск работают. */
    content-visibility: auto; contain-intrinsic-size: auto 200px;
}
.mem-ayah.done { background: var(--accent-soft); border-color: var(--accent-border); }
.mem-ayah-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mem-num {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.mem-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.mem-badge.new { color: var(--text-dim); background: var(--track); }
.mem-badge.learning { color: var(--accent-strong); background: var(--accent-soft); }
.mem-badge.memorized { color: #fff; background: var(--accent); }
/* Кнопка «слушать с этого аята» (в режиме заучивания) */
.mem-ayah-play {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.mem-ayah-play svg { width: 12px; height: 12px; }
.mem-ayah.playing .mem-ayah-play { background: var(--accent); color: #fff; border-color: var(--accent); }

.mem-arabic {
    direction: rtl; text-align: right; font-size: var(--ar-font-size); line-height: 2.1;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
}
.mem-translit { margin-top: 10px; font-size: var(--tr-font-size); line-height: 1.5; font-style: italic; color: var(--text-dim); }
.mem-translation { margin-top: 8px; font-size: var(--tr-font-size); line-height: 1.5; }
/* самопроверка: текст спрятан, показываем подсказку-«нажми» */
.mem-reveal {
    display: none; text-align: center; color: var(--accent-strong); font-weight: 700;
    font-size: 14px; padding: 18px; border: 1px dashed var(--accent-border);
    border-radius: 12px; cursor: pointer;
}
.mem-ayah.hidden-text .mem-text { display: none; }
.mem-ayah.hidden-text .mem-reveal { display: block; }

.mem-actions { display: flex; gap: 10px; margin-top: 14px; }
.mem-btn {
    flex: 1; padding: 11px; border-radius: 12px; font-family: inherit; font-size: 14px;
    font-weight: 700; cursor: pointer; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); transition: transform .08s;
}
.mem-btn:active { transform: scale(.97); }
.mem-btn.ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.mem-btn.again { background: var(--card); color: var(--text-dim); border-color: var(--card-border); }
.mem-btn.hide { background: var(--card); color: var(--text-dim); border-color: var(--card-border); }
.mem-repeat-row { display: flex; gap: 6px; margin: 10px 0 2px; }
.mem-rep-chip {
    font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text-dim);
    font-family: inherit; transition: background 0.15s, color 0.15s;
}
.mem-rep-chip.active {
    background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong);
}
.mem-rep-chip:active { opacity: 0.7; }
.mem-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mem-toggle-btn {
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.mem-toggle-btn.off { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
.mem-toggle-btn:active { opacity: 0.7; }
.mem-ayah.hidden-text .mem-toggles { display: none; }

/* Пятница — карточка на «Сегодня» */
.friday-card {
    display: block; width: 100%; text-align: left;
    margin: 12px 0 14px; padding: 18px; border-radius: 18px; cursor: pointer;
    font-family: inherit; color: #FBF5EC; border: none;
    /* Оливковая (не терракота): пятница — свой цвет среди карточек «Сегодня». */
    background: linear-gradient(135deg, var(--olive-500), var(--olive-700));
    position: relative; overflow: hidden;
    box-shadow: var(--shadow); transition: transform .08s;
}
.friday-card:active { transform: scale(.99); }

/* ── Полноэкранный счётчик салавата ── */
.sw-screen {
    position: fixed; inset: 0; z-index: 70; overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 14px) 16px calc(28px + var(--tg-safe-bottom));
}
.sw-screen.hidden { display: none; }
.sw-screen-inner {
    max-width: 480px; margin: 0 auto; min-height: 100%;
    display: flex; flex-direction: column; align-items: center;
}
.sw-topbar { width: 100%; display: flex; align-items: center; gap: 10px; }
.sw-close, .sw-sound {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sw-close svg { width: 20px; height: 20px; }
.sw-sound svg { width: 19px; height: 19px; }
.sw-sound.off { color: var(--text-dim); opacity: .7; }
.sw-title {
    flex: 1 1 auto; text-align: center; font-family: "Cormorant Garamond", serif;
    font-size: 21px; font-weight: 600; color: var(--text);
}
.sw-read { width: 100%; text-align: center; margin: 14px 0 4px; }
.sw-read-ar {
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 30px; line-height: 1.7;
    color: var(--text); direction: rtl;
}
.sw-read-tr { font-size: 14px; font-style: italic; color: var(--text-dim); margin-top: 6px; }
.sw-trtoggle {
    margin-top: 8px; background: none; border: none; font-family: inherit;
    font-size: 13px; font-weight: 600; color: var(--accent-strong); cursor: pointer;
}
.sw-read-trans { font-size: 14px; color: var(--text); margin-top: 8px; line-height: 1.5; }
.sw-read-trans.hidden { display: none; }
/* Заметка про осознанность — не гонка за числом (счётчик истигфара). */
.sw-mindful {
    width: 100%;
    max-width: 360px;
    margin: 14px auto 2px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--card-soft, rgba(127,127,127,.08));
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
}
/* Главная кнопка-тап: большой круг, удобно нажимать. */
.sw-bigtap {
    margin: 22px auto 6px; width: min(74vw, 300px); height: min(74vw, 300px);
    border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #fff; border: none; user-select: none;
    background: radial-gradient(circle at 50% 38%, var(--terracotta-500), var(--terracotta-700));
    box-shadow: 0 18px 44px rgba(174, 98, 64, .38), inset 0 2px 10px rgba(255,255,255,.18);
    transition: transform .09s ease;
}
.sw-bigtap:active { transform: scale(.97); }
.sw-bignum {
    font-family: "Cormorant Garamond", serif; font-size: 88px; font-weight: 600;
    line-height: 1; letter-spacing: -.01em;
}
.sw-bignum.bump { animation: jm-bump .22s ease; }
.sw-bighint { font-size: 13px; font-weight: 600; opacity: .82; letter-spacing: .01em; }
.sw-bigtotal { font-size: 14px; font-weight: 600; color: var(--text-dim); min-height: 20px; margin-bottom: 6px; }
.sw-foot {
    width: 100%; margin-top: auto; padding-top: 18px;
    display: flex; flex-direction: column; gap: 9px;
}
.sw-foot-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 16px; border-radius: 14px; font-family: inherit; font-size: 14px; font-weight: 700;
    background: var(--card); border: 1px solid var(--card-border); color: var(--text);
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s;
}
.sw-foot-btn:active { transform: scale(.99); }
.sw-foot-btn .li-ic { width: 17px; height: 17px; }
@keyframes jm-bump { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
/* Кнопка «Считать на весь экран» в хабе салавата. */
.fri-sw-full {
    width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 14px; border-radius: 12px; font-family: inherit; font-size: 13.5px; font-weight: 700;
    background: var(--accent); border: 1px solid var(--accent); color: #fff;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s;
}
.fri-sw-full:active { transform: scale(.99); }
.fri-sw-full .li-ic { width: 16px; height: 16px; }

/* Слим-кнопка «Переслать близкому» под пятничной карточкой (да'ва + виральность). */
.friday-share-home {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: -6px 0 14px; padding: 12px 16px;
    border-radius: 14px; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
    color: var(--terracotta-700); background: var(--accent-soft);
    border: 1px solid var(--accent-border); transition: transform .08s;
}
.friday-share-home .li-ic { width: 17px; height: 17px; }
.friday-share-home:active { transform: scale(.99); }
/* Карточка пака на хабе пятницы — мягко выделяем призыв «Переслать близкому». */
.fri-hub-card.fri-pack { border: 1px solid var(--accent-border); background: var(--accent-soft); }
.frd-mark { position: absolute; right: -16px; bottom: -20px; opacity: .16; pointer-events: none; }
.frd-lab { display: block; position: relative; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: .82; }
.frd-tt { display: block; position: relative; font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; margin: 5px 0 4px; }
.frd-ss { display: block; position: relative; font-size: 12.5px; opacity: .86; line-height: 1.45; max-width: 85%; }
/* Явная тапабельность: пилюля «Открыть →» в углу карточки. */
.frd-cta {
    display: inline-flex; align-items: center; gap: 6px; position: relative;
    margin-top: 13px; padding: 7px 15px; border-radius: 999px;
    background: rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.frd-cta-arr { transition: transform .15s; }
.friday-card:active .frd-cta-arr { transform: translateX(3px); }
/* Будни: компактная строка-отсчёт до пятницы */
.friday-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 12px 0 14px; padding: 13px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-strong); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .08s; }
.friday-hint:active { transform: scale(.99); }
.friday-hint.hidden { display: none; }
.friday-hint-ic { flex: 0 0 auto; font-size: 16px; }
.friday-hint-text { flex: 1; }
.friday-hint-arrow { opacity: .7; flex: 0 0 auto; }

/* Лист «Всё расписание»: неделя + времена + Восход/Тахаджуд + отметки. */
.schedule-sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)); padding: calc(var(--tg-safe-top, 0px) + 16px) 16px calc(40px + var(--tg-safe-bottom)); }
.schedule-sheet.hidden { display: none; }
.schedule-sheet-inner { max-width: 480px; margin: 0 auto; }
.sched-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 14px; }
.sched-title { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; color: var(--text); }
.sched-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-size: 16px; cursor: pointer; flex: 0 0 auto; }
.week-strip { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 16px; -webkit-overflow-scrolling: touch; }
.wk-day { flex: 1 0 auto; min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 8px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-family: inherit; cursor: pointer; transition: transform .08s; }
.wk-day:active { transform: scale(.97); }
.wk-day .wk-dow { font-size: 11px; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.wk-day .wk-num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-day.today { background: var(--accent); border-color: var(--accent); color: #fff; }
.wk-day.today .wk-dow { color: rgba(255,255,255,.85); }
.wk-day.sel:not(.today) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wk-day.future { opacity: .4; cursor: default; }
.sched-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sched-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s; }
.sched-row:active { transform: scale(.99); }
.sched-row.extra { cursor: default; background: transparent; box-shadow: none; border-style: dashed; }
.sched-ic { width: 38px; flex: 0 0 38px; text-align: center; font-size: 18px; opacity: .8; }
.sched-check { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 2px dashed var(--track); display: flex; align-items: center; justify-content: center; font-size: 17px; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.sched-row.done .sched-check { background: var(--done); border-color: var(--done); border-style: solid; color: #fff; }
.sched-name { flex: 1; font-size: 16px; font-weight: 600; }
.sched-ar { color: var(--text-dim); font-weight: 500; font-size: 14px; margin-left: 4px; }
.sched-row.done .sched-name { opacity: .62; }
.sched-time { color: var(--text-dim); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sched-row.locked { opacity: .55; }
.sched-note { margin-top: 16px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
/* «+ сунны и витр» в расписании: тумблер + список сунн за выбранный день. */
.sched-sunnah-toggle { display: block; margin: 12px 2px 6px; }
.sched-sunnah-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Пятница — полноэкранный лист */
.friday-sheet {
    position: fixed; inset: 0; z-index: 60; overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 16px) 16px calc(40px + var(--tg-safe-bottom));
}
.friday-sheet.hidden { display: none; }
.friday-sheet-inner { max-width: 480px; margin: 0 auto; position: relative; }
.friday-close {
    position: absolute; top: 0; right: 0; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    font-size: 16px; cursor: pointer; z-index: 1;
}
.friday-head { padding: 4px 44px 16px 2px; }
/* Кахф-ридер: «Назад» слева (стрелка ← по смыслу слева, и подальше от ✕/⋮ Telegram справа в фуллскрине) */
.kahf-back-btn {
    position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    font-size: 18px; line-height: 1; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.kahf-hero { padding-top: 46px; padding-right: 2px; }
.friday-head h1 { font-size: 26px; font-weight: 800; }
.friday-block { margin-bottom: 14px; }
.friday-h2 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.friday-note { font-size: 15px; line-height: 1.55; }
.friday-hadith {
    margin-top: 12px; padding: 12px 14px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    font-size: 14px; line-height: 1.5;
}
.friday-hadith-src { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.friday-kahf-btn {
    display: block; width: 100%; margin-top: 14px; padding: 13px; border-radius: 14px;
    border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: transform .08s;
}
.friday-kahf-btn:active { transform: scale(.98); }
.friday-kahf-btn.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.friday-streak { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent-strong); }

.friday-week { display: flex; gap: 10px; }
.fw-cell { flex: 1; text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--row-bg); }
.fw-big { display: block; font-size: 24px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.fw-cap { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); line-height: 1.3; }

.friday-intro { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 12px; }
.friday-theme { padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.friday-theme:last-of-type { border-bottom: none; }
.ft-title { font-size: 15px; font-weight: 800; color: var(--accent-strong); }
.ft-hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ft-prompt { font-size: 14px; line-height: 1.5; margin-top: 6px; }
.friday-note-input {
    width: 100%; margin-top: 14px; padding: 12px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text);
    font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical;
}
.friday-note-input:focus { outline: none; border-color: var(--accent-border); }
.friday-entry {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: 14px; border-radius: 16px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    box-shadow: var(--shadow); transition: transform .08s;
}
.friday-entry:active { transform: scale(.99); }

/* Кнопка «Читать и слушать суру» в блоке Аль-Кахф */
.friday-kahf-read {
    display: block; width: 100%; padding: 13px; border-radius: 14px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    transition: transform .08s;
}
.friday-kahf-read:active { transform: scale(.98); }

/* Читалка суры Аль-Кахф */
.kahf-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
/* Аль-Кахф: мягкий свет «из пещеры» над заголовком ридера */
.kahf-hero { position: relative; overflow: hidden; }
.kahf-hero-glow {
    position: absolute; top: 0; left: -20px; right: -20px; height: 250px;
    pointer-events: none; z-index: 0;
    /* Мягкий тёплый свет «из пещеры» вокруг заголовка — БЕЗ жёсткого края сверху.
       Маска гасит свет в полную прозрачность у верхней/нижней кромки, поэтому
       нет видимого «разделения» с фоном листа (одинаково в светлой и тёмной теме). */
    background: radial-gradient(115% 80% at 50% 60%, rgba(244, 201, 140, .20), rgba(244, 201, 140, 0) 70%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 62%, transparent 100%);
}
.kahf-hero h1, .kahf-hero .kahf-sub { position: relative; z-index: 1; }
/* Орнамент-разделитель секций: тонкие линии + полумесяц (+ подпись) */
.orn-div { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 4px 12px; color: var(--accent-strong); }
.orn-div::before, .orn-div::after { content: ""; width: 50px; height: 1px; }
.orn-div::before { background: linear-gradient(90deg, transparent, var(--card-border)); }
.orn-div::after { background: linear-gradient(90deg, var(--card-border), transparent); }
.orn-cr { width: 15px; height: 15px; opacity: .85; }
.orn-lab { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }

/* Линейные иконки в разных местах: размеры/выравнивание под контекст */
.about-audio-cap.with-ic { display: flex; align-items: center; gap: 7px; }
.about-audio-cap .cap-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.kahf-tr-toggle svg { width: 15px; height: 15px; vertical-align: -2px; }
.fri-sw-sh { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.fri-sw-sh .li-ic { width: 18px; height: 18px; }
.fri-sw-sound .li-ic { width: 20px; height: 20px; }
.set-ic { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 7px; }
.fb-thanks-ic .li-ic { width: 30px; height: 30px; }
.fasting-accept-ic .li-ic { width: 22px; height: 22px; }
.sp-ic .li-ic { width: 17px; height: 17px; }
.qibla-center .li-ic { width: 34px; height: 34px; }
.streak-pill-ic .li-ic, #pg-streak .li-ic { width: 20px; height: 20px; }
.friday-hint-ic .li-ic { width: 18px; height: 18px; }
.friday-entry .li-ic { width: 18px; height: 18px; flex: 0 0 auto; }
.radio-bar-eq .li-ic { width: 22px; height: 22px; }
.mem-review-banner { display: inline-flex; align-items: center; gap: 7px; }
.mem-rev-ic svg { width: 16px; height: 16px; display: block; }
.sched-ic .li-ic { width: 18px; height: 18px; }
.kahf-reflections { margin-bottom: 14px; }
.kahf-reflections.hidden { display: none; }
.kahf-reflections .aplayer { margin-bottom: 14px; }
.kahf-rf-note { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.kahf-controls { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 14px; }
.kahf-tr-toggle {
    display: block; margin: 0; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--accent-strong);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.kahf-tr-toggle:active { transform: scale(.97); }
.kahf-bismillah {
    direction: rtl; text-align: center; font-size: var(--ar-font-size); line-height: 1.8;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    color: var(--text); margin-bottom: 12px;
}
.kahf-tr-src { font-size: 12px; color: var(--text-dim); text-align: center; margin-bottom: 14px; }
.kahf-ayah { padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.kahf-ayah:last-child { border-bottom: none; }
.kahf-ar {
    direction: rtl; text-align: right; font-size: var(--ar-font-size); line-height: 2.1;
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
}
.kahf-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; vertical-align: middle;
    background: var(--accent-soft); color: var(--accent-strong);
    font-size: 12px; font-weight: 800; font-family: inherit;
}
.kahf-tr { margin-top: 8px; font-size: var(--tr-font-size); line-height: 1.55; }
.kahf-text.no-tr .kahf-tr,
.kahf-text.no-tr .kahf-tr-src { display: none; }

/* ── Новый пятничный экран ─────────────────────────────────────────────── */
.fri-kahf-hero {
    border-radius: 20px; padding: 22px 20px 18px;
    background: #3d5038; color: #fff;
    margin-bottom: 14px; position: relative; overflow: hidden;
}
.fri-kahf-hero.read { background: #4a6144; }
.fri-kahf-ar {
    direction: rtl; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 30px; line-height: 1.9; text-align: right;
    opacity: 0.95; margin-bottom: 6px;
}
.fri-kahf-title { font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.fri-kahf-hadith { font-size: 14px; line-height: 1.6; opacity: 0.92; margin: 0 0 4px; }
.fri-kahf-src { font-size: 12px; opacity: 0.65; margin: 0 0 14px; }
.fri-kahf-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.fri-open-btn {
    flex: 1; padding: 12px; border-radius: 14px; border: none;
    background: rgba(255,255,255,0.18); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    min-width: 120px;
}
.fri-open-btn:active { opacity: 0.8; }
.fri-mark-btn {
    flex: 1; padding: 12px; border-radius: 14px; border: none;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    min-width: 120px;
}
.fri-mark-btn.done { background: rgba(255,255,255,0.28); color: #fff; }
.fri-mark-btn:active { opacity: 0.8; }
.fri-streak { margin-top: 10px; font-size: 12px; opacity: 0.7; text-align: center; }

.fri-reflect-card { margin-bottom: 14px; }
.fri-section-h { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.fri-reflect-sub { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0 0 16px; }

/* Старт размышления */
.fri-reflect-start {
    display: block; width: 100%; padding: 14px; border-radius: 14px; border: none;
    background: var(--accent); color: #fff; font-family: inherit; font-size: 15px;
    font-weight: 800; cursor: pointer; transition: transform .08s;
}
.fri-reflect-start:active { transform: scale(.98); }
.fri-reflect-start.ghost { background: transparent; color: var(--accent-strong); border: 1px solid var(--accent-border); }
.fri-reflect-tip { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); text-align: center; line-height: 1.4; }
/* «Как это работает» — три шага перед началом размышления. */
.fri-howto { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: var(--card-radius, 16px); background: var(--accent-soft, rgba(120,90,60,.06)); }
.fri-howto-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.fri-howto-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--accent-strong); }
.fri-reflect-done { font-size: 14.5px; font-weight: 700; color: var(--done-strong); margin-bottom: 12px; }
/* Ошибка загрузки списка намазов + повтор (вместо вечного спиннера) */
.prayers-err { list-style: none; padding: 14px 4px; font-size: 13.5px; color: var(--text-dim); text-align: center; }
.prayers-retry, .hero-set-city { margin-top: 10px; display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.prayers-retry:active, .hero-set-city:active { transform: scale(.97); }
.hero-set-city { margin-top: 10px; }

/* Итог разбора: заголовок недели, недельный шаг, оси со сдвигом */
.fri-result-head { margin-bottom: 12px; }
.fri-result-cap { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.fri-result-title { font-family: "Cormorant Garamond", serif; font-size: 25px; font-weight: 600; margin-top: 2px; color: var(--text); }
.fri-payoff { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; padding: 11px 13px; border-radius: 13px; margin-bottom: 12px; }
.fri-payoff.up { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); }
.fri-payoff.down { background: var(--row-bg); color: var(--text-dim); border: 1px solid var(--card-border); }
/* Заверённое напоминание (аят/хадис) — ориентир недели */
.fri-rem-card { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.fri-rem-cap { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 10px; }
.fri-rem-ic { width: 15px; height: 15px; }
.fri-rem-ar { direction: rtl; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 23px; line-height: 1.9; color: var(--text); text-align: center; margin-bottom: 8px; }
.fri-rem-text { font-family: "Cormorant Garamond", serif; font-size: 18px; line-height: 1.5; color: var(--text); }
.fri-rem-src { font-size: 12px; font-weight: 700; color: var(--accent-strong); margin-top: 8px; }
.fri-rem-take { font-size: 13px; line-height: 1.45; color: var(--text-dim); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--accent-border); }
/* Карточка недельного шага — главный акцент */
/* «Итог недели» — авто-разбор из отметок */
.fri-rc-card { margin-bottom: 14px; }
.fri-rc-head { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; }
.fri-rc-sub { font-size: 12px; color: var(--text-dim); margin: 2px 0 12px; }
.fri-rc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--card-border); }
.fri-rc-row:last-of-type { border-bottom: none; }
.fri-rc-ic { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.fri-rc-ic svg { width: 20px; height: 20px; }
.fri-rc-lab { flex: 1; font-size: 14px; }
.fri-rc-val { font-weight: 700; font-size: 14px; }
.fri-rc-best { margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.fri-rc-trend { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13.5px; font-weight: 600; }
.fri-step-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .9; margin-bottom: 6px; }
.fri-step-tx { font-size: 14.5px; line-height: 1.5; }
.fri-rc-donelbl { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fri-rc-donelbl input { width: 18px; height: 18px; accent-color: #FBF5EC; }
/* Кнопка шага на терракотовой карте — светлая, иначе сливается с фоном */
.fri-step-card .growth-cta { background: #FBF5EC; border-color: #FBF5EC; color: var(--terracotta-700); }

.fri-step-card { background: linear-gradient(135deg, var(--terracotta-500), var(--terracotta-700)); color: #FBF5EC; border-radius: 18px; padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow); }
.fri-step-card.done { opacity: .92; }
.fri-step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fri-step-ic { width: 18px; height: 18px; }
.fri-step-cap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.fri-step-title { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; margin-bottom: 5px; }
.fri-step-body { font-size: 14.5px; line-height: 1.5; }
.fri-step-why { font-size: 12.5px; line-height: 1.45; opacity: .85; margin-top: 8px; font-style: italic; }
/* Довод шага: дословная цитата из проверенной базы + источник + степень */
.fri-step-proof { background: rgba(255,255,255,.14); border-left: 3px solid rgba(255,255,255,.55); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.fri-step-proof-in { font-size: 12px; opacity: .85; margin-bottom: 4px; }
.fri-step-proof-tx { font-size: 13.5px; line-height: 1.5; }
.fri-step-proof-src { font-size: 11.5px; opacity: .8; margin-top: 6px; }
.fri-step-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.fri-step-go, .fri-step-done { flex: 1 1 auto; padding: 11px 12px; border-radius: 12px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.fri-step-go:active, .fri-step-done:active { transform: scale(.98); }
.fri-step-go { background: rgba(255,255,255,.92); border: none; color: var(--terracotta-700); }
.fri-step-done { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #FBF5EC; }
.fri-step-card.done .fri-step-done { background: rgba(255,255,255,.95); color: var(--terracotta-700); border-color: transparent; }
/* Оси итога со сдвигом */
.fri-result-axes { margin-bottom: 14px; }
.fri-rax { margin-bottom: 12px; }
.fri-rax-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.fri-rax-name { font-size: 14px; font-weight: 700; color: var(--text); flex: 1 1 auto; }
.fri-rax-status { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; flex: 0 0 auto; }
.fri-rax-status.ok { background: var(--done); color: #fff; }
.fri-rax-status.up { background: var(--accent-soft); color: var(--accent-strong); }
.fri-rax-status.work { background: var(--row-bg); color: var(--text-dim); }
.fri-rax-status.attn { background: #F3D9C9; color: #9A4A26; }
.fri-rax-bg { height: 7px; border-radius: 999px; background: var(--row-bg); overflow: hidden; }
.fri-rax-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--terracotta-500), var(--terracotta-700)); }

/* «Продолжить Аль-Кахф» после сворачивания приложения */
.kahf-resume { display: block; width: 100%; margin: -6px 0 14px; padding: 12px 14px; border-radius: 13px; border: 1.5px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.kahf-resume:active { transform: scale(.985); }

/* Тап-опрос разбора недели (4 вопроса готовыми ответами) */
.fri-sv-card { margin-bottom: 14px; }
.fri-sv-prog { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 12px; }
.fri-sv-dots { display: inline-flex; gap: 5px; }
.fri-sv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--row-bg); }
.fri-sv-dot.on { background: var(--accent); }
.fri-sv-dot.done { background: var(--accent-border); }
.fri-sv-title { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; color: var(--accent-strong); }
.fri-sv-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.fri-sv-q { font-size: 16px; line-height: 1.5; margin: 12px 0 16px; font-weight: 600; }
.fri-sv-opts { display: flex; flex-direction: column; gap: 9px; }
.fri-sv-opt { text-align: left; padding: 14px; border-radius: 13px; border: 1.5px solid var(--card-border); background: var(--row-bg); font-family: inherit; font-size: 14.5px; line-height: 1.4; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s, border-color .15s; }
.fri-sv-opt:active { transform: scale(.985); }
.fri-sv-opt.sel { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.fri-sv-invite { margin-bottom: 14px; }
.fri-sv-inv-t { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; margin-bottom: 5px; }
.fri-sv-inv-d { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 12px; }
.fri-sv-again { display: block; margin: -4px 0 14px auto; border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; padding: 6px 8px; }

/* Картина недели: шкалы по 4 темам */
.fri-ax-card { margin-bottom: 14px; }
.fri-ax-row { margin: 12px 0 0; }
.fri-ax-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.fri-ax-t { font-size: 14px; font-weight: 700; }
.fri-ax-st { font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.fri-ax-soft { color: var(--text-dim); font-weight: 800; }
.fri-ax-bar { height: 7px; border-radius: 999px; background: var(--row-bg); overflow: hidden; }
.fri-ax-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--terracotta-500), var(--terracotta-700)); transition: width .5s var(--ease-out); }
.fri-ax-quote { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); margin-top: 4px; font-style: italic; }
.fri-rem-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 8px; }

/* Динамика по темам — столбики по последним разборам */
.fri-trend-card { margin-bottom: 14px; }
.fri-trend-sub { font-size: 12px; color: var(--text-dim); margin: -2px 0 10px; }
.fri-trend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--card-border); }
.fri-trend-row:last-of-type { border-bottom: none; }
.fri-trend-t { flex: 0 0 92px; font-size: 13.5px; font-weight: 700; }
.fri-trend-pad { width: 14px; flex: 0 0 auto; }
.fri-hist-bars.big { height: 26px; gap: 4px; flex: 1; justify-content: flex-end; }
.fri-hist-bars.big i { width: 8px; }
.fri-hist-bars i.mut { background: var(--row-bg); opacity: 1; }

/* Прошлые недели — динамика разборов */
.fri-hist-card { margin-bottom: 14px; }
.fri-hist-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.fri-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.fri-hist-row:last-of-type { border-bottom: none; }
.fri-hist-d { font-size: 12.5px; font-weight: 700; color: var(--text-dim); flex: 0 0 52px; }
.fri-hist-t { flex: 1; font-size: 13.5px; font-weight: 600; }
.fri-hist-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.fri-hist-bars i { display: block; width: 6px; border-radius: 2px; background: var(--terracotta-500); opacity: .75; }
.fri-rax-quote { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); margin-top: 5px; font-style: italic; }
.fri-delta { font-size: 11.5px; font-weight: 800; flex: 0 0 auto; }
.fri-delta.up { color: var(--done-strong); }
.fri-delta.down { color: #B36B4A; }

/* Пошаговый мастер по осям */
.fri-wiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fri-wiz-count { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .3px; }
.fri-wiz-x { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--row-bg); color: var(--text-dim); font-size: 15px; cursor: pointer; }
.fri-wiz-bar { height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; margin-bottom: 16px; }
.fri-wiz-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .35s var(--ease-out); }
.fri-wiz-axis { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; color: var(--accent-strong); }
.fri-wiz-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.fri-wiz-q { font-size: 16px; line-height: 1.5; margin: 12px 0 18px; font-weight: 600; }
.fri-wiz-recap {
    margin: 12px 0 8px; padding: 10px 12px; border-radius: 11px;
    background: var(--surface-2, rgba(0,0,0,0.04)); font-size: 13.5px;
    line-height: 1.45; color: var(--text-dim); font-style: italic;
}
.fri-wiz-followup-tag {
    display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .02em; color: var(--accent-strong); opacity: .85;
}
.fri-wiz-followup-tag + .fri-wiz-q { margin-top: 6px; }
.fri-wiz-next[disabled] { opacity: .6; pointer-events: none; }
.fri-wiz-nav { display: flex; gap: 10px; margin-top: 14px; }
.fri-wiz-prev, .fri-wiz-next {
    flex: 1; padding: 13px; border-radius: 13px; font-family: inherit; font-size: 15px;
    font-weight: 700; cursor: pointer; transition: transform .08s;
}
.fri-wiz-prev:active, .fri-wiz-next:active { transform: scale(.98); }
.fri-wiz-prev { background: var(--row-bg); color: var(--text-dim); border: 1px solid var(--card-border); flex: 0 0 38%; }
.fri-wiz-next { background: var(--accent); color: #fff; border: none; }
.fri-wiz-analyzing { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0; }
.fri-wiz-analyzing-tx { font-size: 14px; color: var(--accent-strong); font-weight: 600; text-align: center; }
.fri-mic-btn.no-voice { background: var(--row-bg); color: var(--text-dim); }

.fri-mic-btn {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%; border: none;
    background: var(--accent); color: #fff; margin: 0 auto 10px; cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}
.fri-mic-btn svg { width: 28px; height: 28px; }
.fri-mic-btn:active { transform: scale(.93); }
.fri-mic-btn.recording { background: #c0392b; animation: fri-pulse 1s infinite; }
@keyframes fri-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.4); } 50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); } }
.fri-mic-btn.loading { background: var(--accent-strong); animation: fri-mic-think 1.1s ease-in-out infinite; }
@keyframes fri-mic-think { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Анонс в будни: размышление откроется в пятницу (голосом или текстом). */
.fri-reflect-soon {
    text-align: center; padding: 20px 16px; border-radius: 16px;
    background: var(--row-bg); border: 1px solid var(--card-border);
}
.fri-reflect-soon-ic { font-size: 30px; margin-bottom: 8px; }
.fri-reflect-soon-tx { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 0 10px; }
.fri-reflect-soon-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); margin: 0; }

/* Сунны пятницы — список «что и как» */
.fri-sunnahs { padding: 18px; }
.fri-sun-h { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.fri-sun-intro { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; }
.fri-sun-item { padding: 12px 0; border-top: 1px solid var(--card-border); }
.fri-sun-item:first-of-type { border-top: none; padding-top: 4px; }
.fri-sun-t { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.fri-sun-tx { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.fri-sun-src { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--accent-strong); }

/* Салават на Пророка ﷺ — пятничная карточка */
.fri-salawat { padding: 18px; }
.fri-sw-h { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.fri-sw-intro { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; }
.fri-sw-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 23px; line-height: 2; margin: 6px 0 10px; color: var(--text); }
.fri-sw-tr { font-style: italic; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin-bottom: 8px; }
.fri-sw-tx { font-size: 14.5px; line-height: 1.6; color: var(--text); margin-bottom: 8px; }
.fri-sw-src { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.fri-sw-virtue { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.fri-sw-vsrc { display: block; margin-top: 4px; font-weight: 600; color: var(--accent-strong); }
/* Счётчик салавата: большая тапабельная кнопка + две кнопки шеринга */
.fri-sw-counter { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-border); text-align: center; }
.fri-sw-tap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 20px 16px; border-radius: 18px; border: 1px solid var(--accent-border); background: var(--accent-soft); color: var(--text); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: transform .06s; }
.fri-sw-tap:active { transform: scale(.98); }
.fri-sw-tap-n { font-family: "Cormorant Garamond", serif; font-size: 46px; font-weight: 600; line-height: 1; color: var(--accent-strong); transition: transform .12s; }
.fri-sw-tap-n.bump { transform: scale(1.18); }
.fri-sw-tap-lab { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.fri-sw-total { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); min-height: 16px; }
.fri-sw-share { display: flex; gap: 8px; margin-top: 12px; }
.fri-sw-sh { flex: 1 1 0; padding: 11px 10px; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.fri-sw-sh:active { transform: scale(.98); }
.fri-sw-sh.call { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.fri-sw-sh.res { background: var(--row-bg); border: 1px solid var(--card-border); color: var(--text); }
.fri-sw-cnote { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
/* ── Хаб пятницы: чистые карточки-входы ── */
.fri-hub-head { position: relative; z-index: 0; text-align: center; padding: 14px 0 18px; }
/* Силуэт мечети за заголовком хаба — тонкий брендовый акцент */
.fri-hub-head::before {
    content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
    width: 178px; height: 66px; z-index: -1; pointer-events: none; opacity: .09;
    background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 56'%3E%3Cg fill='%23AE6240'%3E%3Cpath d='M70 4c7 5 10 9 10 13 0 4-4 6-10 6s-10-2-10-6c0-4 3-8 10-13z'/%3E%3Cpath d='M44 50V30a12 12 0 0 1 12-12h28a12 12 0 0 1 12 12v20z'/%3E%3Crect x='30' y='18' width='6' height='32' rx='3'/%3E%3Crect x='104' y='18' width='6' height='32' rx='3'/%3E%3Ccircle cx='33' cy='14' r='3'/%3E%3Ccircle cx='107' cy='14' r='3'/%3E%3Cpath d='M64 50V40a6 6 0 0 1 12 0v10z'/%3E%3C/g%3E%3C/svg%3E");
}
.fri-hub-ar { direction: rtl; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 26px; color: var(--accent-strong); }
.fri-hub-title { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; margin-top: 4px; color: var(--text); }
.fri-hub-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.fri-hub-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; margin: 0 0 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.fri-hub-card:active { transform: scale(.99); }
.fri-hub-card.sub { margin-top: -4px; padding: 12px 16px; background: var(--row-bg); }
.fri-hub-card.fri-hub-sw { flex-direction: column; align-items: stretch; gap: 12px; cursor: default; }
/* Иконка-чип в строках хаба: мягкий квадрат + линейная иконка (премиальнее эмодзи) */
.fri-hub-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); }
.li-ic { width: 23px; height: 23px; display: block; }
.fri-hub-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fri-hub-t { font-size: 15.5px; font-weight: 700; color: var(--text); }
.fri-hub-d { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.fri-hub-chev { flex: 0 0 auto; font-size: 18px; color: var(--text-dim); }
.fri-hub-badge { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.fri-hub-badge.done { background: var(--done); color: #fff; }
.fri-hub-note { font-size: 12px; color: var(--text-dim); margin: -4px 0 12px 8px; }
/* Салават на хабе: верхняя строка + мини-счётчик */
.fri-hub-sw-top { display: flex; align-items: center; gap: 13px; }
.fri-sw-sound { flex: 0 0 auto; background: none; border: none; font-size: 18px; cursor: pointer; opacity: .9; }
.fri-sw-sound.off { opacity: .55; }
.fri-sw-read { text-align: center; padding: 4px 0 2px; }
.fri-sw-read-ar { direction: rtl; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: var(--ar-font-size); line-height: 1.9; color: var(--text); }
.fri-sw-read-tr { font-style: italic; font-size: var(--tr-font-size); color: var(--text-dim); margin-top: 4px; }
.fri-sw-trtoggle { background: none; border: none; color: var(--accent-strong); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.fri-sw-read-trans { font-size: var(--tr-font-size); line-height: 1.5; color: var(--text); margin-top: 6px; }
.fri-sw-read-trans.hidden { display: none; }
.fri-sw-mini { display: flex; align-items: center; gap: 14px; }
.fri-sw-circle { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); font-family: "Cormorant Garamond", serif; font-size: 32px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .06s; box-shadow: 0 4px 16px rgba(174, 98, 64, .14); }
.fri-sw-circle:active { transform: scale(.95); }
/* Орнамент-ореол вокруг счётчика: тонкое пунктирное кольцо (исламский акцент) */
.fri-sw-circle::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px dashed var(--accent-border); opacity: .65; pointer-events: none; }
.fri-sw-circle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--accent-border); opacity: .35; pointer-events: none; }
.fri-sw-tap-n.bump { transform: scale(1.18); display: inline-block; }
.fri-sw-mini-info { flex: 1 1 auto; min-width: 0; }
.fri-sw-exp { background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--accent-strong); cursor: pointer; }
.fri-sw-undo { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fri-sw-undo .li-ic { width: 14px; height: 14px; }
.fri-sw-undo:active { transform: scale(.97); color: var(--accent-strong); }
.friday-back { display: inline-flex; align-items: center; background: none; border: none; color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 4px 0; margin-bottom: 10px; -webkit-tap-highlight-color: transparent; }
.kahf-mark { display: block; width: 100%; margin-top: 14px; }
/* Компактная строка-отметка Аль-Кахф (вверху экрана): «Прочитал/Прослушал»,
   после отметки — «✓ + Разбор недели». Одна строка, переносится на узких. */
.kahf-markbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.kmb-lab { font-size: 13.5px; font-weight: 600; color: var(--text); flex: 1 1 auto; }
.kmb-chips { display: flex; gap: 8px; flex: 0 0 auto; }
.kmb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 11px; border: none; background: var(--card); color: var(--accent-strong); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); transition: transform .1s ease; -webkit-tap-highlight-color: transparent; }
.kmb-chip:active { transform: scale(.96); }
.kmb-chip .kmb-ic { width: 16px; height: 16px; }
.kahf-markbar.done { background: var(--done-soft); border-color: var(--done-border); }
.kmb-done { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--done-strong); flex: 1 1 auto; }
.kmb-tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--done-strong); color: #fff; font-size: 12px; }
.kmb-reflect { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 11px; border: none; background: linear-gradient(135deg, var(--gold-400), var(--terracotta-500)); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 5px 14px rgba(174, 98, 64, .3); transition: transform .1s ease; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; }
.kmb-reflect:active { transform: scale(.97); }
.kmb-arr { font-size: 15px; }
.kmb-unmark { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; border: none; background: transparent; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kmb-unmark svg { width: 15px; height: 15px; }
/* Пояснение «следующий шаг» под отметкой (после отметки Аль-Кахф). */
.kahf-next-note { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 6px 2px 2px; padding: 0 2px; }
.kahf-next-note b { color: var(--accent-strong); font-weight: 700; }
/* Заглушка Аль-Кахф вне пятницы: что это и когда откроется. */
.kahf-locked { text-align: center; padding: 22px 18px 8px; }
.kahf-locked-ic { display: inline-flex; color: var(--accent-strong); }
.kahf-locked-ic svg { width: 40px; height: 40px; }
.kahf-locked-h { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); margin: 12px 0 12px; }
.kahf-locked-p { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0 auto 12px; max-width: 440px; }
.kahf-locked-when { display: inline-block; margin-top: 4px; padding: 8px 16px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 700; }
.fri-mic-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--accent-strong); margin-bottom: 12px; }
.fri-reflect-ta {
    width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--card-border);
    background: var(--row-bg); color: var(--text); font-family: inherit; font-size: 14px;
    line-height: 1.5; resize: vertical; box-sizing: border-box; margin-top: 4px;
}
.fri-reflect-ta:focus { outline: none; border-color: var(--accent-border); }
.fri-reflect-save {
    display: block; width: 100%; margin-top: 10px; padding: 13px; border-radius: 14px;
    border: none; background: var(--accent); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.fri-reflect-save:disabled { opacity: 0.6; }
.fri-reflect-save.loading { display: flex; align-items: center; justify-content: center; gap: 9px; opacity: 1; }
.fri-save-spin {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50%; animation: jm-spin .7s linear infinite; flex-shrink: 0;
}

.fri-axes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.fri-axis-card {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 14px 12px; box-shadow: var(--shadow);
}
.fri-axis-title { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.fri-axis-q { font-size: 13px; line-height: 1.5; color: var(--text-dim); }

.fri-history-h { font-size: 18px; font-weight: 800; margin: 8px 0 12px; }
.fri-past-card {
    border-radius: 18px; padding: 18px; margin-bottom: 12px;
    background: #2a2420; color: #f0ede8;
}
.fri-past-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.fri-past-title { font-size: 17px; font-weight: 800; font-family: "Prata", "Cormorant Garamond", serif; }
.fri-past-date { font-size: 13px; opacity: 0.55; }
.fri-past-axis { margin-bottom: 12px; }
.fri-past-axis:last-child { margin-bottom: 0; }
.fri-past-ax-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.fri-past-ax-name { font-size: 14px; font-weight: 700; }
.fri-past-ax-status { font-size: 13px; font-weight: 700; }
.fri-past-ax-status.стабильно { color: #7ab87a; }
.fri-past-ax-status.рост { color: #e8c96b; }
.fri-past-ax-status.работаю { color: #e89e6b; }
.fri-past-ax-status.внимание { color: #e87a6b; }
.fri-past-bar-bg { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); margin-bottom: 6px; }
.fri-past-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(to right, #e8c96b, #7ab87a); }
.fri-past-quote { font-size: 13px; opacity: 0.7; font-style: italic; }

/* ── Напоминание о повторении заучивания ─────────────────────────────── */
.mem-remind-card {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.mem-remind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mem-remind-texts { flex: 1; }
.mem-remind-title { font-size: 15px; font-weight: 700; }
.mem-remind-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.mem-remind-time-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.mem-remind-time-label { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.mem-remind-time-input {
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text);
    font-family: inherit; font-size: 15px; font-weight: 700; border-radius: 10px;
    padding: 8px 12px; cursor: pointer;
}
.mem-remind-tip {
    margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--accent-soft);
    border: 1px solid var(--accent-border); font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.mem-remind-auto {
    display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--accent-border); background: transparent; color: var(--accent-strong);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.mem-remind-auto:active { opacity: 0.7; }

/* Кибла — компас */
.qibla { text-align: center; padding: 8px 0 4px; }
.qibla-dial {
    position: relative; width: 200px; height: 200px; margin: 8px auto 18px;
    border-radius: 50%; border: 2px solid var(--accent-border);
    background: var(--row-bg); transition: transform .15s ease-out;
}
.qibla-mark {
    position: absolute; font-size: 13px; font-weight: 800; color: var(--text-dim);
    transform: translate(-50%, -50%);
}
.qibla-n { top: 12px; left: 50%; color: var(--accent-strong); }
.qibla-s { bottom: 12px; top: auto; left: 50%; transform: translate(-50%, 50%); }
.qibla-e { top: 50%; right: 12px; left: auto; transform: translate(50%, -50%); }
.qibla-w { top: 50%; left: 12px; transform: translate(-50%, -50%); }
/* Стрелка-игла от центра к ободку. transform задаётся из JS:
   translate(-50%,-100%) rotate(bearing) — низ иглы в центре, остриё к кибле. */
.qibla-arrow {
    position: absolute; left: 50%; top: 50%; width: 4px; height: 84px;
    border-radius: 4px; transform-origin: 50% 100%;
    background: linear-gradient(to top, transparent, var(--accent) 30%, var(--accent-strong));
}
/* остриё-наконечник */
.qibla-arrow::before {
    content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-bottom: 11px solid var(--accent-strong);
}
.qibla-center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 22px; line-height: 1;
}
.qibla-deg { font-size: 20px; font-weight: 800; color: var(--accent-strong); }
.qibla-city { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.qibla-live-btn {
    margin-top: 16px; padding: 11px 18px; border-radius: 12px;
    border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.qibla-live-btn:disabled { opacity: .6; cursor: default; }
.qibla-hint { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* Радио — плавающий мини-плеер (над таб-баром) */
.radio-bar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(70px + var(--tg-safe-bottom)); z-index: 40;
    width: calc(100% - 32px); max-width: 448px;
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 10px 14px; border-radius: 16px; cursor: pointer;
    background: var(--card); border: 1px solid var(--accent-border);
    box-shadow: 0 8px 26px rgba(0,0,0,.18); font-family: inherit; color: var(--text);
}
.radio-bar-eq { font-size: 22px; line-height: 1; }
.radio-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-bar-title { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-bar-sub { font-size: 11px; color: var(--text-dim); }
.radio-bar-pause {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(150deg, #b6a48c, #8c7960); color: #fff; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; font-family: inherit;
}
.radio-bar-pause:active { opacity: 0.8; }
.radio-bar-close {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; margin-left: -2px;
}
.radio-bar-close svg { width: 14px; height: 14px; display: block; }
.radio-bar-close:active { opacity: 0.5; }

/* Радио — список чтецов в модалке */
.radio-msg { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 14px; }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 13px 14px; border-radius: 14px; cursor: pointer; font-family: inherit;
    background: var(--row-bg); border: 1px solid var(--card-border); color: var(--text);
    transition: transform .08s;
}
.radio-item:active { transform: scale(.99); }
.radio-item.playing { background: var(--accent-soft); border-color: var(--accent-border); }
.radio-item-ic {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(150deg, #b6a48c, #8c7960); color: #fff; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.radio-item-name { font-size: 15px; font-weight: 700; }
.radio-item-name small { color: var(--text-dim); font-weight: 600; }

/* ===== Радио — полноэкранный премиум-плеер ===== */
.radio-sheet {
    position: fixed; inset: 0; z-index: 60; overflow-y: auto;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 16px) 20px calc(40px + var(--tg-safe-bottom));
}
.radio-sheet-inner { max-width: 440px; margin: 0 auto; }
.radio-nav { display: flex; align-items: center; margin-bottom: 22px; }
.radio-nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 800; }
.radio-nav-gap { width: 44px; flex-shrink: 0; }
.radio-close {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform .08s;
}
.radio-close:active { transform: scale(.92); }
.radio-close svg { width: 18px; height: 18px; display: block; }
.radio-top { display: none; }

/* Обложка: благородный изумрудный градиент + золотой медальон */
.radio-cover {
    position: relative; width: 100%; max-width: 320px; margin: 0 auto;
    aspect-ratio: 1 / 1; border-radius: 30px; overflow: hidden;
    background:
        radial-gradient(120% 90% at 28% 18%, rgba(255,255,255,.16), transparent 55%),
        linear-gradient(155deg, #1f7d5b 0%, #0f5740 52%, #0c3b2d 100%);
    box-shadow: 0 26px 60px rgba(8, 40, 28, .42), inset 0 0 0 1px rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    color: #eccf86;   /* золото для медальона */
}
.radio-emblem { width: 62%; height: 62%; opacity: .92; transition: transform .6s ease; }
.radio-cover.playing .radio-emblem { animation: radio-breathe 6s ease-in-out infinite; }
@keyframes radio-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Эквалайзер внизу обложки — играет, только когда звук идёт (честно для эфира) */
.radio-eq { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: flex-end; gap: 4px; height: 22px; opacity: 0; transition: opacity .3s; }
.radio-cover.playing .radio-eq { opacity: .9; }
.radio-eq i { width: 4px; height: 30%; border-radius: 2px; background: #eccf86; }
.radio-cover.playing .radio-eq i { animation: radio-eq 900ms ease-in-out infinite; }
.radio-eq i:nth-child(1){ animation-delay: 0ms } .radio-eq i:nth-child(2){ animation-delay: 180ms }
.radio-eq i:nth-child(3){ animation-delay: 360ms } .radio-eq i:nth-child(4){ animation-delay: 120ms }
.radio-eq i:nth-child(5){ animation-delay: 300ms }
@keyframes radio-eq { 0%,100% { height: 25%; } 50% { height: 100%; } }

.radio-name { text-align: center; font-size: 24px; font-weight: 800; margin-top: 26px; }
.radio-live { display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.radio-live.on .radio-dot { background: #e0483b; box-shadow: 0 0 0 0 rgba(224,72,59,.5); animation: radio-pulse 1.6s ease-out infinite; }
.radio-live.on { color: var(--accent-strong); }
@keyframes radio-pulse { 0%{box-shadow:0 0 0 0 rgba(224,72,59,.5)} 70%{box-shadow:0 0 0 7px rgba(224,72,59,0)} 100%{box-shadow:0 0 0 0 rgba(224,72,59,0)} }

.radio-controls { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; }
.radio-skip {
    width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: transform .08s;
    box-shadow: var(--shadow);
}
.radio-skip:active { transform: scale(.92); }
.radio-play {
    width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(150deg, #b6a48c, #8c7960);   /* тёплый таупе, как в референсе */
    color: #fff; font-size: 30px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 30px rgba(120, 98, 70, .40); transition: transform .08s;
}
.radio-play:active { transform: scale(.94); }

.radio-choose {
    display: block; margin: 30px auto 12px; padding: 11px 20px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--accent-strong);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.radio-choose:active { transform: scale(.97); }

/* Векторные значки play/pause в радио — ровные, вместо эмодзи */
.radio-play svg { width: 30px; height: 30px; display: block; }
.radio-bar-pause svg { width: 16px; height: 16px; display: block; }
.radio-item-ic svg { width: 13px; height: 13px; display: block; }

/* Кибла — индикатор точности компаса */
.qibla-acc { margin-top: 12px; font-size: 13px; font-weight: 700; }
.qibla-acc.high { color: var(--accent-strong); }
.qibla-acc.mid { color: #c8902a; }
.qibla-acc.low { color: #e0483b; }

/* Тренировка заучивания — второй ряд (пауза/темп) */
.mem-drill-row select { max-width: 130px; }

/* Подстройка времени намаза */
.ta-hint { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-bottom: 14px; }
.ta-list { display: flex; flex-direction: column; gap: 8px; }
.ta-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 14px; background: var(--row-bg); border: 1px solid var(--card-border);
}
.ta-name { font-size: 15px; font-weight: 700; }
.ta-ctl { display: flex; align-items: center; gap: 12px; }
.ta-val { min-width: 64px; text-align: center; font-size: 14px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.ta-btn {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); font-size: 20px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .08s;
}
.ta-btn:active { transform: scale(.9); }
.ta-reset { display: block; width: 100%; margin-top: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .08s; }
.ta-reset:active { transform: scale(.99); }
.ta-reset[hidden] { display: none; }

/* Намаз, чьё время ещё не наступило — заблокирован для отметки */
/* Намаз, чьё время ещё не наступило: НЕ «призрак» (раньше opacity .42 — выглядело
   сломанным/невидимым), а спокойно-неактивный. Название и время читаемы, сигнал
   «ещё не время» — только на чекбоксе (бледный пунктир). */
.prayer.locked { cursor: default; }
.prayer.locked:active { background: none; transform: none; }
.prayer.locked .name { opacity: .82; }
.prayer.locked .prayer-time { opacity: .9; }
.prayer.locked .check { opacity: .38; border-style: dashed; }

/* Мини-тост (всплывает сверху, напр. «время ещё не наступило») */
.mini-toast {
    position: fixed; z-index: 210; left: 50%; top: calc(var(--tg-safe-top, 0px) + 14px);
    transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
    max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 14px;
    background: var(--card); border: 1px solid var(--card-border); color: var(--text);
    font-size: 14px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.22);
    transition: opacity .25s ease, transform .25s ease;
}
.mini-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Тост с действием «Вернуть» (обратимые удаления) — кликабельный, поэтому
   pointer-events включаем и добавляем кнопку. */
.undo-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 14px; padding-right: 8px; }
.undo-toast-btn { border: none; background: transparent; color: var(--accent-strong); font-weight: 800;
    font-size: 14px; padding: 6px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.undo-toast-btn:active { background: var(--accent-soft); }

/* ===================== Подтверждение действия (action sheet, Apple HIG) ===================== */
.confirm-overlay { position: fixed; inset: 0; z-index: 760; display: flex; align-items: flex-end;
    justify-content: center; background: rgba(0,0,0,0); transition: background .24s ease;
    padding: 0 10px calc(10px + var(--tg-safe-bottom)); }
.confirm-overlay.show { background: var(--scrim); }
.confirm-sheet { width: 100%; max-width: 440px; transform: translateY(18px); opacity: 0;
    transition: transform .28s var(--ease-out), opacity .22s ease; }
.confirm-overlay.show .confirm-sheet { transform: translateY(0); opacity: 1; }
.confirm-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 18px;
    padding: 18px 18px 14px; text-align: center; box-shadow: 0 14px 44px rgba(0,0,0,.32); margin-bottom: 8px; }
.confirm-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.confirm-msg { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 16px; }
.confirm-do { width: 100%; padding: 13px; border: none; border-radius: 13px; font-size: 15px;
    font-weight: 800; color: #fff; background: var(--accent-strong); cursor: pointer; }
.confirm-do.destructive { background: #E0533B; }
.confirm-do:active { filter: brightness(.95); }
.confirm-cancel { width: 100%; padding: 13px; border: 1px solid var(--card-border); border-radius: 13px;
    font-size: 15px; font-weight: 800; color: var(--text); background: var(--card); cursor: pointer; }
.confirm-cancel:active { filter: brightness(.97); }

/* ===================== Раздел «Сердце» ===================== */
.heart-hero { position: relative; overflow: hidden; margin-bottom: 16px; padding: 22px 22px 20px; border-radius: 22px;
    background: linear-gradient(150deg, var(--olive-500), var(--olive-700)); color: #FBF5EC; }
.heart-hero-mark { position: absolute; right: -18px; bottom: -22px; opacity: .15; pointer-events: none; }
.heart-hero-lab { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; opacity: .72; }
.heart-hero-text { position: relative; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 21px; line-height: 1.4; margin-top: 12px; }
.heart-hero-src { font-size: 12px; opacity: .8; margin-top: 12px; font-weight: 600; }
.heart-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-bottom: 12px;
    padding: 16px; border-radius: 18px; border: 1px solid var(--card-border); background: var(--card);
    box-shadow: var(--shadow); cursor: pointer; font-family: inherit; transition: transform .08s; }
.heart-row:active { transform: scale(.99); }
.heart-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.heart-ic svg { width: 24px; height: 24px; }
.heart-ic.ic-warm { background: var(--accent-soft); color: var(--accent-strong); }
.heart-ic.ic-soft { background: var(--row-bg, rgba(0,0,0,.04)); color: var(--olive-700); }
.heart-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.heart-tx b { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; color: var(--text); }
.heart-tx small { font-size: 13px; color: var(--text-dim); line-height: 1.35; }
.heart-arr { color: var(--text-dim); font-size: 22px; flex: 0 0 auto; }
.subview-back { background: none; border: none; color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 2px 2px 14px; }
.soon-note { font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* Подразделы «Сердца»: темы из проверенной базы (деяния/болезни/васвасы) */
.heart-topics { display: flex; flex-direction: column; gap: 14px; }
.heart-topic { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--row-bg); }
.heart-topic-t { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.heart-topic-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 22px; line-height: 1.9; margin: 6px 0; }
.heart-topic-tr { font-style: italic; opacity: .9; margin: 4px 0; font-size: 13.5px; }
.heart-topic-tx { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 6px 0; }
.heart-topic-meta { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin-top: 6px; }
.heart-topic-src { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-top: 8px; }
.heart-topic-grade { color: var(--accent-strong); }
/* Пособие: размышление (тон JUMMA) + мягкий шаг «как применить» */
.heart-topic-lesson { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--card-border); }
.heart-topic-apply { font-size: 13.5px; line-height: 1.55; color: var(--text); margin-top: 10px;
    padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.hta-lab { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--accent-strong); margin-bottom: 3px; }

/* Карточки-истории «Сердца»: одна суть на экран; листание ‹/›/свайп; «Разобрать» */
.hd-overlay { position: fixed; inset: 0; z-index: 650; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 12px) 18px calc(var(--tg-safe-bottom, 0px) + 16px);
    opacity: 0; transition: opacity .22s ease; }
.hd-overlay.show { opacity: 1; }
.hd-top { display: flex; align-items: center; gap: 12px; }
.hd-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 15px; cursor: pointer; flex: 0 0 auto; }
.hd-title { flex: 1 1 auto; text-align: center; font-weight: 800; font-size: 16px; color: var(--text); }
.hd-count { flex: 0 0 auto; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.hd-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.hd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--card-border); transition: background .2s, transform .2s; }
.hd-dot.on { background: var(--accent-strong); transform: scale(1.25); }
.hd-stage { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column;
    justify-content: safe center; -webkit-overflow-scrolling: touch; }
.hd-card { width: 100%; max-width: 460px; margin: 0 auto; text-align: center; padding: 14px 4px; }
.hd-theme { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--accent-strong); margin-bottom: 18px; padding: 5px 12px;
    border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-soft); }
.hd-essence { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.34; font-weight: 600; color: var(--text); }
.hd-expand { margin-top: 26px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hd-chev { font-size: 11px; }
.hd-detail { margin-top: 22px; text-align: left; }
.hd-detail.hidden { display: none; }
/* Погружение-преамбула (первая карточка «Наставлений») */
.hd-card-intro { max-width: 480px; }
.hd-intro-tx { font-size: 17px; line-height: 1.62; color: var(--text); text-align: left; }
.hd-intro-hint { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--accent-strong); text-align: center; }
/* Разбор: «погружение» + блоки с подзаголовками (хадис / смысл / подкрепление) */
.hd-immerse { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 14px;
    padding-left: 12px; border-left: 3px solid var(--accent-border); font-style: italic; }
.hd-block { margin-bottom: 14px; }
.hd-block-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
    color: var(--accent-strong); margin-bottom: 7px; }
.hd-reinforce { padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.hd-share { display: block; width: 100%; margin-top: 16px; padding: 13px; border-radius: 14px; border: none;
    background: var(--accent-strong); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.hd-nav { display: flex; gap: 12px; margin-top: 12px; }
.hd-nav button { flex: 1 1 0; padding: 13px; border-radius: 14px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.hd-nav button:disabled { opacity: .35; }
.hd-next:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }

/* Работа над сердцем: выбор программы (chooser) + сама программа (маршрут) */
.hpc-overlay, .hp-overlay { position: fixed; inset: 0; z-index: 650; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 12px) 18px calc(var(--tg-safe-bottom, 0px) + 16px);
    opacity: 0; transition: opacity .22s ease; }
.hpc-overlay.show, .hp-overlay.show { opacity: 1; }
.hp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.hp-back { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.hp-title { flex: 1 1 auto; font-weight: 800; font-size: 18px; color: var(--text); }
.hp-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent-strong);
    background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; padding: 4px 10px; }
.hp-tag-sp { flex: 0 0 auto; width: 1px; }
.hpc-sub { font-size: 14px; color: var(--text-dim); line-height: 1.5; margin: 4px 2px 16px; }
.hpc-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hpc-card { text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 16px;
    border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); cursor: pointer; }
.hpc-name { font-size: 17px; font-weight: 800; color: var(--text); }
.hpc-ess { font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.hpc-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.hpc-sch { font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft);
    border: 1px solid var(--accent-border); border-radius: 999px; padding: 3px 9px; }
.hpc-progress { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.hp-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.hp-intro { font-size: 15px; line-height: 1.6; color: var(--text); margin: 6px 2px 16px; }
.hp-sec { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.hp-h { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; color: var(--accent-strong); margin-bottom: 10px; }
.hp-tx { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.hp-src { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-top: 8px; }
.hp-prog { height: 8px; border-radius: 999px; background: var(--row-bg); overflow: hidden; }
.hp-prog > i { display: block; height: 100%; background: var(--accent-strong); border-radius: 999px; transition: width .3s ease; }
.hp-prog-lab { font-size: 12.5px; color: var(--text-dim); font-weight: 600; margin: 7px 0 14px; }
.hp-step { display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--card-border);
    background: var(--row-bg); margin-bottom: 10px; transition: border-color .2s, background .2s, opacity .2s; }
.hp-step.now { border-color: var(--accent-border); background: var(--accent-soft); }
.hp-step.done { opacity: .6; }
.hp-check { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--accent-border);
    background: transparent; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hp-step.done .hp-check { background: var(--accent-strong); border-color: var(--accent-strong); }
.hp-step-body { flex: 1 1 auto; min-width: 0; }
.hp-now-lab { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--accent-strong); margin-bottom: 4px; }
.hp-step-t { font-size: 15px; font-weight: 700; color: var(--text); }
.hp-step-s { font-size: 14px; line-height: 1.5; color: var(--text); margin-top: 3px; }
.hp-step-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin-top: 6px; font-style: italic; }
.hp-dua .heart-topic-ar { font-size: 22px; }
.hp-share { display: block; width: 100%; margin-top: 14px; padding: 12px; border-radius: 13px; border: none;
    background: var(--accent-strong); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.zn-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); }
.zn-grade { color: var(--text-dim); }
.zn-title { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; margin-top: 8px; }
.zn-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 24px; line-height: 1.9; margin-top: 10px; }
.zn-tr { font-style: italic; opacity: .9; margin-top: 8px; }
.zn-tx { font-family: "Cormorant Garamond", serif; font-size: 20px; line-height: 1.4; margin-top: 10px; }
.zn-meta { font-size: 13px; color: var(--text-dim); margin-top: 10px; line-height: 1.45; }
.zn-src { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-top: 10px; }
.zn-share {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    padding: 12px 18px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--accent-strong); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700;
    -webkit-tap-highlight-color: transparent; transition: transform .08s, opacity .15s;
}
.zn-share:active { transform: scale(.97); }
.zn-share svg { flex: 0 0 auto; }
/* Превью-лист шеринга карточки */
.sc-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 0; color: var(--text-dim); font-size: 14px; }
.sc-wrap { display: flex; flex-direction: column; align-items: center; }
.sc-img {
    width: 100%; max-width: 232px; border-radius: 16px; display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22); aspect-ratio: 9 / 16; object-fit: cover;
    max-height: 60vh;
    animation: jm-modal-in .35s var(--ease-out, ease) both;
}
.sc-verse {
    margin-top: 18px; padding-top: 16px; width: 100%;
    border-top: 1px solid var(--accent-border); text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 18px; line-height: 1.4; font-style: italic; color: var(--text);
}
.sc-verse-src {
    display: inline-block; margin-top: 7px; font-style: normal; font-size: 11.5px;
    font-weight: 700; color: var(--accent-strong); letter-spacing: .03em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
    background: var(--accent-soft); border: 1px solid var(--accent-border);
}
.sc-note { margin-top: 12px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
/* переключатель стиля карточки («Ночь»/«Золото») */
.sc-styles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.sc-style {
    padding: 7px 16px; border-radius: 99px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-family: inherit;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.sc-style.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sc-style-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); text-align: center; }
.sc-actions { display: flex; gap: 10px; width: 100%; margin-top: 18px; }
.sc-share, .sc-save {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700;
    -webkit-tap-highlight-color: transparent; transition: transform .08s, opacity .15s; border: none;
}
.sc-share { background: var(--accent-strong); color: #fff; flex: 1.6; }
.sc-share[disabled] { opacity: .7; }
.sc-save { background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent-border); }
.sc-share:active, .sc-save:active { transform: scale(.97); }
.jm-spinner.sm { width: 16px; height: 16px; border-width: 2px; }
/* Три варианта шеринга: В сторис · Отправить · Скачать */
.sc-actions-3 { gap: 8px; }
.sc-act { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card);
    color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.sc-act:active { transform: scale(.96); }
.sc-act svg { width: 20px; height: 20px; }
.sc-act-main { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.sc-retry { display: block; margin: 14px auto 0; padding: 11px 24px; border-radius: 12px; border: none;
    background: var(--accent-strong); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }

/* ===================== Экран «Прогресс» ===================== */
.pg-h { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); margin: 24px 2px 12px; text-shadow: var(--on-bg-shadow); }
.pg-sub { margin: -6px 2px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.pg-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 22px;
    background: linear-gradient(135deg, var(--terracotta-500), var(--terracotta-700)); color: #FBF5EC; }
.pg-hero-mark { position: absolute; right: -16px; top: -20px; opacity: .16; pointer-events: none; }
.pg-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pg-ring-in { width: 76px; height: 76px; border-radius: 50%; background: var(--terracotta-700); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pg-ring-in b { font-family: "Prata", serif; font-size: 22px; line-height: 1; }
.pg-ring-in small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .95; margin-top: 4px; }
.pg-hero-main { position: relative; z-index: 1; }
.pg-hero-big { font-family: "Prata", serif; font-size: 40px; line-height: 1; }
.pg-hero-sub { font-size: 14px; opacity: 1; margin-top: 6px; line-height: 1.3; }
.pg-hero-rec { font-size: 13px; opacity: .95; margin-top: 8px; }
.ach-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); text-align: center; }
.ach-ic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--track); color: var(--text-dim); }
.ach-ic svg { width: 22px; height: 22px; }
.ach.on .ach-ic { background: var(--accent); color: #fff; }
.ach-lab { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.ach:not(.on) { opacity: .78; }
/* Закрытые достижения: прогресс к цели (полоска + N/цель) или подсказка «как открыть». */
.ach-prog { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; margin-top: 1px; }
.ach-prog-bar { width: 78%; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.ach-prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ach-prog-tx { font-size: 10px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ach-hint { font-size: 10px; line-height: 1.3; color: var(--text-dim); }

/* «Копилка деяний» — премиальные карточки-счётчики (только растут). Иконка в
   круглом бейдже с брендовым градиентом, крупное число шрифтом Prata. Гибкая
   сетка по 3 в ряд; неполный нижний ряд центрируется (аккуратнее, чем grid). */
.tally-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tally-card {
    flex: 0 0 calc((100% - 20px) / 3);
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 18px 8px 15px; border-radius: 18px;
    background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow);
    text-align: center; cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.tally-card:active { transform: scale(.97); }
.tally-ic {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(140deg, var(--gold-400), var(--terracotta-500));
    box-shadow: 0 5px 14px rgba(174, 98, 64, .30);
}
.tally-ic svg { width: 20px; height: 20px; }
.tally-num { font-family: "Prata", serif; font-weight: 400; font-size: 27px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.tally-lab { font-size: 11px; font-weight: 600; color: var(--text-dim); line-height: 1.2; letter-spacing: .01em; }
/* Отдельный экран «Пост» (openFastingScreen): статистика + когда держать пост. */
.fast-overlay { position: fixed; inset: 0; z-index: 660; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 12px) 16px calc(var(--tg-safe-bottom, 0px) + 16px);
    opacity: 0; transition: opacity .22s ease; }
.fast-overlay.show { opacity: 1; }
.fast-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fast-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); cursor: pointer; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; }
.fast-close svg { width: 19px; height: 19px; }
.fast-ttl { flex: 1 1 auto; text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 22px; color: var(--text); }
.fast-top-sp { width: 38px; flex: 0 0 auto; }
.fast-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 2px 4px;
    display: flex; flex-direction: column; gap: 16px; max-width: 480px; width: 100%; margin: 0 auto; }
.fast-stats-hero { display: flex; gap: 10px; }
.fast-sc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 18px 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.fast-sc b { font-family: "Prata", serif; font-weight: 400; font-size: 26px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.fast-sc span { font-size: 11px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.fast-sec-h { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; color: var(--text); margin: 2px 2px -4px; }

/* Экран «Намазы» (openPrayerScreen) — переиспользует .fast-overlay/.fast-stats-hero */
.pr-hero { text-align: center; padding: 4px 0 0; }
.pr-hero-big { font-family: "Prata", serif; font-size: 58px; line-height: 1; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.pr-hero-sub { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 6px; }
.pr-hero-rec { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.pr-today { padding: 15px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.pr-today-row { display: flex; justify-content: space-between; align-items: baseline; }
.pr-today-lab { font-weight: 700; color: var(--text); }
.pr-today-val { font-family: "Prata", serif; font-size: 18px; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.pr-today-dots { display: flex; gap: 8px; margin: 11px 0 13px; }
.pr-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--track); }
.pr-dot.on { background: var(--accent); }
.pr-cta { width: 100%; padding: 12px; border-radius: 12px; border: none; background: var(--accent-soft); color: var(--accent-strong); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .08s; }
.pr-cta:active { transform: scale(.99); }
.pr-month-sub { font-size: 12.5px; color: var(--text-dim); margin: -8px 2px 0; }
.fast-up-list { display: flex; flex-direction: column; gap: 10px; }
.fast-up-card { display: flex; gap: 12px; padding: 15px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.fast-up-card.special { border-color: var(--accent-border); background: var(--accent-soft); }
.fast-up-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(140deg, var(--gold-400), var(--terracotta-500)); box-shadow: 0 5px 14px rgba(174, 98, 64, .30); }
.fast-up-ic svg { width: 20px; height: 20px; }
.fast-up-main { flex: 1 1 auto; min-width: 0; }
.fast-up-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fast-up-name { font-size: 15.5px; font-weight: 700; color: var(--text); }
.fast-up-when { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); }
.fast-up-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }
.fast-up-note { font-size: 12.5px; line-height: 1.5; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--card-border); }
.fast-up-src { color: var(--text-dim); }
.fast-foot-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); text-align: center; margin: 4px 6px 0; }
/* Вход в методичку «Как держать пост» (на экране Пост) */
.fast-guide-btn {
    width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 14px 15px; border-radius: 16px; background: var(--card);
    border: 1px solid var(--card-border); box-shadow: var(--shadow);
    color: var(--text); font-family: inherit; font-size: 15px; cursor: pointer;
}
.fast-guide-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent-strong); }
.fast-guide-lbl { flex: 1; font-weight: 600; }
.fast-guide-draft {
    font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
    border-radius: 6px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.fast-guide-btn .fd-chev { color: var(--text-dim); font-size: 20px; flex: none; }
/* Экран методички (переиспользует .fast-overlay/.fast-top/.fast-body) */
.fg-draft-banner {
    font-size: 13px; line-height: 1.5; color: var(--accent-strong);
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    border-radius: 14px; padding: 12px 14px;
}
.fg-intro { font-size: 14.5px; line-height: 1.55; color: var(--text-dim); margin: 0; }
.fg-sec { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--shadow); }
.fg-sec-t { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; color: var(--text); line-height: 1.15; }
.fg-body { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 8px 0 0; }
.fg-hadith {
    font-size: 13.5px; line-height: 1.55; color: var(--text-dim); margin-top: 10px;
    padding-left: 11px; border-left: 2px solid var(--accent-border);
}
.fg-hadith.unverified { border-left-color: #d8a23a; }
.fg-src { color: var(--accent-strong); font-weight: 600; }
.fg-unv {
    display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
    color: #8a6400; background: rgba(216, 162, 58, .18); border-radius: 5px; padding: 1px 6px;
}
/* Блок «Сегодня» (если сегодня — день сунна-поста): объяснение + история + хадис. */
.fast-today { padding: 18px; border-radius: 18px; background: var(--accent-soft); border: 1px solid var(--accent-border); }
.fast-today-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); }
.fast-today-name { font-family: "Cormorant Garamond", serif; font-size: 27px; font-weight: 600; color: var(--text); margin-top: 2px; line-height: 1.1; }
.fast-today-hijri { font-size: 12.5px; font-weight: 600; color: var(--accent-strong); margin-top: 5px; }
.fast-today-explain { font-size: 14px; line-height: 1.55; color: var(--text); margin: 13px 0 0; }
.fast-today-more { margin-top: 11px; background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--accent-strong); cursor: pointer; }
.fast-today-story { margin-top: 8px; }
.fast-today-story p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 9px; }
.fast-today-story p:last-child { margin-bottom: 0; }
.fast-today-hadith { font-size: 13px; line-height: 1.55; color: var(--text); margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--accent-border); }
.fast-up-hijri { font-size: 12px; font-weight: 600; color: var(--accent-strong); margin-top: 3px; }
.fast-up-explain { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin-top: 7px; }
.garden-feeds { margin: 8px 0 0; padding: 0 16px 16px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; text-align: center; }
.foursides-card { padding: 18px; }
.fs-empty { display: flex; align-items: center; gap: 16px; }
.fs-diamond { width: 76px; height: 76px; flex: 0 0 auto; fill: none; stroke: var(--accent-border); stroke-width: 2; opacity: .7; }
.fs-empty-tx b { display: block; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.fs-empty-tx span { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.month-card { padding: 18px; }
.month-label { font-family: "Cormorant Garamond", serif; font-size: 21px; font-weight: 600; letter-spacing: .01em; color: var(--text); margin-bottom: 14px; }
.month-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.month-wd span { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mday { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.mday.empty { visibility: hidden; }
.mday-pie { position: absolute; inset: 0; border-radius: 50%; background: var(--track); }
.mday-n { position: relative; z-index: 1; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.mday.fut .mday-pie { background: transparent; border: 1px dashed var(--card-border); }
.mday.fut .mday-n { color: var(--text-dim); opacity: .6; font-weight: 600; }
.mday.today { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
.month-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--card-border); font-size: 13px; line-height: 1.5; color: var(--text-dim); text-align: center; }
.month-foot b { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
/* «Чаще всего отмечаешь» — премиальная пилюля под фактами месяца. */
.month-best { display: inline-block; margin-top: 11px; padding: 6px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 600; }
.dir-card { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.dir-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.dir-top b { font-size: 15px; font-weight: 700; color: var(--text); }
.dir-top span { font-size: 15px; font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.dir-bar { height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
.dir-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-300), var(--terracotta-600)); }
.dir-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
/* Кликабельная строка «что выучено» — ведёт к полному списку (все 99 имён / «Заучить»). */
.dir-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
.dir-tap:active { transform: scale(.99); }
.dir-more { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent-strong); }

/* Кнопка настройки шрифта (в азкарах и заучивании) */
.font-size-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 999px;
    border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.font-size-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.font-size-btn:active { opacity: .7; }

/* Панель настройки шрифтов */
.font-sheet { position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; justify-content: flex-end; }
.font-sheet.hidden { display: none; }
.font-sheet-overlay { position: absolute; inset: 0; background: var(--scrim); }
.font-sheet-inner {
    position: relative; z-index: 1;
    background: var(--card); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding: 0 0 calc(24px + var(--tg-safe-bottom));
    box-shadow: 0 -4px 30px rgba(0,0,0,.18);
}
.font-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--card-border);
}
.font-sheet-title { font-size: 15px; font-weight: 700; color: var(--text); }
.font-sheet-close {
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: var(--accent-soft); color: var(--text-dim);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.font-sheet-close svg { width: 14px; height: 14px; }
.font-sheet-body { padding: 4px 0; }
.font-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; gap: 12px;
}
.font-row + .font-row { border-top: 1px solid var(--card-border); }
.font-row-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.font-row-sample {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.font-row-sample.ar {
    font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 22px;
}
.font-row-name { font-size: 14px; font-weight: 700; color: var(--text); }
.font-row-sub { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.font-stepper {
    display: flex; align-items: center; gap: 0;
    border: 1px solid var(--card-border); border-radius: 10px;
    overflow: hidden; flex-shrink: 0;
}
.font-step {
    width: 38px; height: 38px; border: none; background: var(--row-bg);
    color: var(--text); font-size: 18px; font-weight: 400; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.font-step:active { background: var(--accent-soft); }
.font-step-val {
    min-width: 36px; text-align: center; font-size: 14px; font-weight: 700;
    color: var(--text); border-left: 1px solid var(--card-border);
    border-right: 1px solid var(--card-border); padding: 0 4px;
    line-height: 38px;
}

/* ============================================================
   Apple-уровень: появление модалок и листов, движение, доступность
   Всё добавочно — существующая раскладка не меняется, только мягкий вход.
   ============================================================ */

/* Затемнение-подложка плавно проявляется */
@keyframes jm-overlay-in { from { opacity: 0; } to { opacity: 1; } }
/* Центрированная модалка: лёгкий подъём + масштаб (iOS-диалог) */
@keyframes jm-modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* Нижний лист выезжает снизу */
@keyframes jm-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Полноэкранный лист: мягкое проявление контента */
@keyframes jm-sheet-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Центрированная модалка-подсказка */
.modal-overlay:not(.hidden) { animation: jm-overlay-in .22s ease; }
.modal-overlay:not(.hidden) .modal { animation: jm-modal-in .34s var(--ease-out); }

/* Нижние листы (размер шрифта, повтор аятов) */
.font-sheet:not(.hidden) .font-sheet-overlay,
.me-rep-sheet:not(.hidden) .me-rep-overlay { animation: jm-overlay-in .22s ease; }
.font-sheet:not(.hidden) .font-sheet-inner,
.me-rep-sheet:not(.hidden) .me-rep-inner { animation: jm-sheet-up .4s var(--ease-out); }

/* Полноэкранные листы (расписание, пятница, радио) */
.schedule-sheet:not(.hidden) .schedule-sheet-inner,
.friday-sheet:not(.hidden) .friday-sheet-inner,
.radio-sheet:not(.hidden) .radio-sheet-inner { animation: jm-sheet-fade-up .34s var(--ease-out); }

/* Инерционный скролл и удержание прокрутки внутри прокручиваемых поверхностей */
.schedule-sheet, .friday-sheet, .radio-sheet, .modal, .me-rep-inner, .font-sheet-inner {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Доступность: уважаем «уменьшить движение» — глушим анимации/переходы.
   Перекрывает все украшения выше, оставляя интерфейс мгновенным и спокойным. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Брендовый сплэш-экран загрузки
   ============================================================ */
.splash {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
    transition: opacity .55s var(--ease-out);
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.splash-mark {
    filter: drop-shadow(0 6px 20px rgba(174, 98, 64, .28));
    animation: splash-mark-in .7s var(--ease-out) both, splash-breathe 3.2s ease-in-out 0.7s infinite;
}
@keyframes splash-mark-in { from { opacity: 0; transform: scale(.7) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.splash-word {
    font-family: "Prata", "Cormorant Garamond", serif;
    font-size: 30px; letter-spacing: 7px; color: var(--accent-strong);
    padding-left: 7px; /* компенсация трекинга */
    opacity: 0; animation: splash-word-in .6s var(--ease-out) .35s both;
}
@keyframes splash-word-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.splash-tag {
    font-size: 12.5px; letter-spacing: .04em; color: var(--text-dim); margin-top: 2px;
    opacity: 0; animation: splash-word-in .6s var(--ease-out) .55s both;
}
.splash-dots { display: flex; gap: 7px; margin-top: 4px; opacity: 0; animation: splash-word-in .5s ease .8s both; }
.splash-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    opacity: .35; animation: splash-dot 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: .18s; }
.splash-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes splash-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* Обязательный экран города (гейт): без координат ядро не работает. Поверх всего,
   но под сплэшем (1000) — сплэш показывается первым, затем проявляется гейт. */
.city-gate {
    position: fixed; inset: 0; z-index: 990;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
    padding: 24px; overflow-y: auto;
    animation: cg-fade .4s var(--ease-out) both;
}
.city-gate.hidden { display: none; }
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
.city-gate-inner {
    width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 12px;
}
.cg-mark { filter: drop-shadow(0 6px 20px rgba(174, 98, 64, .28)); margin-bottom: 2px; }
.cg-title {
    font-family: "Prata", "Cormorant Garamond", serif; font-weight: 400;
    font-size: 23px; color: var(--accent-strong); margin: 0;
}
.cg-sub { font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0 0 6px; }
.cg-geo {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; background: var(--accent); color: #fff; font-family: inherit;
    font-size: 15px; font-weight: 700; border-radius: 12px; padding: 13px 16px; cursor: pointer;
}
.cg-geo svg { width: 19px; height: 19px; }
.cg-geo:active { opacity: .85; }
.cg-geo.hidden { display: none; }
.cg-or {
    position: relative; width: 100%; text-align: center; margin: 2px 0;
    font-size: 12.5px; color: var(--text-dim);
}
.cg-or.hidden { display: none; }
.cg-or span { background: var(--bg-top); padding: 0 12px; position: relative; z-index: 1; }
.cg-or::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--card-border);
}
.cg-input {
    width: 100%; border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text); font-family: inherit; font-size: 16px; border-radius: 12px; padding: 13px 14px;
    text-align: center;
}
.cg-save {
    width: 100%; border: 1px solid var(--accent-border); background: var(--row-bg);
    color: var(--accent-strong); font-family: inherit; font-size: 15px; font-weight: 700;
    border-radius: 12px; padding: 12px 16px; cursor: pointer;
}
.cg-save:active { opacity: .85; }
.cg-msg { font-size: 13px; min-height: 18px; }
.cg-msg.ok { color: #2e9e6b; }
.cg-msg.err { color: var(--accent-strong); }

/* ── Шторка «Сменить город» (тап по городу на «Сегодня») ── */
.city-sheet .confirm-card { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.city-sheet .ct-geo { margin-top: 2px; }
.city-sheet .ct-or {
    position: relative; width: 100%; text-align: center; margin: 2px 0;
    font-size: 12.5px; color: var(--text-dim);
}
.city-sheet .ct-or span { background: var(--card); padding: 0 12px; position: relative; z-index: 1; }
.city-sheet .ct-or::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: var(--card-border);
}
.city-sheet .ct-row { display: flex; gap: 8px; }
.city-sheet .ct-input { flex: 1; min-width: 0; text-align: left; }
.city-sheet .ct-save { flex: 0 0 auto; width: auto; padding: 12px 18px; }
.city-sheet .ct-msg { text-align: left; }
.city-sheet .ct-hint { font-size: 12px; line-height: 1.45; color: var(--text-dim); }

/* Фирменный спиннер-полумесяц для зон загрузки */
.jm-spinner {
    display: block; width: 28px; height: 28px; margin: 22px auto;
    border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
    border-radius: 50%; animation: jm-spin .8s linear infinite;
}
@keyframes jm-spin { to { transform: rotate(360deg); } }

/* Скелетон-загрузка (мягкий шиммер в тёплых тонах) */
.jm-skeleton { position: relative; overflow: hidden; background: var(--row-bg); border-radius: 14px; }
.jm-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: translateX(-100%); animation: jm-shimmer 1.3s ease-in-out infinite;
}
:root[data-theme="dark"] .jm-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes jm-shimmer { to { transform: translateX(100%); } }
.jm-skel-card { height: 90px; margin-bottom: 12px; }
.jm-skel-row { height: 18px; margin: 10px 0; border-radius: 8px; }
.jm-skel-row.short { width: 55%; }

/* ====================== Переключатель (toggle) ======================
   Используется в напоминаниях и центре настроек. Раньше .tog-* были без
   стилей (голый чекбокс) — теперь аккуратный «тумблер». */
.tog-wrap { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; cursor: pointer; }
.tog-cb { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.tog-track { position: absolute; inset: 0; border-radius: 999px; background: var(--card-border); transition: background .2s ease; }
.tog-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .2s ease; }
.tog-cb:checked + .tog-track { background: var(--accent); }
.tog-cb:checked + .tog-track .tog-knob { transform: translateX(18px); }

/* ====================== Центр настроек ====================== */
.set-screen {
    /* z-index ниже модалки (.modal-overlay = 50) и листов (font-sheet = 600),
       чтобы «Подстроить время» и «Выбрать обои» открывались ПОВЕРХ настроек,
       а не за ними. Выше контента и таб-бара (10) и плавающей кнопки (40). */
    position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column;
    background: linear-gradient(170deg, var(--bg-top), var(--bg-bottom));
    transform: translateX(100%); transition: transform .24s var(--ease-out);
}
.set-screen.open { transform: translateX(0); }
.set-head {
    display: flex; align-items: center; gap: 8px;
    /* var(--tg-safe-top) = вырез + контролы Telegram (фуллскрин); env() их не знал,
       и шапка настроек уезжала под кнопки ✕/⋮. */
    padding: calc(var(--tg-safe-top, 0px) + 14px) 14px 12px;
    border-bottom: 1px solid var(--card-border);
}
.set-back {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: 10px;
}
.set-back svg { width: 24px; height: 24px; }
.set-back:active { background: var(--row-bg); }
.set-title { font-family: "Prata", serif; font-size: 19px; letter-spacing: .02em; color: var(--text); }
.set-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 36px);
}
.set-err { color: var(--text-dim); text-align: center; padding: 36px 16px; }

.set-sec {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
    padding: 4px 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.set-sec-h {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); padding: 13px 0 4px;
}
.set-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 13px 0; border: none; border-top: 1px solid var(--card-border); background: transparent;
    color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
}
.set-row-static { cursor: default; }
.set-sec-h + .set-row, .set-sec-h + .set-row-static { border-top: none; }
.set-row:active:not(.set-row-static) { opacity: .65; }
.set-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.set-row-t { font-size: 15px; font-weight: 600; }
.set-row-s { font-size: 13px; color: var(--text-dim); line-height: 1.35; }
.set-row-go { font-size: 13px; color: var(--accent-strong); font-weight: 600; white-space: nowrap; flex: none; }
.set-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; padding: 2px 0 11px; }

.set-city-edit { display: flex; gap: 8px; padding: 4px 0 8px; }
.set-input {
    flex: 1; min-width: 0; border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text); font-family: inherit; font-size: 15px; border-radius: 10px; padding: 10px 12px;
}
.set-btn {
    flex: none; border: none; background: var(--accent); color: #fff; font-family: inherit;
    font-size: 14px; font-weight: 700; border-radius: 10px; padding: 0 16px; cursor: pointer;
}
.set-btn:active { opacity: .8; }

/* Время напоминания об азкарах: компактный time-input рядом с тумблером */
.set-rem-azkar { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.set-time {
    border: 1px solid var(--card-border); background: var(--row-bg); color: var(--text);
    font-family: inherit; font-size: 14px; border-radius: 9px; padding: 6px 8px; min-width: 0;
}
.set-time:disabled { opacity: .4; }

.set-city-msg { font-size: 13px; padding: 0 0 8px; }
.set-city-msg.ok { color: #2e9e6b; }
.set-city-msg.err { color: var(--accent-strong); }

.set-method-list { padding: 2px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.set-method-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    text-align: left; border: 1px solid var(--card-border); background: var(--row-bg);
    border-radius: 12px; padding: 11px 13px; font-family: inherit; color: var(--text); cursor: pointer;
}
.set-method-opt.on { border-color: var(--accent-border); background: var(--accent-soft); }
.set-mo-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-mo-t { font-size: 14.5px; font-weight: 600; }
.set-mo-h { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.set-mo-check { color: var(--accent-strong); font-weight: 800; opacity: 0; flex: none; }
.set-method-opt.on .set-mo-check { opacity: 1; }

.set-seg {
    display: inline-flex; background: var(--row-bg); border: 1px solid var(--card-border);
    border-radius: 10px; padding: 2px; gap: 2px; flex: none;
}
.set-seg button {
    border: none; background: transparent; color: var(--text-dim); font-family: inherit;
    font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer;
}
.set-seg button.on { background: var(--accent); color: #fff; }

.set-foot {
    text-align: center; color: var(--text-dim); font-size: 12px; opacity: .8;
    padding: 8px 0 4px; font-family: "Prata", serif; letter-spacing: .04em;
}

/* Выбор обоев (в модалке) */
.wp-hint { font-size: 13px; color: var(--text-dim); line-height: 1.45; margin-bottom: 12px; }
.wp-auto {
    display: block; width: 100%; padding: 11px; border-radius: 12px; border: 1px solid var(--accent-border);
    background: transparent; color: var(--accent-strong); font-family: inherit; font-size: 14px;
    font-weight: 700; cursor: pointer; margin-bottom: 14px;
}
.wp-auto.on { background: var(--accent-soft); }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wp-cell {
    aspect-ratio: 3 / 4; border-radius: 12px; border: 2px solid transparent;
    background-size: cover; background-position: center; cursor: pointer; padding: 0;
}
.wp-cell.on { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Разбор Аль-Кахф: кнопка + модалка */
.fri-guide-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 14px 16px;
    border-radius: 16px; border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--text); font-family: inherit; cursor: pointer; text-align: left;
}
.fri-guide-btn:active { opacity: .85; }
.fri-guide-ic { font-size: 22px; flex: none; }
.fri-guide-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fri-guide-tx b { font-size: 15px; }
.fri-guide-tx small { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.fri-guide-chev { color: var(--accent-strong); font-weight: 700; flex: none; }
.kg-intro { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.kg-fitan { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.kg-fitem { display: flex; gap: 11px; align-items: flex-start; }
.kg-fnum {
    flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px;
}
.kg-ft { font-size: 14.5px; font-weight: 700; }
.kg-fd { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); margin-top: 2px; }
.kg-how-h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); margin: 4px 0 8px; }
.kg-how { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.kg-how li { font-size: 14px; line-height: 1.5; }
.kg-src { font-size: 12px; color: var(--text-dim); line-height: 1.45; border-top: 1px solid var(--card-border); padding-top: 10px; }

/* Точка сохранения в суре */
.mem-resume {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 9px 14px;
    border-radius: 999px; border: 1px solid var(--accent-border); background: var(--accent-soft);
    color: var(--accent-strong); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.mem-resume:active { opacity: .8; }
.mem-resume-ic { font-size: 11px; }
/* «Убрать из заучивания» — тихая, не под палец; деструктивный оттенок */
.mem-sura-reset {
    display: block; margin: 22px auto 6px; padding: 8px 16px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--danger, #d9534f);
    opacity: .75; text-decoration: underline; text-underline-offset: 3px;
}
.mem-sura-reset:active { opacity: .5; }
.mem-ayah.resume-here { animation: resume-flash 2.2s ease; }
@keyframes resume-flash {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    20%, 60% { box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 14px; }
}

/* Что нового */
.wn-rel { margin-bottom: 16px; }
.wn-date { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong); margin-bottom: 8px; }
.wn-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.wn-list li { font-size: 14px; line-height: 1.5; }

/* Предложить идею */
.fb-intro { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 12px; }
.ahs-intro { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin-bottom: 12px; }
.ahs-steps { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ahs-steps li { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.ahs-note { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
/* «Настрой за 10 секунд» */
.su-intro { font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0 0 14px; }
.su-list { display: flex; flex-direction: column; gap: 10px; }
.su-step {
    display: flex; align-items: center; gap: 11px;
    padding: 12px; border: 1px solid var(--card-border); border-radius: 14px;
    background: var(--card-bg, #fff);
}
.su-step.done { border-color: color-mix(in srgb, #2E9E66 40%, var(--card-border)); }
.su-step-ic { flex: none; display: flex; color: var(--accent-strong, #AE6240); }
.su-step-ic .li-ic { width: 22px; height: 22px; }
.su-step.done .su-step-ic { color: #2E9E66; }
.su-step-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-step-t { font-size: 14.5px; font-weight: 600; color: var(--text); }
.su-step-s { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.su-step-btn {
    flex: none; border: none; cursor: pointer;
    background: var(--accent-strong, #AE6240); color: #fff;
    font-size: 13.5px; font-weight: 600; padding: 8px 15px; border-radius: 11px;
}
.su-step-btn:disabled { opacity: .6; }
.su-check { flex: none; color: #2E9E66; font-size: 19px; font-weight: 700; padding-right: 4px; }
.su-step-tip { background: none; border-style: dashed; }
.su-done {
    width: 100%; margin-top: 16px; border: none; cursor: pointer;
    background: var(--accent-strong, #AE6240); color: #fff;
    font-size: 15px; font-weight: 600; padding: 13px; border-radius: 13px;
}
/* Кликабельный шаг (закрепить чат) */
.su-step-act { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.su-step-go { flex: none; font-size: 13px; font-weight: 600; color: var(--accent-strong, #AE6240); }
/* Раскрывающаяся визуальная инструкция */
.su-pin-help { padding: 4px 2px 2px; }
.su-pin-help.hidden { display: none; }
.pin-demo {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px; margin-bottom: 12px;
    background: var(--bg-soft, rgba(174,98,64,.06)); border-radius: 14px;
}
.pin-chat {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--card-bg, #fff);
    border: 1px solid var(--card-border); border-radius: 12px; position: relative;
}
.pin-chat-av {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-strong, #AE6240); color: #fff;
}
.pin-chat-av .li-ic { width: 19px; height: 19px; }
.pin-chat-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pin-chat-tx b { font-size: 14px; color: var(--text); }
.pin-chat-tx span { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-hold {
    flex: none; font-size: 11px; font-weight: 700; color: var(--accent-strong, #AE6240);
    border: 1.5px dashed var(--accent-strong, #AE6240); border-radius: 8px; padding: 3px 7px;
    animation: pin-pulse 1.4s ease-in-out infinite;
}
@keyframes pin-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.pin-arrow { font-size: 18px; color: var(--text-dim); line-height: 1; }
.pin-menu {
    width: 70%; background: var(--card-bg, #fff);
    border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden;
    box-shadow: 0 6px 18px rgba(20,30,25,.12);
}
.pin-menu-item {
    display: block; padding: 11px 14px; font-size: 14px; font-weight: 600;
    color: var(--accent-strong, #AE6240);
}
.pin-steps { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.pin-steps li { font-size: 14px; line-height: 1.45; color: var(--text); }
.pin-note { font-size: 13px; color: var(--text-dim); margin: 0; }
.su-back {
    width: 100%; margin-top: 16px; cursor: pointer;
    border: 1px solid var(--card-border); background: none; color: var(--text);
    font-size: 14.5px; font-weight: 600; padding: 12px; border-radius: 13px;
}
.snd-bell {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-strong, #AE6240); color: #fff;
}
.snd-bell .li-ic { width: 28px; height: 28px; }
.snd-cap { font-size: 13px; font-weight: 600; color: var(--accent-strong, #AE6240); margin: 8px 0 0; }
.reach-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 18px 0 10px; }
.reach-h:first-child { margin-top: 0; }
/* «Рассказать брату» — точечный, негромкий шеринг знания (да'ва) */
.share-friend {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; cursor: pointer;
    border: 1px solid var(--card-border); background: none; color: var(--accent-strong, #AE6240);
    font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 12px;
}
.share-friend svg { width: 17px; height: 17px; }
.share-pair { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.share-pair .nasiha-share, .share-pair .share-friend { margin-top: 0; }
.share-why { font-size: 13px; line-height: 1.45; color: var(--text-dim); margin: 18px 0 0; }
.fb-text {
    width: 100%; box-sizing: border-box; border: 1px solid var(--card-border); background: var(--row-bg);
    color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5; border-radius: 12px;
    padding: 12px; resize: vertical; min-height: 96px;
}
.fb-send {
    display: block; width: 100%; margin-top: 12px; padding: 13px; border-radius: 12px; border: none;
    background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.fb-send:active { opacity: .85; }
.fb-send:disabled { opacity: .6; cursor: default; }
.fb-msg { font-size: 13px; margin-top: 10px; }
.fb-msg.err { color: var(--accent-strong); }
.fb-thanks { text-align: center; padding: 18px 8px; }
.fb-thanks-ic { font-size: 40px; margin-bottom: 10px; }
.fb-thanks p { font-size: 15px; line-height: 1.55; }

/* ===== «Что нового»: экран обновлений (карточки + история + поддержка) ===== */
.whatsnew-btn { position: relative; }
.whatsnew-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
    border-radius: 50%; background: #E0533B; border: 1.5px solid var(--bg-top); }
.wn-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end;
    justify-content: center; background: rgba(20, 16, 12, 0); transition: background .25s ease; }
.wn-overlay.show { background: rgba(20, 16, 12, 0.55); }
.wn-sheet { width: 100%; max-width: 560px;
    /* Не залезать под контролы Telegram/вырез сверху в фуллскрине (лист якорится снизу) */
    max-height: calc(100vh - var(--tg-safe-top, 0px) - 10px); display: flex; flex-direction: column;
    background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25);
    transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.wn-overlay.show .wn-sheet { transform: translateY(0); }
.wn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 20px 12px; }
.wn-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); }
.wn-title { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 600; color: var(--text); line-height: 1.1; margin-top: 2px; }
.wn-date { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.wn-close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent-soft); color: var(--text-dim); font-size: 15px; line-height: 1; }
.wn-body { overflow-y: auto; padding: 4px 16px 24px; -webkit-overflow-scrolling: touch; }
.wn-card { display: flex; gap: 13px; align-items: flex-start; padding: 14px; margin-bottom: 10px;
    background: var(--accent-soft); border-radius: 16px; }
.wn-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex;
    align-items: center; justify-content: center; font-size: 22px; }
.wn-card-body { flex: 1 1 auto; min-width: 0; }
.wn-card-title { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.wn-card-text { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.wn-section-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-dim); margin: 18px 4px 10px; }
.wn-past-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 13px 14px; border: none; cursor: pointer; background: var(--bg); border: 1px solid var(--accent-border);
    border-radius: 13px; margin-bottom: 8px; text-align: left; }
.wn-past-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.wn-past-date { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.wn-past-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-dim); transition: transform .2s ease; }
.wn-past-row.open .wn-past-chev { transform: rotate(180deg); }
.wn-past-sub { padding: 2px 0 6px; }
.wn-support { margin-top: 20px; padding: 16px; border-radius: 16px; background: var(--accent-soft);
    border: 1px solid var(--accent-border); }
.wn-support-text { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.wn-support-text p { margin: 0 0 8px; }
.wn-support-btn { display: block; width: 100%; margin: 12px 0 0; padding: 13px; border: none; border-radius: 13px;
    cursor: pointer; background: var(--accent-strong); color: #fff; font-size: 15px; font-weight: 700; }
.wn-support-thanks { white-space: pre-line; font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
    margin-top: 12px; padding-left: 11px; border-left: 3px solid var(--accent-border); }
/* «Я уже поддержал» — вторичная кнопка (мягче основной) */
.wn-supported-btn { display: block; width: 100%; margin: 10px 0 0; padding: 12px; cursor: pointer;
    border: 1px solid var(--accent-border); border-radius: 13px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: 14.5px; font-weight: 700; }
/* Стена «Их поддержали»: имена-чипы, без сумм и рейтингов */
.sup-wall { margin-top: 18px; text-align: left; }
.sup-wall-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sup-wall-list { display: flex; flex-wrap: wrap; gap: 7px; }
.sup-chip { display: inline-block; padding: 6px 11px; border-radius: 999px; font-size: 12.5px;
    background: var(--card); border: 1px solid var(--card-border); color: var(--text); text-decoration: none; }
a.sup-chip { color: var(--accent-strong); }
.sup-wall-more { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
/* Стена без имён — тёплая строка про число (выглядит как задумано, не пусто) */
.sup-wall-solo { padding: 14px 15px; border-radius: 14px; background: var(--accent-soft);
    border: 1px solid var(--accent-border); }
.sup-wall-count { font-size: 15px; font-weight: 700; color: var(--accent-strong); }
.sup-wall-note { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

/* ===== Видео-модалка (просмотр ВНУТРИ приложения) ===== */
.vid-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center;
    justify-content: center; padding: calc(var(--tg-safe-top, 0px) + 16px) 16px calc(var(--tg-safe-bottom, 0px) + 16px); background: rgba(10,8,6,0); transition: background .2s ease; }
.vid-overlay.show { background: rgba(10,8,6,0.88); }
.vid-box { position: relative; width: 100%; max-width: 640px; opacity: 0; transform: scale(.98);
    transition: opacity .2s ease, transform .2s ease; }
.vid-overlay.show .vid-box { opacity: 1; transform: scale(1); }
.vid-close { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border-radius: 50%;
    border: none; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; font-size: 16px; }
.vid-frame { position: relative; width: 100%; padding-top: 56.25%; border-radius: 14px; overflow: hidden;
    background: #000; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Нативная поддержка: карточка на «Сегодня» + лист ===== */
/* «Вместе с уммой» — свёрнутый агрегат сообщества (вдохновение расти вместе) */
.umma-card { margin: 10px 0 4px; border: 1px solid var(--card-border); border-radius: 16px;
    background: var(--card); overflow: hidden; }
.umma-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 15px;
    background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); }
.umma-ic { flex: none; display: flex; color: var(--accent-strong); }
.umma-ic .li-ic { width: 20px; height: 20px; }
.umma-head-tx { flex: 1; min-width: 0; }
.umma-title { display: block; font-size: 14.5px; font-weight: 700; }
.umma-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.umma-ch { flex: none; color: var(--text-dim); font-size: 15px; }
.umma-body { padding: 2px 15px 16px; }
.umma-grid { display: flex; flex-direction: column; }
.umma-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--card-border); }
.umma-row-ic { width: 18px; height: 18px; flex: none; color: var(--accent-strong); }
.umma-n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); flex: none; }
.umma-l { color: var(--text-dim); font-size: 13px; min-width: 0; }
.umma-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* ===================== Коран: читалка полного мусхафа ===================== */
.quran-modes { display: flex; gap: 6px; background: var(--row-bg); border: 1px solid var(--card-border);
    border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.qmode { flex: 1; padding: 9px; border-radius: 999px; border: none; background: none; color: var(--text-dim);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.qmode.on { background: var(--accent-strong); color: #fff; }

.qr-search { margin-bottom: 10px; }
.qr-search input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; }

/* «Продолжить чтение» + закладки */
.qr-resume { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    padding: 13px 16px; margin-bottom: 10px; border: 1px solid var(--accent-border); border-radius: 14px;
    background: linear-gradient(0deg, var(--accent-soft), var(--card)); font-family: inherit; color: var(--text); }
.qr-resume-lab { font-size: 15px; font-weight: 700; }
.qr-resume-sub { font-size: 12.5px; color: var(--text-dim); }
.qr-bm-open { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 9px 14px;
    border: 1px solid var(--card-border); border-radius: 999px; background: var(--card); color: var(--text);
    font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.qr-bm-open svg { width: 16px; height: 16px; color: var(--accent-strong); fill: currentColor; }
.qr-bm-title { font-size: 17px; margin: 4px 0 12px; }
.qr-bmlist { display: flex; flex-direction: column; }
.qr-bmrow { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--card-border); }
.qr-bmrow-i { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.qr-bmrow-t { font-size: 14.5px; font-weight: 600; color: var(--text); }
.qr-bmrow-s { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-bmrow-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
    color: var(--text-dim); font-size: 15px; cursor: pointer; }

/* Результаты поиска по тексту аятов */
.qr-aresults { margin-top: 4px; }
.qr-ahint { font-size: 12px; color: var(--text-dim); margin: 10px 0 6px; }
.qr-arow { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
    padding: 10px 8px; border: none; border-bottom: 1px solid var(--card-border); background: none; font-family: inherit; }
.qr-arow:active { background: var(--row-bg); }
.qr-arow-h { font-size: 13px; font-weight: 700; color: var(--accent-strong); }
.qr-arow-s { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.qr-slist { display: flex; flex-direction: column; }
.qr-srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; background: none;
    border: none; border-bottom: 1px solid var(--card-border); cursor: pointer; text-align: left; font-family: inherit; }
.qr-srow:active { background: var(--row-bg); }
.qr-sn { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft);
    color: var(--accent-strong); font-size: 13px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; font-variant-numeric: tabular-nums; }
.qr-si { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qr-st { font-size: 15px; font-weight: 600; color: var(--text); }
.qr-stl { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.qr-ss { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.qr-sar { flex: none; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 20px; color: var(--accent-strong); }

.qr-back { background: none; border: none; color: var(--accent-strong); font-family: inherit; font-size: 14px;
    font-weight: 600; cursor: pointer; padding: 4px 0 6px; }
.qr-head { text-align: center; padding: 6px 0 12px; }
.qr-head-ar { font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 30px;
    color: var(--accent-strong); line-height: 1.4; }
.qr-head-ru { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 3px; }
.qr-head-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.qr-tools { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 2px 0 10px; }
.qr-tool { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card);
    color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.qr-tr-toggle.off { opacity: .5; }
.qr-bismillah { direction: rtl; text-align: center; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: 26px; color: var(--text); padding: 6px 0 16px; border-bottom: 1px solid var(--card-border); margin-bottom: 4px; }

.qr-body { --qr-ar-size: 30px; }
.qr-ayah { position: relative; padding: 16px 0 16px 42px; border-bottom: 1px solid var(--card-border);
    border-radius: 12px; transition: background .2s;
    /* Не рендерим аяты за экраном — длинные суры открываются мгновенно. */
    content-visibility: auto; contain-intrinsic-size: auto 140px; }
.qr-ayah.playing { background: var(--accent-soft); }
.qr-aside { position: absolute; left: 0; top: 16px; display: flex; flex-direction: column; gap: 8px; }
.qr-play, .qr-bm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent-border);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.qr-play { background: var(--accent-soft); color: var(--accent-strong); }
.qr-bm { background: var(--card); color: var(--text-dim); }
.qr-bm.on { background: var(--accent-soft); color: var(--accent-strong); }
.qr-bm.on svg { fill: currentColor; }
.qr-play svg, .qr-bm svg { width: 14px; height: 14px; }
.qr-ar { direction: rtl; text-align: right; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif;
    font-size: var(--qr-ar-size, 30px); line-height: 2.05; color: var(--text); }
.qr-num { font-family: var(--font-ui, inherit); font-size: 12px; font-weight: 700; color: var(--accent-strong);
    border: 1px solid var(--accent-border); border-radius: 50%; min-width: 24px; height: 24px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 4px;
    font-variant-numeric: tabular-nums; }
.qr-tr { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.qr-body.hide-tr .qr-tr { display: none; }

/* Цельный смысловой перевод суры — в конце, свёрнутый */
.qr-suratr { margin: 22px 0 8px; border-top: 1px solid var(--card-border); padding-top: 16px; }
.qr-suratr-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 13px 15px; border-radius: 13px; border: 1px solid var(--card-border); background: var(--card);
    color: var(--text); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.qr-suratr-chev { color: var(--text-dim); font-size: 12px; transition: transform .18s; }
.qr-suratr-toggle.open .qr-suratr-chev { transform: rotate(180deg); }
.qr-suratr-body { padding: 4px 4px 0; }
.qr-suratr-text { margin: 14px 2px 0; font-size: 15.5px; line-height: 1.7; color: var(--text); }
.qr-suratr-src { margin: 12px 2px 2px; font-size: 12px; color: var(--text-dim); }

.support-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px;
    padding: 13px 15px; border: 1px solid var(--accent-border); border-radius: 16px; cursor: pointer;
    background: var(--accent-soft); text-align: left; }
.support-card-heart { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 17px; color: #E0533B; background: rgba(224,83,59,.12); }
.support-card-body { flex: 1 1 auto; min-width: 0; }
.support-card-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.support-card-sub { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.support-card-arr { flex: 0 0 auto; color: var(--text-dim); font-size: 16px; }
.sup-sheet .wn-body { text-align: center; padding: 8px 22px 28px; }
.sup-heart { font-size: 46px; color: #E0533B; margin: 6px 0 14px; }
.sup-sheet .wn-support-text { text-align: left; }
.wn-support-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    margin-top: 18px; padding: 14px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--accent-strong); color: #fff; font-size: 15px; font-weight: 700; }
.wn-support-cta span { color: #ffd5cb; }

/* ===== Полировка карточек «Что нового» (просторнее, чище) ===== */
.wn-body { padding: 8px 18px 26px; }
.wn-card { gap: 14px; padding: 16px; margin-bottom: 12px; border-radius: 18px; background: var(--accent-soft); }
.wn-ic { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; }
.wn-card-title { font-size: 16px; margin-bottom: 4px; }
.wn-card-text { font-size: 14px; line-height: 1.55; }
.wn-title { font-size: 28px; }

/* ===== 99 имён Аллаха ===== */
.heart-row-flag { border-color: var(--accent-border); background: var(--accent-soft); }
.nm-overlay { position: fixed; inset: 0; z-index: 660; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: calc(var(--tg-safe-top, 0px) + 12px) 16px calc(var(--tg-safe-bottom, 0px) + 16px);
    opacity: 0; transition: opacity .22s ease; }
.nm-overlay.show { opacity: 1; }
.nm-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nm-lead, .nm-bell { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); cursor: pointer; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; }
.nm-lead svg { width: 19px; height: 19px; }
.nm-lead.is-back { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); }
.nm-bell svg { width: 17px; height: 17px; }
.nm-bell.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }
.nm-title { flex: 1 1 auto; text-align: center; font-weight: 800; font-size: 16px; color: var(--text); }
.nm-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 2px 4px;
    display: flex; flex-direction: column; gap: 12px; max-width: 480px; width: 100%; margin: 0 auto; }

.nm-hero { text-align: center; padding: 18px 16px; border-radius: 18px;
    background: linear-gradient(165deg, var(--terracotta-500, #b9714f), var(--terracotta-700, #8a4f33));
    color: #FBF5EC; box-shadow: var(--shadow); }
.nm-hero-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.nm-hero-ar { font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 25px; line-height: 1.7; margin: 10px 0 8px; direction: rtl; }
.nm-hero-tx { font-family: "Cormorant Garamond", serif; font-size: 18px; line-height: 1.45; }
.nm-hero-src { font-size: 12px; opacity: .8; margin-top: 8px; }
.nm-hero-share { margin-top: 14px; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.14); color: #FBF5EC; font-size: 13px; font-weight: 600; cursor: pointer; }

.nm-know { padding: 12px 14px; border-radius: 14px; background: var(--row-bg); border: 1px solid var(--card-border); }
.nm-know-h { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.nm-know-tx { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.nm-know-src { color: var(--text-muted, var(--text-dim)); }

.nm-prog { padding: 4px 2px; }
.nm-prog-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.nm-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.nm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-strong); transition: width .35s ease; }

.nm-due { width: 100%; text-align: left; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.nm-due-note { margin: 2px 2px 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.nm-method-toggle { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-size: 14px;
    font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nm-method { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 2px; }
.nm-method.hidden { display: none; }
.nm-method-intro { font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.nm-step { display: flex; gap: 12px; align-items: flex-start; }
.nm-step-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
    color: var(--accent-strong); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.nm-step div { display: flex; flex-direction: column; }
.nm-step b { font-size: 14px; color: var(--text); }
.nm-step span { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.nm-method-sp { font-size: 13px; line-height: 1.5; color: var(--text-dim); padding: 8px 10px; border-radius: 10px; background: var(--row-bg); }
.nm-method-note { font-size: 12px; line-height: 1.5; color: var(--text-muted, var(--text-dim)); font-style: italic; }
/* Всегда-видимый дисклеймер о природе списка имён (под прогрессом, до групп). */
.nm-list-note { font-size: 12px; line-height: 1.5; color: var(--text-dim); font-style: italic; margin: 4px 2px 10px; }

.nm-groups-h { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-dim); margin: 4px 2px -2px; }
.nm-groups { display: flex; flex-direction: column; gap: 8px; }
.nm-fulllist { display: flex; flex-direction: column; gap: 8px; }
.nm-fulllist .nm-row { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.nm-grp { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 13px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text); cursor: pointer; text-align: left; }
.nm-grp.done { background: var(--done-soft, var(--accent-soft)); border-color: var(--done-border, var(--accent-border)); }
.nm-grp-tt { flex: 1 1 auto; font-size: 14.5px; font-weight: 600; }
.nm-grp-meta { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.nm-grp-arr { flex: 0 0 auto; color: var(--text-dim); font-size: 18px; }

.nm-back { align-self: flex-start; background: none; border: none; color: var(--accent-strong); font-size: 15px; cursor: pointer; padding: 2px 0 6px; }
.nm-list-title { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.nm-empty { text-align: center; color: var(--text-dim); padding: 24px; }
.nm-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--card); color: var(--text); cursor: pointer; text-align: left; }
.nm-row.learn { border-color: var(--accent-border); }
.nm-row.done { background: var(--done-soft, var(--accent-soft)); }
.nm-row-n { flex: 0 0 auto; width: 26px; text-align: center; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.nm-row-ar { flex: 0 0 auto; font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 22px; direction: rtl; min-width: 56px; }
.nm-row-tx { flex: 1 1 auto; display: flex; flex-direction: column; }
.nm-row-tx b { font-size: 14.5px; color: var(--text); }
.nm-row-tx small { font-size: 12.5px; color: var(--text-dim); }
.nm-row-due { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.nm-row-ok { flex: 0 0 auto; color: var(--accent-strong); font-size: 15px; }
.nm-row-arr { flex: 0 0 auto; color: var(--text-dim); font-size: 17px; }

.nm-card { text-align: center; padding: 8px 6px 4px; }
.nm-card-n { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.nm-card-ar { font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 52px; line-height: 1.5; color: var(--accent-strong); direction: rtl; margin: 6px 0; }
.nm-card-tl { font-family: "Cormorant Garamond", serif; font-size: 28px; font-weight: 600; color: var(--text); }
.nm-card-ru { font-size: 16px; color: var(--text-dim); margin-top: 2px; }
.nm-card-audio { margin-top: 14px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--accent-border);
    background: var(--accent-soft); color: var(--accent-strong); font-size: 13.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; }
.nm-card-audio .nm-au-ic { display: inline-flex; }
.nm-card-audio .nm-au-ic svg { width: 16px; height: 16px; }
.nm-card-audio.playing { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.nm-blk { text-align: left; margin-top: 16px; padding: 13px 15px; border-radius: 13px; background: var(--row-bg); border: 1px solid var(--card-border); }
.nm-blk-live { background: var(--accent-soft); border-color: var(--accent-border); }
.nm-blk-ayah .nm-ayah-ar { font-family: "KFGQPC Hafs", "Scheherazade New", "Geeza Pro", "Traditional Arabic", serif; font-size: 23px; line-height: 1.95;
    direction: rtl; text-align: right; color: var(--text); margin-bottom: 8px; }
.nm-blk-ayah .nm-ayah-tr { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.nm-blk-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent-strong); margin-bottom: 5px; }
.nm-blk p { font-size: 15px; line-height: 1.55; color: var(--text); }
/* «Как прожить это имя»: Осознанность / Действие — маленькие шаги на каждый день. */
.nm-practice { margin-top: 10px; }
.nm-practice:first-of-type { margin-top: 2px; }
.nm-practice-l { display: inline-block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    font-weight: 700; color: var(--accent-strong); opacity: .85; margin-bottom: 3px; }
.nm-practice p { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.nm-card-acts { display: flex; gap: 10px; margin-top: 18px; }
.nm-mark { flex: 1 1 0; padding: 13px; border-radius: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.nm-mark-learn { background: var(--accent-strong); color: #fff; }
.nm-mark-again { background: var(--card); color: var(--text); border-color: var(--card-border); }
.nm-card-share { margin-top: 12px; width: 100%; padding: 11px; border-radius: 12px; border: 1px solid var(--card-border);
    background: none; color: var(--text-dim); font-size: 13.5px; cursor: pointer; }

.nm-rem-intro { font-size: 14px; line-height: 1.5; color: var(--text-dim); margin-bottom: 14px; }
.nm-rem-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nm-rem-chip, .nm-rem-off { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.nm-rem-off { margin-top: 12px; width: 100%; }
.nm-rem-chip.on, .nm-rem-off.on { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-border); }

/* Кнопки-крестики закрытия: SVG вместо юникода ✕ — единый премиум-вид */
.modal-close svg, .sched-close svg, .wn-close svg, .hd-close svg, .vid-close svg,
.friday-close svg, .fri-wiz-x svg, .qr-bmrow-x svg {
    width: 1.05em; height: 1.05em; display: block; }
.modal-close, .sched-close, .wn-close, .hd-close, .vid-close,
.friday-close, .fri-wiz-x, .qr-bmrow-x { display: flex; align-items: center; justify-content: center; }

/* ===== «Что нового»: hero-флагман + раскрывающиеся карточки ===== */
.wn-feature { padding: 18px; border-radius: 18px; border: 1px solid; margin-bottom: 14px; text-align: center; }
.wn-feature-ic { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center;
    justify-content: center; font-size: 28px; margin: 0 auto 12px; color: #fff; }
.wn-feature-tt { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.wn-feature-tx { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.wn-feature-cta { margin-top: 14px; padding: 11px 26px; border-radius: 999px; border: none; color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer; }

.wn-card-exp { flex-direction: column; align-items: stretch; gap: 0; cursor: pointer; }
.wn-card-main { display: flex; gap: 13px; align-items: flex-start; }
.wn-card-chev { flex: 0 0 auto; color: var(--text-dim); transition: transform .2s ease; margin-top: 4px; }
.wn-card-chev svg { width: 16px; height: 16px; }
.wn-card-exp.open .wn-card-chev { transform: rotate(90deg); }
.wn-card-detail { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--card-border); }
.wn-detail-tx { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.wn-detail-cta { margin-top: 10px; background: none; border: none; padding: 4px 0; font-size: 14px; font-weight: 700; cursor: pointer; }

/* Мини-история постного дня (Ашура): абзацы «почему этот день» + блоки хадисов */
.fasting-story-p { margin: 0 0 8px; line-height: 1.55; }
.fasting-story-p:last-of-type { margin-bottom: 10px; }
.fasting-story-h { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--card-border); line-height: 1.5; }