/* Прототип мини-приложения MAX для родителя.
   Экран смотрят с телефона между делом: крупный тап, один главный блок на экран,
   цифры и расстояния табличными. Тема светлая и темная, берется системная. */
:root {
  --ink: #0d1420;
  --ink-2: #4a5768;
  --ink-3: #646e7c;   /* текст: 4,8 к фону страницы, читается на улице */
  --ink-4: #8b98aa;   /* иконки и разделители, к тексту не применять */
  --bg: #f4f6fb;
  --card: #ffffff;
  --line: rgba(13, 20, 32, .085);
  --line-2: rgba(13, 20, 32, .045);
  --acc: #2563eb;
  --on-acc: #ffffff;   /* текст на акцентной кнопке */
  --acc-2: #4f8bff;
  --acc-soft: rgba(37, 99, 235, .09);
  --gold: #e0952a;              /* иконки и акценты, к мелкому тексту не применять */
  --gold-ink: #8a5300;          /* текст на золотой плашке: 5,4 к своей подложке */
  --gold-soft: rgba(245, 185, 59, .16);
  --ok: #0b7a44;
  --ok-soft: rgba(15, 157, 88, .12);
  --danger: #c02a2a;
  --r: 18px;
  --r-s: 13px;
  --tap: 52px;
  --pad: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef2f8; --ink-2: #a8b4c4; --ink-3: #97a3b4; --ink-4: #6e7c8f;
    --bg: #080d15; --card: #131a25; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.05);
    --acc: #7ea6ff; --acc-2: #9dbaff; --acc-soft: rgba(126,166,255,.16); --on-acc: #0a1526;
    --gold: #f5b93b; --gold-ink: #f7c86a; --gold-soft: rgba(245,185,59,.15);
    --ok: #3ddc84; --ok-soft: rgba(61,220,132,.13);
    --danger: #ff7a7a;
  }
}
:root[data-theme="dark"] {
  --ink: #eef2f8; --ink-2: #a8b4c4; --ink-3: #97a3b4; --ink-4: #6e7c8f;
  --bg: #080d15; --card: #131a25; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.05);
  --acc: #7ea6ff; --acc-2: #9dbaff; --acc-soft: rgba(126,166,255,.16); --on-acc: #0a1526;
  --gold: #f5b93b; --gold-ink: #f7c86a; --gold-soft: rgba(245,185,59,.15);
  --ok: #3ddc84; --ok-soft: rgba(61,220,132,.13);
  --danger: #ff7a7a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 -apple-system, "SF Pro Text", "Segoe UI", Roboto, Inter, sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 620px; margin: 0 auto; padding: 0 var(--pad) calc(94px + env(safe-area-inset-bottom)); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- шапка с выбором ребенка */
.bar {
  /* шапка лежит вне main, поэтому свои поля держит сама: отрицательные отступы
     тут вылезали за экран и давали горизонтальную прокрутку на узких телефонах */
  position: sticky; top: 0; z-index: 6;
  padding: 10px var(--pad) 11px;
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.kid { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 0; }
.ava {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  background: linear-gradient(160deg, var(--acc-2), var(--acc));
  color: #fff; font-weight: 640; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.kid .who { min-width: 0; text-align: left; }
.kid .nm { display: flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: -.015em; }
.kid .nm svg { width: 15px; height: 15px; stroke: var(--ink-4); stroke-width: 2.2; }
.kid .sc { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.bar .icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
             justify-content: center; color: var(--ink-2); background: var(--card);
             border: 1px solid var(--line); flex: none; }
.bar .icon svg { width: 21px; height: 21px; }
.bar:empty { display: none; }
@media (min-width: 653px) { .bar { max-width: 652px; margin: 0 auto; } }

/* ---------- заголовки */
h1 { margin: 22px 0 16px; font-size: 29px; font-weight: 680; letter-spacing: -.035em;
     text-wrap: balance;
     line-height: 1.12; }
h1 .sub { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-3);
          letter-spacing: 0; margin-top: 3px; }
h2 { margin: 34px 0 12px; font-size: 13px; font-weight: 640; color: var(--ink-2);
     display: flex; justify-content: space-between; align-items: baseline; }
h2 a, h2 .more { color: var(--acc); font-weight: 600; font-size: 13px; text-decoration: none; }
h2 .more { margin: -11px -8px -11px 0; padding: 11px 8px; }
h3 { margin: 0 0 3px; font-size: 17px; font-weight: 630; letter-spacing: -.02em; }
p { margin: 0 0 9px; }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }

/* ---------- карточки */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        padding: 14px; margin-bottom: 18px; }
.card.tap { display: block; width: 100%; text-align: left;
            transition: transform .12s ease, border-color .15s ease; }
.card.tap:active { transform: scale(.994); border-color: var(--acc); }
.rows > button { transition: background .12s ease; }
.rows > button:active { background: var(--acc-soft); }
.hero .act button:active, .btn:active { transform: scale(.985); filter: brightness(.95); }
nav button:active span, nav button:active svg { opacity: .6; }
.kid:active { opacity: .65; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.rows { display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r);
        overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px; }
.rows > * { background: var(--card); padding: 13px 15px; display: flex; gap: 12px;
            align-items: center; text-align: left; width: 100%; }
.rows .grow { flex: 1; min-width: 0; }
.chev { width: 17px; height: 17px; stroke: var(--ink-4); stroke-width: 2; flex: none;
         align-self: center; }

/* ---------- главный блок: ближайшее */
.hero {
  position: relative; overflow: hidden; color: #fff; padding: 17px;
  border-radius: var(--r); margin-bottom: 10px;
  background: linear-gradient(145deg, #2f6bf0 0%, #1d4fd8 55%, #163fae 100%);
}
.hero::after {
  content: ""; position: absolute; right: -52px; top: -64px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(255,255,255,.10);
}
.hero .kicker { position: relative; font-size: 12px; font-weight: 700;
                color: #ffe9bd; margin-bottom: 7px; }
.hero .title { position: relative; font-size: 20px; font-weight: 650; letter-spacing: -.024em;
               line-height: 1.2; }
.hero .meta { position: relative; margin-top: 7px; font-size: 14.5px; color: rgba(255,255,255,.84); }
.hero .act { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.hero .act button { background: #fff; color: #17347f; font-size: 16px; font-weight: 620;
                    min-height: 48px; padding: 0 20px; border-radius: 12px; }
.hero .act .ghost { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- кружок в списке */
.prog { display: flex; gap: 13px; align-items: flex-start; }
.prog .pic { width: 46px; height: 46px; border-radius: 13px; flex: none; display: flex;
             align-items: center; justify-content: center; }
.prog .pic svg { width: 23px; height: 23px; }
.prog .grow { flex: 1; min-width: 0; }
.prog .org { font-size: 13px; color: var(--ink-3); margin-top: 2px; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.prog .org.wrap { white-space: normal; overflow: visible; line-height: 1.4; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tag { font-size: 12px; font-weight: 570; padding: 4px 8px; border-radius: 7px;
       background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.tag.km { background: var(--acc-soft); color: var(--acc); }
.tag.free { background: var(--ok-soft); color: var(--ok); }
.tag.dot::before { content: "·"; margin-right: 6px; color: var(--ink-4); }
.tag.gold { background: var(--gold-soft); color: var(--gold-ink); }

/* цвета направлений: один тон на направление во всем приложении */
.d-tech { background: rgba(37,99,235,.11); color: #2563eb; }
.d-art  { background: rgba(219,72,148,.11); color: #c0397f; }
.d-sport{ background: rgba(15,157,88,.12); color: #0f9d58; }
.d-sci  { background: rgba(124,58,237,.11); color: #7c3aed; }
.d-soc  { background: rgba(224,149,42,.14); color: #b5741b; }
.d-tour { background: rgba(13,148,136,.12); color: #0d9488; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-tech { color: #7aa5ff }
  :root:not([data-theme="light"]) .d-art { color: #ff86bd }
  :root:not([data-theme="light"]) .d-sport { color: #46dd8b }
  :root:not([data-theme="light"]) .d-sci { color: #b18bff }
  :root:not([data-theme="light"]) .d-soc { color: #f0b354 }
  :root:not([data-theme="light"]) .d-tour { color: #35c9ba }
}

/* ---------- поиск и фильтры */
.search { position: relative; margin-bottom: 10px; }
.search input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; background: var(--card);
                border: 1px solid var(--line); border-radius: var(--r-s); font-size: 16px;
                outline: none; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search svg { position: absolute; left: 13px; top: 15px; width: 21px; height: 21px; stroke: var(--ink-4); }
.chips { display: flex; gap: 7px; overflow-x: auto; margin: 0 calc(var(--pad) * -1) 12px;
         padding: 0 var(--pad) 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 44px; padding: 0 15px; border-radius: 11px; font-size: 14.5px;
        font-weight: 550; background: var(--card); border: 1px solid var(--line);
        color: var(--ink-2); white-space: nowrap; }
.chip:active { transform: scale(.97); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ---------- новости */
.news-hero { position: relative; overflow: hidden; border-radius: var(--r); margin-bottom: 10px;
             min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end;
             padding: 16px; color: #fff;
             background: linear-gradient(150deg, #1a2a4f 0%, #24365f 45%, #3b2a5e 100%); }
.news-hero .play { position: absolute; top: 15px; left: 16px; display: flex; align-items: center;
                   gap: 7px; font-size: 12px; font-weight: 640; color: #ffd98a; }
.news-hero .play span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16);
                        display: flex; align-items: center; justify-content: center; }
.news-hero .play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.news-hero h3 { font-size: 19px; line-height: 1.24; letter-spacing: -.022em; margin-bottom: 5px; }
.news-hero .meta { font-size: 13px; color: rgba(255,255,255,.7); }
.news { display: flex; gap: 12px; align-items: flex-start; }
.news .th { width: 54px; height: 54px; border-radius: 12px; flex: none; display: flex;
            align-items: center; justify-content: center; font-weight: 660; font-size: 15px; }
.news .grow { flex: 1; min-width: 0; }
.news .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.32; }
.news .meta { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

/* ---------- полоски результата теста */
.bars { display: grid; gap: 11px; }
.brow { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.brow .nm { font-size: 14px; color: var(--ink-2); }
.brow .tr { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.brow .tr i { display: block; height: 100%; border-radius: 4px;
              background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
/* полоска в тоне своего направления: тот же цвет, что у иконок кружков */
.brow .tr i.tech  { background: linear-gradient(90deg, #6f9dff, #2563eb); }
.brow .tr i.art   { background: linear-gradient(90deg, #e784b6, #c0397f); }
.brow .tr i.sport { background: linear-gradient(90deg, #5fce97, #0f9d58); }
.brow .tr i.sci   { background: linear-gradient(90deg, #a983f0, #7c3aed); }
.brow .tr i.soc   { background: linear-gradient(90deg, #e3b269, #b5741b); }
.brow .tr i.tour  { background: linear-gradient(90deg, #56bdb4, #0d9488); }
.brow .vl { font-size: 13px; color: var(--ink-3); text-align: right; }
.brow.top .nm { color: var(--ink); font-weight: 570; }

/* шкалы методики: имя длинное, поэтому стоит над полоской, а не сбоку */
.sbars { display: grid; gap: 15px; }
.sbar { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
.sbar .nm { font-size: 14.5px; color: var(--ink-2); }
.sbar .vl { font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sbar .vl i { font-style: normal; color: var(--ink-3); margin-left: 3px; }
.sbar .tr { grid-column: 1 / -1; height: 7px; border-radius: 4px;
            background: var(--line-2); overflow: hidden; }
.sbar .tr i { display: block; height: 100%; border-radius: 4px;
              background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
.sbar.top .nm, .sbar.top .vl { color: var(--ink); font-weight: 570; }

/* ---------- состояния и кнопки */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
       min-height: var(--tap); border-radius: var(--r-s); background: var(--acc);
       color: var(--on-acc);
       font-size: 16px; font-weight: 580; }
.btn { text-decoration: none; }
.btn.soft { background: var(--acc-soft); color: var(--acc); }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn svg { width: 19px; height: 19px; }
.btns { display: grid; gap: 8px; margin-top: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); } .dot.wait { background: var(--gold); }
.note { border-radius: var(--r-s); padding: 12px 13px; font-size: 13.5px; line-height: 1.42;
        background: var(--gold-soft); color: var(--ink-2); }
.note b { color: var(--ink); }

/* ---------- дата в строке события */
.rows .when { width: 42px; flex: none; text-align: center; line-height: 1.05; }
.rows .when b { display: block; font-size: 19px; font-weight: 660; letter-spacing: -.03em; }
.rows .when span { font-size: 11.5px; color: var(--ink-3); }

/* квадратная иконка в строке списка */
.pic.sq { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex;
          align-items: center; justify-content: center; background: var(--line-2);
          color: var(--ink-2); }
.pic.sq svg { width: 20px; height: 20px; }

/* переключатель согласия: состояние видно с одного взгляда */
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--line);
      position: relative; flex: none; transition: background .16s ease; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
             border-radius: 50%; background: var(--card); transition: transform .16s ease; }
.sw.on { background: var(--ok); }
.sw.on::after { transform: translateX(18px); }

/* карточка-кнопка на всю ширину и пустое состояние */
.card.wide { display: block; width: 100%; text-align: left; }
.card.wide .chev { align-self: center; }
.card.empty { text-align: center; padding: 26px 18px 22px; }
.card.empty .pic { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto;
                   display: flex; align-items: center; justify-content: center; }
.card.empty .pic svg { width: 26px; height: 26px; }
.card.empty p { max-width: 34ch; margin: 8px auto 14px; }
.card.empty .btn { max-width: 280px; margin: 0 auto; }

/* ---------- нижняя навигация */
nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
      background: color-mix(in srgb, var(--card) 90%, transparent);
      backdrop-filter: saturate(1.5) blur(14px); border-top: 1px solid var(--line);
      padding-bottom: env(safe-area-inset-bottom); }
nav .inner { max-width: 620px; margin: 0 auto; display: flex; }
nav button { flex: 1; min-width: 0; padding: 9px 0 10px; display: flex; flex-direction: column;
             align-items: center; gap: 3px; color: var(--ink-3); font-size: 11px; font-weight: 550; }
nav button svg { width: 23px; height: 23px; }
nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav button.on { color: var(--acc); }

/* ---------- нижний лист: выбор школы, карточка кружка, код для ребенка */
#sheet:empty { display: none; }
.scrim { position: fixed; inset: 0; z-index: 8; background: rgba(6, 10, 18, .48);
         animation: fade .18s ease; }
.pane { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
        max-height: 88vh; overflow-y: auto; background: var(--bg);
        border-radius: 22px 22px 0 0; padding: 6px var(--pad) calc(22px + env(safe-area-inset-bottom));
        animation: rise .22s cubic-bezier(.22,.85,.3,1); }
.pane::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
                background: var(--line); margin: 8px auto 14px; }
.pane > .btn { margin-top: 14px; }
.pane > .btn + p, .pane > .btn + .btn { margin-top: 12px; }
.pane .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pane .head b { flex: 1; font-size: 18px; font-weight: 650; letter-spacing: -.024em;
                line-height: 1.24; }
.pane .x { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex;
           align-items: center; justify-content: center; color: var(--ink-2);
           background: var(--card); border: 1px solid var(--line); }
.pane .x svg { width: 18px; height: 18px; stroke-width: 2; }
.pane p { margin: 0 0 12px; }
.pane .rows { max-height: 52vh; overflow-y: auto; }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(100%) } }

/* ---------- поля формы */
.fld { display: block; margin-bottom: 12px; }
.fld > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
              margin-bottom: 6px; }
.fld input { width: 100%; min-height: var(--tap); padding: 0 14px; background: var(--card);
             border: 1px solid var(--line); border-radius: var(--r-s); color: var(--ink);
             font: inherit; }
.fld input::placeholder { color: var(--ink-3); }
.fld input:focus { outline: none; border-color: var(--acc); }
.pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap);
        padding: 0 13px 0 14px; background: var(--card); border: 1px solid var(--line);
        border-radius: var(--r-s); text-align: left; }
.pick .chev { margin-left: auto; }
/* строка с выбранным районом над поиском школы */
.where { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px;
         margin-bottom: 10px; padding: 0 2px; color: var(--ink-2); font-size: 14.5px; }
.where svg { width: 18px; height: 18px; color: var(--ink-4); flex: none; }
.where span { flex: 1; text-align: left; color: var(--ink); font-weight: 560; }
.where i { font-style: normal; color: var(--acc); font-size: 13.5px; }
.warn { color: var(--danger); margin-top: 10px; }
.btn.danger { background: var(--danger); color: #fff; }
.code { word-break: break-all; font-size: 13.5px; background: var(--card); color: var(--ink-2);
        border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 13px;
        margin-bottom: 12px; }

/* ---------- заглушка на время загрузки: экран не прыгает */
.skel { height: 96px; border-radius: var(--r); margin-bottom: 10px;
        background: linear-gradient(100deg, var(--line-2) 30%, var(--line) 50%, var(--line-2) 70%);
        background-size: 240% 100%; animation: shine 1.3s linear infinite; }
.skel.s2 { height: 132px; } .skel.s3 { height: 132px; opacity: .6; }
@keyframes shine { from { background-position: 140% 0 } to { background-position: -40% 0 } }

.lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; max-width: 38ch; }


/* ---------- опросник: отдельный режим, вкладки на время уходят.
   Один вопрос на экран, вариант нажимается пальцем не глядя, прогресс виден всегда. */
body.quiz-on nav { display: none; }
body.quiz-on main { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.qtop { display: flex; align-items: center; gap: 14px; padding: 8px 0 4px;
        position: sticky; top: 0; z-index: 5;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: saturate(1.5) blur(14px); }
.qtop .x { width: 44px; height: 44px; margin: 0 -11px; display: flex;
           align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
.qtop .x[disabled] { opacity: .25; }
.qtop .x svg { width: 21px; height: 21px; }
.qbar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.qbar.hidden { background: none; }
.qbar i { display: block; height: 100%; border-radius: 2px; background: var(--acc);
          transition: width .22s ease; }
.qnum { font-size: 13.5px; font-weight: 580; color: var(--ink-2); flex: none;
        font-variant-numeric: tabular-nums; }
.qnum i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.qkicker { margin: 26px 0 0; font-size: 12.5px; font-weight: 560; color: var(--ink-3); }
.qtext, h1.qtext { margin: 9px 0 26px; font-size: 25px; line-height: 1.24; font-weight: 620;
         letter-spacing: -.028em; text-wrap: balance; color: var(--ink); }
.qtext:focus-visible, .qhead:focus-visible { outline: none; }
.qhead.num { font-size: 52px; letter-spacing: -.04em; }
.qhead.num em { font-size: .36em; }
/* крупная цифра итога: индекс ВОЗ, процент тревожности */
.qhead em { font-style: normal; font-weight: 500; color: var(--ink-3);
            font-size: .48em; margin-left: 8px; }
.brow .vl i { font-style: normal; color: var(--ink-4); }
.qopts { display: grid; gap: 9px; }
.qopts > button { display: flex; align-items: center; gap: 12px; width: 100%;
                  min-height: var(--tap); padding: 13px 15px; text-align: left;
                  background: var(--card); border: 1px solid var(--line);
                  border-radius: var(--r-s); font-size: 16px; line-height: 1.34;
                  transition: background .12s ease, border-color .12s ease, transform .1s ease; }
.qopts > button:active { background: var(--acc-soft); border-color: var(--acc);
                         transform: scale(.993); }
.qopts > button.taken { background: var(--acc-soft); border-color: var(--acc); }
/* ответ, который тут стоял до шага назад */
.qopts > button.was { border-color: var(--acc); }
.qopts > button.was::after { content: "было"; margin-left: auto; font-size: 12px;
                             color: var(--acc); flex: none; }
.qopts.pairs > button { align-items: flex-start; padding: 15px; }
.qopts.pairs .ab { width: 26px; height: 26px; flex: none; border-radius: 8px;
                   display: flex; align-items: center; justify-content: center;
                   background: var(--acc-soft); color: var(--acc);
                   font-size: 13px; font-weight: 640; margin-top: 1px; }
.who { margin: -12px 0 22px; font-size: 13.5px; font-weight: 560; color: var(--ink-2); }
.facts { display: flex; gap: 26px; margin-bottom: 13px; }
.facts b { display: block; font-size: 25px; font-weight: 660; letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; line-height: 1.1; }
.facts span { font-size: 12.5px; color: var(--ink-3); }
.report { font-size: 15px; line-height: 1.52; color: var(--ink-2); margin: 0 0 12px; }
.report:last-child { margin-bottom: 0; }
.report-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 9px; }
.report-list:last-child { margin-bottom: 0; }
.report-list li { font-size: 15px; line-height: 1.45; color: var(--ink-2);
                  padding-left: 15px; position: relative; }
.report-list li::before { content: ""; position: absolute; left: 0; top: 9px;
                          width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.btn.wide { margin-top: 18px; }
.small.center { text-align: center; }
.dot.half { background: var(--acc); }
.rows .off { opacity: .62; }
.rows .off .dot { background: var(--ink-4); }


/* ---------- карта кружков: переключатель и сама подложка */
.seg { display: flex; gap: 3px; padding: 3px; margin: 0 0 16px;
       background: var(--line-2); border-radius: 11px; }
.seg button { flex: 1; min-height: 38px; border-radius: 9px; font-size: 14.5px;
              font-weight: 560; color: var(--ink-2); transition: background .14s ease; }
.seg button.on { background: var(--card); color: var(--ink); }
.map { height: 62vh; min-height: 340px; border-radius: var(--r);
       border: 1px solid var(--line); overflow: hidden; background: var(--line-2); }
.mapnote { margin: 9px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
/* подложку в темной теме приглушаем: белая карта в ночном интерфейсе слепит.
   Правило про системную тему обязано жить внутри своего media, иначе инверсия
   применится и днем */
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg)
       brightness(.92) contrast(.92) saturate(.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg)
         brightness(.92) contrast(.92) saturate(.75); }
}
.leaflet-container { font: inherit; background: var(--line-2); }
.leaflet-control-zoom a { color: var(--ink) !important; background: var(--card) !important;
       border-color: var(--line) !important; }

@media (prefers-reduced-motion: reduce) {
  .scrim, .pane, .skel { animation: none; }
  .qbar i { transition: none; }
}