@layer reset, base, layout, components, charts, utilities;

/* ═══════════════════════════════════════════════════════════
   VitaBase — сайт-дашборд. Кремовая база, лайм как акцент,
   мягкие крупные карточки, один тёмный блок как якорь.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Акцент */
  --lime:       #d7ff65;
  --lime-mid:   #c2ef3f;
  --lime-dark:  #b4e02a;   /* лайм на тон глубже — для hover заливок, не для текста */
  --lime-tint:  #f2ffd4;

  /* Кремовая база — тёплый градиент как в референсе */
  --cream:      #f7f6f1;
  --cream-warm: #f3f1e4;
  --card:       #fffffe;
  --ink:        #1a1d21;
  --ink-2:      #3d4249;
  --muted:      #6c7280;
  --faint:      #9aa0a8;
  --line:       #e8e7e0;
  --line-soft:  #f1f0ea;

  /* Графики: акцент + нейтрали. Прямые подписи обязательны. */
  --c-1: #c2ef3f;
  --c-2: #1f2328;
  --c-3: #b9beb2;

  --good: #2f7d32;
  --warn: #b26a00;
  --bad:  #c0392b;

  /* Типографика */
  --t-hero:  clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --t-h2:    clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-h3:    1.0625rem;
  --t-body:  .9375rem;
  --t-small: .8125rem;
  --t-micro: .6875rem;
  --t-data:  clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Крупные радиусы — часть языка этого стиля */
  --r-s: 12px; --r-m: 18px; --r-l: 26px; --r-xl: 34px;

  --fast: 150ms; --base: 260ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --shadow-s: 0 1px 2px rgb(26 29 33 / .04);
  --shadow-m: 0 2px 8px rgb(26 29 33 / .05), 0 12px 28px rgb(26 29 33 / .05);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box }
  * { margin: 0 }
  html { -webkit-text-size-adjust: 100% }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased }
  img, svg { display: block; max-width: 100% }
  button, input, select { font: inherit; color: inherit }
  a { color: inherit; text-decoration: none }
  ul, ol { list-style: none; padding: 0 }
}

@layer base {
  body {
    font-family: "Outfit", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink-2);
    /* тёплый разлив в правый верхний угол — как в референсе */
    background:
      radial-gradient(80% 60% at 100% 0%, var(--cream-warm), transparent 60%),
      radial-gradient(60% 50% at 0% 100%, #f6f7ef, transparent 55%),
      var(--cream);
    background-attachment: fixed;
  }

  h1, h2, h3 { color: var(--ink); line-height: 1.12; font-weight: 500 }
  h1 { font-size: var(--t-hero); letter-spacing: -.035em; font-weight: 400 }
  h2 { font-size: var(--t-h2);   letter-spacing: -.025em }
  h3 { font-size: var(--t-h3);   letter-spacing: -.012em; font-weight: 500 }
  p  { text-wrap: pretty }

  ::selection { background: var(--lime); color: var(--ink) }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px }
}

@layer layout {
  .shell { width: min(1360px, 100% - var(--sp-8)); margin-inline: auto; padding-block: var(--sp-5) var(--sp-12) }
  @media (max-width: 700px) { .shell { width: min(1360px, 100% - var(--sp-4)) } }

  /* Основная сетка дашборда.
     min-width:0 обязателен — иначе элемент не сожмётся меньше своего
     содержимого и длинное название распирает всю сетку. */
  .grid {
    display: grid; gap: var(--sp-4); grid-template-columns: repeat(12, 1fr);
    /* dense подтягивает меньшие карточки в дыры: часть блоков условная,
       и без этого строка остаётся недозаполненной */
    grid-auto-flow: row dense;
  }
  .grid > * { min-width: 0 }
  .col-3  { grid-column: span 3 }
  .col-4  { grid-column: span 4 }
  .col-5  { grid-column: span 5 }
  .col-6  { grid-column: span 6 }
  .col-7  { grid-column: span 7 }
  .col-8  { grid-column: span 8 }
  .col-12 { grid-column: span 12 }

  @media (max-width: 1080px) {
    .col-3, .col-4, .col-5 { grid-column: span 6 }
    .col-7, .col-8 { grid-column: span 12 }
  }
  @media (max-width: 700px) {
    .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12 }
  }
}

@layer components {

  /* ── Шапка-пилюли ──────────────────────────────────── */
  .topbar {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
    background: color-mix(in srgb, var(--card) 70%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    position: sticky; top: var(--sp-4); z-index: 60;
    margin-bottom: var(--sp-8);
  }
  .logo { font-size: 1.125rem; font-weight: 500; letter-spacing: -.03em; color: var(--ink) }
  .logo { display: inline-flex; align-items: center; gap: 7px }
  .logo > span { display: inline }   /* иначе flex-gap разносит «Vita» и «Base» */
  .logo b { font-weight: 500; color: var(--ink) }
  .logo::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%;
    background: var(--lime); box-shadow: 0 0 0 4px var(--lime-tint);
  }

  .tabs { display: flex; gap: 2px; margin-inline: auto; overflow-x: auto; scrollbar-width: none }
  .tabs::-webkit-scrollbar { display: none }
  .tabs a {
    padding: 9px var(--sp-4); border-radius: 999px; white-space: nowrap;
    font-size: var(--t-small); color: var(--muted);
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .tabs a:hover { background: var(--card); color: var(--ink) }
  .tabs a[aria-current="page"] { background: var(--ink); color: #fff }
  @media (max-width: 860px) { .tabs { display: none } }

  .topbar__cta {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: var(--lime); color: var(--ink);
    padding: 9px var(--sp-5); border-radius: 999px;
    font-size: var(--t-small); font-weight: 500; border: 0; cursor: pointer;
    transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
  }
  .topbar__cta:hover { background: var(--lime-mid); transform: translateY(-1px) }

  /* ── Приветственный блок ───────────────────────────── */
  .welcome { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-8) }
  .welcome h1 { max-width: 16ch }
  /* Фирменный лайм читается только как подложка — текст на нём тёмный */
  .welcome h1 mark {
    color: var(--ink); background: var(--lime);
    padding: 0 .12em; margin-inline: -.06em;
    border-radius: 8px; box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .kpis { display: flex; gap: clamp(var(--sp-6), 3vw, var(--sp-12)) }
  .kpi b {
    display: block; font-size: var(--t-data); font-weight: 400; color: var(--ink);
    letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  }
  .kpi span { font-size: var(--t-small); color: var(--muted) }

  /* ── Карточка ──────────────────────────────────────── */
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    padding: var(--sp-6);
    box-shadow: var(--shadow-s);
    display: flex; flex-direction: column;
    min-width: 0;   /* содержимое не должно распирать карточку */
  }
  .card > * { min-width: 0 }
  .card--dark { background: var(--ink); border-color: var(--ink); color: #cfd3d8 }
  .card--dark h3, .card--dark .card__title { color: #fff }
  .card--lime { background: var(--lime-tint); border-color: #e2f4b4 }

  .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5) }
  .card__title { font-size: var(--t-h3); font-weight: 500; color: var(--ink); letter-spacing: -.012em }
  .card__note { font-size: var(--t-micro); color: var(--faint) }
  .card--dark .card__note { color: #8b9299 }

  .card__link {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--cream); color: var(--ink);
    transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .card__link:hover { background: var(--lime); transform: translateY(-1px) }
  .card--dark .card__link { background: #2b3037; color: #fff }
  .card--dark .card__link:hover { background: var(--lime); color: var(--ink) }

  /* ── Чекер ─────────────────────────────────────────── */
  .picker { display: grid; gap: var(--sp-3) }

  /* ── Свой дропдаун с поиском ───────────────────────── */
  .dd { position: relative; min-width: 0 }
  .dd__native { position: absolute; opacity: 0; pointer-events: none; width: 1px }

  .dd__trigger {
    width: 100%; max-width: 100%; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--cream); border: 1px solid transparent;
    border-radius: var(--r-m); padding: 14px var(--sp-5);
    color: var(--ink); font-size: var(--t-body); text-align: left; cursor: pointer;
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
  }
  .dd__trigger:hover { border-color: var(--line) }
  /* min-width:0 + overflow даёт многоточие вместо распирания */
  .dd__value { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .dd__caret { flex: none; color: var(--muted); transition: transform var(--base) var(--ease) }
  .dd[data-open] .dd__trigger { background: var(--card); border-color: var(--ink) }
  .dd[data-open] .dd__caret { transform: rotate(180deg) }

  .dd__pop {
    position: absolute; z-index: 80; inset: calc(100% + 6px) 0 auto 0;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-m); box-shadow: var(--shadow-m);
    overflow: hidden;
  }
  .dd__pop[hidden] { display: none }

  .dd__search {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft);
    color: var(--faint);
  }
  .dd__input {
    flex: 1; border: 0; background: none; outline: none;
    font-size: var(--t-small); color: var(--ink);
  }
  .dd__input::placeholder { color: var(--faint) }

  .dd__list {
    max-height: 264px; overflow-y: auto; padding: var(--sp-2);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain;
  }
  .dd__opt {
    padding: 10px var(--sp-3); border-radius: var(--r-s);
    font-size: var(--t-small); color: var(--ink-2); cursor: pointer;
    overflow-wrap: anywhere; line-height: 1.4;
    transition: background-color var(--fast) var(--ease);
  }
  .dd__opt[hidden] { display: none }
  .dd__opt:hover, .dd__opt.is-active { background: var(--cream); color: var(--ink) }
  .dd__opt[aria-selected="true"] {
    background: var(--lime-tint); color: var(--ink); font-weight: 500;
  }
  .dd__opt mark { background: var(--lime); color: var(--ink); border-radius: 3px; padding: 0 1px }

  .dd__empty { padding: var(--sp-5); text-align: center; font-size: var(--t-small); color: var(--faint) }
  .dd__empty[hidden] { display: none }

  .swap { display: flex; align-items: center; gap: var(--sp-3); margin: 2px 0 }
  .swap i { flex: 1; height: 1px; background: var(--line-soft) }
  .swap span { font-size: var(--t-micro); color: var(--faint); text-transform: uppercase; letter-spacing: .1em }

  .quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4) }
  .chip {
    font-size: var(--t-micro); color: var(--ink-2); background: var(--cream);
    border: 1px solid transparent; border-radius: 999px;
    padding: 7px 13px; cursor: pointer;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .chip:hover { background: var(--lime-tint); border-color: #e2f4b4 }

  /* ── Кольцевой индикатор оценки ────────────────────── */
  .gauge { display: grid; place-items: center; position: relative; margin-block: var(--sp-2) }
  .gauge svg { width: min(210px, 100%); height: auto; overflow: visible }
  .gauge__ring { fill: none; stroke: var(--cream); stroke-width: 14; stroke-linecap: round }
  .gauge__val  {
    fill: none; stroke: var(--lime-mid); stroke-width: 14; stroke-linecap: round;
    transition: stroke-dashoffset 900ms var(--ease), stroke 300ms var(--ease);
  }
  .gauge[data-verdict="caution"] .gauge__val { stroke: var(--warn) }
  .gauge[data-verdict="neutral"] .gauge__val { stroke: var(--c-3) }

  .gauge__center { position: absolute; text-align: center; inset: 0; display: grid; place-content: center }
  .gauge__num {
    font-size: 2.75rem; font-weight: 400; color: var(--ink);
    letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums;
  }
  .gauge__cap { font-size: var(--t-micro); color: var(--muted); margin-top: 2px }

  .verdict { text-align: center; margin-top: var(--sp-3) }
  .verdict b { display: block; font-weight: 500; color: var(--ink) }
  .verdict span { font-size: var(--t-small); color: var(--muted) }

  /* ── Список взаимодействий (тёмная карточка) ───────── */
  .links { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); overflow-y: auto; max-height: 260px }
  .link-item {
    display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--r-s);
    transition: background-color var(--fast) var(--ease);
  }
  .link-item:hover { background: #262b31 }
  .link-item__ico {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 500;
  }
  .link-item--syn .link-item__ico { background: var(--lime); color: var(--ink) }
  .link-item--con .link-item__ico { background: #47262a; color: #ff9d92 }
  .link-item b { color: #fff; font-weight: 500; font-size: var(--t-small); display: block }
  .link-item p { color: #8b9299; font-size: var(--t-micro); line-height: 1.45; margin-top: 2px }

  .empty { color: #8b9299; font-size: var(--t-small); padding: var(--sp-6) 0; text-align: center }

  /* ── Расписание приёма ─────────────────────────────── */
  .schedule { display: grid; gap: var(--sp-3) }
  .slot { display: grid; grid-template-columns: 74px 1fr auto; gap: var(--sp-4); align-items: center }
  .slot__time { font-size: var(--t-micro); color: var(--faint); text-transform: uppercase; letter-spacing: .09em }
  .slot__bar { height: 34px; border-radius: var(--r-s); background: var(--cream); position: relative; overflow: hidden }
  .slot__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-s); background: var(--lime) }
  .slot--2 .slot__fill { background: var(--ink) }
  .slot--3 .slot__fill { background: var(--c-3) }
  .slot--4 .slot__fill { background: #dfe2d8 }
  .slot__time { white-space: nowrap }
  .slot__n { font-size: var(--t-small); color: var(--ink); font-variant-numeric: tabular-nums }

  /* ── Категории плитками ────────────────────────────── */
  .tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) }
  .tile {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
    padding: var(--sp-5); min-width: 0;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: #e2f4b4 }

  .tile__ico {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 12px; background: var(--cream); color: var(--ink);
    margin-bottom: var(--sp-4);
    transition: background-color var(--fast) var(--ease);
  }
  .tile:hover .tile__ico { background: var(--lime) }

  .tile b { display: block; font-size: 1.5rem; font-weight: 400; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
  .tile__title { font-size: var(--t-small); color: var(--ink-2); display: block; margin-top: 2px }
  .tile p {
    font-size: var(--t-micro); color: var(--faint); margin-top: var(--sp-2); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Заголовок секции вне карточки */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
  }
  .section-head h2 { font-size: var(--t-h3); font-weight: 500 }
  .section-head p { font-size: var(--t-micro); color: var(--faint); margin-top: 2px }

  /* ── Крошки и заголовок оси ────────────────────────── */
  .crumbs { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--t-micro); color: var(--faint); margin-bottom: var(--sp-3) }
  .crumbs a:hover { color: var(--ink) }

  .axis-title { display: flex; align-items: center; gap: var(--sp-4) }
  .axis-title__ico {
    display: grid; place-items: center; width: 52px; height: 52px; flex: none;
    border-radius: 16px; background: var(--lime); color: var(--ink);
  }

  /* ── Строки списка ─────────────────────────────────── */
  .rows { display: grid; gap: 2px }
  .row {
    display: grid; align-items: center; gap: var(--sp-4);
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 110px 28px 40px;
    padding: var(--sp-4) var(--sp-5);
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-m);
    transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .row:hover { border-color: var(--lime-mid); transform: translateX(2px) }
  .row__name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .row__fn { font-size: var(--t-small); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .row__dose { font-size: var(--t-small); color: var(--ink-2); text-align: right }
  .row__ev {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
    font-size: var(--t-micro); font-weight: 500; color: var(--ink); background: var(--cream);
  }
  .row__ev--a { background: var(--lime) }
  .row__ev--b { background: var(--c-3) }
  .row__links { font-size: var(--t-small); color: var(--faint); text-align: right }

  @media (max-width: 860px) {
    .row { grid-template-columns: 1fr auto auto; row-gap: var(--sp-2) }
    .row__fn { grid-column: 1 / -1; white-space: normal }
    .row__dose { text-align: left }
  }

  /* ── Страница соединения ───────────────────────────── */
  .facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-5) }
  .facts span { font-size: var(--t-small); color: var(--ink-2) }
  .facts b {
    display: block; font-size: var(--t-micro); color: var(--faint);
    text-transform: uppercase; letter-spacing: .07em; font-weight: 500;
  }

  .deflist { display: grid; gap: 0 }
  .deflist > div {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-small);
  }
  .deflist > div:last-child { border-bottom: 0 }
  .deflist span { color: var(--muted); flex: none }
  .deflist b { color: var(--ink); font-weight: 500; text-align: right }

  .benefits { display: grid; gap: var(--sp-4) }
  .benefit { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft) }
  .benefit:last-child { border-bottom: 0; padding-bottom: 0 }
  .benefit h3 { font-size: var(--t-body); margin-bottom: var(--sp-1) }
  .benefit p { font-size: var(--t-small); color: var(--muted) }
  .benefit__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2) }
  .benefit__meta span { font-size: var(--t-micro); color: var(--faint) }
  .benefit__meta i {
    font-style: normal; font-size: var(--t-micro); color: var(--ink-2);
    background: var(--cream); border-radius: 999px; padding: 3px 9px;
  }

  .pairs-list { display: grid; gap: var(--sp-2) }
  .pair-item {
    display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-3);
    padding: var(--sp-3); border-radius: var(--r-s);
    transition: background-color var(--fast) var(--ease);
  }
  .pair-item:hover { background: var(--cream) }
  .pair-item__ico {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; font-weight: 500;
  }
  .pair-item--syn .pair-item__ico { background: var(--lime); color: var(--ink) }
  .pair-item--con .pair-item__ico { background: #fde4e0; color: #a13b2c }
  .pair-item b { color: var(--ink); font-weight: 500; font-size: var(--t-small) }
  .pair-item p { font-size: var(--t-small); color: var(--muted); margin-top: 1px }
  .pair-item i { display: block; font-style: normal; font-size: var(--t-micro); color: var(--faint); margin-top: 3px }

  .drugs { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }
  .drug { padding: var(--sp-5); border-radius: var(--r-m); background: var(--cream); border-left: 3px solid var(--c-3) }
  .drug--major { border-left-color: var(--bad); background: #fdf3f1 }
  .drug--moderate { border-left-color: var(--warn) }
  .drug header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2) }
  .drug b { color: var(--ink); font-weight: 500 }
  .drug p { font-size: var(--t-small); color: var(--muted) }
  .drug__fix { margin-top: var(--sp-3); font-size: var(--t-micro); color: var(--ink-2) }
  .tag {
    font-size: var(--t-micro); padding: 3px 9px; border-radius: 999px;
    background: var(--card); color: var(--ink-2); flex: none;
  }

  .ticks { display: grid; gap: var(--sp-2) }
  .ticks li {
    position: relative; padding-left: var(--sp-6); font-size: var(--t-small); color: var(--ink-2);
  }
  .ticks li::before {
    content: ""; position: absolute; left: 6px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--lime-mid);
  }
  .ticks--warn li::before { background: var(--warn) }
  .ticks--dark li { color: #cfd3d8 }
  .ticks--dark li::before { background: var(--lime) }

  .groups { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) }
  .group { padding: var(--sp-4); background: var(--cream); border-radius: var(--r-m) }
  .group b { display: block; color: var(--ink); font-weight: 500; font-size: var(--t-small) }
  .group p { font-size: var(--t-micro); color: var(--muted); margin-top: 2px }
  .group i { display: block; font-style: normal; font-size: var(--t-micro); color: var(--ink-2); margin-top: var(--sp-2) }

  .findings { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) }
  .findings li {
    position: relative; padding-left: var(--sp-6); font-size: var(--t-small); color: var(--ink-2);
  }
  .findings li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 12px; height: 2px; border-radius: 2px; background: var(--lime-mid);
  }

  /* ── Страница пары ─────────────────────────────────── */
  /* max-width снимается: у заголовка пары два длинных названия,
     ограничение в 16ch ломало его на строки */
  .welcome h1.pair-title, .welcome h1.axis-title { max-width: none }

  .pair-title {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
    font-weight: 400; letter-spacing: -.03em; line-height: 1.15;
  }
  .pair-title a { color: var(--ink); border-bottom: 2px solid var(--lime); }
  .pair-title a:hover { background: var(--lime-tint) }
  .pair-title__plus { color: var(--faint); font-weight: 300 }

  .plan { display: grid; gap: var(--sp-2) }
  .plan__row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: var(--sp-4);
    align-items: center; padding: var(--sp-4) var(--sp-5);
    background: var(--cream); border-radius: var(--r-m);
  }
  .plan__name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .plan__slot {
    font-size: var(--t-micro); padding: 5px 12px; border-radius: 999px;
    background: var(--card); color: var(--ink-2); white-space: nowrap;
  }
  .plan__slot--a { background: var(--lime) }
  .plan__slot--b { background: var(--ink); color: #fff }
  .plan__dose { font-size: var(--t-small); color: var(--muted); white-space: nowrap }

  .plan__gap {
    display: flex; align-items: center; gap: var(--sp-3);
    padding-left: var(--sp-5); color: var(--warn); font-size: var(--t-micro);
  }
  .plan__gap::before, .plan__gap::after {
    content: ""; height: 1px; background: repeating-linear-gradient(90deg, var(--warn) 0 4px, transparent 4px 8px);
  }
  .plan__gap::before { width: 24px; flex: none }
  .plan__gap::after { flex: 1 }

  .cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small) }
  .cmp th {
    text-align: right; font-size: var(--t-micro); color: var(--faint); font-weight: 500;
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
  }
  .cmp th:first-child { text-align: left }
  .cmp td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); text-align: right; color: var(--ink) }
  .cmp td:first-child { text-align: left }
  .cmp__label { color: var(--muted) !important }
  .cmp tbody tr:hover { background: var(--cream) }

  .row--pair { grid-template-columns: minmax(0,2fr) minmax(0,1fr) 44px }

  /* Победитель по показателю */
  .cmp--wide td, .cmp--wide th { padding-inline: var(--sp-2) }
  .cmp__win {
    position: relative; font-weight: 500;
  }
  .cmp__win::after {
    content: ""; position: absolute; inset: 4px -6px; border-radius: 8px;
    background: var(--lime); opacity: .35; z-index: -1;
  }
  .cmp tbody tr { position: relative; isolation: isolate }

  /* Две колонки различий */
  .split2 { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }
  .split2__col h3 { margin-bottom: var(--sp-2) }

  /* Список сравнений в хабе */
  .cmp-list { display: grid; gap: 2px }
  .cmp-link {
    display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--sp-3);
    align-items: center; padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-s); font-size: var(--t-small); color: var(--ink-2);
    transition: background-color var(--fast) var(--ease);
  }
  .cmp-link:hover { background: var(--cream) }
  .cmp-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .cmp-link span:last-of-type { text-align: right }
  .cmp-link i { font-style: normal; color: var(--faint); font-size: var(--t-micro) }
  .cmp-link b { color: var(--faint); font-weight: 400; font-size: var(--t-micro); min-width: 66px; text-align: right }
  @media (max-width: 560px) {
    .cmp-link { grid-template-columns: 1fr auto; row-gap: 2px }
    .cmp-link i { display: none }
    .cmp-link span:last-of-type { text-align: left }
  }

  /* ── FAQ ───────────────────────────────────────────── */
  .faq details { border-bottom: 1px solid var(--line-soft) }
  .faq details:last-child { border-bottom: 0 }
  .faq summary {
    padding: var(--sp-4) 0; cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: var(--sp-4);
    color: var(--ink); font-weight: 500; font-size: var(--t-body);
  }
  .faq summary::-webkit-details-marker { display: none }
  .faq summary::after { content: "+"; color: var(--faint); font-weight: 300; font-size: 1.25rem; transition: transform var(--base) var(--ease) }
  .faq details[open] summary::after { transform: rotate(45deg) }
  .faq p { padding-bottom: var(--sp-4); color: var(--muted); font-size: var(--t-small); max-width: 62ch }

  /* ── Футер ─────────────────────────────────────────── */
  .foot {
    margin-top: var(--sp-12); padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); justify-content: space-between;
    font-size: var(--t-micro); color: var(--faint);
  }
  .foot nav { display: flex; gap: var(--sp-5); flex-wrap: wrap }
  .foot a:hover { color: var(--ink) }
}

@layer charts {
  /* Тонкие марки, 4px скругления на концах, 2px зазоры, подписи прямо на данных */
  .bars { display: grid; gap: var(--sp-3) }
  .bar-row { display: grid; grid-template-columns: 104px 1fr 34px; gap: var(--sp-3); align-items: center }
  .bar-row__name { font-size: var(--t-small); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .bar-row__track { height: 10px; background: var(--cream); border-radius: 999px; overflow: hidden }
  .bar-row__fill {
    display: block; height: 10px; border-radius: 999px; background: var(--lime-mid);
    transform-origin: left; transform: scaleX(0);
    transition: transform 800ms var(--ease);
  }
  .bar-row:hover .bar-row__fill { background: var(--lime-dark) }
  .bar-row__n { font-size: var(--t-small); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }

  /* Кольцо доказательности */
  .donut { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap }
  .donut svg { width: 132px; height: 132px; flex: none }
  .donut__seg { fill: none; stroke-width: 18; transition: stroke-dasharray 900ms var(--ease) }
  .legend { display: grid; gap: var(--sp-2); flex: 1; min-width: 120px }
  .legend__row { display: grid; grid-template-columns: 10px 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--t-small) }
  .legend__dot { width: 10px; height: 10px; border-radius: 3px }
  .legend__row span { color: var(--ink-2) }
  .legend__row b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums }
}

@layer utilities {
  .nums { font-variant-numeric: tabular-nums }
  .muted { color: var(--muted) }
  .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 }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

@layer components {
  .filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5) }
  .chip--on { background: var(--ink); color: #fff }
  .chip--on:hover { background: var(--ink); border-color: transparent }

  /* Текстовые страницы */
  .doc { max-width: 68ch }
  .doc h2 { font-size: var(--t-h3); margin: var(--sp-8) 0 var(--sp-3) }
  .doc h2:first-child { margin-top: 0 }
  .doc p { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--sp-3) }
  .doc .ticks { margin: var(--sp-3) 0 var(--sp-4) }
}

@layer components {
  .deflist__limit { border-top: 1px solid var(--line) !important; margin-top: var(--sp-2); padding-top: var(--sp-4) !important }
  .deflist__limit b { color: var(--warn) }
  .deflist__limit i { display: block; font-style: normal; font-size: var(--t-micro); color: var(--faint); font-weight: 400 }
  .card--dark .deflist > div { border-color: #2b3037 }
  .card--dark .deflist span { color: #8b9299 }
  .card--dark .deflist b { color: #fff }
}

@layer components {
  /* Партнёрская кнопка */
  .buy {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: var(--ink); color: #fff;
    padding: 12px var(--sp-6); border-radius: 999px;
    font-size: var(--t-small); font-weight: 500;
    transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
  }
  .buy:hover { background: #2b3037; transform: translateY(-1px) }
  .buy--sm { background: var(--cream); color: var(--ink); padding: 10px var(--sp-5); font-weight: 400 }
  .buy--sm:hover { background: var(--lime); transform: translateY(-1px) }
  .buy--sm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch }
  .buy__note { font-size: var(--t-micro); color: var(--faint); margin-top: var(--sp-3) }
  .buy-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) }
}

@layer components {
  /* Таблицы на узком экране скроллятся внутри карточки, а не рвут вёрстку */
  .table-wrap {
    overflow-x: auto; margin-inline: calc(var(--sp-6) * -1); padding-inline: var(--sp-6);
    scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  .table-wrap .cmp { min-width: 340px }

  @media (max-width: 560px) {
    /* Полосы графиков: подпись сверху, чтобы бар не сжимался в нить */
    .bar-row { grid-template-columns: 1fr auto; row-gap: 2px }
    .bar-row__name { grid-column: 1 / -1 }
    .bar-row__track { grid-column: 1 }

    /* План приёма: дозировка уходит на вторую строку */
    .plan__row { grid-template-columns: 1fr auto; row-gap: var(--sp-2) }
    .plan__dose { grid-column: 1 / -1; text-align: left }

    /* Расписание */
    .slot { grid-template-columns: 1fr auto; row-gap: 4px }
    .slot__time { grid-column: 1 / -1 }
    .slot__bar { grid-column: 1 }

    /* Метрики в шапке — в две колонки вместо ряда */
    .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) }
    .welcome { gap: var(--sp-6) }

    /* Кольцевая диаграмма и легенда друг под другом */
    .donut { flex-direction: column; align-items: flex-start }

    /* Карточки чуть уже по паддингу — иначе контенту тесно */
    .card { padding: var(--sp-5) }
    .table-wrap { margin-inline: calc(var(--sp-5) * -1); padding-inline: var(--sp-5) }
  }

  @media (max-width: 420px) {
    .topbar { padding-left: var(--sp-4) }
    .topbar__cta span { display: none }
    .facts { gap: var(--sp-3) }
  }
}

@layer components {
  .ico { flex: none; display: block }
}

@layer components {
  .row--scored { grid-template-columns: minmax(0,2fr) minmax(0,2fr) auto 44px }
  .row__verdict { font-size: var(--t-micro); padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--ink-2); white-space: nowrap }
  .row__verdict--synergy { background: var(--lime-tint); color: #4a6b00 }
  .row__verdict--caution { background: #fdf0e6; color: var(--warn) }
  .row__score { font-weight: 600; text-align: right; font-size: 1rem }
  .row__score--synergy { color: var(--lime-dark) }
  .row__score--caution { color: var(--warn) }
  .row__score--neutral { color: var(--faint) }
  .rank-note { font-size: var(--t-small); color: var(--ink-2); background: var(--cream); padding: var(--sp-4); border-radius: var(--r-m); margin-bottom: var(--sp-5) }
  .rank-note a { color: var(--ink); border-bottom: 1px solid var(--lime-mid); margin-left: var(--sp-2) }
  @media (max-width: 700px) {
    .row--scored { grid-template-columns: 1fr auto }
    .row--scored .row__fn, .row--scored .row__verdict { grid-column: 1 / -1 }
  }
}