/* ============================================
   Путь к Корану (Обучение) — MyQuran.ru
   Мобильный-first: станции → уроки → упражнения → прогресс
   ============================================ */

/* ---------- веб-шрифты: свои файлы (не зависим от Google CDN) ---------- */
/* Веcь текст раздела должен рисоваться и там, где fonts.googleapis.com
   недоступен: иначе системный шрифт не даёт глифа U+25CC (кружок-заглушка
   знака огласовки) и знаки отображаются квадратиками. */
/* Amiri Quran 400 arabic */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/amiri-quran-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Amiri Quran 400 latin */
@font-face {
  font-family: 'Amiri Quran';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/amiri-quran-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Naskh Arabic 400 arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Naskh Arabic 400 math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-400-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Noto Naskh Arabic 400 symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-400-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* Noto Naskh Arabic 400 latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Naskh Arabic 400 latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Naskh Arabic 700 arabic */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Noto Naskh Arabic 700 math */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-700-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Noto Naskh Arabic 700 symbols */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-700-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
/* Noto Naskh Arabic 700 latin-ext */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Naskh Arabic 700 latin */
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/learn/noto-naskh-arabic-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

[hidden] {
    display: none !important;
}

:root {
    --ln-bg: #101814;
    --ln-bg-2: #17211c;
    --ln-bg-3: #1d2a23;
    --ln-bg-4: #26362e;
    --ln-line: rgba(255, 255, 255, .08);
    --ln-line-2: rgba(255, 255, 255, .14);
    --ln-text: #eef4f0;
    --ln-muted: #93a89b;
    --ln-accent: #2ea876;
    --ln-accent-2: #45c491;
    --ln-accent-soft: rgba(46, 168, 118, .16);
    --ln-blue: #60a5fa;
    --ln-blue-soft: rgba(96, 165, 250, .16);
    --ln-warn: #d9b54a;
    --ln-warn-soft: rgba(217, 181, 74, .16);
    --ln-danger: #f87171;
    --ln-danger-soft: rgba(248, 113, 113, .16);
    --ln-radius: 16px;
    --ln-top-h: 56px;
    --ln-dock-h: 76px;
    --ln-safe-b: env(safe-area-inset-bottom, 0px);
    --ln-safe-t: env(safe-area-inset-top, 0px);
    /* свои файлы первыми; дальше системные арабские шрифты и символический
       (U+25CC) — страховка, если веб-шрифт по какой-то причине не применился */
    --ln-ar: 'Noto Naskh Arabic', 'Amiri Quran', 'Traditional Arabic',
        'Geeza Pro', 'Segoe UI Symbol', 'Noto Sans Symbols 2', serif;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ln-bg);
    color: var(--ln-text);
    font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    overscroll-behavior-y: contain;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.ln-root {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 100dvh;
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- шапка ---------- */
.ln-top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    height: calc(var(--ln-top-h) + var(--ln-safe-t));
    padding: var(--ln-safe-t) 10px 0;
    background: rgba(11, 13, 18, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ln-line);
}

.ln-top-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
    color: var(--ln-muted);
    transition: background .15s, color .15s;
}

.ln-top-btn:hover,
.ln-top-btn:active {
    background: var(--ln-bg-3);
    color: var(--ln-text);
}

.ln-top-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ln-crumb {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-crumb-sub {
    font-size: 12px;
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- область ---------- */
.ln-view {
    flex: 1 1 auto;
    padding: 16px 14px calc(var(--ln-dock-h) + var(--ln-safe-b) + 24px);
    outline: none;
}

.ln-view.is-plain {
    padding-bottom: calc(var(--ln-safe-b) + 24px);
}

.ln-loading {
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 64px 0;
    color: var(--ln-muted);
}

.ln-spin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid var(--ln-line-2);
    border-top-color: var(--ln-accent);
    animation: ln-rot .8s linear infinite;
}

@keyframes ln-rot {
    to { transform: rotate(360deg); }
}

/* ---------- кнопки ---------- */
.ln-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: transform .1s, background .15s, border-color .15s;
}

.ln-btn:active {
    transform: scale(.985);
}

.ln-btn--primary {
    background: linear-gradient(180deg, var(--ln-accent), #0ea372);
    border-color: transparent;
    color: #04150f;
    box-shadow: 0 8px 24px -12px rgba(46, 168, 118, .9);
}

.ln-btn--ghost {
    background: transparent;
    border-color: var(--ln-line-2);
    color: var(--ln-muted);
}

.ln-btn--wide { width: 100%; }
.ln-btn--sm { min-height: 38px; padding: 8px 12px; font-size: 13px; border-radius: 11px; }

.ln-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-size: 12.5px;
    color: var(--ln-muted);
}

.ln-chip--ok { background: var(--ln-accent-soft); border-color: transparent; color: var(--ln-accent-2); }
.ln-chip--warn { background: var(--ln-warn-soft); border-color: transparent; color: var(--ln-warn); }

/* ---------- общие блоки ---------- */
.ln-card {
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
    border-radius: var(--ln-radius);
    padding: 14px;
}

.ln-kicker {
    display: block;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ln-accent);
    font-weight: 700;
    margin-bottom: 6px;
}

.ln-h2 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.25;
}

.ln-muted { color: var(--ln-muted); }
.ln-small { font-size: 13px; }

.ln-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 0 10px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ln-muted);
    font-weight: 700;
}

.ln-stack { display: grid; gap: 10px; }

/* ---------- главный экран ---------- */
.ln-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 14px 4px 10px;
    border-radius: var(--ln-radius);
}

.ln-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}

.ln-hero .ln-sub {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    color: var(--ln-muted);
    font-size: 14.5px;
}

.ln-hero .ln-ar-title {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 8px;
    font-family: var(--ln-ar);
    font-size: 18px;
    color: var(--ln-accent-2);
}

/* «гигантская буква» за заголовком — приём из ALIF */
.ln-hero-ghost {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-56%);
    z-index: 0;
    font-family: var(--ln-ar);
    font-size: 156px;
    line-height: 1;
    color: var(--ln-accent);
    opacity: .1;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.ln-today {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.ln-ring {
    --p: 0;
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ln-accent) calc(var(--p) * 1%), var(--ln-bg-4) 0);
}

.ln-ring::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--ln-bg-2);
}

.ln-ring-in {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.1;
}

.ln-ring-in b { display: block; font-size: 22px; }
.ln-ring-in small { font-size: 11px; color: var(--ln-muted); }

.ln-today-stats {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ln-mini {
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    border-radius: 13px;
    padding: 9px 8px;
    text-align: center;
}

.ln-mini b { display: block; font-size: 18px; line-height: 1.2; }
.ln-mini small { font-size: 11px; color: var(--ln-muted); }

.ln-actions {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

/* ---------- станции ---------- */
.ln-stations { display: grid; gap: 11px; }

.ln-station {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border-radius: var(--ln-radius);
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
    transition: transform .1s, border-color .15s, background .15s;
}

.ln-station:active { transform: scale(.99); }

.ln-station.is-active {
    border-color: rgba(46, 168, 118, .55);
    background: linear-gradient(180deg, rgba(46, 168, 118, .10), var(--ln-bg-2) 60%);
}

.ln-station.is-locked { opacity: .55; }

.ln-station-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--ln-bg-4);
    font-size: 20px;
    color: var(--ln-accent-2);
}

.ln-station.is-locked .ln-station-ico { color: var(--ln-muted); }

.ln-station-body { flex: 1 1 auto; min-width: 0; }

.ln-station-body b {
    display: block;
    font-size: 15.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-station-body small {
    display: block;
    font-size: 12.5px;
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-station-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--ln-muted);
}

.ln-progress-line {
    height: 5px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--ln-bg-4);
    overflow: hidden;
}

.ln-progress-line i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ln-accent), var(--ln-accent-2));
    transition: width .3s;
}

.ln-station-chev { color: var(--ln-muted); font-size: 17px; }

/* ---------- список уроков ---------- */
.ln-lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
}

.ln-lesson.is-locked { opacity: .5; }

.ln-lesson-no {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--ln-bg-4);
    font-size: 14px;
    font-weight: 700;
    color: var(--ln-muted);
}

.ln-lesson.is-done .ln-lesson-no { background: var(--ln-accent-soft); color: var(--ln-accent-2); }
.ln-lesson.is-current .ln-lesson-no { background: var(--ln-accent); color: #04150f; }

.ln-lesson-body { flex: 1 1 auto; min-width: 0; }
.ln-lesson-body b { display: block; font-size: 15px; }

.ln-lesson-body .ln-letters {
    font-family: var(--ln-ar);
    font-size: 17px;
    color: var(--ln-muted);
    line-height: 1.5;
    word-spacing: 3px;
}

.ln-lesson-state { flex: 0 0 auto; font-size: 17px; color: var(--ln-muted); }
.ln-lesson.is-done .ln-lesson-state { color: var(--ln-accent-2); }

/* ---------- прогресс урока ---------- */
.ln-topbar-prog {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ln-topbar-prog .ln-progress-line { flex: 1 1 auto; margin-top: 0; }
.ln-topbar-prog .ln-step { font-size: 12.5px; color: var(--ln-muted); white-space: nowrap; }

/* ---------- упражнения ---------- */
.ln-q {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 15.5px;
    font-weight: 600;
}

.ln-q i { color: var(--ln-accent); font-size: 17px; }

.ln-stage {
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
    border-radius: 20px;
    padding: 20px 14px 16px;
    text-align: center;
}

.ln-big-letter {
    font-family: var(--ln-ar);
    font-size: clamp(64px, 24vw, 118px);
    line-height: 1.1;
    color: var(--ln-text);
    direction: rtl;
}

.ln-forms {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
    direction: rtl;
    font-family: var(--ln-ar);
    font-size: clamp(26px, 9vw, 40px);
    color: var(--ln-muted);
}

.ln-forms span {
    min-width: 52px;
    padding: 4px 8px;
    border-radius: 10px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
}

.ln-forms span.is-now { color: var(--ln-accent-2); border-color: rgba(46, 168, 118, .45); }

.ln-name-ar {
    font-family: var(--ln-ar);
    font-size: 30px;
    direction: rtl;
    margin-top: 14px;
}

.ln-name-ru {
    font-size: 17px;
    font-weight: 700;
    margin-top: 2px;
}

.ln-name-ph {
    display: inline-block;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--ln-muted);
}

.ln-tip {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-size: 13.5px;
    color: var(--ln-muted);
    text-align: left;
}

.ln-audio-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.ln-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--ln-accent-soft);
    border: 1px solid rgba(46, 168, 118, .35);
    color: var(--ln-accent-2);
    font-size: 13.5px;
    font-weight: 600;
}

.ln-audio-btn.is-playing { background: rgba(46, 168, 118, .32); }
.ln-audio-btn:disabled { opacity: .4; }

.ln-audio-big {
    width: 96px;
    height: 96px;
    margin: 4px auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ln-accent-soft);
    border: 1px solid rgba(46, 168, 118, .4);
    color: var(--ln-accent-2);
    font-size: 36px;
}

.ln-audio-big.is-playing { animation: ln-pulse 1s ease-in-out infinite; }

@keyframes ln-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 168, 118, .35); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(46, 168, 118, 0); }
}

.ln-hint-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--ln-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* варианты ответа */
.ln-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 15px;
}

.ln-opt {
    min-height: 96px;
    padding: 12px 8px;
    border-radius: 16px;
    background: var(--ln-bg-3);
    border: 1.5px solid var(--ln-line);
    display: grid;
    place-items: center;
    gap: 2px;
    transition: transform .1s, border-color .15s, background .15s;
}

.ln-opt:active { transform: scale(.98); }

.ln-opt .ln-glyph {
    font-family: var(--ln-ar);
    font-size: clamp(38px, 13vw, 54px);
    line-height: 1.15;
    direction: rtl;
}

.ln-opt .ln-glyph-sub {
    font-family: var(--ln-ar);
    font-size: 17px;
    color: var(--ln-muted);
    direction: rtl;
    margin-top: -4px;
}

.ln-opt .ln-opt-ru { font-size: 12px; color: var(--ln-muted); }

.ln-opt.is-right {
    background: var(--ln-accent-soft);
    border-color: var(--ln-accent);
}

.ln-opt.is-right .ln-opt-ru { color: var(--ln-accent-2); }

.ln-opt.is-wrong {
    background: var(--ln-danger-soft);
    border-color: var(--ln-danger);
    animation: ln-shake .3s;
}

.ln-opt:disabled { opacity: .9; }

@keyframes ln-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* слово с подсвеченной буквой */
.ln-word {
    font-family: var(--ln-ar);
    font-size: clamp(40px, 15vw, 62px);
    direction: rtl;
    line-height: 1.6;
    word-break: break-word;
}

.ln-word em {
    font-style: normal;
    color: var(--ln-accent-2);
    text-decoration: underline;
    text-decoration-color: rgba(46, 168, 118, .8);
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
    background: rgba(46, 168, 118, .14);
    border-radius: 6px;
    padding: 0 2px;
}

.ln-word-gloss {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ln-muted);
}

.ln-word-ref {
    display: inline-block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ln-blue);
}

/* фидбек */
.ln-feedback {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    animation: ln-in .18s ease-out;
}

.ln-feedback.is-ok { background: var(--ln-accent-soft); border-color: rgba(46, 168, 118, .4); }
.ln-feedback.is-bad { background: var(--ln-danger-soft); border-color: rgba(248, 113, 113, .4); }

@keyframes ln-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.ln-feedback-ico { font-size: 24px; }
.ln-feedback.is-ok .ln-feedback-ico { color: var(--ln-accent-2); }
.ln-feedback.is-bad .ln-feedback-ico { color: var(--ln-danger); }

.ln-feedback-txt { flex: 1 1 auto; font-size: 14.5px; }
.ln-feedback-txt b { display: block; font-size: 15.5px; }
.ln-feedback-txt small { color: var(--ln-muted); }

.ln-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    padding: 10px 14px calc(10px + var(--ln-safe-b));
    background: rgba(11, 13, 18, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--ln-line);
}

.ln-dock-in { max-width: 720px; margin: 0 auto; display: grid; gap: 8px; }

/* ---------- итог урока ---------- */
.ln-sum {
    text-align: center;
    padding: 8px 0 4px;
}

.ln-sum-badge {
    width: 108px;
    height: 108px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ln-accent-soft);
    border: 2px solid var(--ln-accent);
    font-size: 34px;
    color: var(--ln-accent-2);
}

.ln-sum-badge.is-retry { background: var(--ln-warn-soft); border-color: var(--ln-warn); color: var(--ln-warn); }
.ln-sum h2 { margin: 0 0 6px; font-size: 22px; }
.ln-sum p { margin: 0 0 14px; color: var(--ln-muted); font-size: 14.5px; }

.ln-sum-nums {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 16px;
}

.ln-new-letters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 6px;
}

.ln-new-letters span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-family: var(--ln-ar);
    font-size: 25px;
}

/* ---------- статистика ---------- */
.ln-cal {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.ln-cal i {
    height: 22px;
    border-radius: 5px;
    background: var(--ln-bg-4);
}

.ln-cal i.l1 { background: rgba(46, 168, 118, .35); }
.ln-cal i.l2 { background: rgba(46, 168, 118, .65); }
.ln-cal i.l3 { background: var(--ln-accent); }
.ln-cal i.is-today { outline: 1.5px solid var(--ln-blue); outline-offset: 1px; }

.ln-streak {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.ln-streak b { font-size: 30px; line-height: 1; }
.ln-streak span { font-size: 13.5px; color: var(--ln-muted); }

.ln-map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ln-tile {
    position: relative;
    aspect-ratio: 1;
    min-height: 58px;      /* запас для старых Safari без aspect-ratio */
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--ln-bg-4);
    border: 1px solid var(--ln-line);
    font-family: var(--ln-ar);
    font-size: clamp(24px, 8vw, 34px);
    color: var(--ln-muted);
}

.ln-tile[data-m="0"] { opacity: .5; }
.ln-tile[data-m="1"],
.ln-tile[data-m="2"],
.ln-tile[data-m="3"] { color: var(--ln-warn); background: var(--ln-warn-soft); border-color: rgba(217, 181, 74, .3); }
.ln-tile[data-m="4"] { color: var(--ln-accent-2); background: rgba(46, 168, 118, .28); border-color: rgba(46, 168, 118, .45); }
.ln-tile[data-m="5"] { color: #04150f; background: linear-gradient(180deg, var(--ln-accent-2), var(--ln-accent)); border-color: transparent; }

.ln-tile-dot {
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ln-danger);
}

.ln-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 11px;
    font-size: 12.5px;
    color: var(--ln-muted);
}

.ln-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ln-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.ln-mastery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ln-mastery-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
}

.ln-mastery-item .g { font-family: var(--ln-ar); font-size: 24px; min-width: 26px; }
.ln-mastery-item .t { flex: 1 1 auto; min-width: 0; }
.ln-mastery-item .t b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-mastery-item .t small { font-size: 11px; color: var(--ln-muted); }

/* ---------- sheet ---------- */
.ln-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ln-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    animation: ln-in .2s;
}

.ln-sheet-body {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
    border-radius: 20px 20px 0 0;
    padding: 8px 14px calc(14px + var(--ln-safe-b));
    animation: ln-up .22s ease-out;
}

@keyframes ln-up {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.ln-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--ln-line-2);
    margin: 4px auto 8px;
}

.ln-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ln-sheet-head h3 { margin: 0; font-size: 17px; }
.ln-sheet-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }

/* проверка произношения */
.ln-check-list { display: grid; gap: 8px; }

.ln-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
}

.ln-check-row.is-bad { border-color: rgba(248, 113, 113, .55); background: var(--ln-danger-soft); }
.ln-check-row .g { font-family: var(--ln-ar); font-size: 26px; min-width: 28px; }
.ln-check-row .t { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.ln-check-row .t small { display: block; color: var(--ln-muted); font-size: 11.5px; }

.ln-check-row .play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ln-accent-soft);
    color: var(--ln-accent-2);
    font-size: 15px;
}

.ln-check-row .flag {
    width: 44px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--ln-line-2);
    color: var(--ln-muted);
    font-size: 15px;
}

.ln-check-row.is-bad .flag { background: var(--ln-danger-soft); border-color: transparent; color: var(--ln-danger); }

/* ---------- тост ---------- */
.ln-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ln-dock-h) + var(--ln-safe-b) + 16px);
    transform: translateX(-50%) translateY(10px);
    z-index: 70;
    max-width: min(88vw, 420px);
    padding: 10px 15px;
    border-radius: 12px;
    background: var(--ln-bg-4);
    border: 1px solid var(--ln-line-2);
    font-size: 13.5px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.ln-toast.is-on { opacity: 1; transform: translateX(-50%); }

/* ---------- десктоп ---------- */
@media (min-width: 560px) {
    .ln-map { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .ln-mastery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ln-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ln-opt { min-height: 118px; }
}


/* ---------- станция «Харакат» ---------- */
.ln-big-letter.is-mark { font-size: clamp(52px, 19vw, 92px); }

.ln-parts {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 12px;
    direction: rtl;
    font-family: var(--ln-ar);
    font-size: clamp(40px, 15vw, 64px);
    color: var(--ln-text);
}

.ln-part {
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    line-height: 1.25;
}

.ln-part-sep {
    font-family: inherit;
    font-size: 22px;
    color: var(--ln-muted);
    direction: ltr;
}

.ln-opt .ln-glyph.is-mark { font-size: clamp(30px, 11vw, 46px); color: var(--ln-blue); }

.ln-map .ln-tile.is-new { opacity: .35; }

.ln-read-out {
    font-size: clamp(30px, 11vw, 44px);
    font-weight: 700;
    color: var(--ln-accent-2);
    letter-spacing: .02em;
}


/* ---------- станция «Калима» ---------- */
.ln-big-letter.is-word { font-size: clamp(50px, 18vw, 88px); }

/* аят целиком */
.ln-ayah {
    font-family: var(--ln-ar);
    direction: rtl;
    font-size: clamp(28px, 10.5vw, 44px);
    line-height: 1.9;
    margin-top: 8px;
    color: var(--ln-text);
}

/* басмала-заголовок перед аятом 1 */
.ln-ayah-bsm {
    font-family: var(--ln-ar);
    direction: rtl;
    font-size: clamp(18px, 6.5vw, 26px);
    line-height: 1.7;
    color: var(--ln-muted);
}

/* аят с подсветкой слова */
.ln-word.is-ayah {
    font-size: clamp(24px, 9vw, 38px);
    line-height: 2;
}

/* вариант-аят в списке ответов */
.ln-options.is-ayahs { grid-template-columns: 1fr; }

.ln-opt--ayah { text-align: right; }

.ln-opt-ayah {
    display: block;
    direction: rtl;
    font-family: var(--ln-ar);
    font-size: clamp(19px, 7vw, 26px);
    line-height: 1.8;
    color: var(--ln-text);
    word-break: break-word;
}

/* «Прочитай вслух»: кнопка микрофона */
.ln-mic {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 132px;
    min-height: 116px;
    margin: 16px auto 0;
    padding: 16px 10px;
    border-radius: 22px;
    background: var(--ln-accent-soft);
    border: 1px solid rgba(46, 168, 118, .45);
    color: var(--ln-accent-2);
    font-size: 14px;
    font-weight: 700;
}

.ln-mic i { font-size: 34px; }

.ln-mic:disabled { opacity: .45; }

.ln-mic.is-rec {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .5);
    color: var(--ln-danger);
    animation: ln-pulse 1s ease-in-out infinite;
}

/* самооценка, когда проверка чтения недоступна */
.ln-self {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* ---------- станция «Таджвид» ---------- */

/* название правила по-арабски (например, الإظهار) */
.ln-tr-ar {
    font-family: var(--ln-ar);
    direction: rtl;
    font-size: clamp(38px, 14vw, 64px);
    line-height: 1.2;
    color: var(--ln-accent-2);
    margin-top: 4px;
}

/* буквы правила (ء أ ح خ ع غ) — фишки в направлении rtl */
.ln-tr-letters {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
    font-family: var(--ln-ar);
    font-size: clamp(30px, 11vw, 46px);
    color: var(--ln-text);
    margin-top: 6px;
}

.ln-tr-letters span {
    min-width: 54px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
}

/* ---------- станция «Хифз» ---------- */

/* список аятов суры: номер, арабский текст, кнопка прослушивания */
.ln-hifz {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}

.ln-hifz-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
}

/* номер аята — маленький кружок */
.ln-hifz-no {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ln-bg-4);
    border: 1px solid var(--ln-line);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ln-muted);
}

.ln-hifz-body { min-width: 0; }

.ln-hifz-ar {
    display: block;
    direction: rtl;
    font-family: var(--ln-ar);
    font-size: clamp(19px, 7vw, 26px);
    line-height: 1.85;
    color: var(--ln-text);
    text-align: right;
    word-break: break-word;
}

/* басмала перед сурами — приглушённая строка без номера и кнопки */
.ln-hifz-row.is-bsm {
    grid-template-columns: minmax(0, 1fr);
    background: transparent;
    border-style: dashed;
}

.ln-hifz-row.is-bsm .ln-hifz-ar {
    font-size: clamp(17px, 6vw, 23px);
    color: var(--ln-muted);
}

/* пропущенный аят в упражнении «восстанови суру» */
.ln-hifz-row.is-gap {
    background: var(--ln-warn-soft);
    border-color: rgba(217, 181, 74, .45);
}

.ln-hifz-gap {
    display: block;
    font-size: clamp(20px, 7.5vw, 28px);
    line-height: 1.6;
    text-align: right;
    color: var(--ln-warn);
    letter-spacing: 3px;
}

.ln-hifz-play {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ln-accent-soft);
    border: 1px solid rgba(46, 168, 118, .35);
    color: var(--ln-accent-2);
    font-size: 15px;
}

.ln-hifz-play.is-playing { background: rgba(46, 168, 118, .32); }

/* прогресс по суре в разделе «Мой прогресс» */
.ln-hz-row { margin-top: 12px; }
.ln-hz-row:first-child { margin-top: 0; }

.ln-hz-row .ln-map { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.ln-hz-name {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 7px;
}

.ln-hz-name b {
    font-family: var(--ln-ar);
    font-size: 22px;
    font-weight: 600;
    color: var(--ln-text);
}

.ln-hz-name span {
    font-size: 12.5px;
    color: var(--ln-muted);
}

/* ============================================================
   Геймификация и тренажёр письма — по мотивам проекта ALIF
   ============================================================ */

/* ---------- уровень, XP ---------- */
.ln-lvl {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
}

.ln-lvl svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ln-lvl-in {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.05;
}

.ln-lvl-in b {
    font-size: 34px;
    font-weight: 800;
    color: var(--ln-text);
}

.ln-lvl-in small {
    font-size: 10.5px;
    color: var(--ln-muted);
    letter-spacing: .02em;
}

.ln-lvl-card {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ln-lvl-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ln-lvl-xp {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ln-lvl-xp b {
    font-size: 27px;
    font-weight: 800;
    color: var(--ln-warn);
}

.ln-lvl-xp span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ln-muted);
}

.ln-lvl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.ln-xp-gain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 13px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--ln-warn-soft);
    color: var(--ln-warn);
    font-size: 14px;
    font-weight: 700;
}

.ln-xp-gain i {
    font-size: 15px;
}

/* ---------- график XP за 14 дней ---------- */
.ln-xpchart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 118px;
    padding-top: 4px;
}

.ln-xpbar {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.ln-xpbar i {
    display: block;
    width: 100%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--ln-accent-2), rgba(46, 168, 118, .3));
}

.ln-xpbar.is-today i {
    background: linear-gradient(180deg, var(--ln-warn), rgba(217, 181, 74, .3));
}

.ln-xpbar b {
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--ln-muted);
    white-space: nowrap;
}

.ln-xpbar.is-today b {
    color: var(--ln-warn);
}

/* ---------- достижения ---------- */
.ln-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.ln-badge {
    position: relative;
    display: grid;
    gap: 3px;
    justify-items: center;
    text-align: center;
    padding: 13px 7px 11px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    opacity: .42;
    filter: grayscale(1);
}

.ln-badge.is-on {
    opacity: 1;
    filter: none;
    border-color: rgba(217, 181, 74, .32);
}

.ln-badge-ico {
    font-size: 24px;
    line-height: 1;
}

.ln-badge b {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ln-text);
}

.ln-badge small {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ln-muted);
}

.ln-badge.is-new {
    box-shadow: 0 0 0 2px var(--ln-warn-soft);
}

.ln-badge-flag {
    position: absolute;
    top: -8px;
    right: -5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--ln-warn);
    color: #221a06;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ---------- слабые места (частые ошибки) ---------- */
.ln-weak-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ln-chip--bad {
    background: var(--ln-danger-soft);
    border-color: transparent;
    color: var(--ln-danger);
}

.ln-chip--bad b {
    font-family: var(--ln-ar);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

/* ---------- тренажёр письма ---------- */
.ln-wr-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ln-wr-nav .ln-top-btn {
    flex: none;
}

.ln-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border-radius: 12px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    color: var(--ln-text);
    font-family: inherit;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ln-muted) 50%), linear-gradient(135deg, var(--ln-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.ln-select:focus {
    outline: none;
    border-color: var(--ln-accent);
}

.ln-wr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ln-wr-canvas-card {
    padding: 10px;
}

.ln-wr-canvas-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
}

.ln-wr-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}

.ln-wr-legend {
    margin-top: 10px;
}

.ln-wr-tip {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ln-muted);
}

.ln-wr-tip b {
    color: var(--ln-text);
}

/* результат проверки рисунка */
.ln-wr-result {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 13.5px;
}

.ln-wr-result b {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    white-space: nowrap;
}

.ln-wr-result span {
    flex: 1 1 140px;
    line-height: 1.45;
}

.ln-wr-result .ln-btn {
    padding: 7px 12px;
    font-size: 13px;
    border-color: currentColor;
}

.ln-wr-result--ok {
    background: rgba(46, 168, 118, .14);
    border: 1px solid rgba(46, 168, 118, .36);
    color: var(--ln-accent);
}

.ln-wr-result--bad {
    background: rgba(248, 113, 113, .13);
    border: 1px solid rgba(248, 113, 113, .34);
    color: var(--ln-danger);
}

.ln-wr-result span {
    color: inherit;
    opacity: .92;
}

/* вкладки «Моего прогресса» */
.ln-tabs {
    display: flex;
    gap: 5px;
    margin: 0 0 14px;
    padding: 4px;
    background: var(--ln-bg-2);
    border: 1px solid var(--ln-line);
    border-radius: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ln-tabs::-webkit-scrollbar {
    display: none;
}

.ln-tab {
    flex: 1 1 auto;
    min-width: 72px;
    padding: 9px 8px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--ln-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ln-tab.is-on {
    background: var(--ln-accent);
    color: #06120c;
}

.ln-wr-actions {
    grid-template-columns: 1fr 1fr;
}

.ln-wr-actions .ln-btn--wide {
    grid-column: 1 / -1;
}

@media (max-width: 420px) {
    .ln-lvl-card {
        gap: 13px;
    }

    .ln-lvl-xp b {
        font-size: 24px;
    }

    .ln-badges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ============================================================
   Станция «Хифз»: каталог 114 сур, мастер настроек,
   заучивание по аятам и экзамен с проверкой чтения.
   Только переменные палитры ALIF (--ln-*).
   ============================================================ */

/* ---------- поиск по каталогу сур ---------- */
.ln-hz-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    margin-bottom: 10px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    border-radius: 13px;
}

.ln-hz-search i {
    font-size: 15px;
    color: var(--ln-muted);
}

.ln-hz-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--ln-text);
    font: inherit;
    font-size: 15px;
}

.ln-hz-search input::placeholder {
    color: var(--ln-muted);
}

.ln-hz-list {
    display: grid;
    gap: 8px;
}

.ln-hz-empty {
    text-align: center;
    padding: 6px 0;
}

/* ---------- строка суры ---------- */
.ln-hz-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 9px 11px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    text-align: left;
    font: inherit;
    color: var(--ln-text);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}

.ln-hz-item:active {
    transform: scale(.99);
}

.ln-hz-item.is-sel {
    border-color: var(--ln-accent);
    background: var(--ln-accent-soft);
}

.ln-hz-item-no {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ln-bg-4);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ln-muted);
}

.ln-hz-item.is-sel .ln-hz-item-no {
    background: var(--ln-accent);
    color: var(--ln-text);
}

.ln-hz-item-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ln-hz-item-body b {
    font-family: var(--ln-ar);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ln-text);
}

.ln-hz-item-body span {
    font-size: 12px;
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-hz-item-side {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.ln-hz-item-side .ln-chip {
    padding: 4px 9px;
    font-size: 11.5px;
    white-space: nowrap;
}

.ln-hz-item-prog {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ln-accent-2);
}

.ln-hz-chip--new {
    opacity: .7;
}

/* ---------- карточка активного плана / пустое состояние ---------- */
.ln-hz-cur-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ln-hz-cur-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ln-hz-cur-name b {
    font-family: var(--ln-ar);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.ln-hz-actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.ln-hz-actions .ln-btn {
    width: 100%;
}

.ln-hz-hint {
    display: block;
    padding-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ln-muted);
    text-align: center;
}

.ln-hz-empty-card {
    text-align: center;
}

.ln-hz-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ---------- мастер настроек ---------- */
.ln-wz-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.ln-wz-dots i {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--ln-bg-4);
    border: 1px solid var(--ln-line-2);
    transition: background .15s, transform .15s;
}

.ln-wz-dots i.is-on {
    background: var(--ln-accent-soft);
    border-color: var(--ln-accent);
}

.ln-wz-dots i.is-cur {
    background: var(--ln-accent);
    transform: scale(1.3);
}

.ln-wz-dots span {
    flex: 0 0 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--ln-bg-4);
}

.ln-wz-step {
    margin: 0 0 4px;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ln-accent);
}

.ln-wz-list {
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.ln-wz-modes {
    display: grid;
    gap: 9px;
}

.ln-wz-mode {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 14px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    text-align: left;
    font: inherit;
    color: var(--ln-text);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}

.ln-wz-mode:active {
    transform: scale(.99);
}

.ln-wz-mode.is-on {
    border-color: var(--ln-accent);
    background: var(--ln-accent-soft);
}

.ln-wz-mode-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ln-wz-mode-top b {
    font-size: 16px;
}

.ln-wz-mode-top i {
    font-size: 17px;
    color: var(--ln-muted);
}

.ln-wz-mode.is-on .ln-wz-mode-top i {
    color: var(--ln-accent-2);
}

.ln-wz-mode-sub {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ln-warn);
}

.ln-wz-mode.is-on .ln-wz-mode-sub {
    color: var(--ln-accent-2);
}

.ln-wz-mode-hint {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ln-muted);
}

.ln-wz-sum {
    display: grid;
    gap: 8px;
}

.ln-wz-sum-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 3px 10px;
    align-items: baseline;
    padding: 9px 11px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    border-radius: 12px;
}

.ln-wz-sum-row > span {
    grid-row: span 2;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ln-muted);
}

.ln-wz-sum-row > b {
    font-size: 16px;
}

.ln-wz-sum-row > b[dir="rtl"] {
    font-family: var(--ln-ar);
    font-size: 21px;
    line-height: 1.4;
}

.ln-wz-sum-row > em {
    grid-column: 2;
    font-style: normal;
    font-size: 12px;
    color: var(--ln-muted);
}

/* док с двумя кнопками (мастер и экраны «Хифза») */
.ln-wz-dock,
.ln-hz-dock {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
}

/* ---------- экран заучивания ---------- */
.ln-hz-head-ar {
    direction: rtl;
    text-align: right;
    font-family: var(--ln-ar);
    font-size: clamp(26px, 9vw, 34px);
    line-height: 1.6;
    color: var(--ln-text);
    word-break: break-word;
}

.ln-hz-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ln-muted);
}

.ln-hz-due {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ln-hz-due-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--ln-line);
}

.ln-hz-due-row:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.ln-hz-due-text {
    min-width: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--ln-ar);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ln-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-hz-due-acts {
    display: flex;
    gap: 6px;
}

.ln-hz-ar-big {
    direction: rtl;
    text-align: right;
    font-family: var(--ln-ar);
    font-size: clamp(21px, 8vw, 30px);
    line-height: 2;
    color: var(--ln-text);
    word-break: break-word;
    margin: 4px 0 8px;
}

.ln-hz-ar-note {
    font-size: 12.5px;
    color: var(--ln-muted);
    margin-bottom: 10px;
}

.ln-hz-invite {
    display: grid;
    gap: 7px;
    justify-items: center;
    text-align: center;
    margin-top: 14px;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--ln-accent-soft);
    border: 1px dashed rgba(46, 168, 118, .5);
}

.ln-hz-invite b {
    font-size: 16px;
}

.ln-hz-invite span {
    display: block;
    line-height: 1.45;
}

.ln-hz-ayahs {
    display: grid;
    gap: 6px;
}

.ln-hz-ayah {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 7px 9px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ln-hz-ayah.is-cur {
    border-color: var(--ln-accent);
    background: var(--ln-accent-soft);
}

.ln-hz-ayah-text {
    min-width: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--ln-ar);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ln-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ln-hz-ayah.is-done .ln-hz-ayah-text {
    color: var(--ln-text);
}

.ln-hz-ayah-st {
    font-size: 11px;
    color: var(--ln-muted);
    white-space: nowrap;
}

.ln-hz-ayah.is-done .ln-hz-ayah-st {
    color: var(--ln-accent-2);
}

.ln-hz-ayah.is-rep .ln-hz-ayah-st {
    color: var(--ln-warn);
}

.ln-hz-ayah.is-cur .ln-hz-ayah-st {
    color: var(--ln-accent-2);
}

/* ---------- экзамен ---------- */
.ln-hz-words {
    direction: rtl;
    text-align: right;
    margin-top: 10px;
    padding: 10px;
    border-radius: 13px;
    background: var(--ln-bg-3);
    border: 1px solid var(--ln-line);
    font-family: var(--ln-ar);
    font-size: clamp(18px, 7vw, 25px);
    line-height: 2.1;
    word-break: break-word;
}

.ln-hz-w {
    display: inline-block;
    padding: 1px 5px;
    margin: 1px 2px;
    border-radius: 7px;
}

.ln-hz-w.is-ok {
    color: var(--ln-accent-2);
    background: var(--ln-accent-soft);
}

.ln-hz-w.is-bad {
    color: var(--ln-danger);
    background: var(--ln-danger-soft);
}

/* живая подсветка экзамена: слово, которое ждём сейчас (курсор чтения) */
.ln-hz-w.is-now {
    box-shadow: inset 0 0 0 2px var(--ln-accent);
    animation: ln-hz-now 1.4s ease-in-out infinite;
}

/* пропущено: слово аята не прозвучало вовсе */
.ln-hz-w.is-miss {
    color: var(--ln-danger);
    background: transparent;
    text-decoration: line-through;
    text-decoration-color: var(--ln-danger);
}

@keyframes ln-hz-now {
    0%, 100% { box-shadow: inset 0 0 0 2px var(--ln-accent); }
    50% { box-shadow: inset 0 0 0 2px rgba(46, 168, 118, .25); }
}

.ln-hz-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 13px;
}

.ln-hz-verdict.is-ok {
    background: var(--ln-accent-soft);
    color: var(--ln-accent-2);
}

.ln-hz-verdict.is-bad {
    background: var(--ln-danger-soft);
    color: var(--ln-danger);
}

.ln-hz-verdict-ico {
    font-size: 24px;
    line-height: 1;
}

.ln-hz-verdict b {
    display: block;
    font-size: 15px;
}

.ln-hz-verdict small {
    display: block;
    font-size: 12px;
    color: var(--ln-muted);
}

.ln-hz-status {
    min-height: 18px;
    margin: 9px 0 0;
    font-size: 12.5px;
    color: var(--ln-muted);
}

.ln-hz-self {
    display: grid;
    gap: 8px;
    justify-items: start;
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: var(--ln-warn-soft);
    border: 1px solid rgba(217, 181, 74, .35);
}

.ln-hz-self-btns {
    display: grid;
    gap: 8px;
    width: 100%;
}

.ln-hz-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ln-warn-soft);
    color: var(--ln-warn);
    font-size: 13px;
    line-height: 1.45;
}

.ln-hz-warn i {
    flex: none;
    margin-top: 2px;
}

.ln-btn.is-rec {
    background: var(--ln-danger);
    border-color: transparent;
    color: var(--ln-text);
    box-shadow: none;
}

/* ---------- «Мой прогресс» → вкладка «Хифз» ---------- */
.ln-hz-nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
}

.ln-hz-stat-cur {
    padding-top: 12px;
    border-top: 1px solid var(--ln-line);
}

.ln-hz-plan-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px 10px;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--ln-muted);
}

.ln-hz-plan > .ln-btn {
    margin-top: 11px;
}

.ln-hzchart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 118px;
    padding-top: 4px;
}

.ln-hzbar {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.ln-hzbar i {
    display: block;
    width: 100%;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--ln-blue), rgba(96, 165, 250, .3));
}

.ln-hzbar.is-today i {
    background: linear-gradient(180deg, var(--ln-warn), rgba(217, 181, 74, .3));
}

.ln-hzbar b {
    margin-top: 5px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--ln-muted);
    white-space: nowrap;
}

.ln-hzbar.is-today b {
    color: var(--ln-warn);
}

/* ---------- адаптив ---------- */
@media (min-width: 560px) {
    .ln-hz-nums {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ln-hz-self-btns {
        grid-template-columns: 1fr 1fr;
    }

    .ln-hz-actions {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        align-items: start;
    }
}

@media (max-width: 420px) {
    .ln-hz-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .ln-hz-item-side {
        grid-column: 2;
        justify-items: start;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .ln-hz-due-row {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .ln-hz-due-row > .ln-btn,
    .ln-hz-due-acts {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .ln-hz-due-acts .ln-btn {
        flex: 1 1 0;
    }

    .ln-hz-ayah {
        grid-template-columns: 26px minmax(0, 1fr) auto;
    }

    .ln-hz-ayah-st {
        display: none;
    }

    .ln-wz-sum-row {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .ln-wz-list {
        max-height: 48vh;
    }

    /* две кнопки в доке на узком экране: компактнее, чтобы текст не ломал док */
    .ln-wz-dock .ln-btn,
    .ln-hz-dock .ln-btn {
        min-height: 44px;
        padding: 9px 6px;
        font-size: 13px;
    }
}