:root{
    --bg:#f3f6fa;
    --card:#ffffff;
    --text:#0d2137;
    --sub:#5a6b7e;
    --gray:#e8edf3;

    --blue:#1f4e8c;
    --blue-deep:#163d70;
    --blue-soft:#e7eff9;
    --blue-fill:#1f4e8c;
    --line:#e2e8f0;
    --tint:#eef3f8;

    --rx:#a3231a;
    --rx-bg:#fdecea;
    --otc:#0b6a44;
    --otc-bg:#e4f3ea;

    --muted:#66768a;
    --track:#cfd8e3;
    --line-strong:#c9d6e6;
    --glass:rgba(255,255,255,.94);
    --glass-soft:rgba(255,255,255,.8);
    --bg-glass:rgba(243,246,250,.92);
    --rx-line:#efb1ac;
    --rx-text:#7a2318;
    --otc-line:#9fd8bb;
    --warn-bg:#fff8ec;
    --warn-line:#f3cf8f;
    --warn-text:#8a4b00;

    --shadow:
        0 1px 2px rgba(13,33,55,.04),
        0 8px 24px rgba(13,33,55,.06);

    color-scheme:light;
}

/* =========================
   НОЧНОЙ РЕЖИМ
   Включается кнопкой в шапке (html[data-theme="dark"]); по умолчанию —
   как тема Telegram. Те же переменные, другие значения.
========================= */
html[data-theme="dark"]{
    --bg:#0f151d;
    --card:#18212d;
    --text:#e6edf5;
    --sub:#9aabbf;
    --gray:#253140;

    --blue:#5b9bea;
    --blue-deep:#7fb0f0;
    --blue-soft:#1c2c42;
    --blue-fill:#2d6cc4;
    --line:#2a3646;
    --tint:#1e2936;

    --rx:#ff8a7e;
    --rx-bg:#3a1f1e;
    --otc:#5fd3a0;
    --otc-bg:#15302a;

    --muted:#7d8da1;
    --track:#344355;
    --line-strong:#3a4a5e;
    --glass:rgba(24,33,45,.94);
    --glass-soft:rgba(24,33,45,.8);
    --bg-glass:rgba(15,21,29,.92);
    --rx-line:#6b3330;
    --rx-text:#ffb3aa;
    --otc-line:#2f6b52;
    --warn-bg:#33281a;
    --warn-line:#6b5226;
    --warn-text:#f3c27a;

    --shadow:
        0 1px 2px rgba(0,0,0,.3),
        0 8px 24px rgba(0,0,0,.35);

    color-scheme:dark;
}

/* фото упаковок в ночном режиме не приглушаем: упаковка — как на фото,
   меняется только фон вокруг неё (images/night/*.webp) */

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

html{
    width:100%;
    height:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    padding:0;

    width:100%;
    min-height:100vh;

    overflow-x:hidden;

    background:var(--bg);
    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* фон: спирали ДНК и хромосомы (tools/dna_bg.py) — неподвижный слой под контентом,
   ≈8,5 КБ; включается классом bg-on после load (app.js), в LCP не участвует */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:center/cover no-repeat;
    opacity:0;
    transition:opacity .6s ease;
}
html.bg-on body::before{ background-image:url(bg-dna-light.svg); opacity:1; }
html.bg-on[data-theme="dark"] body::before{ background-image:url(bg-dna-dark.svg); }

:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

/* =========================
   HEADER
========================= */

.header{
    background:var(--card);
    border-bottom:1px solid var(--line);

    padding:
        calc(12px + env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        12px
        max(16px, env(safe-area-inset-left));
}

.header-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    width:40px;
    height:40px;
    object-fit:contain;
    flex-shrink:0;
}

/* логотип тёмно-синий — на ночной шапке кладём его на светлую плашку */
html[data-theme="dark"] .logo{
    background:#fff;
    border-radius:10px;
    padding:3px;
    filter:none;
}

.brand{
    font-size:16px;
    font-weight:700;
    color:var(--blue-deep);
    line-height:1.2;
    letter-spacing:-.01em;
}

.sub{
    margin-top:3px;
    font-size:12px;
    color:var(--sub);
    line-height:1.35;
}

/* =========================
   BANNER SLIDER
========================= */

#homeBanner{
    padding:
        14px
        max(12px, env(safe-area-inset-right))
        0
        max(12px, env(safe-area-inset-left));
}

.banner-slider{
    width:100%;
    height:22vw;
    min-height:140px;
    max-height:260px;

    border-radius:18px;
    overflow:hidden;
    position:relative;

    background:var(--card);
    border:1px solid var(--line);
}

.banner-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .5s ease;
}

.banner-slide.active{
    opacity:1;
}

.banner-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    background:var(--card);
}

/* =========================
   SEARCH (sticky)
========================= */

.top{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:90;

    background:var(--bg-glass);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    padding:
        10px
        max(12px, env(safe-area-inset-right))
        10px
        max(12px, env(safe-area-inset-left));
}

.search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
}

.search{
    flex:1;
    min-width:0;
    height:48px;

    border:1px solid var(--line);
    outline:none;

    background:var(--card);
    color:var(--text);

    border-radius:14px;
    padding:0 16px;

    font-size:16px;
    font-family:inherit;
}

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

.search:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(31,78,140,.14);
}

.search-btn,
.clear-search-btn{
    height:48px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    flex-shrink:0;
}

.search-btn{
    width:48px;
    border:none;
    background:var(--blue-fill);
    color:#fff;
}

.clear-search-btn{
    width:44px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--sub);
    font-size:22px;
    font-family:inherit;
}

.clear-search-btn{ display:none; }
.clear-search-btn.show{ display:flex; }

.search-btn:active,
.clear-search-btn:active{
    transform:scale(.96);
}

/* =========================
   BANNER: dots, tap, swipe
========================= */

.banner-slider{
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
}

.banner-slide img{
    -webkit-user-drag:none;
    pointer-events:none;
}

.banner-slide.clickable{
    cursor:pointer;
}

.banner-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    display:flex;
    justify-content:center;
    gap:6px;
    pointer-events:none;
}

.banner-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(13,33,55,.28);
    transition:width .2s ease, background .2s ease;
}

.banner-dots span.active{
    width:16px;
    border-radius:3px;
    background:var(--blue);
}

/* =========================
   FONT SIZE BUTTON + SWITCH
========================= */

.header-top > div{
    min-width:0;
}

.theme-btn{
    margin-left:auto;
    flex-shrink:0;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;

    border:1px solid var(--line);
    border-radius:12px;

    background:var(--card);
    color:var(--blue);

    cursor:pointer;
}

.theme-btn svg{ width:22px; height:22px; }
.theme-btn .ico-moon{ fill:currentColor; }
.theme-btn .ico-sun{ display:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.theme-btn .ico-sun circle{ fill:currentColor; stroke:none; }

/* язык: стеклянная кнопка с глобусом слева от кнопки темы; нажатие — меню с флагами (макет C, 02.11.2026) */
.lang-pick{ position:relative; margin-left:auto; flex-shrink:0; }
.lang-pick + .theme-btn{ margin-left:8px; }
.lang-btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:5px;
    height:44px;
    min-width:44px;
    padding:0 13px 0 11px;
    border-radius:22px;
    color:var(--blue);
    font:inherit;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
}
html[data-theme="dark"] .lang-btn{ color:var(--lg-active); }
.lang-btn:active{ transform:scale(.96); }
.lang-globe{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
html.lang-uz .lang-cur[lang="ru"],
html:not(.lang-uz) .lang-cur[lang="uz"],
html.lang-uz .lang-now[lang="ru"],
html:not(.lang-uz) .lang-now[lang="uz"]{ display:none; }
/* в шапке вместо глобуса — флаг текущего языка (03.11.2026) */
.lang-now{ display:none; }
.header .lang-now{ display:block; width:26px; height:26px; }

.lang-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:60;
    width:196px;
    padding:6px;
    border-radius:18px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px) scale(.97);
    transform-origin:top right;
    transition:opacity .16s ease, transform .2s cubic-bezier(.3,.8,.3,1), visibility 0s .2s;
}
.lang-pick.up .lang-menu{ top:auto; bottom:calc(100% + 8px); transform-origin:bottom right; transform:translateY(6px) scale(.97); }
.lang-pick.open .lang-menu{ opacity:1; visibility:visible; transform:none; transition:opacity .16s ease, transform .2s cubic-bezier(.3,.8,.3,1); }
.lang-menu button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    height:46px;
    padding:0 10px;
    border:0;
    border-radius:12px;
    background:none;
    color:var(--lg-ink);
    font:inherit;
    font-size:15px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}
.lang-menu button[aria-checked="true"]{ background:var(--lg-pill); box-shadow:var(--lg-pill-hl); }
html[data-theme="dark"] .lang-menu button[aria-checked="true"]{ background:rgba(255,255,255,.1); box-shadow:none; }
.lang-flag{
    width:24px;
    height:24px;
    flex-shrink:0;
    border-radius:50%;
    background-size:cover;
    /* обводка нейтральная, без оттенка: белая полоса флага не сливается с меню */
    box-shadow:0 0 0 1px oklch(0 0 0 / .1);
}
html[data-theme="dark"] .lang-flag{ box-shadow:0 0 0 1px oklch(1 0 0 / .1); }
.lang-flag.uz{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect width='30' height='10' fill='%230099b5'/><rect y='10' width='30' height='10' fill='%23fff'/><rect y='20' width='30' height='10' fill='%231eb53a'/><rect y='9.4' width='30' height='1.2' fill='%23ce1126'/><rect y='19.4' width='30' height='1.2' fill='%23ce1126'/><circle cx='9' cy='5' r='3.2' fill='%23fff'/><circle cx='10.3' cy='5' r='2.8' fill='%230099b5'/><circle cx='14' cy='3.4' r='.7' fill='%23fff'/><circle cx='16.2' cy='3.4' r='.7' fill='%23fff'/><circle cx='14' cy='6.4' r='.7' fill='%23fff'/><circle cx='16.2' cy='6.4' r='.7' fill='%23fff'/></svg>"); }
.lang-flag.ru{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect width='30' height='10' fill='%23fff'/><rect y='10' width='30' height='10' fill='%230039a6'/><rect y='20' width='30' height='10' fill='%23d52b1e'/></svg>"); }
.lang-check{ margin-left:auto; width:18px; height:18px; fill:none; stroke:var(--blue); stroke-width:2;
              stroke-linecap:round; stroke-linejoin:round; visibility:hidden; }
html[data-theme="dark"] .lang-check{ stroke:var(--lg-active); }
.lang-menu button[aria-checked="true"] .lang-check{ visibility:visible; }
@media (prefers-reduced-motion: reduce){ .lang-menu, .lang-pick.open .lang-menu{ transition:none; } }
.header .lang-btn{ width:44px; padding:0; justify-content:center; }
.header .lang-globe{ display:none; }
/* узбекская инструкция: откуда текст и русский оригинал для сверки */
.info-src{ margin:10px 0 0; font-size:12.5px; line-height:1.4; color:var(--sub); }
.info-orig{ margin-top:8px; }
.info-orig summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--blue); }
.info-orig .info-text{ margin-top:8px; }
/* тот же переключатель в «Профиле → Настройки» (там шапки нет) */
.pf-lang{ cursor:default; padding-top:8px; padding-bottom:8px; }
.pf-lang:active{ background:none; }
.pf-lang .lang-pick{ margin-left:auto; }
/* слева в строке уже есть глобус — в кнопке второй не нужен */
.pf-lang .lang-globe{ display:none; }
.pf-lang .lang-btn{ padding:0 16px; }
.pf-group.lang-open{ overflow:visible; position:relative; z-index:5; }
.pf-group.lang-open .pf-lang{ position:relative; z-index:5; }

/* в ночном режиме кнопка показывает солнце — «вернуть дневной» */
html[data-theme="dark"] .theme-btn{ color:#f5c451; }
html[data-theme="dark"] .theme-btn .ico-moon{ display:none; }
html[data-theme="dark"] .theme-btn .ico-sun{ display:block; }

.theme-btn:active{
    transform:scale(.96);
}

/* =========================
   BIG FONT MODE
========================= */

body.big-font .brand{ font-size:18px; }
body.big-font .sub{ font-size:14px; }
body.big-font .search{ font-size:18px; }
body.big-font .suggest-item{ font-size:18px; padding:15px 14px; }
body.big-font .suggest-tag{ font-size:13px; }

body.big-font .card .title{ font-size:19px; -webkit-line-clamp:4; }
body.big-font .form{ font-size:17px; }
body.big-font .recipe-badge{ font-size:14px; }
body.big-font .card-cta{ font-size:16px; }
body.big-font .card img{ aspect-ratio:16 / 10; }

body.big-font .btn,
body.big-font .more-btn{ font-size:18px; padding-top:16px; padding-bottom:16px; }

body.big-font .detail .title{ font-size:27px; }
body.big-font .fact-label{ font-size:14px; }
body.big-font .fact-value{ font-size:19px; }
body.big-font .block{ font-size:19px; line-height:1.6; }
body.big-font .block-title{ font-size:16px; }

body.big-font .nav-item{ font-size:13px; }



body.big-font .toast{ font-size:17px; }

@media (max-width:639px){
    body.big-font #list:not(.full-width-page){
        grid-template-columns:1fr;
    }
}

/* =========================
   SEARCH SUGGESTIONS
========================= */

.suggest-box{
    position:absolute;
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    top:calc(100% - 6px);
    z-index:95;

    display:none;

    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.suggest-box.show{
    display:block;
}

.suggest-item{
    display:flex;
    align-items:center;
    gap:10px;

    padding:13px 14px;

    font-size:15px;
    color:var(--text);

    border-bottom:1px solid var(--line);
    cursor:pointer;
}

.suggest-item:last-child{
    border-bottom:none;
}

.suggest-item:active{
    background:var(--tint);
}

.suggest-text{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.suggest-tag{
    flex-shrink:0;
    padding:3px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    background:var(--gray);
    color:var(--sub);
}

.suggest-tag.symptom{
    background:var(--blue-soft);
    color:var(--blue);
}

/* =========================
   GRID
========================= */

#list{
    width:100%;
    max-width:1200px;
    margin:0 auto;

    display:grid;
    gap:12px;

    grid-template-columns:repeat(2, minmax(0,1fr));

    padding:
        6px
        max(12px, env(safe-area-inset-right))
        calc(100px + env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
}

@media (min-width:640px){
    #list{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:16px;
    }
}

@media (min-width:1000px){
    #list{
        grid-template-columns:repeat(4, minmax(0,1fr));
    }
}

/* =========================
   CARD
========================= */

.card{
    background:var(--card);
    border-radius:18px;
    overflow:hidden;

    border:1px solid var(--line);
    box-shadow:var(--shadow);

    display:flex;
    flex-direction:column;

    cursor:pointer;
    transition:transform .12s ease;
}

.card:active{
    transform:scale(.985);
}

/* карточки списка ниже экрана браузер не раскладывает, пока до них не докрутили:
   при открытии весь список — под подборками, а его раскладка (шрифты, текст)
   была самой долгой задачей входа. auto — после первого показа помнится настоящая высота */
#list .card{
    content-visibility:auto;
    contain-intrinsic-size:auto 240px;
}

.card img{
    width:100%;
    aspect-ratio:5 / 4;
    height:auto;

    object-fit:contain;
    background:var(--card);
    padding:12px;

    border-bottom:1px solid var(--line);
}

.card-body{
    padding:12px;

    display:flex;
    flex-direction:column;

    flex:1;
    justify-content:space-between;
}

.title{
    font-size:16px;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
    letter-spacing:-.005em;
}

.card .title{
    font-size:15px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
}

.form{
    margin-top:8px;
    font-size:15px;
    line-height:1.6;
    color:var(--sub);
}

.recipe-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    margin-top:8px;
    padding:4px 10px 4px 8px;

    border-radius:999px;

    font-size:12px;
    font-weight:600;
    line-height:1.3;
}

.recipe-badge::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0;
}

.recipe-badge.recipe-red{
    background:var(--rx-bg);
    color:var(--rx);
}

.recipe-badge.recipe-green{
    background:var(--otc-bg);
    color:var(--otc);
}

.card-cta{
    margin-top:12px;
    padding-top:10px;

    border-top:1px solid var(--line);

    display:flex;
    align-items:center;
    justify-content:space-between;

    font-size:13px;
    font-weight:600;
    color:var(--blue);
}

.card-cta::after{
    content:"›";
    font-size:20px;
    line-height:1;
}

/* =========================
   BUTTONS
========================= */

.btn{
    margin-top:12px;

    background:var(--blue-soft);
    color:var(--blue-deep);

    border-radius:12px;
    padding:14px;

    text-align:center;

    font-size:15px;
    font-weight:600;

    border:none;
    cursor:pointer;
}

.btn:active{
    transform:scale(.96);
}

.btn-primary{
    background:var(--blue-fill);
    color:#fff;
}

.btn-outline{
    background:var(--card);
    color:var(--blue);
    border:1px solid var(--line-strong);
}

.btn-quiet{
    background:transparent;
    color:var(--sub);
}

.more-btn{
    width:100%;
    border:1px solid var(--line-strong);
    background:var(--card);
    color:var(--blue);
    border-radius:14px;
    padding:15px;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
}

.more-btn:active{
    transform:scale(.96);
}

/* =========================
   DETAIL PAGE
========================= */

.detail-page{
    background:var(--card);
    border-radius:20px;
    overflow:hidden;

    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.big-img{
    width:100%;
    height:280px;

    object-fit:contain;
    background:var(--card);
    padding:16px;

    border-bottom:1px solid var(--line);
}

.detail{
    padding:18px 16px 16px;
}

.detail .title{
    font-size:22px;
    font-weight:750;
    line-height:1.2;
    letter-spacing:-.015em;
}

.facts{
    margin-top:16px;

    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
}

.fact{
    background:var(--tint);
    border-radius:12px;
    padding:10px 12px;
}

.fact-wide{
    grid-column:1 / -1;
}

/* видео, которое рисует код (live.htm?id=<id>): холст в iframe, поверх — кнопка и полоса */
.live-video{
    display:block;
    width:100%;
    margin-top:10px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.lv-screen{
    position:relative; display:block;
    width:100%; aspect-ratio:1;
    border-radius:14px; overflow:hidden;
    background:#0d2137;
}
.lv-frame{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s;
}
.live-video.ready .lv-frame{ opacity:1; }
.lv-play{
    position:absolute; left:50%; top:50%;
    width:64px; height:64px; margin:-32px 0 0 -32px;
    border-radius:50%;
    background:rgba(13,33,55,.72);
    box-shadow:0 4px 18px rgba(0,0,0,.25);
    transition:opacity .2s, transform .2s;
}
.lv-play::after{
    content:''; position:absolute; left:25px; top:19px;
    border-style:solid; border-width:13px 0 13px 22px;
    border-color:transparent transparent transparent #fff;
}
.live-video.ended .lv-play::after{
    /* повтор: круглая стрелка */
    left:19px; top:19px; width:20px; height:20px;
    border:4px solid #fff; border-right-color:transparent; border-radius:50%;
}
.live-video.playing .lv-play{ opacity:0; transform:scale(.8); }
.live-video:not(.ready) .lv-play{ opacity:.5; }
/* полоса перемотки — под видео, чтобы не закрывать подписи: зона касания во всю ширину
   и 44px высотой, сама полоса — 6px с бегунком */
.lv-ctrl{
    display:flex; align-items:center; gap:12px;
    height:44px; padding:0 8px 0 4px;
    touch-action:none;
    opacity:.45; transition:opacity .2s;
}
.live-video.ready .lv-ctrl{ opacity:1; }
.lv-time{
    flex:none; min-width:34px;
    font-size:13px; font-weight:600; color:var(--sub);
    font-variant-numeric:tabular-nums;
}
.lv-bar{
    position:relative; flex:1;
    height:6px; border-radius:3px;
    background:rgba(45,108,196,.18);
}
.lv-bar i{
    position:relative; display:block; height:100%; width:0;
    border-radius:3px; background:#2d6cc4;
}
.lv-bar i::after{
    content:''; position:absolute; right:-9px; top:50%;
    width:18px; height:18px; margin-top:-9px;
    border-radius:50%; background:#2d6cc4;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:transform .15s;
}
.live-video.seeking .lv-bar i::after{ transform:scale(1.3); }
.live-video.failed .lv-play{ display:none; }
.lv-msg{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:24px; text-align:center;
    font-size:15px; line-height:1.4; color:#fff;
}
.live-video:focus-visible{ outline:3px solid var(--accent, #2d6cc4); outline-offset:2px; }

.fact-label{
    font-size:12px;
    font-weight:600;
    color:var(--sub);
}

.fact-value{
    margin-top:3px;

    font-size:15px;
    font-weight:600;
    line-height:1.35;

    color:var(--text);
    overflow-wrap:anywhere;
}

.block{
    margin-top:22px;

    font-size:15px;
    line-height:1.65;
    color:var(--text);
}

.block-title{
    margin-bottom:6px;

    font-size:13px;
    font-weight:700;
    color:var(--blue);
}

.actions{
    margin-top:28px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.actions .btn{
    margin-top:0;
}

.empty{
    grid-column:1 / -1;
    text-align:center;
    color:var(--sub);
    padding:50px 20px;
}

/* =========================
   BOTTOM NAV
========================= */

.bottom-nav{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:calc(64px + env(safe-area-inset-bottom));

    background:var(--glass);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-top:1px solid var(--line);

    display:flex;

    z-index:9999;

    padding-bottom:env(safe-area-inset-bottom);
}

.nav-item{
    flex:1;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:3px;

    color:var(--muted);

    font-size:11px;
    font-weight:600;

    cursor:pointer;
}

.nav-item.active{
    color:var(--blue);
}

.nav-icon{
    width:52px;
    height:28px;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:background .2s ease;
}

.nav-item.active .nav-icon{
    background:var(--blue-soft);
}

.nav-icon svg{
    width:22px;
    height:22px;
    fill:currentColor;
}

/* =========================
   LIST HELPERS
========================= */

.full-width-page{
    width:100% !important;

    display:block !important;

    padding:
        6px
        max(12px, env(safe-area-inset-right))
        calc(100px + env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
}

.banner-hidden{
    display:none !important;
}

/* шапка с логотипом только на «Главной»; на остальных вкладках
   её место занимает отступ под вырез экрана */
body.no-header #mainHeader{
    display:none;
}

body.no-header #list,
body.no-header .full-width-page{
    padding-top:calc(14px + env(safe-area-inset-top)) !important;
}

/* =========================
   PROFILE
========================= */

.pf{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:640px;
    margin:0 auto;
    padding-top:4px;
}

.pf-head{
    display:flex;
    align-items:center;
    gap:14px;
    padding:4px 4px 0;
}

.pf-avatar{
    width:52px;
    height:52px;
    flex:none;
    border-radius:50%;
    overflow:hidden;
    background:var(--tint);
    border:1px solid var(--line);
    color:var(--blue-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
}

.pf-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.pf-name{
    font-size:19px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.2;
    overflow-wrap:anywhere;
}

.pf-role{
    margin-top:2px;
    font-size:13px;
    color:var(--sub);
}

.pf-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
}

.pf-stat{
    padding:12px 14px;
    cursor:pointer;
}

.pf-stat + .pf-stat{
    border-left:1px solid var(--line);
}

.pf-stat:active{ background:var(--tint); }

.pf-stat b{
    display:block;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.1;
}

.pf-stat span{
    display:block;
    margin-top:3px;
    font-size:12.5px;
    color:var(--sub);
}

.pf-label{
    margin:0 4px 8px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--sub);
}

.pf-group{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
}

.pf-row{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:50px;
    padding:12px 14px;
    color:var(--text);
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
}

.pf-row + .pf-row{
    border-top:1px solid var(--line);
}

.pf-row:active{ background:var(--tint); }

.pf-ico{
    flex:none;
    width:20px;
    height:20px;
    color:var(--blue);
    display:flex;
}

.pf-ico svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pf-text{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pf-text.wrap{
    white-space:normal;
    overflow-wrap:anywhere;
}

.pf-chev{
    flex:none;
    color:var(--muted);
    font-size:20px;
    line-height:1;
}

.pf-row.quiet{
    justify-content:center;
    color:var(--sub);
    font-size:14px;
}

.pf-empty{
    padding:14px;
    font-size:14px;
    color:var(--sub);
}

.pf-company{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-bottom:1px solid var(--line);
}

.pf-company img{
    width:40px;
    height:40px;
    object-fit:contain;
    flex:none;
}

.pf-company b{
    display:block;
    font-size:15px;
    color:var(--blue-deep);
    letter-spacing:.01em;
}

.pf-company span{
    display:block;
    margin-top:2px;
    font-size:12.5px;
    line-height:1.35;
    color:var(--sub);
}

.pf-foot{
    padding:0 8px 4px;
    font-size:12px;
    line-height:1.55;
    text-align:center;
    color:var(--sub);
}

.font-switch{
    position:relative;
    flex-shrink:0;
    width:46px;
    height:28px;
    border-radius:999px;
    background:var(--track);
    transition:background .2s ease;
}

.font-switch::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--card);
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .2s ease;
}

.font-switch.on{ background:var(--blue); }
.font-switch.on::after{ transform:translateX(18px); }

body.big-font .pf-name{ font-size:23px; }
body.big-font .pf-role{ font-size:15px; }
body.big-font .pf-stat b{ font-size:26px; }
body.big-font .pf-stat span{ font-size:15px; }
body.big-font .pf-label{ font-size:14px; }
body.big-font .pf-row{ font-size:18px; }
body.big-font .pf-row.quiet{ font-size:16px; }
body.big-font .pf-empty{ font-size:16px; }
body.big-font .pf-company b{ font-size:18px; }
body.big-font .pf-company span{ font-size:15px; }
body.big-font .pf-foot{ font-size:14.5px; }

/* =========================
   SPLASH / SCROLL-TOP / TOAST
========================= */

.splash-screen{
    position:fixed;
    inset:0;
    z-index:9999999;
    background:var(--card);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.booting>:not(.splash-screen):not(.outside-box){visibility:hidden}
.splash-screen img{
    width:150px;
    height:150px;
    object-fit:contain;
}

#scrollTopBtn{
    position:fixed;
    right:16px;
    bottom:calc(88px + env(safe-area-inset-bottom));

    width:46px;
    height:46px;

    border-radius:50%;

    background:var(--card);
    color:var(--blue);

    border:1px solid var(--line);

    display:none;
    align-items:center;
    justify-content:center;

    font-size:22px;
    font-weight:700;

    box-shadow:0 6px 18px rgba(13,33,55,.16);

    z-index:9998;
    cursor:pointer;
}

#scrollTopBtn:active{
    transform:scale(.96);
}

@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}


/* =========================
   FAVORITES + DISCLAIMER
========================= */

.card{ position:relative; }

.fav-btn{
    position:absolute;
    top:8px;
    right:8px;
    z-index:2;

    width:38px;
    height:38px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:50%;
    background:var(--glass);
    box-shadow:0 1px 6px rgba(20,40,70,.18);

    color:var(--muted);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, color .15s ease;
}

.fav-btn svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linejoin:round;
    pointer-events:none;
}

.fav-btn.on{ color:#f5a623; }
.fav-btn.on svg{ fill:currentColor; }
.fav-btn:active{ transform:scale(.96); }
/* звёздочка на карточке каталога — зона нажатия расширена до 48px
   (в шапке карточки препарата кнопка уже 42–48px и стоит в потоке) */
.fav-btn:not(.inline)::after{ content:""; position:absolute; inset:-3px; }
/* ночью тёмный круг звёздочки «откусывал» угол упаковки — делаем его
   матовым стеклом, сквозь которое видно фото */
html[data-theme="dark"] .fav-btn:not(.inline){
    background:rgba(24,33,45,.42);
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
    backdrop-filter:blur(8px) saturate(1.2);
    box-shadow:0 1px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}

.detail-head{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.detail-head .title{ flex:1; min-width:0; }

.fav-btn.inline{
    position:static;
    flex:none;
    width:42px;
    height:42px;
    background:var(--tint);
    box-shadow:none;
}

.disclaimer{
    margin-top:22px;
    padding-top:14px;
    border-top:1px solid var(--line);

    font-size:12.5px;
    line-height:1.5;
    text-align:center;
    color:var(--sub);
}

body.big-font .disclaimer{ font-size:15px; }
body.big-font .fav-btn{ width:44px; height:44px; }
body.big-font .fav-btn.inline{ width:48px; height:48px; }


/* ===== RED FLAGS ===== */
.rf{grid-column:1/-1;background:var(--rx-bg);border:1.5px solid var(--rx-line);border-radius:16px;padding:18px;color:var(--rx-text)}
.rf-title{font-size:20px;font-weight:700;margin-bottom:2px}
.rf-sub{font-size:14px;font-weight:600;opacity:.85;margin-bottom:10px}
.rf-text{font-size:14.5px;line-height:1.5;margin-bottom:6px}
.rf .btn-call{background:var(--rx);color:#fff}
body.big-font .rf-text{font-size:17px}
body.big-font .rf-sub{font-size:16px}

/* ===== КАРТА ТЕЛА ===== */
.bm-entry{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:8px 14px 8px 8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);font:inherit;color:var(--text);text-align:left;cursor:pointer}
.bm-entry::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(31,78,140,.16),transparent);transform:skewX(-20deg);animation:bmEntryShine 4s ease-in-out infinite !important;pointer-events:none}
/* мягкие эффекты карточки работают и при «уменьшить движение» (на десктопе Windows это часто включено),
   поэтому у её анимаций !important — общий сброс для prefers-reduced-motion их не гасит */
/* блик едет через transform (видеокарта), а не через left: анимация left заставляла браузер
   раскладывать страницу на каждом кадре — и на главной, и в карточке. 475% = (130% + 60%) / ширина блика 40% */
@keyframes bmEntryShine{0%,60%{transform:translateX(0) skewX(-20deg)}100%{transform:translateX(475%) skewX(-20deg)}}
@keyframes bmEntryIco{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* кнопка «Как … действует внутри тела» в карточке препарата */
.jrn-entry{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 4px;padding:8px 14px 8px 8px;border-radius:16px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);font:inherit;color:var(--text);text-align:left;cursor:pointer}
.jrn-entry::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,122,69,.16),transparent);transform:skewX(-20deg);animation:bmEntryShine 4.5s ease-in-out infinite !important;pointer-events:none}
.jrn-entry:active{transform:scale(.98)}
.jrn-entry-fig{position:relative;flex:none;width:52px;height:78px;border-radius:12px;background:radial-gradient(120% 80% at 50% 100%,var(--blue-soft),transparent 70%)}
.jrn-entry-fig img{position:absolute;inset:4px 6px;width:calc(100% - 12px);height:calc(100% - 8px);object-fit:contain}
.jrn-entry-fig i{position:absolute;left:50%;top:44%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#ff6a3d;box-shadow:0 0 0 3px rgba(255,106,61,.25);animation:jrnEntryDot 3s ease-in-out infinite !important}
/* то же движение, что top 44% → 22% → 8% у фигуры высотой 78px, но через transform — без раскладки на каждом кадре */
@keyframes jrnEntryDot{0%{transform:translateY(0)}35%{transform:translateY(-17.16px)}60%{transform:translateY(-28.08px)}100%{transform:translateY(0)}}
.jrn-entry-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.jrn-entry-txt b{font-size:15.5px;line-height:1.3}
.jrn-entry-txt small{font-size:12.5px;color:var(--sub)}
body.big-font .jrn-entry-txt b{font-size:18px}
.bm-entry:active{transform:scale(.98)}

/* Голограмма в карточке: слои фигуры стоят на разной «глубине» (translateZ),
   поэтому при покачивании и наклоне телефона они сдвигаются друг относительно друга */
.bm3d{position:relative;flex:none;width:76px;height:122px;perspective:380px;border-radius:12px;background:radial-gradient(120% 80% at 50% 100%,var(--blue-soft),transparent 70%)}
.bm3d-pod{position:absolute;left:50%;bottom:2px;width:66px;height:14px;margin-left:-33px;border-radius:50%;background:radial-gradient(closest-side,rgba(70,150,255,.6),rgba(70,150,255,.2) 60%,transparent);animation:bm3dPod 3s ease-in-out infinite !important}
.bm3d-tilt{position:absolute;inset:2px 6px 8px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.bm3d-fig{position:absolute;inset:0;transform-style:preserve-3d;animation:bm3dSway 6s ease-in-out infinite !important}
.bm3d-fig>*{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bm3d-img{object-fit:contain;opacity:0;transition:opacity .7s ease .4s !important}
.bm-entry.go .bm3d-img{opacity:1}
.bm3d-lines{transform:translateZ(4px)}
.bm3d-lines path{fill:none;stroke:#4f9dff;stroke-width:5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.bm-entry.go .bm3d-lines path{animation:bm3dDraw 1.4s ease-out forwards,bm3dDim .8s ease 1.5s forwards !important}
/* луч сканера виден только на самой фигуре: маска — та же картинка тела */
.bm3d-scan{transform:translateZ(6px);overflow:hidden!important}
/* маска — только когда карточка «Где болит?» видна (.go): иначе body-mini.webp качался на первом входе вместе с app.js */
.bm-entry.go .bm3d-scan{-webkit-mask:url(body-mini.webp?v=2) center/contain no-repeat;mask:url(body-mini.webp?v=2) center/contain no-repeat}
.bm3d-scan rect{opacity:0}
.bm-entry.go .bm3d-scan rect{animation:bm3dScan 5s ease-in-out 1s infinite !important}
.bm3d-dots{transform:translateZ(8px)}
.bm3d-dots circle{transform-box:fill-box;transform-origin:center}
.bm3d-dots .core{fill:#1f6fd1;stroke:#fff;stroke-width:9;transition:fill .3s,transform .3s !important}
.bm3d-dots .ring{fill:none;stroke:#1f6fd1;stroke-width:7;opacity:0}
.bm3d-dots .d{opacity:0;transform-box:fill-box;transform-origin:center}
.bm-entry.go .bm3d-dots .d{animation:bm3dIn .4s ease-out calc(1.3s + var(--i) * .15s) both !important}
.bm-entry.go .bm3d-dots .ring{animation:bmRing 2.4s ease-out infinite !important;animation-delay:calc(1.8s + var(--i) * .5s) !important}
.bm3d-dots .d.on .core{fill:#ff6a3d;transform:scale(1.5)}
.bm3d-dots .d.on .ring{stroke:#ff6a3d}
@keyframes bm3dSway{0%,100%{transform:rotateY(-14deg)}50%{transform:rotateY(14deg)}}
@keyframes bm3dPod{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(1.15);opacity:1}}
@keyframes bm3dDraw{to{stroke-dashoffset:0}}
@keyframes bm3dDim{to{opacity:.22}}
@keyframes bm3dScan{0%{transform:translateY(-140px);opacity:0}10%{opacity:1}45%{transform:translateY(1317px);opacity:1}46%,100%{transform:translateY(1317px);opacity:0}}
@keyframes bm3dIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.bm-entry-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bm-entry-txt b{font-size:16px}
.bm-entry-txt small{font-size:12.5px;color:var(--sub);transition:opacity .25s !important}
.bm-entry-txt small.swap{opacity:0}
.bm-entry-txt small em{font-style:normal;font-weight:700;color:#e2552e}
html[data-theme="dark"] .bm-entry-txt small em{color:#ff8a63}
.bm-entry-arrow{font-size:24px;color:var(--blue)}
body.big-font .bm-entry-txt b{font-size:19px}
body.big-font .bm-entry-txt small{font-size:15px}
#bodyMap{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);transform:translateY(100%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
#bodyMap.open{transform:none;visibility:visible;transition:transform .3s ease}
.bm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px}
.bm-head h2{margin:0;font-size:20px}
.bm-x{border:none;background:var(--gray);color:var(--sub);width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}
.bm-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:6px 0}
.bm-stage svg{height:100%;max-width:100%}
.bm-zone{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;opacity:0;animation:bmIn .45s ease forwards;animation-delay:calc(var(--i)*70ms)}
#bodyMap{overscroll-behavior:contain;touch-action:none}
#bodyMap .bm-panel{touch-action:pan-y;overscroll-behavior:contain}
#bodyMap .bm-chip,#bodyMap .bm-x,#bodyMap .bm-zone{touch-action:manipulation}
@keyframes bmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bm-zone .sh{fill:var(--blue-soft);stroke:#a9c0de;stroke-width:1.5;transition:fill .2s,stroke .2s}
.bm-zone .lo{fill:none;stroke:#a9c0de;stroke-linecap:round;transition:stroke .2s}
.bm-zone .lf{fill:none;stroke:var(--blue-soft);stroke-linecap:round;transition:stroke .2s}
.bm-zone:active .sh{fill:#c9dcf2}
.bm-done .bm-ping{display:none}
@keyframes bmPing{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.bm-zone{animation:none;opacity:1}.bm-ping{display:none}}
.bm-panel{background:var(--card);border-radius:20px 20px 0 0;box-shadow:0 -4px 20px rgba(13,33,55,.08);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));max-height:44vh;overflow:auto}
.bm-ptitle{font-size:17px;font-weight:700;margin-bottom:2px}
.bm-psub{font-size:13px;color:var(--sub);margin-bottom:10px}
.bm-chips{display:flex;flex-wrap:wrap;gap:8px}
.bm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--card);color:var(--blue-deep);padding:9px 13px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.bm-chip:active{transform:scale(.96)}
.bm-chip i{font-style:normal;font-size:11.5px;background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:1px 7px}
.bm-chip.rf{background:var(--rx-bg);border-color:var(--rx-line);color:var(--rx)}
.bm-note{margin-top:12px;font-size:12px;color:var(--sub)}
body.big-font .bm-chip{font-size:17px}
body.big-font .bm-psub,body.big-font .bm-note{font-size:15px}

.bm-stage{position:relative}
.bm-deco{pointer-events:none}
/* --- карта тела: рентген-картинка, красная подсветка --- */
.bm-stage{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;margin:8px 12px 0;padding:6px;overflow:hidden}
.bm-zone .sh{fill:transparent;stroke:none;transition:fill .15s}
/* нажатие — лёгкий синий отклик */
.bm-zone:active .sh{fill:rgba(31,78,140,.14)}
/* выбранная зона — мягкое «тепловое» свечение, которое дышит */
.bm-zone.sel .sh,
#bmSvg.bm-all .bm-zone .sh,
.bm-zone[data-z="joints"].sel circle:not(.bm-joint){fill:url(#bmHeat);stroke:none;filter:url(#bmSoft);animation:bmHeat 2.6s ease-in-out infinite}
#bmSvg.bm-all .bm-zone .sh{animation-duration:3.2s}
@keyframes bmHeat{0%,100%{opacity:.78}50%{opacity:1}}
.bm-joint{fill:rgba(255,255,255,.92);stroke:#1f4e8c;stroke-width:2.3;transition:fill .25s,stroke .25s}
.bm-zone.sel .bm-joint{fill:#ff5a3c;stroke:#fff}
/* после выбора тело слегка приглушается — зона выделяется ярче */
#bmImg{transition:opacity .4s ease}
#bodyMap.bm-done #bmImg{opacity:.72}
/* точка боли с расходящимися кольцами */
.bm-pulse circle{transform-box:fill-box;transform-origin:center}
.bm-pulse .core{fill:#ff5a3c;stroke:#fff;stroke-width:5;animation:bmPop .45s cubic-bezier(.3,1.7,.5,1) both}
.bm-pulse .ring{fill:none;stroke:#ff5a3c;stroke-width:5;opacity:0;animation:bmRing 2s ease-out infinite}
.bm-pulse .ring.r2{animation-delay:1s}
@keyframes bmPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes bmRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.6);opacity:0}}
/* подсказки «нажмите сюда», пока ничего не выбрано */
.bm-hint circle{transform-box:fill-box;transform-origin:center}
.bm-hint .core{fill:#1f6fd1;stroke:#fff;stroke-width:4;opacity:.9}
.bm-hint .ring{fill:none;stroke:#1f6fd1;stroke-width:4;opacity:0;animation:bmRing 2.4s ease-out infinite;animation-delay:var(--d,0s)}
.bm-hint .ring.r2{animation-delay:calc(var(--d,0s) + 1.2s)}
#bodyMap.bm-done .bm-hint{display:none}
/* панель: кнопки появляются по очереди */
.bm-ptitle,.bm-psub{animation:bmUp .3s ease both}
.bm-chips .bm-chip{animation:bmUp .32s ease both;animation-delay:calc(var(--k,0)*40ms + 60ms)}
@keyframes bmUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bm-zone.sel .sh,#bmSvg.bm-all .bm-zone .sh,.bm-pulse .ring,.bm-hint .ring,.bm-chips .bm-chip,.bm-ptitle,.bm-psub,.bm-pulse .core{animation:none}}
.bm-scan{fill:url(#bmScanGrad);opacity:0;pointer-events:none}
@keyframes bmScan{0%{transform:translateY(-60px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(1317px);opacity:0}}
.bm-scan.go{animation:bmScan 1.6s ease-in-out 1}
@media (prefers-reduced-motion:reduce){.bm-scan{display:none}}
.bm-hello{display:flex;align-items:center;gap:10px}
.bm-bubble{background:var(--blue-soft);color:var(--blue-deep);padding:10px 12px;border-radius:14px 14px 14px 4px;font-size:14px;font-weight:600}
body.big-font .bm-bubble{font-size:17px}

/* ===== ВРЕМЯ РАБОТЫ СПЕЦИАЛИСТА ===== */
.ask{display:flex;flex-direction:column;gap:8px}
.ask .btn{margin-top:0}
.ask-hint{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--rx-bg);border:1px solid var(--rx-line);border-radius:12px;box-shadow:0 0 12px rgba(224,68,56,.28);animation:askGlowRed 2.6s ease-in-out infinite}
.ask-hint.on{background:var(--otc-bg);border-color:var(--otc-line);box-shadow:0 0 12px rgba(47,163,107,.35);animation:askGlowGreen 2.6s ease-in-out infinite}
@keyframes askGlowGreen{0%,100%{box-shadow:0 0 6px rgba(47,163,107,.22)}50%{box-shadow:0 0 16px rgba(47,163,107,.5)}}
@keyframes askGlowRed{0%,100%{box-shadow:0 0 6px rgba(224,68,56,.18)}50%{box-shadow:0 0 16px rgba(224,68,56,.42)}}
.pf .ask-hint{margin-top:8px}
.ask-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#e0443a}
.ask-hint.on .ask-dot{background:#2fa36b;animation:askPulse 2.2s ease-out infinite}
@keyframes askPulse{0%{box-shadow:0 0 0 0 rgba(47,163,107,.5)}70%,100%{box-shadow:0 0 0 7px rgba(47,163,107,0)}}
.ask-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ask-txt b{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.ask-txt span{font-size:12.5px;color:var(--sub);line-height:1.35}
.ask-txt .ask-hours{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.ask-txt .ask-note{font-size:12px;margin-top:1px}
body.big-font .ask-txt b{font-size:16px}
body.big-font .ask-txt span{font-size:14.5px}
body.big-font .ask-dot{width:11px;height:11px}

/* ===== ОФОРМЛЕНИЕ: аккуратная фарма-стилистика ===== */
.header{position:relative}
.header::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:3px;
    background:linear-gradient(90deg,var(--blue-deep),var(--blue) 55%,#4a90d0);
}
.brand{letter-spacing:.01em}

.quick-label{
    margin-top:16px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--sub);
}
.quick{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin:8px -12px 0;
    padding:2px 12px 6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.quick::-webkit-scrollbar{display:none}
.quick button{
    flex:none;
    border:1px solid var(--line-strong);
    background:var(--card);
    color:var(--blue-deep);
    padding:9px 15px;
    border-radius:999px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, transform .12s;
}
.quick button:active{transform:scale(.96);background:var(--blue-soft)}
body.big-font .quick button{font-size:17px;padding:11px 17px}
body.big-font .quick-label{font-size:13.5px}

.list-head{
    grid-column:1 / -1;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:6px 4px 0;
}
.list-head b{font-size:18px;letter-spacing:-.01em;color:var(--text)}
.list-head span{font-size:13px;font-weight:600;color:var(--sub)}
body.big-font .list-head b{font-size:21px}
body.big-font .list-head span{font-size:15px}

.card{transition:transform .12s ease, box-shadow .2s ease}
.card img{background:linear-gradient(180deg,var(--card),var(--tint))}
.card-cta{letter-spacing:.01em}

.block{
    padding-left:14px;
    border-left:3px solid var(--blue-soft);
}
.block-title{
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
body.big-font .block-title{font-size:14px}
.fact{border:1px solid var(--line);background:var(--tint)}


.splash-screen{transition:opacity .2s ease}

/* ===== ПОДЕЛИТЬСЯ ===== */
.btn-share{display:flex;align-items:center;justify-content:center;gap:9px}
.btn-share.busy{opacity:.7;pointer-events:none}
.btn-share.busy svg{animation:shareSpin .8s linear infinite;transform-origin:center}
@keyframes shareSpin{to{transform:rotate(360deg)}}
.btn-share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== УВЕДОМЛЕНИЕ (toast) ===== */
/* Тёмное «стекло» в обеих темах, как системный тост iOS. Галочка — фирменный
   синий: круг выпрыгивает, потом галочка прорисовывается. Базовое состояние —
   уже нарисованное, поэтому при reduce-motion (анимации выключены) всё видно. */
.toast{
    position:fixed;
    left:50%;
    bottom:calc(90px + env(safe-area-inset-bottom));
    z-index:9999;
    display:flex;
    align-items:center;
    width:max-content;
    max-width:calc(100% - 32px);
    gap:12px;
    padding:10px 18px 10px 10px;
    color:#fff;
    background:rgba(13,33,55,.9);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 16px 40px rgba(13,33,55,.28),
        0 3px 8px rgba(13,33,55,.16);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%, 14px) scale(.96);
    transition:opacity .2s ease, transform .38s cubic-bezier(.34,1.4,.64,1), visibility .2s;
}
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0) scale(1); }
html[data-theme="dark"] .toast{
    background:rgba(38,51,70,.92);
    border-color:rgba(255,255,255,.11);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 16px 40px rgba(0,0,0,.45),
        0 3px 8px rgba(0,0,0,.3);
}
.toast-icon{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(145deg, #4a94f0 0%, #2d6cc4 55%, #1f5aae 100%);
    box-shadow:0 0 0 4px rgba(74,148,240,.16), 0 4px 12px rgba(45,108,196,.45);
    font-size:0;
    animation:toastPop .46s cubic-bezier(.34,1.56,.64,1) backwards;
}
.toast-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.toast-icon .tm{
    stroke-dasharray:20;
    stroke-dashoffset:0;
    animation:toastDraw .34s cubic-bezier(.65,0,.35,1) .16s backwards;
}
/* на светлой плашке ночной темы круг светлее — чтобы держал контраст 3:1 */
html[data-theme="dark"] .toast-icon{
    background:linear-gradient(145deg, #5ba3f5 0%, #3a7fd6 55%, #3274cc 100%);
}
.toast.info .toast-icon{
    background:rgba(255,255,255,.13);
    box-shadow:none;
    color:#d6e2f0;
}
@keyframes toastPop{ from{ transform:scale(.3); opacity:0; } }
@keyframes toastDraw{ from{ stroke-dashoffset:20; } }
.toast-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.toast-title{ font-size:14px; font-weight:600; line-height:1.3; color:#fff; letter-spacing:.005em; }
.toast-sub{ font-size:12.5px; font-weight:500; line-height:1.3; color:#aebdd0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.big-font .toast-title{ font-size:17px; }
body.big-font .toast-sub{ font-size:15px; }

/* =========================
   ПОХОЖИЕ ПРЕПАРАТЫ (лента в карточке)
========================= */
.block.sim-block{padding-left:0;border-left:0}
.sim-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sim-row::-webkit-scrollbar{display:none}
.sim-card{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .12s}
.sim-card:active{transform:scale(.97)}
.sim-card img{width:100%;height:96px;object-fit:contain;padding:8px;background:linear-gradient(180deg,var(--card),var(--tint))}
.sim-name{padding:8px 10px 0;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.sim-badge{align-self:flex-start;margin:6px 10px 10px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.sim-badge.recipe-red{background:var(--rx-bg);color:var(--rx)}
.sim-badge.recipe-green{background:var(--otc-bg);color:var(--otc)}
body.big-font .sim-card{flex-basis:150px}
body.big-font .sim-name{font-size:16px;min-height:42px}
body.big-font .sim-badge{font-size:13px}

/* =========================
   ПРОФИЛЬ: адрес, график, карта офиса
========================= */
.pf-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--sub)}
.pf-row.pf-static{cursor:default}
.pf-row.pf-static:active{background:none}
.pf-status{flex:none;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.pf-status.open{background:var(--otc-bg);color:var(--otc)}
.pf-status.closed{background:var(--tint);color:var(--sub)}
.pf-map{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.pf-map-img{position:relative;aspect-ratio:65/30;background:linear-gradient(180deg,var(--tint),var(--gray));cursor:pointer}
.pf-map-img img{display:block;width:100%;height:100%;object-fit:cover}
.pf-map-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.pf-map-bar > div:first-child{flex:1;min-width:0}
.pf-map-bar b{display:block;font-size:14.5px;color:var(--blue-deep)}
.pf-map-bar span{display:block;font-size:12.5px;color:var(--sub)}
.pf-map-btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;background:var(--blue-fill);color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}
.pf-map-btn:active{transform:scale(.96)}
.pf-map-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
body.big-font .pf-sub{font-size:15px}
body.big-font .pf-map-bar b{font-size:17px}
body.big-font .pf-map-bar span{font-size:15px}
body.big-font .pf-map-btn{font-size:16px}

/* =========================
   СООБЩИТЬ О ПОБОЧНОМ ЭФФЕКТЕ
========================= */
/* значок — часть строки текста: при крупном шрифте текст переносится,
   а ⚠️ остаётся у первого слова, а не висит отдельно сбоку */
.btn.btn-ae{position:relative;overflow:hidden;display:block;text-align:center;text-wrap:balance;background:linear-gradient(180deg,var(--warn-bg),var(--warn-bg));color:var(--warn-text);border:1px solid var(--warn-line);animation:aeGlow 2.8s ease-in-out infinite}
.btn.btn-ae::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,var(--glass-soft),transparent);transform:skewX(-20deg);animation:bmEntryShine 5s ease-in-out infinite;pointer-events:none}
.btn-ae-ico{display:inline-block;margin-right:8px;font-size:17px;line-height:1;vertical-align:-1px;animation:bmEntryIco 2.8s ease-in-out infinite}
@keyframes aeGlow{0%,100%{box-shadow:0 0 0 0 rgba(240,160,40,.35)}50%{box-shadow:0 0 0 6px rgba(240,160,40,0)}}
@media (prefers-reduced-motion:reduce){.btn.btn-ae,.btn-ae-ico{animation:none}.btn.btn-ae::after{display:none}}

body.ae-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
#aeSheet{position:fixed;inset:0;z-index:10001;visibility:hidden;transition:visibility 0s .3s}
#aeSheet.open{visibility:visible;transition:none}
.ae-backdrop{position:absolute;inset:0;background:rgba(13,33,55,.45);opacity:0;transition:opacity .3s}
#aeSheet.open .ae-backdrop{opacity:1}
.ae-panel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:20px 20px 0 0;padding:6px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -10px 30px rgba(13,33,55,.15)}
#aeSheet.open .ae-panel{transform:none}
@media (min-width:640px){.ae-panel{left:50%;right:auto;width:560px;margin-left:-280px}}
.ae-grip{width:40px;height:4px;border-radius:4px;background:var(--track);margin:4px auto 10px}
.ae-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ae-head h2{margin:0;font-size:19px;color:var(--text)}
.ae-drug{margin-top:4px;display:inline-block;padding:3px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:13px;font-weight:600}
.ae-urgent{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--rx-bg);border:1px solid var(--rx-line);color:var(--rx-text);transition:box-shadow .3s}
.ae-urgent.hot{box-shadow:0 0 0 3px rgba(220,60,40,.25);border-color:#e58b7c}
.ae-urgent b{display:block;font-size:14px}
.ae-urgent span{display:block;margin-top:2px;font-size:13px;color:var(--rx-text)}
.ae-call{display:inline-block;margin-top:8px;padding:7px 12px;border-radius:10px;background:#d93a26;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer}
.ae-label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--blue-deep)}
.ae-label span{font-weight:400;color:var(--sub)}
.ae-text,.ae-age{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:11px 12px;font:inherit;font-size:15px;color:var(--text);resize:vertical}
.ae-text:focus,.ae-age:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,140,.12)}
.ae-text.err{border-color:#d93a26;box-shadow:0 0 0 3px rgba(217,58,38,.12)}
.ae-age{width:110px}
.ae-chips{display:flex;flex-wrap:wrap;gap:8px}
.ae-chip{border:1px solid var(--line-strong);background:var(--card);color:var(--text);border-radius:999px;padding:8px 13px;font:inherit;font-size:13.5px;cursor:pointer}
.ae-chip.on{background:var(--blue-fill);border-color:var(--blue-fill);color:#fff}
.ae-check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--text);line-height:1.4;cursor:pointer}
.ae-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--blue);flex:none}
.ae-send{margin-top:18px}
.ae-send.busy{opacity:.6;pointer-events:none}
.ae-note{margin-top:10px;font-size:12px;color:var(--sub);text-align:center;line-height:1.45}
.ae-done{text-align:center;padding:10px 4px 4px}
.ae-done-ico{width:58px;height:58px;margin:6px auto 12px;border-radius:50%;background:var(--otc-bg);color:var(--otc);font-size:30px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ae-done h2{margin:0 0 8px;font-size:19px;color:var(--text)}
.ae-done p{margin:0 0 8px;font-size:14.5px;color:var(--text);line-height:1.5}
.ae-done .ae-done-sub{font-size:13px;color:var(--sub)}
body.big-font .ae-head h2,body.big-font .ae-done h2{font-size:22px}
body.big-font .ae-text,body.big-font .ae-chip,body.big-font .ae-check{font-size:17px}
body.big-font .ae-label{font-size:15px}

/* =========================
   ВКЛАДКИ ИНСТРУКЦИИ (Показания · Способ применения · …)
========================= */
.info:not(.block){margin-top:22px}
.info-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);margin:0 -2px}
.info-nav::-webkit-scrollbar{display:none}
.info-tab{flex:none;position:relative;border:0;background:none;padding:10px 10px 11px;font:inherit;font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;cursor:pointer}
.info-tab.on{color:var(--blue);font-weight:600}
.info-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--blue)}
.info-pane{display:none;padding-top:12px}
.info-pane.on{display:block}
.info-text{font-size:15px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.info-text p{margin:0 0 10px}
.info-text ul,.info-text ol{margin:0 0 10px;padding-left:20px}
.info-text li{margin:0 0 6px}
.info-text li::marker{color:var(--blue)}
.info-text b{color:var(--text)}
.info-text table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:13.5px}
.info-text td,.info-text th{border:1px solid var(--line);padding:6px 8px;vertical-align:top;min-width:70px}
.info-text tr:nth-child(odd) td{background:var(--tint)}
.info-more{display:none}
.info-pane.clamp > .info-text{max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.info-pane.clamp.open > .info-text{max-height:none;-webkit-mask-image:none;mask-image:none}
.info-pane.clamp .info-more{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);color:var(--blue);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.info-pane.clamp .info-more::after{content:" ↓"}
.info-pane.clamp.open .info-more::after{content:" ↑"}
.info-more:active{transform:scale(.96)}
body.big-font .info-tab{font-size:16.5px}
body.big-font .info-text{font-size:18px}
body.big-font .info-more{font-size:17px}


/* =========================
   ПОЛИРОВКА (make-interfaces-feel-better)
========================= */
/* нажатие — плавное и прерываемое, а не скачком */
.btn, .theme-btn, .lang-btn, .lang-menu button, .search-btn, .clear-search-btn, .more-btn, #scrollTopBtn, .fav-btn,
.bm-chip, .pf-map-btn, .info-more, .quick button, .sim-card, .bm-entry{
    transition-property:transform, background-color, color, opacity;
    transition-duration:.15s;
    transition-timing-function:ease-out;
}
/* заголовки без «висячих» слов, абзацы без одиноких слов в последней строке */
.title, .brand, .detail .title, .block-title, .bm-title{ text-wrap:balance; }
.sub, .info-text, .ae-note, .empty{ text-wrap:pretty; }
/* цифры, которые меняются, не прыгают по ширине */
.toast-title, .toast-sub{ font-variant-numeric:tabular-nums; }

/* «Задать вопрос специалисту» — статус внутри кнопки, всё по центру */
.btn-ask{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 14px; }
.btn-ask-t{ font-size:15px; font-weight:600; }
/* статус — пилюля: зелёный «На связи» / красный «Сейчас не в сети» */
.btn-ask-s{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 10px 3px 8px; border-radius:999px; background:rgba(229,72,77,.12);
    font-size:12.5px; font-weight:600; line-height:1.3; color:#b42318;
}
.btn-ask-s.on{ color:#0b6a44; background:rgba(31,191,115,.13); }
html[data-theme="dark"] .btn-ask-s{ color:#ff7a7d; background:rgba(255,107,110,.14); }
html[data-theme="dark"] .btn-ask-s.on{ color:#4fdc98; background:rgba(79,220,152,.14); }
.btn-ask-s i{ flex:none; width:7px; height:7px; border-radius:50%; background:#e5484d; }
.btn-ask-s.on i{ background:#1fbf73; box-shadow:0 0 0 0 rgba(31,191,115,.6); animation:askPulse 2.2s ease-out infinite; }
body.big-font .btn-ask-t{ font-size:18px; }
body.big-font .btn-ask-s{ font-size:15px; }
@media (prefers-reduced-motion: reduce){ .btn-ask-s.on i{ animation:none; } }

/* =========================
   LIQUID GLASS
   Стекло только на слое управления, который парит над контентом
   (таб-бар, поиск, круглые кнопки, тост). Карточки, дозировки и
   предупреждения остаются плотными — читаемость важнее.
   Уровни: база (blur+saturate, блик, ободок) — iOS и Android;
   преломление по краям — только Chromium, класс .lg-refract ставит app.js;
   без прозрачности — плотная заливка.
   Заливка плотная (62–78%): подписи таб-бара держат ≥ 4.5:1 даже над
   чёрным фоном (светлая тема) и над белым (ночная).
========================= */
:root{
    --lg-fill:rgba(255,255,255,.62);
    --lg-fill-solid:#f7f9fc;
    --lg-rim:rgba(255,255,255,.95);
    --lg-hair:rgba(13,33,55,.10);
    --lg-hl:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.4);
    --lg-shadow:0 12px 32px rgba(13,33,55,.14), 0 2px 6px rgba(13,33,55,.08);
    --lg-blur:blur(18px) saturate(180%);
    --lg-ink:#0d2137;
    --lg-ink-2:#243142;
    --lg-active:#12345f;
    /* «линза» активной вкладки светлее стекла — так подпись контрастнее */
    --lg-pill:rgba(240,246,253,.55);
    --lg-pill-hl:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(31,78,140,.14), 0 2px 8px rgba(13,33,55,.08);
    --lg-blue:linear-gradient(145deg, #4a94f0 0%, #2d6cc4 55%, #1f5aae 100%);
    /* середина градиента: под белой лупой контраст ≥ 4.5 */
    --lg-blue-mid:#2d6cc4;
}
html[data-theme="dark"]{
    --lg-fill:rgba(28,38,52,.78);
    --lg-fill-solid:#1c2633;
    --lg-rim:rgba(255,255,255,.26);
    --lg-hair:rgba(0,0,0,.45);
    --lg-hl:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 1px rgba(255,255,255,.05);
    --lg-shadow:0 12px 32px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --lg-ink:#eef3f9;
    --lg-ink-2:#c3cfdc;
    --lg-active:#a9cbf6;
    --lg-pill:rgba(16,32,56,.40);
    --lg-pill-hl:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 .5px rgba(91,155,234,.35);
    --lg-blue:linear-gradient(145deg, #5ba3f5 0%, #3274cc 55%, #2a68bb 100%);
    --lg-blue-mid:#3274cc;
}

/* общий рецепт стекла */
.bottom-nav,
.search-wrap,
.theme-btn,
.lang-btn,
.lang-menu,
#scrollTopBtn,
.bm-x{
    background:var(--lg-fill);
    -webkit-backdrop-filter:var(--lg-blur);
    backdrop-filter:var(--lg-blur);
    border:0;
    box-shadow:var(--lg-hl), 0 0 0 .5px var(--lg-hair), var(--lg-shadow);
}
/* ободок-блик: ярче сверху-слева и снизу-справа, как свет на краю линзы */
.bottom-nav::before,
.search-wrap::before,
.theme-btn::before,
.lang-btn::before,
.lang-menu::before,
#scrollTopBtn::before,
.bm-x::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(155deg, var(--lg-rim), transparent 32%, transparent 68%, var(--lg-rim));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:.85;
}

/* меню языка открывается поверх синего блока Журабека — стекло плотнее, соты не просвечивают */
.lang-menu{ background:color-mix(in srgb, var(--lg-fill-solid) 90%, transparent); }

/* таб-бар: парящая капсула */
.bottom-nav{
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    height:64px;
    padding:0 5px;
    border-radius:32px;
}
.nav-item{
    position:relative;
    margin:5px 0;
    border-radius:27px;
    color:var(--lg-ink-2);
    transition:background-color .25s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.nav-item:active{ transform:scale(.94); }
.nav-item.active{
    color:var(--lg-active);
    background:var(--lg-pill);
    box-shadow:var(--lg-pill-hl);
}
.nav-item.active .nav-icon{ background:none; }
.nav-icon{ height:26px; }

/* поиск: стеклянная капсула, кнопка — синяя линза */
.top{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
.search-wrap{
    position:relative;
    gap:2px;
    padding:4px;
    border-radius:28px;
}
.search{
    height:46px;
    border:0;
    border-radius:24px;
    background:transparent;
    color:var(--lg-ink);
    padding:0 12px 0 16px;
}
.search::placeholder{ color:var(--lg-ink-2); opacity:.85; }
.search:focus{ box-shadow:none; }
.search-wrap:focus-within{
    box-shadow:var(--lg-hl), 0 0 0 .5px var(--lg-hair), 0 0 0 3px rgba(45,108,196,.22), var(--lg-shadow);
}
.search-btn{
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--lg-blue-mid) var(--lg-blue);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(10,40,90,.25), 0 4px 12px rgba(45,108,196,.38);
}
.clear-search-btn{
    width:40px;
    height:46px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:var(--lg-ink-2);
}

/* шапка без плашки, кнопка темы — стеклянный круг */
.header{
    background:transparent;
    border-bottom:0;
}
.theme-btn{
    position:relative;
    border-radius:50%;
}

#scrollTopBtn{ color:var(--lg-active); }
.bm-x{
    position:relative;
    color:var(--lg-ink);
}

/* Звёздочка на карточках и чипсы — вид стекла без backdrop-filter:
   их десятки на экране, живое размытие каждой утяжелило бы прокрутку
   на недорогих Android. Под ними однородный фон, разницы не видно. */
.fav-btn{
    background:var(--lg-fill-solid);
    box-shadow:var(--lg-hl), 0 0 0 .5px var(--lg-hair), 0 3px 10px rgba(13,33,55,.14);
    color:var(--lg-ink-2);
}
.quick button{
    border:0;
    background:var(--card);
    box-shadow:var(--lg-hl), 0 0 0 .5px var(--lg-hair), 0 2px 8px rgba(13,33,55,.06);
}
html[data-theme="dark"] .quick button{ background:#1e2937; }

/* преломление по краям (Chromium): фильтры #lgRefract* строит app.js */
.bottom-nav.lg-refract{
    -webkit-backdrop-filter:url(#lgRefractNav) blur(10px) saturate(190%);
    backdrop-filter:url(#lgRefractNav) blur(10px) saturate(190%);
}
.search-wrap.lg-refract{
    -webkit-backdrop-filter:url(#lgRefractSearch) blur(10px) saturate(190%);
    backdrop-filter:url(#lgRefractSearch) blur(10px) saturate(190%);
}

/* без прозрачности: нет backdrop-filter или «Уменьшить прозрачность» в системе */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bottom-nav, .search-wrap, .theme-btn, .lang-btn, .lang-menu, #scrollTopBtn, .bm-x{ background:var(--lg-fill-solid); }
}
@media (prefers-reduced-transparency: reduce){
    .bottom-nav, .search-wrap, .theme-btn, .lang-btn, .lang-menu, #scrollTopBtn, .bm-x{
        background:var(--lg-fill-solid);
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}


/* =========================
   ГЛАВНАЯ «Журабек встречает» (макет A, 28.10.2026)
   Вместо рекламного баннера: Журабек с поиском, «Частые жалобы» плитками,
   подборки, «Где болит?» (карточка прежняя), каталог.
========================= */
:root{
    --hero:#1f4e8c;
    --hero-sub:#dbe7f6;
    --hero-hello:#e6eefa;
    --search-fill:rgba(255,255,255,.96);
}
html[data-theme="dark"]{
    --hero:#1b3a63;
    --search-fill:var(--lg-fill);
}

.header::after{ display:none; }
.header{ padding-bottom:4px; }
.logo{ width:auto; height:40px; }
/* ночью — светлая копия логотипа прямо на тёмном фоне, без белой плашки */
.logo-night{ display:none; }
html[data-theme="dark"] .logo-day{ display:none; }
html[data-theme="dark"] .logo-night{ display:block; background:none; padding:0; border-radius:0; }

#homeBanner{
    padding:10px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}

.jb-hero{
    position:relative;
    overflow:hidden;
    margin-bottom:-78px;
    padding:20px 18px 94px;
    border-radius:28px;
    color:#fff;
}
.jb-shelf{
    position:absolute;
    right:0;
    top:0;
    width:min(238px, calc(100% - 128px));
    height:82px;
    color:#1f4e8c;
}
.jb-cell{ fill:#fff; }
.jb-cell-in{ fill:#e3eefc; }
.jb-cell-empty{ fill:none; stroke:rgba(255,255,255,.3); stroke-width:2.5; }
html[data-theme="dark"] .jb-cell{ fill:#dbe7f6; }
html[data-theme="dark"] .jb-cell-in{ fill:#c4d8f1; }
html[data-theme="dark"] .jb-shelf{ color:#1b3a63; }
/* Журабек стоит под полкой */
.jb-guy{
    position:absolute;
    right:18px;
    top:80px;
    width:78px;
    height:91px;
    animation:jbFloat 4s ease-in-out infinite;
}
.jb-mascot,
.jb-cape{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.jb-arm{ fill:none; stroke:#8fc0f5; stroke-width:5; stroke-linecap:round; }
/* плащ — отдельный слой за Журабеком (форма и волна: tools/cape_svg.py). По ткани бежит волна —
   анимация формы (d) ниже, между метками jbWave. Её считает основной поток, поэтому, пока Журабека
   не видно, app.js вешает .jb-still — волна стоит и не отнимает время у нажатий. */
.jb-fold{ fill:none; stroke:rgba(31,78,140,.13); stroke-width:3; stroke-linecap:round; }
.jb-still .jb-cape *{ animation-play-state:paused; }
/* jbWave: сгенерировано tools/cape_svg.py — не править руками */
@keyframes jbWaveO{0%{d:path("M70 46Q82 57 86 63Q91 69 94 74Q98 79 100 84Q103 89 106 95Q108 100 110 105Q112 110 113 117Q115 125 110 124Q106 123 101 122Q96 120 91 120Q86 119 81 120Q77 120 72 122Q67 123 62 124Q58 126 53 126Q48 126 44 125Q39 124 35 123Q30 122 25 121Q21 121 16 121Q12 121 7 123Q3 124 -2 124Q-6 125 -10 125Q-15 125 -12 119Q-10 112 -6 107Q-2 101 2 95Q7 89 12 83Q17 77 22 72Q27 67 32 62Q37 57 43 51L50 46Z")}12%{d:path("M70 46Q82 58 86 63Q90 69 94 74Q98 80 101 85Q104 90 107 95Q109 100 111 105Q113 110 115 117Q116 123 111 123Q106 123 101 122Q96 121 91 119Q86 118 82 118Q77 117 72 118Q67 118 62 120Q57 121 52 122Q47 124 42 124Q37 124 33 123Q28 122 23 121Q18 120 14 120Q9 119 4 120Q-1 121 -5 122Q-10 124 -14 125Q-19 126 -15 118Q-12 111 -7 105Q-2 99 3 93Q8 87 13 82Q18 77 23 72Q28 67 32 62Q37 57 44 51L50 46Z")}25%{d:path("M70 46Q82 57 86 63Q90 69 94 75Q97 80 101 86Q104 91 107 96Q110 101 112 106Q115 111 117 116Q118 121 113 122Q108 123 103 122Q99 122 94 120Q89 119 84 118Q79 116 74 116Q69 115 64 116Q58 116 53 118Q48 119 43 120Q38 121 33 121Q28 121 23 120Q18 119 13 118Q9 117 4 117Q-1 117 -6 118Q-11 119 -16 120Q-21 122 -16 115Q-11 108 -6 102Q0 96 5 91Q10 86 15 81Q19 76 24 72Q28 67 32 62Q37 57 43 51L50 46Z")}38%{d:path("M70 46Q82 57 86 63Q90 69 93 74Q97 80 100 86Q103 92 107 97Q110 103 113 108Q116 113 118 117Q120 121 116 121Q111 122 106 123Q101 123 96 122Q91 122 86 120Q81 118 76 117Q71 115 66 115Q61 114 56 115Q51 115 46 117Q41 118 36 118Q31 119 26 119Q21 118 16 117Q11 116 6 115Q1 114 -4 114Q-9 114 -14 115Q-19 116 -14 111Q-8 105 -3 100Q2 95 7 91Q12 86 16 82Q20 77 24 72Q28 68 32 62Q37 57 43 52L50 46Z")}50%{d:path("M70 46Q82 57 86 63Q89 68 93 74Q96 80 99 86Q102 91 105 97Q109 103 112 108Q115 114 118 117Q121 121 116 122Q112 122 107 123Q102 124 98 124Q93 124 88 123Q83 122 79 121Q74 119 69 117Q64 116 59 115Q54 115 50 115Q45 116 40 117Q35 117 30 118Q25 118 20 117Q15 117 10 115Q5 114 0 113Q-5 111 -10 111Q-16 111 -10 108Q-5 104 0 100Q4 96 8 92Q12 87 15 83Q19 78 23 73Q27 68 32 63Q36 57 43 52L50 46Z")}62%{d:path("M70 46Q82 57 86 63Q90 68 93 74Q96 79 99 85Q101 91 104 96Q107 102 110 108Q114 114 117 118Q120 122 116 122Q111 122 106 123Q102 124 97 125Q93 126 88 126Q83 126 79 125Q74 124 70 122Q65 120 60 119Q56 117 51 117Q46 116 42 117Q37 117 32 118Q27 119 23 119Q18 119 13 118Q8 116 3 115Q-2 113 -7 112Q-12 110 -7 108Q-3 105 1 102Q4 98 7 93Q11 89 14 84Q18 79 22 74Q26 68 31 63Q36 57 43 52L50 46Z")}75%{d:path("M70 46Q82 57 86 63Q90 68 93 73Q96 79 99 84Q101 90 104 95Q106 101 109 107Q112 113 115 119Q118 124 113 123Q109 122 104 122Q100 123 95 124Q91 125 86 126Q82 127 77 127Q72 127 68 126Q63 125 59 123Q54 122 50 120Q45 119 41 119Q36 118 32 119Q27 120 23 120Q18 121 14 121Q9 120 4 119Q0 118 -5 116Q-10 114 -7 111Q-3 108 -1 104Q2 100 5 95Q9 90 12 85Q16 79 21 74Q26 68 31 63Q36 57 43 51L50 46Z")}88%{d:path("M70 46Q82 57 86 63Q90 68 94 74Q97 79 100 84Q102 89 104 95Q107 100 109 106Q111 112 113 118Q116 125 111 124Q107 123 102 122Q97 121 93 122Q88 122 83 123Q79 125 74 126Q70 127 65 127Q60 127 56 126Q51 125 47 124Q42 122 38 121Q33 120 29 120Q25 120 20 121Q16 122 11 123Q7 123 2 123Q-2 123 -7 121Q-11 120 -9 116Q-6 111 -3 106Q-1 101 3 96Q7 90 11 84Q16 79 21 73Q26 67 31 62Q37 57 43 51L50 46Z")}100%{d:path("M70 46Q82 57 86 63Q91 69 94 74Q98 79 100 84Q103 89 106 95Q108 100 110 105Q112 110 113 117Q115 125 110 124Q106 123 101 122Q96 120 91 120Q86 119 81 120Q77 120 72 122Q67 123 62 124Q58 126 53 126Q48 126 44 125Q39 124 35 123Q30 122 25 121Q21 121 16 121Q12 121 7 123Q3 124 -2 124Q-6 125 -10 125Q-15 125 -12 119Q-10 112 -6 107Q-2 101 2 95Q7 89 12 83Q17 77 22 72Q27 67 32 62Q37 57 43 51L50 46Z")}}
@keyframes jbWaveF1{0%{d:path("M46 67Q41 77 38 83Q36 88 33 94Q30 100 28 106Q25 112 24 116L23 121")}12%{d:path("M47 67Q42 77 40 82Q37 87 34 92Q31 98 28 103Q25 109 23 115L20 120")}25%{d:path("M47 68Q43 78 41 82Q39 87 36 92Q34 96 30 102Q27 107 24 113L20 120")}38%{d:path("M46 68Q43 79 41 84Q40 88 38 93Q36 97 33 101Q30 106 27 112L23 119")}50%{d:path("M45 69Q42 80 40 85Q39 90 38 94Q36 99 34 103Q32 107 30 112L27 118")}62%{d:path("M45 68Q41 80 39 85Q37 91 36 96Q35 101 34 105Q33 109 31 114L29 118")}75%{d:path("M45 68Q40 79 38 85Q36 91 34 96Q33 102 32 107Q31 112 30 116L29 119")}88%{d:path("M45 67Q40 78 38 84Q35 89 33 95Q31 101 29 107Q28 113 27 117L26 120")}100%{d:path("M46 67Q41 77 38 83Q36 88 33 94Q30 100 28 106Q25 112 24 116L23 121")}}
@keyframes jbWaveF2{0%{d:path("M72 68Q74 78 74 83Q74 88 74 93Q74 99 74 104Q74 110 74 116L75 121")}12%{d:path("M72 68Q74 79 75 84Q76 89 76 93Q76 98 76 103Q75 109 75 113L75 117")}25%{d:path("M71 69Q74 80 75 85Q76 90 77 94Q78 99 78 104Q78 108 77 112L77 116")}38%{d:path("M71 69Q73 80 75 85Q76 91 77 96Q78 101 79 105Q80 110 80 114L79 118")}50%{d:path("M70 68Q72 80 74 86Q75 91 76 97Q78 102 79 107Q80 112 81 117L82 122")}62%{d:path("M70 68Q72 79 73 85Q74 91 75 97Q76 102 77 108Q79 113 80 119L82 126")}75%{d:path("M71 68Q72 78 72 84Q73 90 74 96Q74 102 75 108Q77 114 78 120L80 127")}88%{d:path("M71 68Q73 78 73 83Q73 89 73 94Q74 100 74 106Q75 112 76 119L77 125")}100%{d:path("M72 68Q74 78 74 83Q74 88 74 93Q74 99 74 104Q74 110 74 116L75 121")}}
.jb-cape-o{animation:jbWaveO 1.6s linear infinite}
.jb-f1{animation:jbWaveF1 1.6s linear infinite}
.jb-f2{animation:jbWaveF2 1.6s linear infinite}
/* jbWave: конец */
@media (prefers-reduced-motion: reduce){ .jb-guy, .jb-cape *{ animation:none; } }
@keyframes jbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.jb-hero-txt{
    position:relative;
    max-width:calc(100% - 118px);
}
.jb-hero-txt > :not(:first-child){ margin-top:6px; }
/* текст обтекает полку-соты: узбекский заголовок длиннее русского и иначе уходит под ячейки */
.jb-hero-txt::before{
    content:"";
    float:right;
    width:min(102px, calc(100% - 110px));
    height:62px;
}
.jb-hello{ margin:0; font-size:14px; font-weight:600; color:var(--hero-hello); }
.jb-title{ margin:0; font-size:27px; line-height:1.15; font-weight:800; letter-spacing:-.01em; color:#fff; }
.jb-sub{ margin:0; font-size:14px; line-height:1.4; color:var(--hero-sub); }
body.big-font .jb-title{ font-size:30px; }
body.big-font .jb-hello,
body.big-font .jb-sub{ font-size:16px; }

.top{
    padding:10px max(26px, calc(env(safe-area-inset-right) + 14px)) 10px max(26px, calc(env(safe-area-inset-left) + 14px));
}
.search-wrap{ background:var(--search-fill); }
/* в поиске и подборке Журабек становится компактным, результаты сразу под строкой */
body.searching .jb-hero{ margin-bottom:-78px; }
body.searching .jb-sub{ display:none; }

#homeExtras{
    padding:4px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
body.searching #homeExtras{ display:none; }

.sec-head{
    margin:18px 4px 10px;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--text);
}
body.big-font .sec-head{ font-size:21px; }

/* «Частые жалобы»: плитки 4 × 2 с медицинскими иконками */
.quick{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin:0;
    padding:0;
    overflow:visible;
}
.quick .qt{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    min-height:90px;
    padding:12px 4px 10px;
    border-radius:20px;
    font-size:12px;
    color:var(--text);
}
.qt-ico{
    width:44px;
    height:44px;
    border-radius:14px;
    background:var(--blue-soft);
    color:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
}
.qt-ico svg{ width:30px; height:30px; fill:currentColor; }
html[data-theme="dark"] .qt-ico{ color:#8fc0f5; }
.qt-txt{ font-size:12px; font-weight:600; line-height:1.2; text-align:center; overflow-wrap:anywhere; }
body.big-font .qt-txt{ font-size:14px; }

/* вопрос специалисту: ссылка на чат под формой */
.ask-direct{
    margin:14px 0 4px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    color:var(--blue);
    cursor:pointer;
    padding:10px;
}
#aeSheet .ask-hint{ margin:0 0 14px; }

/* подборки: карусель с прокруткой пальцем */
.cols{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin:0 -12px;
    padding:0 12px 4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.cols::-webkit-scrollbar{ display:none; }
.col-card{
    flex:none;
    width:min(86%, 340px);
    height:204px;
    scroll-snap-align:start;
    scroll-margin-left:12px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:18px 20px;
    border-radius:26px;
    border:1px solid var(--line);
    background:var(--card);
    font:inherit;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}
.col-card:active{ transform:scale(.98); }
.col-main{ border-color:transparent; color:#fff; }
.jb-hero,.col-main{ isolation:isolate; background:linear-gradient(130deg,#1b4c97,#2864c8 38%,#5a4fc9 68%,#1c9fbf); }
.jb-hero::before,.jb-hero::after,.col-main::before,.col-main::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.jb-hero::before,.col-main::before{ opacity:.16; mix-blend-mode:screen;
    background:repeating-linear-gradient(115deg,#f9b,#fe8 6%,#9fc 12%,#8ef 18%,#caf 24%,#f9b 30%); }
.jb-hero::after,.col-main::after{ right:auto; left:-60%; width:45%;
    background:linear-gradient(105deg,#fff0,#fff6,#fff0); animation:card-shine 6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .jb-hero::after,.col-main::after{ display:none; } }
.col-main:nth-child(2n){ background:linear-gradient(130deg,#3a3fb8,#2864c8 40%,#1c9fbf 75%,#5a4fc9); }
.col-over,
.col-title,
.col-sub,
.col-go{ position:relative; z-index:1; }
.col-over{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.col-title{ max-width:60%; font-size:22px; font-weight:800; line-height:1.15; }
.col-sub{ max-width:56%; font-size:13px; line-height:1.4; color:var(--sub); }
.col-go{
    margin-top:auto;
    height:34px;
    padding:0 16px;
    display:flex;
    align-items:center;
    border-radius:17px;
    background:var(--blue-soft);
    color:var(--blue);
    font-size:13.5px;
    font-weight:700;
}
.col-main .col-over{ color:#e6eefa; }
.col-main .col-sub{ color:var(--hero-sub); }
.col-main .col-go{ background:#fff; color:#0f2a4d; }
.col-pic{ position:absolute; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.col-pic0{ right:8px; bottom:-2px; width:44%; height:50%; transform:rotate(-4deg); }
.col-pic1{ right:-10px; top:22px; width:42%; height:44%; transform:rotate(8deg); }
body.big-font .col-title{ font-size:24px; }
body.big-font .col-sub{ font-size:15px; }
.cols-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.cols-dots span{ width:6px; height:6px; border-radius:3px; background:var(--track); transition:width .2s ease, background .2s ease; }
.cols-dots span.on{ width:20px; background:var(--blue); }

/* «Где болит?» — прежняя карточка, только отступ в новой раскладке */
#homeExtras .bm-entry{ margin-top:20px; }

/* каталог: заголовок с числом */
#list{ padding-top:22px; }
.list-head{ align-items:center; }
.list-head b{ font-size:22px; }
.list-reset{
    flex:none;
    height:34px;
    padding:0 14px;
    border:0;
    border-radius:17px;
    background:var(--blue-soft);
    color:var(--blue);
    font:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
}

/* карточка препарата: фото на подложке, группа, метка рецептурности */
.card{ isolation:isolate; padding:0; border-radius:20px; border:1.5px solid transparent;
    background:linear-gradient(170deg,var(--card),var(--tint)) padding-box,
        conic-gradient(from 200deg,#ff7ab0,#ffd36e,#7dffb0,#6ad8ff,#b48cff,#ff7ab0) border-box;
    box-shadow:0 10px 22px -14px rgba(20,60,130,.45); }
.card::before,.card::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.card::before{ z-index:-1; opacity:.16;
    background:repeating-linear-gradient(115deg,#ff9ebf,#ffe08a 6%,#9dffc0 12%,#8fe6ff 18%,#c9adff 24%,#ff9ebf 30%); }
.card::after{ right:auto; left:-60%; width:45%; transform:skewX(-12deg);
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent); animation:card-shine 6s ease-in-out infinite; }
.card:nth-child(2n)::after{ animation-delay:1.5s; }
.card:nth-child(3n)::after{ animation-delay:3s; }
@keyframes card-shine{ 0%,60%{ transform:translateX(0) skewX(-12deg); } to{ transform:translateX(420%) skewX(-12deg); } }
@media (prefers-reduced-motion:reduce){ .card::after{ display:none; } }
.card img{ border-bottom:0; padding:12px 12px 4px; background:none; }
.card-body{ padding:4px 12px 12px; justify-content:flex-start; }
.card .title{ margin-bottom:4px; }
.card-group{
    margin-bottom:8px;
    font-size:12px;
    line-height:1.3;
    color:var(--sub);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.card-body .recipe-badge{ margin-top:auto; align-self:flex-start; }
body.big-font .card-group{ font-size:14px; }


/* =========================
   ПОЛИРОВКА ИНТЕРФЕЙСА (28.10.2026, make-interfaces-feel-better)
========================= */

/* области нажатия не меньше 44×44 — палец не промахивается */
.theme-btn{ width:44px; height:44px; }
.fav-btn.inline{ width:44px; height:44px; }
.clear-search-btn{ width:44px; }
.info-tab{ min-height:44px; }
.bm-x::after,
.list-reset::after{
    content:"";
    position:absolute;
    inset:-5px;
}
.list-reset{ position:relative; }


/* одинаковый отклик на нажатие во всём приложении */
.nav-item:active,
.card:active,
.col-card:active,
.jrn-entry:active,
.sim-card:active{ transform:scale(.96); }

/* заголовки без одиноких слов в последней строке, текст без «висячих» предлогов */
.jb-title,
.sec-head,
.col-title,
.list-head b{ text-wrap:balance; }
.jb-sub,
.col-sub,
.card-group,
.jb-hello{ text-wrap:pretty; }

/* число препаратов меняется при поиске — цифры одной ширины, строка не прыгает */
.list-head span{ font-variant-numeric:tabular-nums; }

/* таб-бар: неактивные вкладки — контур, активная — заливка */
.nav-icon svg{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linejoin:round;
    stroke-linecap:round;
    transition:fill .2s cubic-bezier(.2,0,0,1);
}
.nav-item.active .nav-icon svg{ fill:currentColor; }

/* заглушка вне Telegram (gate.js, index.html): вместо приложения — логотип и ссылка на бота */
.outside-box{display:none}
.outside body > :not(.outside-box){display:none !important}
.outside .outside-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    min-height:100svh;padding:24px 16px;box-sizing:border-box;text-align:center;background:var(--bg);color:var(--text)}
.outside-box img{width:170px;height:auto}
.outside-box .logo-night{display:none}
@media (prefers-color-scheme:dark){
    .outside .outside-box{background:#0f151d;color:#e8eef5}
    .outside-box .logo-day{display:none}
    .outside-box .logo-night{display:block}
    .outside-box p{color:#9aabbf}
}
.outside-box p{margin:0;max-width:340px;color:var(--sub);line-height:1.5;text-wrap:pretty}
.outside-btn{margin-top:4px;padding:14px 22px;border-radius:14px;background:var(--blue);color:#fff;font-weight:700;
    text-decoration:none;transition-property:transform;transition-duration:.15s}
.outside-btn:active{transform:scale(.96)}

/* =========================
   ЗНАЧКИ (ICO в app.js, те же svg в index.html и journey.js)
   один контурный набор, как в нижнем меню; цвет — от текста кнопки
========================= */
.ico{
    width:1em;
    height:1em;
    flex:none;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.bm-x .ico{ width:18px; height:18px; }
.bm-x{ display:inline-flex; align-items:center; justify-content:center; padding:0; }
.clear-search-btn .ico{ width:18px; height:18px; }
#scrollTopBtn .ico{ width:20px; height:20px; stroke-width:2.2; }
.pf-chev .ico{ width:18px; height:18px; display:block; }
.bm-entry-arrow .ico{ width:22px; height:22px; display:block; }
.bm-chip.rf .ico{ width:16px; height:16px; }
.btn-ae-ico .ico{ width:18px; height:18px; display:block; }
.ae-done-ico .ico{ width:30px; height:30px; stroke-width:2.6; }
.jrn-nav .ico{ width:20px; height:20px; display:block; margin:auto; }

/* пустое «Избранное»: значок звезды, как в меню, подсказка и выход в каталог — по центру экрана */
.empty-fav{
    min-height:calc(100vh - 260px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.empty-ico{
    width:64px;
    height:64px;
    margin-bottom:8px;
    border-radius:50%;
    background:var(--blue-soft);
    color:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
}
.empty-ico .ico{ width:28px; height:28px; stroke-width:1.8; }
.empty-title{ font-size:17px; font-weight:700; color:var(--text); }
.empty-sub{ max-width:260px; font-size:14px; line-height:1.4; }
.empty-fav .btn{ margin-top:14px; width:auto; padding-left:28px; padding-right:28px; }

/* сканер упаковки: круглая кнопка в центре таб-бара (экран — scan.css, грузится по нажатию) */
.nav-item.nav-scan{flex:0 0 62px;border:0;padding:0;background:none;box-shadow:none;font:inherit;color:#fff}
.nav-scan-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lg-blue-mid,#2d6cc4) var(--lg-blue,none);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(45,108,196,.38)}
.nav-scan-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* будильник приёма: плашка в карточке (экраны — remind.css) */
.rm-plaque{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px 14px;border-radius:16px;background:var(--blue-soft);color:var(--text);cursor:pointer}
.rm-plaque-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--blue-fill);color:#fff}
.rm-plaque-txt{flex:1;min-width:0}.rm-plaque-txt b{display:block;font-size:15px}.rm-plaque-txt small{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.rm-plaque>.ico{color:var(--blue)}.rm-plaque:active{opacity:.85}
.rm-ring .rm-plaque-ico svg{transform-origin:50% 55%;animation:rmRing 4s ease-in-out 1s infinite}@keyframes rmRing{0%,14%,100%{transform:none}2%,6%,10%{transform:rotate(-14deg)}4%,8%,12%{transform:rotate(14deg)}}@media (prefers-reduced-motion:reduce){.rm-ring .rm-plaque-ico svg{animation:none}}
.rm-on{background:var(--otc-bg)}.rm-on .rm-plaque-ico{background:var(--otc)}.rm-on>.ico{color:var(--otc)}.rm-on .rm-plaque-txt small{color:var(--otc);font-weight:600}
.rm-glow{animation:rmGlow 1.6s ease 2}@keyframes rmGlow{50%{box-shadow:0 0 0 4px var(--blue)}}