/* =========================================================
         Дизайн-слой v2 — авторитетная «справочная» подача.
         Токены, типографика, ритм секций и перекраска primary-*
         (calc.js инъектирует Tailwind-классы, поэтому primary
         ремапится в акцент через !important — детерминированно).
         ========================================================= */
      :root{
        /* ---- поверхности ---- */
        --bg:#f3f7fc;
        --surface:#ffffff;
        --surface-2:#f4f6fa;
        --ink:#141a22;
        --muted:#525d6c;
        /* --faint держит мелкий подписной текст (12–13 px, часто капсом):
           #646f80 = 5.1:1 на белом и 4.7:1 на .surface-2 (порог WCAG 4.5:1). */
        --faint:#646f80;
        --line:#e0e6ee;
        --hair:#eef1f6;
        --navy:#10324e;
        --navy-2:#0c2740;

        /* ---- один акцент: кровь ‰ и первичное действие ---- */
        --accent:#1663a6;
        --accent-strong:#0f4c82;
        --accent-050:#e9f1f9;
        --accent-100:#d3e4f2;
        /* светлая ступень того же тона — вторая серия в графиках,
           чтобы сравнение «мужчина / женщина» не вводило новый цвет */
        --accent-soft:#5896cc;   /* 3.15:1 к белому — порог WCAG для графики */

        /* ---- второй канал измерения: выдыхаемый воздух и алкотестер ----
           бирюза встречается только там, где речь о мг/л и о приборе. */
        --breath:#12a4c0;
        --breath-strong:#0c7d93;
        --breath-050:#e2f4f8;
        --breath-100:#c4e9f0;

        /* ---- семантика: только шкала опьянения и статусы ---- */
        --good:#12907c;
        --good-050:#e6f5f1;
        --good-100:#c3e8df;
        --amber:#c98a1e;
        --amber-strong:#9a6714;
        --amber-050:#faf1de;
        --amber-100:#f0dfba;
        --danger:#b23a30;
        /* шкала степеней опьянения — семь ступеней, объявленных один раз:
           её читают и цветная полоса, и точки в таблице. */
        --sev-1:#12907c; --sev-2:#7fae2e; --sev-3:#c98a1e; --sev-4:#d97a1e;
        --sev-5:#b23a30; --sev-6:#8f2c24; --sev-7:#601b16;
        --danger-050:var(--danger-050);
        --danger-100:var(--danger-100);

        /* ---- шрифты ---- */
        --font-display:"Lora","Iowan Old Style","Charter",Georgia,"Times New Roman",serif;
        --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
        --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

        /* ---- типографическая шкала: 8 ступеней вместо 27 ---- */
        --t-cap:12px;   /* капс-подписи, мелкие мета */
        --t-sm:13px;    /* сноски, легенды */
        --t-md:15px;    /* вторичный текст, таблицы */
        --t-body:16px;  /* основной текст */
        --t-lg:18px;    /* лид, подзаголовки */
        --t-xl:20px;    /* h3 */
        --t-2xl:24px;   /* h2 в карточках, крупные метрики */
        --t-3xl:32px;   /* крупные числа */

        /* ---- шкала отступов: одна на всю страницу ---- */
        --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
        --s-5:24px; --s-6:32px; --s-7:48px;

        /* ---- радиусы: полоски данных / контролы / карточки / пилюли ---- */
        --r-bar:3px;
        --r-sm:8px;
        --r-md:12px;
        --r-pill:999px;
        --radius:12px;

        --shadow:0 1px 2px rgba(18,26,34,.04),0 6px 20px -12px rgba(18,26,34,.18);
        --maxw:1140px;
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth;scroll-padding-top:82px}
      body{
        margin:0;background:var(--bg);color:var(--ink);
        font:16px/1.62 var(--font-body);
        -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
        font-variant-numeric:tabular-nums;
      }
      /* Боковой отступ контента — плавно сжимается на телефонах,
         чтобы не складываться с внутренними паддингами карточек. */
      .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(15px,4.2vw,24px)}
      h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance;font-weight:600}
      p{text-wrap:pretty}
      a{color:var(--accent);text-decoration:none}
      a:hover{color:var(--accent-strong)}
      strong{font-weight:600}
      .eyebrow{font:600 12px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

      /* ---- клавиатурный фокус: единое видимое кольцо ----
         :where() держит специфичность 0, поэтому точечные правила
         (.rng, .tab-btn, поля калькулятора) продолжают выигрывать.
         Без outline-radius: контур сам повторяет border-radius элемента. */
      :where(a,button,select,summary,[tabindex]):focus-visible{
        outline:2px solid var(--accent);outline-offset:3px}
      /* на тёмной подложке синий контур не читается — светлый вариант */
      footer.site :where(a,button):focus-visible,
      .photoband :where(a,button):focus-visible{outline-color:#9fd0f5}
      /* радиогруппа «Пол»: сам input скрыт, фокус показывает подпись */
      .seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

      /* ---- пропуск навигации ---- */
      .skip-link{position:absolute;left:12px;top:-64px;z-index:100;
        background:var(--accent);color:#fff;font-weight:600;font-size:15px;
        padding:12px 16px;border-radius:0 0 8px 8px;box-shadow:var(--shadow);
        transition:top .15s ease}
      .skip-link:focus{top:0;color:#fff}
      /* main получает фокус программно после «пропустить навигацию» —
         обводка вокруг всей страницы была бы шумом */
      #content:focus,#content:focus-visible{outline:none}
      @media(prefers-reduced-motion:reduce){.skip-link{transition:none}}

      /* ---- перекраска primary-* (динамическая разметка calc.js) ---- */
      .text-primary-500,.text-primary-600,.text-primary-700,.text-primary-800{color:var(--accent)!important}
      .bg-primary-500,.bg-primary-600{background-color:var(--accent)!important}
      .bg-primary-50{background-color:var(--accent-050)!important}
      .border-primary-200{border-color:var(--accent-100)!important}
      .border-primary-300{border-color:var(--accent-100)!important}
      .border-primary-500,.border-primary-600{border-color:var(--accent)!important}
      .hover\:bg-primary-600:hover,.hover\:bg-primary-700:hover,.hover\:bg-primary-50:hover{background-color:var(--accent-strong)!important}
      .hover\:bg-primary-50:hover{background-color:var(--accent-050)!important}
      .hover\:text-primary-600:hover,.hover\:text-primary-700:hover,.hover\:text-primary-800:hover,.group:hover .group-hover\:text-primary-600{color:var(--accent-strong)!important}
      .focus\:ring-primary-500:focus{--tw-ring-color:var(--accent)!important}
      .focus\:border-primary-500:focus{border-color:var(--accent)!important}
      .from-primary-500,.from-primary-600{--tw-gradient-from:var(--accent)!important;--tw-gradient-to:rgb(21 89 127 / 0)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
      .to-primary-600,.to-primary-700{--tw-gradient-to:var(--accent-strong)!important}
      .from-primary-50{--tw-gradient-from:var(--accent-050)!important}
      .primary-gradient{background:var(--accent)!important}

      /* ---- header ---- */
      .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
      /* индикатор прогресса чтения — живёт на нижней кромке шапки */
      .read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;
        background:var(--hair)}
      .read-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
        background:var(--accent);will-change:transform}
      @media(prefers-reduced-motion:no-preference){.read-progress i{transition:transform .12s linear}}
      @media(max-width:700px){.read-progress{height:2.5px}}
      .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
      .brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
      .brand .glyph{width:38px;height:38px;display:block;flex:none}
      .brand .glyph img{width:100%;height:100%;display:block;object-fit:contain}
      .brand b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em}
      .nav{display:flex;gap:32px}
      .nav a{color:var(--muted);font-weight:500;font-size:15px}
      .nav a:hover{color:var(--ink)}
      #mobile-menu-btn{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;border-radius:8px}
      #mobile-menu-btn:hover{background:var(--surface-2)}
      #mobile-menu-btn[aria-expanded="true"]{background:var(--accent-050);color:var(--accent-strong)}
      /* страница без JS: калькулятор рендерится скриптом, поэтому нужен
         честный текстовый фоллбэк вместо пустой карточки */
      .noscript-note{margin:0;border:1px solid var(--danger-100);background:var(--danger-050);color:var(--danger);
        border-radius:8px;padding:16px 16px;font-size:15px;line-height:1.55}
      .noscript-note b{display:block;color:var(--ink);margin-bottom:4px}
      /* мобильное меню — сплошная непрозрачная «шторка» под шапкой (а не
         прозрачный оверлей, наезжающий на контент). Шапка sticky/z-60,
         поэтому позиционируем меню абсолютно от её нижней кромки. */
      #mobile-menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
        background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
        box-shadow:0 16px 30px rgba(20,26,34,.14);padding:8px 0;
        max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain}
      #mobile-menu.hidden{display:none}
      #mobile-menu:not(.hidden){display:block}
      #mobile-menu nav{display:flex;flex-direction:column;gap:2px}
      #mobile-menu a{display:block;color:var(--ink);font-weight:500;padding:12px 4px;border-radius:8px}
      #mobile-menu a:hover{background:var(--surface-2);color:var(--accent-strong)}

      /* ---- hero (светлый F1: dot-grid, полноширинный заголовок, спидометр в углу) ---- */
      .hero{position:relative;overflow:hidden;background:#f4f8fc;border-bottom:1px solid var(--line)}
      .hero .pat{position:absolute;inset:0;z-index:0;pointer-events:none;
        background-image:radial-gradient(rgba(22,99,166,.10) 1.4px,transparent 1.6px);background-size:24px 24px;
        -webkit-mask-image:radial-gradient(125% 100% at 22% 0%,#000 42%,transparent 84%);mask-image:radial-gradient(125% 100% at 22% 0%,#000 42%,transparent 84%)}
      .hero-art{position:absolute;z-index:1;pointer-events:none;right:calc((100% - min(1140px, 100%)) / 2 + 24px);bottom:22px;width:min(430px,40%);opacity:.62}
      .hero-art .needle{transform-origin:200px 220px;animation:sweep 3.4s cubic-bezier(.6,.05,.25,1) .3s both}
      @keyframes sweep{0%{transform:rotate(-56deg)}55%{transform:rotate(16deg)}100%{transform:rotate(-6deg)}}
      @media(prefers-reduced-motion:reduce){.hero-art .needle{animation:none}}
      .hero .wrap{position:relative;z-index:3;padding-top:64px;padding-bottom:84px}
      .hero h1{color:var(--ink);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.03;letter-spacing:-.025em;margin:16px 0 0;max-width:none}
      .hero h1 .hl{color:var(--accent)}
      .hero h1 .ul{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.09em;text-underline-offset:.15em;text-decoration-skip-ink:none}
      .hero .lede{margin:24px 0 0;max-width:60ch;font-size:18px;line-height:1.55;color:var(--muted)}
      .hero .lede strong{color:var(--ink)}
      .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
      .btn-accent{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;font-weight:700;padding:16px 24px;border-radius:8px;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(18,26,34,.12)}
      .btn-accent:hover{color:#fff;background:var(--accent-strong);transform:translateY(-2px)}
      .btn-accent:active{transform:translateY(0);box-shadow:none}
      .hero .updated{font:500 13px/1 var(--font-mono);letter-spacing:.02em;color:var(--faint)}
      .hero-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
      .hero-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:13px;font-weight:500;color:#2c3644}
      .hero-chip svg{flex:none;color:var(--accent)}
      .hero-chip.sec{border-color:var(--breath);background:var(--breath-050);color:var(--breath-strong)}
      .hero-chip.sec svg{color:var(--breath-strong)}
      /* На узких экранах спидометр не прячем, а переносим в поток —
         под контент героя, по центру (гейдж = смысловая иллюстрация). */
      @media(max-width:960px){
        .hero{display:flex;flex-direction:column}
        .hero .wrap{order:1;padding-bottom:24px}
        .hero-art{order:2;position:static;right:auto;bottom:auto;transform:none;
          width:min(260px,60%);margin:0 auto 4px;opacity:.9;display:block}
      }
      /* ---- телефон: герой сжимается до одного экрана ----
         крупный заголовок ужимается и переносится по слогам,
         CTA во всю ширину, чипы компактные, гейдж — небольшой акцент. */
      @media(max-width:700px){
        .hero .pat{background-size:20px 20px}
        .hero .wrap{padding-top:32px;padding-bottom:16px}
        .hero h1{font-size:clamp(24px,7vw,32px);line-height:1.14;letter-spacing:-.02em;
          hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;margin-top:0}
        .hero .lede{margin-top:16px;font-size:15px;line-height:1.55}
        .hero-cta{margin-top:24px;gap:12px}
        .hero-cta .btn-accent{width:100%;justify-content:center;padding:16px 24px;font-size:16px}
        .hero .updated{width:100%;font-size:12px;letter-spacing:.04em}
        .hero-chips{margin-top:16px;gap:8px}
        .hero-chip{font-size:12px;padding:8px 12px;gap:8px}
        .hero-chip svg{width:13px;height:13px}
        .hero-art{width:min(186px,50%);margin:4px auto 0;opacity:.85}
      }

      /* ---- калькулятор наезжает на герой ---- */
      .calc-shell{margin-top:32px;position:relative;z-index:5}
      .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
      .calc-card{padding:8px;position:relative;overflow:hidden}
      .calc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
      .calc-head{padding:24px 32px 8px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between}
      .calc-head h2{font-size:24px;margin:0}
      .calc-head .hint{color:var(--faint);font-size:15px}
      .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
      .calc-col{padding:24px 32px 32px}
      .calc-col + .calc-col{border-left:1px solid var(--line)}
      @media (max-width:900px){.calc-grid{grid-template-columns:1fr}.calc-col + .calc-col{border-left:0;border-top:1px solid var(--line)}
        /* grid-элементы должны уметь ужиматься уже колонки, иначе контент
           вылезает вправо и обрезается overflow:hidden у калькулятора */
        .calc-col{min-width:0}
        #calculator input,#calculator select{min-width:0}}

      /* поля ввода — единый спокойный стиль */
      #calculator label{color:var(--ink)}
      #calculator input[type=number],#calculator input[type=text],#calculator select,#calculator input[type=date],#calculator input[type=time]{
        width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
        padding:12px 12px;font:15px/1.2 var(--font-body);color:var(--ink);transition:border-color .15s,box-shadow .15s;
      }
      #calculator input:focus,#calculator select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-050)}
      /* у чекбокса нет ни рамки, ни тени — правило выше гасило бы его фокус */
      #calculator input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:none}
      /* капс без положительного трекинга выглядит слипшимся — 0.06–0.1em */
      .field-sub{font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px}
      .seg{display:flex;gap:8px}
      .seg label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-weight:500;color:var(--muted);transition:.15s}
      .seg label:has(input:checked){border-color:var(--accent);background:var(--accent-050);color:var(--accent-strong)}
      .seg input{position:absolute;opacity:0;width:0;height:0}
      .subhead{display:flex;align-items:center;gap:12px;font-weight:600;font-family:var(--font-display);font-size:18px;color:var(--ink);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
      .subhead svg{color:var(--accent);flex:none}
      .drink-item{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}
      .drink-badge{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px}
      .remove-drink{background:none;border:0;color:var(--danger);font-size:13px;font-weight:500;cursor:pointer}
      .time-box{background:var(--accent-050);border:1px solid var(--accent-100);border-radius:8px;padding:12px}
      .time-preset{padding:8px 8px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;cursor:pointer;transition:.12s}
      .time-preset:hover{border-color:var(--accent);color:var(--accent)}
      .time-preset.active{background:var(--accent);border-color:var(--accent);color:#fff}
      .add-drink{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px dashed var(--accent-100);background:transparent;color:var(--accent);border-radius:8px;font-weight:600;cursor:pointer;transition:.15s}
      .add-drink:hover{background:var(--accent-050);border-color:var(--accent)}
      .btn-calc{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:16px;border:0;border-radius:8px;cursor:pointer;transition:.15s;box-shadow:0 1px 2px rgba(18,26,34,.12)}
      .btn-calc:hover{background:var(--accent-strong);color:#fff}
      .btn-calc:active:not([disabled]){background:var(--accent-strong);box-shadow:none;transform:translateY(1px)}
      .add-drink:active{background:var(--accent-100)}
      .save-row{margin-top:16px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:15px}
      .save-row input{width:17px;height:17px;accent-color:var(--accent)}

      /* результаты */
      #current-level{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
      .metric{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:16px}
      .metric .k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);line-height:1.35}
      .tab-btn{border:0;background:none;padding:12px 4px;font-weight:600;font-size:15px;color:var(--faint);border-bottom:2px solid transparent;cursor:pointer}
      .tab-btn.active,.tab-btn[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
      .tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
      .tab-content.hidden{display:none}

      /* =========================================================
         v4 — ответ вместо числа: вердикт, кривая, честный диапазон
         ========================================================= */

      /* вердикт «можно / нельзя за руль» — главный элемент результата */
      .verdict{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--tone-bd);
        background:var(--tone-bg);border-radius:12px;padding:16px 24px;margin-bottom:16px}
      .verdict.good{--tone:var(--good);--tone-bg:var(--good-050);--tone-bd:var(--good-100)}
      .verdict.warn{--tone:var(--amber-strong);--tone-bg:var(--amber-050);--tone-bd:var(--amber-100)}
      .verdict.bad{--tone:var(--danger);--tone-bg:var(--danger-050);--tone-bd:var(--danger-100)}
      .verdict.mute{--tone:var(--faint);--tone-bg:var(--surface-2);--tone-bd:var(--line)}
      .verdict.mute .vt{color:var(--muted)}
      .verdict .ico{flex:none;width:38px;height:38px;border-radius:8px;display:grid;place-items:center;
        background:var(--tone);color:#fff}
      .verdict .vt{font-family:var(--font-display);font-size:clamp(20px,2.4vw,24px);font-weight:600;
        line-height:1.14;letter-spacing:-.015em;color:var(--tone)}
      .verdict .vs{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink)}
      .verdict .vs b{font-weight:700;white-space:nowrap}
      .verdict .vh{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted)}
      .verdict .vbody{min-width:0}

      /* график динамики: коридор неопределённости + средняя кривая */
      .bac-chart{margin:0 0 16px;border:1px solid var(--line);border-radius:12px;
        background:var(--surface);padding:16px 12px 8px}
      .bac-chart .ch-head{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
        justify-content:space-between;margin:0 4px 8px}
      .bac-chart .ch-title{font:600 12px/1.3 var(--font-mono);letter-spacing:.14em;
        text-transform:uppercase;color:var(--faint)}
      .bac-chart .ch-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--faint);letter-spacing:.01em}
      .bac-chart .ch-legend span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
      .bac-chart .ch-legend i{width:14px;height:3px;border-radius:3px;background:currentColor;flex:none}
      .bac-chart .ch-legend .lg-band i{height:9px;border-radius:3px;background:var(--accent-100)}
      .bac-chart .ch-legend .lg-mid{color:var(--accent)}
      .bac-chart .ch-legend .lg-lim{color:var(--danger)}
      .bac-chart svg{width:100%;height:auto;display:block;overflow:visible}
      .ch-band{fill:var(--accent);opacity:.16}
      .ch-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
      .ch-grid{stroke:var(--hair);stroke-width:1}
      .ch-lim{stroke:var(--danger);stroke-width:1.5;stroke-dasharray:5 4;opacity:.9}
      .ch-now{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.45}
      .ch-lab{fill:var(--faint);font:600 12px/1 var(--font-mono);letter-spacing:.06em}
      .ch-lab-lim{fill:var(--danger);font:700 12px/1 var(--font-mono);letter-spacing:.05em}
      .ch-lab-ok{fill:var(--good);font:700 12px/1 var(--font-mono);letter-spacing:.05em}
      .ch-dot-now{fill:var(--accent);stroke:#fff;stroke-width:2.5}
      .ch-dot-ok{fill:var(--good);stroke:#fff;stroke-width:2.5}

      /* метрики результата */
      .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-bottom:16px}
      .metric{min-width:0}
      .metric .v{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.1;
        letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
      .metric .v-breath{color:var(--breath)}
      .metric .sub{color:var(--faint);font-size:12px;margin-top:4px;line-height:1.35}
      .status-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
      .status-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
        max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        font-size:12px;font-weight:600;border:1px solid var(--tone-bd,var(--line));
        background:var(--tone-bg,var(--surface-2));color:var(--tone,var(--muted))}
      .status-chip .dt{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
      .status-chip.good{--tone:var(--good);--tone-bg:var(--good-050);--tone-bd:var(--good-100)}
      .status-chip.warn{--tone:var(--amber-strong);--tone-bg:var(--amber-050);--tone-bd:var(--amber-100)}
      .status-chip.bad{--tone:var(--danger);--tone-bg:var(--danger-050);--tone-bd:var(--danger-100)}
      .status-chip.mute{--tone:var(--muted);--tone-bg:var(--surface-2);--tone-bd:var(--line)}

      /* пресеты порций и счётчик количества */
      .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
      .chip{padding:8px 12px;min-height:34px;border:1px solid var(--line);background:var(--surface);
        border-radius:999px;font:600 12px/1.2 var(--font-body);color:var(--muted);cursor:pointer;transition:.12s}
      .chip:hover{border-color:var(--accent);color:var(--accent)}
      .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
      .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
      .serving-row{display:flex;gap:12px;align-items:center}
      .vol{position:relative;flex:1;min-width:0}
      .vol .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--faint);pointer-events:none}
      #calculator .vol input{padding-right:48px}
      .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;
        background:var(--surface);overflow:hidden;flex:none}
      .qty-btn{width:40px;height:42px;border:0;background:none;color:var(--accent);font-size:18px;
        font-weight:700;line-height:1;cursor:pointer;transition:.12s}
      .qty-btn:hover:not([disabled]){background:var(--accent-050)}
      /* выключённая кнопка должна оставаться различимой, а не исчезать */
      .qty-btn[disabled]{color:#b3bcc9;cursor:not-allowed}
      .qty-val{min-width:40px;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
      .serving-sum{margin-top:8px;font-size:12px;color:var(--faint);line-height:1.4}
      .drink-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
      .drink-row2{display:grid;grid-template-columns:1fr 104px;gap:12px;margin-bottom:16px}
      .fld{display:block;min-width:0}

      /* время приёма: слайдер 0–12 ч вместо четырёх пресетов */
      .time-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px}
      /* цель нажатия ≥24 px (WCAG 2.5.8) — раньше было ~22 px */
      .link-btn{background:none;border:0;color:var(--accent);font:600 12px/1 var(--font-body);cursor:pointer;
        display:inline-flex;align-items:center;min-height:26px;
        padding:4px 4px;text-decoration:underline;text-underline-offset:3px}
      .link-btn:hover{color:var(--accent-strong)}
      .time-legend{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;
        color:var(--accent-strong);margin-top:-4px}
      .time-legend .clock{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
      /* значение — НАД слайдером, чтобы палец при перетаскивании не закрывал цифры */
      .time-value{display:flex;align-items:baseline;gap:8px;margin:2px 0 10px;font-size:16px;
        font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums}
      .time-value .clock{font-size:13px;font-weight:500;color:var(--muted)}
      /* быстрые пресеты «когда выпито» */
      .time-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
      .time-preset{min-height:36px;padding:7px 8px;border:1px solid var(--accent-100);
        background:var(--surface);color:var(--ink);border-radius:8px;font:600 13px/1 var(--font-body);
        cursor:pointer;transition:background .15s,border-color .15s,color .15s}
      .time-preset:hover{border-color:var(--accent);color:var(--accent)}
      .time-preset.active{background:var(--accent);border-color:var(--accent);color:#fff}
      .time-preset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
      .exact-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
      .exact-row.hidden{display:none}
      .rng{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:none;cursor:pointer;margin:0}
      .rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--accent-100)}
      .rng::-moz-range-track{height:6px;border-radius:3px;background:var(--accent-100)}
      .rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
        background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(18,26,34,.32);margin-top:-9px}
      .rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);
        border:3px solid #fff;box-shadow:0 1px 4px rgba(18,26,34,.32)}
      .rng:focus-visible{outline:none}
      .rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-050)}
      .rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--accent-050)}

      /* вес/рост — слайдер рядом с полем (быстрее, чем печатать) */
      .num-pair{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
      .num-pair .rng{margin-top:4px}

      /* валидация вместо alert() */
      .issues{border:1px solid var(--danger-100);background:var(--danger-050);color:var(--danger);border-radius:8px;
        padding:12px 16px;font-size:15px;line-height:1.5;margin-top:16px}
      .issues ul{margin:8px 0 0;padding-left:16px}
      .issues li{margin:4px 0}
      .issues.hidden{display:none}
      .btn-calc[disabled]{opacity:.5;cursor:not-allowed}
      .btn-calc[disabled]:hover{background:var(--accent)}
      .field-note{font-size:12px;line-height:1.4;color:var(--amber-strong);margin-top:8px}
      .field-note.hidden{display:none}
      .live-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);margin-top:12px}
      .live-hint .pulse{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
      @media(prefers-reduced-motion:no-preference){
        .live-hint .pulse{animation:livePulse 2.4s ease-in-out infinite}
        @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
      }
      .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
        clip:rect(0 0 0 0);white-space:nowrap;border:0}
      /* .hidden приходит из Tailwind CDN — дублируем для узлов, где скрытие
         критично, чтобы падение CDN не показывало служебные блоки */
      #share-url-container.hidden,#history-panel.hidden,#bac-chart[style*="none"]{display:none}

      @media(max-width:560px){
        .verdict{padding:16px;gap:12px}
        .verdict .ico{width:34px;height:34px}
        .drink-row2{grid-template-columns:1fr 92px;gap:12px}
        .metrics{grid-template-columns:1fr 1fr}
        .bac-chart{padding:12px 8px 8px}
      }

      /* ---- секции контента ---- */
      main{padding-bottom:48px}
      .section{padding:clamp(38px,5vw,64px) 0}
      .section.tint{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .sec-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
      .sec-head h2{font-size:clamp(24px,3vw,32px);line-height:1.14;margin:0}
      .sec-head h2::after{content:"";display:block;width:52px;height:3px;border-radius:3px;margin-top:12px;background:var(--accent)}
      /* .panel — не карточка, а колонка контента: длинный текст лежит на
   странице, ритм задают чередующиеся подложки секций, а не рамки. */
      .panel{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
      /* ---- ритм секций: не всё одной плотностью ----
         короткие врезки (цитата, автор, источники) дышат меньше,
         крупные разделы получают полный интервал. */
      .section.compact{padding:clamp(24px,3vw,40px) 0}
      .src-h{margin:0;font-size:var(--t-body)}
      /* сноски раскрыты по умолчанию; тонкая линия отделяет их от списка
         источников выше — раньше эту роль играла кромка аккордеона */
      .src-refs-h{margin:var(--s-5) 0 var(--s-3);padding-top:var(--s-4);
        border-top:1px solid var(--line)}
      .src-refs{font-size:var(--t-sm);color:var(--muted)}
      .src-refs > div{display:flex;flex-direction:column;gap:var(--s-2)}
      .note-after{margin-top:var(--s-4)}
      .h3-danger{font-family:var(--font-display);font-size:var(--t-xl);color:var(--danger);margin-bottom:var(--s-3)}
      .norm-grid-inline{margin:var(--s-5) 0 var(--s-2)}
      .norm-grid-tab{margin-bottom:var(--s-4)}
      .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)}
      .two-start{gap:var(--s-5);align-items:start}
      /* Список признаков отравления: вместо стандартных маркеров —
         одинаковый знак внимания у каждого пункта. break-inside держит
         строку с иконкой целиком в своей колонке. */
      .cols-2{margin:0;columns:2;column-gap:var(--s-5);padding:0;list-style:none;color:var(--muted)}
      .cols-2 li{display:flex;gap:var(--s-2);align-items:flex-start;
        break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 var(--s-2)}
      .cols-2 li:last-child{margin-bottom:0}
      .cols-2 li svg{flex:none;color:var(--danger);margin-top:3px}
      .bullets{margin:0;padding-left:var(--s-4)}
      .sos{text-align:center;margin-top:var(--s-4);background:#f6dcd8;border-radius:var(--r-sm);
        padding:var(--s-4);color:var(--danger);font-weight:700;font-size:var(--t-body)}
      .sub-note{margin:var(--s-2) 0 0;font-size:var(--t-cap);color:var(--faint)}

      /* панель результата и вкладки */
      .res-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
      .time-preset.is-primary{padding:var(--s-2) var(--s-4);background:var(--accent);color:#fff;border-color:var(--accent)}
      .time-preset.is-primary:hover{background:var(--accent-strong);color:#fff}
      #copy-url-btn{padding:var(--s-2) var(--s-4)}
      .tabs-bar{border-bottom:1px solid var(--line);margin:var(--s-5) 0 var(--s-4)}
      .tablist{display:flex;gap:var(--s-5)}
      .tab-h{margin:0 0 var(--s-3);font-size:var(--t-body)}
      .tab-note{font-size:var(--t-md);color:var(--muted);margin-bottom:var(--s-4)}
      .tab-foot{margin:var(--s-4) 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
      .eq-box-tab{padding:var(--s-4) var(--s-3);margin-bottom:var(--s-4)}
      #history-panel{padding:var(--s-5);margin-top:var(--s-5)}
      .hist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-4)}
      .hist-h{margin:0;font-size:var(--t-lg)}
      #history-container{display:flex;flex-direction:column;gap:var(--s-2)}
      .fieldset{margin-bottom:var(--s-5)}
      .field{margin-bottom:var(--s-4)}
      .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-4)}
      .noscript-note{margin-bottom:var(--s-4)}

      /* бирюза работает только как «канал выдоха»: чип героя, метрика,
         норма в мг/л и блок про алкотестер */
      [data-od-id="breathalyzer-photo"] .photo-card figcaption{border-top-color:var(--breath-100)}
      /* служебные пары «параметр — значение» в панели результата */
      .kv{width:100%;border-collapse:collapse;font-size:var(--t-md)}
      .kv td{padding:var(--s-2) 0;color:var(--muted);border-bottom:1px solid var(--hair)}
      .kv tr:last-child td{border-bottom:0}
      .kv .kv-k{width:96px;color:var(--ink)}
      .kv .kv-v{color:var(--ink);font-weight:600;text-align:right}

      /* ---- прогрессивное раскрытие: длинное убрано под запрос ---- */
      details.more{border-top:1px solid var(--line);margin:var(--s-4) 0}
      details.more > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s-2);
        padding:var(--s-3) 0;font:600 var(--t-md)/1.4 var(--font-body);color:var(--accent)}
      details.more > summary::-webkit-details-marker{display:none}
      details.more > summary::after{content:"";width:8px;height:8px;flex:none;
        border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
        transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s ease}
      details.more[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
      details.more > summary:hover{color:var(--accent-strong)}
      details.more > .more-body{padding-bottom:var(--s-4)}
      @media(prefers-reduced-motion:reduce){details.more > summary::after{transition:none}}
      .lead{font-size:18px;line-height:1.6;color:var(--muted)}
      /* Базовые правила .prose обёрнуты в :where() — их специфичность 0-1-0,
         поэтому лестница отступов ниже выигрывает по порядку, без гонки
         селекторов и !important. Раньше `.prose p` (0-1-1) молча забивал
         .lead и .p-gap, и весь ритм абзацев внутри статьи не применялся. */
      .prose :where(p){color:var(--muted);margin:0 0 var(--s-4)}
      .prose :where(h3){font-size:var(--t-xl);margin:var(--s-5) 0 var(--s-3)}
      .prose strong{color:var(--ink)}

      /* ---- лестница отступов абзацев: одна на всю страницу ---- */
      .lead{margin:0 0 var(--s-5)}
      .p-gap{margin:var(--s-5) 0 0;color:var(--muted)}
      .h3-gap{margin-top:var(--s-6)}
      p:only-child{margin:0}
      .note p{margin:0 0 var(--s-2)}
      .note p:last-child,.note ul:last-child{margin-bottom:0}
      .sub-box p{margin:0 0 var(--s-1)}
      .sub-box p:last-child{margin-bottom:0}

      /* карточки-заметки (спокойные, без «AI»-полосок) */
      .note{border:1px solid var(--line);border-radius:8px;padding:16px 24px;background:var(--surface-2);color:var(--muted);font-size:15px}
      .note.warn{background:#fdf6ea;border-color:#f0e0c0}
      .note.danger{background:var(--danger-050);border-color:var(--danger-100)}
      .note.good{background:var(--good-050);border-color:var(--good-100)}
      .note .nt{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);margin-bottom:8px;font-size:15px}
      .note.warn .nt{color:var(--amber)} .note.danger .nt{color:var(--danger)} .note.good .nt{color:var(--good)}
      .note svg{flex:none}

      /* ---- редакторская врезка-цитата (мнение эксперта, без «AI»-полоски) ---- */
      .pullquote{position:relative;max-width:76ch;margin:0 auto;padding:64px 0 4px}
      .pullquote .mark{position:absolute;left:-4px;top:-4px;z-index:0;pointer-events:none;user-select:none;
        font-family:var(--font-display);font-weight:700;font-size:96px;line-height:.7;color:var(--accent);opacity:.16}
      .pullquote blockquote{position:relative;z-index:1;margin:0;
        font-family:var(--font-display);font-weight:500;font-style:italic;
        font-size:clamp(18px,2vw,24px);line-height:1.52;letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
      .pullquote blockquote sup{font-family:var(--font-body);font-style:normal;font-weight:600;font-size:.58em;
        color:var(--accent);vertical-align:super;line-height:0}
      .pullquote .by{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--hair)}
      .pullquote .by .ava{width:44px;height:44px;flex:none;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
      .pullquote .by .nm{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--ink)}
      .pullquote .by .rl{font-size:13px;line-height:1.45;color:var(--faint);margin-top:4px;max-width:52ch}
      /* десктоп: кавычка уходит на левое поле, вне текстовой колонки */
      @media(min-width:900px){
        .pullquote{padding-top:24px}
        .pullquote .mark{left:-84px;top:-8px;font-size:120px}
      }
      /* мобильные: кавычка поднимается над текстом */
      @media(max-width:560px){.pullquote{padding-top:48px}.pullquote .mark{font-size:80px;top:-2px}}

      .norm-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
      .norm{border:1px solid var(--line);border-radius:12px;padding:24px;text-align:center;background:var(--surface)}
      .norm .k{font-size:13px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.07em}
      .norm .v{font-family:var(--font-display);font-size:32px;font-weight:600;margin-top:8px;letter-spacing:-.02em}
      .norm.blood .v{color:var(--accent)} .norm.breath .v{color:var(--breath)}
      @media(max-width:560px){.norm-grid{grid-template-columns:1fr}}

      /* таблицы */
      /* горизонтально прокручиваемая область должна быть достижима с клавиатуры */
      .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
      .tbl-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
      table.data{width:100%;border-collapse:collapse;min-width:520px;font-size:15px}
      table.data th{background:var(--surface-2);text-align:left;font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:16px 16px;border-bottom:1px solid var(--line)}
      table.data td{padding:16px 16px;border-bottom:1px solid var(--hair);color:var(--muted);vertical-align:top}
      table.data tr:last-child td{border-bottom:0}
      table.data td:first-child{color:var(--ink);font-weight:600}
      .lvl td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
      .money{color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}

      /* ---- индикаторы тяжести в таблице степеней опьянения ---- */
      .data.lvl tbody td:nth-child(2){position:relative;padding-left:32px}
      .data.lvl tbody td:nth-child(2)::before{content:"";position:absolute;left:16px;top:18px;
        width:10px;height:10px;border-radius:50%;background:var(--sev,var(--faint));
        box-shadow:0 0 0 4px color-mix(in oklab,var(--sev,var(--faint)) 22%,transparent)}

      /* ---- типографика формул: дробь, токены переменных, легенда ---- */
      .eq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
        font-family:var(--font-display);color:var(--ink);line-height:1;padding:8px 0;
        font-variant-numeric:normal}
      .eq-op{color:var(--faint);font-family:var(--font-body);font-weight:500;font-size:24px}
      .eq-frac{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
      .eq-frac .eq-num,.eq-frac .eq-den{display:inline-flex;align-items:center;gap:8px;padding:0 4px}
      .eq-frac .eq-num{border-bottom:2px solid var(--line);padding-bottom:8px}
      .v-tok{display:inline-flex;align-items:baseline;gap:0px;font-family:var(--font-mono);
        font-weight:600;font-size:16px;letter-spacing:.01em;padding:4px 12px;border-radius:8px;
        background:var(--tok-bg,var(--surface-2));color:var(--tok-fg,var(--ink));
        border:1px solid var(--tok-bd,var(--line));white-space:nowrap}
      .v-tok sub{font-size:.62em;font-weight:600;opacity:.85}
      .tok-bac{--tok-bg:var(--accent-050);--tok-fg:var(--accent-strong);--tok-bd:var(--accent-100)}
      .eq-legend{margin-top:16px;display:flex;flex-direction:column;gap:12px}
      .eq-legend .lg{display:flex;gap:12px;align-items:baseline;color:var(--muted);font-size:15px}
      .eq-legend .lg > .v-tok{flex:none;align-self:flex-start;min-width:64px;justify-content:center}
      .eq-legend .lg .sub-box{margin-top:8px}
      /* компактные токены в колонке переменных вкладки «Формула» */
      td .v-tok{font-size:13px;padding:4px 8px}
      .eq-block{margin:var(--s-5) 0}
      .eq-title{text-align:center;color:var(--accent);margin:0 0 var(--s-4);font-size:var(--t-lg)}
      .sub-box{margin:var(--s-1) 0 var(--s-1) var(--s-4);background:var(--accent-050);
        border:1px solid var(--accent-100);border-radius:var(--r-sm);padding:var(--s-3);
        font-size:var(--t-md);color:var(--muted)}
      .eq-box{background:var(--surface);border:1px solid var(--accent-100);border-radius:8px;padding:24px 16px}
      /* на узких экранах уравнение остаётся в одну строку: размеры тянутся по ширине экрана */
      @media(max-width:560px){
        .eq-box{padding:16px 8px}
        .eq{flex-wrap:nowrap;justify-content:center;gap:clamp(3px,1.4vw,7px);padding:4px 0}
        .eq .v-tok{font-size:clamp(10px,3.1vw,13px);padding:4px clamp(5px,1.8vw,8px);border-radius:8px}
        .eq-op{font-size:clamp(14px,4.4vw,18px)}
        .eq-frac{gap:8px}
        .eq-frac .eq-num,.eq-frac .eq-den{gap:clamp(3px,1.4vw,6px);padding:0 4px}
        .eq-frac .eq-num{padding-bottom:8px}
      }

      /* ---- визуализация кривой Видмарка–Seidl (dataviz) ---- */
      .widmark-viz{margin:var(--s-5) 0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:24px 24px 16px;overflow:hidden}
      .wv-head{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
      .wv-head .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
      .wv-svg{width:100%;height:auto;display:block;overflow:visible}
      .wv-axis{fill:none;stroke:var(--line);stroke-width:1.5}
      .wv-grid line{stroke:var(--hair);stroke-width:1}
      .wv-alab{fill:var(--faint);font:600 12px/1 var(--font-mono);letter-spacing:.08em}
      .wv-area{stroke:none;fill:url(#wvGrad)}
      .wv-curve{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
        stroke-dasharray:1000;stroke-dashoffset:1000;animation:wvDraw 1.9s ease .15s forwards}
      @keyframes wvDraw{to{stroke-dashoffset:0}}
      .wv-thr{stroke:var(--danger);stroke-width:1.6;stroke-dasharray:6 5;opacity:.85}
      .wv-thr-lab{fill:var(--danger);font:700 12px/1 var(--font-mono);letter-spacing:.03em}
      .wv-phase{fill:var(--muted);font:600 12px/1 var(--font-body)}
      .wv-peak{fill:var(--accent)} .wv-ok{fill:var(--good)}
      .wv-ok-lab{fill:var(--good);font:700 12px/1 var(--font-mono);letter-spacing:.03em}
      .wv-dot{fill:var(--accent);stroke:#fff;stroke-width:2}
      .widmark-viz figcaption{margin-top:12px;font-size:15px;color:var(--muted);line-height:1.55}
      .widmark-viz figcaption strong{color:var(--ink)}
      @media(prefers-reduced-motion:reduce){.wv-curve{animation:none;stroke-dashoffset:0}.wv-dot{display:none}}

      /* мифы / способы */
      .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
      @media(max-width:820px){.two{grid-template-columns:1fr}}
      .list-clean{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
      .list-clean li{display:flex;gap:12px;color:var(--muted);font-size:15px}
      .list-clean li .mk{flex:none;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;margin-top:0px}
      .mk.ok{background:var(--good-050);color:var(--good)} .mk.no{background:#f3f4f6;color:var(--faint)} .mk.al{background:var(--danger-050);color:var(--danger)}
      .list-clean li strong{color:var(--ink)}
      .col-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 16px}
      .col-title.pos{color:var(--good)} .col-title.neg{color:var(--danger)}

      /* FAQ */
      .faq-item{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
      .faq-item + .faq-item{margin-top:12px}
      .faq-q{margin:0}
      .faq-toggle{width:100%;text-align:left;background:none;border:0;padding:24px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .12s}
      .faq-toggle .q{font-size:16px;font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.32;text-wrap:balance}
      .faq-toggle:hover{background:var(--surface-2)}
      .faq-toggle:hover .q{color:var(--accent-strong)}
      .faq-toggle .chev{flex:none;color:var(--faint);transition:transform .2s}
      /* поворот шеврона привязан к aria-expanded, а не к внешнему классу:
         состояние иконки и состояние для скринридера не разъезжаются */
      .faq-toggle[aria-expanded="true"]{background:var(--accent-050)}
      .faq-toggle[aria-expanded="true"] .q{color:var(--accent-strong)}
      .faq-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--accent)}
      @media(prefers-reduced-motion:reduce){.faq-toggle .chev{transition:none}}
      .faq-item [id^="faq"]{padding:0 24px 24px;color:var(--muted);font-size:15px}
      .faq-item [id^="faq"].hidden{display:none}
      .faq-item ul{margin:8px 0 0;padding-left:24px}
      .faq-item li{margin:8px 0}

      /* автор / источники / популярное */
      .author{display:flex;gap:16px;align-items:center;border-top:3px solid var(--navy);padding-top:24px}
      .author .ava{width:60px;height:60px;flex:none;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
      .author h3{margin:0;font-size:18px}
      .author .role{color:var(--accent);font-weight:600}
      .src-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
      @media(max-width:700px){.src-grid{grid-template-columns:1fr}}
      .src-grid ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:15px}
      .src-grid a{display:inline-flex;gap:8px;align-items:flex-start}
      .popular{display:grid;grid-template-columns:1fr 1fr;gap:24px}
      @media(max-width:700px){.popular{grid-template-columns:1fr}}
      .pop-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
      .pop-card .pt{display:flex;align-items:center;gap:8px;font-weight:600;font-family:var(--font-display);font-size:18px;margin-bottom:12px}
      .pop-row{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border-radius:8px;color:var(--muted)}
      .pop-row:hover{background:var(--surface-2);color:var(--accent)}
      .pop-row .tag{font:600 12px/1 var(--font-mono);color:var(--faint);background:var(--surface-2);padding:4px 8px;border-radius:8px}
      .pop-more{display:inline-block;margin-top:12px;font-weight:600;font-size:15px}

      /* =========================================================
         ИНФОГРАФИКА — визуальные пересказы уже существующего
         контента (таблиц и абзацев). Данные не выдумываются:
         каждый блок читает те же цифры, что и текст рядом.
         ========================================================= */

      /* общая обёртка-фигура для всех инфографик */
      .info-fig{margin:var(--s-5) 0;border:1px solid var(--line);border-radius:12px;
        background:var(--surface);padding:24px 24px 16px}
      .info-fig > figcaption{margin-top:16px;font-size:15px;color:var(--muted);line-height:1.55}
      .info-fig > figcaption strong{color:var(--ink)}
      .info-hd{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-mono);
        letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
      .info-hd .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
      @media(max-width:560px){.info-fig{padding:16px 12px 16px}}

      /* ---- 1. шкала промилле ---- */
      .pm-flagrow{position:relative;height:36px}
      .pm-flag{position:absolute;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
        background:var(--surface);border:1px solid var(--accent-100);color:var(--accent-strong);
        font:600 12px/1 var(--font-mono);letter-spacing:.06em;padding:8px 12px;border-radius:8px;
        white-space:nowrap}
      .pm-flag::after{content:"";position:absolute;left:50%;bottom:-10px;width:1.5px;height:10px;background:var(--accent)}
      .pm-band,.pm-legend{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
      .pm-band > i{height:15px;background:var(--sev);border-radius:3px}
      .pm-band > i:first-child{border-radius:8px 3px 3px 8px}
      .pm-band > i:last-child{border-radius:3px 8px 8px 3px}
      .pm-legend{margin-top:12px;align-items:start}
      .pm-rng{display:block;font:600 13px/1.2 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
      .pm-nm{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:var(--muted);padding-right:8px}
      .pm-s1,.data.lvl tr.sev-1{--sev:var(--sev-1)}
      .pm-s2,.data.lvl tr.sev-2{--sev:var(--sev-2)}
      .pm-s3,.data.lvl tr.sev-3{--sev:var(--sev-3)}
      .pm-s4,.data.lvl tr.sev-4{--sev:var(--sev-4)}
      .pm-s5,.data.lvl tr.sev-5{--sev:var(--sev-5)}
      .pm-s6,.data.lvl tr.sev-6{--sev:var(--sev-6)}
      .pm-s7,.data.lvl tr.sev-7{--sev:var(--sev-7)}
      @media(max-width:820px){
        .pm-flagrow{height:auto;margin-bottom:16px}
        .pm-flag{position:static;transform:none;box-shadow:none}
        .pm-flag::after{display:none}
        .pm-band{display:none}
        .pm-legend{grid-template-columns:1fr;gap:0;margin-top:0}
        .pm-legend > div{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:baseline;
          padding:12px 0 12px 16px;border-left:4px solid var(--sev);border-bottom:1px solid var(--hair)}
        .pm-legend > div:last-child{border-bottom:0}
        .pm-nm{margin-top:0;padding-right:0}
      }

      /* ---- 6. нормы РФ: знаки прибора и крови ---- */
      .norm .ill{display:block;margin:0 auto 12px}
      .norm.breath .ill{color:var(--breath)} .norm.blood .ill{color:var(--accent)}

      /* ---- 5. скачок штрафа ---- */
      .fine-jump{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
      .fine-cell{flex:1 1 190px;min-width:0;border:1px solid var(--line);border-radius:8px;
        padding:16px 16px;background:var(--surface)}
      .fine-cell .k{display:block;font:600 12px/1 var(--font-mono);letter-spacing:.08em;
        text-transform:uppercase;color:var(--faint)}
      .fine-cell .v{display:block;margin-top:8px;font-family:var(--font-display);font-size:clamp(24px,3.4vw,32px);
        font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
      .fine-cell.was .v{color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px}
      .fine-cell.now{border-color:var(--danger-100);background:#fdf6f5}
      .fine-cell.now .v{color:var(--danger)}
      .fine-arrow{flex:none;display:grid;place-items:center;color:var(--danger)}
      .fine-arrow .d{font:600 12px/1 var(--font-mono);letter-spacing:.04em;margin-top:8px;white-space:nowrap}
      .fine-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
      .fine-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);
        background:var(--surface);border-radius:999px;font-size:13px;color:#2c3644}
      .fine-chip svg{flex:none;color:var(--danger)}
      @media(max-width:640px){
        .fine-jump{gap:12px}
        .fine-arrow{width:100%;transform:rotate(90deg);margin:4px 0}
        .fine-arrow .d{display:none}
        .fine-cell{flex:1 1 100%}
      }

      /* ---- 4. донат 90/10 ---- */
      .split90{display:grid;grid-template-columns:172px 1fr;gap:24px;align-items:center}
      .split90 .ring{position:relative;width:172px;height:172px}
      .split90 .ring svg{display:block;transform:rotate(-90deg)}
      .split90 .ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
      .split90 .ring .mid b{font-family:var(--font-display);font-size:32px;font-weight:600;color:var(--accent);letter-spacing:-.02em}
      .split90 .ring .mid span{display:block;font:600 12px/1.3 var(--font-mono);letter-spacing:.08em;
        text-transform:uppercase;color:var(--faint);margin-top:4px}
      .split90 .rows{display:flex;flex-direction:column;gap:16px}
      .split90 .row{display:flex;gap:12px;align-items:flex-start}
      .split90 .row .sw{flex:none;width:12px;height:12px;border-radius:3px;margin-top:4px}
      .split90 .row b{display:block;font-family:var(--font-display);font-size:18px;font-weight:600}
      .split90 .row p{margin:4px 0 0;font-size:15px;color:var(--muted)}
      @media(max-width:640px){.split90{grid-template-columns:1fr;justify-items:center;gap:24px}
        .split90 .rows{width:100%}}

      /* ---- 3. время вывода напитков ---- */
      .dr-key{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;font-size:13px;color:var(--muted)}
      .dr-key span{display:inline-flex;align-items:center;gap:8px}
      .dr-key i{width:11px;height:11px;border-radius:3px;display:block}
      .dr-rows{display:flex;flex-direction:column;gap:16px}
      .dr-row{display:grid;grid-template-columns:196px 1fr;gap:16px;align-items:center}
      .dr-name{display:flex;align-items:center;gap:12px;min-width:0}
      .dr-name svg{flex:none;color:var(--faint)}
      .dr-name b{font-size:15px;font-weight:600;color:var(--ink)}
      .dr-name em{display:block;font-style:normal;font:500 12px/1.3 var(--font-mono);color:var(--faint);letter-spacing:.02em}
      .dr-bars{display:flex;flex-direction:column;gap:8px;min-width:0}
      .dr-bar{display:grid;grid-template-columns:1fr 54px;gap:12px;align-items:center}
      .dr-bar i{display:block;height:13px;border-radius:3px;background:var(--c);min-width:4px}
      .dr-bar span{font:600 12px/1 var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
      .dr-m{--c:var(--accent)} .dr-f{--c:var(--accent-soft)}
      .dr-axis{display:flex;justify-content:space-between;margin:16px 64px 0 214px;
        border-top:1px solid var(--hair);padding-top:8px;
        font:500 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--faint)}
      @media(max-width:640px){
        .dr-row{grid-template-columns:1fr;gap:8px}
        .dr-axis{margin-left:0}
      }

      /* ---- фото-полоса и фото-карточки ---- */
      .photoband{position:relative;margin:0;overflow:hidden;background:var(--navy-2)}
      .photoband img{display:block;width:100%;height:clamp(240px,34vw,380px);object-fit:cover;object-position:center 62%}
      .photoband .veil{position:absolute;inset:0;
        background:linear-gradient(90deg,rgba(8,22,38,.9) 0%,rgba(8,22,38,.66) 48%,rgba(8,22,38,.18) 100%)}
      .photoband .qt{position:absolute;inset:0;display:flex;align-items:center}
      .photoband .qt .wrap{width:100%}
      .photoband blockquote{margin:0;max-width:34ch;color:#fff;font-family:var(--font-display);
        font-size:clamp(20px,2.6vw,32px);line-height:1.24;letter-spacing:-.015em;font-weight:600}
      .photoband cite{display:block;margin-top:16px;font:500 13px/1.5 var(--font-body);
        font-style:normal;color:#a9c2d6;max-width:44ch}
      @media(max-width:700px){
        .photoband img{height:300px;object-position:center 58%}
        .photoband .veil{background:linear-gradient(180deg,rgba(8,22,38,.5) 0%,rgba(8,22,38,.88) 55%)}
        .photoband blockquote{max-width:none}
      }
      .photo-card{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
        background:var(--surface);display:flex;flex-direction:column}
      /* при выравнивании stretch картинка добирает лишнюю высоту кадром,
         а не оставляет белую полосу под подписью */
      .photo-card img{display:block;width:100%;flex:1;min-height:0;aspect-ratio:3/2;object-fit:cover}
      .photo-card figcaption{padding:12px 16px;font-size:13px;line-height:1.5;color:var(--muted);
        border-top:1px solid var(--hair)}
      /* Текст слева, фото справа. Широкая колонка (7/12) отдана тексту и
         начинается от той же левой границы, что и заголовок секции, —
         строки продолжают заголовок, а не отступают за картинку.
         Снимок занимает 5/12 справа и держит высоту ряда. */
      .photo-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
        gap:var(--s-5);align-items:stretch;margin:var(--s-5) 0}
      /* Текст прижат к верху: первая строка встаёт вровень с верхней
         кромкой фото и подхватывает заголовок. Остаток высоты уходит
         вниз одним полем, а не размазывается сверху и снизу. */
      .ps-text{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
      .ps-text > :last-child{margin-bottom:0}
      /* заметка с фоном добирает остаток колонки, чтобы её низ совпал
         с нижней кромкой снимка */
      .ps-text > .note{margin:0;flex:1;display:flex;flex-direction:column;justify-content:center}
      .note .note-emph{margin:0;color:var(--ink);font-size:var(--t-lg)}
      @media(max-width:820px){
        .photo-split{grid-template-columns:1fr;gap:16px}
        .ps-text > .note{flex:0 1 auto}
      }

      /* footer */
      footer.site{background:var(--navy);color:#c4d3dd;padding:48px 0 32px}
      footer.site .wrap{text-align:center}
      footer.site .brand-f{display:inline-flex;align-items:center;gap:12px;color:#fff;margin-bottom:16px}
      footer.site .brand-f .glyph{width:42px;height:42px;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none}
      footer.site .brand-f .glyph img{display:block;object-fit:contain}
      footer.site h3{color:#fff;font-size:20px;margin:0}
      footer.site p{max-width:60ch;margin:0 auto 16px;color:#a9bcc8}
      footer.site a{color:#cfe0ea}
      footer.site .rule{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;font-size:13px;color:#8ea6b4}

      #back-to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border:0;border-radius:50%;background:var(--navy);color:#fff;cursor:pointer;z-index:60;display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:opacity .3s,transform .3s}
      #back-to-top.opacity-0{opacity:0;pointer-events:none;transform:translateY(16px)}
      #back-to-top.translate-y-16{transform:translateY(16px)}

      .toast{position:fixed;top:18px;right:18px;background:var(--good);color:#fff;padding:12px 16px;border-radius:8px;z-index:80;box-shadow:var(--shadow)}
      .toast.hidden{display:none}
      #copy-toast{background:var(--good)} #shared-notification{background:var(--accent)}

      @media(max-width:760px){
        .nav{display:none}#mobile-menu-btn{display:block}
        .hero .wrap{padding-top:32px;padding-bottom:24px}
        .section{padding:32px 0}
      }
      /* ---- телефон: внутренние отступы карточек не удваивают отступ .wrap ---- */
      @media(max-width:560px){
        .calc-card{padding:4px}
        .calc-head{padding:24px 16px 8px}
        .calc-col{padding:16px 16px 24px}
        .drink-item{padding:12px}
        .norm{padding:16px 16px}
        .pop-card{padding:16px 16px}
        .widmark-viz{padding:16px 12px 12px}
        .note{padding:16px 16px}
        .faq-toggle{padding:16px 16px}
        .faq-item [id^="faq"]{padding:0 16px 16px}
        table.data th,table.data td{padding:12px 12px}
        #history-panel{padding:16px 15px!important}
        /* две колонки списка не помещаются на телефоне — в одну */
        /* цеплялось за инлайновый columns:2, который стал классом .cols-2 —
           селектор перестал срабатывать и список оставался в две колонки */
        .cols-2{columns:1}
        .brand b{font-size:18px}
        .brand .glyph{width:34px;height:34px}
      }
      /* мягкое проявление секций (scripts.js добавляет .fade-in) */
      .fade-in{animation:fadeIn .7s ease both}
      @keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
      @media(prefers-reduced-motion:reduce){.fade-in{animation:none}}

      /* ============================================================
         КАЛЬКУЛЯТОР (актуальная боевая версия с new) — не менять.
         Алиасы старых имён токенов (--cyan/--teal) на новые (--breath/
         --good): значения идентичны, поэтому вид калькулятора сохраняется
         байт-в-байт. Ниже — классы панели результата, шага «еда/шеринг» и
         цветные токены переменных формулы, которых нет в макете v5
         (в нём калькулятор старой версии).
         ============================================================ */
      :root{
        --cyan:var(--breath); --cyan-strong:var(--breath-strong);
        --cyan-050:var(--breath-050); --cyan-100:var(--breath-100);
        --teal:var(--good); --teal-050:var(--good-050); --teal-100:var(--good-100);
      }
      /* цветные токены переменных в формуле Видмарка (вкладка «Формула») */
      .tok-a{--tok-bg:var(--cyan-050);--tok-fg:var(--cyan-strong);--tok-bd:var(--cyan-100)}
      .tok-m{--tok-bg:var(--teal-050);--tok-fg:var(--good);--tok-bd:var(--teal-100)}
      .tok-r{--tok-bg:var(--amber-050);--tok-fg:var(--amber-strong);--tok-bd:var(--amber-100)}
      .tok-b{--tok-bg:#fbeeed;--tok-fg:var(--danger);--tok-bd:#f0d3cf}
      .tok-t{--tok-bg:#eaf1f8;--tok-fg:var(--navy);--tok-bd:#d3e0ec}

      /* пошаговый калькулятор: вопрос про еду, детали напитка, кнопки шеринга */
      .seg-food{flex-wrap:wrap}
      .seg-food label{flex:1 1 46%;padding:9px 8px;font-size:13.5px}
      .drink-details.hidden{display:none}
      .share-row{display:flex;gap:10px;margin-bottom:12px}
      .btn-share,.btn-copy{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;font-weight:600;font-size:14px;border-radius:10px;cursor:pointer;transition:.15s;border:1px solid var(--line);line-height:1.2}
      .btn-share{background:var(--accent);color:#fff;border-color:var(--accent)}
      .btn-share:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
      .btn-copy{background:var(--surface);color:var(--muted)}
      .btn-copy:hover{border-color:var(--accent);color:var(--accent)}
      .btn-share svg,.btn-copy svg{flex:none}
      @media(max-width:560px){.share-row{flex-direction:column}.btn-share,.btn-copy{width:100%}}

      /* результат — фокус на числе */
      .res-head{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--muted);text-align:center;margin:0 0 14px}
      .res-hero{text-align:center;margin-bottom:16px}
      .res-hero__k{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
      .res-hero__v{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(46px,11vw,64px);font-weight:700;line-height:1.02;margin:6px 0 2px;color:var(--ink)}
      .res-hero__u{font-size:13px;color:var(--faint)}
      .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
      .res-cell{border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center;background:var(--surface-2)}
      .res-cell__k{font-size:12px;font-weight:600;color:var(--faint);line-height:1.3;margin-bottom:6px}
      .res-cell__v{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
      .res-cell__u{font-size:12px;color:var(--faint);margin-top:1px}
      .res-cell__n{font-size:11.5px;color:var(--faint);margin-top:6px;line-height:1.3}
      .res-cell--breath{background:#eef4fb;border-color:#d3e3f3}
      .res-cell--breath .res-cell__k,.res-cell--breath .res-cell__v{color:var(--accent)}
      .res-cell--time{background:var(--teal-050);border-color:var(--teal-100)}
      .res-cell--time .res-cell__k,.res-cell--time .res-cell__v{color:var(--good)}
      .res-verdict{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--tone-bd,var(--line));background:var(--tone-bg,var(--surface-2));border-radius:12px;padding:12px 16px;margin-bottom:16px}
      .res-verdict .ico{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--tone,var(--muted));color:#fff}
      .res-verdict__t{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--tone,var(--muted))}
      .res-verdict.good{--tone:var(--good);--tone-bg:var(--teal-050);--tone-bd:var(--teal-100)}
      .res-verdict.warn{--tone:var(--amber-strong);--tone-bg:var(--amber-050);--tone-bd:var(--amber-100)}
      .res-verdict.bad{--tone:var(--danger);--tone-bg:#fbeeed;--tone-bd:#f0d3cf}
      .res-verdict.mute{--tone:var(--faint);--tone-bg:var(--surface-2);--tone-bd:var(--line)}
      .res-note{font-size:12px;line-height:1.45;color:var(--faint);text-align:center;margin:0 0 14px}


      /* ============================================================
         Контентные страницы (хлебные крошки, карточные сетки, иконка
         секции). В макете главной v5 их нет — берём из боевой версии,
         чтобы подстраницы (после пива/водки, о калькуляторе и т.д.)
         были оформлены единообразно.
         ============================================================ */
      .sec-ico{display:none}
      .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:0;padding:0;font-size:14px;color:var(--faint)}
      .crumbs a{color:var(--accent);text-decoration:none}
      .crumbs a:hover{text-decoration:underline}
      .crumb-sep{color:var(--faint)}
      .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}

      /* napitki: ссылки в тексте видимо отличаются + hero CTA в контентной шапке */
      .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-weight:600}
      .prose a:hover{color:var(--accent-strong)}
      .note a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px;font-weight:600}
      .related-links{margin:16px 0 0;font-size:15px;color:var(--muted)}
      .section .hero-cta{margin-top:20px}
      .section .hero-cta .updated{font-size:13px;color:var(--faint)}
      /* нижнее меню напитков на главной (карточки как «Популярные варианты») */
      .drink-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
      .drink-menu .pop-card{display:flex;flex-direction:column}
      .pop-subrow{padding:0 12px 12px;font-size:13.5px;line-height:1.85;color:var(--faint)}
      .pop-subrow a{color:var(--muted);text-decoration:none}
      .pop-subrow a:hover{color:var(--accent);text-decoration:underline}
      @media(max-width:820px){.drink-menu{grid-template-columns:1fr;gap:18px}}}